61: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"] 62: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"] 63:T91d,"use client"; import type { MouseEvent } from "react"; import { ChevronRight as NavArrowRight } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ArcLink } from "../lib/arc-provider"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./breadcrumb.module.css"; export interface BreadcrumbItem { label: string; href?: string; /** Runs when the crumb is chosen. Without an href the crumb renders as a button, for paths that live in local state. */ onClick?: (event: MouseEvent) => void; } export interface BreadcrumbProps { items: BreadcrumbItem[]; ariaLabel?: string } /** Crumbs present on first render stay still; crumbs added later slide in from the path before them. */ export function Breadcrumb({ items, ariaLabel = "Breadcrumb" }: BreadcrumbProps) { const reduced = useReducedMotion() ?? false; const still = { duration: 0 }; const path = items.map(item => item.label).join("/"); return ; } 64:T744,/* The gap between crumbs matches the gap inside one, so every chevron sits centered between its two labels. */ .list { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; list-style: none; } .list li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); white-space: nowrap; } .list li > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--border-strong); stroke-width: 1.75; } /* Each crumb reserves the width of its medium weight label, so becoming the current page never shifts the path. */ .list a, .list li > span, .list li > button { display: inline-flex; flex-direction: column; border-radius: 7px; padding: 4px 2px; } .list a::after, .list li > span::after, .list li > button::after { height: 0; overflow: hidden; content: attr(data-label); font-weight: 500; visibility: hidden; user-select: none; pointer-events: none; } .list li > button { border: 0; margin: 0; background: none; font: inherit; line-height: inherit; text-align: start; cursor: pointer; } .list a, .list li > button { color: var(--text-secondary); text-decoration: underline 1px; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard); } .list [aria-current="page"] { color: var(--accent-strong); font-weight: 500; transition: color var(--duration-fast) var(--ease-standard); } @media (hover: hover) and (pointer: fine) { .list a:hover, .list li > button:hover { color: var(--accent-strong); text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); } } @media (prefers-reduced-motion: reduce) { .list a, .list li > button, .list [aria-current="page"] { transition: none; } } 65:T1099,"use client"; /** * Lets an app swap the link and image elements Arc components render (kuratlielia/arc-library#13). * * Without a provider, Arc renders a plain `` and ``, so components work in any React app (Vite, Remix, Astro, * plain React). Wrap the app once to use your framework's or your own components instead: * * import Link from "next/link"; * import Image from "next/image"; * import { ArcProvider } from "@/components/arc/lib/arc-provider"; * * {children} * * Any component that accepts these props works, such as a locale-aware Link from next-intl or a React Router Link * wrapped to map `href` to `to`. */ import { createContext, createElement, useContext, useMemo, type AnchorHTMLAttributes, type ComponentType, type ImgHTMLAttributes, type ReactNode, type Ref } from "react"; /** The props Arc passes to a link: an href plus ordinary anchor attributes. */ export interface ArcLinkProps extends AnchorHTMLAttributes { href: string; ref?: Ref; } /** * The props Arc passes to an image. A subset of next/image's props, so next/image can be passed as is: either `fill` * (cover the positioned parent) or `width` and `height`, plus `sizes` and `priority` as hints. */ export interface ArcImageProps extends Omit, "src" | "alt" | "width" | "height" | "loading" | "srcSet"> { src: string; alt: string; width?: number; height?: number; /** Fills the nearest positioned parent, like next/image's `fill`. */ fill?: boolean; /** Loads the image eagerly with high priority, like next/image's `priority`. */ priority?: boolean; loading?: "eager" | "lazy"; ref?: Ref; } export type ArcLinkComponent = ComponentType; export type ArcImageComponent = ComponentType; /** The default link: a plain anchor. */ export function ArcAnchor(props: ArcLinkProps) { return ; } const fillStyle = { position: "absolute", inset: 0, width: "100%", height: "100%" } as const; /** The default image: a plain, lazily decoded `` that understands `fill` and `priority`. */ export function ArcImg({ alt, fill, priority, loading, style, ...props }: ArcImageProps) { // eslint-disable-next-line @next/next/no-img-element -- the framework-free default; pass next/image through ArcProvider instead. return {alt}

; } interface ArcComponents { link: ArcLinkComponent; image: ArcImageComponent; } const ArcContext = createContext({ link: ArcAnchor, image: ArcImg }); export interface ArcProviderProps { /** The link component Arc renders for navigation, such as next/link or your own wrapped Link. Defaults to ``. */ link?: ArcLinkComponent; /** The image component Arc renders for photos, such as next/image. Defaults to ``. */ image?: ArcImageComponent; children: ReactNode; } /** Sets the link and image components for every Arc component inside it. Nested providers inherit what they do not set. */ export function ArcProvider({ link, image, children }: ArcProviderProps) { const parent = useContext(ArcContext); const value = useMemo(() => ({ link: link ?? parent.link, image: image ?? parent.image }), [link, image, parent]); return {children}; } /** The link component from the nearest ArcProvider, or a plain anchor. */ export const useArcLink = () => useContext(ArcContext).link; /** The image component from the nearest ArcProvider, or a plain img. */ export const useArcImage = () => useContext(ArcContext).image; /** What Arc components render for a link: the provider's link component, or a plain anchor. */ export function ArcLink(props: ArcLinkProps) { return createElement(useArcLink(), props); } /** What Arc components render for an image: the provider's image component, or a plain img. */ export function ArcImage(props: ArcImageProps) { return createElement(useArcImage(), props); } 60:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/components/breadcrumb/breadcrumb.tsx","content":"$63","type":"registry:component","target":"@components/arc/breadcrumb/breadcrumb.tsx"},{"path":"registry/components/breadcrumb/breadcrumb.module.css","content":"$64","type":"registry:component","target":"@components/arc/breadcrumb/breadcrumb.module.css"},{"path":"lib/arc-provider.tsx","content":"$65","type":"registry:lib","target":"@components/arc/lib/arc-provider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]