{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "signature-pdf-viewer",
  "type": "registry:component",
  "title": "Signature PDF Viewer",
  "description": "react-pdf preview with text-anchor highlighting and manual click-to-place signature rectangles.",
  "registryDependencies": [
    "badge",
    "button"
  ],
  "dependencies": [
    "@signature-kit/pdf",
    "effect@4.0.0-beta.86",
    "lucide-react",
    "react-pdf@10.4.1"
  ],
  "files": [
    {
      "path": "registry/default/signature-pdf-viewer/signature-pdf-viewer.tsx",
      "type": "registry:component",
      "target": "@components/signature-kit/signature-pdf-viewer.tsx",
      "content": "\"use client\";\n\nimport { findPdfTextAnchors } from \"@signature-kit/pdf/anchors\";\nimport { liteParseWorkerBrowserLayer } from \"@signature-kit/pdf/liteparse-browser\";\nimport {\n  DEFAULT_PDF_ANCHOR_STAMP_SIZE,\n  type PdfSignaturePage,\n  type PdfSignatureRect,\n  type PdfStampSize,\n  pdfTextAnchorMatchersFromProps,\n} from \"@signature-kit/pdf/config\";\nimport { Effect, Exit, Result } from \"effect\";\nimport { Loader2, LocateFixed } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Document, Page, pdfjs } from \"react-pdf\";\nimport \"react-pdf/dist/Page/AnnotationLayer.css\";\nimport \"react-pdf/dist/Page/TextLayer.css\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nif (typeof window !== \"undefined\") {\n  pdfjs.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;\n}\n\nexport type SignaturePdfViewerMode = \"anchors\" | \"manual\";\n\nexport type SignaturePdfViewerProps = {\n  readonly file: Uint8Array;\n  readonly pages: ReadonlyArray<PdfSignaturePage>;\n  readonly mode: SignaturePdfViewerMode;\n  readonly value: ReadonlyArray<PdfSignatureRect>;\n  readonly onChange: (rects: ReadonlyArray<PdfSignatureRect>) => void;\n  readonly anchorTokens?: ReadonlyArray<string>;\n  readonly anchorDigits?: ReadonlyArray<string>;\n  readonly stampSize?: PdfStampSize;\n  readonly pageWidth?: number;\n  readonly className?: string;\n};\n\nconst emptyAnchorValues: ReadonlyArray<string> = [];\n\ntype ActiveAnchorScan = {\n  readonly owner: number;\n  cancel: () => void;\n};\n\nconst clamp = (value: number, min: number, max: number): number =>\n  Math.min(max, Math.max(min, value));\n\nexport function SignaturePdfViewer({\n  file,\n  pages,\n  mode,\n  value,\n  onChange,\n  anchorTokens = emptyAnchorValues,\n  anchorDigits = emptyAnchorValues,\n  stampSize = DEFAULT_PDF_ANCHOR_STAMP_SIZE,\n  pageWidth = 720,\n  className,\n}: SignaturePdfViewerProps) {\n  const [anchorStatus, setAnchorStatus] = React.useState<\"idle\" | \"scanning\" | \"error\">(\"idle\");\n  const activeAnchorScan = React.useRef<ActiveAnchorScan | null>(null);\n  const anchorScanOwner = React.useRef(0);\n  const matchers = React.useMemo(\n    () => pdfTextAnchorMatchersFromProps(anchorTokens, anchorDigits),\n    [anchorDigits, anchorTokens],\n  );\n  const anchorScanInputs = React.useMemo(\n    () => ({ file, matchers, mode, pages, stampSize }),\n    [file, matchers, mode, pages, stampSize],\n  );\n  const handledAnchorScanInputs = React.useRef(anchorScanInputs);\n  const documentFile = React.useMemo(() => {\n    const buffer = new ArrayBuffer(file.byteLength);\n    new Uint8Array(buffer).set(file);\n    return { data: buffer };\n  }, [file]);\n  const invalidateAnchorScan = React.useCallback((): void => {\n    const activeScan = activeAnchorScan.current;\n    anchorScanOwner.current += 1;\n    activeAnchorScan.current = null;\n    activeScan?.cancel();\n  }, []);\n\n  React.useEffect(() => {\n    if (handledAnchorScanInputs.current === anchorScanInputs) return;\n    handledAnchorScanInputs.current = anchorScanInputs;\n    invalidateAnchorScan();\n    setAnchorStatus(\"idle\");\n  }, [anchorScanInputs, invalidateAnchorScan]);\n\n  React.useEffect(() => invalidateAnchorScan, [invalidateAnchorScan]);\n\n  const scanAnchors = (): void => {\n    invalidateAnchorScan();\n    handledAnchorScanInputs.current = anchorScanInputs;\n    if (matchers.length === 0) {\n      setAnchorStatus(\"idle\");\n      return;\n    }\n\n    const owner = anchorScanOwner.current + 1;\n    const scan: ActiveAnchorScan = { owner, cancel: () => {} };\n    anchorScanOwner.current = owner;\n    activeAnchorScan.current = scan;\n    setAnchorStatus(\"scanning\");\n    const cancel = Effect.runCallback(\n      findPdfTextAnchors({\n        pdf: file,\n        pages,\n        matchers,\n        stampSize,\n      }).pipe(Effect.provide(liteParseWorkerBrowserLayer), Effect.result),\n      {\n        onExit: (exit) => {\n          if (anchorScanOwner.current !== owner || activeAnchorScan.current !== scan) return;\n          activeAnchorScan.current = null;\n          if (Exit.isSuccess(exit) && Result.isSuccess(exit.value)) {\n            setAnchorStatus(\"idle\");\n            onChange(exit.value.success);\n            return;\n          }\n          setAnchorStatus(\"error\");\n        },\n      },\n    );\n\n    if (activeAnchorScan.current === scan) scan.cancel = cancel;\n  };\n\n  const placeManually = (\n    event: React.PointerEvent<HTMLDivElement>,\n    page: PdfSignaturePage,\n  ): void => {\n    if (mode !== \"manual\") return;\n    const bounds = event.currentTarget.getBoundingClientRect();\n    const scale = bounds.width / page.width;\n    const pageX = (event.clientX - bounds.left) / scale;\n    const pageY = (event.clientY - bounds.top) / scale;\n    const rect: PdfSignatureRect = {\n      pageIndex: page.index,\n      x: clamp(pageX - stampSize.width / 2, 0, page.width - stampSize.width),\n      y: clamp(pageY - stampSize.height / 2, 0, page.height - stampSize.height),\n      width: stampSize.width,\n      height: stampSize.height,\n    };\n    onChange([...value.filter((candidate) => candidate.pageIndex !== page.index), rect]);\n  };\n\n  return (\n    <div data-slot=\"signature-pdf-viewer\" className={cn(\"flex flex-col gap-3\", className)}>\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <div className=\"flex items-center gap-2\">\n          <Badge variant=\"outline\">\n            {mode === \"anchors\" ? \"Anchor placement\" : \"Manual placement\"}\n          </Badge>\n          <span className=\"text-sm text-muted-foreground\">{value.length} placement(s)</span>\n        </div>\n        {mode === \"anchors\" ? (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            disabled={anchorStatus === \"scanning\"}\n            onClick={scanAnchors}\n          >\n            {anchorStatus === \"scanning\" ? (\n              <Loader2 aria-hidden className=\"size-4 animate-spin\" />\n            ) : (\n              <LocateFixed aria-hidden className=\"size-4\" />\n            )}\n            Find anchors\n          </Button>\n        ) : null}\n      </div>\n      {anchorStatus === \"error\" ? (\n        <p className=\"rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          No matching anchor could be read from this PDF.\n        </p>\n      ) : null}\n      <div className=\"max-h-[70vh] overflow-auto rounded-lg border border-border bg-muted/30 p-3\">\n        <Document\n          file={documentFile}\n          loading={<p className=\"p-6 text-sm text-muted-foreground\">Loading PDF…</p>}\n        >\n          <div className=\"flex flex-col items-center gap-4\">\n            {pages.map((page) => {\n              const scale = pageWidth / page.width;\n              const pageRects = value.filter((rect) => rect.pageIndex === page.index);\n              return (\n                <div\n                  key={page.index}\n                  data-slot=\"signature-pdf-page\"\n                  className=\"relative overflow-hidden rounded-md bg-background shadow-sm ring-1 ring-border\"\n                  style={{ width: pageWidth }}\n                  onPointerDown={(event) => placeManually(event, page)}\n                >\n                  <Page pageNumber={page.index + 1} width={pageWidth} />\n                  {pageRects.map((rect) => (\n                    <div\n                      key={`${rect.pageIndex}-${rect.x}-${rect.y}`}\n                      data-slot=\"signature-placement-rect\"\n                      className=\"pointer-events-none absolute rounded-sm border-2 border-primary bg-primary/10 text-[10px] font-medium text-primary\"\n                      style={{\n                        left: rect.x * scale,\n                        top: rect.y * scale,\n                        width: rect.width * scale,\n                        height: rect.height * scale,\n                      }}\n                    >\n                      <span className=\"absolute left-1 top-1 rounded-sm bg-background/90 px-1\">\n                        signature\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              );\n            })}\n          </div>\n        </Document>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}