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:T2a65,"use client"; import { useCallback, useId, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const EASE = [0.23, 1, 0.32, 1] as const; const LEAVE = [0.4, 0, 1, 1] as const; const SMALL = { type: "spring", stiffness: 700, damping: 46, mass: 0.5 } as const; const OPEN_H = { duration: 0.28, ease: EASE } as const; const OPEN_O = { duration: 0.18, ease: EASE } as const; const SHUT_H = { duration: 0.2, ease: LEAVE } as const; const SHUT_O = { duration: 0.14, ease: LEAVE } as const; const STILL = { duration: 0 } as const; export type TreeNode = { id: string; label: string; meta?: string; children?: TreeNode[]; }; export type TreeRow = { node: TreeNode; level: number; parentId: string | null; posinset: number; setsize: number; branch: boolean; open: boolean; }; function flatten( nodes: TreeNode[], openSet: ReadonlySet, level = 1, parentId: string | null = null, out: TreeRow[] = [], ): TreeRow[] { nodes.forEach((node, i) => { const children = node.children ?? []; const branch = children.length > 0; const open = branch && openSet.has(node.id); out.push({ node, level, parentId, posinset: i + 1, setsize: nodes.length, branch, open, }); if (open) flatten(children, openSet, level + 1, node.id, out); }); return out; } export type UseTreeViewOptions = { nodes: TreeNode[]; expanded?: string[]; defaultExpanded?: string[]; onExpandedChange?: (expanded: string[]) => void; selected?: string | null; defaultSelected?: string | null; onSelectedChange?: (selected: string) => void; }; export function useTreeView({ nodes, expanded, defaultExpanded = [], onExpandedChange, selected, defaultSelected = null, onSelectedChange, }: UseTreeViewOptions) { const [internalOpen, setInternalOpen] = useState(defaultExpanded); const openControlled = expanded !== undefined; const openList = openControlled ? expanded : internalOpen; const openSet = new Set(openList); const [internalSel, setInternalSel] = useState(defaultSelected); const selControlled = selected !== undefined; const selectedId = selControlled ? selected : internalSel; const emitOpen = useRef(onExpandedChange); emitOpen.current = onExpandedChange; const emitSel = useRef(onSelectedChange); emitSel.current = onSelectedChange; const rows = flatten(nodes, openSet); const [focusId, setFocusId] = useState(null); const visible = focusId !== null && rows.some((r) => r.node.id === focusId) ? focusId : (rows.find((r) => r.node.id === selectedId)?.node.id ?? rows[0]?.node.id ?? null); const refs = useRef(new Map()); const register = useCallback((id: string, el: HTMLElement | null) => { if (el) refs.current.set(id, el); else refs.current.delete(id); }, []); const focusRow = useCallback((id: string) => { setFocusId(id); refs.current.get(id)?.focus(); }, []); const setOpen = useCallback( (next: string[]) => { if (!openControlled) setInternalOpen(next); emitOpen.current?.(next); }, [openControlled], ); const toggle = useCallback( (id: string) => { const has = openList.includes(id); setOpen(has ? openList.filter((v) => v !== id) : [...openList, id]); }, [openList, setOpen], ); const select = useCallback( (id: string) => { if (!selControlled) setInternalSel(id); emitSel.current?.(id); }, [selControlled], ); const handleKey = useCallback( (event: React.KeyboardEvent, row: TreeRow) => { const at = rows.findIndex((r) => r.node.id === row.node.id); const go = (index: number) => { const target = rows[index]; if (target) focusRow(target.node.id); }; switch (event.key) { case "ArrowDown": event.preventDefault(); go(at + 1); return; case "ArrowUp": event.preventDefault(); go(at - 1); return; case "ArrowRight": event.preventDefault(); if (row.branch && !row.open) toggle(row.node.id); else if (row.open) go(at + 1); return; case "ArrowLeft": event.preventDefault(); if (row.open) toggle(row.node.id); else if (row.parentId) focusRow(row.parentId); return; case "Home": event.preventDefault(); go(0); return; case "End": event.preventDefault(); go(rows.length - 1); return; case "Enter": case " ": event.preventDefault(); select(row.node.id); if (row.branch) toggle(row.node.id); return; default: } if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) { const letter = event.key.toLowerCase(); if (letter === " ") return; for (let step = 1; step <= rows.length; step++) { const candidate = rows[(at + step) % rows.length]; if (candidate.node.label.toLowerCase().startsWith(letter)) { event.preventDefault(); focusRow(candidate.node.id); return; } } } }, [rows, focusRow, toggle, select], ); return { rows, openSet, selectedId, tabStop: visible, register, focusRow, setFocusId, toggle, select, handleKey, }; } function Caret({ open }: { open: boolean }) { const reduced = useReducedMotion(); return ( ); } export type TreeViewProps = { nodes: TreeNode[]; label: string; expanded?: string[]; defaultExpanded?: string[]; onExpandedChange?: (expanded: string[]) => void; selected?: string | null; defaultSelected?: string | null; onSelectedChange?: (selected: string) => void; className?: string; }; export function TreeView({ nodes, label, expanded, defaultExpanded, onExpandedChange, selected, defaultSelected, onSelectedChange, className = "", }: TreeViewProps) { const tree = useTreeView({ nodes, expanded, defaultExpanded, onExpandedChange, selected, defaultSelected, onSelectedChange, }); const reduced = useReducedMotion(); const hintId = useId(); const renderNodes = (list: TreeNode[], level: number) => list.map((node, i) => { const row = tree.rows.find((r) => r.node.id === node.id); if (!row) return null; const isSelected = tree.selectedId === node.id; return (

tree.register(node.id, el)} aria-level={level} aria-posinset={i + 1} aria-setsize={list.length} aria-expanded={row.branch ? row.open : undefined} aria-selected={isSelected} aria-describedby={hintId} tabIndex={tree.tabStop === node.id ? 0 : -1} onFocus={() => tree.setFocusId(node.id)} onKeyDown={(e) => tree.handleKey(e, row)} onClick={() => { tree.select(node.id); tree.focusRow(node.id); if (row.branch) tree.toggle(node.id); }} className={`flex h-7 cursor-default select-none items-center gap-1 rounded-[8px] px-1.5 outline-none transition-colors duration-150 focus-visible:bg-[#4568FF]/[0.06] focus-visible:shadow-[inset_0_0_0_1px_#4568FF] dark:focus-visible:bg-[#93B0FF]/[0.1] dark:focus-visible:shadow-[inset_0_0_0_1px_#93B0FF] ${ isSelected ? "bg-stone-100/80 text-stone-800 dark:bg-white/[0.07] dark:text-stone-100" : "text-stone-600 hover:bg-stone-100/60 dark:text-stone-300 dark:hover:bg-white/[0.04]" }`} > {row.branch ? : } {node.label} {node.meta ? ( {node.meta} ) : null}

{row.branch ? ( {row.open ? (

{renderNodes(node.children ?? [], level + 1)}

) : null} ) : null}

); }); return (

{renderNodes(nodes, 1)} Use the arrow keys to move. Right expands a folder, left collapses it or climbs to its parent. Home and End jump to the ends, and typing a letter jumps to the next name starting with it.

); } 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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/interior/tree-view.tsx","content":"$52","type":"registry:ui","target":"components/interior/tree-view.tsx"}],"className":"h-[70svh] min-h-80"}]]}]