{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "layout-blocks-block",
  "title": "Layout Blocks",
  "description": "A structured layout review block with confidence cards and PDF region overlays.",
  "registryDependencies": [
    "@extend/layout-blocks",
    "@extend/pdf-block-resizable-shell",
    "@extend/pdf-viewer"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/blocks/layout-blocks-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  ATTENTION_OCR_OUTPUT,\n  blockToHighlightArea,\n  getOcrBlocks,\n  OcrBlockOverlay,\n  OcrBlocksPanel,\n  PDF_URL,\n  type OcrBlock,\n  type ParsedOcrOutput,\n} from \"@/components/extend/layout-blocks\"\nimport { PdfBlockResizableShell } from \"@/components/extend/pdf-block-resizable-shell\"\nimport { PDFViewer, type PDFViewerHandle } from \"@/components/extend/pdf-viewer\"\n\nexport function OcrBlocksBlock({\n  file = PDF_URL,\n  output = ATTENTION_OCR_OUTPUT,\n}: {\n  file?: string\n  output?: ParsedOcrOutput\n}) {\n  const blocks = React.useMemo(() => getOcrBlocks(output), [output])\n  const [activeBlockId, setActiveBlockId] = React.useState(blocks[0]?.id)\n  const viewerRef = React.useRef<PDFViewerHandle>(null)\n  const activeBlockIdRef = React.useRef(activeBlockId)\n  const activeBlock = blocks.find((block) => block.id === activeBlockId)\n  React.useEffect(() => {\n    activeBlockIdRef.current = activeBlockId\n  }, [activeBlockId])\n  if (blocks.length && !blocks.some((block) => block.id === activeBlockId)) {\n    setActiveBlockId(blocks[0].id)\n  }\n  const focusBlock = React.useCallback((block: OcrBlock) => {\n    if (block.id === activeBlockIdRef.current) return\n    const area = blockToHighlightArea(block)\n    activeBlockIdRef.current = block.id\n    setActiveBlockId(block.id)\n    viewerRef.current?.scrollToPageArea(\n      block.page,\n      {\n        left: Number.parseFloat(String(area.left)),\n        top: Number.parseFloat(String(area.top)),\n        width: Number.parseFloat(String(area.width)),\n        height: Number.parseFloat(String(area.height)),\n      },\n      { behavior: \"auto\" }\n    )\n  }, [])\n  const activeOverlayBlockId = activeBlock?.id\n  const renderPageOverlay = React.useCallback(\n    ({\n      pageHeight,\n      pageNumber,\n      pageWidth,\n    }: {\n      pageHeight: number\n      pageNumber: number\n      pageWidth: number\n    }) =>\n      blocks\n        .filter((block) => block.page === pageNumber)\n        .map((block) => (\n          <OcrBlockOverlay\n            key={block.id}\n            block={block}\n            isActive={block.id === activeOverlayBlockId}\n            pageHeight={pageHeight}\n            pageWidth={pageWidth}\n          />\n        )),\n    [activeOverlayBlockId, blocks]\n  )\n  return (\n    <PdfBlockResizableShell\n      autoSaveId=\"pdf-block-ocr\"\n      left={\n        <PDFViewer\n          ref={viewerRef}\n          src={file}\n          defaultZoom={1}\n          renderPageOverlay={renderPageOverlay}\n        />\n      }\n      right={\n        <OcrBlocksPanel\n          activeBlockId={activeBlock?.id}\n          blocks={blocks}\n          className=\"h-full\"\n          onBlockFocus={focusBlock}\n        />\n      }\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/blocks/layout-blocks-block.tsx"
    }
  ],
  "categories": [
    "documents",
    "blocks"
  ],
  "type": "registry:block",
  "dependencies": []
}