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:T2f8f,"use client" import * as React from "react" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { IconChevronRight, IconDots } from "@tabler/icons-react" import { cn } from "cn" import { duration, easeSpring } from "@/lib/motion" type BreadcrumbCollapseContextValue = { group: string open: boolean settled: boolean } const BreadcrumbCollapseContext = React.createContext(null) function collapseAttributes( context: BreadcrumbCollapseContextValue | null, collapsed: boolean ) { if (!context) { return {} } return { "data-breadcrumb-group": context.group, "data-collapsed": collapsed && context.settled ? "" : undefined, } as Record } function Breadcrumb({ className, render, ...props }: useRender.ComponentProps<"nav">) { return useRender({ defaultTagName: "nav", render, props: mergeProps<"nav">( { "aria-label": "Breadcrumb", className: cn("min-w-0", className) }, props, { "data-slot": "breadcrumb" } as React.ComponentProps<"nav"> ), }) } function BreadcrumbList({ className, render, ...props }: useRender.ComponentProps<"ol">) { return useRender({ defaultTagName: "ol", render, props: mergeProps<"ol">( { className: cn( "flex min-w-0 flex-wrap items-center gap-1.5 text-sm wrap-anywhere text-muted-foreground", className ), }, props, { "data-slot": "breadcrumb-list" } as React.ComponentProps<"ol"> ), }) } function BreadcrumbItem({ className, render, ...props }: useRender.ComponentProps<"li">) { const collapse = React.useContext(BreadcrumbCollapseContext) return useRender({ defaultTagName: "li", render, props: mergeProps<"li">( { className: cn( "inline-flex min-w-0 items-center gap-1 data-collapsed:hidden", className ), }, props, { "data-slot": "breadcrumb-item", ...collapseAttributes(collapse, collapse ? !collapse.open : false), } as React.ComponentProps<"li"> ), }) } function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) { return useRender({ defaultTagName: "a", render, props: mergeProps<"a">( { className: cn( "relative -mx-1 inline-flex min-w-0 items-center gap-1 rounded-sm px-1 transition-[color,box-shadow] duration-150 ease-out-quint outline-none hover:text-foreground focus-visible:z-10 focus-visible:text-foreground focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4", className ), }, props, { "data-slot": "breadcrumb-link" } as React.ComponentProps<"a"> ), }) } function BreadcrumbPage({ className, render, ...props }: useRender.ComponentProps<"span">) { return useRender({ defaultTagName: "span", render, props: mergeProps<"span">( { "aria-current": "page", className: cn( "inline-flex min-w-0 items-center gap-1 font-normal text-foreground [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4", className ), }, props, { "data-slot": "breadcrumb-page" } as React.ComponentProps<"span"> ), }) } function BreadcrumbSeparator({ children, className, render, ...props }: useRender.ComponentProps<"li">) { const collapse = React.useContext(BreadcrumbCollapseContext) return useRender({ defaultTagName: "li", render, props: mergeProps<"li">( { role: "presentation", "aria-hidden": true, children: children ?? , className: cn( "inline-flex shrink-0 items-center text-muted-foreground/60 select-none [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-3.5 [&[data-collapsed]:has(+[data-collapsed])]:hidden", className ), }, props, { "data-slot": "breadcrumb-separator", ...collapseAttributes(collapse, collapse ? !collapse.open : false), } as React.ComponentProps<"li"> ), }) } function BreadcrumbEllipsis({ children, className, render, ...props }: useRender.ComponentProps<"span">) { const interactive = render !== undefined || props.onClick !== undefined return useRender({ defaultTagName: "span", render, props: mergeProps<"span">( { ...(interactive ? {} : { role: "presentation", "aria-hidden": true as const }), children: children ?? ( <> More ), className: cn( "relative inline-flex size-5 shrink-0 items-center justify-center rounded-sm outline-none focus-visible:outline-hidden [&:is(a,button)]:size-6 [&:is(a,button)]:cursor-pointer [&:is(a,button)]:transition-[color,background-color,box-shadow] [&:is(a,button)]:duration-150 [&:is(a,button)]:ease-out-quint [&:is(a,button)]:after:absolute [&:is(a,button)]:after:-inset-x-1 [&:is(a,button)]:after:-inset-y-2.5 [&:is(a,button)]:hover:bg-muted [&:is(a,button)]:hover:text-foreground [&:is(a,button)]:focus-visible:z-10 [&:is(a,button)]:focus-visible:text-foreground [&:is(a,button)]:focus-visible:ring-3 [&:is(a,button)]:focus-visible:ring-focus-ring [&:is(a,button)]:aria-expanded:bg-muted [&:is(a,button)]:aria-expanded:text-foreground [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-4", className ), }, props, { "data-slot": "breadcrumb-ellipsis" } as React.ComponentProps<"span"> ), }) } const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' function groupElements(anchor: HTMLElement, group: string) { const list = anchor.parentElement if (!list) { return [] } return Array.from(list.children).filter( (node): node is HTMLElement => node instanceof HTMLElement && node.dataset.breadcrumbGroup === group ) } function togglesWithCollapse(element: HTMLElement, group: string) { if (element.dataset.slot !== "breadcrumb-separator") { return true } const next = element.nextElementSibling return next instanceof HTMLElement && next.dataset.breadcrumbGroup === group } function clearAnimationStyles(element: HTMLElement) { element.style.overflow = "" element.style.whiteSpace = "" element.style.minWidth = "" } type BreadcrumbCollapseProps = { children?: React.ReactNode open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void label?: string } function BreadcrumbCollapse({ children, open: openProp, defaultOpen = false, onOpenChange, label = "Show full path", }: BreadcrumbCollapseProps) { const group = React.useId() const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const open = openProp ?? uncontrolledOpen const [previousOpen, setPreviousOpen] = React.useState(open) const [settled, setSettled] = React.useState(true) const triggerItemRef = React.useRef(null) const animationsRef = React.useRef(new Map()) const runRef = React.useRef(0) const restoreFocusRef = React.useRef(false) if (open !== previousOpen) { setPreviousOpen(open) setSettled(false) } React.useLayoutEffect(() => { const triggerItem = triggerItemRef.current if (settled || !triggerItem) { return } const run = ++runRef.current const animations = animationsRef.current const elements = [triggerItem, ...groupElements(triggerItem, group)] const toggled = elements.filter( (element) => element === triggerItem || togglesWithCollapse(element, group) ) if (toggled.some((element) => element.contains(document.activeElement))) { restoreFocusRef.current = true } if (typeof triggerItem.animate !== "function") { setSettled(true) return } const reduceMotion = typeof window.matchMedia !== "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches const list = triggerItem.parentElement const gap = list ? parseFloat(getComputedStyle(list).columnGap) || 0 : 0 const starts = new Map() for (const element of toggled) { const running = animations.get(element) starts.set( element, running ? element.getBoundingClientRect().width : null ) running?.cancel() animations.delete(element) } const pending = toggled.map((element) => { const entering = element === triggerItem ? !open : open const natural = element.getBoundingClientRect().width const start = starts.get(element) ?? (entering ? 0 : natural) const end = entering ? natural : 0 const progress = natural > 0 ? start / natural : entering ? 0 : 1 element.style.overflow = "hidden" element.style.whiteSpace = "nowrap" element.style.minWidth = "0px" const animation = element.animate( [ { width: `${start}px`, marginInlineEnd: `${-gap * (1 - progress)}px`, opacity: progress, }, { width: `${end}px`, marginInlineEnd: entering ? "0px" : `${-gap}px`, opacity: entering ? 1 : 0, }, ], { duration: reduceMotion ? 0 : duration.morph, easing: easeSpring, fill: "forwards", } ) animations.set(element, animation) return animation.finished }) Promise.all(pending).then( () => { if (runRef.current === run) { setSettled(true) } }, () => {} ) }, [group, open, settled]) React.useLayoutEffect(() => { if (!settled) { return } const animations = animationsRef.current for (const [element, animation] of animations) { animation.cancel() clearAnimationStyles(element) } animations.clear() const triggerItem = triggerItemRef.current if (!restoreFocusRef.current || !triggerItem) { return } restoreFocusRef.current = false const target = open ? groupElements(triggerItem, group) .map((element) => element.matches(focusableSelector) ? element : element.querySelector(focusableSelector) ) .find((element) => element?.checkVisibility?.() ?? true) : triggerItem.querySelector(focusableSelector) target?.focus() }, [group, open, settled]) React.useEffect(() => { const animations = animationsRef.current return () => { for (const [element, animation] of animations) { animation.cancel() clearAnimationStyles(element) } animations.clear() } }, []) const context = React.useMemo( () => ({ group, open, settled }), [group, open, settled] ) return (

} tabIndex={open ? -1 : undefined} onClick={() => { if (openProp === undefined) { setUncontrolledOpen(true) } onOpenChange?.(true) }} />

{children} ) } export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, BreadcrumbCollapse, } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.8.0"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/breadcrumb.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]