{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"breadcrumbs","type":"registry:component","title":"Breadcrumbs","description":"Folds the middle of a deep path into a menu when space runs out.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/breadcrumbs.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { AnimatePresence, motion, useIsPresent } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Crumb = { label: string; href: string };\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n// Segments slide over to close the gap at UI speed, with no bounce: a trail\n// that overshoots reads as unstable.\nconst SLIDE = { type: \"spring\", visualDuration: 0.25, bounce: 0 } as const;\nconst INSTANT = { duration: 0 } as const;\nconst ENTER = { duration: 0.2, ease: EASE_OUT };\n// Leaving segments go faster than arriving ones, so the gap they leave is\n// already closing by the time the eye looks for it.\nconst EXIT = { duration: 0.12, ease: EASE_OUT };\nconst MENU_ENTER = { duration: 0.18, ease: EASE_OUT };\nconst MENU_EXIT = { duration: 0.1, ease: EASE_OUT };\n\n/*\n * Fitting works off a hidden copy of the full trail, so the widths never\n * depend on what is currently folded and the decision can't oscillate.\n * The first segment and the current page always stay; middle segments fold\n * into the menu from the left, so the nearest parents stay visible longest.\n */\nexport function Breadcrumbs({\n items,\n onNavigate,\n className,\n}: {\n items: readonly Crumb[];\n onNavigate?: (item: Crumb, index: number) => void;\n className?: string;\n}) {\n const reduce = useReducedMotion() ?? false;\n const navRef = useRef(null);\n const rulerRef = useRef(null);\n // Index of the first segment shown after the fold. 1 means none hidden.\n const [start, setStart] = useState(1);\n\n useEffect(() => {\n const nav = navRef.current;\n const ruler = rulerRef.current;\n if (!nav || !ruler) return;\n\n const fit = () => {\n const widths = [...ruler.children].map(\n (n) => n.getBoundingClientRect().width,\n );\n const fold = widths.pop() ?? 0;\n const n = widths.length;\n const available = nav.clientWidth;\n let next = Math.max(n - 1, 1);\n let tail = widths.slice(1).reduce((a, b) => a + b, 0);\n for (let k = 1; k < n; k++) {\n // Half a pixel of slack absorbs subpixel rounding between the ruler\n // and the live row.\n if (widths[0] + (k > 1 ? fold : 0) + tail <= available + 0.5) {\n next = k;\n break;\n }\n tail -= widths[k];\n }\n // Bails out when unchanged, so a continuous resize costs no renders.\n setStart(next);\n };\n\n const observer = new ResizeObserver(fit);\n observer.observe(nav);\n observer.observe(ruler);\n let alive = true;\n // Webfonts can land after the first measure and change every width.\n document.fonts?.ready.then(() => {\n if (alive) fit();\n });\n return () => {\n alive = false;\n observer.disconnect();\n };\n }, [items]);\n\n const last = items.length - 1;\n const folded = Math.min(start, Math.max(last, 1));\n const hidden = items.slice(1, folded);\n const layout = reduce ? INSTANT : SLIDE;\n const reveal = {\n initial: { opacity: 0, filter: reduce ? \"blur(0px)\" : \"blur(4px)\" },\n animate: { opacity: 1, filter: \"blur(0px)\", transition: ENTER },\n exit: { opacity: 0, filter: \"blur(0px)\", transition: EXIT },\n transition: { layout },\n layout: \"position\" as const,\n // Only a fold change moves segments, so other re-renders (opening the\n // menu) skip the layout measure entirely.\n layoutDependency: folded,\n };\n\n const segments: React.ReactNode[] = [];\n items.forEach((item, index) => {\n if (index !== 0 && index < folded) return;\n segments.push(\n \n {index > 0 && }\n {index === last ? (\n // The current page is text, not a link: it can't take you anywhere.\n \n {item.label}\n \n ) : (\n {\n if (!onNavigate) return;\n e.preventDefault();\n onNavigate(item, index);\n }}\n 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]\"\n >\n {item.label}\n \n )}\n ,\n );\n if (index === 0 && hidden.length > 0) {\n segments.push(\n \n \n \n ,\n );\n }\n });\n\n return (\n \n \n {items.map((item, index) => (\n
  • \n {index > 0 && }\n \n {item.label}\n \n
    • \n ))}\n
  • \n \n \n
    • \n \n\n
      \n \n {segments}\n \n
    \n \n );\n}\n\nfunction Separator() {\n return (\n \n \n \n );\n}\n\nfunction FoldMenu({\n items,\n onNavigate,\n}: {\n items: readonly Crumb[];\n onNavigate?: (item: Crumb, index: number) => void;\n}) {\n const reduce = useReducedMotion() ?? false;\n const id = useId();\n const [open, setOpen] = useState(false);\n const rootRef = useRef(null);\n const triggerRef = useRef(null);\n const menuRef = useRef(null);\n const itemRefs = useRef<(HTMLAnchorElement | null)[]>([]);\n const focusFirst = useRef(false);\n\n useEffect(() => {\n if (!open) return;\n if (focusFirst.current) itemRefs.current[0]?.focus({ preventScroll: true });\n else menuRef.current?.focus({ preventScroll: true });\n }, [open]);\n\n const count = items.length;\n\n const openMenu = (first: boolean) => {\n focusFirst.current = first;\n setOpen(true);\n };\n\n const close = (returnFocus: boolean) => {\n setOpen(false);\n if (returnFocus) triggerRef.current?.focus({ preventScroll: true });\n };\n\n const focusAt = (index: number) =>\n itemRefs.current[(index + count) % count]?.focus({ preventScroll: true });\n\n const move = (step: number) => {\n const at = itemRefs.current.indexOf(\n document.activeElement as HTMLAnchorElement,\n );\n focusAt(at === -1 ? (step > 0 ? 0 : -1) : at + step);\n };\n\n return (\n \n \n );\n}\n\nfunction Menu({\n ref,\n id,\n reduce,\n onKeyDown,\n onBlur,\n children,\n}: {\n ref: React.Ref;\n id: string;\n reduce: boolean;\n onKeyDown: (e: React.KeyboardEvent) => void;\n onBlur: (e: React.FocusEvent) => void;\n children: React.ReactNode;\n}) {\n // A closing menu stops taking pointer input at once, so it never blocks\n // the next click while it fades.\n const isPresent = useIsPresent();\n return (\n \n {children}\n \n );\n}\n\nconst PATH: Crumb[] = [\n { label: \"Workspace\", href: \"/workspace\" },\n { label: \"Projects\", href: \"/workspace/projects\" },\n { label: \"ui-lab\", href: \"/workspace/projects/ui-lab\" },\n { label: \"src\", href: \"/workspace/projects/ui-lab/src\" },\n { label: \"lab\", href: \"/workspace/projects/ui-lab/src/lab\" },\n { label: \"components\", href: \"/workspace/projects/ui-lab/src/lab/components\" },\n {\n label: \"button.tsx\",\n href: \"/workspace/projects/ui-lab/src/lab/components/button.tsx\",\n },\n];\n\n// Narrow enough to fold everything, wide enough that the current page still\n// reads in full.\nconst MIN_WIDTH = 220;\nconst KEY_STEP = 16;\n\nexport default function BreadcrumbsDemo() {\n const wrapRef = useRef(null);\n const frameRef = useRef(null);\n const handleRef = useRef(null);\n const drag = useRef<{ x: number; width: number } | null>(null);\n\n // Written straight to the DOM: resizing is continuous, and only a fold\n // change inside the trail needs React.\n const resize = (width: number) => {\n const frame = frameRef.current;\n const max = wrapRef.current?.clientWidth ?? width;\n if (!frame) return;\n const next = Math.round(Math.min(Math.max(width, MIN_WIDTH), max));\n frame.style.width = `${next}px`;\n handleRef.current?.setAttribute(\"aria-valuenow\", String(next));\n handleRef.current?.setAttribute(\"aria-valuemax\", String(Math.round(max)));\n };\n\n useEffect(() => {\n // Syncs the slider's range with the real width on narrow screens.\n const max = wrapRef.current?.clientWidth ?? 0;\n handleRef.current?.setAttribute(\"aria-valuemax\", String(Math.round(max)));\n handleRef.current?.setAttribute(\"aria-valuenow\", String(Math.round(max)));\n }, []);\n\n const stop = () => {\n drag.current = null;\n };\n\n return (\n
    \n \n {}} />\n {\n if (e.button !== 0) return;\n e.currentTarget.setPointerCapture(e.pointerId);\n drag.current = {\n x: e.clientX,\n width: frameRef.current?.offsetWidth ?? 0,\n };\n }}\n onPointerMove={(e) => {\n const from = drag.current;\n if (from) resize(from.width + e.clientX - from.x);\n }}\n onPointerUp={stop}\n onPointerCancel={stop}\n onKeyDown={(e) => {\n const width = frameRef.current?.offsetWidth ?? 0;\n const next = {\n ArrowLeft: width - KEY_STEP,\n ArrowDown: width - KEY_STEP,\n ArrowRight: width + KEY_STEP,\n ArrowUp: width + KEY_STEP,\n PageDown: width - KEY_STEP * 4,\n PageUp: width + KEY_STEP * 4,\n Home: MIN_WIDTH,\n End: Infinity,\n }[e.key];\n if (next === undefined) return;\n e.preventDefault();\n resize(next);\n }}\n // A 24px wide hit area around a 6px grip, centred on the edge.\n 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\"\n >\n \n
    \n \n

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

    \n \n );\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"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"}],"cssVars":{"light":{"shadow-raised":"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)"},"dark":{"shadow-raised":"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)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["navigation"],"docs":"From ui lab: https://lab.xevrion.dev/lab/breadcrumbs"}