4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T138f,"use client"; import * as React from "react"; import type { Source } from "@/lib/document-source"; import { sourceToCsvCell, useCsvSourceTarget, } from "@/components/ui/csv-source"; import { CsvViewerDocument, type CsvViewerHandle, } from "@/components/ui/csv-viewer"; import { FileViewer, FileViewerContent, FileViewerHeader, FileViewerTitle, FileViewerProvider, FileViewerSidebar, FileViewerSidebarContent, FileViewerInset, FileViewerControls, FileViewerViewport, } from "@/components/ui/file-viewer"; import { SegmentedDocumentProvider } from "@/components/ui/segmented-document-provider"; import { useSegmentedSourceFieldLink } from "@/components/ui/source-field-link"; import { SourceFieldList, type SourceField, } from "@/components/ui/source-field-list"; import { createSourcesSegmentedDocumentModel } from "@/components/ui/source-segmented-document-model"; import csvSample from "@/components/viewers/sample-data/csv-sources.json"; const CSV_TEXT = `region,quarter,revenue,customers,nrr North America,Q1,1240000,48,1.12 North America,Q2,1510000,61,1.21 EMEA,Q1,820000,33,1.08 EMEA,Q2,910000,39,1.15 APAC,Q1,430000,18,1.04 APAC,Q2,560000,24,1.11`; const CSV_SOURCE = { kind: "text" as const, text: CSV_TEXT, fileName: "sales.csv", }; type CsvField = SourceField & { source: Source }; const FIELDS = (csvSample as CsvField[]).map((field) => ({ ...field, hint: field.source.anchor.kind === "csv_cell" ? `Cell ${field.source.anchor.coordinate ?? field.source.anchor.column}` : undefined, })); const FIELD_BY_KEY = new Map(FIELDS.map((field) => [field.key, field])); const SEGMENTED_DOCUMENT = createSourcesSegmentedDocumentModel( FIELDS.map((field) => ({ id: field.key, label: field.label, source: field.source, })), ); /** * CSV sources block — extracted values linked to the spreadsheet cells they came * from. Hovering a field highlights its cell and scrolls to it. Segmented * source interaction owns preview/selection while the CSV source adapter owns * cell navigation. */ export function CsvSourcesBlock() { const viewerRef = React.useRef(null); return ( ); } function CsvSourcesContent({ viewerRef, }: { viewerRef: React.RefObject; }) { const target = useCsvSourceTarget(viewerRef); const segmentedLink = useSegmentedSourceFieldLink({ initialSourcePath: FIELDS[0]?.key, }); const link = useTargetedSourceFieldLink({ fieldByKey: FIELD_BY_KEY, link: segmentedLink, target, }); const activeSource = link.activeSourcePath ? FIELD_BY_KEY.get(link.activeSourcePath)?.source : undefined; const activeCell = sourceToCsvCell(activeSource); return ( ); } function useTargetedSourceFieldLink({ fieldByKey, link, target, }: { fieldByKey: ReadonlyMap; link: ReturnType; target: ReturnType; }) { const scrollToField = React.useCallback( (path: string, behavior: ScrollBehavior) => { const source = fieldByKey.get(path)?.source; if (source) target.scrollTo?.(source, { behavior }); }, [fieldByKey, target], ); const onSourceHover = React.useCallback( (path: string | null) => { link.onSourceHover(path); if (path) scrollToField(path, "auto"); }, [link, scrollToField], ); const selectSourcePath = React.useCallback( (path: string) => { link.selectSourcePath?.(path); scrollToField(path, "smooth"); }, [link, scrollToField], ); return React.useMemo( () => ({ ...link, onSourceHover, selectSourcePath, }), [link, onSourceHover, selectSourcePath], ); } 52:Te59,[ { "key": "naQ1Revenue", "label": "North America Q1 revenue", "value": "$1,240,000", "source": { "content": "1240000", "anchor": { "kind": "csv_cell", "row": 1, "column": "C", "coordinate": "C2" } } }, { "key": "naQ1Customers", "label": "North America Q1 customers", "value": "48", "source": { "content": "48", "anchor": { "kind": "csv_cell", "row": 1, "column": "D", "coordinate": "D2" } } }, { "key": "naQ1Nrr", "label": "North America Q1 net revenue retention", "value": "1.12", "source": { "content": "1.12", "anchor": { "kind": "csv_cell", "row": 1, "column": "E", "coordinate": "E2" } } }, { "key": "naQ2Revenue", "label": "North America Q2 revenue", "value": "$1,510,000", "source": { "content": "1510000", "anchor": { "kind": "csv_cell", "row": 2, "column": "C", "coordinate": "C3" } } }, { "key": "naQ2Customers", "label": "North America Q2 customers", "value": "61", "source": { "content": "61", "anchor": { "kind": "csv_cell", "row": 2, "column": "D", "coordinate": "D3" } } }, { "key": "naQ2Nrr", "label": "North America Q2 net revenue retention", "value": "1.21", "source": { "content": "1.21", "anchor": { "kind": "csv_cell", "row": 2, "column": "E", "coordinate": "E3" } } }, { "key": "emeaQ1Revenue", "label": "EMEA Q1 revenue", "value": "$820,000", "source": { "content": "820000", "anchor": { "kind": "csv_cell", "row": 3, "column": "C", "coordinate": "C4" } } }, { "key": "emeaQ1Customers", "label": "EMEA Q1 customers", "value": "33", "source": { "content": "33", "anchor": { "kind": "csv_cell", "row": 3, "column": "D", "coordinate": "D4" } } }, { "key": "emeaQ2Revenue", "label": "EMEA Q2 revenue", "value": "$910,000", "source": { "content": "910000", "anchor": { "kind": "csv_cell", "row": 4, "column": "C", "coordinate": "C5" } } }, { "key": "emeaQ2Customers", "label": "EMEA Q2 customers", "value": "39", "source": { "content": "39", "anchor": { "kind": "csv_cell", "row": 4, "column": "D", "coordinate": "D5" } } }, { "key": "emeaQ2Nrr", "label": "EMEA Q2 net revenue retention", "value": "1.15", "source": { "content": "1.15", "anchor": { "kind": "csv_cell", "row": 4, "column": "E", "coordinate": "E5" } } }, { "key": "apacQ1Revenue", "label": "APAC Q1 revenue", "value": "$430,000", "source": { "content": "430000", "anchor": { "kind": "csv_cell", "row": 5, "column": "C", "coordinate": "C6" } } }, { "key": "apacQ1Nrr", "label": "APAC Q1 net revenue retention", "value": "1.04", "source": { "content": "1.04", "anchor": { "kind": "csv_cell", "row": 5, "column": "E", "coordinate": "E6" } } }, { "key": "apacQ2Revenue", "label": "APAC Q2 revenue", "value": "$560,000", "source": { "content": "560000", "anchor": { "kind": "csv_cell", "row": 6, "column": "C", "coordinate": "C7" } } }, { "key": "apacQ2Customers", "label": "APAC Q2 customers", "value": "24", "source": { "content": "24", "anchor": { "kind": "csv_cell", "row": 6, "column": "D", "coordinate": "D7" } } }, { "key": "apacQ2Nrr", "label": "APAC Q2 net revenue retention", "value": "1.11", "source": { "content": "1.11", "anchor": { "kind": "csv_cell", "row": 6, "column": "E", "coordinate": "E7" } } } ] 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@retab","registryDependencies":["@retab/csv-viewer","@retab/csv-source","@retab/document-source","@retab/segmented-document","@retab/source-segmented-document","@retab/source-field-list","@retab/source-field-link","@retab/source-indicator"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/new-york-v4/blocks/csv-sources-block.tsx","content":"$51","type":"registry:component","target":"@components/blocks/csv-sources-block.tsx"},{"path":"components/viewers/sample-data/csv-sources.json","content":"$52","type":"registry:file","target":"@components/viewers/sample-data/csv-sources.json"}],"className":"h-[70svh] min-h-80"}]]}]