2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T6883,"use client"; import * as React from "react"; import { DndContext, DragOverlay, MouseSensor, pointerWithin, TouchSensor, useDraggable, useDroppable, useSensor, useSensors, type CollisionDetection, type DragEndEvent, type DragOverEvent, type DragStartEvent, } from "@dnd-kit/core"; import { IconBrandCss3, IconBrandHtml5, IconBrandJavascript, IconBrandTypescript, IconChevronRight, IconFile, IconFileText, IconFolder, IconFolderOpen, IconJson, IconLock, IconMarkdown, IconMinus, IconPhoto, IconPlus, } from "@tabler/icons-react"; import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; export type FileTreeSize = "sm" | "default" | "lg"; export type FileTreeSelectionMode = "single" | "multiple" | "none"; export type FileTreeIndicator = "chevron" | "plusminus" | "none" | ((state: { open: boolean }) => React.ReactNode); export type FileTreeMove = { /** Ids being moved. */ ids: string[]; /** Destination folder id, or null for the tree root. */ targetId: string | null; }; /* -------------------------------------------------------------------------- */ /* Icons */ /* -------------------------------------------------------------------------- */ const EXTENSION_ICONS: Record = { ts: , tsx: , js: , jsx: , mjs: , json: , md: , mdx: , css: , html: , png: , jpg: , jpeg: , webp: , svg: , gif: , lock: , yaml: , yml: , txt: , }; /** Icon for a file name, by extension. */ export function fileIconFor(name: string): React.ReactElement { const lower = name.toLowerCase(); if (lower.endsWith("-lock.yaml") || lower.endsWith("-lock.json") || lower.endsWith(".lock")) return ; const ext = lower.includes(".") ? lower.slice(lower.lastIndexOf(".") + 1) : ""; return EXTENSION_ICONS[ext] ?? ; } /* -------------------------------------------------------------------------- */ /* Context */ /* -------------------------------------------------------------------------- */ type TreeContextValue = { size: FileTreeSize; guides: boolean; indicator: FileTreeIndicator; selectionMode: FileTreeSelectionMode; selected: string[]; tabId: string | null; setTabId: (id: string) => void; draggable: boolean; dropId: string | null; openers: React.RefObject void>>; root: React.RefObject; select: (id: string, mods: { shift?: boolean; mod?: boolean }) => void; extendTo: (id: string) => void; items: () => HTMLElement[]; announce: (message: string) => void; cut: (ids: string[]) => void; paste: (targetId: string | null) => void; dragIds: (id: string) => string[]; typeAhead: (key: string, from: HTMLElement) => void; register: (id: string, ancestors: string[]) => void; }; const TreeContext = React.createContext(null); function useTree() { const ctx = React.useContext(TreeContext); if (!ctx) throw new Error("File tree parts must be rendered inside ."); return ctx; } const LevelContext = React.createContext(1); const AncestorContext = React.createContext([]); function useControllable(value: T | undefined, defaultValue: T, onChange?: (v: T) => void) { const [inner, setInner] = React.useState(defaultValue); const controlled = value !== undefined; const set = React.useCallback( (next: T) => { if (!controlled) setInner(next); onChange?.(next); }, [controlled, onChange], ); return [controlled ? value : inner, set] as const; } /* -------------------------------------------------------------------------- */ /* Root */ /* -------------------------------------------------------------------------- */ export type FileTreeProps = Omit, "defaultValue" | "onChange"> & { /** Selected item ids. */ value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; selectionMode?: FileTreeSelectionMode; size?: FileTreeSize; /** Vertical guide lines under each open folder. */ guides?: boolean; /** Folder indicator. A function renders a custom one. */ indicator?: FileTreeIndicator; /** Enables drag and drop (and Ctrl/Cmd+X, Ctrl/Cmd+V) to move items. */ draggable?: boolean; /** Called when items are dropped on a folder or the tree root. The tree does not reorder itself. */ onItemMove?: (move: FileTreeMove) => void; }; function FileTree({ className, value: valueProp, defaultValue, onValueChange, selectionMode = "single", size = "default", guides = false, indicator = "chevron", draggable = false, onItemMove, children, ...props }: FileTreeProps) { const [selected, setSelected] = useControllable(valueProp, defaultValue ?? [], onValueChange); const [tabId, setTabId] = React.useState(null); const [dropId, setDropId] = React.useState(null); const [activeDrag, setActiveDrag] = React.useState<{ label: string; count: number } | null>(null); const [message, setMessage] = React.useState(""); const root = React.useRef(null); const openers = React.useRef(new Map void>()); const anchor = React.useRef(null); const clipboard = React.useRef([]); const typeahead = React.useRef({ buffer: "", at: 0 }); const dropData = React.useRef>({}); const hoverTimer = React.useRef | null>(null); const dndId = React.useId(); const items = React.useCallback( () => Array.from(root.current?.querySelectorAll('[role="treeitem"]') ?? []), [], ); // Keep one tab stop alive: the first row until focus moves, and again if its row disappears. React.useEffect(() => { const all = items(); if (!all.length) return; if (tabId === null || !all.some((el) => el.dataset.id === tabId)) { // The DOM decides which rows exist (folders open and close), so this reads it after commit. // eslint-disable-next-line react-hooks/set-state-in-effect setTabId((all.find((el) => el.getAttribute("aria-selected") === "true") ?? all[0]).dataset.id ?? null); } }, [items, tabId, children, selected]); const announce = React.useCallback((m: string) => setMessage(m), []); const select = React.useCallback( (id: string, mods: { shift?: boolean; mod?: boolean }) => { if (selectionMode === "none") return; if (selectionMode === "single") return setSelected([id]); const ids = items().map((el) => el.dataset.id as string); if (mods.shift && anchor.current) { const a = ids.indexOf(anchor.current); const b = ids.indexOf(id); if (a >= 0 && b >= 0) return setSelected(ids.slice(Math.min(a, b), Math.max(a, b) + 1)); } anchor.current = id; if (mods.mod) setSelected(selected.includes(id) ? selected.filter((s) => s !== id) : [...selected, id]); else setSelected([id]); }, [items, selected, selectionMode, setSelected], ); const extendTo = React.useCallback( (id: string) => { if (selectionMode !== "multiple") return; if (!anchor.current) anchor.current = tabId ?? id; select(id, { shift: true }); }, [select, selectionMode, tabId], ); const dragIds = React.useCallback((id: string) => (selected.includes(id) ? selected : [id]), [selected]); const cut = React.useCallback( (ids: string[]) => { clipboard.current = ids; announce(`${ids.length} ${ids.length === 1 ? "item" : "items"} cut. Move to a folder and press Control or Command V to paste.`); }, [announce], ); const paste = React.useCallback( (targetId: string | null) => { if (!clipboard.current.length) return; const ids = clipboard.current; clipboard.current = []; onItemMove?.({ ids, targetId }); announce(`Moved ${ids.length} ${ids.length === 1 ? "item" : "items"}.`); }, [announce, onItemMove], ); const typeAhead = React.useCallback( (key: string, from: HTMLElement) => { const all = items(); const i = all.indexOf(from); const now = Date.now(); const t = typeahead.current; t.buffer = now - t.at > 600 ? key.toLowerCase() : t.buffer + key.toLowerCase(); t.at = now; // Repeating one letter cycles through matches; a longer prefix narrows. const cycle = t.buffer.length > 1 && t.buffer.split("").every((c) => c === t.buffer[0]); const needle = cycle ? t.buffer[0] : t.buffer; const order = [...all.slice(i + (t.buffer.length === 1 || cycle ? 1 : 0)), ...all.slice(0, i + 1)]; order.find((el) => el.dataset.label?.toLowerCase().startsWith(needle))?.focus(); }, [items], ); const register = React.useCallback((id: string, ancestors: string[]) => { dropData.current[id] = ancestors; }, []); const sensors = useSensors( useSensor(MouseSensor, { activationConstraint: { distance: 5 } }), useSensor(TouchSensor, { activationConstraint: { delay: 250, tolerance: 6 } }), ); const collision: CollisionDetection = (args) => pointerWithin(args).sort((a, b) => a.data!.droppableContainer.rect.current!.width * a.data!.droppableContainer.rect.current!.height - b.data!.droppableContainer.rect.current!.width * b.data!.droppableContainer.rect.current!.height); const validTarget = (dragged: string[], overId: string, ancestorsOf: Record) => !dragged.includes(overId) && !dragged.some((d) => ancestorsOf[overId]?.includes(d)); function onDragStart(e: DragStartEvent) { const ids = dragIds(String(e.active.id)); setActiveDrag({ label: String(e.active.data.current?.label ?? e.active.id), count: ids.length }); } function onDragOver(e: DragOverEvent) { if (hoverTimer.current) clearTimeout(hoverTimer.current); const over = e.over ? String(e.over.id) : null; const dragged = dragIds(String(e.active.id)); const ok = over !== null && (over === "__root__" || validTarget(dragged, over, dropData.current)); setDropId(ok ? over : null); if (ok && over && over !== "__root__") hoverTimer.current = setTimeout(() => openers.current.get(over)?.(), 650); } function onDragEnd(e: DragEndEvent) { if (hoverTimer.current) clearTimeout(hoverTimer.current); setActiveDrag(null); const target = dropId; setDropId(null); if (!target) return; const ids = dragIds(String(e.active.id)); const parent = (e.active.data.current?.ancestors as string[] | undefined)?.at(-1) ?? null; const targetId = target === "__root__" ? null : target; if (parent === targetId) return; onItemMove?.({ ids, targetId }); announce(`Moved ${ids.length} ${ids.length === 1 ? "item" : "items"}.`); } function onDragCancel() { if (hoverTimer.current) clearTimeout(hoverTimer.current); setActiveDrag(null); setDropId(null); } const ctx = React.useMemo( () => ({ size, guides, indicator, selectionMode, selected, tabId, setTabId, draggable, dropId, openers, root, select, extendTo, items, announce, cut, paste, dragIds, typeAhead, register, }), [size, guides, indicator, selectionMode, selected, tabId, draggable, dropId, select, extendTo, items, announce, cut, paste, dragIds, typeAhead, register], ); return (

{children}

{activeDrag ? (

{activeDrag.label} {activeDrag.count > 1 ? ( +{activeDrag.count - 1} ) : null}

) : null}

{message}

); } function RootDrop({ children, dropId, draggable }: { children: React.ReactNode; dropId: string | null; draggable: boolean }) { const { setNodeRef } = useDroppable({ id: "__root__", disabled: !draggable }); return (

{children}

); } /* -------------------------------------------------------------------------- */ /* Row (shared by files and folders) */ /* -------------------------------------------------------------------------- */ const rowSize = { sm: "h-6 gap-1 text-xs [&_svg]:size-3.5", default: "h-7 gap-1.5 text-sm [&_svg]:size-4", lg: "h-9 gap-2 text-sm [&_svg]:size-[18px]", } as const; type RowProps = { id: string; label: string; folder?: boolean; open?: boolean; onToggle?: (open: boolean) => void; icon?: React.ReactNode; trailing?: React.ReactNode; disabled?: boolean; controls?: string; className?: string; }; function Indicator({ open, folder }: { open: boolean; folder: boolean }) { const { indicator } = useTree(); if (indicator === "none") return null; return ( ); } function Row({ id, label, folder = false, open = false, onToggle, icon, trailing, disabled, controls, className }: RowProps) { const tree = useTree(); const level = React.useContext(LevelContext); const ancestors = React.useContext(AncestorContext); React.useLayoutEffect(() => tree.register(id, ancestors), [tree, id, ancestors]); const selected = tree.selectionMode === "none" ? undefined : tree.selected.includes(id); const drag = useDraggable({ id, disabled: !tree.draggable || disabled, data: { label, ancestors } }); const drop = useDroppable({ id, disabled: !tree.draggable || !folder }); const setRef = (el: HTMLDivElement | null) => { drag.setNodeRef(el); drop.setNodeRef(el); }; const focusItem = (el: HTMLElement | undefined) => { if (!el) return; el.focus(); }; const onKeyDown = (e: React.KeyboardEvent) => { if (e.target !== e.currentTarget) return; const all = tree.items(); const i = all.indexOf(e.currentTarget); const mod = e.metaKey || e.ctrlKey; if (tree.draggable && mod && (e.key === "x" || e.key === "X")) { e.preventDefault(); return tree.cut(tree.dragIds(id)); } if (tree.draggable && mod && (e.key === "v" || e.key === "V")) { e.preventDefault(); return tree.paste(folder ? id : (ancestors.at(-1) ?? null)); } switch (e.key) { case "ArrowDown": case "ArrowUp": { e.preventDefault(); const next = all[e.key === "ArrowDown" ? i + 1 : i - 1]; focusItem(next); if (e.shiftKey && next?.dataset.id) tree.extendTo(next.dataset.id); return; } case "Home": e.preventDefault(); return focusItem(all[0]); case "End": e.preventDefault(); return focusItem(all[all.length - 1]); case "ArrowRight": if (!folder) return; e.preventDefault(); if (!open) onToggle?.(true); else focusItem(all[i + 1]?.getAttribute("aria-level") === String(level + 1) ? all[i + 1] : undefined); return; case "ArrowLeft": { e.preventDefault(); if (folder && open) return onToggle?.(false); for (let j = i - 1; j >= 0; j--) { if (Number(all[j].getAttribute("aria-level")) < level) return focusItem(all[j]); } return; } case "Enter": e.preventDefault(); if (folder) onToggle?.(!open); if (tree.selectionMode !== "none") tree.select(id, {}); return; case " ": e.preventDefault(); if (tree.selectionMode === "multiple") tree.select(id, { mod: true, shift: e.shiftKey }); else if (tree.selectionMode === "single") tree.select(id, {}); else if (folder) onToggle?.(!open); return; case "*": if (!folder) return; e.preventDefault(); return tree.items().forEach((el) => el.getAttribute("aria-level") === String(level) && el.dataset.id && tree.openers.current.get(el.dataset.id)?.()); } // Type-ahead: letters build a prefix, repeated presses of one letter cycle. if (e.key.length === 1 && !mod && !e.altKey) tree.typeAhead(e.key, e.currentTarget); }; const onClick = (e: React.MouseEvent) => { if (disabled) return; tree.setTabId(id); tree.select(id, { shift: e.shiftKey, mod: e.metaKey || e.ctrlKey }); if (folder && !e.shiftKey && !e.metaKey && !e.ctrlKey) onToggle?.(!open); }; const isDropTarget = tree.dropId === id; const Icon = icon; return (

e.target === e.currentTarget && tree.setTabId(id)} {...(tree.draggable && !disabled ? drag.listeners : {})} className={cn( "flex w-full cursor-default items-center rounded-md pe-2 text-foreground outline-none select-none", "transition-colors duration-100 ease-out motion-reduce:transition-none", "[@media(hover:hover)]:hover:bg-muted/70 aria-selected:bg-accent aria-selected:text-accent-foreground", "focus-visible:ring-3 focus-visible:ring-ring/50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "data-dragging:opacity-40 data-drop-target:bg-primary/10 data-drop-target:ring-1 data-drop-target:ring-primary/40", rowSize[tree.size], className, )} > {Icon ?? null} {label} {trailing ? ( {trailing} ) : null}

); } /* -------------------------------------------------------------------------- */ /* File and folder */ /* -------------------------------------------------------------------------- */ export type FileTreeFileProps = { id: string; label: string; /** Overrides the icon chosen from the extension. */ icon?: React.ReactNode; /** Right-aligned content: counts, badges, checkboxes. */ trailing?: React.ReactNode; disabled?: boolean; className?: string; }; function FileTreeFile({ id, label, icon, ...props }: FileTreeFileProps) { return ; } export type FileTreeFolderProps = { id: string; label: string; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Shows a loading row. Use while children are fetched after the first open. */ loading?: boolean; /** Text for a folder with no children and nothing loading. */ emptyLabel?: string; icon?: React.ReactNode; trailing?: React.ReactNode; disabled?: boolean; className?: string; children?: React.ReactNode; }; function FileTreeFolder({ id, label, open: openProp, defaultOpen = false, onOpenChange, loading, emptyLabel = "Empty folder", icon, children, ...rowProps }: FileTreeFolderProps) { const tree = useTree(); const level = React.useContext(LevelContext); const ancestors = React.useContext(AncestorContext); const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange); const panelId = React.useId(); const nextAncestors = React.useMemo(() => [...ancestors, id], [ancestors, id]); const openRef = React.useRef(open); React.useLayoutEffect(() => { openRef.current = open; }); React.useLayoutEffect(() => { const map = tree.openers.current; map.set(id, () => { if (!openRef.current) setOpen(true); }); return () => { map.delete(id); }; }, [id, setOpen, tree.openers]); const hasChildren = React.Children.count(children) > 0; const FolderIcon = open ? IconFolderOpen : IconFolder; return ( } {...rowProps} /> {children} {loading ? : null} {!hasChildren && !loading ? {emptyLabel} : null} ); } function PlaceholderRow({ children, className, ...props }: React.ComponentProps<"div">) { const { size } = useTree(); const level = React.useContext(LevelContext); return (

{children}

); } function FileTreeLoadingRow({ children = "Loading", ...props }: React.ComponentProps<"div">) { return ( {children} ); } function FileTreeEmptyRow(props: React.ComponentProps<"div">) { return ; } /** Added and removed line counts for review trees. */ function FileTreeDiffStat({ added = 0, removed = 0, className }: { added?: number; removed?: number; className?: string }) { // Fixed-width columns so counts line up from row to row. return ( {added > 0 ? `+${added}` : ""} {removed > 0 ? `-${removed}` : ""} {`${added} added, ${removed} removed`} ); } export { FileTree, FileTreeFolder, FileTreeFile, FileTreeLoadingRow, FileTreeEmptyRow, FileTreeDiffStat }; 31:T308a,"use client"; import * as React from "react"; import { DemoGrid, DemoPage, DemoSection } from "../../_shared/variant-frame"; import { IconMinus, IconPlus } from "@tabler/icons-react"; import { Checkbox } from "@/components/ui/checkbox"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { FileTree, FileTreeDiffStat, FileTreeFile, FileTreeFolder, type FileTreeIndicator, type FileTreeMove, type FileTreeSelectionMode, type FileTreeSize, } from "./file-tree"; import { lazyChildren, pullRequestTree, repoTree, type FileNode, type PullRequestFile, } from "../_fixtures-b"; /* ------------------------------ data helpers ------------------------------- */ function removeNodes(nodes: FileNode[], ids: Set, taken: FileNode[]): FileNode[] { return nodes .filter((n) => { if (ids.has(n.id)) { taken.push(n); return false; } return true; }) .map((n) => (n.children ? { ...n, children: removeNodes(n.children, ids, taken) } : n)); } function insertInto(nodes: FileNode[], targetId: string, add: FileNode[]): FileNode[] { return nodes.map((n) => n.id === targetId ? { ...n, children: [...(n.children ?? []), ...add].sort(byKind) } : n.children ? { ...n, children: insertInto(n.children, targetId, add) } : n, ); } const isFolder = (n: FileNode) => n.children !== undefined || n.lazy; const byKind = (a: FileNode, b: FileNode) => Number(isFolder(b)) - Number(isFolder(a)) || a.name.localeCompare(b.name); function moveNodes(tree: FileNode[], { ids, targetId }: FileTreeMove): FileNode[] { const taken: FileNode[] = []; const rest = removeNodes(tree, new Set(ids), taken); if (targetId === null) return [...rest, ...taken].sort(byKind); return insertInto(rest, targetId, taken); } function patchNode(nodes: FileNode[], id: string, patch: (n: FileNode) => FileNode): FileNode[] { return nodes.map((n) => (n.id === id ? patch(n) : n.children ? { ...n, children: patchNode(n.children, id, patch) } : n)); } function Nodes({ nodes, loading, onOpenChange, defaultOpen, }: { nodes: FileNode[]; loading?: Set; onOpenChange?: (id: string, open: boolean) => void; defaultOpen?: Set; }) { return nodes.map((n) => isFolder(n) ? ( onOpenChange(n.id, o) : undefined} > {n.children ? : null} ) : ( ), ); } /* --------------------------------- chrome ---------------------------------- */ function Options({ label, value, onValueChange, options }: { label: string; value: T; onValueChange: (v: T) => void; options: readonly T[] }) { return (

{label} n[0] && onValueChange(n[0] as T)}> {options.map((o) => ( {o} ))}

); } const frame = "rounded-xl bg-card ring-1 ring-foreground/10"; const initiallyOpen = new Set(["app", "app/components"]); /* ------------------------------- playground -------------------------------- */ function Playground() { const [size, setSize] = React.useState("default"); const [mode, setMode] = React.useState("single"); const [guides, setGuides] = React.useState<"on" | "off">("on"); const [indicator, setIndicator] = React.useState<"chevron" | "plusminus" | "none">("chevron"); const [selected, setSelected] = React.useState(["app/components/button.tsx"]); const nodes = React.useMemo(() => repoTree.filter((n) => !n.lazy), []); return (

{ setMode(m); setSelected([]); }} options={["single", "multiple", "none"]} />

Selected: {selected.length ? selected.join(", ") : "none"}

); } /* ---------------------------- drag and drop -------------------------------- */ function DragAndDrop() { const [nodes, setNodes] = React.useState(() => repoTree.filter((n) => !n.lazy)); const [selected, setSelected] = React.useState([]); return (

{ setNodes((n) => moveNodes(n, m)); setSelected(m.ids); }} >

); } /* ------------------------------ dynamic (lazy) ----------------------------- */ function DynamicTree() { const [nodes, setNodes] = React.useState(() => repoTree.filter((n) => n.id === "node_modules" || n.id === "package.json")); const [loading, setLoading] = React.useState>(new Set()); const loaded = React.useRef(new Set()); const timers = React.useRef[]>([]); React.useEffect(() => { const t = timers.current; return () => t.forEach(clearTimeout); }, []); const onOpenChange = (id: string, open: boolean) => { const node = findNode(nodes, id); if (!open || !node?.lazy || loaded.current.has(id)) return; loaded.current.add(id); setLoading((s) => new Set(s).add(id)); timers.current.push( setTimeout(() => { setNodes((n) => patchNode(n, id, (x) => ({ ...x, lazy: false, children: lazyChildren[id] ?? [] }))); setLoading((s) => { const next = new Set(s); next.delete(id); return next; }); }, 1100), ); }; return (

); } function findNode(nodes: FileNode[], id: string): FileNode | undefined { for (const n of nodes) { if (n.id === id) return n; const hit = n.children && findNode(n.children, id); if (hit) return hit; } } /* ----------------------------- PR file review ------------------------------ */ function totals(n: PullRequestFile): { added: number; removed: number } { if (!n.children) return { added: n.added ?? 0, removed: n.removed ?? 0 }; return n.children.reduce((acc, c) => { const t = totals(c); return { added: acc.added + t.added, removed: acc.removed + t.removed }; }, { added: 0, removed: 0 }); } function countFiles(nodes: PullRequestFile[]): number { return nodes.reduce((a, n) => a + (n.children ? countFiles(n.children) : 1), 0); } function PrNodes({ nodes, viewed, toggle }: { nodes: PullRequestFile[]; viewed: Set; toggle: (id: string) => void }) { return nodes.map((n) => { if (n.children) { const t = totals(n); return ( }> ); } return ( e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()} className="grid place-items-center"> toggle(n.id)} aria-label={`Mark ${n.name} as viewed`} /> } /> ); }); } function PullRequestReview() { const [viewed, setViewed] = React.useState>(new Set(["pr/package.json"])); const [selected, setSelected] = React.useState(["pr/app/components/table.tsx"]); const toggle = (id: string) => setViewed((v) => { const next = new Set(v); if (next.has(id)) next.delete(id); else next.add(id); return next; }); const all = pullRequestTree.reduce((acc, n) => { const t = totals(n); return { added: acc.added + t.added, removed: acc.removed + t.removed }; }, { added: 0, removed: 0 }); const total = countFiles(pullRequestTree); return (

Changed files {all.added} {all.removed} {viewed.size} of {total} viewed

); } /* ---------------------------- custom indicator ----------------------------- */ function CustomIndicator() { return (

( )} > !n.lazy).slice(0, 3)} defaultOpen={new Set(["docs"])} />

); } export function FileTreeDemo() { return ( ); } export default FileTreeDemo; 32:T8f3,import type { BlockMeta } from "../../../lib/block-meta"; export const fileTreeMeta: BlockMeta = { slug: "file-tree", title: "File tree", description: "Accessible tree on Kobra Collapsible: role tree and treeitem with aria-expanded, aria-level and aria-selected, arrow keys, home and end, type-ahead, extension icons, guide lines, three sizes, single and multiple selection, drag and drop (and cut and paste) to move, lazy folders with a loading row, custom indicators, and a pull request file review composition.", group: "data", kobraDeps: ["collapsible", "spinner"], files: ["blocks/data/file-tree/file-tree.tsx"], props: [ { name: "value", type: "string[]", description: "Selected ids. Controlled." }, { name: "defaultValue", type: "string[]", description: "Uncontrolled initial selection." }, { name: "onValueChange", type: "(value: string[]) => void", description: "Selection change." }, { name: "selectionMode", type: "'single' | 'multiple' | 'none'", default: "'single'", description: "Multiple supports Ctrl/Cmd click, Shift click, Shift+arrows and Space." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Row height, icon and text size." }, { name: "guides", type: "boolean", default: "false", description: "Vertical guide lines under open folders." }, { name: "indicator", type: "'chevron' | 'plusminus' | 'none' | (state: { open: boolean }) => ReactNode", default: "'chevron'", description: "Folder indicator." }, { name: "draggable", type: "boolean", default: "false", description: "Drag to move. Ctrl/Cmd+X then Ctrl/Cmd+V is the keyboard path." }, { name: "onItemMove", type: "({ ids, targetId }) => void", description: "Drop or paste on a folder (targetId) or the root (null). The consumer reorders its data." }, { name: "FileTreeFolder open / defaultOpen / onOpenChange", type: "boolean / boolean / fn", description: "Folder expansion." }, { name: "FileTreeFolder loading", type: "boolean", description: "Shows a loading row for lazy children." }, { name: "FileTreeFile / Folder trailing", type: "ReactNode", description: "Right-aligned content such as counts or checkboxes." }, ], tags: ["tree", "files", "explorer", "dnd", "aria", "data"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#data","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Data display"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"File tree"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"File tree"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Accessible tree on Kobra Collapsible: role tree and treeitem with aria-expanded, aria-level and aria-selected, arrow keys, home and end, type-ahead, extension icons, guide lines, three sizes, single and multiple selection, drag and drop (and cut and paste) to move, lazy folders with a loading row, custom indicators, and a pull request file review composition."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"file-tree","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/file-tree/file-tree.tsx","code":"$30"},{"path":"blocks/data/file-tree/demo.tsx","code":"$31"},{"path":"blocks/data/file-tree/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]