5f: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"] 60: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"] 61: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"] 62: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"] 63: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"] 64:T4610,"use client"; import { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion, useIsPresent } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type Crumb = { label: string; href: string }; const EASE_OUT = [0.23, 1, 0.32, 1] as const; // Segments slide over to close the gap at UI speed, with no bounce: a trail // that overshoots reads as unstable. const SLIDE = { type: "spring", visualDuration: 0.25, bounce: 0 } as const; const INSTANT = { duration: 0 } as const; const ENTER = { duration: 0.2, ease: EASE_OUT }; // Leaving segments go faster than arriving ones, so the gap they leave is // already closing by the time the eye looks for it. const EXIT = { duration: 0.12, ease: EASE_OUT }; const MENU_ENTER = { duration: 0.18, ease: EASE_OUT }; const MENU_EXIT = { duration: 0.1, ease: EASE_OUT }; /* * Fitting works off a hidden copy of the full trail, so the widths never * depend on what is currently folded and the decision can't oscillate. * The first segment and the current page always stay; middle segments fold * into the menu from the left, so the nearest parents stay visible longest. */ export function Breadcrumbs({ items, onNavigate, className, }: { items: readonly Crumb[]; onNavigate?: (item: Crumb, index: number) => void; className?: string; }) { const reduce = useReducedMotion() ?? false; const navRef = useRef(null); const rulerRef = useRef(null); // Index of the first segment shown after the fold. 1 means none hidden. const [start, setStart] = useState(1); useEffect(() => { const nav = navRef.current; const ruler = rulerRef.current; if (!nav || !ruler) return; const fit = () => { const widths = [...ruler.children].map( (n) => n.getBoundingClientRect().width, ); const fold = widths.pop() ?? 0; const n = widths.length; const available = nav.clientWidth; let next = Math.max(n - 1, 1); let tail = widths.slice(1).reduce((a, b) => a + b, 0); for (let k = 1; k < n; k++) { // Half a pixel of slack absorbs subpixel rounding between the ruler // and the live row. if (widths[0] + (k > 1 ? fold : 0) + tail <= available + 0.5) { next = k; break; } tail -= widths[k]; } // Bails out when unchanged, so a continuous resize costs no renders. setStart(next); }; const observer = new ResizeObserver(fit); observer.observe(nav); observer.observe(ruler); let alive = true; // Webfonts can land after the first measure and change every width. document.fonts?.ready.then(() => { if (alive) fit(); }); return () => { alive = false; observer.disconnect(); }; }, [items]); const last = items.length - 1; const folded = Math.min(start, Math.max(last, 1)); const hidden = items.slice(1, folded); const layout = reduce ? INSTANT : SLIDE; const reveal = { initial: { opacity: 0, filter: reduce ? "blur(0px)" : "blur(4px)" }, animate: { opacity: 1, filter: "blur(0px)", transition: ENTER }, exit: { opacity: 0, filter: "blur(0px)", transition: EXIT }, transition: { layout }, layout: "position" as const, // Only a fold change moves segments, so other re-renders (opening the // menu) skip the layout measure entirely. layoutDependency: folded, }; const segments: React.ReactNode[] = []; items.forEach((item, index) => { if (index !== 0 && index < folded) return; segments.push( {index > 0 && } {index === last ? ( // The current page is text, not a link: it can't take you anywhere. {item.label} ) : ( { if (!onNavigate) return; e.preventDefault(); onNavigate(item, index); }} className="inline-flex h-9 touch-manipulation items-center rounded-md px-1.5 text-sm whitespace-nowrap text-muted-foreground underline decoration-transparent underline-offset-4 outline-hidden transition-[color,text-decoration-color,scale] duration-150 ease-out select-none hover:text-foreground hover:decoration-foreground/40 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-foreground active:scale-[0.96] motion-reduce:transition-[color,text-decoration-color]" > {item.label} )} , ); if (index === 0 && hidden.length > 0) { segments.push( , ); } }); return ( ); } function Separator() { return ( ); } function FoldMenu({ items, onNavigate, }: { items: readonly Crumb[]; onNavigate?: (item: Crumb, index: number) => void; }) { const reduce = useReducedMotion() ?? false; const id = useId(); const [open, setOpen] = useState(false); const rootRef = useRef(null); const triggerRef = useRef(null); const menuRef = useRef(null); const itemRefs = useRef<(HTMLAnchorElement | null)[]>([]); const focusFirst = useRef(false); useEffect(() => { if (!open) return; if (focusFirst.current) itemRefs.current[0]?.focus({ preventScroll: true }); else menuRef.current?.focus({ preventScroll: true }); }, [open]); const count = items.length; const openMenu = (first: boolean) => { focusFirst.current = first; setOpen(true); }; const close = (returnFocus: boolean) => { setOpen(false); if (returnFocus) triggerRef.current?.focus({ preventScroll: true }); }; const focusAt = (index: number) => itemRefs.current[(index + count) % count]?.focus({ preventScroll: true }); const move = (step: number) => { const at = itemRefs.current.indexOf( document.activeElement as HTMLAnchorElement, ); focusAt(at === -1 ? (step > 0 ? 0 : -1) : at + step); }; return ( {open && ( { switch (e.key) { case "ArrowDown": e.preventDefault(); move(1); return; case "ArrowUp": e.preventDefault(); move(-1); return; case "Home": e.preventDefault(); focusAt(0); return; case "End": e.preventDefault(); focusAt(-1); return; case "Escape": e.preventDefault(); close(true); return; case "Tab": // Focus moves on as usual; the menu just gets out of the way. close(false); } }} onBlur={(e) => { // Covers clicking outside, tabbing away and leaving the window. if (!rootRef.current?.contains(e.relatedTarget as Node | null)) { close(false); } }} > {items.map((item, i) => ( { itemRefs.current[i] = el; }} href={item.href} role="menuitem" tabIndex={-1} onPointerMove={(e) => { if (e.pointerType === "touch") return; if (document.activeElement !== e.currentTarget) { e.currentTarget.focus({ preventScroll: true }); } }} onClick={(e) => { if (onNavigate) { e.preventDefault(); // Hidden segments start right after the first one. onNavigate(item, i + 1); } close(true); }} // No transition on the highlight: it follows every hover, so // any easing reads as lag. className="flex h-9 cursor-default items-center gap-2.5 rounded-lg px-2 text-sm text-foreground outline-hidden select-none focus:bg-foreground/[0.06]" > {item.label} ))} )} ); } function Menu({ ref, id, reduce, onKeyDown, onBlur, children, }: { ref: React.Ref; id: string; reduce: boolean; onKeyDown: (e: React.KeyboardEvent) => void; onBlur: (e: React.FocusEvent) => void; children: React.ReactNode; }) { // A closing menu stops taking pointer input at once, so it never blocks // the next click while it fades. const isPresent = useIsPresent(); return ( ); } const PATH: Crumb[] = [ { label: "Workspace", href: "/workspace" }, { label: "Projects", href: "/workspace/projects" }, { label: "ui-lab", href: "/workspace/projects/ui-lab" }, { label: "src", href: "/workspace/projects/ui-lab/src" }, { label: "lab", href: "/workspace/projects/ui-lab/src/lab" }, { label: "components", href: "/workspace/projects/ui-lab/src/lab/components" }, { label: "button.tsx", href: "/workspace/projects/ui-lab/src/lab/components/button.tsx", }, ]; // Narrow enough to fold everything, wide enough that the current page still // reads in full. const MIN_WIDTH = 220; const KEY_STEP = 16; export default function BreadcrumbsDemo() { const wrapRef = useRef(null); const frameRef = useRef(null); const handleRef = useRef(null); const drag = useRef<{ x: number; width: number } | null>(null); // Written straight to the DOM: resizing is continuous, and only a fold // change inside the trail needs React. const resize = (width: number) => { const frame = frameRef.current; const max = wrapRef.current?.clientWidth ?? width; if (!frame) return; const next = Math.round(Math.min(Math.max(width, MIN_WIDTH), max)); frame.style.width = `${next}px`; handleRef.current?.setAttribute("aria-valuenow", String(next)); handleRef.current?.setAttribute("aria-valuemax", String(Math.round(max))); }; useEffect(() => { // Syncs the slider's range with the real width on narrow screens. const max = wrapRef.current?.clientWidth ?? 0; handleRef.current?.setAttribute("aria-valuemax", String(Math.round(max))); handleRef.current?.setAttribute("aria-valuenow", String(Math.round(max))); }, []); const stop = () => { drag.current = null; }; return (

{}} />

{ if (e.button !== 0) return; e.currentTarget.setPointerCapture(e.pointerId); drag.current = { x: e.clientX, width: frameRef.current?.offsetWidth ?? 0, }; }} onPointerMove={(e) => { const from = drag.current; if (from) resize(from.width + e.clientX - from.x); }} onPointerUp={stop} onPointerCancel={stop} onKeyDown={(e) => { const width = frameRef.current?.offsetWidth ?? 0; const next = { ArrowLeft: width - KEY_STEP, ArrowDown: width - KEY_STEP, ArrowRight: width + KEY_STEP, ArrowUp: width + KEY_STEP, PageDown: width - KEY_STEP * 4, PageUp: width + KEY_STEP * 4, Home: MIN_WIDTH, End: Infinity, }[e.key]; if (next === undefined) return; e.preventDefault(); resize(next); }} // A 24px wide hit area around a 6px grip, centred on the edge. className="group absolute top-1/2 -right-3 flex h-10 w-6 -translate-y-1/2 cursor-ew-resize touch-none items-center justify-center rounded-full outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-foreground" >

Drag the edge to resize. Folded folders live behind the dots.

); } 5e:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/breadcrumbs.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]