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:T7bc,.cr-tree, .cr-tree ul { margin: 0; padding: 0; list-style: none; } .cr-tree { padding: var(--cr-space-2); border-radius: var(--cr-radius-lg); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-tree__item { border-radius: var(--cr-radius-sm); outline: none; } .cr-tree__row { display: flex; align-items: center; gap: var(--cr-space-2); height: 32px; padding-inline-end: 10px; border-radius: var(--cr-radius-sm); cursor: pointer; } .cr-tree__row:hover { background: var(--cr-color-bg-subtle); } .cr-tree__item[aria-selected='true'] > .cr-tree__row { background: var(--cr-color-ink-subtle); font-weight: var(--cr-font-weight-semibold); } .cr-tree__item:focus-visible > .cr-tree__row { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: -1px; } .cr-tree__twist { display: flex; width: 12px; color: var(--cr-color-text-muted); font-size: 12px; } .cr-tree__twist .cr-icon { transition: transform var(--cr-motion-duration-fast) var(--cr-motion-easing-standard); } .cr-tree__item[aria-expanded='true'] > .cr-tree__row .cr-tree__twist .cr-icon { transform: rotate(90deg); } /* Folder and file glyphs drawn with borders, so they follow the theme. */ .cr-tree__icon { box-sizing: border-box; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--cr-color-text-muted); } .cr-tree__icon[data-kind='folder'] { height: 11px; border-radius: 2px 3px 3px 3px; } .cr-tree__icon[data-kind='file'] { width: 11px; border-radius: 2px; } .cr-tree__name { flex: 1; min-width: 0; overflow: hidden; font-family: var(--cr-font-family-mono); font-size: var(--cr-font-size-sm); text-overflow: ellipsis; white-space: nowrap; } .cr-tree__status { font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-bold); } .cr-tree__status[data-status='D'] { color: var(--cr-color-danger-text); } 53:T15fc,'use client'; import { useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { ChevronIcon } from '@/lib/creance/icons'; import './FileTree.css'; export interface FileNode { id: string; name: string; /** Present for folders, even when empty. */ children?: FileNode[]; /** A short change marker: M modified, A added, D deleted. */ status?: 'M' | 'A' | 'D'; } export interface FileTreeProps { nodes: FileNode[]; /** Names the tree, such as "Changed files". */ label: string; defaultExpanded?: string[]; selected?: string | null; onSelect?: (node: FileNode) => void; className?: string; } const statusWords = { M: 'modified', A: 'added', D: 'deleted' }; interface Row { node: FileNode; level: number; parent: string | null; } /** * Files and folders as an ARIA tree. Up and Down move, Right opens a folder or steps in, Left closes * it or steps out, Home and End jump, Enter selects. One stop in the tab order. */ export function FileTree({ nodes, label, defaultExpanded = [], selected, onSelect, className }: FileTreeProps) { const [expanded, setExpanded] = useState(() => new Set(defaultExpanded)); const [ownSelected, setOwnSelected] = useState(null); const current = selected === undefined ? ownSelected : selected; const [focused, setFocused] = useState(null); const refs = useRef(new Map()); // The rows a person can see, in order: what the arrow keys walk. const rows = useMemo(() => { const out: Row[] = []; const walk = (list: FileNode[], level: number, parent: string | null) => list.forEach((node) => { out.push({ node, level, parent }); if (node.children && expanded.has(node.id)) walk(node.children, level + 1, node.id); }); walk(nodes, 1, null); return out; }, [nodes, expanded]); const active = focused ?? current ?? rows[0]?.node.id ?? null; const focus = (id: string) => { setFocused(id); refs.current.get(id)?.focus(); }; const toggle = (id: string, open?: boolean) => setExpanded((prev) => { const next = new Set(prev); if (open ?? !next.has(id)) next.add(id); else next.delete(id); return next; }); const select = (node: FileNode) => { if (selected === undefined) setOwnSelected(node.id); onSelect?.(node); }; const onKeyDown = (e: KeyboardEvent, row: Row, index: number) => { const { node } = row; const folder = !!node.children; const open = expanded.has(node.id); const go: Record void> = { ArrowDown: () => rows[index + 1] && focus(rows[index + 1]!.node.id), ArrowUp: () => rows[index - 1] && focus(rows[index - 1]!.node.id), Home: () => focus(rows[0]!.node.id), End: () => focus(rows[rows.length - 1]!.node.id), ArrowRight: () => (folder && !open ? toggle(node.id, true) : folder && node.children!.length ? focus(node.children![0]!.id) : undefined), ArrowLeft: () => (folder && open ? toggle(node.id, false) : row.parent ? focus(row.parent) : undefined), Enter: () => (folder ? toggle(node.id) : select(node)), ' ': () => (folder ? toggle(node.id) : select(node)), }; if (go[e.key]) { e.preventDefault(); e.stopPropagation(); go[e.key]!(); } }; const render = (list: FileNode[]): ReactNode => list.map((node) => { const index = rows.findIndex((r) => r.node.id === node.id); const row = rows[index]!; const folder = !!node.children; const open = expanded.has(node.id); return (

{ if (el) refs.current.set(node.id, el); else refs.current.delete(node.id); }} role="treeitem" aria-level={row.level} aria-expanded={folder ? open : undefined} aria-selected={folder ? undefined : node.id === current} tabIndex={node.id === active ? 0 : -1} className="cr-tree__item" onKeyDown={(e) => onKeyDown(e, row, index)} onFocus={(e) => e.target === e.currentTarget && setFocused(node.id)} > {/* The row is drawn by this div; the li carries the tree semantics and focus. */} {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}

{ focus(node.id); if (folder) toggle(node.id); else select(node); }} >

{folder && open && node.children!.length > 0 &&

{render(node.children!)}}

); }); return (

{render(nodes)} ); } 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":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"file-tree/FileTree.css","content":"$52","type":"registry:file","target":"@components/creance/file-tree/FileTree.css"},{"path":"file-tree/FileTree.tsx","content":"$53","type":"registry:ui","target":"@components/creance/file-tree/FileTree.tsx"}],"className":"h-[70svh] min-h-80"}]]}]