50: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"] 51: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"] 52:T1b20,"use client"; import * as React from "react"; import { getSegmentInteractionState, getSegmentSurfaceProps, scopeSegmentInteraction, type SegmentInteraction, } from "@/lib/segment-interaction"; import { normalizePageCount, segmentDisplayLabel, segmentsPageCount, type Segment, } from "@/lib/segments"; import { cn } from "@/lib/utils"; export interface PageTimelineProps { segments: Segment[]; /** Total pages; defaults to the max page across segments. */ pageCount?: number; /** Shared preview state. */ interaction?: SegmentInteraction; /** 1-based current page to mark (e.g. synced to a PDF scroll position). */ currentPage?: number | null; /** Fired when a page cell is clicked. */ onSelectPage?: (page: number) => void; /** Fired when a segment-owned page cell is clicked. */ onSelect?: (segment: Segment) => void; className?: string; } interface TimelinePageSegment { segmentIndexes: number[]; primarySegment?: Segment; label: string; } /** * A horizontal strip of page cells colored by the segment mapped to each page. * It ties the legend and sidebar to the document: hovering a cell previews its * segment, previewing a segment elsewhere dims unrelated pages, and clicking * a cell jumps the document. If multiple segments map to a page, the first * segment in document order owns the preview state and the page label calls out * the overlap. */ export function PageTimeline({ segments, pageCount, interaction, currentPage, onSelectPage, onSelect, className, }: PageTimelineProps) { const total = normalizePageCount(pageCount ?? segmentsPageCount(segments)); const segmentIndexesByPage = React.useMemo( () => buildPageSegmentIndexes(segments), [segments], ); const segmentByIndex = React.useMemo( () => buildSegmentByIndex(segments), [segments], ); const segmentIndexById = React.useMemo( () => buildSegmentIndexById(segments), [segments], ); const visibleSegments = React.useMemo( () => segments.filter((segment) => segment.pages.some( (page) => Number.isInteger(page) && page >= 1 && page <= total, ), ), [segments, total], ); const scopedInteraction = React.useMemo( () => scopeSegmentInteraction( interaction, visibleSegments.map((segment) => segment.id), ), [interaction, visibleSegments], ); const interactionState = React.useMemo( () => getSegmentInteractionState({ segments: visibleSegments, currentPage, interaction: scopedInteraction, }), [currentPage, scopedInteraction, visibleSegments], ); if (total <= 0) return null; const previewedSegmentIndex = getPreviewedSegmentIndex({ previewedSegmentId: interactionState.previewSegmentId, segmentIndexById, }); return (

scopedInteraction?.clearPreview()} className={cn( "flex items-stretch gap-px overflow-hidden rounded-md", className, )} > {Array.from({ length: total }, (_, i) => { const page = i + 1; const pageSegment = getTimelinePageSegment({ page, segmentIndexesByPage, segmentByIndex, }); const { segmentIndexes, primarySegment } = pageSegment; const surfaceProps = primarySegment ? getSegmentSurfaceProps({ segment: primarySegment, interaction: scopedInteraction, interactionState, isCurrent: currentPage === page, onSelect, }) : null; const dimmed = previewedSegmentIndex != null ? !segmentIndexes.includes(previewedSegmentIndex) : false; const isCurrent = currentPage === page; return ( ); })}

); } function buildSegmentByIndex(segments: Segment[]): Map { const map = new Map(); segments.forEach((segment, index) => map.set(index, segment)); return map; } function buildSegmentIndexById(segments: Segment[]): Map { const map = new Map(); segments.forEach((segment, index) => map.set(segment.id, index)); return map; } function buildPageSegmentIndexes(segments: Segment[]): Map { const owners = new Map(); segments.forEach((segment, index) => { segment.pages.forEach((page) => { if (!Number.isInteger(page) || page <= 0) return; const list = owners.get(page) ?? []; list.push(index); owners.set(page, list); }); }); return owners; } function getTimelinePageSegment({ page, segmentIndexesByPage, segmentByIndex, }: { page: number; segmentIndexesByPage: Map; segmentByIndex: Map; }): TimelinePageSegment { const segmentIndexes = segmentIndexesByPage.get(page) ?? []; const primarySegment = segmentIndexes.length ? segmentByIndex.get(segmentIndexes[0]) : undefined; const segmentLabel = segmentIndexes.length > 1 ? `${segmentIndexes.length} segments` : primarySegment ? segmentDisplayLabel(primarySegment.label) : undefined; return { segmentIndexes, primarySegment, label: `Page ${page}${segmentLabel ? ` · ${segmentLabel}` : ""}`, }; } function getPreviewedSegmentIndex({ previewedSegmentId, segmentIndexById, }: { previewedSegmentId: string | null; segmentIndexById: Map; }): number | undefined { return previewedSegmentId ? segmentIndexById.get(previewedSegmentId) : undefined; } 4f:["$","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,["$","$L50",null,{"namespace":"@retab","registryDependencies":["@retab/segments","@retab/segment-interaction","@retab/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york-v4/ui/page-timeline.tsx","content":"$52","type":"registry:ui","target":"@ui/page-timeline.tsx"}],"className":"h-[70svh] min-h-80"}]]}]