63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 65:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 67: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 68:T5337,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import type { KeyboardEvent } from "react"; // --------------------------------------------------------------------------- // StripStation — a turn-by-turn directions panel drawn as a straight-line // diagram (a DOT "SLD"): the route is unbent into one vertical strip where // vertical space between maneuvers is proportional to real ground distance, // not to row count or elapsed time. A 200m hop and a 40km motorway leg get // visibly different heights instead of identical row heights. // // Geometry contract: row pitch = max(44px, distanceM * scalePxPerM). When // the true proportional pitch would fall under the 44px floor, the strip // does NOT silently clamp — it flags the row with the standard equation- // station break glyph (a zigzag) and the chainage ticks skip a number, // so the compression is visible rather than a quiet lie about distance. // --------------------------------------------------------------------------- export type StripStationManeuver = { /** stable id */ id: string; /** e.g. "Turn left onto Mill Rd" */ instruction: string; /** optional secondary road label appended after the instruction */ road?: string; /** length, in meters, of the leg that STARTS at this maneuver (0 for arrival) */ distanceM: number; /** signed exit angle in degrees: 0 = straight ahead, negative = left, positive = right, ±180 = U-turn */ turnAngleDeg: number; /** absolute compass bearing (0-360) of the leg that follows this maneuver */ headingDeg: number; }; export interface StripStationProps { /** the route, depart-to-arrive, oldest first */ steps: StripStationManeuver[]; /** route progress in meters from the start; drives the marker + auto-follow scroll */ positionM?: number; /** pixels per meter of ground distance before the 44px floor applies */ scalePxPerM?: number; /** accessible label for the directions region */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } const ROW_H = 44; // also the falsifiable minimum pitch, in px const GLYPH = 28; function clamp(v: number, min: number, max: number) { return Math.min(max, Math.max(min, v)); } function formatDistance(m: number) { if (m >= 1000) return `${(m / 1000).toFixed(m >= 10000 ? 0 : 1)} km`; return `${Math.round(Math.max(0, m))} m`; } // DOT-style chainage: whole hundreds "+" remainder, e.g. 150m -> "1+50" function formatChainage(m: number) { const safe = Math.max(0, m); let whole = Math.floor(safe / 100); let rem = Math.round(safe % 100); if (rem === 100) { rem = 0; whole += 1; } return `${whole}+${String(rem).padStart(2, "0")}`; } // smallest step (in meters) on a 1-2-5 ladder whose pixel pitch lands in a // legible band, so the tick density adapts to the chosen scale instead of // being hardcoded. function niceStepMeters(scale: number) { if (scale <= 0) return 100; const [lo, hi] = [24, 56]; let mag = 1; for (let guard = 0; guard < 60; guard++) { for (const base of [1, 2, 5]) { const step = base * mag; const px = step * scale; if (px >= lo && px <= hi) return step; } const midPx = 2 * mag * scale; if (midPx < lo) mag *= 10; else mag /= 10; } return 100; } function ticksInRange(fromM: number, toM: number, step: number) { if (step <= 0) return [] as number[]; const start = Math.ceil((fromM + 1e-6) / step) * step; const out: number[] = []; for (let m = start; m < toM - 1e-6; m += step) out.push(m); return out; } type Rows = { cumD: number[]; // meters at each maneuver, index-aligned to steps y: number[]; // px at top of each row, index-aligned to steps broke: boolean[]; // true when the segment INTO row i was floored totalY: number; totalD: number; }; function buildRows(steps: StripStationManeuver[], scale: number): Rows { const n = steps.length; const cumD = new Array(n).fill(0); const y = new Array(n).fill(0); const broke = new Array(n).fill(false); for (let i = 1; i < n; i++) { const legM = Math.max(0, steps[i - 1]?.distanceM ?? 0); cumD[i] = (cumD[i - 1] ?? 0) + legM; const natural = legM * scale; broke[i] = natural < ROW_H - 0.01; const pitch = Math.max(ROW_H, natural); y[i] = (y[i - 1] ?? 0) + pitch; } return { cumD, y, broke, totalY: y[n - 1] ?? 0, totalD: cumD[n - 1] ?? 0, }; } function yForPosition(pm: number, rows: Rows) { const { cumD, y } = rows; const n = cumD.length; if (n === 0) return 0; if (pm <= (cumD[0] ?? 0)) return y[0] ?? 0; for (let i = 0; i < n - 1; i++) { const next = cumD[i + 1] ?? 0; if (pm < next) { const start = cumD[i] ?? 0; const span = next - start; const t = span > 0 ? (pm - start) / span : 0; return (y[i] ?? 0) + t * ((y[i + 1] ?? 0) - (y[i] ?? 0)); } } return y[n - 1] ?? 0; } // index of the leg the driver is currently ON (0..n-2), clamped function currentLegIndex(pm: number, cumD: number[]) { const n = cumD.length; if (n < 2) return 0; for (let i = 0; i < n - 1; i++) { if (pm < (cumD[i + 1] ?? 0)) return i; } return n - 2; } function TurnGlyph({ angleDeg, kind, }: { angleDeg: number; kind: "start" | "mid" | "end"; }) { const c = GLYPH / 2; const arm = c - 5; if (kind === "start") { return ( ); } if (kind === "end") { return ( ); } // mid: one polyline, entry -> vertex -> exit-at-true-angle -> arrowhead. // exit angle is the ACTUAL turnAngleDeg, not a snapped category — a 15° // fork and an 80° hard left are literally different drawings. const rad = (angleDeg * Math.PI) / 180; const ex = c + Math.sin(rad) * arm; const ey = c + Math.cos(rad) * arm; const headLen = 4.2; const a1 = rad + Math.PI - 0.55; const a2 = rad + Math.PI + 0.55; const h1x = ex + Math.sin(a1) * headLen; const h1y = ey + Math.cos(a1) * headLen; const h2x = ex + Math.sin(a2) * headLen; const h2y = ey + Math.cos(a2) * headLen; const points = [ `${c},${c - arm}`, `${c},${c}`, `${ex.toFixed(2)},${ey.toFixed(2)}`, `${h1x.toFixed(2)},${h1y.toFixed(2)}`, `${ex.toFixed(2)},${ey.toFixed(2)}`, `${h2x.toFixed(2)},${h2y.toFixed(2)}`, ].join(" "); return ( ); } function BreakZigzag() { // the standard equation-station break symbol: renders in place of a // connector when true spacing fell below the 44px floor, so the // compression reads as a deliberate mark, not a silent clamp. return ( ); } export function StripStation({ steps, positionM = 0, scalePxPerM = 0.09, label = "Turn-by-turn directions", className = "h-[560px] w-full", }: StripStationProps) { const scrollerRef = useRef(null); const markerRef = useRef(null); const roseRef = useRef(null); const headingChipRef = useRef(null); const btnRefs = useRef<(HTMLButtonElement | null)[]>([]); const rows = useMemo(() => buildRows(steps, scalePxPerM), [steps, scalePxPerM]); const minorStep = useMemo(() => niceStepMeters(scalePxPerM), [scalePxPerM]); const majorStep = minorStep * 5; const initialLeg = currentLegIndex(clamp(positionM, 0, rows.totalD), rows.cumD); const [currentIndex, setCurrentIndex] = useState(() => Math.min(initialLeg + 1, Math.max(0, steps.length - 1)) ); const [focusedIndex, setFocusedIndex] = useState(currentIndex); const [live, setLive] = useState(""); const reducedRef = useRef(false); const currentIndexRef = useRef(currentIndex); const targetYRef = useRef(0); const suspendUntilRef = useRef(0); const listFocusedRef = useRef(false); const lastSetScrollRef = useRef(0); const wakeRef = useRef<() => void>(() => {}); // reduced-motion tracking useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedRef.current = mq.matches; const onChange = () => { reducedRef.current = mq.matches; }; mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); // the persistent scroll-follow loop: chases targetYRef with an ease-out- // expo catch-up, never a hard lock — it yields the moment the user scrolls // by hand, and it sleeps once caught up rather than spinning forever. useEffect(() => { let raf = 0; let running = false; let last = 0; const EPS = 0.5; const loop = (now: number) => { const dt = last === 0 ? 1 / 60 : Math.min(0.1, (now - last) / 1000); last = now; const scroller = scrollerRef.current; if (!scroller) { running = false; return; } const H = scroller.clientHeight; const maxScroll = Math.max(0, scroller.scrollHeight - H); const target = clamp(targetYRef.current - H / 3, 0, maxScroll); const cur = scroller.scrollTop; const suspended = now < suspendUntilRef.current || listFocusedRef.current; if (!suspended) { const next = reducedRef.current ? target : cur + (target - cur) * (1 - Math.pow(2, -10 * dt)); if (Math.abs(next - cur) > 0.05) { scroller.scrollTop = next; lastSetScrollRef.current = next; } } if (!suspended && Math.abs(target - scroller.scrollTop) > EPS) { raf = requestAnimationFrame(loop); } else { running = false; } }; wakeRef.current = () => { if (!running) { running = true; last = 0; raf = requestAnimationFrame(loop); } }; return () => cancelAnimationFrame(raf); }, []); // manual scroll pauses auto-follow for a beat rather than fighting it useEffect(() => { const el = scrollerRef.current; if (!el) return; const onScroll = () => { if (Math.abs(el.scrollTop - lastSetScrollRef.current) > 3) { suspendUntilRef.current = performance.now() + 2500; } }; el.addEventListener("scroll", onScroll, { passive: true }); return () => el.removeEventListener("scroll", onScroll); }, []); // p (positionM) is the single scalar driving both the marker and the // scroll-follow target. The marker itself is never smoothed — it always // reads the honest position; only the viewport eases toward it. useEffect(() => { const pm = clamp(positionM, 0, rows.totalD); const y = yForPosition(pm, rows); if (markerRef.current) markerRef.current.style.transform = `translateY(${y}px)`; targetYRef.current = y; const legIdx = currentLegIndex(pm, rows.cumD); const heading = steps[legIdx]?.headingDeg ?? 0; if (roseRef.current) roseRef.current.style.transform = `rotate(${(-heading).toFixed(1)}deg)`; if (headingChipRef.current) { headingChipRef.current.textContent = `${Math.round(((heading % 360) + 360) % 360)}°`; } const upcoming = Math.min(legIdx + 1, Math.max(0, steps.length - 1)); if (upcoming !== currentIndexRef.current) { currentIndexRef.current = upcoming; setCurrentIndex(upcoming); const step = steps[upcoming]; if (step) { const remain = (rows.cumD[upcoming] ?? 0) - pm; setLive( `${step.instruction}${remain > 0.5 ? `, in ${formatDistance(remain)}` : ""}, step ${ upcoming + 1 } of ${steps.length}` ); } } wakeRef.current(); }, [positionM, rows, steps]); const focusRow = (i: number) => { setFocusedIndex(i); requestAnimationFrame(() => { btnRefs.current[i]?.focus(); btnRefs.current[i]?.scrollIntoView({ block: "nearest", behavior: reducedRef.current ? "auto" : "smooth", }); }); }; const onListKeyDown = (e: KeyboardEvent) => { if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return; e.preventDefault(); const n = steps.length; let next = focusedIndex; if (e.key === "ArrowDown") next = Math.min(n - 1, focusedIndex + 1); else if (e.key === "ArrowUp") next = Math.max(0, focusedIndex - 1); else if (e.key === "Home") next = 0; else if (e.key === "End") next = n - 1; focusRow(next); }; return (

{/* compass rose: pinned in its own non-scrolling gutter column (never overlaps row content) — aria-hidden, it pays back the bearing the strip sacrificed by keeping true heading always in view */}

{i > 0 && (rows.y[i] ?? 0) - (rows.y[i - 1] ?? 0) > 0.5 && (
{rows.broke[i] ? (

) : ( ticks.map((t) => (
{t.major && ( {formatChainage(t.m)} )}
)) )}
)}

{/* position marker: y is the honest, unsmoothed proportional position — only the viewport (above) eases toward it. Foreground, not accent — this is a persistent state readout, not an interaction affordance. */}

{live}

); } 62:["$","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,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/strip-station/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/strip-station.tsx"}],"className":"h-[70svh] min-h-80"}]]}]