4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T269c,"use client"; import * as React from "react"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Icon } from "@/components/ui/icon"; export type TreeNode = { /** Stable, unique identity owned by the caller. */ id: string; label: string; kind: "file" | "folder"; /** Undefined means not supplied; an empty array means loaded and empty. */ children?: readonly TreeNode[]; icon?: React.ReactNode; status?: "idle" | "loading" | "error"; message?: string; truncated?: boolean; trailing?: React.ReactNode; disabled?: boolean; }; export type TreeProps = Omit, "children"> & { nodes: readonly TreeNode[]; expandedIds: readonly string[]; selectedId?: string; onExpandedChange: (id: string, expanded: boolean) => void; onSelectionChange: (id: string) => void; onRetry?: (id: string) => void; }; type TreeBranchParameters = { node: TreeNode; expanded: ReadonlySet; selectedId?: string; treeId: string; expandRefs: React.RefObject>; onExpandedChange: TreeProps["onExpandedChange"]; onSelectionChange: TreeProps["onSelectionChange"]; onRetry?: TreeProps["onRetry"]; }; function branchId(treeId: string, id: string) { return `${treeId}-${encodeURIComponent(id)}`; } function TreeBranch({ node, expanded, selectedId, treeId, expandRefs, onExpandedChange, onSelectionChange, onRetry, }: TreeBranchParameters) { const isFolder = node.kind === "folder"; const isExpanded = isFolder && expanded.has(node.id); const isSelected = selectedId === node.id; const contentId = branchId(treeId, node.id); const hasChildren = Boolean(node.children?.length); const branchNotice = node.status === "loading" ? (node.message ?? "Loading this branch…") : node.status === "error" ? (node.message ?? "This branch could not be loaded.") : node.children === undefined ? "Children have not been supplied." : !hasChildren ? "This branch is empty." : null; const noticeStatus = node.status === "loading" || node.status === "error" ? node.status : "empty"; return (

{/* The row is the travelling-selection item: one surface for chevron, name and actions. */}

{isFolder ? ( ) : (

{isFolder && ( )}

); } function parentIds(nodes: readonly TreeNode[]) { const parents = new Map(); const visit = (entries: readonly TreeNode[], parent?: string) => { for (const node of entries) { if (parent) parents.set(node.id, parent); if (node.children) visit(node.children, node.id); } }; visit(nodes); return parents; } export function Tree({ ref, className, nodes, expandedIds, selectedId, onExpandedChange, onSelectionChange, onRetry, onFocusCapture, onBlurCapture, ...props }: TreeProps) { const { quiet } = useChoreography(); const generatedId = React.useId(); const treeId = `tree-branch-${generatedId.replace(/[^a-zA-Z0-9_-]/g, "-")}`; const rootRef = React.useRef(null); // The shared travelling selection owns the selected surface and pointer preview. // Rows are its items, so the surface glides between files instead of repainting. const flowRef = useFlowGroup(rootRef, { kind: "pill", itemSelector: '[data-slot="tree-row"]', activeSelector: '[data-selected="true"]', }); const expandRefs = React.useRef(new Map()); const focusedNode = React.useRef(undefined); const previousExpanded = React.useRef(new Set(expandedIds)); const parents = React.useMemo(() => parentIds(nodes), [nodes]); const expanded = React.useMemo(() => new Set(expandedIds), [expandedIds]); React.useImperativeHandle(ref, () => rootRef.current!); React.useLayoutEffect(() => { const collapsed = new Set( [...previousExpanded.current].filter((id) => !expanded.has(id)), ); let ancestor = focusedNode.current ? parents.get(focusedNode.current) : undefined; let recoveryTarget: string | undefined; while (ancestor) { if (collapsed.has(ancestor)) recoveryTarget = ancestor; ancestor = parents.get(ancestor); } if (recoveryTarget) { expandRefs.current.get(recoveryTarget)?.focus({ preventScroll: true }); focusedNode.current = recoveryTarget; } previousExpanded.current = new Set(expanded); }, [expanded, parents]); return (

( "[data-tree-node-id]", ); if (item?.dataset.treeNodeId) focusedNode.current = item.dataset.treeNodeId; onFocusCapture?.(event); }} onBlurCapture={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) { focusedNode.current = undefined; } onBlurCapture?.(event); }} {...props} > {nodes.map((node) => ( ))}

); } 51:T2f3f,@layer cojeev-states { /* Tree: an index card of ruled branch guides. Folders open along the guide, one soft slip travels to the selected row, and every notice is a small inset strip on the same paper. The shared flow layer owns the slip; the rules below only supply its paint and the quiet fallback. */ .v-tree:where([data-slot="tree"]) { --tree-guide: var(--v-border); --tree-tile: 28px; --tree-reach: 22px; --tree-elbow: 20px; --tree-slip: var(--v-pink-soft); --tree-slip-edge: color-mix(in oklab, var(--v-pink) 54%, var(--v-border)); --glide-bg: var(--tree-slip); --glide-fg: var(--v-text); --glide-ring: inset 0 0 0 1px var(--tree-slip-edge); --glide-hover-bg: color-mix(in oklab, var(--v-ink) 6%, transparent); color: var(--v-text); font-size: 13px; line-height: 1.35; } .v-tree:where([data-slot="tree"]), .v-tree:where([data-slot="tree"]) [data-slot="tree-branch"] { min-width: 0; margin: 0; padding: 0; list-style: none; } .v-tree:where([data-slot="tree"]) [data-slot="tree-item"] { position: relative; min-width: 0; } /* One row, one surface: chevron tile, name and trailing actions share it. */ .v-tree:where([data-slot="tree"]) [data-slot="tree-row"] { display: grid; grid-template-columns: var(--tree-tile) minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 2px 6px 2px 2px; border-radius: 10px; color: var(--v-text); transition: background var(--t-micro), box-shadow var(--t-micro), color var(--t-micro); } .v-tree:where([data-slot="tree"]) [data-slot="tree-row"]:not([data-selected="true"]):not( [data-disabled="true"] ):hover { background: var(--glide-hover-bg); } /* The pointer preview layer paints hover while the flow group owns the row. */ :root:not([data-flow-hover="off"]) .v-tree[data-flow-owned].v-glide:not([data-flow-hover="off"]) [data-slot="tree-row"]:not([data-selected="true"]):not( [data-disabled="true"] ):hover { background: transparent; } .v-tree:where([data-slot="tree"]) [data-slot="tree-row"][data-selected="true"] { background: var(--tree-slip); box-shadow: var(--glide-ring); } .v-tree:where([data-slot="tree"]) [data-slot="tree-row"][data-disabled="true"] { color: var(--v-disabled-ink); background: var(--v-disabled-face); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--v-disabled-edge) 55%, transparent); } .v-tree:where([data-slot="tree"]) :is([data-slot="tree-expand"], [data-slot="tree-expand-spacer"]) { inline-size: var(--tree-tile); block-size: var(--tree-tile); } .v-tree:where([data-slot="tree"]) [data-slot="tree-expand"] { display: grid; place-items: center; padding: 0; border-radius: 8px; color: var(--v-text-2); background: transparent; transition: background var(--t-micro), color var(--t-micro); } .v-tree:where([data-slot="tree"]) [data-slot="tree-expand"]:where(:not(:disabled)):where( :hover, :focus-visible ) { color: var(--v-text); background: color-mix(in oklab, var(--v-ink) 8%, transparent); } .v-tree:where([data-slot="tree"]) :is([data-slot="tree-expand"], [data-slot="tree-select"]):disabled { color: var(--v-disabled-ink); cursor: not-allowed; } .v-tree:where([data-slot="tree"]) [data-slot="tree-expand"]:disabled { background: transparent; } /* The chevron turns toward the branch it opens; the folder glyph opens with it. */ .v-tree:where([data-slot="tree"]) [data-slot="tree-expand"] .v-icon { transition: transform var(--t-element) var(--enter); } .v-tree:where([data-slot="tree"]) [data-slot="tree-expand"][aria-expanded="true"] .v-icon { transform: rotate(90deg); } /* Direction is read from the tree itself, so a right-to-left container inside a left-to-right document (a Radix root, for example) still mirrors the arrow. */ .v-tree:where([data-slot="tree"]):dir(rtl) [data-slot="tree-expand"][aria-expanded="false"] .v-icon { transform: rotate(180deg); } .v-tree:where([data-slot="tree"]) [data-slot="tree-select"] { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; padding: 0 6px 0 2px; border-radius: 8px; color: inherit; text-align: start; background: transparent; } .v-tree:where([data-slot="tree"]) [data-slot="tree-icon"] { display: grid; place-items: center; flex: none; inline-size: 20px; block-size: 20px; color: var(--v-text-2); transition: color var(--t-micro); } /* Containers read in ink, leaves in secondary ink; selection lifts both. */ .v-tree:where([data-slot="tree"]) [data-slot="tree-item"][data-kind="folder"] > [data-slot="tree-row"] [data-slot="tree-icon"], .v-tree:where([data-slot="tree"]) [data-slot="tree-row"][data-selected="true"] [data-slot="tree-icon"], .v-tree:where([data-slot="tree"]) [data-slot="tree-row"][data-glide-active] [data-slot="tree-icon"] { color: currentColor; } .v-tree:where([data-slot="tree"]) [data-slot="tree-row"][data-disabled="true"] [data-slot="tree-icon"] { color: var(--v-disabled-ink); } .v-tree:where([data-slot="tree"]) [data-slot="tree-label"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.35; font-weight: 500; } .v-tree:where([data-slot="tree"]) [data-slot="tree-trailing"] { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .v-tree:where([data-slot="tree"]) [data-slot="tree-trailing"] button { display: grid; place-items: center; min-inline-size: 32px; min-block-size: 32px; padding: 0 8px; border-radius: 8px; color: var(--v-text-2); background: transparent; } .v-tree:where([data-slot="tree"]) :is( [data-slot="tree-expand"], [data-slot="tree-select"], [data-slot="tree-trailing"] button ):focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } /* Branch guides: each child draws its own elbow, and every child except the last continues the ruled line down to its sibling. The line therefore stops at the last child instead of running past the branch. */ .v-tree:where([data-slot="tree"]) [data-slot="tree-branch"] { position: relative; margin-inline-start: calc(var(--tree-tile) / 2 + 2px); padding-inline-start: var(--tree-reach); transition: opacity var(--t-element) var(--enter); } .v-tree:where([data-slot="tree"]) [data-slot="tree-branch"][hidden] { display: none; } @starting-style { .v-tree:where([data-slot="tree"]) [data-slot="tree-branch"]:not([hidden]) { opacity: 0; } } .v-tree:where([data-slot="tree"]) [data-slot="tree-branch"] > :is([data-slot="tree-item"], [data-slot="tree-notice"])::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: calc(-1 * var(--tree-reach)); inline-size: calc(var(--tree-reach) - 6px); block-size: var(--tree-elbow); border-inline-start: 1px solid var(--tree-guide); border-block-end: 1px solid var(--tree-guide); border-end-start-radius: 9px; pointer-events: none; } .v-tree:where([data-slot="tree"]) [data-slot="tree-branch"] > :is([data-slot="tree-item"], [data-slot="tree-notice"]):not( :last-child )::after { content: ""; position: absolute; inset-block-start: var(--tree-elbow); inset-block-end: 0; inset-inline-start: calc(-1 * var(--tree-reach)); border-inline-start: 1px solid var(--tree-guide); pointer-events: none; } /* Notices are inset strips on the same paper: quiet for empty, busy for loading, paired danger paint for errors, and a plain mark for truncation. */ .v-tree:where([data-slot="tree"]) [data-slot="tree-notice"] { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 4px 10px 4px 6px; border-radius: 10px; color: var(--v-text-2); font-size: 12px; line-height: 1.4; } .v-tree:where([data-slot="tree"]) [data-slot="tree-notice-icon"] { display: grid; place-items: center; flex: none; inline-size: 20px; block-size: 20px; color: var(--v-text-3); } .v-tree:where([data-slot="tree"]) [data-slot="tree-notice"] > span:not([data-slot]) { min-width: 0; overflow-wrap: anywhere; } .v-tree:where([data-slot="tree"]) [data-slot="tree-notice"][data-status="loading"] { background: color-mix(in oklab, var(--v-ink) 4%, transparent); } .v-tree:where([data-slot="tree"]) [data-slot="tree-notice"][data-status="error"] { color: var(--status-danger-ink); background: var(--status-danger-bg); } .v-tree:where([data-slot="tree"]) [data-slot="tree-notice"][data-status="error"] [data-slot="tree-notice-icon"] { color: currentColor; } /* Retry is the shared outline Button in the notice's own ink; its living edge and press pulse come from the shared morph and flow runtimes. */ .v-tree[data-slot] [data-slot="tree-notice"] .v-tree__retry.v-btn { flex: none; margin-inline-start: auto; min-height: 32px; padding-inline: 12px; color: inherit; box-shadow: inset 0 0 0 1px currentColor; font-size: 12px; } .v-tree[data-slot] [data-slot="tree-notice"] .v-tree__retry.v-btn:hover { background: color-mix(in oklab, currentColor 10%, transparent); } .v-tree:where([data-slot="tree"]) [data-slot="tree-notice"][data-status="loading"] [data-slot="tree-notice-icon"] .v-icon { animation: v-tree-loading 0.9s linear infinite; } @keyframes v-tree-loading { to { transform: rotate(1turn); } } .v-tree:where([data-slot="tree"])[data-motion-quiet="true"] *, .v-tree:where([data-slot="tree"])[data-motion-quiet="true"] *::before, .v-tree:where([data-slot="tree"])[data-motion-quiet="true"] *::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; } .v-tree[data-motion-quiet="true"] [data-slot="tree-row"], .v-tree[data-motion-quiet="true"] [data-slot="tree-expand"] .v-icon, .v-tree[data-motion-quiet="true"] [data-slot="tree-notice"][data-status="loading"] .v-icon { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; } @media (prefers-reduced-motion: reduce) { .v-tree:where([data-slot="tree"]) *, .v-tree:where([data-slot="tree"]) *::before, .v-tree:where([data-slot="tree"]) *::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } .v-tree [data-slot="tree-row"], .v-tree [data-slot="tree-expand"] .v-icon, .v-tree [data-slot="tree-notice"][data-status="loading"] .v-icon { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; } } @media (max-width: 480px) { .v-tree:where([data-slot="tree"]) { --tree-reach: 18px; } .v-tree:where([data-slot="tree"]) [data-slot="tree-row"] { grid-template-columns: var(--tree-tile) minmax(0, 1fr) min-content; } .v-tree:where([data-slot="tree"]) [data-slot="tree-notice"] { align-items: flex-start; flex-wrap: wrap; padding-block: 8px; } .v-tree[data-slot] [data-slot="tree-notice"] .v-tree__retry.v-btn { margin-inline-start: 28px; } } /* Documentation specimen: a bounded card, not a second Tree implementation. */ .v-tree-example { display: grid; gap: 14px; width: 100%; max-width: 640px; min-width: 0; margin-inline: auto; color: var(--v-text); } .v-tree-example > header { display: grid; gap: 4px; padding-inline: 4px; } .v-tree-example > header > span { color: var(--v-accent-ink); font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .v-tree-example h3 { margin: 0; font: 500 22px/1.15 var(--font-display); letter-spacing: -0.01em; } .v-tree-example > header p, .v-tree-example__status { margin: 0; color: var(--v-text-2); font-size: 12px; line-height: 1.55; } .v-tree-example__card { min-width: 0; padding: 8px; border: 1px solid var(--v-border); border-radius: 16px; background: var(--v-paper); } .v-tree-example__status { min-height: 1.55em; padding-inline: 4px; } .v-tree-example[data-compact="true"] { max-width: 520px; margin-inline: 0; } } 4b:["$","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":[null,["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/icon.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/tree.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/tree.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/tree.css","content":"$51","type":"registry:file","target":"styles/cojeev/tree.css"}],"className":"h-[70svh] min-h-80"}]]}]