4e: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"] 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/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"] 50:T4841,"use client"; import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react"; import type { MouseEvent } from "react"; import { cn } from "@/lib/utils"; import { TooltipProvider } from "@/components/ui/tooltip"; import { DEFAULT_FILE_TREE_LABELS, type FileTreeHandle, type FileTreeHeaderContext, type FileTreeProps, type FileTreeRow, type FsNode, } from "./types"; import { FileTreeContext, type FileTreeContextValue, } from "./hooks/use-file-tree-context"; import { useTreeState } from "./hooks/use-tree-state"; import { useTreeFlatten } from "./hooks/use-tree-flatten"; import { useLazyLoad } from "./hooks/use-lazy-load"; import { useTreeVirtual } from "./hooks/use-tree-virtual"; import { useTreeDrag } from "./hooks/use-tree-drag"; import { useTreeKeyboard } from "./hooks/use-tree-keyboard"; import { findNode, indexNodes } from "./lib/tree-utils"; import { validateNodes } from "./lib/validation"; import { FileTreeHeader } from "./parts/file-tree-header"; import { FileTreeRowList } from "./parts/file-tree-row-list"; import { FileTreeEmpty } from "./parts/file-tree-empty"; import { FileTreeLoading } from "./parts/file-tree-loading"; import { FileTreeDragOverlay } from "./parts/file-tree-drag-overlay"; import { FileTreeDeleteConfirm } from "./parts/file-tree-delete-confirm"; import { FileTreeContextMenu } from "./parts/file-tree-context-menu"; export const FileTree = forwardRef( function FileTree(props, ref) { const { nodes, loading = false, selectionMode = "single", selectedIds, defaultSelectedIds, onSelectedChange, expandedIds, defaultExpandedIds, onExpandedChange, onLoadChildren, onOpen, onCreate, onRename, onDelete, onMove, onRefresh, onExternalDrop, validateRename, iconForNode, renderRow, renderHeader, renderContextMenu, renderEmpty, renderLoading, renderDeleteConfirm, header = true, title, showNewFile = true, showNewFolder = true, showRefresh = true, showCollapseAll = true, contextMenu = true, contextMenuActions, showHidden = false, isHidden, sortNodes, indentGuides = true, rowHeight = 28, indent = 18, confirmDelete = true, enableInternalDrag = true, enableExternalDrop = true, virtualize = "auto", virtualizeThreshold = 200, className, style, labels: labelsOverride, } = props; const labels = useMemo( () => ({ ...DEFAULT_FILE_TREE_LABELS, ...labelsOverride }), [labelsOverride], ); // ── Pending delete (alertdialog) ─────────────────────────────────────── const [pendingDeleteIds, setPendingDeleteIds] = useState([]); const requestDeleteConfirmation = useCallback( (ids: string[]) => setPendingDeleteIds(ids), [], ); // ── State + actions ──────────────────────────────────────────────────── const stateHook = useTreeState({ nodes, selectionMode, selectedIds, defaultSelectedIds, onSelectedChange, expandedIds, defaultExpandedIds, onExpandedChange, onCreate, onDelete, onRefresh, confirmDelete, requestDeleteConfirmation, }); // ── Lazy load wiring ─────────────────────────────────────────────────── const lazy = useLazyLoad({ onLoadChildren, setLoadingFolderIds: stateHook.setLoadingFolderIds, }); // Auto-fire onLoadChildren when consumer expands a folder w/ children=undefined. useEffect(() => { if (!onLoadChildren) return; for (const id of stateHook.state.expandedIds) { const node = findNode(id, nodes); if ( node && node.type === "folder" && node.children === undefined && !lazy.errors.has(node.id) ) { lazy.load(node); } } // We intentionally exclude `lazy` from deps to avoid re-firing on // every error-state update. The fields we care about are above. // eslint-disable-next-line react-hooks/exhaustive-deps }, [stateHook.state.expandedIds, nodes, onLoadChildren]); // ── Visible-row flatten ──────────────────────────────────────────────── const rows = useTreeFlatten({ nodes, expandedIds: stateHook.state.expandedIds, selectedIds: stateHook.state.selectedIds, focusedId: stateHook.state.focusedId, loadingFolderIds: stateHook.state.loadingFolderIds, showHidden, isHidden, sortNodes, }); // ── Drag ─────────────────────────────────────────────────────────────── const drag = useTreeDrag({ nodes, enableInternalDrag, enableExternalDrop, selectedIds: stateHook.state.selectedIds, selectionMode, onMove, onExternalDrop, selectIds: stateHook.actions.select, }); // ── Keyboard ─────────────────────────────────────────────────────────── const kb = useTreeKeyboard({ rows, focusedId: stateHook.state.focusedId, renamingId: stateHook.state.renamingId, selectionMode, selectedIds: stateHook.state.selectedIds, actions: stateHook.actions, onOpen, }); // ── Validate nodes (dev) ─────────────────────────────────────────────── useEffect(() => { if (process.env.NODE_ENV === "production") return; const warnings = validateNodes(nodes); for (const w of warnings) { console.warn("[file-tree]", w); } }, [nodes]); // ── Imperative handle ────────────────────────────────────────────────── useImperativeHandle( ref, () => ({ state: stateHook.state, actions: stateHook.actions, }), [stateHook.state, stateHook.actions], ); // ── Index for context-menu target lookup ─────────────────────────────── const nodeIndex = useMemo(() => indexNodes(nodes), [nodes]); // ── Roving tabindex → real DOM focus (v0.1.1, review 5.6) ────────────── // The roving tabindex was state-only: arrow keys updated `focusedId` but // never moved DOM focus, so screen readers heard nothing and the // focus-visible ring never rendered. Mirrors app-sidebar's pattern. // Only steals focus while the user is already interacting with the tree. const rootElRef = useRef(null); const focusedIdForDom = stateHook.state.focusedId; useEffect(() => { if (!focusedIdForDom) return; if (typeof document === "undefined") return; const root = rootElRef.current; if (!root) return; if (!root.contains(document.activeElement)) return; const escaped = window.CSS.escape(focusedIdForDom); const target = root.querySelector( `[data-row-id="${escaped}"]`, ); if (target) { if (document.activeElement !== target) target.focus(); } else { // Virtualized mode: the focused row may not be mounted — fall back // to the container so keyboard navigation keeps working. root.focus({ preventScroll: true }); } }, [focusedIdForDom]); // ── Row click + double-click + chevron + context-menu ────────────────── const onRowClick = useCallback( (e: MouseEvent, row: FileTreeRow) => { if (selectionMode === "multi" && (e.metaKey || e.ctrlKey)) { const next = new Set(stateHook.state.selectedIds); if (next.has(row.node.id)) next.delete(row.node.id); else next.add(row.node.id); stateHook.actions.select(Array.from(next)); stateHook.setSelectionAnchorId(row.node.id); } else if (selectionMode === "multi" && e.shiftKey) { const anchor = stateHook.getSelectionAnchorId(); if (!anchor) { stateHook.actions.select(row.node.id); stateHook.setSelectionAnchorId(row.node.id); } else { const aIdx = rows.findIndex((r) => r.node.id === anchor); const bIdx = rows.findIndex((r) => r.node.id === row.node.id); if (aIdx !== -1 && bIdx !== -1) { const [from, to] = aIdx < bIdx ? [aIdx, bIdx] : [bIdx, aIdx]; const ids = rows.slice(from, to + 1).map((r) => r.node.id); stateHook.actions.select(ids); } } } else { stateHook.actions.select(row.node.id); stateHook.setSelectionAnchorId(row.node.id); } stateHook.actions.focusNode(row.node.id); }, [selectionMode, stateHook, rows], ); const onChevronClick = useCallback( (_e: MouseEvent, row: FileTreeRow) => { if (row.node.type !== "folder") return; stateHook.actions.toggleExpand(row.node.id); }, [stateHook.actions], ); const onRowDoubleClick = useCallback( (_e: MouseEvent, row: FileTreeRow) => { if (row.node.type === "folder") { stateHook.actions.toggleExpand(row.node.id); } else { onOpen?.({ node: row.node }); } }, [stateHook.actions, onOpen], ); const onRowContextMenu = useCallback( (_e: MouseEvent, row: FileTreeRow) => { if (!stateHook.state.selectedIds.has(row.node.id)) { stateHook.actions.select(row.node.id); } stateHook.actions.focusNode(row.node.id); }, [stateHook.state.selectedIds, stateHook.actions], ); const onRenameCommit = useCallback( (id: string, nextName: string) => { const node = findNode(id, nodes); if (node && onRename) onRename({ id, node, nextName }); stateHook.actions.cancelRename(); }, [nodes, onRename, stateHook.actions], ); const onRenameCancel = useCallback(() => { stateHook.actions.cancelRename(); }, [stateHook.actions]); // ── Header context (for renderHeader slot) ───────────────────────────── const totalCount = stateHook.totalCount; const visibleCount = rows.length; const headerCtx: FileTreeHeaderContext = useMemo( () => ({ state: stateHook.state, actions: stateHook.actions, totalCount, visibleCount, showNewFile, showNewFolder, showRefresh, showCollapseAll, title, labels, }), [ stateHook.state, stateHook.actions, totalCount, visibleCount, showNewFile, showNewFolder, showRefresh, showCollapseAll, title, labels, ], ); // ── Public Context value ─────────────────────────────────────────────── const ctxValue: FileTreeContextValue = useMemo( () => ({ state: stateHook.state, actions: stateHook.actions, rows, totalCount, visibleCount, showNewFile, showNewFolder, showRefresh, showCollapseAll, title, labels, }), [ stateHook.state, stateHook.actions, rows, totalCount, visibleCount, showNewFile, showNewFolder, showRefresh, showCollapseAll, title, labels, ], ); // ── Virtualization ───────────────────────────────────────────────────── const scrollRef = useRef(null); const v = useTreeVirtual({ rows, scrollRef, mode: virtualize, threshold: virtualizeThreshold, rowHeight, }); // ── Body content ─────────────────────────────────────────────────────── let body: React.ReactNode; if (loading) { body = renderLoading?.() ?? ; } else if (nodes.length === 0) { body = renderEmpty?.({ actions: stateHook.actions, showNewFile, showNewFolder, labels, }) ?? ; } else { const list = (

{ const node = findNode(nodeId, nodes); if (node) { lazy.clearError(nodeId); lazy.load(node); } }} labels={labels} virtualizer={v.active ? v.virtualizer : undefined} scrollRef={scrollRef} renderRow={renderRow} onRowClick={onRowClick} onChevronClick={onChevronClick} onRowDoubleClick={onRowDoubleClick} onRowContextMenu={onRowContextMenu} onRenameCommit={onRenameCommit} onRenameCancel={onRenameCancel} onRowDragStart={drag.onRowDragStart} onRowDragOver={drag.onRowDragOver} onRowDragLeave={drag.onRowDragLeave} onRowDrop={drag.onRowDrop} onRowDragEnd={drag.onRowDragEnd} />

); body = ( {list} ); } // ── Pending-delete dialog ────────────────────────────────────────────── const pendingNodes: FsNode[] = useMemo( () => pendingDeleteIds .map((id) => nodeIndex.get(id)) .filter((n): n is FsNode => Boolean(n)), [pendingDeleteIds, nodeIndex], ); const onConfirmDelete = useCallback(() => { if (pendingDeleteIds.length === 0) return; onDelete?.({ ids: pendingDeleteIds }); setPendingDeleteIds([]); }, [onDelete, pendingDeleteIds]); const onCancelDelete = useCallback(() => { setPendingDeleteIds([]); }, []); return ( {/* No delayDuration — Radix-only prop; Base UI's TooltipProvider rejects it (F-cross-13). */}

{header ? (renderHeader ? renderHeader(headerCtx) : ) : null} {body} {confirmDelete && pendingDeleteIds.length > 0 ? ( renderDeleteConfirm ? ( renderDeleteConfirm({ ids: pendingDeleteIds, nodes: pendingNodes, onConfirm: onConfirmDelete, onCancel: onCancelDelete, labels, }) ) : ( ) ) : null}

); }, ); FileTree.displayName = "FileTree"; 51:T54d,export { FileTree } from "./file-tree"; export { FileTreeHeader } from "./parts/file-tree-header"; export { FileTreeNewFileButton } from "./parts/file-tree-new-file-button"; export { FileTreeNewFolderButton } from "./parts/file-tree-new-folder-button"; export { FileTreeRefreshButton } from "./parts/file-tree-refresh-button"; export { FileTreeCollapseAllButton } from "./parts/file-tree-collapse-all-button"; export { useFileTree } from "./hooks/use-file-tree-context"; export { mergeLoadedChildren } from "./lib/tree-utils"; export { iconForExtension } from "./lib/icons"; export { DEFAULT_FILE_TREE_LABELS } from "./types"; export type { FsNode, FsNodeType, FileTreeProps, FileTreeHandle, FileTreeState, FileTreeActions, FileTreeRow, FileTreeSelectionMode, FileTreeDropPosition, FileTreeVirtualizeMode, FileTreeOpenArgs, FileTreeCreateArgs, FileTreeRenameArgs, FileTreeDeleteArgs, FileTreeMoveArgs, FileTreeRefreshArgs, FileTreeExternalDropArgs, FileTreeLoadChildrenArgs, FileTreeSelectionChangeArgs, FileTreeExpandedChangeArgs, FileTreeValidateRenameArgs, FileTreeIconForNodeArgs, FileTreeContextMenuItem, FileTreeContextMenuItemId, FileTreeHeaderContext, FileTreeContextMenuContext, FileTreeEmptyContext, FileTreeRowRenderArgs, FileTreeDeleteConfirmContext, FileTreeLabels, } from "./types"; 52:T22a0,import type { CSSProperties, ReactNode, Ref } from "react"; export type FsNodeType = "file" | "folder"; /** * Hierarchical-node shape consumed by ``. * * `children` semantics: * - `undefined` — unknown / not yet loaded → triggers `onLoadChildren` on first expand * - `[]` — known-empty folder → renders "(empty)" inline placeholder * - `FsNode[]` — pre-loaded children */ export interface FsNode { id: string; name: string; type: FsNodeType; parentId?: string | null; children?: FsNode[]; ext?: string; size?: number; modifiedAt?: string; icon?: ReactNode; meta?: Record; } export type FileTreeSelectionMode = "single" | "multi"; export type FileTreeDropPosition = "before" | "inside" | "after"; export type FileTreeVirtualizeMode = "auto" | "always" | "never"; /** Visible-row descriptor produced by the flattening pass. */ export interface FileTreeRow { node: FsNode; depth: number; expanded: boolean; selected: boolean; focused: boolean; hasChildren: boolean; childrenLoaded: boolean; loadingChildren: boolean; /** Position within the visible-rows array. */ index: number; /** Number of visible siblings at this depth (for aria-setsize). */ siblingCount: number; /** 1-based position among siblings at this depth (for aria-posinset). */ siblingIndex: number; } /** Read-only state surfaced to slots and the imperative ref. */ export interface FileTreeState { expandedIds: ReadonlySet; selectedIds: ReadonlySet; focusedId: string | null; renamingId: string | null; loadingFolderIds: ReadonlySet; } /** Imperative actions exposed to slots and the imperative ref. */ export interface FileTreeActions { expand: (id: string) => void; collapse: (id: string) => void; toggleExpand: (id: string) => void; expandAll: () => void; collapseAll: () => void; select: (idOrIds: string | string[]) => void; clearSelection: () => void; focusNode: (id: string) => void; startRename: (id: string) => void; cancelRename: () => void; triggerCreate: (parentId: string | null, type: FsNodeType) => void; triggerDelete: (ids: string[]) => void; refresh: (nodeId?: string | null) => void; } export interface FileTreeHandle { state: FileTreeState; actions: FileTreeActions; } // ─── Callback arg shapes (object-shape per F-cross-12) ────────────────────── export interface FileTreeOpenArgs { node: FsNode; } export interface FileTreeCreateArgs { parentId: string | null; type: FsNodeType; } export interface FileTreeRenameArgs { id: string; node: FsNode; nextName: string; } export interface FileTreeDeleteArgs { ids: string[]; } export interface FileTreeMoveArgs { ids: string[]; targetId: string | null; position: FileTreeDropPosition; } export interface FileTreeRefreshArgs { nodeId: string | null; } export interface FileTreeExternalDropArgs { files: File[]; targetId: string | null; } export interface FileTreeLoadChildrenArgs { nodeId: string; node: FsNode; } export interface FileTreeSelectionChangeArgs { ids: Set; } export interface FileTreeExpandedChangeArgs { ids: Set; } export interface FileTreeValidateRenameArgs { node: FsNode; nextName: string; } export interface FileTreeIconForNodeArgs { node: FsNode; } // ─── Default labels (full set; consumers override partially via `labels` prop) ─ export interface FileTreeLabels { title: string; newFile: string; newFolder: string; refresh: string; collapseAll: string; contextOpen: string; contextNewFile: string; contextNewFolder: string; contextRename: string; contextDelete: string; contextRefresh: string; deleteConfirmTitle: string; deleteConfirmDescription: string; deleteConfirmAction: string; deleteConfirmCancel: string; emptyTitle: string; loading: string; externalDropOverlay: string; nodeCount: string; loadError: string; retry: string; } // ─── Slot contexts ────────────────────────────────────────────────────────── export interface FileTreeHeaderContext { state: FileTreeState; actions: FileTreeActions; totalCount: number; visibleCount: number; showNewFile: boolean; showNewFolder: boolean; showRefresh: boolean; showCollapseAll: boolean; title?: string; labels: FileTreeLabels; } export type FileTreeContextMenuItemId = | "open" | "new-file" | "new-folder" | "rename" | "delete" | "refresh"; export interface FileTreeContextMenuItem { id: FileTreeContextMenuItemId; label: string; onSelect: () => void; disabled?: boolean; destructive?: boolean; icon?: ReactNode; } export interface FileTreeContextMenuContext { state: FileTreeState; actions: FileTreeActions; /** The node under the right-click target. `null` when right-clicking empty whitespace. */ node: FsNode | null; defaultActions: FileTreeContextMenuItem[]; position: { x: number; y: number }; labels: FileTreeLabels; } export interface FileTreeEmptyContext { actions: FileTreeActions; showNewFile: boolean; showNewFolder: boolean; labels: FileTreeLabels; } export interface FileTreeRowRenderArgs { row: FileTreeRow; defaultRow: ReactNode; } export interface FileTreeDeleteConfirmContext { ids: string[]; nodes: FsNode[]; onConfirm: () => void; onCancel: () => void; labels: FileTreeLabels; } // ─── Top-level props ──────────────────────────────────────────────────────── export interface FileTreeProps { // Data nodes: FsNode[]; loading?: boolean; // Selection selectionMode?: FileTreeSelectionMode; selectedIds?: Set; defaultSelectedIds?: Set; onSelectedChange?: (args: FileTreeSelectionChangeArgs) => void; // Expansion expandedIds?: Set; defaultExpandedIds?: Set; onExpandedChange?: (args: FileTreeExpandedChangeArgs) => void; // Lazy loading onLoadChildren?: (args: FileTreeLoadChildrenArgs) => Promise; // Operations onOpen?: (args: FileTreeOpenArgs) => void; onCreate?: (args: FileTreeCreateArgs) => void; onRename?: (args: FileTreeRenameArgs) => void; onDelete?: (args: FileTreeDeleteArgs) => void; onMove?: (args: FileTreeMoveArgs) => void; onRefresh?: (args: FileTreeRefreshArgs) => void; onExternalDrop?: (args: FileTreeExternalDropArgs) => void; validateRename?: (args: FileTreeValidateRenameArgs) => string | null; // Rendering iconForNode?: (args: FileTreeIconForNodeArgs) => ReactNode; renderRow?: (args: FileTreeRowRenderArgs) => ReactNode; renderHeader?: (ctx: FileTreeHeaderContext) => ReactNode; renderContextMenu?: (ctx: FileTreeContextMenuContext) => ReactNode; renderEmpty?: (ctx: FileTreeEmptyContext) => ReactNode; renderLoading?: () => ReactNode; renderDeleteConfirm?: (ctx: FileTreeDeleteConfirmContext) => ReactNode; // Header config header?: boolean; title?: string; showNewFile?: boolean; showNewFolder?: boolean; showRefresh?: boolean; showCollapseAll?: boolean; // Context-menu config contextMenu?: boolean; contextMenuActions?: { open?: boolean; newFile?: boolean; newFolder?: boolean; rename?: boolean; delete?: boolean; refresh?: boolean; }; // Behavior showHidden?: boolean; isHidden?: (node: FsNode) => boolean; sortNodes?: ((a: FsNode, b: FsNode) => number) | false; indentGuides?: boolean; rowHeight?: number; indent?: number; // Confirmation confirmDelete?: boolean; // DnD enableInternalDrag?: boolean; enableExternalDrop?: boolean; // Virtualization virtualize?: FileTreeVirtualizeMode; virtualizeThreshold?: number; // Polymorphic className?: string; style?: CSSProperties; // Imperative handle ref?: Ref; // i18n labels labels?: Partial; } /** Default labels — exported so consumers can build complete label objects. */ export const DEFAULT_FILE_TREE_LABELS: FileTreeLabels = { title: "Files", newFile: "New File", newFolder: "New Folder", refresh: "Refresh", collapseAll: "Collapse All", contextOpen: "Open", contextNewFile: "New File", contextNewFolder: "New Folder", contextRename: "Rename", contextDelete: "Delete", contextRefresh: "Refresh", deleteConfirmTitle: "Delete items?", deleteConfirmDescription: "This action cannot be undone.", deleteConfirmAction: "Delete", deleteConfirmCancel: "Cancel", emptyTitle: "No items", loading: "Loading…", externalDropOverlay: "Drop files here", nodeCount: "items", loadError: "Failed to load", retry: "Retry", }; 53:T408,"use client"; import { createContext, useContext } from "react"; import type { FileTreeActions, FileTreeLabels, FileTreeRow, FileTreeState, } from "../types"; export interface FileTreeContextValue { state: FileTreeState; actions: FileTreeActions; rows: FileTreeRow[]; totalCount: number; visibleCount: number; /** Header config (read by standalone parts). */ showNewFile: boolean; showNewFolder: boolean; showRefresh: boolean; showCollapseAll: boolean; title?: string; labels: FileTreeLabels; } export const FileTreeContext = createContext(null); /** * Public consumer hook. Exposes state, actions, and header-config for * consumers building a custom header inside `renderHeader` or composing * standalone parts. * * Throws if called outside ``. */ export function useFileTree(): FileTreeContextValue { const ctx = useContext(FileTreeContext); if (!ctx) { throw new Error("useFileTree() must be called inside "); } return ctx; } 54:T1dec,"use client"; import { useCallback, useMemo, useRef, useState } from "react"; import type { FileTreeActions, FileTreeExpandedChangeArgs, FileTreeSelectionChangeArgs, FileTreeSelectionMode, FileTreeState, FsNode, FsNodeType, } from "../types"; import { countAllNodes, deriveRootExpandedIds, indexNodes, } from "../lib/tree-utils"; interface UseTreeStateArgs { nodes: FsNode[]; selectionMode: FileTreeSelectionMode; selectedIds: Set | undefined; defaultSelectedIds: Set | undefined; onSelectedChange?: (args: FileTreeSelectionChangeArgs) => void; expandedIds: Set | undefined; defaultExpandedIds: Set | undefined; onExpandedChange?: (args: FileTreeExpandedChangeArgs) => void; onCreate?: (args: { parentId: string | null; type: FsNodeType }) => void; onDelete?: (args: { ids: string[] }) => void; onRefresh?: (args: { nodeId: string | null }) => void; confirmDelete: boolean; /** * Callback used by `triggerDelete` when `confirmDelete` is `true`. The * orchestrator implements this and shows the AlertDialog. When the dialog * confirms, it calls `onDelete` directly. When `confirmDelete` is `false`, * `triggerDelete` skips this and fires `onDelete` immediately. */ requestDeleteConfirmation: (ids: string[]) => void; } export interface UseTreeStateResult { state: FileTreeState; actions: FileTreeActions; totalCount: number; /** Read the current selection anchor (use only inside event handlers, not during render). */ getSelectionAnchorId: () => string | null; setSelectionAnchorId: (id: string | null) => void; /** Internal write helpers used by other hooks. */ setLoadingFolderIds: (next: Set) => void; } export function useTreeState(args: UseTreeStateArgs): UseTreeStateResult { const { nodes, selectionMode, selectedIds: controlledSelected, defaultSelectedIds, onSelectedChange, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, onCreate, onDelete, onRefresh, confirmDelete, requestDeleteConfirmation, } = args; // Initial uncontrolled state. `useState`'s lazy initializer keeps the // root-derive call O(roots) on first render only. const [internalExpanded, setInternalExpanded] = useState>( () => defaultExpandedIds ?? deriveRootExpandedIds(nodes), ); const [internalSelected, setInternalSelected] = useState>( () => defaultSelectedIds ?? new Set(), ); const [focusedId, setFocusedId] = useState(null); const [renamingId, setRenamingId] = useState(null); const [loadingFolderIds, setLoadingFolderIdsRaw] = useState>( () => new Set(), ); const selectionAnchorRef = useRef(null); const expandedIds = controlledExpanded ?? internalExpanded; const selectedIds = controlledSelected ?? internalSelected; const setExpanded = useCallback( (next: Set) => { if (controlledExpanded === undefined) setInternalExpanded(next); onExpandedChange?.({ ids: next }); }, [controlledExpanded, onExpandedChange], ); const setSelected = useCallback( (next: Set) => { if (controlledSelected === undefined) setInternalSelected(next); onSelectedChange?.({ ids: next }); }, [controlledSelected, onSelectedChange], ); const expand = useCallback( (id: string) => { if (expandedIds.has(id)) return; const next = new Set(expandedIds); next.add(id); setExpanded(next); }, [expandedIds, setExpanded], ); const collapse = useCallback( (id: string) => { if (!expandedIds.has(id)) return; const next = new Set(expandedIds); next.delete(id); setExpanded(next); }, [expandedIds, setExpanded], ); const toggleExpand = useCallback( (id: string) => { const next = new Set(expandedIds); if (next.has(id)) next.delete(id); else next.add(id); setExpanded(next); }, [expandedIds, setExpanded], ); const expandAll = useCallback(() => { const next = new Set(); const walk = (list: FsNode[]) => { for (const node of list) { if (node.type === "folder") next.add(node.id); if (node.children) walk(node.children); } }; walk(nodes); setExpanded(next); }, [nodes, setExpanded]); const collapseAll = useCallback(() => { setExpanded(new Set()); }, [setExpanded]); const select = useCallback( (idOrIds: string | string[]) => { const ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds]; if (selectionMode === "single") { setSelected(new Set(ids.slice(0, 1))); } else { setSelected(new Set(ids)); } if (ids.length > 0) selectionAnchorRef.current = ids[0]; }, [selectionMode, setSelected], ); const clearSelection = useCallback(() => { setSelected(new Set()); selectionAnchorRef.current = null; }, [setSelected]); const focusNode = useCallback((id: string) => { setFocusedId(id); }, []); const startRename = useCallback((id: string) => { setRenamingId(id); }, []); const cancelRename = useCallback(() => { setRenamingId(null); }, []); const triggerCreate = useCallback( (parentId: string | null, type: FsNodeType) => { onCreate?.({ parentId, type }); }, [onCreate], ); const triggerDelete = useCallback( (ids: string[]) => { if (ids.length === 0) return; if (confirmDelete) { requestDeleteConfirmation(ids); return; } onDelete?.({ ids }); }, [confirmDelete, requestDeleteConfirmation, onDelete], ); const refresh = useCallback( (nodeId: string | null = null) => { onRefresh?.({ nodeId }); }, [onRefresh], ); const setSelectionAnchorId = useCallback((id: string | null) => { selectionAnchorRef.current = id; }, []); const setLoadingFolderIds = useCallback((next: Set) => { setLoadingFolderIdsRaw(next); }, []); const totalCount = useMemo(() => countAllNodes(nodes), [nodes]); // Drop selection ids that no longer reference real nodes const sanitizedSelectedIds = useMemo(() => { if (selectedIds.size === 0) return selectedIds; const idx = indexNodes(nodes); let dirty = false; const next = new Set(); for (const id of selectedIds) { if (idx.has(id)) next.add(id); else dirty = true; } return dirty ? next : selectedIds; }, [nodes, selectedIds]); const state: FileTreeState = useMemo( () => ({ expandedIds, selectedIds: sanitizedSelectedIds, focusedId, renamingId, loadingFolderIds, }), [ expandedIds, sanitizedSelectedIds, focusedId, renamingId, loadingFolderIds, ], ); const actions: FileTreeActions = useMemo( () => ({ expand, collapse, toggleExpand, expandAll, collapseAll, select, clearSelection, focusNode, startRename, cancelRename, triggerCreate, triggerDelete, refresh, }), [ expand, collapse, toggleExpand, expandAll, collapseAll, select, clearSelection, focusNode, startRename, cancelRename, triggerCreate, triggerDelete, refresh, ], ); const getSelectionAnchorId = useCallback( () => selectionAnchorRef.current, [], ); return { state, actions, totalCount, getSelectionAnchorId, setSelectionAnchorId, setLoadingFolderIds, }; } 55:T9df,"use client"; import { useMemo } from "react"; import type { FileTreeRow, FsNode } from "../types"; import { defaultSort } from "../lib/tree-utils"; interface UseTreeFlattenArgs { nodes: FsNode[]; expandedIds: ReadonlySet; selectedIds: ReadonlySet; focusedId: string | null; loadingFolderIds: ReadonlySet; showHidden: boolean; isHidden?: (node: FsNode) => boolean; sortNodes: ((a: FsNode, b: FsNode) => number) | false | undefined; } const defaultIsHidden = (node: FsNode) => node.name.startsWith("."); /** * Walks the tree, applies sort + visibility, returns the visible-row array * the virtualizer (and naive renderer) consume. */ export function useTreeFlatten(args: UseTreeFlattenArgs): FileTreeRow[] { const { nodes, expandedIds, selectedIds, focusedId, loadingFolderIds, showHidden, isHidden, sortNodes, } = args; return useMemo(() => { const rows: FileTreeRow[] = []; const hiddenFn = isHidden ?? defaultIsHidden; const sorter = sortNodes === false ? null : sortNodes ?? defaultSort; const walk = (list: FsNode[], depth: number) => { const filtered = showHidden ? list : list.filter((node) => !hiddenFn(node)); const sorted = sorter ? [...filtered].sort(sorter) : filtered; const siblingCount = sorted.length; sorted.forEach((node, siblingIdx) => { const isFolder = node.type === "folder"; const expanded = isFolder && expandedIds.has(node.id); const childrenLoaded = isFolder && node.children !== undefined; const hasChildren = isFolder && (node.children === undefined || (node.children?.length ?? 0) > 0); rows.push({ node, depth, expanded, selected: selectedIds.has(node.id), focused: focusedId === node.id, hasChildren, childrenLoaded, loadingChildren: loadingFolderIds.has(node.id), index: rows.length, siblingCount, siblingIndex: siblingIdx + 1, }); if (expanded && node.children?.length) { walk(node.children, depth + 1); } // Empty (`children: []`) folders render an "(empty)" placeholder row // inline; the row component handles that, not the flatten. }); }; walk(nodes, 0); return rows; }, [ nodes, expandedIds, selectedIds, focusedId, loadingFolderIds, showHidden, isHidden, sortNodes, ]); } 56:T14b0,"use client"; import { useCallback } from "react"; import type { KeyboardEvent } from "react"; import type { FileTreeActions, FileTreeOpenArgs, FileTreeRow, FileTreeSelectionMode, } from "../types"; interface UseTreeKeyboardArgs { rows: FileTreeRow[]; focusedId: string | null; renamingId: string | null; selectionMode: FileTreeSelectionMode; selectedIds: ReadonlySet; actions: FileTreeActions; onOpen?: (args: FileTreeOpenArgs) => void; } export interface UseTreeKeyboardResult { onKeyDown: (e: KeyboardEvent) => void; } const META_KEYS = ["INPUT", "TEXTAREA", "SELECT"]; export function useTreeKeyboard( args: UseTreeKeyboardArgs, ): UseTreeKeyboardResult { const { rows, focusedId, renamingId, selectionMode, selectedIds, actions, onOpen, } = args; const onKeyDown = useCallback( (e: KeyboardEvent) => { // If user is typing in the rename input or any other text field, bail. const target = e.target as HTMLElement | null; if (target && META_KEYS.includes(target.tagName)) return; // If a rename is active anywhere, the rename input intercepts its own keys. // Anything else here just passes through. if (renamingId) return; const isMod = e.metaKey || e.ctrlKey; // Find current row index by focusedId const idx = rows.findIndex((r) => r.node.id === focusedId); const noFocus = idx === -1; switch (e.key) { case "ArrowDown": { e.preventDefault(); const next = noFocus ? 0 : Math.min(rows.length - 1, idx + 1); if (rows[next]) actions.focusNode(rows[next].node.id); return; } case "ArrowUp": { e.preventDefault(); // APG: ArrowUp with no prior focus lands on the LAST row. const next = noFocus ? rows.length - 1 : Math.max(0, idx - 1); if (rows[next]) actions.focusNode(rows[next].node.id); return; } case "ArrowRight": { e.preventDefault(); if (noFocus) { if (rows[0]) actions.focusNode(rows[0].node.id); return; } const row = rows[idx]; if (row.node.type === "folder" && row.hasChildren) { if (row.expanded) { // move to first child const childRow = rows[idx + 1]; if (childRow && childRow.depth > row.depth) { actions.focusNode(childRow.node.id); } } else { actions.expand(row.node.id); } } return; } case "ArrowLeft": { e.preventDefault(); if (noFocus) { if (rows[0]) actions.focusNode(rows[0].node.id); return; } const row = rows[idx]; if (row.node.type === "folder" && row.expanded) { actions.collapse(row.node.id); } else { // move to parent for (let i = idx - 1; i >= 0; i--) { if (rows[i].depth < row.depth) { actions.focusNode(rows[i].node.id); break; } } } return; } case "Home": { e.preventDefault(); if (rows[0]) actions.focusNode(rows[0].node.id); return; } case "End": { e.preventDefault(); const last = rows[rows.length - 1]; if (last) actions.focusNode(last.node.id); return; } case "Enter": { if (noFocus) return; e.preventDefault(); const row = rows[idx]; if (row.node.type === "folder") { actions.toggleExpand(row.node.id); } else { onOpen?.({ node: row.node }); } return; } case " ": // Space case "Spacebar": { if (noFocus) return; e.preventDefault(); const row = rows[idx]; if (selectionMode === "multi") { const next = new Set(selectedIds); if (next.has(row.node.id)) next.delete(row.node.id); else next.add(row.node.id); actions.select(Array.from(next)); } else { actions.select(row.node.id); } return; } case "F2": { if (noFocus) return; e.preventDefault(); actions.startRename(rows[idx].node.id); return; } case "Delete": case "Backspace": { if (selectedIds.size === 0) return; e.preventDefault(); actions.triggerDelete(Array.from(selectedIds)); return; } case "Escape": { if (selectedIds.size > 0) { e.preventDefault(); actions.clearSelection(); } return; } case "a": case "A": { if (!isMod) return; if (selectionMode !== "multi") return; e.preventDefault(); actions.select(rows.map((r) => r.node.id)); return; } default: return; } }, [rows, focusedId, renamingId, selectionMode, selectedIds, actions, onOpen], ); return { onKeyDown }; } 57:T2762,"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { DragEvent } from "react"; import type { DragOverState } from "../parts/file-tree-row-list"; import type { FileTreeDropPosition, FileTreeMoveArgs, FileTreeRow, FsNode, } from "../types"; import { isLegalDrop } from "../lib/validation"; import { indexNodes } from "../lib/tree-utils"; const INTERNAL_MIME = "application/x-ilinxa-file-tree"; interface UseTreeDragArgs { nodes: FsNode[]; enableInternalDrag: boolean; enableExternalDrop: boolean; selectedIds: ReadonlySet; selectionMode: "single" | "multi"; onMove?: (args: FileTreeMoveArgs) => void; onExternalDrop?: (args: { files: File[]; targetId: string | null }) => void; /** Replace selection with a single id (used at drag-start when source isn't selected). */ selectIds: (idOrIds: string | string[]) => void; } export interface UseTreeDragResult { dragOver: DragOverState | null; isExternalDragging: boolean; isInternalDragging: boolean; // Row-level handlers onRowDragStart: (e: DragEvent, row: FileTreeRow) => void; onRowDragOver: (e: DragEvent, row: FileTreeRow) => void; onRowDragLeave: (e: DragEvent, row: FileTreeRow) => void; onRowDrop: (e: DragEvent, row: FileTreeRow) => void; onRowDragEnd: (e: DragEvent, row: FileTreeRow) => void; // Container-level handlers (root + scroll area) onContainerDragEnter: (e: DragEvent) => void; onContainerDragOver: (e: DragEvent) => void; onContainerDragLeave: (e: DragEvent) => void; onContainerDrop: (e: DragEvent) => void; /** Map of `clientY` → scroll-direction; only active during drag near edges. */ startAutoScroll: ( container: HTMLElement | null, clientY: number, ) => void; stopAutoScroll: () => void; } const AUTO_SCROLL_EDGE_PX = 24; const AUTO_SCROLL_PX_PER_FRAME = 4; export function useTreeDrag(args: UseTreeDragArgs): UseTreeDragResult { const { nodes, enableInternalDrag, enableExternalDrop, selectedIds, selectionMode, onMove, onExternalDrop, selectIds, } = args; const [dragOver, setDragOver] = useState(null); const [isExternalDragging, setIsExternalDragging] = useState(false); const isInternalDraggingRef = useRef(false); const [isInternalDragging, setIsInternalDragging] = useState(false); const nodeIndex = useMemo(() => indexNodes(nodes), [nodes]); // Track external-drag enter/leave with a refcount (events fire per nested element) const externalEnterCountRef = useRef(0); const dragSourceIdsRef = useRef([]); const autoScrollRef = useRef<{ container: HTMLElement | null; direction: number; raf: number | null; }>({ container: null, direction: 0, raf: null }); const stopAutoScroll = useCallback(() => { const ref = autoScrollRef.current; if (ref.raf !== null) { cancelAnimationFrame(ref.raf); ref.raf = null; } ref.direction = 0; ref.container = null; }, []); const startAutoScroll = useCallback( (container: HTMLElement | null, clientY: number) => { if (!container) return; const rect = container.getBoundingClientRect(); let dir = 0; if (clientY - rect.top < AUTO_SCROLL_EDGE_PX) dir = -1; else if (rect.bottom - clientY < AUTO_SCROLL_EDGE_PX) dir = 1; const ref = autoScrollRef.current; ref.container = container; if (dir !== ref.direction) { ref.direction = dir; if (ref.raf !== null) { cancelAnimationFrame(ref.raf); ref.raf = null; } if (dir !== 0) { const tick = () => { const r = autoScrollRef.current; if (r.container && r.direction !== 0) { r.container.scrollTop += r.direction * AUTO_SCROLL_PX_PER_FRAME; r.raf = requestAnimationFrame(tick); } else { r.raf = null; } }; ref.raf = requestAnimationFrame(tick); } } }, [], ); // Cleanup on unmount useEffect(() => { return () => stopAutoScroll(); }, [stopAutoScroll]); const computePosition = ( e: DragEvent, row: FileTreeRow, ): FileTreeDropPosition => { const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); const y = e.clientY - rect.top; const h = rect.height; if (row.node.type === "folder") { // three zones if (y < h * 0.25) return "before"; if (y > h * 0.75) return "after"; return "inside"; } // file: two zones return y < h * 0.5 ? "before" : "after"; }; const onRowDragStart = useCallback( (e: DragEvent, row: FileTreeRow) => { if (!enableInternalDrag) return; // Ensure dragged node is part of selection. If it's already in // multi-select, drag the whole selection. Otherwise replace selection. let ids: string[]; if (selectionMode === "multi" && selectedIds.has(row.node.id)) { ids = Array.from(selectedIds); } else { ids = [row.node.id]; selectIds(row.node.id); } dragSourceIdsRef.current = ids; isInternalDraggingRef.current = true; setIsInternalDragging(true); try { e.dataTransfer.effectAllowed = "move"; // Write a sentinel value so we can recognize own drag in dragenter e.dataTransfer.setData(INTERNAL_MIME, "1"); } catch { // some envs throw on synthetic events } }, [enableInternalDrag, selectionMode, selectedIds, selectIds], ); const onRowDragEnd = useCallback(() => { isInternalDraggingRef.current = false; setIsInternalDragging(false); dragSourceIdsRef.current = []; setDragOver(null); stopAutoScroll(); }, [stopAutoScroll]); const onRowDragOver = useCallback( (e: DragEvent, row: FileTreeRow) => { // External-drag is handled by container handlers; row-level is internal-only. if (!isInternalDraggingRef.current) return; e.preventDefault(); const position = computePosition(e, row); // For position 'before'/'after', cycle check uses target's parent const idx = nodeIndex; const valid = isLegalDrop({ srcIds: dragSourceIdsRef.current, targetId: row.node.id, position, index: idx, }); e.dataTransfer.dropEffect = valid ? "move" : "none"; setDragOver({ rowId: row.node.id, position, valid }); // auto-scroll near edges const scroller = (e.currentTarget as HTMLElement).closest( "[data-file-tree-scroller]", ) as HTMLElement | null; startAutoScroll(scroller, e.clientY); }, [nodeIndex, startAutoScroll], ); const onRowDragLeave = useCallback( (_e: DragEvent, row: FileTreeRow) => { // Only clear if leaving the current target setDragOver((prev) => (prev?.rowId === row.node.id ? null : prev)); }, [], ); const onRowDrop = useCallback( (e: DragEvent, row: FileTreeRow) => { if (!isInternalDraggingRef.current) return; e.preventDefault(); const position = computePosition(e, row); const idx = nodeIndex; const ids = dragSourceIdsRef.current; const valid = isLegalDrop({ srcIds: ids, targetId: row.node.id, position, index: idx, }); if (valid && onMove) { const targetId = position === "inside" ? row.node.id : (row.node.parentId ?? null); onMove({ ids, targetId, position }); } setDragOver(null); stopAutoScroll(); isInternalDraggingRef.current = false; setIsInternalDragging(false); dragSourceIdsRef.current = []; }, [nodeIndex, onMove, stopAutoScroll], ); // ── External-drop (OS files) handlers on the container ──────────────────── const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files"); const onContainerDragEnter = useCallback( (e: DragEvent) => { if (!enableExternalDrop) return; if (!hasFiles(e)) return; externalEnterCountRef.current += 1; setIsExternalDragging(true); }, [enableExternalDrop], ); const onContainerDragOver = useCallback( (e: DragEvent) => { if (!enableExternalDrop) return; if (!hasFiles(e)) return; e.preventDefault(); e.dataTransfer.dropEffect = "copy"; }, [enableExternalDrop], ); const onContainerDragLeave = useCallback( (e: DragEvent) => { if (!enableExternalDrop) return; if (!hasFiles(e)) return; externalEnterCountRef.current = Math.max( 0, externalEnterCountRef.current - 1, ); if (externalEnterCountRef.current === 0) { setIsExternalDragging(false); } }, [enableExternalDrop], ); const onContainerDrop = useCallback( (e: DragEvent) => { if (!enableExternalDrop) return; if (!hasFiles(e)) return; e.preventDefault(); externalEnterCountRef.current = 0; setIsExternalDragging(false); const target = e.target as HTMLElement | null; const rowEl = target?.closest("[data-row-id]") as HTMLElement | null; const rowId = rowEl?.getAttribute("data-row-id") ?? null; const idx = nodeIndex; let targetId: string | null = null; if (rowId) { const node = idx.get(rowId); if (node) { targetId = node.type === "folder" ? rowId : (node.parentId ?? null); } } const files = Array.from(e.dataTransfer.files ?? []); if (files.length > 0) { onExternalDrop?.({ files, targetId }); } }, [enableExternalDrop, nodeIndex, onExternalDrop], ); return { dragOver, isExternalDragging, isInternalDragging, onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowDragEnd, onContainerDragEnter, onContainerDragOver, onContainerDragLeave, onContainerDrop, startAutoScroll, stopAutoScroll, }; } 58:T45b,"use client"; import { useVirtualizer } from "@tanstack/react-virtual"; import type { RefObject } from "react"; import type { FileTreeRow, FileTreeVirtualizeMode } from "../types"; interface UseTreeVirtualArgs { rows: FileTreeRow[]; scrollRef: RefObject; mode: FileTreeVirtualizeMode; threshold: number; rowHeight: number; } export interface UseTreeVirtualResult { /** `true` when virtualization is active. */ active: boolean; /** Virtualizer instance — only meaningful when `active`. */ virtualizer: ReturnType>; } export function useTreeVirtual( args: UseTreeVirtualArgs, ): UseTreeVirtualResult { const { rows, scrollRef, mode, threshold, rowHeight } = args; const active = mode === "always" || (mode === "auto" && rows.length >= threshold); const virtualizer = useVirtualizer({ count: rows.length, getScrollElement: () => scrollRef.current, estimateSize: () => rowHeight, overscan: 8, enabled: active, }); return { active, virtualizer }; } 59:Ta05,"use client"; import { useCallback, useRef, useState } from "react"; import type { FileTreeLoadChildrenArgs, FsNode } from "../types"; interface UseLazyLoadArgs { onLoadChildren?: (args: FileTreeLoadChildrenArgs) => Promise; setLoadingFolderIds: (next: Set) => void; } export interface UseLazyLoadResult { /** Per-folder error message, if the most recent load rejected. */ errors: ReadonlyMap; /** Trigger a load. Bumps `loadingFolderIds`, resolves cleanly, stores errors. */ load: (node: FsNode) => Promise; /** Clear an error for retry. */ clearError: (nodeId: string) => void; } /** * Manages async-children loading state. Does NOT merge resolved children * into the tree — that's the consumer's job (we expose `mergeLoadedChildren` * helper for that). Tracks loading + error state per folder id. */ export function useLazyLoad(args: UseLazyLoadArgs): UseLazyLoadResult { const { onLoadChildren, setLoadingFolderIds } = args; const loadingRef = useRef>(new Set()); const [errors, setErrors] = useState>(() => new Map()); const setLoading = useCallback( (mutator: (prev: Set) => Set) => { const next = mutator(new Set(loadingRef.current)); loadingRef.current = next; setLoadingFolderIds(next); }, [setLoadingFolderIds], ); const load = useCallback( async (node: FsNode) => { if (!onLoadChildren) return; if (loadingRef.current.has(node.id)) return; setLoading((prev) => { prev.add(node.id); return prev; }); // Clear any previous error for this id setErrors((prev) => { if (!prev.has(node.id)) return prev; const next = new Map(prev); next.delete(node.id); return next; }); try { await onLoadChildren({ nodeId: node.id, node }); } catch (err) { const msg = err instanceof Error ? err.message : "Failed to load"; setErrors((prev) => { const next = new Map(prev); next.set(node.id, msg); return next; }); } finally { setLoading((prev) => { prev.delete(node.id); return prev; }); } }, [onLoadChildren, setLoading], ); const clearError = useCallback((nodeId: string) => { setErrors((prev) => { if (!prev.has(nodeId)) return prev; const next = new Map(prev); next.delete(nodeId); return next; }); }, []); return { errors, load, clearError }; } 5a:Tc22,import type { ReactNode } from "react"; import { File, FileArchive, FileAudio, FileCode, FileCode2, FileImage, FileJson, FileText, FileVideo, Folder, FolderOpen, } from "lucide-react"; import type { FsNode } from "../types"; /** * Mapping of common file-extension categories to their default Lucide icon. * Order of definition matters only for documentation; lookup is by the * extension string itself. */ const EXT_TO_ICON: Record = { // Code (general) ts: FileCode, tsx: FileCode, js: FileCode, jsx: FileCode, mjs: FileCode, cjs: FileCode, py: FileCode, rb: FileCode, go: FileCode, rs: FileCode, java: FileCode, kt: FileCode, swift: FileCode, cpp: FileCode, c: FileCode, h: FileCode, cs: FileCode, php: FileCode, lua: FileCode, // CSS family css: FileCode, scss: FileCode, sass: FileCode, less: FileCode, // Markup html: FileCode2, htm: FileCode2, xml: FileCode2, // JSON json: FileJson, jsonc: FileJson, // Text / docs md: FileText, mdx: FileText, markdown: FileText, txt: FileText, rtf: FileText, // Images png: FileImage, jpg: FileImage, jpeg: FileImage, gif: FileImage, webp: FileImage, bmp: FileImage, ico: FileImage, svg: FileImage, // Archives zip: FileArchive, tar: FileArchive, gz: FileArchive, "7z": FileArchive, rar: FileArchive, // Video / audio mp4: FileVideo, mov: FileVideo, webm: FileVideo, mkv: FileVideo, avi: FileVideo, mp3: FileAudio, wav: FileAudio, ogg: FileAudio, flac: FileAudio, // Config / dotfiles lock: File, env: File, gitignore: File, gitattributes: File, editorconfig: File, }; /** * Derive an extension string from an FsNode. Prefers the explicit `ext` field, * else falls back to the substring after the last dot. Files with no dot * (e.g. `Dockerfile`) return an empty string. */ export function getNodeExtension(node: FsNode): string { if (node.ext) return node.ext.replace(/^\./, "").toLowerCase(); const idx = node.name.lastIndexOf("."); if (idx <= 0 || idx === node.name.length - 1) return ""; return node.name.slice(idx + 1).toLowerCase(); } /** * Public consumer helper. Returns a JSX element for the given extension * string, falling back to a generic ``. Does NOT take an FsNode — * consumers building custom registries can chain on this for their unknown * types. */ export function iconForExtension( ext: string, className = "size-4", ): ReactNode { const normalized = ext.replace(/^\./, "").toLowerCase(); const Icon = EXT_TO_ICON[normalized] ?? File; return ; } /** Default icon for a file node — internal use. */ export function defaultFileIcon(node: FsNode, className = "size-4"): ReactNode { return iconForExtension(getNodeExtension(node), className); } /** Default icon for a folder node — internal use. */ export function defaultFolderIcon( expanded: boolean, className = "size-4", ): ReactNode { const Icon = expanded ? FolderOpen : Folder; return ; } 5b:Tf1e,import type { FsNode } from "../types"; /** * Flat-index a hierarchical array by id. Walks every node once, ignoring * cycles produced by malformed input (a node already in the index is skipped). */ export function indexNodes(nodes: FsNode[]): Map { const map = new Map(); const walk = (list: FsNode[]) => { for (const node of list) { if (map.has(node.id)) continue; map.set(node.id, node); if (node.children) walk(node.children); } }; walk(nodes); return map; } /** Find one node by id by walking the tree. Stops at first hit. */ export function findNode( id: string, nodes: FsNode[], ): FsNode | undefined { for (const node of nodes) { if (node.id === id) return node; if (node.children) { const hit = findNode(id, node.children); if (hit) return hit; } } return undefined; } /** Returns the chain of ancestor nodes (root → ... → parent) for `nodeId`. */ export function getParentChain( nodeId: string, index: Map, ): FsNode[] { const chain: FsNode[] = []; let current = index.get(nodeId); while (current?.parentId) { const parent = index.get(current.parentId); if (!parent) break; chain.unshift(parent); current = parent; } return chain; } /** All descendant ids of `nodeId` (excluding itself). */ export function getDescendantIds( nodeId: string, index: Map, ): Set { const out = new Set(); const node = index.get(nodeId); if (!node?.children) return out; const walk = (list: FsNode[]) => { for (const child of list) { if (out.has(child.id)) continue; out.add(child.id); if (child.children) walk(child.children); } }; walk(node.children); return out; } /** * Default sort: folders before files, then case-insensitive locale alpha by name. */ export function defaultSort(a: FsNode, b: FsNode): number { if (a.type !== b.type) return a.type === "folder" ? -1 : 1; return a.name.localeCompare(b.name, undefined, { sensitivity: "base" }); } /** Initial uncontrolled-mode expanded set: every top-level folder id. */ export function deriveRootExpandedIds(nodes: FsNode[]): Set { const set = new Set(); for (const node of nodes) { if (node.type === "folder") set.add(node.id); } return set; } /** * Recursive, immutable update — replaces a folder's `children` everywhere * in the tree without mutating the input array. Used by both * `mergeLoadedChildren` and other consumer helpers. */ function replaceChildren( nodes: FsNode[], parentId: string, next: FsNode[], ): FsNode[] { let changed = false; const out = nodes.map((node) => { if (node.id === parentId) { changed = true; return { ...node, children: next }; } if (node.children) { const replaced = replaceChildren(node.children, parentId, next); if (replaced !== node.children) { changed = true; return { ...node, children: replaced }; } } return node; }); return changed ? out : nodes; } /** * Public consumer helper. After `onLoadChildren` resolves, splice the new * children into the right folder immutably. * * onLoadChildren={async ({ nodeId }) => { * const kids = await fs.list(nodeId); * setNodes((prev) => mergeLoadedChildren(prev, nodeId, kids)); * return kids; * }} */ export function mergeLoadedChildren( nodes: FsNode[], parentId: string, children: FsNode[], ): FsNode[] { return replaceChildren(nodes, parentId, children); } /** Total node count (recursive). */ export function countAllNodes(nodes: FsNode[]): number { let total = 0; const walk = (list: FsNode[]) => { for (const node of list) { total += 1; if (node.children) walk(node.children); } }; walk(nodes); return total; } 5c:Taf8,import type { FsNode, FileTreeDropPosition } from "../types"; /** True iff any source id equals the target id. */ export function isSelfDrop( srcIds: string[], targetId: string | null, ): boolean { if (!targetId) return false; return srcIds.includes(targetId); } /** * True iff dropping `srcIds` into / next-to `targetId` would create a cycle. * Walks the parent chain of the target; if any ancestor is in `srcIds`, the * move is illegal. */ export function isCycle( srcIds: string[], targetId: string | null, index: Map, ): boolean { if (!targetId) return false; const set = new Set(srcIds); let current: FsNode | undefined = index.get(targetId); while (current) { if (set.has(current.id)) return true; const parentId = current.parentId; if (!parentId) break; current = index.get(parentId); } return false; } export interface IsLegalDropArgs { srcIds: string[]; targetId: string | null; position: FileTreeDropPosition; index: Map; } /** * Combined legality check. The tree refuses cycle / self-drop universally; * name-collision is a consumer-policy concern and not blocked here. */ export function isLegalDrop({ srcIds, targetId, position, index, }: IsLegalDropArgs): boolean { if (srcIds.length === 0) return false; if (isSelfDrop(srcIds, targetId)) return false; if (position === "inside" && isCycle(srcIds, targetId, index)) return false; if (position !== "inside" && targetId) { // before/after: cycle check uses the target's parent const target = index.get(targetId); const parentId = target?.parentId ?? null; if (isCycle(srcIds, parentId, index)) return false; } return true; } /** * Soft-validates a node tree on mount. Returns an array of warnings; never * throws. Caller logs to `console.warn` in development. Catches: duplicate * ids, missing parents (parentId references a node not in the tree), and * structural cycles (a node ancestor-of-itself). */ export function validateNodes(nodes: FsNode[]): string[] { const warnings: string[] = []; const ids = new Set(); const seenInPath = new Set(); const walk = (list: FsNode[], path: Set) => { for (const node of list) { if (ids.has(node.id)) { warnings.push(`duplicate node id: "${node.id}"`); continue; } ids.add(node.id); if (path.has(node.id)) { warnings.push(`cycle detected at node: "${node.id}"`); continue; } if (node.children) { const next = new Set(path); next.add(node.id); walk(node.children, next); } } }; walk(nodes, seenInPath); // parent-id sanity (advisory — parentId is optional) for (const node of ids) { void node; } return warnings; } 5d:T222c,"use client"; import type { CSSProperties, MouseEvent, ReactNode, KeyboardEvent } from "react"; import { ChevronRight, Loader2 } from "lucide-react"; import { cn } from "@/lib/utils"; import type { FileTreeDropPosition, FileTreeLabels, FileTreeRow, FileTreeValidateRenameArgs, FsNode, } from "../types"; import { defaultFileIcon, defaultFolderIcon } from "../lib/icons"; import { FileTreeRenameInput } from "./file-tree-rename-input"; interface FileTreeRowProps { row: FileTreeRow; indent: number; indentGuides: boolean; rowHeight: number; iconForNode?: (args: { node: FsNode }) => ReactNode; isRenaming: boolean; validateRename?: (args: FileTreeValidateRenameArgs) => string | null; enableInternalDrag: boolean; /** Drop-target visual state for this row — set only when this row is the current hover target. */ dropPosition?: FileTreeDropPosition | null; dropInvalid?: boolean; /** Lazy-load error message for this folder — when set, an error sub-row replaces the children area. */ loadError?: string; onRetryLoad?: () => void; labels: FileTreeLabels; // Callbacks from orchestrator onClick: (e: MouseEvent, row: FileTreeRow) => void; onChevronClick: (e: MouseEvent, row: FileTreeRow) => void; onDoubleClick: (e: MouseEvent, row: FileTreeRow) => void; onContextMenu: (e: MouseEvent, row: FileTreeRow) => void; onRenameCommit: (id: string, nextName: string) => void; onRenameCancel: () => void; onDragStart?: (e: React.DragEvent, row: FileTreeRow) => void; onDragOver?: (e: React.DragEvent, row: FileTreeRow) => void; onDragLeave?: (e: React.DragEvent, row: FileTreeRow) => void; onDrop?: (e: React.DragEvent, row: FileTreeRow) => void; onDragEnd?: (e: React.DragEvent, row: FileTreeRow) => void; onRowKeyDown?: (e: KeyboardEvent, row: FileTreeRow) => void; /** Used as `style` on the outer div; lets the row-list place rows absolutely in virtual mode. */ outerStyle?: CSSProperties; } const MAX_INDENT_PX = 200; export function FileTreeRowComponent(props: FileTreeRowProps) { const { row, indent, indentGuides, rowHeight, iconForNode, isRenaming, validateRename, enableInternalDrag, dropPosition, dropInvalid, loadError, onRetryLoad, labels, onClick, onChevronClick, onDoubleClick, onContextMenu, onRenameCommit, onRenameCancel, onDragStart, onDragOver, onDragLeave, onDrop, onDragEnd, onRowKeyDown, outerStyle, } = props; const { node, depth, expanded, selected, focused, hasChildren, loadingChildren } = row; const isFolder = node.type === "folder"; const computedIndent = Math.min(depth * indent, MAX_INDENT_PX); const dropClass = dropInvalid ? "ring-2 ring-destructive" : ""; const insideDrop = dropPosition === "inside"; const icon = node.icon ? node.icon : iconForNode ? iconForNode({ node }) : isFolder ? defaultFolderIcon(expanded) : defaultFileIcon(node); return (

{/* before / after drop indicator (line) */} {dropPosition === "before" && !dropInvalid ? (

) : null} {dropPosition === "after" && !dropInvalid ? (

) : null}

onClick(e, row)} onDoubleClick={(e) => onDoubleClick(e, row)} onContextMenu={(e) => onContextMenu(e, row)} onDragStart={(e) => enableInternalDrag && onDragStart && onDragStart(e, row) } onDragOver={(e) => onDragOver?.(e, row)} onDragLeave={(e) => onDragLeave?.(e, row)} onDrop={(e) => onDrop?.(e, row)} onDragEnd={(e) => onDragEnd?.(e, row)} onKeyDown={(e) => onRowKeyDown?.(e, row)} className={cn( "group relative flex cursor-pointer select-none items-center gap-1.5 px-2 text-sm", "rounded-sm", "outline-none transition-colors", selected ? "bg-secondary text-secondary-foreground" : "hover:bg-muted/60", focused && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", insideDrop && !dropInvalid && "ring-2 ring-primary", dropClass, )} style={{ height: `${rowHeight}px` }} > {/* indent guides */} {indentGuides ? Array.from({ length: depth }).map((_, i) => ( )) : null} {/* indent spacer */} {/* chevron OR spacer */} {isFolder && hasChildren ? ( ) : (

{/* lazy-load error sub-row */} {loadError ? (

{labels.loadError}: {loadError} {onRetryLoad ? ( ) : null}

) : null} {/* (empty) placeholder for known-empty folders that are expanded */} {isFolder && expanded && node.children !== undefined && node.children.length === 0 && !loadError ? ( ) : null}

); } FileTreeRowComponent.displayName = "FileTreeRow"; export { FileTreeRowComponent as FileTreeRowView }; 5e:T1c23,"use client"; import type { KeyboardEvent, MouseEvent, ReactNode, Ref, } from "react"; import type { Virtualizer } from "@tanstack/react-virtual"; import type { FileTreeDropPosition, FileTreeLabels, FileTreeRow, FileTreeRowRenderArgs, FileTreeValidateRenameArgs, FsNode, } from "../types"; import { FileTreeRowView } from "./file-tree-row"; export interface DragOverState { rowId: string; position: FileTreeDropPosition | null; valid: boolean; } interface FileTreeRowListProps { rows: FileTreeRow[]; rowHeight: number; indent: number; indentGuides: boolean; iconForNode?: (args: { node: FsNode }) => ReactNode; renamingId: string | null; validateRename?: (args: FileTreeValidateRenameArgs) => string | null; enableInternalDrag: boolean; dragOver: DragOverState | null; loadErrors: ReadonlyMap; onRetryLoad?: (nodeId: string) => void; labels: FileTreeLabels; /** Active virtualizer (if virtualization is on; else undefined). */ virtualizer?: Virtualizer; scrollRef: Ref; /** Render-row slot — when provided, replaces the default row rendering. */ renderRow?: (args: FileTreeRowRenderArgs) => ReactNode; // Shared callbacks onRowClick: (e: MouseEvent, row: FileTreeRow) => void; onChevronClick: (e: MouseEvent, row: FileTreeRow) => void; onRowDoubleClick: (e: MouseEvent, row: FileTreeRow) => void; onRowContextMenu: (e: MouseEvent, row: FileTreeRow) => void; onRenameCommit: (id: string, nextName: string) => void; onRenameCancel: () => void; onRowDragStart?: (e: React.DragEvent, row: FileTreeRow) => void; onRowDragOver?: (e: React.DragEvent, row: FileTreeRow) => void; onRowDragLeave?: (e: React.DragEvent, row: FileTreeRow) => void; onRowDrop?: (e: React.DragEvent, row: FileTreeRow) => void; onRowDragEnd?: (e: React.DragEvent, row: FileTreeRow) => void; onRowKeyDown?: (e: KeyboardEvent, row: FileTreeRow) => void; /** Container-level drop fallback (when drop hits the empty whitespace). */ onContainerDragOver?: (e: React.DragEvent) => void; onContainerDrop?: (e: React.DragEvent) => void; onContainerContextMenu?: (e: MouseEvent) => void; } export function FileTreeRowList(props: FileTreeRowListProps) { const { rows, rowHeight, indent, indentGuides, iconForNode, renamingId, validateRename, enableInternalDrag, dragOver, loadErrors, onRetryLoad, labels, virtualizer, scrollRef, renderRow, onRowClick, onChevronClick, onRowDoubleClick, onRowContextMenu, onRenameCommit, onRenameCancel, onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowDragEnd, onRowKeyDown, onContainerDragOver, onContainerDrop, onContainerContextMenu, } = props; const buildRow = ( row: FileTreeRow, outerStyle?: React.CSSProperties, ): ReactNode => { const dropPosition = dragOver?.rowId === row.node.id ? dragOver.position : null; const dropInvalid = dragOver?.rowId === row.node.id ? !dragOver.valid : false; const error = loadErrors.get(row.node.id); if (renderRow) { // When a slot replaces the row contents, the outer wrapper carries the // virtualized positioning. The default row passed in does NOT. const defaultRow = ( onRetryLoad(row.node.id) : undefined } labels={labels} onClick={onRowClick} onChevronClick={onChevronClick} onDoubleClick={onRowDoubleClick} onContextMenu={onRowContextMenu} onRenameCommit={onRenameCommit} onRenameCancel={onRenameCancel} onDragStart={onRowDragStart} onDragOver={onRowDragOver} onDragLeave={onRowDragLeave} onDrop={onRowDrop} onDragEnd={onRowDragEnd} onRowKeyDown={onRowKeyDown} /> ); return (

{renderRow({ row, defaultRow })}

); } // Default path: no extra wrapper — the row view IS the outer element. return ( onRetryLoad(row.node.id) : undefined } labels={labels} onClick={onRowClick} onChevronClick={onChevronClick} onDoubleClick={onRowDoubleClick} onContextMenu={onRowContextMenu} onRenameCommit={onRenameCommit} onRenameCancel={onRenameCancel} onDragStart={onRowDragStart} onDragOver={onRowDragOver} onDragLeave={onRowDragLeave} onDrop={onRowDrop} onDragEnd={onRowDragEnd} onRowKeyDown={onRowKeyDown} outerStyle={outerStyle} /> ); }; // Virtualized mode if (virtualizer && virtualizer.options.enabled) { const totalHeight = virtualizer.getTotalSize(); const items = virtualizer.getVirtualItems(); return (

{items.map((vi) => { const row = rows[vi.index]; if (!row) return null; const outerStyle: React.CSSProperties = { position: "absolute", top: 0, left: 0, width: "100%", transform: `translateY(${vi.start}px)`, }; return buildRow(row, outerStyle); })}

); } // Naive mode return (

{rows.map((row) => buildRow(row))}

); } 5f:Tc2f,"use client"; import { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import type { FsNode, FileTreeValidateRenameArgs } from "../types"; interface FileTreeRenameInputProps { node: FsNode; onCommit: (nextName: string) => void; onCancel: () => void; validateRename?: (args: FileTreeValidateRenameArgs) => string | null; } export function FileTreeRenameInput(props: FileTreeRenameInputProps) { const { node, onCommit, onCancel, validateRename } = props; const [value, setValue] = useState(node.name); const [error, setError] = useState(null); const inputRef = useRef(null); useEffect(() => { const input = inputRef.current; if (!input) return; input.focus(); // Select the basename (everything before the final dot for files; whole // name for folders). if (node.type === "folder") { input.select(); } else { const dot = node.name.lastIndexOf("."); if (dot > 0) { input.setSelectionRange(0, dot); } else { input.select(); } } }, [node.type, node.name]); const tryCommit = () => { const trimmed = value.trim(); if (trimmed === "") { setError("Name cannot be empty"); return; } if (trimmed === node.name) { onCancel(); return; } if (validateRename) { const message = validateRename({ node, nextName: trimmed }); if (message) { setError(message); return; } } onCommit(trimmed); }; return (

{ setValue(e.target.value); if (error) setError(null); }} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); e.stopPropagation(); tryCommit(); } else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onCancel(); } else { // Stop arrow keys from bubbling to the tree's keyboard handler e.stopPropagation(); } }} onBlur={() => tryCommit()} onClick={(e) => e.stopPropagation()} onDoubleClick={(e) => e.stopPropagation()} aria-label={`Rename ${node.name}`} aria-invalid={error ? true : undefined} className={cn( "h-6 min-w-0 flex-1 rounded-sm border bg-background px-1 text-sm outline-none", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", error ? "border-destructive ring-1 ring-destructive" : "border-border", )} /> {error ? ( {error} ) : null}

); } 60:T17e1,"use client"; import { useMemo, useState, type MouseEvent, type ReactNode } from "react"; import { FilePlus, FolderPlus, Pencil, RefreshCw, Trash2, } from "lucide-react"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, } from "@/components/ui/context-menu"; import type { FileTreeActions, FileTreeContextMenuContext, FileTreeContextMenuItem, FileTreeLabels, FileTreeState, FsNode, } from "../types"; interface FileTreeContextMenuProps { state: FileTreeState; actions: FileTreeActions; enabled: boolean; labels: FileTreeLabels; /** Per-action gates from `contextMenuActions` prop. */ gates: { open: boolean; newFile: boolean; newFolder: boolean; rename: boolean; delete: boolean; refresh: boolean; }; /** Whether the consumer has wired the corresponding callback (we hide actions whose op nobody listens to). */ wired: { onOpen: boolean; onCreate: boolean; onRename: boolean; onDelete: boolean; onRefresh: boolean; }; /** Index of nodes (id → node) for resolving target on right-click. */ nodeIndex: ReadonlyMap; /** Slot override. Receives the same context the default would render. */ renderContextMenu?: (ctx: FileTreeContextMenuContext) => ReactNode; /** Children — the area wrapped by the context-menu trigger. */ children: ReactNode; } export function FileTreeContextMenu(props: FileTreeContextMenuProps) { const { state, actions, enabled, labels, gates, wired, nodeIndex, renderContextMenu, children, } = props; const [target, setTarget] = useState<{ node: FsNode | null; position: { x: number; y: number }; } | null>(null); const captureTarget = (e: MouseEvent) => { const el = e.target as HTMLElement | null; const rowEl = el?.closest("[data-row-id]") as HTMLElement | null; const id = rowEl?.getAttribute("data-row-id") ?? null; const node = id ? (nodeIndex.get(id) ?? null) : null; setTarget({ node, position: { x: e.clientX, y: e.clientY } }); }; const defaultActions = useMemo(() => { if (!target) return []; const node = target.node; const isFolder = node?.type === "folder"; const list: FileTreeContextMenuItem[] = []; if (gates.open && wired.onOpen && node && node.type === "file") { list.push({ id: "open", label: labels.contextOpen, icon: , onSelect: () => actions.focusNode(node.id), // open is a consumer hook; no-op default safety }); } if (gates.newFile && wired.onCreate) { list.push({ id: "new-file", label: labels.contextNewFile, icon: , onSelect: () => { const parentId = isFolder && node ? node.id : (node?.parentId ?? null); actions.triggerCreate(parentId, "file"); }, }); } if (gates.newFolder && wired.onCreate) { list.push({ id: "new-folder", label: labels.contextNewFolder, icon: , onSelect: () => { const parentId = isFolder && node ? node.id : (node?.parentId ?? null); actions.triggerCreate(parentId, "folder"); }, }); } if (gates.rename && wired.onRename && node) { list.push({ id: "rename", label: labels.contextRename, icon: , onSelect: () => actions.startRename(node.id), }); } if (gates.refresh && wired.onRefresh && isFolder && node) { list.push({ id: "refresh", label: labels.contextRefresh, icon: , onSelect: () => actions.refresh(node.id), }); } if (gates.delete && wired.onDelete && node) { list.push({ id: "delete", label: labels.contextDelete, icon: , destructive: true, onSelect: () => { const ids = state.selectedIds.has(node.id) ? Array.from(state.selectedIds) : [node.id]; actions.triggerDelete(ids); }, }); } return list; }, [target, gates, wired, labels, actions, state.selectedIds]); if (!enabled) { return <>{children}; } // Rebuild the slot context on each open const ctx: FileTreeContextMenuContext = { state, actions, node: target?.node ?? null, defaultActions, position: target?.position ?? { x: 0, y: 0 }, labels, }; return ( {/* F-cross-13: no `asChild` — Base UI triggers reject it. `display: contents` keeps the trigger element out of layout (the wrapped div already used it); right-clicks bubble up from children. */} {children} {renderContextMenu ? ( renderContextMenu(ctx) ) : defaultActions.length === 0 ? ( {labels.emptyTitle} ) : ( )} ); } function DefaultContextMenuItems({ items, }: { items: FileTreeContextMenuItem[]; }) { // Insert a separator before the destructive (delete) action const out: ReactNode[] = []; items.forEach((item, i) => { if (item.destructive && i > 0) { out.push(); } out.push( item.onSelect()} > {item.icon} {item.label} , ); }); return <>{out}; } 61:T5b4,"use client"; import { cn } from "@/lib/utils"; import { useFileTree } from "../hooks/use-file-tree-context"; import { FileTreeNewFileButton } from "./file-tree-new-file-button"; import { FileTreeNewFolderButton } from "./file-tree-new-folder-button"; import { FileTreeRefreshButton } from "./file-tree-refresh-button"; import { FileTreeCollapseAllButton } from "./file-tree-collapse-all-button"; export interface FileTreeHeaderProps { className?: string; } export function FileTreeHeader(props: FileTreeHeaderProps) { const { className } = props; const { title, labels, totalCount } = useFileTree(); const headerTitle = title ?? labels.title; return (

{headerTitle} {totalCount}

); } 62:T69f,"use client"; import { FilePlus } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useFileTree } from "../hooks/use-file-tree-context"; export interface FileTreeNewFileButtonProps { /** Optional explicit parent id (defaults to focused folder, then root). */ parentId?: string | null; className?: string; } export function FileTreeNewFileButton(props: FileTreeNewFileButtonProps) { const { parentId, className } = props; const { actions, showNewFile, state, labels, rows } = useFileTree(); if (!showNewFile) return null; const resolveParent = (): string | null => { if (parentId !== undefined) return parentId; // Prefer focused folder; otherwise focused file's parent; otherwise root. if (state.focusedId) { const focused = rows.find((r) => r.node.id === state.focusedId); if (focused) { return focused.node.type === "folder" ? focused.node.id : (focused.node.parentId ?? null); } } return null; }; // F-cross-13: no `asChild` — Base UI triggers reject it; the trigger IS the button, styled via buttonVariants. return ( actions.triggerCreate(resolveParent(), "file")} aria-label={labels.newFile} > {labels.newFile} ); } 63:T664,"use client"; import { FolderPlus } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useFileTree } from "../hooks/use-file-tree-context"; export interface FileTreeNewFolderButtonProps { /** Optional explicit parent id (defaults to focused folder, then root). */ parentId?: string | null; className?: string; } export function FileTreeNewFolderButton(props: FileTreeNewFolderButtonProps) { const { parentId, className } = props; const { actions, showNewFolder, state, labels, rows } = useFileTree(); if (!showNewFolder) return null; const resolveParent = (): string | null => { if (parentId !== undefined) return parentId; if (state.focusedId) { const focused = rows.find((r) => r.node.id === state.focusedId); if (focused) { return focused.node.type === "folder" ? focused.node.id : (focused.node.parentId ?? null); } } return null; }; // F-cross-13: no `asChild` — Base UI triggers reject it; the trigger IS the button, styled via buttonVariants. return ( actions.triggerCreate(resolveParent(), "folder")} aria-label={labels.newFolder} > {labels.newFolder} ); } 64:T4ce,"use client"; import { RefreshCw } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useFileTree } from "../hooks/use-file-tree-context"; export interface FileTreeRefreshButtonProps { /** Refresh scope. `null` = whole tree (default); pass an id to refresh a single folder. */ nodeId?: string | null; className?: string; } export function FileTreeRefreshButton(props: FileTreeRefreshButtonProps) { const { nodeId = null, className } = props; const { actions, showRefresh, labels } = useFileTree(); if (!showRefresh) return null; // F-cross-13: no `asChild` — Base UI triggers reject it; the trigger IS the button, styled via buttonVariants. return ( actions.refresh(nodeId)} aria-label={labels.refresh} > {labels.refresh} ); } 65:T470,"use client"; import { ChevronsDownUp } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useFileTree } from "../hooks/use-file-tree-context"; export interface FileTreeCollapseAllButtonProps { className?: string; } export function FileTreeCollapseAllButton( props: FileTreeCollapseAllButtonProps, ) { const { className } = props; const { actions, showCollapseAll, labels } = useFileTree(); if (!showCollapseAll) return null; // F-cross-13: no `asChild` — Base UI triggers reject it; the trigger IS the button, styled via buttonVariants. return ( actions.collapseAll()} aria-label={labels.collapseAll} > {labels.collapseAll} ); } 66:T56d,"use client"; import { FilePlus, FolderPlus, Inbox } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useFileTree } from "../hooks/use-file-tree-context"; export function FileTreeEmpty() { const { actions, showNewFile, showNewFolder, labels } = useFileTree(); return (

{labels.emptyTitle}

{(showNewFile || showNewFolder) && (

{showNewFile ? ( ) : null} {showNewFolder ? ( ) : null}

)}

); } 67:T724,"use client"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import type { FsNode, FileTreeLabels } from "../types"; interface FileTreeDeleteConfirmProps { open: boolean; ids: string[]; nodes: FsNode[]; labels: FileTreeLabels; onConfirm: () => void; onCancel: () => void; } export function FileTreeDeleteConfirm(props: FileTreeDeleteConfirmProps) { const { open, ids, nodes, labels, onConfirm, onCancel } = props; const count = ids.length; const first = nodes[0]?.name ?? ""; const title = count === 1 ? `Delete "${first}"?` : labels.deleteConfirmTitle.replace("items", `${count} items`); const description = count === 1 ? labels.deleteConfirmDescription : `Delete "${first}" and ${count - 1} other${count - 1 > 1 ? "s" : ""}? ${labels.deleteConfirmDescription}`; return ( { if (!next) onCancel(); }} > {title} {description} {labels.deleteConfirmCancel} {labels.deleteConfirmAction} ); } 4d:["$","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","@tanstack/react-virtual",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-virtual","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":"@tanstack/react-virtual"}]]}]}],["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ilinxa","registryDependencies":["alert-dialog","button","context-menu","tooltip"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/components/navigation/file-tree/file-tree.tsx","content":"$50","type":"registry:component","target":"components/file-tree/file-tree.tsx"},{"path":"src/registry/components/navigation/file-tree/index.ts","content":"$51","type":"registry:component","target":"components/file-tree/index.ts"},{"path":"src/registry/components/navigation/file-tree/types.ts","content":"$52","type":"registry:component","target":"components/file-tree/types.ts"},{"path":"src/registry/components/navigation/file-tree/hooks/use-file-tree-context.ts","content":"$53","type":"registry:component","target":"components/file-tree/hooks/use-file-tree-context.ts"},{"path":"src/registry/components/navigation/file-tree/hooks/use-tree-state.ts","content":"$54","type":"registry:component","target":"components/file-tree/hooks/use-tree-state.ts"},{"path":"src/registry/components/navigation/file-tree/hooks/use-tree-flatten.ts","content":"$55","type":"registry:component","target":"components/file-tree/hooks/use-tree-flatten.ts"},{"path":"src/registry/components/navigation/file-tree/hooks/use-tree-keyboard.ts","content":"$56","type":"registry:component","target":"components/file-tree/hooks/use-tree-keyboard.ts"},{"path":"src/registry/components/navigation/file-tree/hooks/use-tree-drag.ts","content":"$57","type":"registry:component","target":"components/file-tree/hooks/use-tree-drag.ts"},{"path":"src/registry/components/navigation/file-tree/hooks/use-tree-virtual.ts","content":"$58","type":"registry:component","target":"components/file-tree/hooks/use-tree-virtual.ts"},{"path":"src/registry/components/navigation/file-tree/hooks/use-lazy-load.ts","content":"$59","type":"registry:component","target":"components/file-tree/hooks/use-lazy-load.ts"},{"path":"src/registry/components/navigation/file-tree/lib/icons.tsx","content":"$5a","type":"registry:component","target":"components/file-tree/lib/icons.tsx"},{"path":"src/registry/components/navigation/file-tree/lib/tree-utils.ts","content":"$5b","type":"registry:component","target":"components/file-tree/lib/tree-utils.ts"},{"path":"src/registry/components/navigation/file-tree/lib/validation.ts","content":"$5c","type":"registry:component","target":"components/file-tree/lib/validation.ts"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-row.tsx","content":"$5d","type":"registry:component","target":"components/file-tree/parts/file-tree-row.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-row-list.tsx","content":"$5e","type":"registry:component","target":"components/file-tree/parts/file-tree-row-list.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-rename-input.tsx","content":"$5f","type":"registry:component","target":"components/file-tree/parts/file-tree-rename-input.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-context-menu.tsx","content":"$60","type":"registry:component","target":"components/file-tree/parts/file-tree-context-menu.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-header.tsx","content":"$61","type":"registry:component","target":"components/file-tree/parts/file-tree-header.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-new-file-button.tsx","content":"$62","type":"registry:component","target":"components/file-tree/parts/file-tree-new-file-button.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-new-folder-button.tsx","content":"$63","type":"registry:component","target":"components/file-tree/parts/file-tree-new-folder-button.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-refresh-button.tsx","content":"$64","type":"registry:component","target":"components/file-tree/parts/file-tree-refresh-button.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-collapse-all-button.tsx","content":"$65","type":"registry:component","target":"components/file-tree/parts/file-tree-collapse-all-button.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-empty.tsx","content":"$66","type":"registry:component","target":"components/file-tree/parts/file-tree-empty.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-loading.tsx","content":"\"use client\";\n\nimport { useFileTree } from \"../hooks/use-file-tree-context\";\n\nexport function FileTreeLoading() {\n const { labels } = useFileTree();\n return (\n \n {[0, 1, 2, 3].map((i) => (\n \n

\n \n

\n ))}\n

\n );\n}\n","type":"registry:component","target":"components/file-tree/parts/file-tree-loading.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-drag-overlay.tsx","content":"\"use client\";\n\nimport { FileUp } from \"lucide-react\";\nimport type { FileTreeLabels } from \"../types\";\n\ninterface FileTreeDragOverlayProps {\n visible: boolean;\n labels: FileTreeLabels;\n}\n\nexport function FileTreeDragOverlay(props: FileTreeDragOverlayProps) {\n const { visible, labels } = props;\n if (!visible) return null;\n return (\n \n

\n \n {labels.externalDropOverlay}\n

\n );\n}\n","type":"registry:component","target":"components/file-tree/parts/file-tree-drag-overlay.tsx"},{"path":"src/registry/components/navigation/file-tree/parts/file-tree-delete-confirm.tsx","content":"$67","type":"registry:component","target":"components/file-tree/parts/file-tree-delete-confirm.tsx"}],"className":"h-[70svh] min-h-80"}]]}]