5f: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"] 60:I[544296,["/_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"],"ItemStyles"] 61:I[8513,["/_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"],"ScrollArea"] 62:I[8513,["/_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"],"ScrollBar"] 63: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"] 64:T2f1f,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { LayoutGroup, motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type TreeNode = { name: string; children?: TreeNode[] }; type Item = { id: string; name: string; parent: string | null; folder: boolean }; // Each level steps in by 16px, the width of the chevron column, so a child's // chevron sits just right of its parent's guide. const INDENT = 16; const ROW_PAD = 8; const EASE = "ease-[cubic-bezier(0.23,1,0.32,1)]"; const HIGHLIGHT = { type: "spring", duration: 0.25, bounce: 0 } as const; // Long enough to type "pa" at a normal pace, short enough that a fresh // letter a moment later starts a new search. const TYPEAHEAD_RESET = 500; const join = (parent: string | null, name: string) => (parent ? `${parent}/${name}` : name); // The rows a keyboard user can reach: everything not inside a closed folder. function flatten(nodes: TreeNode[], open: Set, parent: string | null = null): Item[] { return nodes.flatMap((node) => { const id = join(parent, node.name); const item = { id, name: node.name, parent, folder: !!node.children }; return node.children && open.has(id) ? [item, ...flatten(node.children, open, id)] : [item]; }); } // A toggled folder row never moves: only rows below it shift, siblings never // auto-collapse, and toggling never scrolls. Pin the demo with anchor "top". export function TreeView({ nodes, label, defaultOpen = [], defaultSelected, onSelect, className, }: { nodes: TreeNode[]; label: string; defaultOpen?: string[]; defaultSelected?: string; onSelect?: (path: string) => void; className?: string; }) { const reduceMotion = useReducedMotion(); const group = useId(); const [open, setOpen] = useState(() => new Set(defaultOpen)); const [selected, setSelected] = useState(defaultSelected ?? null); const visible = useMemo(() => flatten(nodes, open), [nodes, open]); const [focused, setFocused] = useState(() => defaultSelected ?? visible[0]?.id); const items = useRef(new Map()); const typed = useRef(""); const typedTimer = useRef>(undefined); useEffect(() => () => clearTimeout(typedTimer.current), []); const focus = (id: string) => { setFocused(id); items.current.get(id)?.focus(); }; const setFolder = (id: string, next: boolean) => setOpen((current) => { const copy = new Set(current); if (next) copy.add(id); else copy.delete(id); return copy; }); const activate = (item: Item) => { if (item.folder) return setFolder(item.id, !open.has(item.id)); setSelected(item.id); onSelect?.(item.id); }; const typeahead = (key: string, from: number) => { clearTimeout(typedTimer.current); typedTimer.current = setTimeout(() => (typed.current = ""), TYPEAHEAD_RESET); const next = typed.current + key.toLowerCase(); // Repeating one letter cycles through the items that start with it. const repeat = [...next].every((c) => c === next[0]); typed.current = repeat ? next[0] : next; const start = repeat ? from + 1 : from; for (let n = 0; n < visible.length; n++) { const item = visible[(start + n) % visible.length]; if (item.name.toLowerCase().startsWith(typed.current)) return focus(item.id); } }; const onKeyDown = (e: React.KeyboardEvent, item: Item) => { const index = visible.findIndex((v) => v.id === item.id); const isOpen = open.has(item.id); const go = (i: number) => { const target = visible[i]; if (target) focus(target.id); }; switch (e.key) { case "ArrowDown": go(index + 1); break; case "ArrowUp": go(index - 1); break; case "Home": go(0); break; case "End": go(visible.length - 1); break; case "ArrowRight": if (item.folder && isOpen) go(index + 1); else if (item.folder) setFolder(item.id, true); break; case "ArrowLeft": if (item.folder && isOpen) setFolder(item.id, false); else if (item.parent) focus(item.parent); break; case "Enter": case " ": activate(item); break; default: if (e.key.length !== 1 || e.key === " " || e.metaKey || e.ctrlKey || e.altKey) return; typeahead(e.key, index); } e.preventDefault(); // Items nest inside their parent's item; without this the parent would // handle the same key again. e.stopPropagation(); }; const selectedFolder = selected?.includes("/") ? selected.slice(0, selected.lastIndexOf("/")) : null; const render = (list: TreeNode[], depth: number, parent: string | null): React.ReactNode => list.map((node) => { const id = join(parent, node.name); const item: Item = { id, name: node.name, parent, folder: !!node.children }; const isOpen = open.has(id); const isSelected = selected === id; return (

{ if (el) items.current.set(id, el); else items.current.delete(id); }} role="treeitem" aria-expanded={item.folder ? isOpen : undefined} aria-selected={item.folder ? undefined : isSelected} tabIndex={focused === id ? 0 : -1} onKeyDown={(e) => onKeyDown(e, item)} onFocus={(e) => { if (e.target === e.currentTarget) setFocused(id); }} // The item holds its children too, so the ring goes on the row alone. className="outline-hidden [&:focus-visible>div]:outline-2 [&:focus-visible>div]:outline-solid [&:focus-visible>div]:-outline-offset-2 [&:focus-visible>div]:outline-foreground" >

activate(item)} style={{ paddingLeft: ROW_PAD + depth * INDENT }} className={cn( "relative flex h-8 cursor-default items-center gap-1.5 rounded-md pr-2 text-[15px] transition-[color,background-color] duration-150 ease-out select-none hover:bg-muted/60", isSelected || item.folder ? "text-foreground" : "text-muted-foreground hover:text-foreground", )} > {/* Every row spans the full width, so moving the highlight is a pure translate and nothing inside it stretches. */} {isSelected && ( )} {item.folder && ( )} {node.name}

{node.children && (

)}

); }); return (

{render(nodes, 0, null)} ); } // Animates grid-template-rows between 0fr and 1fr, so the folder reaches its // real height without anything being measured. function Collapse({ open, children }: { open: boolean; children: React.ReactNode }) { // Clipping is only needed while the rows move. A folder that has finished // opening stops clipping, so the highlight can glide in from a row outside // it without being cut off at its edge. const [settledAt, setSettledAt] = useState(open); const settled = open && settledAt === open; return (

{ if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") { setSettledAt(open); } }} className={cn( "grid motion-reduce:transition-none", EASE, open ? "grid-rows-[1fr] transition-[grid-template-rows] duration-250" : "grid-rows-[0fr] transition-[grid-template-rows] duration-200", )} > {/* Rows fade in a beat behind the opening and leave at once, so text is never seen squeezed by a closing folder. */}

{children}

); } const PROJECT: TreeNode[] = [ { name: "src", children: [ { name: "app", children: [{ name: "layout.tsx" }, { name: "page.tsx" }, { name: "globals.css" }], }, { name: "lab", children: [ { name: "components", children: [ { name: "code-block.tsx" }, { name: "reading-progress.tsx" }, { name: "tree-view.tsx" }, ], }, { name: "registry.ts" }, ], }, { name: "lib", children: [{ name: "cn.ts" }] }, ], }, { name: "public", children: [{ name: "favicon.svg" }, { name: "og.png" }] }, { name: "package.json" }, { name: "README.md" }, ]; export default function TreeViewDemo() { return ( // 6px of padding around 6px row corners keeps the radii concentric: 12 = 6 + 6.

); } 5e:["$","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/tree-view.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]