51: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"] 52: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"] 53: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"] 54:Tec5,import type { Source, SourceAnchor, SourceMap } from "@/lib/document-source"; import { buildColorMap, segmentDisplayLabel, segmentsPageCount, } from "@/lib/segments"; import { createSegmentedDocumentModel, type DocumentSegment, type SegmentAnchor, type SegmentedDocumentModel, } from "./segmented-document-model"; export type SegmentedSourceField = { id: string; label: string; source?: Source | null; }; export type SourcesSegmentedDocumentInput = | readonly SegmentedSourceField[] | { labels?: Record; sourceMap: SourceMap; }; export function createSourcesSegmentedDocumentModel( input: SourcesSegmentedDocumentInput, ): SegmentedDocumentModel { const fields = isSegmentedSourceFieldList(input) ? input : Object.entries(input.sourceMap).map(([id, source]) => ({ id, label: input.labels?.[id] ?? (id || "Value"), source, })); const colors = buildColorMap(fields.map((field) => field.label)); const segments: DocumentSegment[] = []; const anchors: SegmentAnchor[] = []; fields.forEach((field, index) => { const label = sourceSegmentLabel(field); const segment: DocumentSegment = { id: sourceSegmentId(field.id, index), label, pages: [], color: colors.get(label) ?? colors.get(segmentDisplayLabel(label)) ?? "var(--color-muted-foreground)", index, sourceId: field.id, }; const anchor = sourceToSegmentAnchor(field.source, segment.id); if (anchor) { segment.pages = [anchor.pageNumber]; anchors.push(anchor); } segments.push(segment); }); return createSegmentedDocumentModel({ anchors, pageCount: segmentsPageCount(segments), segments, }); } function isSegmentedSourceFieldList( input: SourcesSegmentedDocumentInput, ): input is readonly SegmentedSourceField[] { return Array.isArray(input); } export function sourceToSegmentAnchor( source: Source | null | undefined, segmentId: string, ): SegmentAnchor | null { if (!source) return null; switch (source.anchor.kind) { case "pdf_bbox": return bboxSourceAnchorToSegmentAnchor({ anchor: source.anchor, pageNumber: source.anchor.page, segmentId, }); case "image_bbox": return bboxSourceAnchorToSegmentAnchor({ anchor: source.anchor, pageNumber: source.anchor.page ?? 1, segmentId, }); case "csv_cell": case "spreadsheet_cell": case "docx_text_span": case "docx_table_cell": case "text_span": return null; } } function bboxSourceAnchorToSegmentAnchor({ anchor, pageNumber, segmentId, }: { anchor: Extract; pageNumber: number; segmentId: string; }): SegmentAnchor | null { if (!Number.isInteger(pageNumber) || pageNumber < 1) return null; if (!isValidNormalizedBox(anchor)) return null; return { id: `${segmentId}:anchor`, segmentId, pageNumber, bounds: { x: anchor.left, y: anchor.top, width: anchor.width, height: anchor.height, }, }; } function sourceSegmentLabel(field: SegmentedSourceField): string { return segmentDisplayLabel(field.label || field.id); } function sourceSegmentId(id: string, index: number): string { return `source:${id || "value"}:${index}`; } function isValidNormalizedBox({ left, top, width, height, }: { left: number; top: number; width: number; height: number; }) { return ( Number.isFinite(left) && Number.isFinite(top) && Number.isFinite(width) && Number.isFinite(height) && left >= 0 && top >= 0 && width > 0 && height > 0 && left + width <= 1 && top + height <= 1 ); } 55:T10d4,"use client"; import * as React from "react"; import type { SegmentedSourceFieldLink } from "@/components/ui/source-field-link"; import { rotateImageArea } from "@/components/ui/image-source"; import type { ImageFrameOverlayProps, ImageViewerHandle, } from "@/components/ui/image-viewer"; import { PdfHighlight, type PageOverlayProps, type PdfViewerHandle, } from "@/components/ui/pdf-viewer"; import type { SegmentAnchor } from "@/components/ui/segmented-document-model"; import { useSegmentedDocumentViewport } from "@/components/ui/segmented-document-provider"; const SOURCE_HIGHLIGHT_CLASS = "pointer-events-none absolute z-10 rounded-[2px] border border-blue-500/80 bg-blue-500/15 shadow-[0_4px_16px_rgb(37_99_235_/_18%)]"; type AnchorWithBounds = SegmentAnchor & { bounds: NonNullable; }; type SegmentedSourceLink = Pick; function activeAnchorsForPage( anchors: readonly SegmentAnchor[], pageNumber: number, ): AnchorWithBounds[] { return anchors.filter( (anchor): anchor is AnchorWithBounds => anchor.bounds != null && anchor.pageNumber === pageNumber, ); } export function useSegmentedPdfViewerHandle() { const segmentedViewport = useSegmentedDocumentViewport(); return React.useCallback( (handle: PdfViewerHandle | null) => { segmentedViewport.documentHandlers.setDocumentHandle(handle); }, [segmentedViewport.documentHandlers], ); } export function useSegmentedImageViewerHandle() { const segmentedViewport = useSegmentedDocumentViewport(); return React.useCallback( (handle: ImageViewerHandle | null) => { segmentedViewport.documentHandlers.setDocumentHandle( handle ? { getViewportElement: handle.getViewportElement, scrollToPage: (pageNumber, options) => { handle.scrollToFrameArea(pageNumber, { top: 0 }, options); }, scrollToPageArea: (target, options) => { handle.scrollToFrameArea( target.pageNumber, { left: target.left, top: target.top, width: target.width, height: target.height, }, options, ); }, } : null, ); }, [segmentedViewport.documentHandlers], ); } export function useSegmentedPdfSourceOverlay(link: SegmentedSourceLink) { return React.useCallback( ({ pageNumber }: PageOverlayProps) => { const anchors = activeAnchorsForPage(link.activeAnchors, pageNumber); if (anchors.length === 0) return null; return ( <> {anchors.map((anchor) => ( ))} ); }, [link.activeAnchors], ); } export function useSegmentedImageSourceOverlay(link: SegmentedSourceLink) { return React.useCallback( ({ frameNumber, rotation }: ImageFrameOverlayProps) => { const anchors = activeAnchorsForPage(link.activeAnchors, frameNumber); if (anchors.length === 0) return null; return ( <> {anchors.map((anchor) => { const area = rotateImageArea( { left: anchor.bounds.x * 100, top: anchor.bounds.y * 100, width: anchor.bounds.width * 100, height: anchor.bounds.height * 100, }, rotation, ); return (

); })} ); }, [link.activeAnchors], ); } 4d:["$","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":[]}],["$","$L51",null,{"registryDependencies":["@retab/document-source","@retab/source-field-link","@retab/image-source","@retab/image-viewer","@retab/pdf-viewer","@retab/segmented-document"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.retab.com/r/source-segmented-document.json","proxyUrl":"https://shadcnregistry.com/r/retab/source-segmented-document","itemId":"@retab/source-segmented-document"}],["$","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"}],["$","$L53",null,{"files":[{"path":"registry/new-york-v4/ui/source-segmented-document-model.ts","content":"$54","type":"registry:ui","target":"@ui/source-segmented-document-model.ts"},{"path":"registry/new-york-v4/ui/source-segmented-document-overlays.tsx","content":"$55","type":"registry:ui","target":"@ui/source-segmented-document-overlays.tsx"}]}]]}],"$L56"]}]

Source Segmented Document

Installation

Files

@ui

Styles