4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T1926,import { Fragment, useCallback, useLayoutEffect, useRef, useState } from "react" import { cn } from "@/lib/utils" import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "./breadcrumb" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./dropdown-menu" import type { BreadcrumbEntry, BreadcrumbsProps } from "./breadcrumbs.types" /** * The lower bound on how many steps are shown: the root and the current page. * * Collapsing past this would fold the current page into the menu — leaving the * user with a trail whose only visible entries are the root and an ellipsis, * which says where they came from and not where they are. */ const MINIMUM_VISIBLE = 2 /** * How many steps fit before the trail overflows, never fewer than the two ends. * * There is no CSS for "collapse the middle when it does not fit", so this * measures. It shrinks one step at a time and re-measures, which converges in a * few layout passes and — because it runs in a layout effect — before paint, so * the overflowing state is never shown. * * Widths are never cached. A cache would be faster and would go stale on a font * swap, a language change, or a type-scale step at a breakpoint, each of which * is exactly when the trail needs re-measuring. */ function useFittedCount(total: number) { const listRef = useRef(null) const [count, setCount] = useState(total) // A width change means everything might fit again, so measurement restarts // from the top rather than only ever collapsing further. const reset = useCallback(() => setCount(total), [total]) // A changed trail restarts measurement during render rather than in an // effect: an effect would paint one frame of the old count against the new // items, which is a visible flicker precisely when the trail changes. const [measuredFor, setMeasuredFor] = useState(total) if (measuredFor !== total) { setMeasuredFor(total) setCount(total) } useLayoutEffect(() => { const list = listRef.current if (!list) return const observer = new ResizeObserver(reset) observer.observe(list) return () => observer.disconnect() }, [reset]) useLayoutEffect(() => { const list = listRef.current if (!list) return // The +1 absorbs sub-pixel rounding, which otherwise collapses a trail // that fits by a fraction of a pixel. if (list.scrollWidth > list.clientWidth + 1 && count > MINIMUM_VISIBLE) { setCount((current) => current - 1) } }, [count]) return { count, listRef } } /** * Where the user is, and a way back to any ancestor. * * Driven by an array rather than composed from the parts, because the * collapsing has to know the whole trail: it decides which steps to hide, and * a component assembled child by child cannot be asked that. The parts remain * exported for a trail that needs something this shape cannot express. */ function Breadcrumbs({ className, icon, items, separator, ...props }: BreadcrumbsProps) { const { count, listRef } = useFittedCount(items.length) const collapsed = count < items.length && items.length > MINIMUM_VISIBLE // `count` counts the root, so the tail is one shorter. Floored at // MINIMUM_VISIBLE above, the tail is never empty — which is what keeps the // current page on screen no matter how narrow the container gets. const hidden = collapsed ? items.slice(1, items.length - (count - 1)) : [] const tail = collapsed ? items.slice(items.length - (count - 1)) : items.slice(1) const step = (entry: BreadcrumbEntry, isCurrent: boolean) => ( {isCurrent ? ( {icon} {entry.label} ) : ( {icon} {entry.label} )} ) const divider = (key: string) => ( {separator} ) return ( {items.length > 0 && step(items[0], items.length === 1)} {collapsed && hidden.length > 0 && ( <> {divider("sep-collapsed")} {/* The hidden steps stay reachable — a collapse that dropped them would remove navigation rather than fold it. The trigger is a real button so it is tabbable and named. */} {hidden.map((entry) => ( } > {entry.label} ))} )} {/* A Fragment, not a wrapper element: an `ol` may only contain `li`, and a `div` here would take the list apart for a screen reader — which is the structure the landmark exists to convey. */} {tail.map((entry, index) => ( {divider(`sep-${entry.label}-${index}`)} {step(entry, index === tail.length - 1)} ))} ) } export { Breadcrumbs } export type { BreadcrumbEntry, BreadcrumbsProps } 4c:["$","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,["$","$L4d",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/breadcrumb.json","https://guillermo-rebolledo.github.io/materialcn/r/dropdown-menu.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/components/ui/breadcrumbs.tsx","content":"$4f","type":"registry:ui"},{"path":"src/components/ui/breadcrumbs.types.ts","content":"import type * as React from \"react\"\n\n/** One step in the trail. The last entry is the current page. */\nexport type BreadcrumbEntry = {\n /** What the step is called. */\n label: string\n /** Where it goes. Absent on the current page, which is not a destination. */\n href?: string\n /** Prevents navigation while keeping the step in the trail. */\n disabled?: boolean\n}\n\nexport type BreadcrumbsProps = Omit, \"children\"> & {\n items: BreadcrumbEntry[]\n /**\n * Drawn between every step. Defaults to a chevron.\n */\n separator?: React.ReactNode\n /**\n * Drawn before every step's label.\n *\n * Deliberately one icon for the whole trail rather than one per entry: a\n * trail with icons on some steps and not others reads as though the icons\n * mean something, and they do not — the trail is a path, and every segment of\n * it is the same kind of thing.\n */\n icon?: React.ReactNode\n}\n","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]