50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T183a,"use client"; import { forwardRef, Fragment } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useSoundCue } from "../../sound/use-sound"; export interface BreadcrumbItem { /** The crumb's visible text. */ label: string; /** Link target. Ignored on the last item — it is always the current page and never a link. */ href?: string; } export interface BreadcrumbProps { /** The full trail, first to last. The last entry is always the current page. Required. */ items: BreadcrumbItem[]; /** Collapse the trail once it holds more than this many items. `0` (the default) never collapses. */ maxItems?: number; /** How many leading items stay visible once collapsed. */ itemsBeforeCollapse?: number; /** * How many trailing items stay visible once collapsed. Floored at `1` * even if given `0` — the last item is the current page, and it is * never hidden. */ itemsAfterCollapse?: number; /** Separator glyph rendered between crumbs. Decorative — never read by a screen reader. */ separator?: string; /** Accessible name for the `

`. */ label?: string; /** * Custom rendering for one crumb, given the item and its index in * `items`. Overriding this hands you the whole crumb, including * deciding whether it is a link and whether it carries * `aria-current` — see the README. */ item?: (item: BreadcrumbItem, index: number) => ReactNode; /** Additional CSS classes. */ className?: string; /** * Plays the select cue through the sound controller when a crumb * rendered by the default (non-`item`-prop) markup is activated. * Off by default; only audible once the user has enabled sound. */ sound?: boolean; } interface Crumb { key: string; item: BreadcrumbItem; /** Position in the original `items` array — what decides "is this the last one". */ index: number; } type Row = Crumb | { kind: "ellipsis"; key: "ellipsis" }; function toCrumb(entry: BreadcrumbItem, index: number): Crumb { // Keyed on the original index plus the label rather than the label // alone: two crumbs can legitimately read the same text (a // "Settings / General / General" trail, say), and the index makes // each key unique regardless. return { key: `${index}-${entry.label}`, item: entry, index }; } /** * The root element arrives through the ref channel rather than a `ref` * prop, per PORTING.md — the Svelte source declares `ref = $bindable(null)`. * * Rest props are not spread: the Svelte source reads only these props off * `$props()` and has no `...restProps`, so the port carries no wider * attribute surface than the component it mirrors. */ export const Breadcrumb = forwardRef(function Breadcrumb( { items, maxItems = 0, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, separator = "/", label = "Breadcrumb", item, className, sound = false, }, ref ) { const playCue = useSoundCue(sound); // No consumer `onClick` exists on a crumb to forward to — the default // anchor has none today — so this just plays and returns, the same shape // as a fancy button with no onClick prop of its own. function handleCrumbClick() { playCue("select"); } // Collapsing is a decision about the whole list, not something a single // crumb can make for itself — this is why Breadcrumb renders every item // itself instead of being a compound of children the caller assembles. const rows = ((): Row[] => { const total = items.length; const before = Math.max(0, itemsBeforeCollapse); // Floored at 1, not 0: the trailing slice below is the only thing that // can ever hold the last item, and the last item is the current page — // not a crumb this component is willing to hide. `itemsBeforeCollapse` // has no such floor because losing the *first* crumb to "…" is a // legitimate, non-destructive collapse (see the README). const after = Math.max(1, itemsAfterCollapse); // Guarded degenerate case: if the visible slice would already cover // (or exceed) the whole trail, collapsing cannot save anything // without either dropping a crumb entirely or showing one twice — // so it is skipped outright and the full trail renders instead. const shouldCollapse = maxItems > 0 && total > maxItems && before + after < total; if (!shouldCollapse) { return items.map(toCrumb); } const leading = items.slice(0, before).map(toCrumb); const trailing = items .slice(total - after) .map((entry, offset) => toCrumb(entry, total - after + offset)); return [...leading, { kind: "ellipsis", key: "ellipsis" }, ...trailing]; })(); const lastIndex = items.length - 1; return (

{i > 0 && ( // Purely decorative: never focusable, never read by a screen reader. )} {"kind" in row ? ( /* * The collapsed middle items are omitted from the accessible tree, * not tucked behind a disclosure — see the README's "Truncation" * section for the consequence and the alternative if that is not * acceptable for a given trail. */ ) : (

{item ? ( item(row.item, row.index) ) : row.index === lastIndex ? ( {row.item.label} ) : row.item.href ? ( {row.item.label} ) : ( {row.item.label} )}

)}

); }); 4f:["$","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,["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/breadcrumb/Breadcrumb.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/breadcrumb/Breadcrumb.tsx"},{"path":"react/src/components/breadcrumb/index.ts","content":"\"use client\";\n\nexport { Breadcrumb } from \"./Breadcrumb\";\nexport type { BreadcrumbProps, BreadcrumbItem } from \"./Breadcrumb\";\n","type":"registry:ui","target":"@ui/fancy/components/breadcrumb/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]