4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Tf1a,"use client" import * as React from "react" import { findReviewField, getMetadataLocation, getReviewFieldLocation, getReviewLocationKey, HumanReviewHighlight, HumanReviewPanel, REVIEW_FIELDS, type HumanReviewTheme, type JsonValue, type ReviewField, type ReviewLocation, type ReviewMetadataEntry, } from "@/components/extend/bounding-box-citations" import { PdfBlockResizableShell } from "@/components/extend/pdf-block-resizable-shell" import { PDFViewer, type PDFViewerHandle } from "@/components/extend/pdf-viewer" const DEFAULT_ZOOM = 1 export function HumanReviewBlock({ file, fields = REVIEW_FIELDS, className, metadata, resolveArrayItemMetadataPath, resolveLocation, showExpected = true, theme, }: { file?: string fields?: ReviewField[] className?: string metadata?: Record resolveArrayItemMetadataPath?: ( metadataPath: string, rowIndex: number, rowValue: JsonValue ) => string | undefined resolveLocation?: (metadataPath: string) => ReviewLocation | undefined showExpected?: boolean theme?: HumanReviewTheme }) { const [activeFieldKey, setActiveFieldKey] = React.useState(fields[0]?.key) const [hoverLocation, setHoverLocation] = React.useState(null) const viewerRef = React.useRef(null) const hoverLocationKeyRef = React.useRef(null) const resolveFieldLocation = React.useCallback( (metadataPath: string) => resolveLocation?.(metadataPath) ?? getMetadataLocation(metadata, metadataPath), [metadata, resolveLocation] ) const activeField = findReviewField(fields, activeFieldKey) ?? fields[0] const activeLocation = hoverLocation ?? getReviewFieldLocation(activeField, resolveFieldLocation) React.useEffect(() => { if (activeFieldKey || !fields[0]) return setActiveFieldKey(fields[0].key) }, [activeFieldKey, fields]) const focusField = React.useCallback( (field: ReviewField) => { if (field.key === activeFieldKey) return setActiveFieldKey(field.key) const location = getReviewFieldLocation(field, resolveFieldLocation) if (location) { viewerRef.current?.scrollToPageArea(location.page, location.area) } }, [activeFieldKey, resolveFieldLocation] ) const handleLocationHover = React.useCallback((location?: ReviewLocation) => { setHoverLocation(location ?? null) const locationKey = getReviewLocationKey(location) if (!location) { hoverLocationKeyRef.current = null return } if (locationKey === hoverLocationKeyRef.current) return hoverLocationKeyRef.current = locationKey viewerRef.current?.scrollToPageArea(location.page, location.area, { behavior: "auto", }) }, []) return ( activeLocation?.page === pageNumber ? ( ) : null } /> } right={ } /> ) } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["@extend/bounding-box-citations","@extend/pdf-block-resizable-shell","@extend/pdf-viewer"]}]]}],["$","$L50",null,{"sourceUrl":"https://ui.extend.ai/r/bounding-box-citations-block.json","proxyUrl":"https://shadcnregistry.com/r/extend/bounding-box-citations-block","itemId":"@extend/bounding-box-citations-block"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/new-york-v4/blocks/bounding-box-citations-block.tsx","content":"$52","type":"registry:component","target":"@components/blocks/bounding-box-citations-block.tsx"}]}]]}],"$L53"]}]

Bounding Box Citations

Installation

Files

@components

Styles