dmux 5.4.0 → 5.5.0

package/dist/FileBrowserApp.js

@@ -0,0 +1,693 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import stringWidth from 'string-width';
+import path from 'path';
+import { spawn } from 'child_process';
+import { buildBrowserSearchEntries, buildBrowserTree, computeModifiedTimes, flattenBrowserTree, getAncestorPaths, getCurrentDirectoryPath, getStatusColor, loadBrowserSnapshot, loadCodePreview, loadDiffPreview, } from './utils/fileBrowser.js';
+import { POPUP_CONFIG } from './components/popups/config.js';
+import { COLORS } from './theme/colors.js';
+const SORT_OPTIONS = [
+    { id: 'sort-name', label: 'Sort by name', description: 'Alphabetical tree order' },
+    { id: 'sort-modified', label: 'Sort by modified time', description: 'Recently touched files first' },
+    { id: 'sort-status', label: 'Sort by git status', description: 'Changed files first' },
+    { id: 'filter-all', label: 'Show all files', description: 'Tracked and untracked files' },
+    { id: 'filter-diffed', label: 'Show changed files only', description: 'Only files with git changes' },
+];
+function clipToWidth(value, maxWidth) {
+    if (maxWidth <= 0 || stringWidth(value) <= maxWidth) {
+        return maxWidth <= 0 ? '' : value;
+    }
+    let clipped = '';
+    let width = 0;
+    for (const char of value) {
+        const charWidth = stringWidth(char);
+        if (width + charWidth > Math.max(1, maxWidth - 1)) {
+            break;
+        }
+        clipped += char;
+        width += charWidth;
+    }
+    return `${clipped}…`;
+}
+function clipFromLeft(value, maxWidth) {
+    if (maxWidth <= 0 || stringWidth(value) <= maxWidth) {
+        return maxWidth <= 0 ? '' : value;
+    }
+    const ellipsis = '…';
+    let clipped = '';
+    for (const char of Array.from(value).reverse()) {
+        if (stringWidth(`${ellipsis}${clipped}`) + stringWidth(char) > maxWidth) {
+            break;
+        }
+        clipped = `${char}${clipped}`;
+    }
+    return `${ellipsis}${clipped}`;
+}
+function clipPathToWidth(value, maxWidth) {
+    if (maxWidth <= 0 || stringWidth(value) <= maxWidth) {
+        return maxWidth <= 0 ? '' : value;
+    }
+    const segments = value.split('/');
+    let visibleTail = segments.pop() || value;
+    while (segments.length > 0) {
+        const candidate = `${segments[segments.length - 1]}/${visibleTail}`;
+        if (stringWidth(`…/${candidate}`) > maxWidth) {
+            break;
+        }
+        visibleTail = candidate;
+        segments.pop();
+    }
+    const prefixed = `…/${visibleTail}`;
+    if (stringWidth(prefixed) <= maxWidth) {
+        return prefixed;
+    }
+    return clipFromLeft(value, maxWidth);
+}
+function getVisibleRange(selectedIndex, totalItems, maxVisible) {
+    if (totalItems <= maxVisible) {
+        return { start: 0, end: totalItems };
+    }
+    const half = Math.floor(maxVisible / 2);
+    let start = Math.max(0, selectedIndex - half);
+    let end = Math.min(totalItems, start + maxVisible);
+    if (end - start < maxVisible) {
+        start = Math.max(0, end - maxVisible);
+    }
+    return { start, end };
+}
+function getTrailingRowCount(totalRows, renderedRows) {
+    return Math.max(0, totalRows - renderedRows);
+}
+function renderSingleLine(value) {
+    return value.length > 0 ? value : ' ';
+}
+function readTerminalSize(stdout) {
+    return {
+        columns: process.stdout.columns ?? stdout?.columns ?? 120,
+        rows: process.stdout.rows ?? stdout?.rows ?? 40,
+    };
+}
+function openInSystem(targetPath) {
+    return new Promise((resolve, reject) => {
+        let command = '';
+        let args = [];
+        if (process.platform === 'darwin') {
+            command = 'open';
+            args = [targetPath];
+        }
+        else if (process.platform === 'win32') {
+            command = 'cmd';
+            args = ['/c', 'start', '', targetPath];
+        }
+        else {
+            command = 'xdg-open';
+            args = [targetPath];
+        }
+        const child = spawn(command, args, {
+            detached: true,
+            stdio: 'ignore',
+        });
+        child.once('error', reject);
+        child.once('spawn', resolve);
+        child.unref();
+    });
+}
+function getSortOptionIndex(sortMode, filterMode) {
+    if (filterMode === 'diffed') {
+        return SORT_OPTIONS.findIndex((option) => option.id === 'filter-diffed');
+    }
+    return SORT_OPTIONS.findIndex((option) => option.id === `sort-${sortMode}`);
+}
+function isFilterTypingInput(input, key) {
+    if (!input) {
+        return false;
+    }
+    if (key.ctrl || key.meta || key.return || key.tab || key.escape) {
+        return false;
+    }
+    if (key.upArrow
+        || key.downArrow
+        || key.leftArrow
+        || key.rightArrow
+        || key.pageUp
+        || key.pageDown) {
+        return false;
+    }
+    return true;
+}
+function getSearchEntryIcon(entry) {
+    if (entry.type === 'directory') {
+        return '';
+    }
+    return '';
+}
+function getSearchEntryColor(entry) {
+    if (!entry.exists) {
+        return COLORS.error;
+    }
+    if (entry.type === 'directory') {
+        return 'blue';
+    }
+    return 'white';
+}
+const FileBrowserApp = () => {
+    const rootPath = process.cwd();
+    const projectLabel = path.basename(rootPath);
+    const { stdout } = useStdout();
+    const [terminalSize, setTerminalSize] = useState(() => readTerminalSize(stdout));
+    const terminalHeight = terminalSize.rows;
+    const terminalWidth = terminalSize.columns;
+    const [snapshot, setSnapshot] = useState(() => loadBrowserSnapshot(rootPath));
+    const [sortMode, setSortMode] = useState('name');
+    const [filterMode, setFilterMode] = useState('all');
+    const [filterQuery, setFilterQuery] = useState('');
+    const [listFocused, setListFocused] = useState(false);
+    const [expandedPaths, setExpandedPaths] = useState(() => new Set());
+    const [selectedPath, setSelectedPath] = useState(null);
+    const [sortMenuOpen, setSortMenuOpen] = useState(false);
+    const [sortMenuIndex, setSortMenuIndex] = useState(() => getSortOptionIndex('name', 'all'));
+    const [viewerPath, setViewerPath] = useState(null);
+    const [viewerMode, setViewerMode] = useState('code');
+    const [viewerScroll, setViewerScroll] = useState(0);
+    const [statusMessage, setStatusMessage] = useState('');
+    const [modifiedTimes, setModifiedTimes] = useState(null);
+    useEffect(() => {
+        if (!statusMessage) {
+            return;
+        }
+        const timer = setTimeout(() => setStatusMessage(''), 2500);
+        return () => clearTimeout(timer);
+    }, [statusMessage]);
+    useEffect(() => {
+        const refreshTerminalSize = () => {
+            setTerminalSize((current) => {
+                const next = readTerminalSize(stdout);
+                if (current.columns === next.columns && current.rows === next.rows) {
+                    return current;
+                }
+                return next;
+            });
+        };
+        // A freshly split tmux pane can report a transient width on first paint.
+        // Refresh once immediately and again shortly after mount to pick up the final size
+        // without waiting for user input.
+        refreshTerminalSize();
+        const refreshTimers = [16, 80, 180].map((delay) => setTimeout(refreshTerminalSize, delay));
+        process.stdout.on('resize', refreshTerminalSize);
+        return () => {
+            refreshTimers.forEach((timer) => clearTimeout(timer));
+            process.stdout.off('resize', refreshTerminalSize);
+        };
+    }, [stdout]);
+    const filterActive = filterQuery.trim().length > 0;
+    const treeNodes = useMemo(() => buildBrowserTree(snapshot, {
+        sortMode,
+        filterMode,
+        modifiedTimes: sortMode === 'modified' ? modifiedTimes || undefined : undefined,
+        filterQuery: '',
+        activePath: viewerPath || selectedPath,
+    }), [snapshot, sortMode, filterMode, modifiedTimes, viewerPath, selectedPath]);
+    const visibleEntries = useMemo(() => {
+        if (filterActive) {
+            return buildBrowserSearchEntries(snapshot, {
+                sortMode,
+                filterMode,
+                modifiedTimes: sortMode === 'modified' ? modifiedTimes || undefined : undefined,
+                filterQuery,
+                activePath: viewerPath || selectedPath,
+            });
+        }
+        return flattenBrowserTree(treeNodes, expandedPaths);
+    }, [
+        filterActive,
+        snapshot,
+        sortMode,
+        filterMode,
+        modifiedTimes,
+        filterQuery,
+        viewerPath,
+        selectedPath,
+        treeNodes,
+        expandedPaths,
+    ]);
+    const entryByPath = useMemo(() => new Map(visibleEntries.map((entry) => [entry.path, entry])), [visibleEntries]);
+    useEffect(() => {
+        if (visibleEntries.length === 0) {
+            setSelectedPath(null);
+            setListFocused(false);
+            return;
+        }
+        if (!selectedPath || !entryByPath.has(selectedPath)) {
+            setSelectedPath(visibleEntries[0].path);
+        }
+    }, [visibleEntries, selectedPath, entryByPath]);
+    const selectedIndex = selectedPath
+        ? Math.max(0, visibleEntries.findIndex((entry) => entry.path === selectedPath))
+        : 0;
+    const selectedEntry = visibleEntries[selectedIndex];
+    const viewerFile = useMemo(() => snapshot.files.find((file) => file.path === viewerPath), [snapshot, viewerPath]);
+    const previewLines = useMemo(() => {
+        if (!viewerPath) {
+            return [];
+        }
+        if (viewerMode === 'diff') {
+            return loadDiffPreview(rootPath, viewerPath, viewerFile?.statusLabel || '');
+        }
+        return loadCodePreview(rootPath, viewerPath);
+    }, [rootPath, viewerPath, viewerMode, viewerFile?.statusLabel]);
+    const headerRows = 2;
+    const searchRows = 3;
+    const footerRows = 2;
+    const contentBoxHeight = Math.max(10, terminalHeight - headerRows - searchRows - footerRows);
+    const contentRows = Math.max(6, contentBoxHeight);
+    const listBodyRows = Math.max(1, contentRows - 1);
+    const viewerBodyRows = Math.max(4, contentRows - 2);
+    const currentViewerMaxOffset = Math.max(0, previewLines.length - viewerBodyRows);
+    useEffect(() => {
+        setViewerScroll((current) => Math.min(current, currentViewerMaxOffset));
+    }, [currentViewerMaxOffset]);
+    const refreshSnapshot = () => {
+        const nextSnapshot = loadBrowserSnapshot(rootPath);
+        setSnapshot(nextSnapshot);
+        if (sortMode === 'modified') {
+            setModifiedTimes(computeModifiedTimes(rootPath, nextSnapshot.files.map((file) => file.path)));
+        }
+        else {
+            setModifiedTimes(null);
+        }
+        setStatusMessage('Refreshed');
+    };
+    const ensureModifiedSortData = (nextSnapshot = snapshot) => {
+        if (modifiedTimes) {
+            return modifiedTimes;
+        }
+        const nextTimes = computeModifiedTimes(rootPath, nextSnapshot.files.map((file) => file.path));
+        setModifiedTimes(nextTimes);
+        return nextTimes;
+    };
+    const selectPathAndExpand = (nextPath) => {
+        const ancestors = getAncestorPaths(nextPath);
+        setExpandedPaths((current) => {
+            const next = new Set(current);
+            ancestors.forEach((ancestor) => next.add(ancestor));
+            return next;
+        });
+        setSelectedPath(nextPath);
+    };
+    const revealDirectoryFromSearch = (directoryPath) => {
+        setExpandedPaths((current) => {
+            const next = new Set(current);
+            getAncestorPaths(directoryPath).forEach((ancestor) => next.add(ancestor));
+            next.add(directoryPath);
+            return next;
+        });
+        setSelectedPath(directoryPath);
+        setFilterQuery('');
+        setListFocused(true);
+    };
+    const openViewer = (nextPath) => {
+        const file = snapshot.files.find((candidate) => candidate.path === nextPath);
+        selectPathAndExpand(nextPath);
+        setViewerPath(nextPath);
+        setViewerMode(file?.exists === false ? 'diff' : 'code');
+        setViewerScroll(0);
+        setSortMenuOpen(false);
+        setListFocused(true);
+    };
+    const toggleExpanded = (entry) => {
+        if (entry.type !== 'directory') {
+            openViewer(entry.path);
+            return;
+        }
+        if (filterActive) {
+            revealDirectoryFromSearch(entry.path);
+            return;
+        }
+        setExpandedPaths((current) => {
+            const next = new Set(current);
+            if (next.has(entry.path)) {
+                next.delete(entry.path);
+            }
+            else {
+                next.add(entry.path);
+            }
+            return next;
+        });
+    };
+    const handleOpenCurrentDirectory = async () => {
+        const activeEntry = viewerPath
+            ? {
+                path: viewerPath,
+                parentPath: viewerFile?.parentPath || null,
+                type: 'file',
+            }
+            : selectedEntry;
+        const targetPath = getCurrentDirectoryPath(rootPath, activeEntry);
+        try {
+            await openInSystem(targetPath);
+            setStatusMessage(`Opened ${targetPath}`);
+        }
+        catch (error) {
+            setStatusMessage(`Failed to open ${targetPath}: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    const applySortSelection = (optionId) => {
+        if (optionId === 'sort-name') {
+            setSortMode('name');
+            setSortMenuOpen(false);
+            return;
+        }
+        if (optionId === 'sort-modified') {
+            ensureModifiedSortData();
+            setSortMode('modified');
+            setSortMenuOpen(false);
+            return;
+        }
+        if (optionId === 'sort-status') {
+            setSortMode('status');
+            setSortMenuOpen(false);
+            return;
+        }
+        if (optionId === 'filter-all') {
+            setFilterMode('all');
+            setSortMenuOpen(false);
+            return;
+        }
+        if (optionId === 'filter-diffed') {
+            setFilterMode('diffed');
+            setSortMenuOpen(false);
+        }
+    };
+    const backOutFromTree = () => {
+        if (filterActive) {
+            setFilterQuery('');
+            setListFocused(false);
+            return;
+        }
+        if (!listFocused) {
+            setStatusMessage('File browser stays open. Use pane controls to close it.');
+            return;
+        }
+        if (!selectedEntry) {
+            setListFocused(false);
+            return;
+        }
+        if (selectedEntry.type === 'directory' && selectedEntry.isExpanded) {
+            setExpandedPaths((current) => {
+                const next = new Set(current);
+                next.delete(selectedEntry.path);
+                return next;
+            });
+            return;
+        }
+        if (selectedEntry.parentPath) {
+            setSelectedPath(selectedEntry.parentPath);
+            return;
+        }
+        setListFocused(false);
+    };
+    useInput(async (input, key) => {
+        if (key.ctrl && input === 'c') {
+            process.exit(0);
+            return;
+        }
+        if (viewerPath) {
+            if (key.escape) {
+                setViewerPath(null);
+                setViewerScroll(0);
+                return;
+            }
+            if (input === 'd' || key.tab) {
+                setViewerMode((current) => (current === 'code' ? 'diff' : 'code'));
+                setViewerScroll(0);
+                return;
+            }
+            if (input === 'o') {
+                await handleOpenCurrentDirectory();
+                return;
+            }
+            if (key.upArrow) {
+                setViewerScroll((current) => Math.max(0, current - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setViewerScroll((current) => Math.min(currentViewerMaxOffset, current + 1));
+                return;
+            }
+            if (key.pageUp) {
+                setViewerScroll((current) => Math.max(0, current - viewerBodyRows));
+                return;
+            }
+            if (key.pageDown) {
+                setViewerScroll((current) => Math.min(currentViewerMaxOffset, current + viewerBodyRows));
+            }
+            return;
+        }
+        if (sortMenuOpen) {
+            if (key.escape) {
+                setSortMenuOpen(false);
+                return;
+            }
+            if (key.upArrow) {
+                setSortMenuIndex((current) => Math.max(0, current - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setSortMenuIndex((current) => Math.min(SORT_OPTIONS.length - 1, current + 1));
+                return;
+            }
+            if (key.return) {
+                applySortSelection(SORT_OPTIONS[sortMenuIndex]?.id || '');
+            }
+            return;
+        }
+        if (key.backspace || key.delete || input === '\x7f' || input === '\x08') {
+            if (filterQuery.length > 0) {
+                setFilterQuery((current) => current.slice(0, -1));
+            }
+            return;
+        }
+        if (key.ctrl && input === 'u') {
+            setFilterQuery('');
+            setListFocused(false);
+            return;
+        }
+        if (key.escape) {
+            backOutFromTree();
+            return;
+        }
+        if (input === 'S') {
+            setSortMenuIndex(getSortOptionIndex(sortMode, filterMode));
+            setSortMenuOpen(true);
+            return;
+        }
+        if (input === 'O') {
+            await handleOpenCurrentDirectory();
+            return;
+        }
+        if (input === 'R') {
+            refreshSnapshot();
+            return;
+        }
+        if (input === 'P') {
+            setListFocused(false);
+            return;
+        }
+        if (isFilterTypingInput(input, key)) {
+            setFilterQuery((current) => `${current}${input}`);
+            return;
+        }
+        if (!selectedEntry) {
+            return;
+        }
+        if (key.upArrow) {
+            if (!listFocused) {
+                return;
+            }
+            if (selectedIndex <= 0) {
+                setListFocused(false);
+                return;
+            }
+            setSelectedPath(visibleEntries[selectedIndex - 1]?.path || selectedEntry.path);
+            return;
+        }
+        if (key.downArrow) {
+            if (!listFocused) {
+                if (visibleEntries.length > 0) {
+                    setListFocused(true);
+                    setSelectedPath(visibleEntries[0].path);
+                }
+                return;
+            }
+            const nextIndex = Math.min(visibleEntries.length - 1, selectedIndex + 1);
+            setSelectedPath(visibleEntries[nextIndex]?.path || selectedEntry.path);
+            return;
+        }
+        if (key.leftArrow) {
+            if (!listFocused) {
+                return;
+            }
+            if (filterActive) {
+                setListFocused(false);
+                return;
+            }
+            if (selectedEntry.type === 'directory' && selectedEntry.isExpanded) {
+                setExpandedPaths((current) => {
+                    const next = new Set(current);
+                    next.delete(selectedEntry.path);
+                    return next;
+                });
+                return;
+            }
+            if (selectedEntry.parentPath) {
+                setSelectedPath(selectedEntry.parentPath);
+            }
+            return;
+        }
+        if (key.rightArrow) {
+            if (!listFocused) {
+                if (visibleEntries.length > 0) {
+                    setListFocused(true);
+                }
+                return;
+            }
+            if (selectedEntry.type === 'directory') {
+                if (filterActive) {
+                    revealDirectoryFromSearch(selectedEntry.path);
+                }
+                else if (!selectedEntry.isExpanded) {
+                    setExpandedPaths((current) => new Set(current).add(selectedEntry.path));
+                }
+                else {
+                    const firstChild = visibleEntries[selectedIndex + 1];
+                    if (firstChild && firstChild.parentPath === selectedEntry.path) {
+                        setSelectedPath(firstChild.path);
+                    }
+                }
+            }
+            else {
+                openViewer(selectedEntry.path);
+            }
+            return;
+        }
+        if (key.return) {
+            if (!listFocused) {
+                if (visibleEntries.length > 0) {
+                    setListFocused(true);
+                }
+                return;
+            }
+            toggleExpanded(selectedEntry);
+        }
+    });
+    const listRange = getVisibleRange(selectedIndex, visibleEntries.length, listBodyRows);
+    const visibleListItems = visibleEntries.slice(listRange.start, listRange.end);
+    const visiblePreviewLines = previewLines.slice(viewerScroll, viewerScroll + viewerBodyRows);
+    const frameWidth = Math.max(30, terminalWidth - 2);
+    const searchWidth = frameWidth;
+    const searchInnerWidth = Math.max(24, searchWidth - 2);
+    const contentWidth = frameWidth;
+    const rowMarkerWidth = 2;
+    const searchIconWidth = filterActive ? 2 : 0;
+    const statusColumnWidth = 4;
+    const itemLabelWidth = Math.max(10, contentWidth - rowMarkerWidth - searchIconWidth - statusColumnWidth);
+    const filterFocused = !viewerPath && !sortMenuOpen && !listFocused;
+    const filterDisplay = filterQuery || 'Search files and directories';
+    const filterCursor = filterFocused ? '|' : '';
+    const listTrailingRows = getTrailingRowCount(listBodyRows, visibleListItems.length);
+    const viewerTrailingRows = getTrailingRowCount(viewerBodyRows, visiblePreviewLines.length);
+    const sortMenuRenderedRows = SORT_OPTIONS.length + 1;
+    const sortTrailingRows = getTrailingRowCount(contentRows, sortMenuRenderedRows);
+    const sectionTitle = viewerPath
+        ? ' Quick View'
+        : sortMenuOpen
+            ? ' Sort and Filter'
+            : filterActive
+                ? ' Search Results'
+                : ' Explorer';
+    const sectionSummary = viewerPath
+        ? `${viewerMode === 'code' ? 'Code view' : 'Diff view'} • Lines ${Math.min(viewerScroll + 1, previewLines.length)}-${Math.min(viewerScroll + viewerBodyRows, previewLines.length)} of ${previewLines.length}`
+        : sortMenuOpen
+            ? 'Choose a sort or filter mode'
+            : `${visibleEntries.length} ${filterActive ? 'matches' : visibleEntries.length === 1 ? 'item' : 'items'} • sort: ${sortMode} • ${filterMode === 'diffed' ? 'changed only' : 'all files'}`;
+    const footerHelp = viewerPath
+        ? 'Esc back • d toggle code/diff • o open directory • PgUp/PgDn scroll'
+        : sortMenuOpen
+            ? '↑↓ choose • Enter apply • Esc back'
+            : 'Type to filter • ↓ focus list • Enter open • Shift+S sort • Shift+O open dir • Shift+R refresh • Esc back';
+    return (React.createElement(Box, { flexDirection: "column", paddingX: 1, width: terminalWidth },
+        React.createElement(Box, { flexDirection: "column", width: frameWidth },
+            React.createElement(Box, { width: frameWidth },
+                React.createElement(Text, { bold: true, color: COLORS.accent, wrap: "truncate-end" }, renderSingleLine(`Files: ${projectLabel}`))),
+            React.createElement(Box, { width: frameWidth },
+                React.createElement(Text, { dimColor: true, wrap: "truncate-end" }, renderSingleLine(clipFromLeft(rootPath, frameWidth))))),
+        React.createElement(Box, { borderStyle: POPUP_CONFIG.borderStyle, borderColor: filterFocused ? POPUP_CONFIG.inputBorderColor : POPUP_CONFIG.borderColor, width: searchWidth, height: searchRows, flexDirection: "column" },
+            React.createElement(Box, { width: searchInnerWidth },
+                React.createElement(Text, { bold: true, color: filterFocused ? POPUP_CONFIG.inputBorderColor : POPUP_CONFIG.borderColor },
+                    "\uF002",
+                    ' '),
+                React.createElement(Text, { color: filterFocused ? 'white' : undefined, dimColor: !filterQuery, wrap: "truncate-end" }, renderSingleLine(clipToWidth(`${filterDisplay}${filterQuery ? filterCursor : filterFocused ? filterCursor : ''}`, searchInnerWidth - 2))))),
+        viewerPath ? (React.createElement(Box, { flexDirection: "column", width: contentWidth, height: contentBoxHeight },
+            React.createElement(Box, { width: contentWidth },
+                React.createElement(Text, { bold: true, color: "yellow", wrap: "truncate-end" }, renderSingleLine(clipToWidth(`${sectionTitle} • ${viewerPath}`, contentWidth)))),
+            React.createElement(Box, { width: contentWidth },
+                React.createElement(Text, { dimColor: true, wrap: "truncate-end" }, renderSingleLine(clipToWidth(sectionSummary, contentWidth)))),
+            visiblePreviewLines.map((line, index) => (React.createElement(Box, { key: `${viewerScroll + index}`, width: contentWidth },
+                React.createElement(Text, { wrap: "truncate-end" }, line.length > 0 ? line : ' ')))),
+            Array.from({ length: viewerTrailingRows }, (_, index) => (React.createElement(Box, { key: `viewer-pad-${index}`, width: contentWidth },
+                React.createElement(Text, null, " ")))))) : sortMenuOpen ? (React.createElement(Box, { flexDirection: "column", width: contentWidth, height: contentBoxHeight },
+            React.createElement(Box, { width: contentWidth },
+                React.createElement(Text, { bold: true, color: "cyan", wrap: "truncate-end" }, sectionTitle)),
+            SORT_OPTIONS.map((option, index) => {
+                const selected = index === sortMenuIndex;
+                return (React.createElement(Box, { key: option.id, width: contentWidth },
+                    React.createElement(Text, { bold: selected, color: selected ? 'black' : 'white', backgroundColor: selected ? COLORS.accent : undefined, wrap: "truncate-end" }, renderSingleLine(clipToWidth(`${selected ? '▌ ' : '  '}${option.label} • ${option.description}`, contentWidth)))));
+            }),
+            Array.from({ length: sortTrailingRows }, (_, index) => (React.createElement(Box, { key: `sort-pad-${index}`, width: contentWidth },
+                React.createElement(Text, null, " ")))))) : (React.createElement(Box, { flexDirection: "column", width: contentWidth, height: contentBoxHeight },
+            React.createElement(Box, { width: contentWidth },
+                React.createElement(Text, { bold: true, color: listFocused ? POPUP_CONFIG.borderColor : 'gray', wrap: "truncate-end" }, renderSingleLine(clipToWidth(`${sectionTitle} • ${sectionSummary}`, contentWidth)))),
+            visibleEntries.length === 0 ? (React.createElement(React.Fragment, null,
+                React.createElement(Box, { width: contentWidth },
+                    React.createElement(Text, { dimColor: true, wrap: "truncate-end" }, "No files match the current filter.")),
+                Array.from({ length: Math.max(0, listBodyRows - 1) }, (_, index) => (React.createElement(Box, { key: `empty-pad-${index}`, width: contentWidth },
+                    React.createElement(Text, null, " ")))))) : (React.createElement(React.Fragment, null,
+                visibleListItems.map((entry) => {
+                    const selected = listFocused && entry.path === selectedPath;
+                    const rowBackground = selected ? COLORS.accent : undefined;
+                    const statusText = statusColumnWidth > 1
+                        ? (entry.statusLabel || '').padStart(statusColumnWidth - 1, ' ')
+                        : entry.statusLabel || '';
+                    const selectionMarker = selected ? '▌ ' : '  ';
+                    const entryLabel = filterActive
+                        ? clipPathToWidth(entry.type === 'directory' ? `${entry.path}/` : entry.path, itemLabelWidth)
+                        : clipToWidth(entry.displayLabel, itemLabelWidth);
+                    const entryColor = selected
+                        ? 'black'
+                        : filterActive
+                            ? getSearchEntryColor(entry)
+                            : entry.type === 'directory'
+                                ? 'blue'
+                                : entry.exists
+                                    ? 'white'
+                                    : COLORS.error;
+                    return (React.createElement(Box, { key: entry.path, width: contentWidth },
+                        React.createElement(Box, { width: rowMarkerWidth },
+                            React.createElement(Text, { color: selected ? 'black' : POPUP_CONFIG.borderColor, backgroundColor: rowBackground }, selectionMarker)),
+                        filterActive ? (React.createElement(Box, { width: searchIconWidth },
+                            React.createElement(Text, { color: entryColor, backgroundColor: rowBackground }, getSearchEntryIcon(entry)))) : null,
+                        React.createElement(Box, { width: itemLabelWidth },
+                            React.createElement(Text, { bold: selected || entry.type === 'directory', color: entryColor, backgroundColor: rowBackground, wrap: "truncate-end" }, renderSingleLine(entryLabel))),
+                        React.createElement(Box, { width: statusColumnWidth, justifyContent: "flex-end" },
+                            React.createElement(Text, { color: selected ? 'black' : getStatusColor(entry.statusLabel), backgroundColor: rowBackground }, statusText))));
+                }),
+                Array.from({ length: listTrailingRows }, (_, index) => (React.createElement(Box, { key: `list-pad-${index}`, width: contentWidth },
+                    React.createElement(Text, null, " ")))))))),
+        React.createElement(Box, { flexDirection: "column", width: frameWidth },
+            React.createElement(Box, { width: frameWidth },
+                React.createElement(Text, { color: statusMessage ? 'green' : undefined, wrap: "truncate-end" }, renderSingleLine(clipToWidth(statusMessage || ' ', frameWidth)))),
+            React.createElement(Box, { width: frameWidth },
+                React.createElement(Text, { dimColor: true, wrap: "truncate-end" }, renderSingleLine(clipToWidth(footerHelp, frameWidth)))))));
+};
+export default FileBrowserApp;
+//# sourceMappingURL=FileBrowserApp.js.map