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:T5a13,"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_MANAGER_LABELS, type FileManagerActions, type FileManagerHandle, type FileManagerItem, type FileManagerProps, type FileManagerState, type FileManagerToolbarContext, type FsNode, } from "./types"; import { FileManagerContext, type FileManagerContextValue, } from "./hooks/use-file-manager-context"; import { useCurrentFolder } from "./hooks/use-current-folder"; import { useSelection } from "./hooks/use-selection"; import { useClipboard } from "./hooks/use-clipboard"; import { useSortSearch } from "./hooks/use-sort-search"; import { useVisibleItems } from "./hooks/use-visible-items"; import { useLazyLoad } from "./hooks/use-lazy-load"; import { useDrag } from "./hooks/use-drag"; import { useKeyboard } from "./hooks/use-keyboard"; import { useMarquee } from "./hooks/use-marquee"; import { countAllNodes, findNode, indexNodes, } from "./lib/tree-utils"; import { validateNodes } from "./lib/validation"; import { FileManagerToolbar } from "./parts/file-manager-toolbar"; import { FileManagerContentPane } from "./parts/file-manager-content-pane"; import { FileManagerStatusBar } from "./parts/file-manager-status-bar"; import { FileManagerDragOverlay } from "./parts/file-manager-drag-overlay"; import { FileManagerDeleteConfirm } from "./parts/file-manager-delete-confirm"; import { FileManagerContextMenu } from "./parts/file-manager-context-menu"; const LIST_ROW_HEIGHT = 32; export const FileManager = forwardRef< FileManagerHandle, FileManagerProps >(function FileManager(props, ref) { const { nodes, currentFolderId: controlledFolderId, defaultCurrentFolderId, onCurrentFolderChange, onLoadChildren, selectedIds, defaultSelectedIds, onSelectedChange, preserveSelectionOnNavigate = false, clipboard, defaultClipboard, onClipboardChange, onOpen, onCreate, onRename, onDelete, onMove, onPaste, onRefresh, onExternalDrop, validateRename, viewMode, defaultViewMode, onViewModeChange, iconSize, defaultIconSize, onIconSizeChange, sort, defaultSort, onSortChange, sortItems, searchQuery, defaultSearchQuery, onSearchQueryChange, filterItems, showHidden = false, isHidden, enableHistory = true, historyBackIds, historyForwardIds, onPathTyped, iconForNode, renderItem, renderToolbar, renderContextMenu, renderEmpty, renderLoading, renderStatusBar, renderDeleteConfirm, sidebar, details, toolbar = true, title, showNewFile = true, showNewFolder = true, showRefresh = true, showSearch = true, showViewToggle = true, showIconSize = true, showSort = true, showBackForward = true, showUpButton = true, showPathBar = true, showStatusBar = true, contextMenu = true, contextMenuActions, confirmDelete = true, enableInternalDrag = true, enableExternalDrop = true, enableMarqueeSelection = true, virtualize = "auto", virtualizeThreshold = 200, className, style, labels: labelsOverride, } = props; // Merge labels const labels = useMemo( () => ({ ...DEFAULT_FILE_MANAGER_LABELS, ...labelsOverride }), [labelsOverride], ); // Index nodes once per `nodes` change const nodeIndex = useMemo(() => indexNodes(nodes), [nodes]); // Validate nodes (dev only) useEffect(() => { if (process.env.NODE_ENV === "production") return; const warnings = validateNodes(nodes); for (const w of warnings) { console.warn("[file-manager]", w); } }, [nodes]); // Pending delete state const [pendingDeleteIds, setPendingDeleteIds] = useState([]); // Sort + search + view mode + icon size const sortSearch = useSortSearch({ controlledSort: sort, defaultSort, onSortChange, controlledSearch: searchQuery, defaultSearch: defaultSearchQuery, onSearchChange: onSearchQueryChange, controlledViewMode: viewMode, defaultViewMode, onViewModeChange, controlledIconSize: iconSize, defaultIconSize, onIconSizeChange, }); // Current folder + history const folder = useCurrentFolder({ nodes, index: nodeIndex, controlledFolderId, defaultFolderId: defaultCurrentFolderId, onCurrentFolderChange, enableHistory, controlledBack: historyBackIds, controlledForward: historyForwardIds, }); // Clipboard const clipboardHook = useClipboard({ controlledClipboard: clipboard, defaultClipboard, onClipboardChange, }); // Selection const [focusedId, setFocusedId] = useState(null); const [renamingId, setRenamingId] = useState(null); const selection = useSelection({ controlledIds: selectedIds, defaultIds: defaultSelectedIds, onSelectedChange, index: nodeIndex, }); // Lazy load const lazy = useLazyLoad({ nodes, currentFolderId: folder.currentFolderId, index: nodeIndex, onLoadChildren, }); // Visible items (filter + sort + flatten) const { items, totalSize, visibleCount } = useVisibleItems({ nodes, index: nodeIndex, currentFolderId: folder.currentFolderId, selectedIds: selection.selectedIds, focusedId, clipboard: clipboardHook.clipboard, sort: sortSearch.sort, searchQuery: sortSearch.searchQuery, showHidden, isHidden, filterItems, sortItems, }); // Drag const drag = useDrag({ nodes, currentFolderId: folder.currentFolderId, enableInternalDrag, enableExternalDrop, selectedIds: selection.selectedIds, onMove, onExternalDrop, selectIds: (idOrIds) => selection.select(idOrIds), }); // Refs const rootElRef = useRef(null); const scrollRef = useRef(null); const columnsRef = useRef(1); // ── 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 — invisible to screen readers, dead focus ring. // Mirrors app-sidebar's pattern; only steals focus while the user is // already interacting inside the component. useEffect(() => { if (!focusedId) return; if (typeof document === "undefined") return; const root = rootElRef.current; if (!root) return; if (!root.contains(document.activeElement)) return; const escaped = window.CSS.escape(focusedId); const target = root.querySelector( `[data-item-id="${escaped}"]`, ); if (target) { if (document.activeElement !== target) target.focus(); } else { // Virtualized list mode: the focused row may not be mounted — fall // back to the container so keyboard navigation keeps working. root.focus({ preventScroll: true }); } }, [focusedId]); // Marquee selection const marquee = useMarquee({ enabled: enableMarqueeSelection, applySelection: (ids) => { selection.select(ids); }, snapshotSelection: () => new Set(selection.selectedIds), containerRef: scrollRef, }); // ── Actions ──────────────────────────────────────────────────────────── const triggerDelete = useCallback( (ids: string[]) => { if (ids.length === 0) return; if (confirmDelete) { setPendingDeleteIds(ids); return; } onDelete?.({ ids }); }, [confirmDelete, onDelete], ); const triggerOpen = useCallback( (id: string) => { const node = findNode(id, nodes); if (!node) return; if (node.type === "folder") { if (!preserveSelectionOnNavigate) selection.clearSelection(); folder.navigateTo(id); } else { onOpen?.({ node }); } }, [nodes, folder, onOpen, preserveSelectionOnNavigate, selection], ); const paste = useCallback(() => { const cb = clipboardHook.clipboard; if (!cb.kind || cb.ids.length === 0) return; onPaste?.({ ids: cb.ids, kind: cb.kind, targetFolderId: folder.currentFolderId, }); if (cb.kind === "cut") { clipboardHook.clearClipboard(); } }, [clipboardHook, onPaste, folder.currentFolderId]); // Wrap navigation to clear selection on navigate (unless preserved). const maybeClearSelection = useCallback(() => { if (!preserveSelectionOnNavigate) selection.clearSelection(); }, [preserveSelectionOnNavigate, selection]); const navigateTo = useCallback( (id: string | null) => { maybeClearSelection(); folder.navigateTo(id); }, [maybeClearSelection, folder], ); const navigateUp = useCallback(() => { maybeClearSelection(); folder.navigateUp(); }, [maybeClearSelection, folder]); const navigateBack = useCallback(() => { maybeClearSelection(); folder.navigateBack(); }, [maybeClearSelection, folder]); const navigateForward = useCallback(() => { maybeClearSelection(); folder.navigateForward(); }, [maybeClearSelection, folder]); const actions: FileManagerActions = useMemo( () => ({ navigateTo, navigateUp, navigateBack, navigateForward, refresh: (nodeId = null) => onRefresh?.({ nodeId }), setViewMode: sortSearch.setViewMode, setIconSize: sortSearch.setIconSize, setSort: sortSearch.setSort, setSearchQuery: sortSearch.setSearchQuery, select: selection.select, toggleSelection: selection.toggleSelection, clearSelection: selection.clearSelection, selectAll: () => selection.selectAll(items.map((i) => i.node.id)), focusNode: (id) => setFocusedId(id), startRename: (id) => setRenamingId(id), cancelRename: () => setRenamingId(null), triggerCreate: (type) => onCreate?.({ parentId: folder.currentFolderId, type }), triggerDelete, triggerOpen, cut: clipboardHook.cut, copy: clipboardHook.copy, paste, clearClipboard: clipboardHook.clearClipboard, }), [ navigateTo, navigateUp, navigateBack, navigateForward, folder.currentFolderId, sortSearch, selection, items, onRefresh, onCreate, triggerDelete, triggerOpen, clipboardHook, paste, ], ); // ── State ────────────────────────────────────────────────────────────── const state: FileManagerState = useMemo( () => ({ currentFolderId: folder.currentFolderId, selectedIds: selection.selectedIds, focusedId, renamingId, viewMode: sortSearch.viewMode, iconSize: sortSearch.iconSize, sort: sortSearch.sort, searchQuery: sortSearch.searchQuery, path: folder.path, loadingChildren: lazy.loadingChildren, loadError: lazy.loadError, clipboard: clipboardHook.clipboard, historyBackIds: folder.historyBackIds, historyForwardIds: folder.historyForwardIds, }), [ folder.currentFolderId, folder.path, folder.historyBackIds, folder.historyForwardIds, selection.selectedIds, focusedId, renamingId, sortSearch.viewMode, sortSearch.iconSize, sortSearch.sort, sortSearch.searchQuery, lazy.loadingChildren, lazy.loadError, clipboardHook.clipboard, ], ); // Imperative handle useImperativeHandle( ref, () => ({ state, actions }), [state, actions], ); // Keyboard const kb = useKeyboard({ items, focusedId, renamingId, selectedIds: selection.selectedIds, viewMode: sortSearch.viewMode, columnsRef, actions, onOpen, }); // ── Item callbacks (click / dblclick / contextmenu) ─────────────────── const onItemClick = useCallback( (e: MouseEvent, item: FileManagerItem) => { if (e.metaKey || e.ctrlKey) { selection.toggleSelection(item.node.id); selection.setSelectionAnchorId(item.node.id); } else if (e.shiftKey) { const anchor = selection.getSelectionAnchorId(); if (!anchor) { selection.select(item.node.id); selection.setSelectionAnchorId(item.node.id); } else { const aIdx = items.findIndex((i) => i.node.id === anchor); const bIdx = items.findIndex((i) => i.node.id === item.node.id); if (aIdx !== -1 && bIdx !== -1) { const [from, to] = aIdx < bIdx ? [aIdx, bIdx] : [bIdx, aIdx]; const ids = items.slice(from, to + 1).map((i) => i.node.id); selection.select(ids); } } } else { selection.select(item.node.id); selection.setSelectionAnchorId(item.node.id); } setFocusedId(item.node.id); }, [items, selection], ); const onItemDoubleClick = useCallback( (_e: MouseEvent, item: FileManagerItem) => { if (item.node.type === "folder") { folder.navigateTo(item.node.id); } else { onOpen?.({ node: item.node }); } }, [folder, onOpen], ); const onItemContextMenu = useCallback( (_e: MouseEvent, item: FileManagerItem) => { if (!selection.selectedIds.has(item.node.id)) { selection.select(item.node.id); } setFocusedId(item.node.id); }, [selection], ); const onRenameCommit = useCallback( (id: string, nextName: string) => { const node = findNode(id, nodes); if (node && onRename) onRename({ id, node, nextName }); setRenamingId(null); }, [nodes, onRename], ); const onRenameCancel = useCallback(() => setRenamingId(null), []); // ── Header / toolbar context ────────────────────────────────────────── const headerCtx: FileManagerToolbarContext = useMemo( () => ({ state, actions, showNewFile, showNewFolder, showRefresh, showSearch, showViewToggle, showIconSize, showSort, showBackForward, showUpButton, showPathBar, title, labels, }), [ state, actions, showNewFile, showNewFolder, showRefresh, showSearch, showViewToggle, showIconSize, showSort, showBackForward, showUpButton, showPathBar, title, labels, ], ); // ── 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([]); }, []); // ── Public Context value ────────────────────────────────────────────── const totalCount = useMemo(() => countAllNodes(nodes), [nodes]); const ctxValue: FileManagerContextValue = useMemo( () => ({ state, actions, items, totalCount, visibleCount, totalSize, showNewFile, showNewFolder, showRefresh, showSearch, showViewToggle, showIconSize, showSort, showBackForward, showUpButton, showPathBar, showStatusBar, title, labels, }), [ state, actions, items, totalCount, visibleCount, totalSize, showNewFile, showNewFolder, showRefresh, showSearch, showViewToggle, showIconSize, showSort, showBackForward, showUpButton, showPathBar, showStatusBar, title, labels, ], ); // ── Render ──────────────────────────────────────────────────────────── const isEmpty = !lazy.loadingChildren && !lazy.loadError && items.length === 0; const contextMenuGates = { open: contextMenuActions?.open ?? true, newFile: contextMenuActions?.newFile ?? true, newFolder: contextMenuActions?.newFolder ?? true, cut: contextMenuActions?.cut ?? true, copy: contextMenuActions?.copy ?? true, paste: contextMenuActions?.paste ?? true, rename: contextMenuActions?.rename ?? true, delete: contextMenuActions?.delete ?? true, refresh: contextMenuActions?.refresh ?? true, }; const wired = { onOpen: !!onOpen, onCreate: !!onCreate, onRename: !!onRename, onDelete: !!onDelete, onMove: !!onMove, onPaste: !!onPaste, onRefresh: !!onRefresh, }; return ( {/* No delayDuration — Radix-only prop; Base UI's TooltipProvider rejects it (F-cross-13). */}

{sidebar ? ( ) : null}

{toolbar ? renderToolbar ? renderToolbar(headerCtx) : : null} renderEmpty({ actions, showNewFile, showNewFolder, labels, }) : undefined } renderLoading={renderLoading} labels={labels} onItemClick={onItemClick} onItemDoubleClick={onItemDoubleClick} onItemContextMenu={onItemContextMenu} onRenameCommit={onRenameCommit} onRenameCancel={onRenameCancel} onItemDragStart={drag.onItemDragStart} onItemDragOver={drag.onItemDragOver} onItemDragLeave={drag.onItemDragLeave} onItemDrop={drag.onItemDrop} onItemDragEnd={drag.onItemDragEnd} onContainerDragEnter={drag.onContainerDragEnter} onContainerDragOver={drag.onContainerDragOver} onContainerDragLeave={drag.onContainerDragLeave} onContainerDrop={drag.onContainerDrop} /> {showStatusBar ? renderStatusBar ? renderStatusBar({ state, actions, totalCount, selectedCount: selection.selectedIds.size, totalSize, labels, }) : : null}

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

); }); FileManager.displayName = "FileManager"; 51:T9e7,export { FileManager } from "./file-manager"; export { FileManagerToolbar } from "./parts/file-manager-toolbar"; export { FileManagerPathBar } from "./parts/file-manager-path-bar"; export { FileManagerViewToggle } from "./parts/file-manager-view-toggle"; export { FileManagerIconSizeControl } from "./parts/file-manager-icon-size-control"; export { FileManagerSortMenu } from "./parts/file-manager-sort-menu"; export { FileManagerSearchInput } from "./parts/file-manager-search-input"; export { FileManagerStatusBar } from "./parts/file-manager-status-bar"; export { FileManagerBackForward } from "./parts/file-manager-back-forward"; export { FileManagerUpButton } from "./parts/file-manager-up-button"; export { FileManagerNewButtons } from "./parts/file-manager-new-buttons"; export { FileManagerRefreshButton } from "./parts/file-manager-refresh-button"; export { useFileManager } from "./hooks/use-file-manager-context"; export { mergeLoadedChildren } from "./lib/tree-utils"; export { iconForExtension } from "./lib/icons"; export { DEFAULT_FILE_MANAGER_LABELS } from "./types"; // Shared clipboard primitive (sibling _shared/ module). Re-exported for // convenience so consumers don't need to import from a non-component path. export { FileClipboardProvider, useFileClipboard, EMPTY_CLIPBOARD, } from "../_shared/file-clipboard"; export type { FsNode, FsNodeType, FileManagerProps, FileManagerHandle, FileManagerState, FileManagerActions, FileManagerItem, FileManagerViewMode, FileManagerIconSize, FileManagerSortKey, FileManagerSortOrder, FileManagerSortState, FileManagerDropPosition, FileManagerVirtualizeMode, FileClipboard, FileClipboardKind, FileManagerOpenArgs, FileManagerCurrentFolderChangeArgs, FileManagerCreateArgs, FileManagerRenameArgs, FileManagerDeleteArgs, FileManagerMoveArgs, FileManagerPasteArgs, FileManagerClipboardChangeArgs, FileManagerRefreshArgs, FileManagerExternalDropArgs, FileManagerLoadChildrenArgs, FileManagerSelectionChangeArgs, FileManagerSortChangeArgs, FileManagerViewModeChangeArgs, FileManagerIconSizeChangeArgs, FileManagerSearchChangeArgs, FileManagerPathTypedArgs, FileManagerValidateRenameArgs, FileManagerIconForNodeArgs, FileManagerContextMenuItem, FileManagerContextMenuItemId, FileManagerToolbarContext, FileManagerStatusBarContext, FileManagerContextMenuContext, FileManagerEmptyContext, FileManagerItemRenderArgs, FileManagerDeleteConfirmContext, FileManagerLabels, } from "./types"; 52:T3369,import type { CSSProperties, ReactNode, Ref } from "react"; import type { FileClipboard, FileClipboardKind, } from "../_shared/file-clipboard"; export type { FileClipboard, FileClipboardKind }; export type FsNodeType = "file" | "folder"; /** Hierarchical-node shape — compatible-by-convention with file-tree's FsNode. */ 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 FileManagerViewMode = "grid" | "list"; export type FileManagerIconSize = "sm" | "md" | "lg"; export type FileManagerSortKey = "name" | "modified" | "size" | "type"; export type FileManagerSortOrder = "asc" | "desc"; export type FileManagerDropPosition = "inside"; export type FileManagerVirtualizeMode = "auto" | "always" | "never"; export interface FileManagerSortState { key: FileManagerSortKey; order: FileManagerSortOrder; } /** Visible-item descriptor produced for each visible cell/row. */ export interface FileManagerItem { node: FsNode; selected: boolean; focused: boolean; cut: boolean; index: number; totalVisible: number; } /** Read-only state surfaced to slots and the imperative ref. */ export interface FileManagerState { currentFolderId: string | null; selectedIds: ReadonlySet; focusedId: string | null; renamingId: string | null; viewMode: FileManagerViewMode; iconSize: FileManagerIconSize; sort: FileManagerSortState; searchQuery: string; /** Path from root to the current folder (root → ... → current). Empty when at root. */ path: FsNode[]; loadingChildren: boolean; loadError: string | null; clipboard: FileClipboard; historyBackIds: string[]; historyForwardIds: string[]; } /** Imperative actions exposed to slots and the imperative ref. */ export interface FileManagerActions { navigateTo: (folderId: string | null) => void; navigateUp: () => void; navigateBack: () => void; navigateForward: () => void; refresh: (nodeId?: string | null) => void; setViewMode: (mode: FileManagerViewMode) => void; setIconSize: (size: FileManagerIconSize) => void; setSort: (sort: FileManagerSortState) => void; setSearchQuery: (query: string) => void; select: (idOrIds: string | string[]) => void; toggleSelection: (id: string) => void; clearSelection: () => void; selectAll: () => void; focusNode: (id: string) => void; startRename: (id: string) => void; cancelRename: () => void; triggerCreate: (type: FsNodeType) => void; triggerDelete: (ids: string[]) => void; triggerOpen: (id: string) => void; cut: (ids: string[]) => void; copy: (ids: string[]) => void; paste: () => void; clearClipboard: () => void; } export interface FileManagerHandle { state: FileManagerState; actions: FileManagerActions; } // ─── Callback arg shapes (object-shape per F-cross-12) ───────────────────── export interface FileManagerOpenArgs { node: FsNode; } export interface FileManagerCurrentFolderChangeArgs { folderId: string | null; } export interface FileManagerCreateArgs { parentId: string | null; type: FsNodeType; } export interface FileManagerRenameArgs { id: string; node: FsNode; nextName: string; } export interface FileManagerDeleteArgs { ids: string[]; } export interface FileManagerMoveArgs { ids: string[]; targetId: string | null; position: FileManagerDropPosition; } export interface FileManagerPasteArgs { ids: string[]; kind: FileClipboardKind; targetFolderId: string | null; } export interface FileManagerClipboardChangeArgs { clipboard: FileClipboard; } export interface FileManagerRefreshArgs { nodeId: string | null; } export interface FileManagerExternalDropArgs { files: File[]; targetFolderId: string | null; } export interface FileManagerLoadChildrenArgs { nodeId: string; node: FsNode; } export interface FileManagerSelectionChangeArgs { ids: Set; } export interface FileManagerSortChangeArgs { sort: FileManagerSortState; } export interface FileManagerViewModeChangeArgs { mode: FileManagerViewMode; } export interface FileManagerIconSizeChangeArgs { size: FileManagerIconSize; } export interface FileManagerSearchChangeArgs { query: string; } export interface FileManagerPathTypedArgs { path: string; } export interface FileManagerValidateRenameArgs { node: FsNode; nextName: string; } export interface FileManagerIconForNodeArgs { node: FsNode; } // ─── Default labels ───────────────────────────────────────────────────────── export interface FileManagerLabels { title: string; back: string; forward: string; up: string; refresh: string; newFile: string; newFolder: string; searchPlaceholder: string; viewGrid: string; viewList: string; iconSizeSmall: string; iconSizeMedium: string; iconSizeLarge: string; sortByName: string; sortByModified: string; sortBySize: string; sortByType: string; sortAsc: string; sortDesc: string; contextOpen: string; contextNewFile: string; contextNewFolder: string; contextCut: string; contextCopy: string; contextPaste: string; contextRename: string; contextDelete: string; contextRefresh: string; deleteConfirmTitle: string; deleteConfirmDescription: string; deleteConfirmAction: string; deleteConfirmCancel: string; emptyTitle: string; loading: string; loadError: string; retry: string; externalDropOverlay: string; itemCount: string; itemCountSelected: string; totalSize: string; pathRoot: string; columnName: string; columnModified: string; columnSize: string; columnType: string; } // ─── Slot contexts ────────────────────────────────────────────────────────── export interface FileManagerToolbarContext { state: FileManagerState; actions: FileManagerActions; showNewFile: boolean; showNewFolder: boolean; showRefresh: boolean; showSearch: boolean; showViewToggle: boolean; showIconSize: boolean; showSort: boolean; showBackForward: boolean; showUpButton: boolean; showPathBar: boolean; title?: string; labels: FileManagerLabels; } export interface FileManagerStatusBarContext { state: FileManagerState; actions: FileManagerActions; totalCount: number; selectedCount: number; totalSize: number; labels: FileManagerLabels; } export type FileManagerContextMenuItemId = | "open" | "new-file" | "new-folder" | "cut" | "copy" | "paste" | "rename" | "delete" | "refresh"; export interface FileManagerContextMenuItem { id: FileManagerContextMenuItemId; label: string; onSelect: () => void; disabled?: boolean; destructive?: boolean; icon?: ReactNode; } export interface FileManagerContextMenuContext { state: FileManagerState; actions: FileManagerActions; /** Right-clicked item — `null` when right-clicking empty whitespace. */ node: FsNode | null; defaultActions: FileManagerContextMenuItem[]; position: { x: number; y: number }; labels: FileManagerLabels; } export interface FileManagerEmptyContext { actions: FileManagerActions; showNewFile: boolean; showNewFolder: boolean; labels: FileManagerLabels; } export interface FileManagerItemRenderArgs { item: FileManagerItem; defaultItem: ReactNode; viewMode: FileManagerViewMode; } export interface FileManagerDeleteConfirmContext { ids: string[]; nodes: FsNode[]; onConfirm: () => void; onCancel: () => void; labels: FileManagerLabels; } // ─── Top-level props ──────────────────────────────────────────────────────── export interface FileManagerProps { // Data nodes: FsNode[]; // Current folder currentFolderId?: string | null; defaultCurrentFolderId?: string | null; onCurrentFolderChange?: ( args: FileManagerCurrentFolderChangeArgs, ) => void; // Lazy load onLoadChildren?: ( args: FileManagerLoadChildrenArgs, ) => Promise; // Selection selectedIds?: Set; defaultSelectedIds?: Set; onSelectedChange?: (args: FileManagerSelectionChangeArgs) => void; preserveSelectionOnNavigate?: boolean; // Clipboard clipboard?: FileClipboard; defaultClipboard?: FileClipboard; onClipboardChange?: (args: FileManagerClipboardChangeArgs) => void; // Operations onOpen?: (args: FileManagerOpenArgs) => void; onCreate?: (args: FileManagerCreateArgs) => void; onRename?: (args: FileManagerRenameArgs) => void; onDelete?: (args: FileManagerDeleteArgs) => void; onMove?: (args: FileManagerMoveArgs) => void; onPaste?: (args: FileManagerPasteArgs) => void; onRefresh?: (args: FileManagerRefreshArgs) => void; onExternalDrop?: (args: FileManagerExternalDropArgs) => void; validateRename?: (args: FileManagerValidateRenameArgs) => string | null; // View mode viewMode?: FileManagerViewMode; defaultViewMode?: FileManagerViewMode; onViewModeChange?: (args: FileManagerViewModeChangeArgs) => void; // Icon size iconSize?: FileManagerIconSize; defaultIconSize?: FileManagerIconSize; onIconSizeChange?: (args: FileManagerIconSizeChangeArgs) => void; // Sort sort?: FileManagerSortState; defaultSort?: FileManagerSortState; onSortChange?: (args: FileManagerSortChangeArgs) => void; sortItems?: (a: FsNode, b: FsNode, sort: FileManagerSortState) => number; // Search / filter searchQuery?: string; defaultSearchQuery?: string; onSearchQueryChange?: (args: FileManagerSearchChangeArgs) => void; filterItems?: (node: FsNode, query: string) => boolean; showHidden?: boolean; isHidden?: (node: FsNode) => boolean; // Navigation history enableHistory?: boolean; historyBackIds?: string[]; historyForwardIds?: string[]; onPathTyped?: (args: FileManagerPathTypedArgs) => void; // Rendering iconForNode?: (args: FileManagerIconForNodeArgs) => ReactNode; renderItem?: (args: FileManagerItemRenderArgs) => ReactNode; renderToolbar?: (ctx: FileManagerToolbarContext) => ReactNode; renderContextMenu?: (ctx: FileManagerContextMenuContext) => ReactNode; renderEmpty?: (ctx: FileManagerEmptyContext) => ReactNode; renderLoading?: () => ReactNode; renderStatusBar?: (ctx: FileManagerStatusBarContext) => ReactNode; renderDeleteConfirm?: (ctx: FileManagerDeleteConfirmContext) => ReactNode; // Slots sidebar?: ReactNode; details?: ReactNode; // Toolbar config toolbar?: boolean; title?: string; showNewFile?: boolean; showNewFolder?: boolean; showRefresh?: boolean; showSearch?: boolean; showViewToggle?: boolean; showIconSize?: boolean; showSort?: boolean; showBackForward?: boolean; showUpButton?: boolean; showPathBar?: boolean; // Status bar showStatusBar?: boolean; // Context-menu config contextMenu?: boolean; contextMenuActions?: { open?: boolean; newFile?: boolean; newFolder?: boolean; cut?: boolean; copy?: boolean; paste?: boolean; rename?: boolean; delete?: boolean; refresh?: boolean; }; // Confirmation confirmDelete?: boolean; // DnD enableInternalDrag?: boolean; enableExternalDrop?: boolean; enableMarqueeSelection?: boolean; // Virtualization (list view only at v0.1.0) virtualize?: FileManagerVirtualizeMode; virtualizeThreshold?: number; // Polymorphic className?: string; style?: CSSProperties; // Imperative handle ref?: Ref; // i18n labels labels?: Partial; } export const DEFAULT_FILE_MANAGER_LABELS: FileManagerLabels = { title: "Files", back: "Back", forward: "Forward", up: "Up", refresh: "Refresh", newFile: "New File", newFolder: "New Folder", searchPlaceholder: "Search...", viewGrid: "Grid view", viewList: "List view", iconSizeSmall: "Small icons", iconSizeMedium: "Medium icons", iconSizeLarge: "Large icons", sortByName: "Name", sortByModified: "Date Modified", sortBySize: "Size", sortByType: "Type", sortAsc: "Ascending", sortDesc: "Descending", contextOpen: "Open", contextNewFile: "New File", contextNewFolder: "New Folder", contextCut: "Cut", contextCopy: "Copy", contextPaste: "Paste", contextRename: "Rename", contextDelete: "Delete", contextRefresh: "Refresh", deleteConfirmTitle: "Delete items?", deleteConfirmDescription: "This action cannot be undone.", deleteConfirmAction: "Delete", deleteConfirmCancel: "Cancel", emptyTitle: "This folder is empty", loading: "Loading…", loadError: "Failed to load", retry: "Retry", externalDropOverlay: "Drop files here", itemCount: "items", itemCountSelected: "selected", totalSize: "total", pathRoot: "Files", columnName: "Name", columnModified: "Modified", columnSize: "Size", columnType: "Type", }; 53:T620,"use client"; import { createContext, useContext } from "react"; import type { FileManagerActions, FileManagerItem, FileManagerLabels, FileManagerState, } from "../types"; export interface FileManagerContextValue { state: FileManagerState; actions: FileManagerActions; /** Visible items in the current folder, post-sort + filter + hidden. */ items: FileManagerItem[]; /** Total node count across the entire `nodes` tree (recursive). */ totalCount: number; /** Visible-item count in the current folder. */ visibleCount: number; /** Sum of `size` over visible items (folders contribute 0). */ totalSize: number; /** Header config flags (read by toolbar atoms). */ showNewFile: boolean; showNewFolder: boolean; showRefresh: boolean; showSearch: boolean; showViewToggle: boolean; showIconSize: boolean; showSort: boolean; showBackForward: boolean; showUpButton: boolean; showPathBar: boolean; showStatusBar: boolean; title?: string; labels: FileManagerLabels; } export const FileManagerContext = createContext(null); /** * Public consumer hook for advanced custom-chrome composition. Used by the * standalone toolbar atoms internally and exposed to consumers writing a * `renderToolbar` slot. * * Throws if called outside ``. */ export function useFileManager(): FileManagerContextValue { const ctx = useContext(FileManagerContext); if (!ctx) { throw new Error( "useFileManager() must be called inside ", ); } return ctx; } 54:Tcb3,"use client"; import { useCallback, useMemo, useState } from "react"; import type { FileManagerCurrentFolderChangeArgs, FsNode, } from "../types"; import { buildPath } from "../lib/path"; import { useNavigationHistory } from "./use-navigation-history"; interface UseCurrentFolderArgs { nodes: FsNode[]; index: Map; controlledFolderId?: string | null; defaultFolderId?: string | null; onCurrentFolderChange?: ( args: FileManagerCurrentFolderChangeArgs, ) => void; enableHistory: boolean; controlledBack?: string[]; controlledForward?: string[]; } export interface UseCurrentFolderResult { currentFolderId: string | null; path: FsNode[]; navigateTo: (folderId: string | null) => void; navigateUp: () => void; navigateBack: () => void; navigateForward: () => void; historyBackIds: string[]; historyForwardIds: string[]; } export function useCurrentFolder( args: UseCurrentFolderArgs, ): UseCurrentFolderResult { const { index, controlledFolderId, defaultFolderId, onCurrentFolderChange, enableHistory, controlledBack, controlledForward, } = args; const [internalFolderId, setInternalFolderId] = useState( defaultFolderId ?? null, ); const currentFolderId = controlledFolderId !== undefined ? controlledFolderId : internalFolderId; const history = useNavigationHistory({ enableHistory, controlledBack, controlledForward, }); const path = useMemo( () => buildPath(currentFolderId, index), [currentFolderId, index], ); const setFolder = useCallback( (next: string | null, pushToHistory: boolean) => { if (next === currentFolderId) return; if (pushToHistory) { history.pushVisit(currentFolderId); } if (controlledFolderId === undefined) setInternalFolderId(next); onCurrentFolderChange?.({ folderId: next }); }, [currentFolderId, controlledFolderId, onCurrentFolderChange, history], ); const navigateTo = useCallback( (folderId: string | null) => { setFolder(folderId, true); }, [setFolder], ); const navigateUp = useCallback(() => { if (currentFolderId === null) return; const current = index.get(currentFolderId); const parentId = current?.parentId ?? null; setFolder(parentId, true); }, [currentFolderId, index, setFolder]); const navigateBack = useCallback(() => { const previous = history.popBack(currentFolderId); if (previous === undefined) return; if (controlledFolderId === undefined) setInternalFolderId(previous); onCurrentFolderChange?.({ folderId: previous }); }, [history, currentFolderId, controlledFolderId, onCurrentFolderChange]); const navigateForward = useCallback(() => { const next = history.popForward(currentFolderId); if (next === undefined) return; if (controlledFolderId === undefined) setInternalFolderId(next); onCurrentFolderChange?.({ folderId: next }); }, [history, currentFolderId, controlledFolderId, onCurrentFolderChange]); return { currentFolderId, path, navigateTo, navigateUp, navigateBack, navigateForward, historyBackIds: history.backIds, historyForwardIds: history.forwardIds, }; } 55:Tc1a,"use client"; import { useCallback, useState } from "react"; const MAX_HISTORY = 50; interface UseNavigationHistoryArgs { enableHistory: boolean; controlledBack?: string[]; controlledForward?: string[]; } export interface UseNavigationHistoryResult { backIds: string[]; forwardIds: string[]; /** Push the *previous* folder onto the back stack when a fresh navigation happens. */ pushVisit: (previousFolderId: string | null) => void; /** Pop the back stack; returns the destination id (or `undefined` if empty). */ popBack: (currentFolderId: string | null) => string | null | undefined; /** Pop the forward stack; returns the destination id (or `undefined` if empty). */ popForward: (currentFolderId: string | null) => string | null | undefined; } const ROOT_SENTINEL = "__root__"; const encode = (id: string | null): string => id === null ? ROOT_SENTINEL : id; const decode = (s: string | undefined): string | null | undefined => s === undefined ? undefined : s === ROOT_SENTINEL ? null : s; export function useNavigationHistory( args: UseNavigationHistoryArgs, ): UseNavigationHistoryResult { const { enableHistory, controlledBack, controlledForward } = args; const [internalBack, setInternalBack] = useState([]); const [internalForward, setInternalForward] = useState([]); const backIds = controlledBack ?? (enableHistory ? internalBack : []); const forwardIds = controlledForward ?? (enableHistory ? internalForward : []); const pushVisit = useCallback( (previousFolderId: string | null) => { if (!enableHistory) return; if (controlledBack) return; setInternalBack((prev) => { const next = [...prev, encode(previousFolderId)]; if (next.length > MAX_HISTORY) next.splice(0, next.length - MAX_HISTORY); return next; }); setInternalForward([]); }, [enableHistory, controlledBack], ); const popBack = useCallback( (currentFolderId: string | null): string | null | undefined => { if (!enableHistory) return undefined; if (controlledBack) return undefined; if (internalBack.length === 0) return undefined; const previous = decode(internalBack[internalBack.length - 1]); setInternalBack(internalBack.slice(0, -1)); setInternalForward([...internalForward, encode(currentFolderId)]); return previous; }, [enableHistory, controlledBack, internalBack, internalForward], ); const popForward = useCallback( (currentFolderId: string | null): string | null | undefined => { if (!enableHistory) return undefined; if (controlledForward) return undefined; if (internalForward.length === 0) return undefined; const next = decode(internalForward[internalForward.length - 1]); setInternalForward(internalForward.slice(0, -1)); setInternalBack([...internalBack, encode(currentFolderId)]); return next; }, [enableHistory, controlledForward, internalBack, internalForward], ); return { backIds, forwardIds, pushVisit, popBack, popForward }; } 56:Tb2a,"use client"; import { useCallback, useMemo, useRef, useState } from "react"; import type { FileManagerSelectionChangeArgs, FsNode, } from "../types"; interface UseSelectionArgs { controlledIds?: Set; defaultIds?: Set; onSelectedChange?: (args: FileManagerSelectionChangeArgs) => void; /** Used to drop ids that no longer reference live nodes. */ index: Map; } export interface UseSelectionResult { selectedIds: ReadonlySet; select: (idOrIds: string | string[]) => void; toggleSelection: (id: string) => void; clearSelection: () => void; selectAll: (visibleIds: string[]) => void; /** For Shift+click range select. Read in event handler context only. */ getSelectionAnchorId: () => string | null; setSelectionAnchorId: (id: string | null) => void; } export function useSelection(args: UseSelectionArgs): UseSelectionResult { const { controlledIds, defaultIds, onSelectedChange, index } = args; const [internalIds, setInternalIds] = useState>( () => defaultIds ?? new Set(), ); const anchorRef = useRef(null); const selectedIds = controlledIds ?? internalIds; const setIds = useCallback( (next: Set) => { if (controlledIds === undefined) setInternalIds(next); onSelectedChange?.({ ids: next }); }, [controlledIds, onSelectedChange], ); const select = useCallback( (idOrIds: string | string[]) => { const ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds]; setIds(new Set(ids)); if (ids.length > 0) anchorRef.current = ids[0]; }, [setIds], ); const toggleSelection = useCallback( (id: string) => { const next = new Set(selectedIds); if (next.has(id)) next.delete(id); else next.add(id); setIds(next); anchorRef.current = id; }, [selectedIds, setIds], ); const clearSelection = useCallback(() => { setIds(new Set()); anchorRef.current = null; }, [setIds]); const selectAll = useCallback( (visibleIds: string[]) => { setIds(new Set(visibleIds)); }, [setIds], ); const getSelectionAnchorId = useCallback(() => anchorRef.current, []); const setSelectionAnchorId = useCallback((id: string | null) => { anchorRef.current = id; }, []); // Sanitize: drop ids that no longer reference real nodes const sanitized = useMemo(() => { if (selectedIds.size === 0) return selectedIds; let dirty = false; const next = new Set(); for (const id of selectedIds) { if (index.has(id)) next.add(id); else dirty = true; } return dirty ? next : selectedIds; }, [selectedIds, index]); return { selectedIds: sanitized, select, toggleSelection, clearSelection, selectAll, getSelectionAnchorId, setSelectionAnchorId, }; } 57:T9ad,"use client"; import { useCallback, useState } from "react"; import { EMPTY_CLIPBOARD, useFileClipboard, type FileClipboard, } from "../../_shared/file-clipboard"; import type { FileManagerClipboardChangeArgs } from "../types"; interface UseClipboardArgs { /** Controlled clipboard (consumer manages state). */ controlledClipboard?: FileClipboard; /** Initial value for uncontrolled mode. */ defaultClipboard?: FileClipboard; onClipboardChange?: (args: FileManagerClipboardChangeArgs) => void; } export interface UseClipboardResult { clipboard: FileClipboard; cut: (ids: string[]) => void; copy: (ids: string[]) => void; clearClipboard: () => void; setClipboard: (next: FileClipboard) => void; } /** * Resolves clipboard state across three modes: * 1. Controlled (`controlledClipboard` prop given) — consumer drives. * 2. Provider (`` up the tree) — synced across * instances inside the provider. * 3. Internal — local `useState`. * * Mode is decided in priority order: controlled > provider > internal. */ export function useClipboard(args: UseClipboardArgs): UseClipboardResult { const { controlledClipboard, defaultClipboard, onClipboardChange } = args; const provider = useFileClipboard(); const hasProvider = provider.__hasProvider; const [internalClipboard, setInternalClipboard] = useState( () => defaultClipboard ?? EMPTY_CLIPBOARD, ); // Resolve current clipboard let clipboard: FileClipboard; if (controlledClipboard) { clipboard = controlledClipboard; } else if (hasProvider) { clipboard = provider.clipboard; } else { clipboard = internalClipboard; } const setClipboard = useCallback( (next: FileClipboard) => { if (!controlledClipboard) { if (hasProvider) provider.setClipboard(next); else setInternalClipboard(next); } onClipboardChange?.({ clipboard: next }); }, [controlledClipboard, hasProvider, provider, onClipboardChange], ); const cut = useCallback( (ids: string[]) => { setClipboard({ kind: "cut", ids }); }, [setClipboard], ); const copy = useCallback( (ids: string[]) => { setClipboard({ kind: "copy", ids }); }, [setClipboard], ); const clearClipboard = useCallback(() => { setClipboard(EMPTY_CLIPBOARD); }, [setClipboard]); return { clipboard, cut, copy, clearClipboard, setClipboard, }; } 58:Td4b,"use client"; import { useCallback, useState } from "react"; import type { FileManagerIconSize, FileManagerIconSizeChangeArgs, FileManagerSearchChangeArgs, FileManagerSortChangeArgs, FileManagerSortState, FileManagerViewMode, FileManagerViewModeChangeArgs, } from "../types"; interface UseSortSearchArgs { controlledSort?: FileManagerSortState; defaultSort?: FileManagerSortState; onSortChange?: (args: FileManagerSortChangeArgs) => void; controlledSearch?: string; defaultSearch?: string; onSearchChange?: (args: FileManagerSearchChangeArgs) => void; controlledViewMode?: FileManagerViewMode; defaultViewMode?: FileManagerViewMode; onViewModeChange?: (args: FileManagerViewModeChangeArgs) => void; controlledIconSize?: FileManagerIconSize; defaultIconSize?: FileManagerIconSize; onIconSizeChange?: (args: FileManagerIconSizeChangeArgs) => void; } const DEFAULT_SORT: FileManagerSortState = { key: "name", order: "asc" }; export interface UseSortSearchResult { sort: FileManagerSortState; searchQuery: string; viewMode: FileManagerViewMode; iconSize: FileManagerIconSize; setSort: (next: FileManagerSortState) => void; setSearchQuery: (next: string) => void; setViewMode: (next: FileManagerViewMode) => void; setIconSize: (next: FileManagerIconSize) => void; } export function useSortSearch(args: UseSortSearchArgs): UseSortSearchResult { const { controlledSort, defaultSort, onSortChange, controlledSearch, defaultSearch, onSearchChange, controlledViewMode, defaultViewMode, onViewModeChange, controlledIconSize, defaultIconSize, onIconSizeChange, } = args; const [internalSort, setInternalSort] = useState( defaultSort ?? DEFAULT_SORT, ); const [internalSearch, setInternalSearch] = useState( defaultSearch ?? "", ); const [internalViewMode, setInternalViewMode] = useState( defaultViewMode ?? "grid", ); const [internalIconSize, setInternalIconSize] = useState( defaultIconSize ?? "md", ); const sort = controlledSort ?? internalSort; const searchQuery = controlledSearch ?? internalSearch; const viewMode = controlledViewMode ?? internalViewMode; const iconSize = controlledIconSize ?? internalIconSize; const setSort = useCallback( (next: FileManagerSortState) => { if (controlledSort === undefined) setInternalSort(next); onSortChange?.({ sort: next }); }, [controlledSort, onSortChange], ); const setSearchQuery = useCallback( (next: string) => { if (controlledSearch === undefined) setInternalSearch(next); onSearchChange?.({ query: next }); }, [controlledSearch, onSearchChange], ); const setViewMode = useCallback( (next: FileManagerViewMode) => { if (controlledViewMode === undefined) setInternalViewMode(next); onViewModeChange?.({ mode: next }); }, [controlledViewMode, onViewModeChange], ); const setIconSize = useCallback( (next: FileManagerIconSize) => { if (controlledIconSize === undefined) setInternalIconSize(next); onIconSizeChange?.({ size: next }); }, [controlledIconSize, onIconSizeChange], ); return { sort, searchQuery, viewMode, iconSize, setSort, setSearchQuery, setViewMode, setIconSize, }; } 59:Tf52,"use client"; import { useMemo } from "react"; import type { FileClipboard, FileManagerItem, FileManagerSortState, FsNode, } from "../types"; import { defaultSort, getChildrenOf } from "../lib/tree-utils"; import { getNodeExtension } from "../lib/icons"; interface UseVisibleItemsArgs { nodes: FsNode[]; index: Map; currentFolderId: string | null; selectedIds: ReadonlySet; focusedId: string | null; clipboard: FileClipboard; sort: FileManagerSortState; searchQuery: string; showHidden: boolean; isHidden?: (node: FsNode) => boolean; filterItems?: (node: FsNode, query: string) => boolean; sortItems?: (a: FsNode, b: FsNode, sort: FileManagerSortState) => number; } const defaultIsHidden = (node: FsNode) => node.name.startsWith("."); const defaultFilter = (node: FsNode, query: string) => node.name.toLowerCase().includes(query.toLowerCase()); function defaultSortBy( a: FsNode, b: FsNode, sort: FileManagerSortState, ): number { // folders always before files regardless of sort key (Mac Finder behavior) if (a.type !== b.type) return a.type === "folder" ? -1 : 1; let cmp = 0; switch (sort.key) { case "name": cmp = a.name.localeCompare(b.name, undefined, { sensitivity: "base" }); break; case "modified": { const ta = a.modifiedAt ? new Date(a.modifiedAt).getTime() : 0; const tb = b.modifiedAt ? new Date(b.modifiedAt).getTime() : 0; cmp = ta - tb; break; } case "size": cmp = (a.size ?? 0) - (b.size ?? 0); break; case "type": { const ea = getNodeExtension(a); const eb = getNodeExtension(b); cmp = ea.localeCompare(eb, undefined, { sensitivity: "base" }); if (cmp === 0) { cmp = a.name.localeCompare(b.name, undefined, { sensitivity: "base" }); } break; } } return sort.order === "asc" ? cmp : -cmp; } export interface UseVisibleItemsResult { items: FileManagerItem[]; /** Total size in bytes across visible items (folders contribute 0). */ totalSize: number; /** Visible item count (post-filter, post-hidden). */ visibleCount: number; } export function useVisibleItems( args: UseVisibleItemsArgs, ): UseVisibleItemsResult { const { nodes, index, currentFolderId, selectedIds, focusedId, clipboard, sort, searchQuery, showHidden, isHidden, filterItems, sortItems, } = args; return useMemo(() => { const children = getChildrenOf(currentFolderId, nodes, index) ?? []; const hiddenFn = isHidden ?? defaultIsHidden; const filterFn = filterItems ?? defaultFilter; const sorter = sortItems ? (a: FsNode, b: FsNode) => sortItems(a, b, sort) : (a: FsNode, b: FsNode) => defaultSortBy(a, b, sort); let filtered = showHidden ? [...children] : children.filter((n) => !hiddenFn(n)); if (searchQuery.trim()) { filtered = filtered.filter((n) => filterFn(n, searchQuery)); } filtered.sort(sorter); const cutSet = new Set( clipboard.kind === "cut" ? clipboard.ids : [], ); const total = filtered.length; const totalSize = filtered.reduce( (sum, node) => sum + (node.type === "file" ? (node.size ?? 0) : 0), 0, ); const items: FileManagerItem[] = filtered.map((node, i) => ({ node, selected: selectedIds.has(node.id), focused: focusedId === node.id, cut: cutSet.has(node.id), index: i, totalVisible: total, })); return { items, totalSize, visibleCount: total }; }, [ nodes, index, currentFolderId, selectedIds, focusedId, clipboard, sort, searchQuery, showHidden, isHidden, filterItems, sortItems, ]); } // fallback so the unused-import lint doesn't fire when defaultSort is // referenced by tree-utils consumers expecting it to be available void defaultSort; 5a:Td93,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import type { FileManagerLoadChildrenArgs, FsNode } from "../types"; interface UseLazyLoadArgs { nodes: FsNode[]; currentFolderId: string | null; index: Map; onLoadChildren?: ( args: FileManagerLoadChildrenArgs, ) => Promise; } export interface UseLazyLoadResult { loadingChildren: boolean; loadError: string | null; retry: () => void; } /** * Auto-fires `onLoadChildren` when the current folder's `children` is * `undefined`. Per-folder loading + error state is keyed by folder id so * navigating between folders surfaces the right state without a clear effect. */ export function useLazyLoad(args: UseLazyLoadArgs): UseLazyLoadResult { const { currentFolderId, index, onLoadChildren } = args; const [loadingIds, setLoadingIds] = useState>( () => new Set(), ); const [errorById, setErrorById] = useState>( () => new Map(), ); const inFlightRef = useRef>(new Set()); const triggerLoad = useCallback( async (folderId: string) => { if (!onLoadChildren) return; if (inFlightRef.current.has(folderId)) return; const node = index.get(folderId); if (!node || node.type !== "folder") return; inFlightRef.current.add(folderId); setLoadingIds((prev) => { const next = new Set(prev); next.add(folderId); return next; }); setErrorById((prev) => { if (!prev.has(folderId)) return prev; const next = new Map(prev); next.delete(folderId); return next; }); try { await onLoadChildren({ nodeId: folderId, node }); } catch (err) { const msg = err instanceof Error ? err.message : "Failed to load"; setErrorById((prev) => { const next = new Map(prev); next.set(folderId, msg); return next; }); } finally { inFlightRef.current.delete(folderId); setLoadingIds((prev) => { if (!prev.has(folderId)) return prev; const next = new Set(prev); next.delete(folderId); return next; }); } }, [onLoadChildren, index], ); useEffect(() => { if (!onLoadChildren || currentFolderId === null) return; const node = index.get(currentFolderId); if (!node || node.type !== "folder") return; if (node.children !== undefined) return; if (errorById.has(currentFolderId)) return; // Defer to the next microtask so the synchronous setLoadingIds inside // triggerLoad doesn't violate react-hooks/set-state-in-effect (kickoff // for async data fetch — sanctioned pattern). queueMicrotask(() => { void triggerLoad(currentFolderId); }); }, [currentFolderId, index, onLoadChildren, triggerLoad, errorById]); const retry = useCallback(() => { if (currentFolderId === null) return; setErrorById((prev) => { if (!prev.has(currentFolderId)) return prev; const next = new Map(prev); next.delete(currentFolderId); return next; }); void triggerLoad(currentFolderId); }, [currentFolderId, triggerLoad]); const loadingChildren = currentFolderId !== null && loadingIds.has(currentFolderId); const loadError = currentFolderId !== null ? (errorById.get(currentFolderId) ?? null) : null; return { loadingChildren, loadError, retry }; } 5b:T12f0,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { getItemRects, rectanglesIntersect, type Rect } from "../lib/intersect"; interface UseMarqueeArgs { enabled: boolean; /** Apply the marquee's current selection. `additive` = shift held (add to existing). */ applySelection: (ids: string[], additive: boolean) => void; /** Snapshot the current selection at marquee-start so additive mode can restore + extend. */ snapshotSelection: () => Set; /** Container element used for both rect query + scrolling. */ containerRef: React.RefObject; } export interface MarqueeRect { left: number; top: number; width: number; height: number; } export interface UseMarqueeResult { rect: MarqueeRect | null; active: boolean; /** Bind to the content pane's pointer-down — only fires when pointer-down lands on whitespace. */ onPointerDown: (e: ReactPointerEvent) => void; } export function useMarquee(args: UseMarqueeArgs): UseMarqueeResult { const { enabled, applySelection, snapshotSelection, containerRef } = args; const [rect, setRect] = useState(null); const [active, setActive] = useState(false); const startRef = useRef<{ x: number; y: number; additive: boolean; snapshot: Set; } | null>(null); // Stable refs to handlers so cleanup matches the registered listener. const moveHandlerRef = useRef<((e: PointerEvent) => void) | null>(null); const upHandlerRef = useRef<((e: PointerEvent) => void) | null>(null); // v0.1.1 (review): unmount cleanup — the window listeners were only // removed in handleUp, so unmounting mid-drag leaked all three listeners // (and the leaked move handler kept calling setState on the unmounted // component). useEffect(() => { return () => { if (moveHandlerRef.current) { window.removeEventListener("pointermove", moveHandlerRef.current); } if (upHandlerRef.current) { window.removeEventListener("pointerup", upHandlerRef.current); window.removeEventListener("pointercancel", upHandlerRef.current); } moveHandlerRef.current = null; upHandlerRef.current = null; startRef.current = null; }; }, []); const onPointerDown = useCallback( (e: ReactPointerEvent) => { if (!enabled) return; if (e.button !== 0) return; const additive = e.shiftKey; const initialSelection = additive ? snapshotSelection() : new Set(); startRef.current = { x: e.clientX, y: e.clientY, additive, snapshot: initialSelection, }; setActive(true); const handleMove = (moveEvent: PointerEvent) => { const start = startRef.current; const container = containerRef.current; if (!start || !container) return; const containerRect = container.getBoundingClientRect(); const left = Math.min(start.x, moveEvent.clientX); const top = Math.min(start.y, moveEvent.clientY); const right = Math.max(start.x, moveEvent.clientX); const bottom = Math.max(start.y, moveEvent.clientY); setRect({ left: left - containerRect.left, top: top - containerRect.top + container.scrollTop, width: right - left, height: bottom - top, }); const marqueeRect: Rect = { left, top, right, bottom }; const itemRects = getItemRects(container); const hit = new Set(); for (const [id, ir] of itemRects) { if (rectanglesIntersect(marqueeRect, ir)) hit.add(id); } const ids = Array.from(hit); applySelection( start.additive ? Array.from(new Set([...start.snapshot, ...ids])) : ids, start.additive, ); }; const handleUp = () => { startRef.current = null; setActive(false); setRect(null); if (moveHandlerRef.current) window.removeEventListener("pointermove", moveHandlerRef.current); if (upHandlerRef.current) { window.removeEventListener("pointerup", upHandlerRef.current); window.removeEventListener("pointercancel", upHandlerRef.current); } moveHandlerRef.current = null; upHandlerRef.current = null; }; moveHandlerRef.current = handleMove; upHandlerRef.current = handleUp; window.addEventListener("pointermove", handleMove); window.addEventListener("pointerup", handleUp); window.addEventListener("pointercancel", handleUp); }, [enabled, snapshotSelection, applySelection, containerRef], ); return { rect, active, onPointerDown }; } 5c:T2881,"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { DragEvent } from "react"; import type { FileManagerDropPosition, FileManagerExternalDropArgs, FileManagerItem, FileManagerMoveArgs, FsNode, } from "../types"; import { isLegalDrop } from "../lib/validation"; import { indexNodes } from "../lib/tree-utils"; /** Same MIME marker file-tree uses — enables cross-component drops. */ const INTERNAL_MIME = "application/x-ilinxa-file-tree"; const AUTO_SCROLL_EDGE_PX = 24; const AUTO_SCROLL_PX_PER_FRAME = 4; export interface DragOverState { /** Item id currently being hovered as a drop target. `null` = container. */ itemId: string | null; valid: boolean; } interface UseDragArgs { nodes: FsNode[]; currentFolderId: string | null; enableInternalDrag: boolean; enableExternalDrop: boolean; selectedIds: ReadonlySet; onMove?: (args: FileManagerMoveArgs) => void; onExternalDrop?: (args: FileManagerExternalDropArgs) => void; /** Replace selection with a single id (used at drag-start when source isn't selected). */ selectIds: (idOrIds: string | string[]) => void; } export interface UseDragResult { dragOver: DragOverState | null; isExternalDragging: boolean; isInternalDragging: boolean; // Item-level handlers onItemDragStart: (e: DragEvent, item: FileManagerItem) => void; onItemDragOver: (e: DragEvent, item: FileManagerItem) => void; onItemDragLeave: (e: DragEvent, item: FileManagerItem) => void; onItemDrop: (e: DragEvent, item: FileManagerItem) => void; onItemDragEnd: (e: DragEvent, item: FileManagerItem) => void; // Container handlers (scroll area) onContainerDragEnter: (e: DragEvent) => void; onContainerDragOver: (e: DragEvent) => void; onContainerDragLeave: (e: DragEvent) => void; onContainerDrop: (e: DragEvent) => void; } export function useDrag(args: UseDragArgs): UseDragResult { const { nodes, currentFolderId, enableInternalDrag, enableExternalDrop, selectedIds, onMove, onExternalDrop, selectIds, } = args; const [dragOver, setDragOver] = useState(null); const [isExternalDragging, setIsExternalDragging] = useState(false); const [isInternalDragging, setIsInternalDragging] = useState(false); const isInternalDraggingRef = useRef(false); 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 nodeIndex = useMemo(() => indexNodes(nodes), [nodes]); 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); } } }, [], ); useEffect(() => { return () => stopAutoScroll(); }, [stopAutoScroll]); const onItemDragStart = useCallback( (e: DragEvent, item: FileManagerItem) => { if (!enableInternalDrag) return; let ids: string[]; if (selectedIds.has(item.node.id) && selectedIds.size > 1) { ids = Array.from(selectedIds); } else { ids = [item.node.id]; selectIds(item.node.id); } dragSourceIdsRef.current = ids; isInternalDraggingRef.current = true; setIsInternalDragging(true); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData(INTERNAL_MIME, "1"); } catch { /* ignored */ } }, [enableInternalDrag, selectedIds, selectIds], ); const onItemDragEnd = useCallback(() => { isInternalDraggingRef.current = false; setIsInternalDragging(false); dragSourceIdsRef.current = []; setDragOver(null); stopAutoScroll(); }, [stopAutoScroll]); const onItemDragOver = useCallback( (e: DragEvent, item: FileManagerItem) => { if (!isInternalDraggingRef.current) return; e.preventDefault(); // Drops are only legal on folders const validTarget = item.node.type === "folder"; const position: FileManagerDropPosition = "inside"; const valid = validTarget && isLegalDrop({ srcIds: dragSourceIdsRef.current, targetId: item.node.id, position, index: nodeIndex, }); e.dataTransfer.dropEffect = valid ? "move" : "none"; setDragOver({ itemId: item.node.id, valid }); const scroller = (e.currentTarget as HTMLElement).closest( "[data-file-manager-scroller]", ) as HTMLElement | null; startAutoScroll(scroller, e.clientY); }, [nodeIndex, startAutoScroll], ); const onItemDragLeave = useCallback( (_e: DragEvent, item: FileManagerItem) => { setDragOver((prev) => prev?.itemId === item.node.id ? null : prev, ); }, [], ); const onItemDrop = useCallback( (e: DragEvent, item: FileManagerItem) => { if (!isInternalDraggingRef.current) return; e.preventDefault(); const validTarget = item.node.type === "folder"; const ids = dragSourceIdsRef.current; if (!validTarget) { // rejected setDragOver(null); stopAutoScroll(); isInternalDraggingRef.current = false; setIsInternalDragging(false); dragSourceIdsRef.current = []; return; } const valid = isLegalDrop({ srcIds: ids, targetId: item.node.id, position: "inside", index: nodeIndex, }); if (valid && onMove) { onMove({ ids, targetId: item.node.id, position: "inside" }); } setDragOver(null); stopAutoScroll(); isInternalDraggingRef.current = false; setIsInternalDragging(false); dragSourceIdsRef.current = []; }, [nodeIndex, onMove, stopAutoScroll], ); // Container-level (whitespace) handlers 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 && hasFiles(e)) { e.preventDefault(); e.dataTransfer.dropEffect = "copy"; } else if (isInternalDraggingRef.current) { // v0.1.1 (review 5.7): this handler sits on an ANCESTOR of the item // elements, so every item dragover bubbled here and cleared the drop // target the item handler had just set (highlight never rendered, // cursor read "no-drop" over legal folders). Only treat the event as // a whitespace hover when it did NOT originate inside an item. const target = e.target as HTMLElement | null; if (target?.closest("[data-item-id]")) return; e.preventDefault(); e.dataTransfer.dropEffect = "none"; // dropping on whitespace internal = no-op setDragOver(null); // auto-scroll if near edges const scroller = e.currentTarget as HTMLElement; startAutoScroll(scroller, e.clientY); } }, [enableExternalDrop, startAutoScroll], ); 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 && hasFiles(e)) { e.preventDefault(); externalEnterCountRef.current = 0; setIsExternalDragging(false); const target = e.target as HTMLElement | null; const itemEl = target?.closest("[data-item-id]") as | HTMLElement | null; const itemId = itemEl?.getAttribute("data-item-id") ?? null; let targetFolderId: string | null = currentFolderId; if (itemId) { const node = nodeIndex.get(itemId); if (node?.type === "folder") targetFolderId = itemId; } const files = Array.from(e.dataTransfer.files ?? []); if (files.length > 0) { onExternalDrop?.({ files, targetFolderId }); } return; } // Internal drag onto whitespace = no-op if (isInternalDraggingRef.current) { e.preventDefault(); isInternalDraggingRef.current = false; setIsInternalDragging(false); dragSourceIdsRef.current = []; setDragOver(null); stopAutoScroll(); } }, [ enableExternalDrop, currentFolderId, nodeIndex, onExternalDrop, stopAutoScroll, ], ); return { dragOver, isExternalDragging, isInternalDragging, onItemDragStart, onItemDragOver, onItemDragLeave, onItemDrop, onItemDragEnd, onContainerDragEnter, onContainerDragOver, onContainerDragLeave, onContainerDrop, }; } 5d:T1afb,"use client"; import { useCallback, useEffect, useRef } from "react"; import type { KeyboardEvent } from "react"; import type { FileManagerActions, FileManagerItem, FileManagerOpenArgs, FileManagerViewMode, } from "../types"; interface UseKeyboardArgs { items: FileManagerItem[]; focusedId: string | null; renamingId: string | null; selectedIds: ReadonlySet; viewMode: FileManagerViewMode; /** Live ref to the current column count in grid mode (computed by content-pane). */ columnsRef: React.MutableRefObject; actions: FileManagerActions; onOpen?: (args: FileManagerOpenArgs) => void; } const SUPPRESS_TAGS = ["INPUT", "TEXTAREA", "SELECT"]; export interface UseKeyboardResult { onKeyDown: (e: KeyboardEvent) => void; } export function useKeyboard(args: UseKeyboardArgs): UseKeyboardResult { const { items, focusedId, renamingId, selectedIds, viewMode, columnsRef, actions, onOpen, } = args; // Type-ahead state const typeAheadRef = useRef<{ prefix: string; timer: number | null }>({ prefix: "", timer: null, }); // v0.1.1 (review): clear the pending type-ahead reset timer on unmount. // (The ref object's identity is stable — only its fields mutate.) useEffect(() => { const ta = typeAheadRef.current; return () => { if (ta.timer !== null) window.clearTimeout(ta.timer); ta.timer = null; ta.prefix = ""; }; }, []); const onKeyDown = useCallback( (e: KeyboardEvent) => { const target = e.target as HTMLElement | null; if (target && SUPPRESS_TAGS.includes(target.tagName)) return; if (renamingId) return; const isMod = e.metaKey || e.ctrlKey; const idx = items.findIndex((item) => item.node.id === focusedId); const noFocus = idx === -1; const cols = Math.max(1, columnsRef.current || 1); switch (e.key) { case "ArrowDown": { e.preventDefault(); if (noFocus) { if (items[0]) actions.focusNode(items[0].node.id); return; } const step = viewMode === "grid" ? cols : 1; const next = Math.min(items.length - 1, idx + step); if (items[next]) actions.focusNode(items[next].node.id); return; } case "ArrowUp": { e.preventDefault(); if (noFocus) { if (items[0]) actions.focusNode(items[0].node.id); return; } const step = viewMode === "grid" ? cols : 1; const next = Math.max(0, idx - step); if (items[next]) actions.focusNode(items[next].node.id); return; } case "ArrowRight": { if (viewMode !== "grid") return; e.preventDefault(); if (noFocus) { if (items[0]) actions.focusNode(items[0].node.id); return; } const next = Math.min(items.length - 1, idx + 1); if (items[next]) actions.focusNode(items[next].node.id); return; } case "ArrowLeft": { if (viewMode !== "grid") return; e.preventDefault(); if (noFocus) { if (items[0]) actions.focusNode(items[0].node.id); return; } const next = Math.max(0, idx - 1); if (items[next]) actions.focusNode(items[next].node.id); return; } case "Home": { e.preventDefault(); if (items[0]) actions.focusNode(items[0].node.id); return; } case "End": { e.preventDefault(); const last = items[items.length - 1]; if (last) actions.focusNode(last.node.id); return; } case "Enter": { if (noFocus) return; e.preventDefault(); const item = items[idx]; if (item.node.type === "folder") { actions.navigateTo(item.node.id); } else { onOpen?.({ node: item.node }); } return; } case " ": case "Spacebar": { if (noFocus) return; e.preventDefault(); actions.toggleSelection(items[idx].node.id); return; } case "F2": { if (noFocus) return; e.preventDefault(); actions.startRename(items[idx].node.id); return; } case "Delete": { if (selectedIds.size === 0) return; e.preventDefault(); actions.triggerDelete(Array.from(selectedIds)); return; } case "Backspace": { if (selectedIds.size > 0) { e.preventDefault(); actions.triggerDelete(Array.from(selectedIds)); } else { e.preventDefault(); actions.navigateUp(); } return; } case "Escape": { if (selectedIds.size > 0) { e.preventDefault(); actions.clearSelection(); } return; } case "a": case "A": { if (!isMod) break; e.preventDefault(); actions.selectAll(); return; } case "x": case "X": { if (!isMod) break; if (selectedIds.size === 0) return; e.preventDefault(); actions.cut(Array.from(selectedIds)); return; } case "c": case "C": { if (!isMod) break; if (selectedIds.size === 0) return; e.preventDefault(); actions.copy(Array.from(selectedIds)); return; } case "v": case "V": { if (!isMod) break; e.preventDefault(); actions.paste(); return; } case "[": { if (!isMod) break; e.preventDefault(); actions.navigateBack(); return; } case "]": { if (!isMod) break; e.preventDefault(); actions.navigateForward(); return; } } // Type-ahead: a single printable character (no modifier) if (!isMod && e.key.length === 1 && /\S/.test(e.key)) { const ta = typeAheadRef.current; ta.prefix += e.key.toLowerCase(); if (ta.timer !== null) window.clearTimeout(ta.timer); ta.timer = window.setTimeout(() => { ta.prefix = ""; ta.timer = null; }, 800); const match = items.find((item) => item.node.name.toLowerCase().startsWith(ta.prefix), ); if (match) { e.preventDefault(); actions.focusNode(match.node.id); } } }, [ items, focusedId, renamingId, selectedIds, viewMode, columnsRef, actions, onOpen, ], ); return { onKeyDown }; } 5e:T8a9,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"; const EXT_TO_ICON: Record = { 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: FileCode, scss: FileCode, sass: FileCode, less: FileCode, html: FileCode2, htm: FileCode2, xml: FileCode2, json: FileJson, jsonc: FileJson, md: FileText, mdx: FileText, markdown: FileText, txt: FileText, rtf: FileText, png: FileImage, jpg: FileImage, jpeg: FileImage, gif: FileImage, webp: FileImage, bmp: FileImage, ico: FileImage, svg: FileImage, zip: FileArchive, tar: FileArchive, gz: FileArchive, "7z": FileArchive, rar: FileArchive, mp4: FileVideo, mov: FileVideo, webm: FileVideo, mkv: FileVideo, avi: FileVideo, mp3: FileAudio, wav: FileAudio, ogg: FileAudio, flac: FileAudio, lock: File, env: File, gitignore: File, gitattributes: File, editorconfig: File, }; 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(); } export function iconForExtension( ext: string, className = "size-4", ): ReactNode { const normalized = ext.replace(/^\./, "").toLowerCase(); const Icon = EXT_TO_ICON[normalized] ?? File; return ; } export function defaultFileIcon(node: FsNode, className = "size-4"): ReactNode { return iconForExtension(getNodeExtension(node), className); } export function defaultFolderIcon( expanded: boolean, className = "size-4", ): ReactNode { const Icon = expanded ? FolderOpen : Folder; return ; } 5f:Tc60,import type { FsNode } from "../types"; /** Flat-index a hierarchical array by id. */ 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; } 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; } 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; } 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 first, 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" }); } /** Children of a given folder id; null = root-level nodes. */ export function getChildrenOf( folderId: string | null, nodes: FsNode[], index: Map, ): FsNode[] | undefined { if (folderId === null) return nodes; const folder = index.get(folderId); if (!folder) return undefined; if (folder.type !== "folder") return undefined; return folder.children; } 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 for splicing lazy-loaded children into the tree. */ export function mergeLoadedChildren( nodes: FsNode[], parentId: string, children: FsNode[], ): FsNode[] { return replaceChildren(nodes, parentId, children); } 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; } 60:T6ff,import type { FsNode, FileManagerDropPosition } from "../types"; export function isSelfDrop( srcIds: string[], targetId: string | null, ): boolean { if (!targetId) return false; return srcIds.includes(targetId); } 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: FileManagerDropPosition; index: Map; } 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; return true; } /** Soft-validate a node tree on mount. */ export function validateNodes(nodes: FsNode[]): string[] { const warnings: string[] = []; const ids = 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, new Set()); return warnings; } 61:T60d,import type { FsNode } from "../types"; import { getParentChain } from "./tree-utils"; /** * Build the path from root → ... → currentFolder. Empty array when at root * (`currentFolderId === null`). Returns the chain of FsNodes. */ export function buildPath( currentFolderId: string | null, index: Map, ): FsNode[] { if (currentFolderId === null) return []; const current = index.get(currentFolderId); if (!current) return []; const chain = getParentChain(currentFolderId, index); return [...chain, current]; } /** * Best-effort string-to-id resolution. Looks for a node whose name path * (from root) matches the typed segments. Returns the id of the matching * folder, or `null` if no match. * * Consumer typically provides their own resolver via `onPathTyped`; this * helper is for the simple case where path segments map directly to node * names. */ export function parsePath( path: string, nodes: FsNode[], ): string | null { const segments = path.split(/[/\\]/).filter(Boolean); if (segments.length === 0) return null; let current: FsNode[] | undefined = nodes; let lastMatchId: string | null = null; for (const segment of segments) { if (!current) return null; const match: FsNode | undefined = current.find( (n: FsNode) => n.type === "folder" && n.name.localeCompare(segment, undefined, { sensitivity: "base" }) === 0, ); if (!match) return null; lastMatchId = match.id; current = match.children; } return lastMatchId; } 62:T49a,export interface Rect { left: number; top: number; right: number; bottom: number; } /** AABB rectangle intersection. */ export function rectanglesIntersect(a: Rect, b: Rect): boolean { return !( a.right < b.left || a.left > b.right || a.bottom < b.top || a.top > b.bottom ); } /** * Collect bounding rects of every item currently rendered inside `scroller`, * keyed by `data-item-id`. Used by the marquee hook to determine which items * the rectangle currently covers. * * Rects are in viewport coordinates (`getBoundingClientRect`); callers * comparing against the marquee rectangle should use the same coordinate * space. */ export function getItemRects( scroller: HTMLElement | null, ): Map { const out = new Map(); if (!scroller) return out; const items = scroller.querySelectorAll("[data-item-id]"); for (const el of items) { const id = el.getAttribute("data-item-id"); if (!id) continue; const rect = el.getBoundingClientRect(); out.set(id, { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom, }); } return out; } 63:T550,/** Format bytes as a human-readable string ("4.2 MB", "812 KB", "32 B"). */ export function formatBytes(bytes: number): string { if (!Number.isFinite(bytes) || bytes < 0) return "—"; if (bytes === 0) return "0 B"; const units = ["B", "KB", "MB", "GB", "TB"]; let value = bytes; let unit = 0; while (value >= 1024 && unit < units.length - 1) { value /= 1024; unit += 1; } const rounded = value < 10 ? value.toFixed(1) : Math.round(value).toString(); return `${rounded} ${units[unit]}`; } const dateFormatter = new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric", }); /** Format an ISO date string as "May 9, 2026". Returns the input if unparseable. */ export function formatDate(iso: string | undefined): string { if (!iso) return "—"; const date = new Date(iso); if (Number.isNaN(date.getTime())) return iso; return dateFormatter.format(date); } /** Capitalize an extension for display in the list view's Type column. */ export function formatKind(ext: string, type: "file" | "folder"): string { if (type === "folder") return "Folder"; if (!ext) return "File"; return ext.toUpperCase(); } /** Plural-aware count: "1 item" / "5 items". */ export function formatItemCount(n: number, label = "items"): string { return `${n} ${n === 1 ? label.replace(/s$/, "") : label}`; } 64:T762,"use client"; import type { FileManagerPathTypedArgs } from "../types"; import { useFileManager } from "../hooks/use-file-manager-context"; import { FileManagerBackForward } from "./file-manager-back-forward"; import { FileManagerUpButton } from "./file-manager-up-button"; import { FileManagerPathBar } from "./file-manager-path-bar"; import { FileManagerViewToggle } from "./file-manager-view-toggle"; import { FileManagerIconSizeControl } from "./file-manager-icon-size-control"; import { FileManagerSortMenu } from "./file-manager-sort-menu"; import { FileManagerSearchInput } from "./file-manager-search-input"; import { FileManagerNewButtons } from "./file-manager-new-buttons"; import { FileManagerRefreshButton } from "./file-manager-refresh-button"; export interface FileManagerToolbarProps { onPathTyped?: (args: FileManagerPathTypedArgs) => void; } export function FileManagerToolbar(props: FileManagerToolbarProps) { const { onPathTyped } = props; const { showBackForward, showUpButton, showPathBar, showSearch, showSort, showIconSize, showViewToggle, showNewFile, showNewFolder, showRefresh, } = useFileManager(); return ( ); } 65:T64f,"use client"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useFileManager } from "../hooks/use-file-manager-context"; export function FileManagerBackForward() { const { actions, state, labels } = useFileManager(); const canBack = state.historyBackIds.length > 0; const canForward = state.historyForwardIds.length > 0; // F-cross-13: no `asChild` — Base UI triggers reject it; triggers ARE the buttons, styled via buttonVariants. const triggerClass = cn( buttonVariants({ variant: "ghost", size: "icon" }), "size-7", ); return (

actions.navigateBack()} aria-label={labels.back} > {labels.back} actions.navigateForward()} aria-label={labels.forward} > {labels.forward}

); } 66:Te88,"use client"; import { useEffect, useRef, useState, type KeyboardEvent, type MouseEvent as ReactMouseEvent, } from "react"; import { ChevronRight, Pencil } from "lucide-react"; import { cn } from "@/lib/utils"; import { useFileManager } from "../hooks/use-file-manager-context"; import type { FileManagerPathTypedArgs } from "../types"; export interface FileManagerPathBarProps { /** Optional callback when user types a path; if omitted, the bar stays in display mode. */ onPathTyped?: (args: FileManagerPathTypedArgs) => void; className?: string; } export function FileManagerPathBar(props: FileManagerPathBarProps) { const { onPathTyped, className } = props; const { state, actions, labels } = useFileManager(); const { path } = state; const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(""); const inputRef = useRef(null); useEffect(() => { if (editing) inputRef.current?.focus(); }, [editing]); const display = path.map((n) => n.name).join("/"); const startEdit = (e: ReactMouseEvent) => { if (!onPathTyped) return; // Only enter edit mode when clicking the empty area (not a segment) const target = e.target as HTMLElement | null; if (target?.closest("[data-path-segment]")) return; setDraft(display); setEditing(true); }; const commit = () => { if (draft.trim() === display.trim()) { setEditing(false); return; } onPathTyped?.({ path: draft }); setEditing(false); }; const onInputKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); commit(); } else if (e.key === "Escape") { e.preventDefault(); setEditing(false); } }; if (editing) { return (

setDraft(e.target.value)} onBlur={commit} onKeyDown={onInputKeyDown} className="h-7 w-full rounded-sm border border-border bg-background px-2 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Path" />

); } return (

{path.map((segment) => ( ))} {onPathTyped ? (

); } 67:T71b,"use client"; import { LayoutGrid, List } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useFileManager } from "../hooks/use-file-manager-context"; import type { FileManagerViewMode } from "../types"; /** * Plain-button segmented control. Deliberately NOT shadcn ToggleGroup — its * value model diverges between Radix (single: string) and Base UI (string[]), * an F-cross-13 carrier (event-calendar v0.2.1 precedent; toggle-group dep * dropped). Each segment is the TooltipTrigger itself — no `asChild`, which * Base UI triggers reject. */ export function FileManagerViewToggle() { const { actions, state, labels } = useFileManager(); const modes: Array<{ mode: FileManagerViewMode; label: string; Icon: typeof LayoutGrid; }> = [ { mode: "grid", label: labels.viewGrid, Icon: LayoutGrid }, { mode: "list", label: labels.viewList, Icon: List }, ]; return (

{modes.map(({ mode, label, Icon }) => ( actions.setViewMode(mode)} className={cn( buttonVariants({ variant: "ghost", size: "icon" }), "size-7 rounded-none first:rounded-l-lg last:rounded-r-lg", state.viewMode === mode && "bg-muted", )} > {label} ))}

); } 68:T7f7,"use client"; import { buttonVariants } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useFileManager } from "../hooks/use-file-manager-context"; import type { FileManagerIconSize } from "../types"; /** * Plain-button segmented control. Deliberately NOT shadcn ToggleGroup — its * value model diverges between Radix (single: string) and Base UI (string[]), * an F-cross-13 carrier (event-calendar v0.2.1 precedent; toggle-group dep * dropped). Each segment is the TooltipTrigger itself — no `asChild`, which * Base UI triggers reject. */ export function FileManagerIconSizeControl() { const { actions, state, labels } = useFileManager(); if (state.viewMode !== "grid") return null; const dotSize: Record = { sm: "size-1.5", md: "size-2", lg: "size-2.5", }; return (

{(["sm", "md", "lg"] as const).map((size) => { const label = size === "sm" ? labels.iconSizeSmall : size === "md" ? labels.iconSizeMedium : labels.iconSizeLarge; return ( actions.setIconSize(size)} className={cn( buttonVariants({ variant: "ghost", size: "icon" }), "size-7 rounded-none first:rounded-l-lg last:rounded-r-lg", state.iconSize === size && "bg-muted", )} > {label} ); })}

); } 69:Tb1d,"use client"; import { ArrowDown, ArrowUp, ArrowUpDown, Check } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { cn } from "@/lib/utils"; import { useFileManager } from "../hooks/use-file-manager-context"; import type { FileManagerSortKey } from "../types"; export function FileManagerSortMenu() { const { actions, state, labels } = useFileManager(); const sortKeys: { key: FileManagerSortKey; label: string }[] = [ { key: "name", label: labels.sortByName }, { key: "modified", label: labels.sortByModified }, { key: "size", label: labels.sortBySize }, { key: "type", label: labels.sortByType }, ]; // F-cross-13: no `asChild` — Base UI triggers reject it. The Tooltip wrapper // is dropped: TooltipTrigger renders its own ) : null} ); } 6b:T674,"use client"; import { FilePlus, FolderPlus } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useFileManager } from "../hooks/use-file-manager-context"; export function FileManagerNewButtons() { const { actions, showNewFile, showNewFolder, labels } = useFileManager(); if (!showNewFile && !showNewFolder) return null; // F-cross-13: no `asChild` — Base UI triggers reject it; triggers ARE the buttons, styled via buttonVariants. const triggerClass = cn( buttonVariants({ variant: "ghost", size: "icon" }), "size-7", ); return (

{showNewFile ? ( actions.triggerCreate("file")} aria-label={labels.newFile} > {labels.newFile} ) : null} {showNewFolder ? ( actions.triggerCreate("folder")} aria-label={labels.newFolder} > {labels.newFolder} ) : null}

); } 6c:T1fee,"use client"; import { useCallback, useEffect, type DragEvent, type MouseEvent, type PointerEvent, type ReactNode, type RefObject, } from "react"; import type { FileManagerIconSize, FileManagerItem, FileManagerItemRenderArgs, FileManagerLabels, FileManagerSortState, FileManagerValidateRenameArgs, FileManagerViewMode, FileManagerVirtualizeMode, FsNode, } from "../types"; import type { MarqueeRect } from "../hooks/use-marquee"; import { FileManagerGridView } from "./file-manager-grid-view"; import { FileManagerListView } from "./file-manager-list-view"; import { FileManagerMarquee } from "./file-manager-marquee"; import { FileManagerEmpty } from "./file-manager-empty"; import { FileManagerLoading } from "./file-manager-loading"; interface FileManagerContentPaneProps { items: FileManagerItem[]; viewMode: FileManagerViewMode; iconSize: FileManagerIconSize; rowHeight: number; sort: FileManagerSortState; onSetSort: (next: FileManagerSortState) => void; renamingId: string | null; validateRename?: (args: FileManagerValidateRenameArgs) => string | null; iconForNode?: (args: { node: FsNode }) => ReactNode; enableInternalDrag: boolean; enableMarqueeSelection: boolean; dropTargetId: string | null; dropInvalid: boolean; loading: boolean; loadError: string | null; onRetryLoad: () => void; isEmpty: boolean; marqueeRect: MarqueeRect | null; marqueeActive: boolean; onMarqueePointerDown: (e: PointerEvent) => void; scrollRef: RefObject; /** Computed columns ref for keyboard 2D-arrow nav. */ columnsRef: React.MutableRefObject; /** Virtualization config — applied by list view internally. */ virtualize: FileManagerVirtualizeMode; virtualizeThreshold: number; renderItem?: (args: FileManagerItemRenderArgs) => ReactNode; renderEmpty?: () => ReactNode; renderLoading?: () => ReactNode; labels: FileManagerLabels; // Item-level callbacks onItemClick: (e: MouseEvent, item: FileManagerItem) => void; onItemDoubleClick: (e: MouseEvent, item: FileManagerItem) => void; onItemContextMenu: (e: MouseEvent, item: FileManagerItem) => void; onRenameCommit: (id: string, nextName: string) => void; onRenameCancel: () => void; onItemDragStart?: (e: DragEvent, item: FileManagerItem) => void; onItemDragOver?: (e: DragEvent, item: FileManagerItem) => void; onItemDragLeave?: (e: DragEvent, item: FileManagerItem) => void; onItemDrop?: (e: DragEvent, item: FileManagerItem) => void; onItemDragEnd?: (e: DragEvent, item: FileManagerItem) => void; // Container handlers (for whitespace context-menu + drop) onContainerContextMenu?: (e: MouseEvent) => void; onContainerDragEnter?: (e: DragEvent) => void; onContainerDragOver?: (e: DragEvent) => void; onContainerDragLeave?: (e: DragEvent) => void; onContainerDrop?: (e: DragEvent) => void; } const TRACK_PX_BY_SIZE: Record = { sm: 80, md: 120, lg: 180, }; export function FileManagerContentPane(props: FileManagerContentPaneProps) { const { items, viewMode, iconSize, rowHeight, sort, onSetSort, renamingId, validateRename, iconForNode, enableInternalDrag, enableMarqueeSelection, dropTargetId, dropInvalid, loading, loadError, onRetryLoad, isEmpty, marqueeRect, marqueeActive, onMarqueePointerDown, scrollRef, columnsRef, virtualize, virtualizeThreshold, renderItem, renderEmpty, renderLoading, labels, onItemClick, onItemDoubleClick, onItemContextMenu, onRenameCommit, onRenameCancel, onItemDragStart, onItemDragOver, onItemDragLeave, onItemDrop, onItemDragEnd, onContainerContextMenu, onContainerDragEnter, onContainerDragOver, onContainerDragLeave, onContainerDrop, } = props; // Compute column count for keyboard arrow nav (grid mode) const recomputeColumns = useCallback(() => { const el = scrollRef.current; if (!el || viewMode !== "grid") { columnsRef.current = 1; return; } const trackPx = TRACK_PX_BY_SIZE[iconSize]; const gap = 4; // matches `gap-1` in grid view const availableWidth = el.clientWidth - 16; // p-2 padding const cols = Math.max( 1, Math.floor((availableWidth + gap) / (trackPx + gap)), ); columnsRef.current = cols; }, [scrollRef, viewMode, iconSize, columnsRef]); useEffect(() => { recomputeColumns(); const el = scrollRef.current; if (!el) return; const ro = new ResizeObserver(recomputeColumns); ro.observe(el); return () => ro.disconnect(); }, [recomputeColumns, scrollRef]); // Pointer-down dispatch — only fire marquee if NOT on an item const handlePointerDown = (e: PointerEvent) => { if (!enableMarqueeSelection) return; const target = e.target as HTMLElement | null; if (target?.closest("[data-item-id]")) return; // item handles its own drag onMarqueePointerDown(e); }; return (

{loading ? ( renderLoading?.() ?? ) : loadError ? (

{labels.loadError}

{loadError}

) : isEmpty ? ( renderEmpty?.() ?? ) : viewMode === "grid" ? ( ) : ( )}

); } 6d:Te28,"use client"; import type { DragEvent, MouseEvent, ReactNode } from "react"; import type { FileManagerIconSize, FileManagerItem, FileManagerItemRenderArgs, FileManagerValidateRenameArgs, FsNode, } from "../types"; import { FileManagerItemView } from "./file-manager-item"; const GRID_TRACK_PX: Record = { sm: 80, md: 120, lg: 180, }; interface FileManagerGridViewProps { items: FileManagerItem[]; iconSize: FileManagerIconSize; renamingId: string | null; validateRename?: (args: FileManagerValidateRenameArgs) => string | null; iconForNode?: (args: { node: FsNode }) => ReactNode; enableInternalDrag: boolean; dropTargetId: string | null; dropInvalid: boolean; renderItem?: (args: FileManagerItemRenderArgs) => ReactNode; onItemClick: (e: MouseEvent, item: FileManagerItem) => void; onItemDoubleClick: (e: MouseEvent, item: FileManagerItem) => void; onItemContextMenu: (e: MouseEvent, item: FileManagerItem) => void; onRenameCommit: (id: string, nextName: string) => void; onRenameCancel: () => void; onItemDragStart?: (e: DragEvent, item: FileManagerItem) => void; onItemDragOver?: (e: DragEvent, item: FileManagerItem) => void; onItemDragLeave?: (e: DragEvent, item: FileManagerItem) => void; onItemDrop?: (e: DragEvent, item: FileManagerItem) => void; onItemDragEnd?: (e: DragEvent, item: FileManagerItem) => void; } export function FileManagerGridView(props: FileManagerGridViewProps) { const { items, iconSize, renamingId, validateRename, iconForNode, enableInternalDrag, dropTargetId, dropInvalid, renderItem, onItemClick, onItemDoubleClick, onItemContextMenu, onRenameCommit, onRenameCancel, onItemDragStart, onItemDragOver, onItemDragLeave, onItemDrop, onItemDragEnd, } = props; const trackPx = GRID_TRACK_PX[iconSize]; return (

{items.map((item) => { const isDropTarget = dropTargetId === item.node.id; const defaultItem = ( ); // v0.1.1 (review): `role="row"` on each cell wrapper — the grid // previously nested gridcells under unroled divs (invalid // grid → gridcell without a row). Matches the list view's shape. if (renderItem) { return (

{renderItem({ item, defaultItem, viewMode: "grid" })}

); } return (

{defaultItem}

); })}

); } 6e:T2040,"use client"; import { useEffect, useState, type CSSProperties, type DragEvent, type MouseEvent, type ReactNode, type RefObject, } from "react"; import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"; import { useVirtualizer } from "@tanstack/react-virtual"; import { cn } from "@/lib/utils"; import type { FileManagerItem, FileManagerItemRenderArgs, FileManagerLabels, FileManagerSortKey, FileManagerSortState, FileManagerValidateRenameArgs, FileManagerVirtualizeMode, FsNode, } from "../types"; import { FileManagerItemView } from "./file-manager-item"; interface FileManagerListViewProps { items: FileManagerItem[]; rowHeight: number; sort: FileManagerSortState; onSetSort: (next: FileManagerSortState) => void; renamingId: string | null; validateRename?: (args: FileManagerValidateRenameArgs) => string | null; iconForNode?: (args: { node: FsNode }) => ReactNode; enableInternalDrag: boolean; dropTargetId: string | null; dropInvalid: boolean; renderItem?: (args: FileManagerItemRenderArgs) => ReactNode; labels: FileManagerLabels; /** Scroll container ref. Required for virtualization measurements. */ scrollRef: RefObject; /** Virtualization mode: 'auto' engages above `virtualizeThreshold`. */ virtualize: FileManagerVirtualizeMode; virtualizeThreshold: number; // shared callbacks onItemClick: (e: MouseEvent, item: FileManagerItem) => void; onItemDoubleClick: (e: MouseEvent, item: FileManagerItem) => void; onItemContextMenu: (e: MouseEvent, item: FileManagerItem) => void; onRenameCommit: (id: string, nextName: string) => void; onRenameCancel: () => void; onItemDragStart?: (e: DragEvent, item: FileManagerItem) => void; onItemDragOver?: (e: DragEvent, item: FileManagerItem) => void; onItemDragLeave?: (e: DragEvent, item: FileManagerItem) => void; onItemDrop?: (e: DragEvent, item: FileManagerItem) => void; onItemDragEnd?: (e: DragEvent, item: FileManagerItem) => void; } function HeaderCell({ active, order, onClick, className, children, }: { active: boolean; order: "asc" | "desc"; onClick: () => void; className?: string; children: ReactNode; }) { return ( ); } export function FileManagerListView(props: FileManagerListViewProps) { const { items, rowHeight, sort, onSetSort, renamingId, validateRename, iconForNode, enableInternalDrag, dropTargetId, dropInvalid, renderItem, labels, scrollRef, virtualize, virtualizeThreshold, onItemClick, onItemDoubleClick, onItemContextMenu, onRenameCommit, onRenameCancel, onItemDragStart, onItemDragOver, onItemDragLeave, onItemDrop, onItemDragEnd, } = props; // Own the virtualizer locally — keeps virtualizer state inside this // component's scope so React Compiler doesn't strand stale measurements // across cross-component prop boundaries. const virtualizationActive = virtualize === "always" || (virtualize === "auto" && items.length >= virtualizeThreshold); // Sync the scroll element ref into local state so `useVirtualizer` picks it // up on the second render (refs alone don't trigger re-render, which leaves // the virtualizer with a null scroll element and zero measured viewport). const [scrollEl, setScrollEl] = useState( () => scrollRef.current, ); useEffect(() => { if (scrollRef.current && scrollRef.current !== scrollEl) { setScrollEl(scrollRef.current); } }, [scrollRef, scrollEl]); const virtualizer = useVirtualizer({ count: items.length, getScrollElement: () => scrollEl, estimateSize: () => rowHeight, overscan: 8, enabled: virtualizationActive, }); const toggleSort = (key: FileManagerSortKey) => { if (sort.key === key) { onSetSort({ key, order: sort.order === "asc" ? "desc" : "asc" }); } else { onSetSort({ key, order: "asc" }); } }; const headerRow = (

toggleSort("name")} className="flex-1" > {labels.columnName} toggleSort("modified")} className="hidden w-32 shrink-0 sm:flex" > {labels.columnModified} toggleSort("size")} className="hidden w-20 shrink-0 justify-end sm:flex" > {labels.columnSize} toggleSort("type")} className="hidden w-16 shrink-0 md:flex" > {labels.columnType}

); const buildRow = (item: FileManagerItem, outerStyle?: CSSProperties) => { const isDropTarget = dropTargetId === item.node.id; const defaultItem = ( ); if (renderItem) { return (

{renderItem({ item, defaultItem, viewMode: "list" })}

); } return (

{defaultItem}

); }; if (virtualizationActive) { const totalHeight = virtualizer.getTotalSize(); const virtualItems = virtualizer.getVirtualItems(); return (

{headerRow}

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

); } return (

{headerRow}

{items.map((item) => buildRow(item))}

); } 6f:T1bb4,"use client"; import type { CSSProperties, DragEvent, MouseEvent, ReactNode, } from "react"; import { cn } from "@/lib/utils"; import type { FileManagerIconSize, FileManagerItem, FileManagerValidateRenameArgs, FileManagerViewMode, FsNode, } from "../types"; import { defaultFileIcon, defaultFolderIcon } from "../lib/icons"; import { formatBytes, formatDate, formatKind } from "../lib/format"; import { getNodeExtension } from "../lib/icons"; import { FileManagerRenameInput } from "./file-manager-rename-input"; const ICON_SIZE_PX: Record = { sm: 32, md: 48, lg: 72, }; const GRID_TRACK_PX: Record = { sm: 80, md: 120, lg: 180, }; interface FileManagerItemViewProps { item: FileManagerItem; viewMode: FileManagerViewMode; iconSize: FileManagerIconSize; isRenaming: boolean; validateRename?: (args: FileManagerValidateRenameArgs) => string | null; iconForNode?: (args: { node: FsNode }) => ReactNode; enableInternalDrag: boolean; /** Drop hover indicator state (only set on the hovered drop target). */ isDropTarget?: boolean; dropInvalid?: boolean; // shared callbacks onClick: (e: MouseEvent, item: FileManagerItem) => void; onDoubleClick: (e: MouseEvent, item: FileManagerItem) => void; onContextMenu: (e: MouseEvent, item: FileManagerItem) => void; onRenameCommit: (id: string, nextName: string) => void; onRenameCancel: () => void; onDragStart?: (e: DragEvent, item: FileManagerItem) => void; onDragOver?: (e: DragEvent, item: FileManagerItem) => void; onDragLeave?: (e: DragEvent, item: FileManagerItem) => void; onDrop?: (e: DragEvent, item: FileManagerItem) => void; onDragEnd?: (e: DragEvent, item: FileManagerItem) => void; /** Used by virtualized list mode to position rows absolutely. */ outerStyle?: CSSProperties; } export function FileManagerItemView(props: FileManagerItemViewProps) { const { item, viewMode, iconSize, isRenaming, validateRename, iconForNode, enableInternalDrag, isDropTarget, dropInvalid, onClick, onDoubleClick, onContextMenu, onRenameCommit, onRenameCancel, onDragStart, onDragOver, onDragLeave, onDrop, onDragEnd, outerStyle, } = props; const { node, selected, focused, cut } = item; const isFolder = node.type === "folder"; const ext = getNodeExtension(node); const baseIcon = node.icon ? node.icon : iconForNode ? iconForNode({ node }) : isFolder ? defaultFolderIcon(false, "size-full") : defaultFileIcon(node, "size-full"); const sharedProps = { "data-item-id": node.id, role: "gridcell" as const, tabIndex: focused ? 0 : -1, "aria-selected": selected, draggable: enableInternalDrag && !isRenaming, onClick: (e: MouseEvent) => onClick(e, item), onDoubleClick: (e: MouseEvent) => onDoubleClick(e, item), onContextMenu: (e: MouseEvent) => onContextMenu(e, item), onDragStart: (e: DragEvent) => enableInternalDrag && onDragStart && onDragStart(e, item), onDragOver: (e: DragEvent) => onDragOver?.(e, item), onDragLeave: (e: DragEvent) => onDragLeave?.(e, item), onDrop: (e: DragEvent) => onDrop?.(e, item), onDragEnd: (e: DragEvent) => onDragEnd?.(e, item), }; if (viewMode === "grid") { const trackPx = GRID_TRACK_PX[iconSize]; const iconPx = ICON_SIZE_PX[iconSize]; return (

{isRenaming ? (

onRenameCommit(node.id, next)} onCancel={onRenameCancel} />

) : ( {node.name} )}

); } // List mode return (

{isRenaming ? ( onRenameCommit(node.id, next)} onCancel={onRenameCancel} /> ) : ( node.name )} {formatDate(node.modifiedAt)} {isFolder ? "—" : formatBytes(node.size ?? 0)} {formatKind(ext, node.type)}

); } 70:Tbd2,"use client"; import { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import type { FsNode, FileManagerValidateRenameArgs } from "../types"; interface FileManagerRenameInputProps { node: FsNode; onCommit: (nextName: string) => void; onCancel: () => void; validateRename?: (args: FileManagerValidateRenameArgs) => string | null; className?: string; } export function FileManagerRenameInput(props: FileManagerRenameInputProps) { const { node, onCommit, onCancel, validateRename, className } = 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(); 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 { e.stopPropagation(); } }} onBlur={() => tryCommit()} onClick={(e) => e.stopPropagation()} onDoubleClick={(e) => e.stopPropagation()} onPointerDown={(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}

); } 71:T187a,"use client"; import { useMemo, useState, type MouseEvent, type ReactNode } from "react"; import { ClipboardCopy, ClipboardPaste, FilePlus, FolderPlus, Pencil, RefreshCw, Scissors, Trash2, } from "lucide-react"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, } from "@/components/ui/context-menu"; import type { FileManagerActions, FileManagerContextMenuContext, FileManagerContextMenuItem, FileManagerLabels, FileManagerState, FsNode, } from "../types"; interface FileManagerContextMenuProps { state: FileManagerState; actions: FileManagerActions; enabled: boolean; labels: FileManagerLabels; gates: { open: boolean; newFile: boolean; newFolder: boolean; cut: boolean; copy: boolean; paste: boolean; rename: boolean; delete: boolean; refresh: boolean; }; wired: { onOpen: boolean; onCreate: boolean; onRename: boolean; onDelete: boolean; onMove: boolean; onPaste: boolean; onRefresh: boolean; }; nodeIndex: ReadonlyMap; renderContextMenu?: (ctx: FileManagerContextMenuContext) => ReactNode; children: ReactNode; } export function FileManagerContextMenu(props: FileManagerContextMenuProps) { 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 itemEl = el?.closest("[data-item-id]") as HTMLElement | null; const id = itemEl?.getAttribute("data-item-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 list: FileManagerContextMenuItem[] = []; const hasClipboard = state.clipboard.kind !== null; const ids = node && state.selectedIds.has(node.id) ? Array.from(state.selectedIds) : node ? [node.id] : []; if (gates.open && wired.onOpen && node && node.type === "file") { list.push({ id: "open", label: labels.contextOpen, icon: , onSelect: () => actions.triggerOpen(node.id), }); } if (gates.newFile && wired.onCreate) { list.push({ id: "new-file", label: labels.contextNewFile, icon: , onSelect: () => actions.triggerCreate("file"), }); } if (gates.newFolder && wired.onCreate) { list.push({ id: "new-folder", label: labels.contextNewFolder, icon: , onSelect: () => actions.triggerCreate("folder"), }); } if (gates.cut && node && ids.length > 0) { list.push({ id: "cut", label: labels.contextCut, icon: , onSelect: () => actions.cut(ids), }); } if (gates.copy && node && ids.length > 0) { list.push({ id: "copy", label: labels.contextCopy, icon: , onSelect: () => actions.copy(ids), }); } if (gates.paste && wired.onPaste) { list.push({ id: "paste", label: labels.contextPaste, icon: , disabled: !hasClipboard, onSelect: () => actions.paste(), }); } if (gates.rename && wired.onRename && node) { list.push({ id: "rename", label: labels.contextRename, icon: , onSelect: () => actions.startRename(node.id), }); } if (gates.refresh && wired.onRefresh) { list.push({ id: "refresh", label: labels.contextRefresh, icon: , onSelect: () => actions.refresh(state.currentFolderId), }); } if (gates.delete && wired.onDelete && node && ids.length > 0) { list.push({ id: "delete", label: labels.contextDelete, icon: , destructive: true, onSelect: () => actions.triggerDelete(ids), }); } return list; }, [target, state, gates, wired, labels, actions]); if (!enabled) { return <>{children}; } const ctx: FileManagerContextMenuContext = { 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 DefaultItems({ items }: { items: FileManagerContextMenuItem[] }) { const out: ReactNode[] = []; let lastSep = false; items.forEach((item, i) => { if (item.destructive && i > 0 && !lastSep) { out.push(); lastSep = true; } else { lastSep = false; } out.push( item.onSelect()} > {item.icon} {item.label} , ); }); return <>{out}; } 72:T574,"use client"; import { FilePlus, FolderPlus, Inbox } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useFileManager } from "../hooks/use-file-manager-context"; export function FileManagerEmpty() { const { actions, showNewFile, showNewFolder, labels } = useFileManager(); return (

{labels.emptyTitle}

{(showNewFile || showNewFolder) && (

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

)}

); } 73:T738,"use client"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import type { FsNode, FileManagerLabels } from "../types"; interface FileManagerDeleteConfirmProps { open: boolean; ids: string[]; nodes: FsNode[]; labels: FileManagerLabels; onConfirm: () => void; onCancel: () => void; } export function FileManagerDeleteConfirm( props: FileManagerDeleteConfirmProps, ) { 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","dropdown-menu","input","tooltip","@ilinxa/file-clipboard"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/components/navigation/file-manager/file-manager.tsx","content":"$50","type":"registry:component","target":"components/file-manager/file-manager.tsx"},{"path":"src/registry/components/navigation/file-manager/index.ts","content":"$51","type":"registry:component","target":"components/file-manager/index.ts"},{"path":"src/registry/components/navigation/file-manager/types.ts","content":"$52","type":"registry:component","target":"components/file-manager/types.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-file-manager-context.ts","content":"$53","type":"registry:component","target":"components/file-manager/hooks/use-file-manager-context.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-current-folder.ts","content":"$54","type":"registry:component","target":"components/file-manager/hooks/use-current-folder.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-navigation-history.ts","content":"$55","type":"registry:component","target":"components/file-manager/hooks/use-navigation-history.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-selection.ts","content":"$56","type":"registry:component","target":"components/file-manager/hooks/use-selection.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-clipboard.ts","content":"$57","type":"registry:component","target":"components/file-manager/hooks/use-clipboard.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-sort-search.ts","content":"$58","type":"registry:component","target":"components/file-manager/hooks/use-sort-search.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-visible-items.ts","content":"$59","type":"registry:component","target":"components/file-manager/hooks/use-visible-items.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-lazy-load.ts","content":"$5a","type":"registry:component","target":"components/file-manager/hooks/use-lazy-load.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-marquee.ts","content":"$5b","type":"registry:component","target":"components/file-manager/hooks/use-marquee.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-drag.ts","content":"$5c","type":"registry:component","target":"components/file-manager/hooks/use-drag.ts"},{"path":"src/registry/components/navigation/file-manager/hooks/use-keyboard.ts","content":"$5d","type":"registry:component","target":"components/file-manager/hooks/use-keyboard.ts"},{"path":"src/registry/components/navigation/file-manager/lib/icons.tsx","content":"$5e","type":"registry:component","target":"components/file-manager/lib/icons.tsx"},{"path":"src/registry/components/navigation/file-manager/lib/tree-utils.ts","content":"$5f","type":"registry:component","target":"components/file-manager/lib/tree-utils.ts"},{"path":"src/registry/components/navigation/file-manager/lib/validation.ts","content":"$60","type":"registry:component","target":"components/file-manager/lib/validation.ts"},{"path":"src/registry/components/navigation/file-manager/lib/path.ts","content":"$61","type":"registry:component","target":"components/file-manager/lib/path.ts"},{"path":"src/registry/components/navigation/file-manager/lib/intersect.ts","content":"$62","type":"registry:component","target":"components/file-manager/lib/intersect.ts"},{"path":"src/registry/components/navigation/file-manager/lib/format.ts","content":"$63","type":"registry:component","target":"components/file-manager/lib/format.ts"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-toolbar.tsx","content":"$64","type":"registry:component","target":"components/file-manager/parts/file-manager-toolbar.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-back-forward.tsx","content":"$65","type":"registry:component","target":"components/file-manager/parts/file-manager-back-forward.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-up-button.tsx","content":"\"use client\";\n\nimport { ArrowUp } from \"lucide-react\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { useFileManager } from \"../hooks/use-file-manager-context\";\n\nexport function FileManagerUpButton() {\n const { actions, state, labels } = useFileManager();\n const atRoot = state.currentFolderId === null;\n // F-cross-13: no `asChild` — Base UI triggers reject it; the trigger IS the button, styled via buttonVariants.\n return (\n \n actions.navigateUp()}\n aria-label={labels.up}\n >\n \n \n {labels.up}\n \n );\n}\n","type":"registry:component","target":"components/file-manager/parts/file-manager-up-button.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-path-bar.tsx","content":"$66","type":"registry:component","target":"components/file-manager/parts/file-manager-path-bar.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-view-toggle.tsx","content":"$67","type":"registry:component","target":"components/file-manager/parts/file-manager-view-toggle.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-icon-size-control.tsx","content":"$68","type":"registry:component","target":"components/file-manager/parts/file-manager-icon-size-control.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-sort-menu.tsx","content":"$69","type":"registry:component","target":"components/file-manager/parts/file-manager-sort-menu.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-search-input.tsx","content":"$6a","type":"registry:component","target":"components/file-manager/parts/file-manager-search-input.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-new-buttons.tsx","content":"$6b","type":"registry:component","target":"components/file-manager/parts/file-manager-new-buttons.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-refresh-button.tsx","content":"\"use client\";\n\nimport { RefreshCw } from \"lucide-react\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { useFileManager } from \"../hooks/use-file-manager-context\";\n\nexport function FileManagerRefreshButton() {\n const { actions, state, labels, showRefresh } = useFileManager();\n if (!showRefresh) return null;\n // F-cross-13: no `asChild` — Base UI triggers reject it; the trigger IS the button, styled via buttonVariants.\n return (\n \n actions.refresh(state.currentFolderId)}\n aria-label={labels.refresh}\n >\n \n \n {labels.refresh}\n \n );\n}\n","type":"registry:component","target":"components/file-manager/parts/file-manager-refresh-button.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-content-pane.tsx","content":"$6c","type":"registry:component","target":"components/file-manager/parts/file-manager-content-pane.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-grid-view.tsx","content":"$6d","type":"registry:component","target":"components/file-manager/parts/file-manager-grid-view.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-list-view.tsx","content":"$6e","type":"registry:component","target":"components/file-manager/parts/file-manager-list-view.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-item.tsx","content":"$6f","type":"registry:component","target":"components/file-manager/parts/file-manager-item.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-rename-input.tsx","content":"$70","type":"registry:component","target":"components/file-manager/parts/file-manager-rename-input.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-context-menu.tsx","content":"$71","type":"registry:component","target":"components/file-manager/parts/file-manager-context-menu.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-status-bar.tsx","content":"\"use client\";\n\nimport { useFileManager } from \"../hooks/use-file-manager-context\";\nimport { formatBytes } from \"../lib/format\";\n\nexport function FileManagerStatusBar() {\n const { state, visibleCount, totalSize, labels } = useFileManager();\n const selectedCount = state.selectedIds.size;\n\n return (\n \n \n {visibleCount} {labels.itemCount}\n \n {selectedCount > 0 ? (\n \n {selectedCount} {labels.itemCountSelected}\n \n ) : null}\n {totalSize > 0 ? (\n \n {formatBytes(totalSize)} {labels.totalSize}\n \n ) : null}\n \n );\n}\n","type":"registry:component","target":"components/file-manager/parts/file-manager-status-bar.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-empty.tsx","content":"$72","type":"registry:component","target":"components/file-manager/parts/file-manager-empty.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-loading.tsx","content":"\"use client\";\n\nimport { useFileManager } from \"../hooks/use-file-manager-context\";\n\nexport function FileManagerLoading() {\n const { labels } = useFileManager();\n return (\n \n {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (\n

\n \n \n

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

\n \n {labels.externalDropOverlay}\n

\n \n );\n}\n","type":"registry:component","target":"components/file-manager/parts/file-manager-drag-overlay.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-delete-confirm.tsx","content":"$73","type":"registry:component","target":"components/file-manager/parts/file-manager-delete-confirm.tsx"},{"path":"src/registry/components/navigation/file-manager/parts/file-manager-marquee.tsx","content":"\"use client\";\n\nimport type { MarqueeRect } from \"../hooks/use-marquee\";\n\ninterface FileManagerMarqueeProps {\n rect: MarqueeRect | null;\n}\n\n/**\n * Visual rectangle drawn during marquee selection. Positioned absolutely\n * relative to the scroll container; consumer must place it inside a\n * `position: relative` ancestor (the content pane handles this).\n */\nexport function FileManagerMarquee(props: FileManagerMarqueeProps) {\n const { rect } = props;\n if (!rect) return null;\n return (\n \n );\n}\n","type":"registry:component","target":"components/file-manager/parts/file-manager-marquee.tsx"}],"className":"h-[70svh] min-h-80"}]]}]