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:T2724,"use client"; import { useId, useRef, useState } from "react"; import type { CSSProperties, KeyboardEvent, ReactNode } from "react"; import { ChevronRight, File, Folder, FolderOpen } from "lucide-react"; import { AnimatePresence, motion, useIsPresent, useReducedMotion } from "motion/react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./tree-view.module.css"; export interface TreeNode { id: string; label: string; children?: TreeNode[]; icon?: ReactNode; } export interface TreeViewProps { nodes: TreeNode[]; defaultExpandedIds?: string[]; expandedIds?: string[]; onExpandedChange?: (expandedIds: string[]) => void; onSelect?: (node: TreeNode) => void; "aria-label"?: string; } type VisibleNode = { node: TreeNode; depth: number; parentId?: string; position: number; setSize: number; }; /** A row is 36px plus the 2px gap above it; both collapse together, so nothing snaps when a row leaves. */ const rowHeight = 38; const still = { duration: 0 } as const; const fadeIn = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } as const; const fadeOut = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } as const; const blur = (px: number) => `blur(${px}px)`; function flatten(nodes: TreeNode[], expanded: ReadonlySet, depth = 1, parentId?: string): VisibleNode[] { return nodes.flatMap((node, index) => [ { node, depth, parentId, position: index + 1, setSize: nodes.length }, ...(node.children && expanded.has(node.id) ? flatten(node.children, expanded, depth + 1, node.id) : []), ]); } function fileTone(label: string, classNames: Record) { const name = label.toLowerCase(); if (name.endsWith(".tsx") || name.endsWith(".ts")) return classNames.typescript; if (name.endsWith(".css")) return classNames.stylesheet; if (name.endsWith(".md")) return classNames.markdown; if (name.endsWith(".json")) return classNames.json; return classNames.file; } /** Same markup with or without reduced motion, so the server render always hydrates cleanly; only the transition changes. */ function FolderIcon({ open, reduced }: { open: boolean; reduced: boolean }) { return {open ? : } ; } /** * The selection fill glides between rows through a shared layoutId. A row that is leaving drops its fill at once: left * in place, it held the row's exit open, so the row stayed in the tree with pointer events off and the next click on it * after reopening its folder did nothing. */ function Selection({ layoutId, reduced }: { layoutId: string; reduced: boolean }) { const present = useIsPresent(); if (!present) return null; return ; } export function TreeView({ nodes, defaultExpandedIds = [], expandedIds, onExpandedChange, onSelect, "aria-label": ariaLabel = "File tree" }: TreeViewProps) { const reduced = useReducedMotion() ?? false; const selectionLayoutId = `tree-selection-${useId()}`; const [internalExpanded, setInternalExpanded] = useState(() => new Set(defaultExpandedIds)); const [focusedId, setFocusedId] = useState(nodes[0]?.id ?? null); const [selectedId, setSelectedId] = useState(null); /** The folder that opened last; its new children fade in one after another, then everything else stays still. */ const [openedId, setOpenedId] = useState(null); const refs = useRef(new Map()); const expanded = expandedIds ? new Set(expandedIds) : internalExpanded; const visible = flatten(nodes, expanded); const focusableId = visible.some(({ node }) => node.id === focusedId) ? focusedId : (visible[0]?.node.id ?? null); const openedIndex = visible.findIndex(({ node }) => node.id === openedId); function setExpanded(next: Set) { if (!expandedIds) setInternalExpanded(next); onExpandedChange?.([...next]); } function toggle(node: TreeNode) { if (!node.children?.length) return; const next = new Set(expanded); if (next.has(node.id)) next.delete(node.id); else { next.add(node.id); setOpenedId(node.id); } setExpanded(next); } function focus(id: string) { setFocusedId(id); const row = refs.current.get(id); if (row) row.focus(); else requestAnimationFrame(() => refs.current.get(id)?.focus()); } function select(node: TreeNode) { setSelectedId(node.id); onSelect?.(node); } function onKeyDown(event: KeyboardEvent, item: VisibleNode, index: number) { const { node } = item; if (event.key === "ArrowDown") { event.preventDefault(); focus(visible[Math.min(index + 1, visible.length - 1)]!.node.id); return; } if (event.key === "ArrowUp") { event.preventDefault(); focus(visible[Math.max(index - 1, 0)]!.node.id); return; } if (event.key === "Home") { event.preventDefault(); focus(visible[0]!.node.id); return; } if (event.key === "End") { event.preventDefault(); focus(visible[visible.length - 1]!.node.id); return; } if (event.key === "ArrowRight" && node.children?.length) { event.preventDefault(); if (!expanded.has(node.id)) toggle(node); else if (visible[index + 1]?.parentId === node.id) focus(visible[index + 1]!.node.id); return; } if (event.key === "ArrowLeft") { event.preventDefault(); if (node.children?.length && expanded.has(node.id)) toggle(node); else if (item.parentId) focus(item.parentId); return; } if (event.key === "Enter" || event.key === " ") { event.preventDefault(); select(node); if (node.children?.length) toggle(node); } } return

{visible.map((item, index) => { const hasChildren = Boolean(item.node.children?.length); const isExpanded = hasChildren && expanded.has(item.node.id); const isSelected = selectedId === item.node.id; // Only rows that mount use this delay: the space opens in one motion and the new children follow in order. const delay = openedIndex >= 0 && index > openedIndex ? Math.min(index - openedIndex - 1, 7) * motionTokens.stagger.item : 0; return ; })}

; } export default TreeView; 64:Ta9a,.tree { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--foreground); overflow: hidden; } /* Rows clip only while their height animates (Motion sets overflow), so the selection can glide between them unclipped. */ .row { position: relative; display: flow-root; min-width: 0; height: 38px; } .item { position: relative; display: flex; width: 100%; min-width: 0; height: 36px; margin-top: 2px; align-items: center; gap: 8px; padding: 0 10px; padding-left: calc(10px + (var(--tree-depth) - 1) * 18px); border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); line-height: 1; text-align: left; cursor: pointer; outline: none; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); } /* Selection changes color only; a heavier weight would reflow the label. */ .item[aria-selected="true"] { color: var(--foreground); } .selection { position: absolute; inset: 0; z-index: 0; border-radius: 10px; background: var(--surface-muted); } .branch { position: absolute; top: 4px; bottom: 4px; left: calc(16.5px + (var(--tree-depth) - 2) * 18px); z-index: 1; width: 1px; background: var(--border); transform-origin: top; pointer-events: none; } .disclosure, .icon, .label { position: relative; z-index: 1; } .disclosure { display: grid; width: 14px; height: 16px; flex: 0 0 14px; place-items: center; color: var(--text-muted); } .icon { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); } .folder { color: var(--text-secondary); } .item[aria-expanded="true"] .folder, .item[aria-selected="true"] .folder { color: var(--foreground); } .folderGlyph { position: absolute; inset: 0; display: grid; place-items: center; } .typescript { color: color-mix(in oklab, #3178c6 78%, var(--foreground)); } .stylesheet { color: color-mix(in oklab, #8b6ace 73%, var(--foreground)); } .markdown { color: color-mix(in oklab, #38896b 74%, var(--foreground)); } .json { color: color-mix(in oklab, #c48637 78%, var(--foreground)); } /* Its own line height: the row sets 1, and the clipped box (needed for the ellipsis) would cut descenders like g. */ .label { min-width: 0; overflow: hidden; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .item:hover { background: var(--surface-muted); color: var(--foreground); } } @media (prefers-reduced-motion: reduce) { .item, .icon { transition: none; } } 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/tree-view/tree-view.tsx","content":"$63","type":"registry:component","target":"@components/arc/tree-view/tree-view.tsx"},{"path":"registry/components/tree-view/tree-view.module.css","content":"$64","type":"registry:component","target":"@components/arc/tree-view/tree-view.module.css"}],"className":"h-[70svh] min-h-80"}]]}]