@molecule/app-ide-react 1.0.0

package/dist/components/FileExplorer.js

@@ -0,0 +1,1111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tree-view file browser with multi-select, keyboard navigation, and drag-and-drop.
+ *
+ * @module
+ */
+import { getIcon } from 'material-file-icons';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { t } from '@molecule/app-i18n';
+import { useThemeMode } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { useCoarsePointer } from '../hooks/useViewport.js';
+import { FileExplorerContextMenu } from './FileExplorerContextMenu.js';
+// Git status → filename color — dark/light variants for readability
+const DARK_GIT_COLORS = {
+    modified: '#e2c08d',
+    added: '#73c991',
+    untracked: '#73c991',
+    deleted: '#c74e39',
+};
+const LIGHT_GIT_COLORS = {
+    modified: '#8a6010',
+    added: '#1a7030',
+    untracked: '#1a7030',
+    deleted: '#a03020',
+};
+// Priority order for propagating the most important status to parent directories
+const STATUS_PRIORITY = {
+    deleted: 3,
+    modified: 2,
+    added: 1,
+    untracked: 1,
+};
+/**
+ * Compute the highest-priority git status color for a directory by checking
+ * all entries in fileStatuses whose paths start with the directory path.
+ * @param dirPath - The directory path to check.
+ * @param fileStatuses - Map of file paths to git status strings.
+ * @param colors - Map of git status names to CSS color values.
+ * @returns The color string for the highest-priority child status, or undefined.
+ */
+function getDirColor(dirPath, fileStatuses, colors) {
+    let bestPriority = 0;
+    let bestStatus;
+    const prefix = dirPath + '/';
+    for (const [path, status] of Object.entries(fileStatuses)) {
+        if (path.startsWith(prefix)) {
+            const p = STATUS_PRIORITY[status] ?? 0;
+            if (p > bestPriority) {
+                bestPriority = p;
+                bestStatus = status;
+            }
+        }
+    }
+    return bestStatus ? colors[bestStatus] : undefined;
+}
+/**
+ * Loads persisted expand/collapse state from localStorage.
+ * @param persistKey - The localStorage key to read from.
+ * @returns The deserialized expand state, or a fresh empty state if none found.
+ */
+function loadExpandState(persistKey) {
+    try {
+        const raw = localStorage.getItem(persistKey);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            return { expanded: new Set(parsed.expanded), collapsed: new Set(parsed.collapsed) };
+        }
+    }
+    catch (_error) {
+        // Safe to ignore: corrupt/unparseable localStorage data — fall back to empty state
+    }
+    return { expanded: new Set(), collapsed: new Set() };
+}
+/**
+ * Persists expand/collapse state to localStorage.
+ * @param persistKey - The localStorage key to write to.
+ * @param state - The expand state to serialize and store.
+ */
+function saveExpandState(persistKey, state) {
+    try {
+        localStorage.setItem(persistKey, JSON.stringify({ expanded: [...state.expanded], collapsed: [...state.collapsed] }));
+    }
+    catch (_error) {
+        // Safe to ignore: localStorage write can fail (quota exceeded, private browsing) — expand state simply won't persist
+    }
+}
+/**
+ * Determines whether a directory path should be expanded based on persisted state.
+ * @param state - The current expand/collapse state.
+ * @param path - The directory path to check.
+ * @param depth - The nesting depth (directories at depth 0 default to expanded).
+ * @returns True if the directory should be shown expanded.
+ */
+function isExpandedFromState(state, path, depth) {
+    if (state.expanded.has(path))
+        return true;
+    if (state.collapsed.has(path))
+        return false;
+    return depth < 1;
+}
+/**
+ * Returns the ancestor directory paths for a given file path (e.g. "a/b/c.ts" → ["a", "a/b"]).
+ * @param filePath - The full file path to extract ancestors from.
+ * @returns An array of ancestor directory paths, from shallowest to deepest.
+ */
+function getAncestorPaths(filePath) {
+    const parts = filePath.split('/');
+    const ancestors = [];
+    for (let i = 1; i < parts.length; i++) {
+        ancestors.push(parts.slice(0, i).join('/'));
+    }
+    return ancestors;
+}
+/**
+ * Find a node and its depth in the file tree by path.
+ * @param nodes - The tree nodes to search through.
+ * @param targetPath - The path to find.
+ * @param depth - The current tree depth (used for recursion).
+ * @returns The matching node and its depth, or null if not found.
+ */
+function findNodeByPath(nodes, targetPath, depth = 0) {
+    for (const node of nodes) {
+        if (node.path === targetPath)
+            return { node, depth };
+        if (node.children) {
+            const found = findNodeByPath(node.children, targetPath, depth + 1);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+/**
+ * Resolve a symlink target to an absolute path relative to the symlink's parent directory.
+ * @param symlinkPath - The path of the symlink itself.
+ * @param target - The symlink's target value (relative or absolute).
+ * @returns The resolved absolute path of the symlink target.
+ */
+function resolveSymlinkTarget(symlinkPath, target) {
+    if (target.startsWith('/'))
+        return target;
+    const parentDir = symlinkPath.slice(0, symlinkPath.lastIndexOf('/'));
+    return `${parentDir}/${target}`;
+}
+/**
+ * Scroll to and briefly highlight a tree item by path.
+ * @param container - The scrollable container element.
+ * @param path - The file path to scroll to and highlight.
+ */
+function scrollAndHighlight(container, path) {
+    if (!container)
+        return;
+    const el = Array.from(container.querySelectorAll('[data-explorer-path]')).find((e) => e.dataset.explorerPath === path);
+    if (!el)
+        return;
+    el.scrollIntoView({ block: 'nearest' });
+    el.style.transition = 'background 0s';
+    el.style.background = 'rgba(128,128,128,0.25)';
+    requestAnimationFrame(() => {
+        el.style.transition = 'background 600ms ease-out';
+        el.style.background = '';
+    });
+}
+/**
+ * Sort nodes: directories first, then files, each group alphabetically.
+ * @param nodes - The nodes to sort.
+ * @returns A new sorted array.
+ */
+function sortNodes(nodes) {
+    return [...nodes].sort((a, b) => {
+        if (a.type !== b.type)
+            return a.type === 'directory' ? -1 : 1;
+        return a.name.localeCompare(b.name);
+    });
+}
+/**
+ * Flatten the file tree into a list of visible paths respecting expand/collapse state.
+ * @param nodes - The tree nodes.
+ * @param expandState - Current expand/collapse state.
+ * @param depth - Current depth (for default expansion).
+ * @returns Ordered array of visible file paths.
+ */
+function getVisibleItems(nodes, expandState, depth = 0) {
+    const result = [];
+    const sorted = sortNodes(nodes);
+    for (const node of sorted) {
+        result.push(node.path);
+        if (node.type === 'directory' &&
+            isExpandedFromState(expandState, node.path, depth) &&
+            node.children) {
+            result.push(...getVisibleItems(node.children, expandState, depth + 1));
+        }
+    }
+    return result;
+}
+/**
+ * Collect all paths in a tree (used for pruning stale selections).
+ * @param nodes - The tree nodes.
+ * @returns Set of all paths in the tree.
+ */
+function collectAllPaths(nodes) {
+    const paths = new Set();
+    for (const node of nodes) {
+        paths.add(node.path);
+        if (node.children) {
+            for (const p of collectAllPaths(node.children))
+                paths.add(p);
+        }
+    }
+    return paths;
+}
+/**
+ * Get the parent directory path of a file path.
+ * @param path - The file path.
+ * @returns The parent directory path.
+ */
+function getParentDir(path) {
+    const idx = path.lastIndexOf('/');
+    return idx > 0 ? path.slice(0, idx) : '/workspace';
+}
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+/**
+ * Chevron icon — points right when collapsed, down when expanded.
+ * @param props - Component props (see {@link FileTreeItemProps}).
+ * @returns The rendered SVG chevron icon.
+ */
+function ChevronIcon({ isOpen }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", style: {
+            display: 'block',
+            flexShrink: 0,
+            transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)',
+            transition: 'transform 100ms',
+            opacity: 0.65,
+        }, children: _jsx("polyline", { points: "6,4 10,8 6,12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * File icon resolved from material-file-icons based on the filename.
+ *
+ * Uses dangerouslySetInnerHTML to render SVG from the material-file-icons library.
+ * This is safe because the SVG content comes from a trusted static icon library,
+ * not from user input.
+ * @param props - Component props (see {@link FileTreeItemProps}).
+ * @returns The rendered file type icon element.
+ */
+function FileTypeIcon({ name }) {
+    const { svg } = getIcon(name);
+    return (_jsx("span", { style: { display: 'inline-flex', flexShrink: 0, width: '16px', height: '16px' }, dangerouslySetInnerHTML: { __html: svg } }));
+}
+// ---------------------------------------------------------------------------
+// Long-press → context menu (touch)
+// ---------------------------------------------------------------------------
+/** How long a touch must hold still before it counts as a long-press. */
+const LONG_PRESS_MS = 500;
+/** Finger drift beyond this many pixels cancels a pending long-press. */
+const LONG_PRESS_MOVE_TOLERANCE_PX = 10;
+/**
+ * Recognizes a touch long-press (~500ms hold within a ~10px radius) and invokes
+ * `onLongPress` with the press position — the same `{ x, y }` shape the
+ * `contextmenu` handlers take. iOS Safari never fires the `contextmenu` DOM
+ * event, so this is the only path to the file-explorer context menu on touch
+ * devices. Mouse pointers are ignored entirely (they right-click), so desktop
+ * behavior is untouched; pass `enabled: false` (fine pointer) to disable it.
+ * @param enabled - Whether the recognizer is active (coarse pointers only).
+ * @param onLongPress - Invoked with the press position when the hold fires.
+ * @returns Handlers to spread on the target element (see {@link LongPressHandlers}).
+ */
+function useLongPress(enabled, onLongPress) {
+    const timerRef = useRef(null);
+    const startRef = useRef(null);
+    const firedRef = useRef(false);
+    // Latest-callback ref so the timer never fires a stale closure (node/props change).
+    const onLongPressRef = useRef(onLongPress);
+    onLongPressRef.current = onLongPress;
+    const clear = useCallback(() => {
+        if (timerRef.current !== null) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        startRef.current = null;
+    }, []);
+    // Never let a pending timer fire after unmount.
+    useEffect(() => clear, [clear]);
+    const onPointerDown = useCallback((e) => {
+        // A new press always invalidates any stale "just fired" flag.
+        firedRef.current = false;
+        if (!enabled || e.pointerType === 'mouse')
+            return;
+        const { clientX, clientY } = e;
+        clear();
+        startRef.current = { x: clientX, y: clientY };
+        timerRef.current = window.setTimeout(() => {
+            timerRef.current = null;
+            firedRef.current = true;
+            onLongPressRef.current({ x: clientX, y: clientY });
+        }, LONG_PRESS_MS);
+    }, [enabled, clear]);
+    const onPointerMove = useCallback((e) => {
+        if (timerRef.current === null || !startRef.current)
+            return;
+        const dx = e.clientX - startRef.current.x;
+        const dy = e.clientY - startRef.current.y;
+        if (dx * dx + dy * dy > LONG_PRESS_MOVE_TOLERANCE_PX * LONG_PRESS_MOVE_TOLERANCE_PX) {
+            clear();
+        }
+    }, [clear]);
+    const onTouchEnd = useCallback((e) => {
+        if (firedRef.current)
+            e.preventDefault();
+    }, []);
+    const consumeFired = useCallback(() => {
+        const fired = firedRef.current;
+        firedRef.current = false;
+        return fired;
+    }, []);
+    return {
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: clear,
+        onPointerCancel: clear,
+        onTouchEnd,
+        consumeFired,
+    };
+}
+// ---------------------------------------------------------------------------
+// FileTreeItem
+// ---------------------------------------------------------------------------
+/**
+ * Max total FileTreeItems to render in a single FileExplorer pass.
+ * Prevents symlink cycles from freezing the browser without imposing
+ * any depth limit on legitimate projects.
+ */
+const MAX_RENDERED_NODES = 10_000;
+/**
+ * Recursive tree item for a single file or directory node.
+ * @param props - Component props.
+ * @returns The rendered tree item element.
+ */
+const FileTreeItem = memo(function FileTreeItem({ node, depth, isExpanded, activeFile, isSelected, isCut, isFocused, isDropTarget, onFileSelect, onFileDoubleClick, onDirExpand, onTogglePath, onSymlinkClick, onContextMenu, onItemClick, onDragStart, onDragOver, onDragLeave, onDrop, expandState, fileStatuses, gitColors, selectedPaths, clipboardPaths, clipboardOperation, renderCount, dropTargetPath, isCoarse, }) {
+    renderCount.current++;
+    const cm = getClassMap();
+    const isDir = node.type === 'directory';
+    // Load children whenever this dir is expanded but hasn't been fetched yet.
+    // `undefined` means not yet loaded; `[]` means loaded but empty — only fetch
+    // for the former to avoid infinite loops on empty/errored directories.
+    useEffect(() => {
+        if (isExpanded && isDir && node.children === undefined && onDirExpand) {
+            onDirExpand(node.path);
+        }
+    }, [isExpanded, isDir, node.children, node.path, onDirExpand]);
+    // iOS Safari never fires 'contextmenu', so on coarse pointers a ~500ms
+    // long-press opens the SAME menu the right-click path does. (The handlers
+    // returned by the hook are referentially stable across renders.)
+    const { onPointerDown: onLongPressPointerDown, onPointerMove: onLongPressPointerMove, onPointerUp: onLongPressPointerUp, onPointerCancel: onLongPressPointerCancel, onTouchEnd: onLongPressTouchEnd, consumeFired: consumeLongPressFired, } = useLongPress(isCoarse && !!onContextMenu, (position) => {
+        onContextMenu?.(position, node);
+    });
+    const handleClick = useCallback((e) => {
+        // A fired long-press must not ALSO select/open the item — the click the
+        // browser synthesizes at finger-lift is consumed here.
+        if (consumeLongPressFired())
+            return;
+        const hasModifier = e.ctrlKey || e.metaKey || e.shiftKey;
+        if (hasModifier) {
+            // Modifier clicks: pure selection, no open/toggle
+            onItemClick(node.path, { ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey });
+        }
+        else {
+            // No modifier: select single + perform action
+            onItemClick(node.path, { ctrlKey: false, metaKey: false, shiftKey: false });
+            if (node.symlinkTarget && onSymlinkClick) {
+                onSymlinkClick(node.path, node.symlinkTarget);
+            }
+            else if (isDir) {
+                onTogglePath(node.path, !isExpanded);
+            }
+            else {
+                onFileSelect(node.path);
+            }
+        }
+    }, [
+        node.path,
+        node.symlinkTarget,
+        isDir,
+        isExpanded,
+        onItemClick,
+        onFileSelect,
+        onTogglePath,
+        onSymlinkClick,
+        consumeLongPressFired,
+    ]);
+    // Directories before files, each group sorted alphabetically
+    const sortedChildren = node.children ? sortNodes(node.children) : undefined;
+    // Compute background color: dropTarget > selection > activeFile > transparent
+    let background = 'transparent';
+    if (isDropTarget) {
+        background = 'rgba(0,100,200,0.15)';
+    }
+    else if (isSelected) {
+        background = 'rgba(0,100,200,0.2)';
+    }
+    else if (node.path === activeFile) {
+        background = 'rgba(128,128,128,0.15)';
+    }
+    // Compute opacity: cut > dimmed > normal
+    let opacity = 1;
+    if (isCut) {
+        opacity = 0.4;
+    }
+    else if (node.isDimmed) {
+        opacity = 0.35;
+    }
+    return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: handleClick, onDoubleClick: () => {
+                    if (!isDir && onFileDoubleClick)
+                        onFileDoubleClick(node.path);
+                }, onContextMenu: (e) => {
+                    if (onContextMenu) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onContextMenu({ x: e.clientX, y: e.clientY }, node);
+                    }
+                }, onPointerDown: onLongPressPointerDown, onPointerMove: onLongPressPointerMove, onPointerUp: onLongPressPointerUp, onPointerCancel: onLongPressPointerCancel, onTouchEnd: onLongPressTouchEnd, 
+                // On touch devices a draggable element hijacks the long-press to start a
+                // native drag (firing pointercancel, which kills the context-menu timer),
+                // so rows are only draggable on fine pointers. Desktop drag-move is untouched.
+                draggable: !isCoarse, onDragStart: (e) => onDragStart(node.path, e), onDragOver: (e) => onDragOver(node.path, e), onDragLeave: onDragLeave, onDrop: (e) => onDrop(node.path, e), "data-explorer-path": node.path, className: cm.w('full'), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                    paddingLeft: `${depth * 12}px`,
+                    paddingTop: '1px',
+                    paddingBottom: '1px',
+                    paddingRight: '6px',
+                    // ≥36px rows on touch-first devices (the agreed floor for dense file
+                    // trees — chevron + row are then comfortably tappable); the compact
+                    // ~24px pointer row is unchanged.
+                    minHeight: isCoarse ? '36px' : undefined,
+                    // Keep the native text-selection/callout from fighting the long-press
+                    // gesture on touch devices; fine-pointer rows are untouched.
+                    WebkitUserSelect: isCoarse ? 'none' : undefined,
+                    userSelect: isCoarse ? 'none' : undefined,
+                    WebkitTouchCallout: isCoarse ? 'none' : undefined,
+                    border: 'none',
+                    background,
+                    outline: isDropTarget
+                        ? '1px solid rgba(0,100,200,0.4)'
+                        : isFocused
+                            ? '1px dotted rgba(128,128,128,0.5)'
+                            : 'none',
+                    outlineOffset: '-1px',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    opacity,
+                    fontSize: '13px',
+                    lineHeight: '22px',
+                }, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center', width: '16px', flexShrink: 0 }, children: isDir ? _jsx(ChevronIcon, { isOpen: isExpanded }) : _jsx(FileTypeIcon, { name: node.name }) }), _jsxs("span", { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            color: isDir
+                                ? fileStatuses
+                                    ? getDirColor(node.path, fileStatuses, gitColors)
+                                    : undefined
+                                : fileStatuses?.[node.path]
+                                    ? gitColors[fileStatuses[node.path]]
+                                    : undefined,
+                            opacity: node.symlinkTarget ? 0.55 : undefined,
+                        }, children: [node.name, node.symlinkTarget && ' \u2192 ' + node.symlinkTarget.split('/').pop()] })] }), isDir && isExpanded && sortedChildren && renderCount.current < MAX_RENDERED_NODES && (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("span", { style: {
+                            position: 'absolute',
+                            left: `${depth * 12 + 8}px`,
+                            top: 0,
+                            bottom: 0,
+                            width: '1px',
+                            background: 'rgba(128,128,128,0.15)',
+                            pointerEvents: 'none',
+                        } }), sortedChildren.map((child) => (_jsx(FileTreeItem, { node: child, depth: depth + 1, isExpanded: isExpandedFromState(expandState, child.path, depth + 1), activeFile: activeFile, isSelected: selectedPaths.has(child.path), isCut: clipboardOperation === 'cut' &&
+                            clipboardPaths !== null &&
+                            clipboardPaths.has(child.path), isFocused: false, isDropTarget: dropTargetPath === child.path, onFileSelect: onFileSelect, onFileDoubleClick: onFileDoubleClick, onDirExpand: onDirExpand, onTogglePath: onTogglePath, onSymlinkClick: onSymlinkClick, onContextMenu: onContextMenu, onItemClick: onItemClick, onDragStart: onDragStart, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, expandState: expandState, fileStatuses: fileStatuses, gitColors: gitColors, selectedPaths: selectedPaths, clipboardPaths: clipboardPaths, clipboardOperation: clipboardOperation, renderCount: renderCount, dropTargetPath: dropTargetPath, isCoarse: isCoarse }, child.path)))] }))] }));
+});
+// ---------------------------------------------------------------------------
+// FileExplorer
+// ---------------------------------------------------------------------------
+/**
+ * Tree-view file explorer component with multi-select, keyboard navigation, and drag-and-drop.
+ * @param props - Component props (see {@link FileTreeItemProps}).
+ * @returns The rendered file explorer element.
+ */
+export function FileExplorer({ files, onFileSelect, onFileDoubleClick, onDirExpand, onRename, onDelete, onDeleteMultiple, onMoveFiles, onNewFile, onNewFolder, onCollapseAll, className, persistKey, activeFile, fileStatuses, }) {
+    const cm = getClassMap();
+    const gitColors = useThemeMode() === 'light' ? LIGHT_GIT_COLORS : DARK_GIT_COLORS;
+    const isCoarse = useCoarsePointer();
+    const containerRef = useRef(null);
+    // When set, the next render after DOM update will scroll this path into view
+    const scrollTargetRef = useRef(null);
+    // When set, briefly flash a highlight on this path after scrolling
+    const highlightTargetRef = useRef(null);
+    const [expandState, setExpandState] = useState(() => persistKey ? loadExpandState(persistKey) : { expanded: new Set(), collapsed: new Set() });
+    // ---------------------------------------------------------------------------
+    // Selection state
+    // ---------------------------------------------------------------------------
+    const [selectedPaths, setSelectedPaths] = useState(new Set());
+    const [lastClickedPath, setLastClickedPath] = useState(null);
+    const [focusedPath, setFocusedPath] = useState(null);
+    // Clipboard for cut/copy (internal)
+    const [clipboard, setClipboard] = useState(null);
+    // Drag-and-drop state
+    const [draggedPaths, setDraggedPaths] = useState(null);
+    const [dropTargetPath, setDropTargetPath] = useState(null);
+    // Memoized visible items list — used for shift-click range and keyboard nav
+    const visibleItems = useMemo(() => getVisibleItems(files, expandState), [files, expandState]);
+    // Prune stale selections when the file tree changes
+    useEffect(() => {
+        const treePaths = collectAllPaths(files);
+        setSelectedPaths((prev) => {
+            const next = new Set();
+            for (const p of prev) {
+                if (treePaths.has(p))
+                    next.add(p);
+            }
+            return next.size === prev.size ? prev : next;
+        });
+    }, [files]);
+    // When activeFile changes, expand all ancestor directories and queue a scroll
+    useEffect(() => {
+        if (!activeFile)
+            return;
+        const ancestors = getAncestorPaths(activeFile);
+        if (ancestors.length > 0) {
+            setExpandState((prev) => {
+                const needsUpdate = ancestors.some((p) => !prev.expanded.has(p));
+                if (!needsUpdate)
+                    return prev;
+                const next = {
+                    expanded: new Set(prev.expanded),
+                    collapsed: new Set(prev.collapsed),
+                };
+                for (const ancestor of ancestors) {
+                    next.expanded.add(ancestor);
+                    next.collapsed.delete(ancestor);
+                }
+                if (persistKey)
+                    saveExpandState(persistKey, next);
+                return next;
+            });
+        }
+        scrollTargetRef.current = activeFile;
+    }, [activeFile, persistKey]);
+    // After every render, attempt the pending scroll (retries until element is in the DOM)
+    useEffect(() => {
+        if (!scrollTargetRef.current || !containerRef.current)
+            return;
+        const target = scrollTargetRef.current;
+        const shouldHighlight = highlightTargetRef.current === target;
+        const el = Array.from(containerRef.current.querySelectorAll('[data-explorer-path]')).find((e) => e.dataset.explorerPath === target);
+        if (el) {
+            scrollTargetRef.current = null;
+            if (shouldHighlight) {
+                highlightTargetRef.current = null;
+                scrollAndHighlight(containerRef.current, target);
+            }
+            else {
+                el.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    });
+    const handleTogglePath = useCallback((path, nowExpanded) => {
+        setExpandState((prev) => {
+            const next = {
+                expanded: new Set(prev.expanded),
+                collapsed: new Set(prev.collapsed),
+            };
+            if (nowExpanded) {
+                next.expanded.add(path);
+                next.collapsed.delete(path);
+            }
+            else {
+                next.collapsed.add(path);
+                next.expanded.delete(path);
+            }
+            if (persistKey)
+                saveExpandState(persistKey, next);
+            return next;
+        });
+    }, [persistKey]);
+    const handleSymlinkClick = useCallback((symlinkPath, target) => {
+        const resolvedPath = resolveSymlinkTarget(symlinkPath, target);
+        const found = findNodeByPath(files, resolvedPath);
+        if (found && found.node.type === 'directory') {
+            // Ensure ancestors are expanded so the target is visible
+            const ancestors = getAncestorPaths(resolvedPath);
+            setExpandState((prev) => {
+                const needsUpdate = ancestors.some((p) => !prev.expanded.has(p));
+                if (!needsUpdate) {
+                    // Already visible — scroll and highlight directly
+                    scrollAndHighlight(containerRef.current, resolvedPath);
+                    return prev;
+                }
+                const next = {
+                    expanded: new Set(prev.expanded),
+                    collapsed: new Set(prev.collapsed),
+                };
+                for (const a of ancestors) {
+                    next.expanded.add(a);
+                    next.collapsed.delete(a);
+                }
+                if (persistKey)
+                    saveExpandState(persistKey, next);
+                return next;
+            });
+            scrollTargetRef.current = resolvedPath;
+            highlightTargetRef.current = resolvedPath;
+        }
+        else {
+            // File symlink (or target not in tree) — select the real file
+            onFileSelect(resolvedPath);
+        }
+    }, [files, persistKey, onFileSelect]);
+    // ---------------------------------------------------------------------------
+    // Selection click handler
+    // ---------------------------------------------------------------------------
+    const handleItemClick = useCallback((path, modifiers) => {
+        const isToggle = modifiers.ctrlKey || modifiers.metaKey;
+        if (modifiers.shiftKey && lastClickedPath) {
+            // Shift+Click: range select
+            const startIdx = visibleItems.indexOf(lastClickedPath);
+            const endIdx = visibleItems.indexOf(path);
+            if (startIdx !== -1 && endIdx !== -1) {
+                const lo = Math.min(startIdx, endIdx);
+                const hi = Math.max(startIdx, endIdx);
+                const range = new Set(visibleItems.slice(lo, hi + 1));
+                // When shift is combined with ctrl/cmd, add to existing selection
+                if (isToggle) {
+                    setSelectedPaths((prev) => {
+                        const next = new Set(prev);
+                        for (const p of range)
+                            next.add(p);
+                        return next;
+                    });
+                }
+                else {
+                    setSelectedPaths(range);
+                }
+            }
+            setFocusedPath(path);
+            // Don't update lastClickedPath on shift-click to preserve the anchor
+        }
+        else if (isToggle) {
+            // Ctrl/Cmd+Click: toggle single item
+            setSelectedPaths((prev) => {
+                const next = new Set(prev);
+                if (next.has(path)) {
+                    next.delete(path);
+                }
+                else {
+                    next.add(path);
+                }
+                return next;
+            });
+            setLastClickedPath(path);
+            setFocusedPath(path);
+        }
+        else {
+            // Plain click: select single
+            setSelectedPaths(new Set([path]));
+            setLastClickedPath(path);
+            setFocusedPath(path);
+        }
+    }, [lastClickedPath, visibleItems]);
+    // ---------------------------------------------------------------------------
+    // Context menu
+    // ---------------------------------------------------------------------------
+    const [contextMenu, setContextMenu] = useState(null);
+    const handleItemContextMenu = useCallback((position, node) => {
+        // If right-clicked item is already selected, keep multi-selection
+        if (!selectedPaths.has(node.path)) {
+            setSelectedPaths(new Set([node.path]));
+            setLastClickedPath(node.path);
+        }
+        setFocusedPath(node.path);
+        setContextMenu({ position, node });
+    }, [selectedPaths]);
+    // Shared by right-click AND touch long-press — the long-press path has no
+    // MouseEvent to hand over, only a position, so the opener takes the position.
+    const openBackgroundContextMenu = useCallback((position) => {
+        setSelectedPaths(new Set());
+        setContextMenu({ position, node: null });
+    }, []);
+    const handleBackgroundContextMenu = useCallback((e) => {
+        e.preventDefault();
+        openBackgroundContextMenu({ x: e.clientX, y: e.clientY });
+    }, [openBackgroundContextMenu]);
+    // Touch path to the background menu (New File / New Folder / Collapse All) —
+    // iOS Safari never fires 'contextmenu', so a long-press on the empty tree
+    // area opens it instead. Presses that start on a row are excluded at the
+    // container's onPointerDown (the row recognizer owns those).
+    const backgroundLongPress = useLongPress(isCoarse, openBackgroundContextMenu);
+    const handleCloseContextMenu = useCallback(() => {
+        setContextMenu(null);
+    }, []);
+    const handleCollapseAll = useCallback(() => {
+        setExpandState({ expanded: new Set(), collapsed: new Set(['__all_collapsed__']) });
+        if (persistKey)
+            saveExpandState(persistKey, {
+                expanded: new Set(),
+                collapsed: new Set(['__all_collapsed__']),
+            });
+        onCollapseAll?.();
+    }, [persistKey, onCollapseAll]);
+    /**
+     * Execute a paste operation: move clipboard items to the target directory.
+     * @param targetDir - The directory to move items into.
+     */
+    const executePaste = useCallback((targetDir) => {
+        if (!clipboard || clipboard.operation !== 'cut')
+            return;
+        const moves = [];
+        for (const oldPath of clipboard.paths) {
+            const fileName = oldPath.split('/').pop();
+            const newPath = `${targetDir}/${fileName}`;
+            if (newPath !== oldPath) {
+                moves.push({ oldPath, newPath });
+            }
+        }
+        if (moves.length > 0)
+            onMoveFiles?.(moves);
+        setClipboard(null);
+        setSelectedPaths(new Set());
+    }, [clipboard, onMoveFiles]);
+    const handleContextMenuAction = useCallback((action) => {
+        const node = contextMenu?.node;
+        switch (action) {
+            case 'open':
+                if (node)
+                    onFileSelect(node.path);
+                break;
+            case 'rename':
+                if (node)
+                    onRename?.(node.path);
+                break;
+            case 'delete':
+                if (node)
+                    onDelete?.(node.path);
+                break;
+            case 'deleteMultiple':
+                if (selectedPaths.size > 0)
+                    onDeleteMultiple?.(Array.from(selectedPaths));
+                break;
+            case 'newFile': {
+                const dir = node?.type === 'directory' ? node.path : '/workspace';
+                onNewFile?.(dir);
+                break;
+            }
+            case 'newFolder': {
+                const dir = node?.type === 'directory' ? node.path : '/workspace';
+                onNewFolder?.(dir);
+                break;
+            }
+            case 'copyPath':
+                if (node)
+                    navigator.clipboard.writeText(node.path).catch(() => { });
+                break;
+            case 'copyPaths': {
+                const paths = Array.from(selectedPaths).join('\n');
+                navigator.clipboard.writeText(paths).catch(() => { });
+                break;
+            }
+            case 'copyRelativePath':
+                if (node) {
+                    const rel = node.path.replace(/^\/workspace\//, '');
+                    navigator.clipboard.writeText(rel).catch(() => { });
+                }
+                break;
+            case 'copyRelativePaths': {
+                const rels = Array.from(selectedPaths)
+                    .map((p) => p.replace(/^\/workspace\//, ''))
+                    .join('\n');
+                navigator.clipboard.writeText(rels).catch(() => { });
+                break;
+            }
+            case 'cut':
+                if (selectedPaths.size > 0) {
+                    setClipboard({ paths: new Set(selectedPaths), operation: 'cut' });
+                    navigator.clipboard.writeText(Array.from(selectedPaths).join('\n')).catch(() => { });
+                }
+                break;
+            case 'paste': {
+                // Paste into the right-clicked directory, or the directory of the right-clicked file
+                const targetDir = node
+                    ? node.type === 'directory'
+                        ? node.path
+                        : getParentDir(node.path)
+                    : '/workspace';
+                executePaste(targetDir);
+                break;
+            }
+            case 'collapseAll':
+                handleCollapseAll();
+                break;
+        }
+    }, [
+        contextMenu,
+        selectedPaths,
+        onFileSelect,
+        onRename,
+        onDelete,
+        onDeleteMultiple,
+        onNewFile,
+        onNewFolder,
+        handleCollapseAll,
+        executePaste,
+    ]);
+    // ---------------------------------------------------------------------------
+    // Keyboard navigation
+    // ---------------------------------------------------------------------------
+    const handleTreeKeyDown = useCallback((e) => {
+        const isMod = e.metaKey || e.ctrlKey;
+        // Navigate up/down
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const currentIdx = focusedPath ? visibleItems.indexOf(focusedPath) : -1;
+            const nextIdx = e.key === 'ArrowDown'
+                ? Math.min(currentIdx + 1, visibleItems.length - 1)
+                : Math.max(currentIdx - 1, 0);
+            if (nextIdx < 0 || nextIdx >= visibleItems.length)
+                return;
+            const nextPath = visibleItems[nextIdx];
+            setFocusedPath(nextPath);
+            if (e.shiftKey) {
+                // Shift+Arrow: extend selection
+                setSelectedPaths((prev) => {
+                    const next = new Set(prev);
+                    next.add(nextPath);
+                    return next;
+                });
+            }
+            else if (!isMod) {
+                setSelectedPaths(new Set([nextPath]));
+                setLastClickedPath(nextPath);
+            }
+            // Scroll focused item into view
+            if (containerRef.current) {
+                const el = containerRef.current.querySelector(`[data-explorer-path="${CSS.escape(nextPath)}"]`);
+                el?.scrollIntoView({ block: 'nearest' });
+            }
+            return;
+        }
+        // Expand directory / move to first child
+        if (e.key === 'ArrowRight' && focusedPath) {
+            e.preventDefault();
+            const found = findNodeByPath(files, focusedPath);
+            if (found?.node.type === 'directory') {
+                if (!isExpandedFromState(expandState, focusedPath, found.depth)) {
+                    handleTogglePath(focusedPath, true);
+                }
+                else if (found.node.children && found.node.children.length > 0) {
+                    const sorted = sortNodes(found.node.children);
+                    setFocusedPath(sorted[0].path);
+                    setSelectedPaths(new Set([sorted[0].path]));
+                    setLastClickedPath(sorted[0].path);
+                }
+            }
+            return;
+        }
+        // Collapse directory / move to parent
+        if (e.key === 'ArrowLeft' && focusedPath) {
+            e.preventDefault();
+            const found = findNodeByPath(files, focusedPath);
+            if (found?.node.type === 'directory' &&
+                isExpandedFromState(expandState, focusedPath, found.depth)) {
+                handleTogglePath(focusedPath, false);
+            }
+            else {
+                const parent = getParentDir(focusedPath);
+                if (parent !== '/workspace' && parent.startsWith('/workspace')) {
+                    setFocusedPath(parent);
+                    setSelectedPaths(new Set([parent]));
+                    setLastClickedPath(parent);
+                }
+            }
+            return;
+        }
+        // Enter: open file / toggle directory
+        if (e.key === 'Enter' && focusedPath) {
+            e.preventDefault();
+            const found = findNodeByPath(files, focusedPath);
+            if (found?.node.type === 'directory') {
+                handleTogglePath(focusedPath, !isExpandedFromState(expandState, focusedPath, found.depth));
+            }
+            else {
+                onFileSelect(focusedPath);
+            }
+            return;
+        }
+        // Space: toggle selection on focused item
+        if (e.key === ' ' && focusedPath) {
+            e.preventDefault();
+            setSelectedPaths((prev) => {
+                const next = new Set(prev);
+                if (next.has(focusedPath)) {
+                    next.delete(focusedPath);
+                }
+                else {
+                    next.add(focusedPath);
+                }
+                return next;
+            });
+            return;
+        }
+        // Delete/Backspace: delete selected
+        if ((e.key === 'Delete' || e.key === 'Backspace') && selectedPaths.size > 0) {
+            e.preventDefault();
+            if (selectedPaths.size === 1) {
+                onDelete?.(Array.from(selectedPaths)[0]);
+            }
+            else {
+                onDeleteMultiple?.(Array.from(selectedPaths));
+            }
+            return;
+        }
+        // F2: rename (single selection only)
+        if (e.key === 'F2' && selectedPaths.size === 1) {
+            e.preventDefault();
+            onRename?.(Array.from(selectedPaths)[0]);
+            return;
+        }
+        // Escape: clear selection + clipboard
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setSelectedPaths(new Set());
+            setClipboard(null);
+            setFocusedPath(null);
+            return;
+        }
+        // Ctrl/Cmd+A: select all visible
+        if (isMod && e.key === 'a') {
+            e.preventDefault();
+            setSelectedPaths(new Set(visibleItems));
+            return;
+        }
+        // Ctrl/Cmd+C: copy paths
+        if (isMod && e.key === 'c' && selectedPaths.size > 0) {
+            e.preventDefault();
+            const paths = Array.from(selectedPaths).join('\n');
+            navigator.clipboard.writeText(paths).catch(() => { });
+            setClipboard({ paths: new Set(selectedPaths), operation: 'copy' });
+            return;
+        }
+        // Ctrl/Cmd+X: cut
+        if (isMod && e.key === 'x' && selectedPaths.size > 0) {
+            e.preventDefault();
+            setClipboard({ paths: new Set(selectedPaths), operation: 'cut' });
+            navigator.clipboard.writeText(Array.from(selectedPaths).join('\n')).catch(() => { });
+            return;
+        }
+        // Ctrl/Cmd+V: paste (move cut items to focused directory)
+        if (isMod && e.key === 'v' && clipboard?.operation === 'cut') {
+            e.preventDefault();
+            let targetDir = '/workspace';
+            if (focusedPath) {
+                const found = findNodeByPath(files, focusedPath);
+                targetDir = found?.node.type === 'directory' ? focusedPath : getParentDir(focusedPath);
+            }
+            executePaste(targetDir);
+            return;
+        }
+    }, [
+        focusedPath,
+        visibleItems,
+        files,
+        expandState,
+        selectedPaths,
+        clipboard,
+        handleTogglePath,
+        onFileSelect,
+        onDelete,
+        onDeleteMultiple,
+        onRename,
+        executePaste,
+    ]);
+    // ---------------------------------------------------------------------------
+    // Drag and drop
+    // ---------------------------------------------------------------------------
+    const handleDragStart = useCallback((path, e) => {
+        let paths;
+        if (selectedPaths.has(path)) {
+            paths = new Set(selectedPaths);
+        }
+        else {
+            // Dragging unselected item — select it alone
+            paths = new Set([path]);
+            setSelectedPaths(paths);
+        }
+        setDraggedPaths(paths);
+        e.dataTransfer.setData('text/plain', [...paths].join('\n'));
+        e.dataTransfer.effectAllowed = 'move';
+        // Custom drag image
+        const badge = document.createElement('div');
+        badge.textContent = paths.size === 1 ? (path.split('/').pop() ?? '') : `${paths.size} items`;
+        badge.style.cssText =
+            'padding:4px 8px;background:#2a6fc9;color:#fff;border-radius:4px;font-size:12px;position:absolute;top:-1000px';
+        document.body.appendChild(badge);
+        e.dataTransfer.setDragImage(badge, 0, 0);
+        requestAnimationFrame(() => {
+            if (badge.parentNode)
+                document.body.removeChild(badge);
+        });
+    }, [selectedPaths]);
+    const handleDragOver = useCallback((path, e) => {
+        if (!draggedPaths)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        // Resolve drop target to a directory
+        const found = findNodeByPath(files, path);
+        const targetDir = found?.node.type === 'directory' ? path : getParentDir(path);
+        // Validate: cannot drop into self or descendant of any dragged path
+        for (const dragPath of draggedPaths) {
+            if (targetDir === dragPath || targetDir.startsWith(dragPath + '/')) {
+                e.dataTransfer.dropEffect = 'none';
+                setDropTargetPath(null);
+                return;
+            }
+        }
+        e.dataTransfer.dropEffect = 'move';
+        setDropTargetPath(targetDir);
+    }, [draggedPaths, files]);
+    const handleItemDragLeave = useCallback((e) => {
+        // Only clear if we're truly leaving (not entering a child element)
+        const related = e.relatedTarget;
+        if (containerRef.current && related && containerRef.current.contains(related))
+            return;
+        setDropTargetPath(null);
+    }, []);
+    const handleDrop = useCallback((path, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!draggedPaths || draggedPaths.size === 0) {
+            setDraggedPaths(null);
+            setDropTargetPath(null);
+            return;
+        }
+        const found = findNodeByPath(files, path);
+        const targetDir = found?.node.type === 'directory' ? path : getParentDir(path);
+        const moves = [];
+        for (const oldPath of draggedPaths) {
+            const fileName = oldPath.split('/').pop();
+            const newPath = `${targetDir}/${fileName}`;
+            if (newPath !== oldPath) {
+                moves.push({ oldPath, newPath });
+            }
+        }
+        if (moves.length > 0)
+            onMoveFiles?.(moves);
+        setDraggedPaths(null);
+        setDropTargetPath(null);
+        setSelectedPaths(new Set());
+    }, [draggedPaths, files, onMoveFiles]);
+    const handleBackgroundDragOver = useCallback((e) => {
+        if (!draggedPaths)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setDropTargetPath('/workspace');
+    }, [draggedPaths]);
+    const handleBackgroundDrop = useCallback((e) => {
+        e.preventDefault();
+        if (!draggedPaths || draggedPaths.size === 0) {
+            setDraggedPaths(null);
+            setDropTargetPath(null);
+            return;
+        }
+        const moves = [];
+        for (const oldPath of draggedPaths) {
+            const fileName = oldPath.split('/').pop();
+            const newPath = `/workspace/${fileName}`;
+            if (newPath !== oldPath) {
+                moves.push({ oldPath, newPath });
+            }
+        }
+        if (moves.length > 0)
+            onMoveFiles?.(moves);
+        setDraggedPaths(null);
+        setDropTargetPath(null);
+        setSelectedPaths(new Set());
+    }, [draggedPaths, onMoveFiles]);
+    const handleDragEnd = useCallback(() => {
+        setDraggedPaths(null);
+        setDropTargetPath(null);
+    }, []);
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    // Sort root-level entries: directories first, then files, alphabetically
+    const sortedFiles = sortNodes(files);
+    // Shared mutable counter — reset each render, incremented by each FileTreeItem.
+    // Prevents symlink cycles from freezing the browser by capping total rendered nodes.
+    const renderCountRef = useRef({ current: 0 });
+    renderCountRef.current.current = 0;
+    return (_jsxs("div", { ref: containerRef, className: cm.cn(cm.sp('py', 1), cm.sp('pl', 1), className), style: { overflowY: 'auto', outline: 'none' }, role: "tree", tabIndex: 0, onKeyDown: handleTreeKeyDown, onContextMenu: handleBackgroundContextMenu, onPointerDown: (e) => {
+            // Row presses bubble here too — those belong to the row's own
+            // long-press recognizer, so only arm the background one for presses
+            // that start on the empty tree area.
+            if (e.target.closest('[data-explorer-path]'))
+                return;
+            backgroundLongPress.onPointerDown(e);
+        }, onPointerMove: backgroundLongPress.onPointerMove, onPointerUp: backgroundLongPress.onPointerUp, onPointerCancel: backgroundLongPress.onPointerCancel, onTouchEnd: backgroundLongPress.onTouchEnd, onDragOver: handleBackgroundDragOver, onDrop: handleBackgroundDrop, onDragEnd: handleDragEnd, children: [files.length === 0 && (_jsx("div", { className: cm.cn(cm.textMuted, cm.textSize('sm'), cm.sp('p', 3)), children: t('ide.files.empty') })), sortedFiles.map((node) => (_jsx(FileTreeItem, { node: node, depth: 0, isExpanded: isExpandedFromState(expandState, node.path, 0), activeFile: activeFile, isSelected: selectedPaths.has(node.path), isCut: clipboard?.operation === 'cut' && clipboard.paths.has(node.path), isFocused: focusedPath === node.path, isDropTarget: dropTargetPath === node.path, onFileSelect: onFileSelect, onFileDoubleClick: onFileDoubleClick, onDirExpand: onDirExpand, onTogglePath: handleTogglePath, onSymlinkClick: handleSymlinkClick, onContextMenu: handleItemContextMenu, onItemClick: handleItemClick, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragLeave: handleItemDragLeave, onDrop: handleDrop, expandState: expandState, fileStatuses: fileStatuses, gitColors: gitColors, selectedPaths: selectedPaths, clipboardPaths: clipboard?.paths ?? null, clipboardOperation: clipboard?.operation ?? null, renderCount: renderCountRef.current, dropTargetPath: dropTargetPath, isCoarse: isCoarse }, node.path))), contextMenu && (_jsx(FileExplorerContextMenu, { position: contextMenu.position, node: contextMenu.node, selectedCount: selectedPaths.size, canPaste: clipboard?.operation === 'cut' && clipboard.paths.size > 0, onAction: handleContextMenuAction, onClose: handleCloseContextMenu }))] }));
+}
+FileExplorer.displayName = 'FileExplorer';
+//# sourceMappingURL=FileExplorer.js.map