Breadcrumb Fold

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useLayoutEffect,
7  useRef,
8  useState,
9  type CSSProperties,
10  type FocusEvent as ReactFocusEvent,
11  type PointerEvent as ReactPointerEvent,
12  type ReactNode,
13} from "react";
14 
15// ---------------------------------------------------------------------------
16// BellowsCrumb — a breadcrumb that behaves like a camera bellows. Ancestor
17// segments rest pleated into narrow slivers (label clipped, three 1px fold
18// lines in --border, a mask fade on the text edge); the current segment sits
19// fully extended. Hovering or focusing any sliver expands it to its measured
20// natural width while its neighbours redistribute the remaining budget
21// proportionally — never removing a level (unlike an ellipsis-menu
22// breadcrumb) and never articulating at a joint (unlike a hinged tree).
23//
24// The conservation trick is arithmetic, not physics: every segment's
25// flex-basis animates on the exact same CSS transition (duration + easing),
26// so at any instant t all of them sit at start_i + (end_i - start_i)*e(t).
27// Because sum(start_i) == sum(end_i) == the available width by construction,
28// sum(start_i) + (sum(end_i) - sum(start_i)) * e(t) collapses to a constant
29// — the row's total width never wobbles mid-spring, even with an
30// overshooting bezier, with no per-frame JS loop required.
31//
32// Natural widths are read from a hidden ghost copy of the full trail
33// (absolute, invisible, nowrap, same padding as the real row) so measuring
34// the visible — already-clipped — row can never feed back into itself.
35// ---------------------------------------------------------------------------
36 
37export type BellowsCrumbItem = {
38  id: string;
39  label: string;
40  /** Renders an <a>. Omit and the segment renders a <button>. */
41  href?: string;
42};
43 
44export interface BellowsCrumbProps {
45  /** Ordered root → current. The last item is the current page. */
46  items: BellowsCrumbItem[];
47  onNavigate?: (item: BellowsCrumbItem, index: number) => void;
48  /** Width a pleated segment rests at. Default 20. */
49  pleat?: number;
50  ariaLabel?: string;
51  className?: string;
52}
53 
54const SEP_WIDTH = 26; // fixed chevron + margins — not content-dependent, no measuring needed
55const TRANSITION =
56  "flex-basis 420ms cubic-bezier(0.34, 1.56, 0.64, 1)"; // identical on every segment — load-bearing for conservation
57 
58function computeWidths(
59  natural: number[],
60  available: number,
61  expandedIndex: number,
62  pleat: number
63): number[] {
64// … truncated