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:T1d2c,"use client"; import { ChevronRight, File, Folder, FolderOpen } from "lucide-react"; import { useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react"; import { cn } from "./lib/cn"; import "./shared/tree-chevron.css"; import "./shared/tree-panel.css"; import "./tree-view.css"; export type TreeItem = { id: string; label: string; icon?: ReactNode; /** Quiet trailing text, such as a size or count. */ meta?: ReactNode; disabled?: boolean; children?: readonly TreeItem[]; }; type Flat = { item: TreeItem; level: number; parent: string | null; index: number; size: number }; const flatten = (items: readonly TreeItem[], open: ReadonlySet, level = 1, parent: string | null = null): Flat[] => items.flatMap((item, index) => [ { item, level, parent, index, size: items.length }, ...(item.children?.length && open.has(item.id) ? flatten(item.children, open, level + 1, item.id) : []), ]); export function TreeView({ label, items, selected, defaultSelected = null, onSelect, expanded, defaultExpanded = [], onExpandedChange, className, }: { label: string; items: readonly TreeItem[]; selected?: string | null; defaultSelected?: string | null; onSelect?: (id: string) => void; expanded?: readonly string[]; defaultExpanded?: readonly string[]; onExpandedChange?: (ids: string[]) => void; className?: string; }) { const [ownSelected, setOwnSelected] = useState(defaultSelected), [ownOpen, setOwnOpen] = useState(defaultExpanded), [active, setActive] = useState(null); const root = useRef(null); const typed = useRef({ text: "", time: 0 }); const current = selected === undefined ? ownSelected : selected; const open = useMemo(() => new Set(expanded ?? ownOpen), [expanded, ownOpen]); const visible = useMemo(() => flatten(items, open), [items, open]); const all = useMemo(() => { const map = new Map(); const walk = (list: readonly TreeItem[], level: number, parent: string | null) => list.forEach((item, index) => { map.set(item.id, { item, level, parent, index, size: list.length }); if (item.children) walk(item.children, level + 1, item.id); }); walk(items, 1, null); return map; }, [items]); const stop = visible.some((v) => v.item.id === active) ? active : visible.some((v) => v.item.id === current) ? current : visible.find((v) => !v.item.disabled)?.item.id; const setOpen = (ids: string[]) => { if (expanded === undefined) setOwnOpen(ids); onExpandedChange?.(ids); }; const toggle = (id: string, to?: boolean) => { const on = to ?? !open.has(id); setOpen(on ? [...open, id].filter((v, i, a) => a.indexOf(v) === i) : [...open].filter((v) => v !== id)); }; const choose = (id: string) => { if (selected === undefined) setOwnSelected(id); onSelect?.(id); }; const focus = (id: string | undefined) => id && root.current?.querySelector(`[data-tree-id="${CSS.escape(id)}"]`)?.focus(); const keys = (event: KeyboardEvent, node: Flat) => { if (event.target !== event.currentTarget || event.altKey || event.ctrlKey || event.metaKey) return; const at = visible.findIndex((v) => v.item.id === node.item.id); const enabled = (from: number, step: number) => { for (let i = from; i >= 0 && i < visible.length; i += step) if (!visible[i].item.disabled) return visible[i].item.id; }; const folder = !!node.item.children?.length; let handled = true; if (event.key === "ArrowDown") focus(enabled(at + 1, 1)); else if (event.key === "ArrowUp") focus(enabled(at - 1, -1)); else if (event.key === "Home") focus(enabled(0, 1)); else if (event.key === "End") focus(enabled(visible.length - 1, -1)); else if (event.key === "ArrowRight") { if (folder && !open.has(node.item.id)) toggle(node.item.id, true); else if (folder) focus(enabled(at + 1, 1)); } else if (event.key === "ArrowLeft") { if (folder && open.has(node.item.id)) toggle(node.item.id, false); else if (node.parent) focus(node.parent); } else if (event.key === "Enter" || event.key === " ") choose(node.item.id); else if (event.key === "*") { const siblings = (node.parent ? all.get(node.parent)!.item.children! : items).filter((s) => s.children?.length).map((s) => s.id); setOpen([...new Set([...open, ...siblings])]); } else if (event.key.length === 1 && /\S/.test(event.key)) { const now = event.timeStamp; typed.current = { text: now - typed.current.time < 600 ? typed.current.text + event.key.toLowerCase() : event.key.toLowerCase(), time: now }; const order = [...visible.slice(at + (typed.current.text.length > 1 ? 0 : 1)), ...visible.slice(0, at + 1)]; focus(order.find((v) => !v.item.disabled && v.item.label.toLowerCase().startsWith(typed.current.text))?.item.id); } else handled = false; if (handled) event.preventDefault(); }; const render = (list: readonly TreeItem[], level: number, parent: string | null) => list.map((item, index) => { const folder = !!item.children?.length; const isOpen = folder && open.has(item.id); const node: Flat = { item, level, parent, index, size: list.length }; return (

event.target === event.currentTarget && setActive(item.id)} onKeyDown={(event) => keys(event, node)} >

{ if (item.disabled) return; setActive(item.id); choose(item.id); if (folder) toggle(item.id); }} > {folder ? (

{folder && (

{render(item.children!, level + 1, item.id)}

)}

); }); return (

{render(items, 1, null)} ); } 53:T49f,/* tree-view.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="tree-view"], [data-slot="tree-view"] ul { margin: 0; padding: 0; list-style: none; } [data-slot="tree-item"] { outline: none; } [data-slot="tree-row"] { display: flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding-inline-end: 0.5rem; border-radius: var(--radius-control); font-size: 0.875rem; cursor: pointer; user-select: none; transition: background-color var(--duration-fast) var(--ease-out); } [data-slot="tree-row"]:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); } [data-slot="tree-row"][data-selected="true"] { background: var(--muted); font-weight: 500; } [data-slot="tree-item"]:focus-visible > [data-slot="tree-row"] { outline: 2px solid var(--ring); outline-offset: -2px; } [data-slot="tree-item"][aria-disabled="true"] > [data-slot="tree-row"] { opacity: 0.45; cursor: default; } @media (pointer: coarse) { [data-slot="tree-row"] { min-height: 2.75rem; } } } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/tree-view.tsx","content":"$52","type":"registry:ui","target":"components/ui/tree-view.tsx"},{"path":"ui/shared/tree-chevron.css","content":"/* Shared by agent-activity.tsx, approvals.tsx, file-diff.tsx, file-tree.tsx, json-viewer.tsx, timeline.tsx, todo-list.tsx, tree-view.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"tree-chevron\"] {\n transition: transform var(--duration-travel) var(--ease-showcase);\n }\n [data-slot=\"tree-chevron\"][data-open] {\n transform: rotate(90deg);\n }\n}\n","type":"registry:file","target":"components/ui/shared/tree-chevron.css"},{"path":"ui/shared/tree-panel.css","content":"/* Shared by agent-activity.tsx, approvals.tsx, audit-trail.tsx, booking-pill.tsx, comment-thread.tsx, control-center.tsx, feedback-widget.tsx, file-diff.tsx, file-tree.tsx, fixtures.tsx, inbox-sidebar.tsx, marketing-sections.tsx, page-parts.tsx, timeline.tsx, todo-list.tsx, tool-result.tsx, tree-view.tsx, workspace-sidebar.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"tree-panel\"] {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--duration-travel) var(--ease-settle);\n }\n [data-slot=\"tree-panel\"][data-open] {\n grid-template-rows: 1fr;\n }\n [data-slot=\"tree-panel\"] > div {\n min-height: 0;\n overflow: hidden;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"tree-panel\"] {\n transition-duration: 400ms;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/tree-panel.css"},{"path":"ui/tree-view.css","content":"$53","type":"registry:file","target":"components/ui/tree-view.css"}],"className":"h-[70svh] min-h-80"}]]}]