Page Ribbon

1"use client";
2 
3import * as React from "react";
4 
5import {
6  getSegmentInteractionState,
7  getSegmentSurfaceProps,
8  scopeSegmentInteraction,
9  type SegmentInteraction,
10} from "@/lib/segment-interaction";
11import {
12  buildPageRuns,
13  normalizePageCount,
14  segmentDisplayLabel,
15} from "@/lib/segments";
16import { cn } from "@/lib/utils";
17 
18import type { DocumentSegment } from "./segmented-document-model";
19 
20/** One lane of the ribbon: segments positioned by their page ranges. */
21export interface RibbonRow {
22  id: string;
23  label?: string;
24  segments: DocumentSegment[];
25}
26 
27export interface PageRibbonProps {
28  rows: RibbonRow[];
29  pageCount: number;
30  /** "vertical" — pages run top→bottom (split sidebar). "horizontal" — left→right (partition waterfall). */
31  orientation?: "vertical" | "horizontal";
32  /** 1-based current page; drawn as a cursor line + caret across the rows. */
33  currentPage?: number | null;
34  /** 0..1 fine-grained scroll cursor (horizontal only); overrides the page line. */
35  scrollProgress?: number | null;
36  /** Shared preview state. */
37  interaction?: SegmentInteraction;
38  /** Click a segment → jump the document to its first page. */
39  onSelectPage?: (page: number) => void;
40  /** Fired when a segment surface is clicked. */
41  onSelect?: (segment: DocumentSegment) => void;
42  showTicks?: boolean;
43  /** Thickness of each row: column width (vertical) or row height (horizontal), px. */
44  rowThickness?: number;
45  className?: string;
46}
47 
48/**
49 * A page-axis ribbon: every segment is drawn as a block spanning its pages.
50 * One vertical row with tiled segments is the split sidebar; many horizontal
51 * rows (consensus + votes) is the partition waterfall — same component, same
52 * `Segment[]` model. Driven by shared interaction state so hovering a segment
53 * here dims the others in the legend too.
54 */
55export function PageRibbon({
56  rows,
57  pageCount,
58  orientation = "horizontal",
59  currentPage,
60  scrollProgress,
61  interaction,
62  onSelectPage,
63  onSelect,
64  showTicks = false,
65  rowThickness,
66  className,
67}: PageRibbonProps) {
68  const vertical = orientation === "vertical";
69  const total = normalizePageCount(pageCount);
70  const defaultThickness = vertical ? 44 : 10;
71  const thickness =
72    rowThickness != null && Number.isFinite(rowThickness) && rowThickness > 0
73      ? rowThickness
74      : defaultThickness;
75  const visibleSegments = React.useMemo(
76    () =>
77      rows.flatMap((row) =>
78        row.segments.filter(
79// … truncated