64: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"] 65: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"] 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"],"ScrollArea"] 67: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"] 68: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"] 69:T273f,"use client"; import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode, } from "react"; export type PointsThrowTab = { id: string; label: string; content: ReactNode; }; // Tabs whose active indicator is one continuous SVG rail running under the // entire tab row like railway track, not a discrete indicator object. A thin // base polyline (--border, 1px) spans the full row at baseline — the track // bed, always present, never animated. A second polyline (--foreground, 2px) // rides on top of it and is locally lifted into a plateau under the active // tab, joining the baseline again on either side via a short diagonal ramp — // a railway "siding". Selecting a different tab THROWS THE POINTS: the four // x-coordinates that describe the ramp-plateau-ramp shape tween from their // old positions to the new tab's positions on an ease-out-expo curve over // 350ms, direct-DOM (no React state on the hot path), so the bend visibly // travels down the line rather than a puck jumping between slots. Distinct // from segmented-control-fling: there is never a discrete indicator object, only one // line whose geometry changes. export function PointsThrow({ tabs, defaultTab, className = "", }: { /** the tabs, in order */ tabs: PointsThrowTab[]; /** id of the initially selected tab (defaults to the first) */ defaultTab?: string; /** extra classes merged onto the rendered root element */ className?: string; }) { const baseId = useId(); const [active, setActive] = useState(() => defaultTab ?? tabs[0]?.id ?? ""); const wrapperRef = useRef(null); const listRef = useRef(null); const panelRef = useRef(null); const baseRailRef = useRef(null); const sidingRef = useRef(null); const tabRefs = useRef(new Map()); // hot-path geometry lives in a ref — the rAF tween never touches React const sim = useRef({ x: [0, 0, 0, 0] as [number, number, number, number], // ramp-L, plateau-L, plateau-R, ramp-R rowWidth: 0, raf: 0, settledOnce: false, reduced: false, }); const activeIndex = Math.max(0, tabs.findIndex((t) => t.id === active)); const tabsKey = tabs.map((t) => t.id).join(" "); useEffect(() => { const wrapper = wrapperRef.current; if (!wrapper) return; const s = sim.current; s.reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const render = () => { const base = baseRailRef.current; const siding = sidingRef.current; if (!base || !siding) return; const w = s.rowWidth; base.setAttribute("points", `0,${BASE_Y} ${w},${BASE_Y}`); const [x0, x1, x2, x3] = s.x; siding.setAttribute( "points", `${x0},${BASE_Y} ${x1},${RAISED_Y} ${x2},${RAISED_Y} ${x3},${BASE_Y}` ); }; const stopAnim = () => { if (s.raf) cancelAnimationFrame(s.raf); s.raf = 0; }; const animateTo = (target: [number, number, number, number]) => { stopAnim(); const from: [number, number, number, number] = [...s.x]; const start = performance.now(); const step = (now: number) => { const t = Math.min(1, (now - start) / DURATION_MS); const e = easeOutExpo(t); s.x = [ from[0] + (target[0] - from[0]) * e, from[1] + (target[1] - from[1]) * e, from[2] + (target[2] - from[2]) * e, from[3] + (target[3] - from[3]) * e, ]; render(); if (t < 1) { s.raf = requestAnimationFrame(step); } else { s.raf = 0; } }; s.raf = requestAnimationFrame(step); }; const measure = () => { const list = listRef.current; const el = tabRefs.current.get(active); if (!list || !el) return; const wrapRect = wrapper.getBoundingClientRect(); const rowWidth = wrapRect.width; if (rowWidth < 8) return; const elRect = el.getBoundingClientRect(); const tabLeft = elRect.left - wrapRect.left; const tabRight = tabLeft + elRect.width; const target: [number, number, number, number] = [ clamp(tabLeft - RAMP, 0, rowWidth), tabLeft, tabRight, clamp(tabRight + RAMP, 0, rowWidth), ]; s.rowWidth = rowWidth; if (!s.settledOnce || s.reduced) { stopAnim(); s.x = target; render(); s.settledOnce = true; return; } animateTo(target); }; measure(); // ResizeObserver always delivers one initial callback the instant it // starts observing — and this effect (re-)runs on every tab switch, so // that initial delivery would otherwise land a frame into the throw // tween and stomp it back to a snap. Skip only that first delivery per // effect run; any later delivery is a genuine layout change. let firstDelivery = true; const ro = new ResizeObserver(() => { if (firstDelivery) { firstDelivery = false; return; } // layout change, not a selection — reseat instantly, never tween stopAnim(); s.settledOnce = false; measure(); }); ro.observe(wrapper); return () => { ro.disconnect(); stopAnim(); }; }, [active, tabsKey]); // panel: 12px lateral slide-fade in the direction of travel; reduced // motion drops the translate in favor of a plain crossfade const prevIndex = useRef(activeIndex); useEffect(() => { const panel = panelRef.current; if (!panel) return; const reduced = sim.current.reduced; const dir = activeIndex >= prevIndex.current ? 1 : -1; prevIndex.current = activeIndex; if (reduced) { panel.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: "ease-out", }); return; } panel.animate( [ { opacity: 0, transform: `translateX(${dir * PANEL_SLIDE}px)` }, { opacity: 1, transform: "translateX(0)" }, ], { duration: 220, easing: "cubic-bezier(0.16, 1, 0.3, 1)" } ); }, [activeIndex]); const onKeyDown = (e: KeyboardEvent) => { let next = -1; if (e.key === "ArrowRight") next = (activeIndex + 1) % tabs.length; else if (e.key === "ArrowLeft") next = (activeIndex - 1 + tabs.length) % tabs.length; else if (e.key === "Home") next = 0; else if (e.key === "End") next = tabs.length - 1; if (next === -1) return; e.preventDefault(); const id = tabs[next]?.id; if (!id) return; setActive(id); tabRefs.current.get(id)?.focus(); }; const activeTab = tabs[activeIndex]; return (

{tabs.map((tab) => { const selected = tab.id === active; return ( ); })}

{/* the track: base rail spans the whole row at baseline; the siding polyline rides on top of it and bends up into a plateau under whichever tab is active. Purely decorative — selection lives in aria-selected, never here. */}

{activeTab && (

{activeTab.content}

)}

); } const RAMP = 10; // px — horizontal run of each diagonal ramp const SVG_H = 10; // px — svg box height const BASE_Y = SVG_H - 1; // baseline, near the bottom of the box const RAISED_Y = 1; // plateau, lifted toward the tab label above const DURATION_MS = 350; // tabs-rail-points tween duration const PANEL_SLIDE = 12; // px — panel lateral slide-fade distance function clamp(v: number, lo: number, hi: number): number { return Math.min(hi, Math.max(lo, v)); } function easeOutExpo(t: number): number { return t >= 1 ? 1 : 1 - Math.pow(2, -10 * t); } 63:["$","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,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",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":["$","$L66",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"}]]}]]}],["$","$L67",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":["$","$L66",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"}]]}]]}],["$","$L67",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":["$","$L66",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)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/tabs-rail-points/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/tabs-rail-points.tsx"}],"className":"h-[70svh] min-h-80"}]]}]