@joinezco/codeblock 0.0.9 → 0.0.11

package/dist/panels/toolbar.js

@@ -1,9 +1,12 @@
+import { EditorView } from "@codemirror/view";
 import { StateEffect, StateField } from "@codemirror/state";
-import { CodeblockFacet, openFileEffect, currentFileField, setThemeEffect } from "../editor";
+import { CodeblockFacet, openFileEffect, fileLoadedEffect, currentFileField, setThemeEffect, lineWrappingCompartment, lineNumbersCompartment, foldGutterCompartment } from "../editor";
+import { lineNumbers, highlightActiveLineGutter } from "@codemirror/view";
+import { foldGutter } from "@codemirror/language";
 import { extOrLanguageToLanguageId } from "../lsps";
 import { LSP, LspLog, FileChangeType } from "../utils/lsp";
 import { Seti } from "@m234/nerd-fonts/fs";
-import { settingsField, resolveThemeDark, createSettingsOverlay } from "./footer";
+import { settingsField, resolveThemeDark, updateSettingsEffect } from "./settings";
 // Browser-safe file icon lookup (avoids node:path.parse used by Seti.fromPath)
 const FALLBACK_ICON = { value: '\ue64e', hexCode: 0xe64e }; // nf-seti-text
 function setiIconForPath(filePath) {
@@ -28,6 +31,11 @@ function setiIconForPath(filePath) {
     }
     return FALLBACK_ICON;
 }
+const fileActionRegistry = [];
+/** Register a command that appears when files with matching extensions are open. */
+export function registerFileAction(entry) {
+    fileActionRegistry.push(entry);
+}
 // Type guards
 function isCommandResult(result) {
     return 'type' in result && result.query !== undefined;
@@ -35,6 +43,9 @@ function isCommandResult(result) {
 function isBrowseEntry(result) {
     return 'type' in result && ('fullPath' in result);
 }
+function isSettingsEntry(result) {
+    return 'type' in result && ('settingKey' in result);
+}
 // Search results state - now handles both commands and search results
 export const setSearchResults = StateEffect.define();
 export const searchResultsField = StateField.define({
@@ -67,6 +78,25 @@ function isValidProgrammingLanguage(query) {
     return Object.keys(extOrLanguageToLanguageId).some(key => key.toLowerCase() === lowerQuery ||
         extOrLanguageToLanguageId[key].toLowerCase() === lowerQuery);
 }
+// Map language names to canonical file extensions
+function languageToFileExtension(langOrExt) {
+    const nameToExt = {
+        javascript: 'js',
+        typescript: 'ts',
+        python: 'py',
+        ruby: 'rb',
+        csharp: 'cs',
+        kotlin: 'kt',
+        rust: 'rs',
+        haskell: 'hs',
+        perl: 'pl',
+        bash: 'sh',
+        shell: 'sh',
+        mysql: 'sql',
+        markdown: 'md',
+    };
+    return nameToExt[langOrExt.toLowerCase()] || langOrExt.toLowerCase();
+}
 // Icons
 const SEARCH_ICON = '\uf002'; // nf-fa-search (magnifying glass)
 const DEFAULT_FILE_ICON = '\ue64e'; // nf-seti-text
@@ -74,6 +104,7 @@ const COG_ICON = '\uf013'; // nf-fa-cog
 const FOLDER_ICON = '\ue613'; // nf-seti-folder
 const FOLDER_OPEN_ICON = '\ue614'; // nf-seti-folder (open variant)
 const PARENT_DIR_ICON = '\uf112'; // nf-fa-reply (back/up arrow)
+// const TERMINAL_ICON = '\uf120'; // nf-fa-terminal — awaiting WASM VM/shim
 // Get nerd font icon for a file path
 function getFileIcon(path) {
     const result = setiIconForPath(path);
@@ -83,29 +114,73 @@ function getFileIcon(path) {
 function getLanguageIcon(query) {
     return getFileIcon(`file.${query}`);
 }
+// Theme cycle values and icons
+const themeCycleValues = ['light', 'dark', 'system'];
+const themeIcons = {
+    light: '\u2600\uFE0F', // ☀️
+    dark: '\uD83C\uDF19', // 🌙
+    system: '\uD83C\uDF13', // 🌓
+};
+// Font family cycle values
+const fontFamilyCycleValues = ['', '"UbuntuMono NF", monospace'];
+const fontFamilyLabels = {
+    '': 'System default',
+    '"UbuntuMono NF", monospace': 'UbuntuMono NF',
+};
 // Create command results for the first section
 function createCommandResults(query, view, searchResults) {
     const commands = [];
     const currentFile = view.state.field(currentFileField);
     const hasValidFile = currentFile.path && !currentFile.loading;
+    const hasContent = view.state.doc.length > 0;
     const isLanguageQuery = isValidProgrammingLanguage(query);
-    // TODO: fix language ext for new file with full language names, "typescript" -> "file.ts"
     // Check if query matches an existing file (first search result with exact match)
     const hasExactFileMatch = searchResults.length > 0 && searchResults[0].id === query;
-    if (query.trim()) {
-        // Create new file command (only if query doesn't match existing file)
-        if (!hasExactFileMatch) {
+    // "Save as" — shown when the editor has content or a file is open
+    if (hasContent || hasValidFile) {
+        if (!query.trim()) {
+            commands.push({
+                id: 'Save as',
+                type: 'save-as',
+                icon: DEFAULT_FILE_ICON,
+                query: '',
+                requiresInput: true,
+            });
+        }
+        else if (!hasExactFileMatch) {
             const langIcon = isLanguageQuery ? getLanguageIcon(query) : null;
-            const createFileCommand = {
-                id: isLanguageQuery ? "Create new file" : `Create new file "${query}"`,
-                type: 'create-file',
+            commands.push({
+                id: isLanguageQuery ? "Save as" : `Save as "${query}"`,
+                type: 'save-as',
                 icon: langIcon ? langIcon.glyph : DEFAULT_FILE_ICON,
                 iconColor: langIcon?.color,
                 query,
-                requiresInput: isLanguageQuery
-            };
-            commands.push(createFileCommand);
+                requiresInput: isLanguageQuery,
+            });
         }
+    }
+    // "Create new file" — always available, creates a blank file
+    if (!query.trim()) {
+        commands.push({
+            id: 'Create new file',
+            type: 'create-file',
+            icon: DEFAULT_FILE_ICON,
+            query: '',
+            requiresInput: true,
+        });
+    }
+    else if (!hasExactFileMatch) {
+        const langIcon = isLanguageQuery ? getLanguageIcon(query) : null;
+        commands.push({
+            id: isLanguageQuery ? "Create new file" : `Create new file "${query}"`,
+            type: 'create-file',
+            icon: langIcon ? langIcon.glyph : DEFAULT_FILE_ICON,
+            iconColor: langIcon?.color,
+            query,
+            requiresInput: isLanguageQuery,
+        });
+    }
+    if (query.trim()) {
         // Rename file command (only if file is open, query is not a language, and doesn't match current file)
         if (hasValidFile && !isLanguageQuery && !hasExactFileMatch) {
             const renameCommand = {
@@ -124,6 +199,13 @@ function createCommandResults(query, view, searchResults) {
         icon: FOLDER_OPEN_ICON,
         query: '',
     });
+    // Open terminal — awaiting a backing WASM VM/shim for implementation
+    // commands.push({
+    //     id: 'Open terminal',
+    //     type: 'open-terminal',
+    //     icon: TERMINAL_ICON,
+    //     query: '',
+    // });
     // Import commands — always shown
     commands.push({
         id: 'Import file(s)',
@@ -132,13 +214,44 @@ function createCommandResults(query, view, searchResults) {
         query: '',
     });
     commands.push({
-        id: 'Import folder(s)',
+        id: 'Import folder',
         type: 'import-local-folder',
         icon: FOLDER_ICON,
         query: '',
     });
+    // File-extension-specific commands — shown when a matching file is open
+    if (hasValidFile && currentFile.path) {
+        const ext = currentFile.path.split('.').pop()?.toLowerCase() || '';
+        for (const entry of fileActionRegistry) {
+            if (entry.extensions.includes(ext)) {
+                commands.push({
+                    id: entry.label,
+                    type: 'file-action',
+                    icon: entry.icon,
+                    query: '',
+                    action: entry.action,
+                });
+            }
+        }
+    }
+    // Settings command — always shown
+    commands.push({
+        id: 'Settings',
+        type: 'settings',
+        icon: COG_ICON,
+        query: '',
+    });
     return commands;
 }
+const BINARY_IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'ico', 'avif']);
+function fileToDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
 async function importFiles(files, view) {
     const { fs, index } = view.state.facet(CodeblockFacet);
     for (const file of files) {
@@ -146,7 +259,15 @@ async function importFiles(files, view) {
         const dir = path.substring(0, path.lastIndexOf('/'));
         if (dir)
             await fs.mkdir(dir, { recursive: true });
-        await fs.writeFile(path, await file.text());
+        // Store binary images as data URLs so they can be rendered
+        const ext = path.split('.').pop()?.toLowerCase() || '';
+        if (BINARY_IMAGE_EXTS.has(ext)) {
+            const dataUrl = await fileToDataUrl(file);
+            await fs.writeFile(path, dataUrl);
+        }
+        else {
+            await fs.writeFile(path, await file.text());
+        }
         if (index)
             index.add(path);
         LSP.notifyFileChanged(path, FileChangeType.Created);
@@ -185,7 +306,7 @@ function createLspLogOverlay() {
     overlay._lspLogUnsub = unsub;
     return overlay;
 }
-const MIN_LOADING_MS = 400;
+const SPINNER_FADE_MS = 150;
 // Toolbar Panel
 export const toolbarPanel = (view) => {
     let { filepath, language, index } = view.state.facet(CodeblockFacet);
@@ -231,90 +352,53 @@ export const toolbarPanel = (view) => {
     }
     updateLspLogIcon();
     updateLspLogVisibility();
-    // Settings cog button (far right of toolbar)
-    const settingsCog = document.createElement("button");
-    settingsCog.className = "cm-toolbar-settings-cog";
-    settingsCog.style.fontFamily = 'var(--cm-icon-font-family)';
-    settingsCog.textContent = COG_ICON;
-    // Overlay management
-    let activeOverlay = null;
-    let activeOverlayType = null;
-    let savedInputValue = null;
-    const overlayLabels = {
-        'settings': 'settings',
-        'lsp-log': 'lsp.log',
-    };
-    function updateCogAppearance() {
-        if (activeOverlayType) {
-            settingsCog.textContent = '\u2715'; // ✕
-            settingsCog.style.fontFamily = '';
-            settingsCog.classList.add('cm-cog-active');
-        }
-        else {
-            settingsCog.textContent = COG_ICON;
-            settingsCog.style.fontFamily = 'var(--cm-icon-font-family)';
-            settingsCog.classList.remove('cm-cog-active');
-        }
-    }
-    function showOverlay(overlay) {
+    // LSP log overlay management (dedicated to LSP log only)
+    let lspLogOverlay = null;
+    let lspLogSavedInputValue = null;
+    function showLspLogOverlay(overlay) {
         const panelsTop = view.dom.querySelector('.cm-panels-top');
         if (panelsTop) {
             overlay.style.top = `${panelsTop.getBoundingClientRect().height}px`;
         }
         view.dom.appendChild(overlay);
     }
-    function openOverlay(type, overlay) {
-        // Save current input and show overlay label
-        savedInputValue = input.value;
-        input.value = overlayLabels[type];
-        activeOverlay = overlay;
-        activeOverlayType = type;
-        showOverlay(overlay);
-        updateCogAppearance();
+    function openLspLogOverlay() {
+        lspLogSavedInputValue = input.value;
+        input.value = 'lsp.log';
+        lspLogOverlay = createLspLogOverlay();
+        showLspLogOverlay(lspLogOverlay);
     }
-    function closeOverlay() {
-        if (activeOverlay) {
-            // Clean up LSP log subscription if applicable
-            if (activeOverlay._lspLogUnsub) {
-                activeOverlay._lspLogUnsub();
+    function closeLspLogOverlay() {
+        if (lspLogOverlay) {
+            if (lspLogOverlay._lspLogUnsub) {
+                lspLogOverlay._lspLogUnsub();
             }
-            activeOverlay.remove();
-            activeOverlay = null;
-            activeOverlayType = null;
-            // Restore input text
-            if (savedInputValue !== null) {
-                input.value = savedInputValue;
-                savedInputValue = null;
+            lspLogOverlay.remove();
+            lspLogOverlay = null;
+            if (lspLogSavedInputValue !== null) {
+                input.value = lspLogSavedInputValue;
+                lspLogSavedInputValue = null;
             }
-            updateCogAppearance();
         }
     }
-    settingsCog.addEventListener("click", () => {
-        if (activeOverlayType) {
-            closeOverlay();
-        }
-        else {
-            openOverlay('settings', createSettingsOverlay(view));
-        }
-    });
     lspLogBtn.addEventListener("click", () => {
-        if (activeOverlayType === 'lsp-log') {
-            closeOverlay();
+        if (lspLogOverlay) {
+            closeLspLogOverlay();
         }
         else {
-            closeOverlay();
-            openOverlay('lsp-log', createLspLogOverlay());
+            openLspLogOverlay();
         }
     });
     dom.appendChild(lspLogBtn);
-    dom.appendChild(settingsCog);
     const resultsList = document.createElement("ul");
     resultsList.className = "cm-search-results";
     dom.appendChild(resultsList);
     let selectedIndex = 0;
     let namingMode = { active: false, type: 'create-file', originalQuery: '' };
     let browseMode = { active: false, currentPath: '/', filter: '' };
-    let loadingStartTime = null;
+    let settingsMode = { active: false, filter: '', editing: null };
+    let deleteMode = { active: false, filePath: '' };
+    let overwriteMode = { active: false, filePath: '', action: 'create-file' };
     // System theme media query listener
     const systemThemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
     function handleSystemThemeChange() {
@@ -336,14 +420,37 @@ export const toolbarPanel = (view) => {
         else {
             view.dom.style.removeProperty('--cm-font-family');
         }
+        // Max visible lines: set max-height on the scroller
+        const scroller = view.dom.querySelector('.cm-scroller');
+        if (scroller) {
+            if (settings.maxVisibleLines > 0) {
+                const lineHeight = settings.fontSize * 1.5; // approximate
+                scroller.style.maxHeight = `${settings.maxVisibleLines * lineHeight}px`;
+            }
+            else {
+                scroller.style.maxHeight = '';
+            }
+        }
     }
     applySettings();
-    // Apply initial theme
+    // Apply initial theme and auto-hide
     const initialSettings = view.state.field(settingsField);
     const initialDark = resolveThemeDark(initialSettings.theme);
     view.dom.setAttribute('data-theme', initialDark ? 'dark' : 'light');
-    // Tracks gutter width for toolbar alignment
+    // Auto-hide is enabled after the panel is mounted (needs parent ref).
+    // Defer to first update cycle.
+    let autoHidePendingInit = initialSettings.autoHideToolbar;
+    // Tracks gutter width for toolbar alignment.
+    // Sets CSS variables used by icon containers and alignment:
+    //   --cm-gutter-width: total width of all gutters combined
+    //   --cm-gutter-lineno-width: width of the line numbers gutter
+    //   --cm-icon-col-width: character-width-based minimum for icon column
     function updateGutterWidthVariables() {
+        // Character width for ch-based sizing (2 columns: icon occupies ~0.5ch advance,
+        // but we want the container to be a clean multiple of character width)
+        const chWidth = view.defaultCharacterWidth;
+        const iconColWidth = Math.ceil(2 * chWidth); // 2 character columns minimum
+        view.dom.style.setProperty('--cm-icon-col-width', `${iconColWidth}px`);
         const gutters = view.dom.querySelector('.cm-gutters');
         if (gutters) {
             const gutterWidth = gutters.getBoundingClientRect().width;
@@ -353,6 +460,15 @@ export const toolbarPanel = (view) => {
                 const numberGutterWidth = numberGutter.getBoundingClientRect().width;
                 view.dom.style.setProperty('--cm-gutter-lineno-width', `${numberGutterWidth}px`);
             }
+            else {
+                // Line numbers hidden — icon column sized to character-width multiple
+                view.dom.style.setProperty('--cm-gutter-lineno-width', `${iconColWidth}px`);
+            }
+        }
+        else {
+            // No gutters at all — icon column sized to character-width multiple
+            view.dom.style.setProperty('--cm-gutter-width', `${iconColWidth}px`);
+            view.dom.style.setProperty('--cm-gutter-lineno-width', `${iconColWidth}px`);
         }
     }
     // Set up ResizeObserver to watch gutter width changes
@@ -369,10 +485,434 @@ export const toolbarPanel = (view) => {
     // Initial width setup and observer
     updateGutterWidthVariables();
     setupGutterObserver();
+    // --- Auto-hide toolbar management ---
+    // When enabled, the toolbar retracts (height → 0). It expands when:
+    //   - the mouse enters the first visible code line (top of scroller), OR
+    //   - the toolbar input receives focus.
+    // It retracts when:
+    //   - the mouse leaves the toolbar AND the input doesn't have focus.
+    let autoHideEnabled = false;
+    let panelsTopEl = null;
+    function getPanelsTop() {
+        if (!panelsTopEl)
+            panelsTopEl = dom.parentElement;
+        return panelsTopEl;
+    }
+    function retractToolbar() {
+        const pt = getPanelsTop();
+        if (pt && autoHideEnabled)
+            pt.classList.add('cm-toolbar-retracted');
+    }
+    function expandToolbar() {
+        const pt = getPanelsTop();
+        if (pt)
+            pt.classList.remove('cm-toolbar-retracted');
+    }
+    function isToolbarInteractive() {
+        return dom.contains(document.activeElement);
+    }
+    // Single mousemove handler on the editor root checks whether the mouse
+    // is inside the toolbar region (panels-top + any overflow like dropdowns)
+    // or inside the first code line (trigger zone). This is more reliable than
+    // mouseleave on cm-panels-top, which misses absolutely-positioned children.
+    function handleEditorMouseMove(e) {
+        if (!autoHideEnabled)
+            return;
+        const pt = getPanelsTop();
+        if (!pt)
+            return;
+        // Check if mouse is inside the toolbar panel or its dropdown
+        // (dropdown overflows below cm-panels-top, so check dom directly)
+        if (dom.contains(e.target) || pt.contains(e.target)) {
+            return; // still in toolbar region — stay expanded
+        }
+        // Check if mouse is within the first code line (trigger to expand)
+        const scroller = view.dom.querySelector('.cm-scroller');
+        if (scroller) {
+            const scrollRect = scroller.getBoundingClientRect();
+            if (e.clientY >= scrollRect.top && e.clientY < scrollRect.top + view.defaultLineHeight) {
+                expandToolbar();
+                return;
+            }
+        }
+        // Mouse is elsewhere in the editor — retract if not interactive
+        if (!isToolbarInteractive())
+            retractToolbar();
+    }
+    function handleEditorMouseLeave() {
+        if (!autoHideEnabled)
+            return;
+        if (!isToolbarInteractive())
+            retractToolbar();
+    }
+    function handleInputBlur() {
+        if (!autoHideEnabled)
+            return;
+        // Delay slightly so click-to-focus-another-element events settle
+        setTimeout(() => {
+            if (autoHideEnabled && !isToolbarInteractive()) {
+                retractToolbar();
+            }
+        }, 100);
+    }
+    function enableAutoHide() {
+        autoHideEnabled = true;
+        view.dom.addEventListener('mousemove', handleEditorMouseMove);
+        view.dom.addEventListener('mouseleave', handleEditorMouseLeave);
+        input.addEventListener('blur', handleInputBlur);
+        retractToolbar();
+    }
+    function disableAutoHide() {
+        autoHideEnabled = false;
+        view.dom.removeEventListener('mousemove', handleEditorMouseMove);
+        view.dom.removeEventListener('mouseleave', handleEditorMouseLeave);
+        input.removeEventListener('blur', handleInputBlur);
+        expandToolbar();
+    }
+    // --- Settings mode functions ---
+    function buildSettingsEntries(filter) {
+        const settings = view.state.field(settingsField);
+        const entries = [];
+        // Theme: cycle through light/dark/system
+        entries.push({
+            id: `Theme: ${settings.theme}`,
+            settingKey: 'theme',
+            type: 'settings-cycle',
+            icon: themeIcons[settings.theme],
+            currentValue: settings.theme,
+        });
+        // Font size: input
+        entries.push({
+            id: `Font size: ${settings.fontSize}px`,
+            settingKey: 'fontSize',
+            type: 'settings-input',
+            icon: 'Aa',
+            currentValue: String(settings.fontSize),
+        });
+        // Font family: cycle
+        const fontLabel = fontFamilyLabels[settings.fontFamily] || settings.fontFamily || 'System default';
+        entries.push({
+            id: `Font family: ${fontLabel}`,
+            settingKey: 'fontFamily',
+            type: 'settings-cycle',
+            icon: 'Aa',
+            currentValue: settings.fontFamily,
+        });
+        // Autosave: toggle
+        entries.push({
+            id: `Autosave: ${settings.autosave ? 'on' : 'off'}`,
+            settingKey: 'autosave',
+            type: 'settings-toggle',
+            icon: settings.autosave ? '\u2713' : '\u2717', // ✓ or ✗
+            currentValue: String(settings.autosave),
+        });
+        // Line wrap: toggle
+        entries.push({
+            id: `Line wrap: ${settings.lineWrap ? 'on' : 'off'}`,
+            settingKey: 'lineWrap',
+            type: 'settings-toggle',
+            icon: settings.lineWrap ? '\u2713' : '\u2717',
+            currentValue: String(settings.lineWrap),
+        });
+        // LSP log: toggle
+        entries.push({
+            id: `LSP log: ${settings.lspLogEnabled ? 'on' : 'off'}`,
+            settingKey: 'lspLogEnabled',
+            type: 'settings-toggle',
+            icon: settings.lspLogEnabled ? '\u2713' : '\u2717',
+            currentValue: String(settings.lspLogEnabled),
+        });
+        // Max visible lines: input
+        entries.push({
+            id: `Max lines: ${settings.maxVisibleLines || 'unlimited'}`,
+            settingKey: 'maxVisibleLines',
+            type: 'settings-input',
+            icon: '\u2195', // ↕
+            currentValue: String(settings.maxVisibleLines || ''),
+        });
+        // Line numbers: toggle
+        entries.push({
+            id: `Line numbers: ${settings.showLineNumbers ? 'on' : 'off'}`,
+            settingKey: 'showLineNumbers',
+            type: 'settings-toggle',
+            icon: settings.showLineNumbers ? '\u2713' : '\u2717',
+            currentValue: String(settings.showLineNumbers),
+        });
+        // Fold gutter: toggle
+        entries.push({
+            id: `Fold gutter: ${settings.showFoldGutter ? 'on' : 'off'}`,
+            settingKey: 'showFoldGutter',
+            type: 'settings-toggle',
+            icon: settings.showFoldGutter ? '\u2713' : '\u2717',
+            currentValue: String(settings.showFoldGutter),
+        });
+        // Auto-hide toolbar: toggle
+        entries.push({
+            id: `Auto-hide toolbar: ${settings.autoHideToolbar ? 'on' : 'off'}`,
+            settingKey: 'autoHideToolbar',
+            type: 'settings-toggle',
+            icon: settings.autoHideToolbar ? '\u2713' : '\u2717',
+            currentValue: String(settings.autoHideToolbar),
+        });
+        // Filter entries
+        if (filter) {
+            const lowerFilter = filter.toLowerCase();
+            return entries.filter(e => e.id.toLowerCase().includes(lowerFilter));
+        }
+        return entries;
+    }
+    function refreshSettingsEntries() {
+        if (!settingsMode.active)
+            return;
+        const entries = buildSettingsEntries(settingsMode.filter);
+        selectedIndex = Math.min(selectedIndex, Math.max(0, entries.length - 1));
+        safeDispatch(view, { effects: setSearchResults.of(entries) });
+    }
+    function enterSettingsMode() {
+        settingsMode = { active: true, filter: '', editing: null };
+        stateIcon.textContent = COG_ICON;
+        input.value = 'settings/';
+        input.placeholder = '';
+        input.focus();
+        selectedIndex = 0;
+        const entries = buildSettingsEntries('');
+        safeDispatch(view, { effects: setSearchResults.of(entries) });
+        // Ensure click-outside listener is active
+        document.addEventListener("click", handleClickOutside);
+    }
+    function exitSettingsMode() {
+        settingsMode = { active: false, filter: '', editing: null };
+        updateStateIcon();
+        input.placeholder = '';
+    }
+    function handleSettingsEntry(entry) {
+        const settings = view.state.field(settingsField);
+        if (entry.type === 'settings-toggle') {
+            const key = entry.settingKey;
+            const newValue = !settings[key];
+            const effects = [updateSettingsEffect.of({ [key]: newValue })];
+            // Special handling for lineWrap: reconfigure compartment
+            if (key === 'lineWrap') {
+                effects.push(lineWrappingCompartment.reconfigure(newValue ? EditorView.lineWrapping : []));
+            }
+            // Special handling for showLineNumbers: reconfigure compartment
+            if (key === 'showLineNumbers') {
+                effects.push(lineNumbersCompartment.reconfigure(newValue ? [lineNumbers(), highlightActiveLineGutter()] : []));
+            }
+            // Special handling for showFoldGutter: reconfigure compartment
+            if (key === 'showFoldGutter') {
+                effects.push(foldGutterCompartment.reconfigure(newValue ? [foldGutter()] : []));
+            }
+            // Special handling for autoHideToolbar: JS-managed retract/expand
+            if (key === 'autoHideToolbar') {
+                if (newValue)
+                    enableAutoHide();
+                else
+                    disableAutoHide();
+            }
+            safeDispatch(view, { effects });
+        }
+        else if (entry.type === 'settings-cycle') {
+            if (entry.settingKey === 'theme') {
+                const currentIdx = themeCycleValues.indexOf(settings.theme);
+                const nextTheme = themeCycleValues[(currentIdx + 1) % themeCycleValues.length];
+                safeDispatch(view, {
+                    effects: [
+                        updateSettingsEffect.of({ theme: nextTheme }),
+                        setThemeEffect.of({ dark: resolveThemeDark(nextTheme) }),
+                    ]
+                });
+            }
+            else if (entry.settingKey === 'fontFamily') {
+                const currentIdx = fontFamilyCycleValues.indexOf(settings.fontFamily);
+                const nextIdx = (currentIdx + 1) % fontFamilyCycleValues.length;
+                safeDispatch(view, {
+                    effects: [updateSettingsEffect.of({ fontFamily: fontFamilyCycleValues[nextIdx] })]
+                });
+            }
+        }
+        else if (entry.type === 'settings-input') {
+            // Enter editing mode: show the current value in the input for inline editing
+            settingsMode.editing = entry.settingKey;
+            input.value = entry.currentValue;
+            input.select();
+        }
+    }
+    function confirmSettingsEdit() {
+        if (!settingsMode.editing)
+            return;
+        const key = settingsMode.editing;
+        const rawValue = input.value.trim();
+        if (key === 'fontSize') {
+            const size = Number(rawValue);
+            if (!isNaN(size) && size >= 1 && size <= 128) {
+                safeDispatch(view, { effects: [updateSettingsEffect.of({ fontSize: size })] });
+            }
+        }
+        else if (key === 'maxVisibleLines') {
+            const lines = rawValue === '' ? 0 : Number(rawValue);
+            if (!isNaN(lines) && lines >= 0) {
+                safeDispatch(view, { effects: [updateSettingsEffect.of({ maxVisibleLines: Math.floor(lines) })] });
+            }
+        }
+        settingsMode.editing = null;
+        input.value = 'settings/' + settingsMode.filter;
+        // Refresh entries after a microtask so the state update has landed
+        queueMicrotask(() => refreshSettingsEntries());
+    }
+    function cancelSettingsEdit() {
+        settingsMode.editing = null;
+        input.value = 'settings/' + settingsMode.filter;
+    }
+    // --- Delete mode functions ---
+    function enterDeleteMode(filePath) {
+        deleteMode = { active: true, filePath };
+        stateIcon.textContent = '\u2717'; // ✗
+        input.value = '';
+        input.placeholder = `Delete "${filePath}"? (Enter to confirm, Esc to cancel)`;
+        input.focus();
+        safeDispatch(view, { effects: setSearchResults.of([]) });
+    }
+    function exitDeleteMode() {
+        deleteMode = { active: false, filePath: '' };
+        updateStateIcon();
+        input.placeholder = '';
+    }
+    async function confirmDelete() {
+        if (!deleteMode.active)
+            return;
+        const path = deleteMode.filePath;
+        const { fs, index } = view.state.facet(CodeblockFacet);
+        try {
+            const currentFile = view.state.field(currentFileField);
+            const wasOpen = currentFile.path === path;
+            // Delete from VFS
+            await fs.unlink(path).catch((e) => console.warn('VFS unlink failed:', e));
+            // Remove from search index
+            if (index) {
+                try {
+                    index.index.discard(path);
+                }
+                catch { /* not in index */ }
+                if (index.savePath)
+                    index.save(fs, index.savePath);
+            }
+            // Notify LSP
+            LSP.notifyFileChanged(path, FileChangeType.Deleted);
+            exitDeleteMode();
+            safeDispatch(view, { effects: setSearchResults.of([]) });
+            resetInputToCurrentFile();
+            // If the deleted file was currently open, clear the editor
+            if (wasOpen) {
+                safeDispatch(view, {
+                    changes: { from: 0, to: view.state.doc.length, insert: '' },
+                    effects: [
+                        fileLoadedEffect.of({ path: '', content: '', language: null }),
+                    ]
+                });
+                input.value = '';
+            }
+        }
+        catch (e) {
+            console.error('Failed to delete file:', e);
+            exitDeleteMode();
+        }
+    }
+    // --- Overwrite confirmation mode ---
+    function enterOverwriteMode(filePath, action, oldPath) {
+        overwriteMode = { active: true, filePath, action, oldPath };
+        stateIcon.textContent = '\u26A0'; // ⚠
+        input.value = '';
+        input.placeholder = `"${filePath}" exists. Overwrite? (Enter/Esc)`;
+        input.focus();
+        safeDispatch(view, { effects: setSearchResults.of([]) });
+    }
+    function exitOverwriteMode() {
+        overwriteMode = { active: false, filePath: '', action: 'create-file' };
+        updateStateIcon();
+        input.placeholder = '';
+    }
+    async function confirmOverwrite() {
+        if (!overwriteMode.active)
+            return;
+        const { filePath, action, oldPath } = overwriteMode;
+        exitOverwriteMode();
+        if (action === 'save-as') {
+            input.value = filePath;
+            await createAndOpenFile(filePath);
+        }
+        else if (action === 'create-file') {
+            input.value = filePath;
+            await createBlankFile(filePath);
+        }
+        else if (action === 'rename' && oldPath) {
+            input.value = filePath;
+            await performRename(oldPath, filePath);
+        }
+    }
+    /** Check if file exists before executing; enters overwrite mode if it does. */
+    async function checkOverwriteAndExecute(path, action, execute, oldPath) {
+        const { fs } = view.state.facet(CodeblockFacet);
+        const exists = await fs.exists(path);
+        if (exists) {
+            enterOverwriteMode(path, action, oldPath);
+        }
+        else {
+            await execute();
+        }
+    }
+    /** Create a blank (empty) file in the VFS and open it. */
+    async function createBlankFile(pathToOpen) {
+        const { fs, index } = view.state.facet(CodeblockFacet);
+        const dir = pathToOpen.substring(0, pathToOpen.lastIndexOf('/'));
+        if (dir)
+            await fs.mkdir(dir, { recursive: true }).catch(() => { });
+        await fs.writeFile(pathToOpen, '').catch(console.error);
+        if (index) {
+            index.add(pathToOpen);
+            if (index.savePath)
+                index.save(fs, index.savePath);
+        }
+        safeDispatch(view, {
+            effects: [setSearchResults.of([]), openFileEffect.of({ path: pathToOpen })]
+        });
+    }
+    /** Rename a file: save current content to newPath, delete oldPath. */
+    async function performRename(oldPath, newPath) {
+        const { fs, index } = view.state.facet(CodeblockFacet);
+        const content = view.state.doc.toString();
+        // Write content to new path
+        const dir = newPath.substring(0, newPath.lastIndexOf('/'));
+        if (dir)
+            await fs.mkdir(dir, { recursive: true }).catch(() => { });
+        await fs.writeFile(newPath, content).catch(console.error);
+        // Delete old path
+        await fs.unlink(oldPath).catch((e) => console.warn('VFS unlink failed during rename:', e));
+        // Update search index
+        if (index) {
+            try {
+                index.index.discard(oldPath);
+            }
+            catch { /* not in index */ }
+            index.add(newPath);
+            if (index.savePath)
+                index.save(fs, index.savePath);
+        }
+        // Notify LSP
+        LSP.notifyFileChanged(oldPath, FileChangeType.Deleted);
+        LSP.notifyFileChanged(newPath, FileChangeType.Created);
+        // Open the new file — skipSave prevents handleOpen's save-on-switch
+        // from re-creating the old file we just deleted
+        safeDispatch(view, {
+            effects: [setSearchResults.of([]), openFileEffect.of({ path: newPath, skipSave: true })]
+        });
+    }
     const renderItem = (result, i) => {
         const li = document.createElement("li");
         let resultClass = 'cm-file-result';
-        if (isCommandResult(result))
+        if (isSettingsEntry(result))
+            resultClass = 'cm-command-result';
+        else if (isCommandResult(result))
             resultClass = 'cm-command-result';
         else if (isBrowseEntry(result))
             resultClass = result.type === 'browse-file' ? 'cm-file-result' : 'cm-browse-dir-result';
@@ -381,22 +921,29 @@ export const toolbarPanel = (view) => {
         resultIconContainer.className = "cm-search-result-icon-container";
         const resultIcon = document.createElement("div");
         resultIcon.className = "cm-search-result-icon";
-        resultIcon.style.fontFamily = 'var(--cm-icon-font-family)';
-        if (isBrowseEntry(result)) {
+        if (isSettingsEntry(result)) {
+            // Settings entries use emoji or text icons, not nerd fonts
+            resultIcon.style.fontFamily = '';
             resultIcon.textContent = result.icon;
-            if (result.iconColor)
-                resultIcon.style.color = result.iconColor;
-        }
-        else if (isCommandResult(result)) {
-            resultIcon.textContent = result.icon;
-            if (result.iconColor)
-                resultIcon.style.color = result.iconColor;
         }
         else {
-            const icon = getFileIcon(result.id);
-            resultIcon.textContent = icon.glyph;
-            if (icon.color)
-                resultIcon.style.color = icon.color;
+            resultIcon.style.fontFamily = 'var(--cm-icon-font-family)';
+            if (isBrowseEntry(result)) {
+                resultIcon.textContent = result.icon;
+                if (result.iconColor)
+                    resultIcon.style.color = result.iconColor;
+            }
+            else if (isCommandResult(result)) {
+                resultIcon.textContent = result.icon;
+                if (result.iconColor)
+                    resultIcon.style.color = result.iconColor;
+            }
+            else {
+                const icon = getFileIcon(result.id);
+                resultIcon.textContent = icon.glyph;
+                if (icon.color)
+                    resultIcon.style.color = icon.color;
+            }
         }
         resultIconContainer.appendChild(resultIcon);
         li.appendChild(resultIconContainer);
@@ -409,7 +956,10 @@ export const toolbarPanel = (view) => {
         li.addEventListener("mousedown", (ev) => {
             ev.preventDefault();
         });
-        li.addEventListener("click", () => selectResult(result));
+        li.addEventListener("click", (ev) => {
+            ev.stopPropagation();
+            selectResult(result);
+        });
         return li;
     };
     function updateDropdown() {
@@ -420,9 +970,17 @@ export const toolbarPanel = (view) => {
             children.push(renderItem(result, i));
         });
         resultsList.replaceChildren(...children);
+        // Scroll the selected item into view
+        const selected = resultsList.querySelector('.selected');
+        if (selected) {
+            selected.scrollIntoView({ block: 'nearest' });
+        }
     }
     function selectResult(result) {
-        if (isBrowseEntry(result)) {
+        if (isSettingsEntry(result)) {
+            handleSettingsEntry(result);
+        }
+        else if (isBrowseEntry(result)) {
             navigateBrowse(result);
         }
         else if (isCommandResult(result)) {
@@ -434,7 +992,10 @@ export const toolbarPanel = (view) => {
     }
     function updateStateIcon() {
         if (namingMode.active) {
-            stateIcon.textContent = namingMode.type === 'create-file' ? DEFAULT_FILE_ICON : '\uf044';
+            stateIcon.textContent = (namingMode.type === 'create-file' || namingMode.type === 'save-as') ? DEFAULT_FILE_ICON : '\uf044';
+        }
+        else if (settingsMode.active) {
+            stateIcon.textContent = COG_ICON;
         }
         else {
             stateIcon.textContent = SEARCH_ICON;
@@ -467,6 +1028,8 @@ export const toolbarPanel = (view) => {
         input.placeholder = '';
         input.focus();
         await refreshBrowseEntries();
+        // Ensure click-outside listener is active
+        document.addEventListener("click", handleClickOutside);
     }
     async function refreshBrowseEntries() {
         if (!browseMode.active)
@@ -570,35 +1133,47 @@ export const toolbarPanel = (view) => {
         fileInput.click();
     }
     function handleCommandResult(command) {
-        if (command.type === 'open-file') {
+        if (command.type === 'settings') {
+            enterSettingsMode();
+            return;
+        }
+        else if (command.type === 'open-file') {
             enterBrowseMode();
             return;
         }
+        else if (command.type === 'open-terminal') {
+            safeDispatch(view, { effects: setSearchResults.of([]) });
+            import('./terminal').then(({ openTerminal }) => openTerminal(view));
+            return;
+        }
+        else if (command.type === 'save-as') {
+            if (command.requiresInput) {
+                const ext = command.query ? languageToFileExtension(command.query) : undefined;
+                enterNamingMode('save-as', command.query, ext);
+            }
+            else {
+                const pathToOpen = command.query.includes('.') ? command.query : `${command.query}.txt`;
+                input.value = pathToOpen;
+                checkOverwriteAndExecute(pathToOpen, 'save-as', () => createAndOpenFile(pathToOpen));
+            }
+        }
         else if (command.type === 'create-file') {
             if (command.requiresInput) {
-                // Enter naming mode for language-specific file
-                enterNamingMode('create-file', command.query, command.query);
+                const ext = command.query ? languageToFileExtension(command.query) : undefined;
+                enterNamingMode('create-file', command.query, ext);
             }
             else {
-                // Create file directly and populate toolbar
                 const pathToOpen = command.query.includes('.') ? command.query : `${command.query}.txt`;
                 input.value = pathToOpen;
-                safeDispatch(view, {
-                    effects: [setSearchResults.of([]), openFileEffect.of({ path: pathToOpen })]
-                });
+                checkOverwriteAndExecute(pathToOpen, 'create-file', () => createBlankFile(pathToOpen));
             }
         }
         else if (command.type === 'rename-file') {
-            // Rename file directly since the new name is provided by the query
             const currentFile = view.state.field(currentFileField);
             if (currentFile.path) {
                 const newPath = command.query.includes('.') ? command.query : `${command.query}.txt`;
                 input.value = newPath;
-                // TODO: Implement actual file rename logic
-                console.log(`Rename ${currentFile.path} to ${newPath}`);
-                safeDispatch(view, {
-                    effects: [setSearchResults.of([]), openFileEffect.of({ path: newPath })]
-                });
+                checkOverwriteAndExecute(newPath, 'rename', () => performRename(currentFile.path, newPath), currentFile.path);
             }
         }
         else if (command.type === 'import-local-files') {
@@ -607,6 +1182,10 @@ export const toolbarPanel = (view) => {
         else if (command.type === 'import-local-folder') {
             triggerFileImport(true);
         }
+        else if (command.type === 'file-action' && command.action) {
+            safeDispatch(view, { effects: setSearchResults.of([]) });
+            command.action(view);
+        }
     }
     function handleSearchResult(result) {
         input.value = result.id;
@@ -614,40 +1193,67 @@ export const toolbarPanel = (view) => {
             effects: [setSearchResults.of([]), openFileEffect.of({ path: result.id })]
         });
     }
+    /** Save the current editor content to a new file path in the VFS, then open it. */
+    async function createAndOpenFile(pathToOpen) {
+        const { fs } = view.state.facet(CodeblockFacet);
+        const content = view.state.doc.toString();
+        const dir = pathToOpen.substring(0, pathToOpen.lastIndexOf('/'));
+        if (dir)
+            await fs.mkdir(dir, { recursive: true }).catch(() => { });
+        await fs.writeFile(pathToOpen, content).catch(console.error);
+        // Add to search index
+        const { index } = view.state.facet(CodeblockFacet);
+        if (index) {
+            index.add(pathToOpen);
+            if (index.savePath)
+                index.save(fs, index.savePath);
+        }
+        safeDispatch(view, {
+            effects: [setSearchResults.of([]), openFileEffect.of({ path: pathToOpen })]
+        });
+    }
     function executeNamingMode(filename) {
         if (!namingMode.active || !filename.trim())
             return;
-        if (namingMode.type === 'create-file') {
-            const pathToOpen = namingMode.languageExtension && !filename.includes('.')
-                ? `${filename}.${namingMode.languageExtension}`
-                : filename;
+        const resolvePath = (fn) => namingMode.languageExtension && !fn.includes('.')
+            ? `${fn}.${namingMode.languageExtension}`
+            : fn;
+        if (namingMode.type === 'save-as') {
+            const pathToOpen = resolvePath(filename);
             input.value = pathToOpen;
-            // TODO: handle edge-cases like trying to create folders, invalid characters, etc.
-            safeDispatch(view, {
-                effects: [setSearchResults.of([]), openFileEffect.of({ path: pathToOpen })]
-            });
+            exitNamingMode();
+            checkOverwriteAndExecute(pathToOpen, 'save-as', () => createAndOpenFile(pathToOpen));
+            return;
+        }
+        else if (namingMode.type === 'create-file') {
+            const pathToOpen = resolvePath(filename);
+            input.value = pathToOpen;
+            exitNamingMode();
+            checkOverwriteAndExecute(pathToOpen, 'create-file', () => createBlankFile(pathToOpen));
+            return;
         }
         else if (namingMode.type === 'rename-file') {
             const currentFile = view.state.field(currentFileField);
             if (currentFile.path) {
                 const newPath = filename.includes('.') ? filename : `${filename}.txt`;
                 input.value = newPath;
-                // TODO: Implement actual file rename logic
-                console.log(`Rename ${currentFile.path} to ${newPath}`);
-                safeDispatch(view, {
-                    effects: [setSearchResults.of([]), openFileEffect.of({ path: newPath })]
-                });
+                exitNamingMode();
+                checkOverwriteAndExecute(newPath, 'rename', () => performRename(currentFile.path, newPath), currentFile.path);
+                return;
             }
         }
         exitNamingMode();
     }
     function resetInputToCurrentFile() {
         const currentFile = view.state.field(currentFileField);
-        input.value = currentFile.path || '';
+        const cfg = view.state.facet(CodeblockFacet);
+        input.value = currentFile.path || cfg.language || '';
     }
     // Close dropdown when clicking outside
     function handleClickOutside(event) {
         if (!dom.contains(event.target)) {
+            if (settingsMode.active)
+                exitSettingsMode();
             if (browseMode.active)
                 exitBrowseMode();
             safeDispatch(view, { effects: setSearchResults.of([]) });
@@ -655,34 +1261,52 @@ export const toolbarPanel = (view) => {
         }
     }
     input.addEventListener("click", () => {
+        // Don't interfere when in a special mode
+        if (namingMode.active || settingsMode.active || browseMode.active) {
+            return;
+        }
         // Open dropdown when input is clicked
-        if (!namingMode.active) {
-            const query = input.value;
-            let results = [];
-            if (query.trim()) {
-                // Get regular search results from index first
-                const searchResults = (index?.search(query) || []).slice(0, 100);
-                // Add command results (passing search results to check for existing files)
-                const commands = createCommandResults(query, view, searchResults);
-                // Search results first, then commands
-                results = searchResults.concat(commands);
-            }
-            else {
-                // Show import commands when dropdown opens with empty query
-                results = createCommandResults('', view, []);
-            }
-            safeDispatch(view, { effects: setSearchResults.of(results) });
-            // Add click-outside listener when dropdown opens
-            document.addEventListener("click", handleClickOutside);
+        const query = input.value;
+        let results = [];
+        if (query.trim()) {
+            // Get regular search results from index first
+            const searchResults = (index?.search(query) || []).slice(0, 100);
+            // Add command results (passing search results to check for existing files)
+            const commands = createCommandResults(query, view, searchResults);
+            // Search results first, then commands
+            results = searchResults.concat(commands);
         }
+        else {
+            // Show import commands when dropdown opens with empty query
+            results = createCommandResults('', view, []);
+        }
+        safeDispatch(view, { effects: setSearchResults.of(results) });
+        // Add click-outside listener when dropdown opens
+        document.addEventListener("click", handleClickOutside);
     });
     input.addEventListener("input", (event) => {
         const query = event.target.value;
         selectedIndex = 0;
+        // Block input during delete/overwrite confirmation
+        if (deleteMode.active || overwriteMode.active) {
+            input.value = '';
+            return;
+        }
         // If in naming mode, don't show search results
         if (namingMode.active) {
             return;
         }
+        // If editing a settings value, don't interfere
+        if (settingsMode.active && settingsMode.editing) {
+            return;
+        }
+        // If in settings mode, filter the settings entries
+        if (settingsMode.active) {
+            const prefix = 'settings/';
+            settingsMode.filter = query.startsWith(prefix) ? query.slice(prefix.length) : query;
+            refreshSettingsEntries();
+            return;
+        }
         // If in browse mode, filter the directory entries
         if (browseMode.active) {
             // Extract filter text after the directory path prefix
@@ -708,6 +1332,35 @@ export const toolbarPanel = (view) => {
         safeDispatch(view, { effects: setSearchResults.of(results) });
     });
     input.addEventListener("keydown", (event) => {
+        // Overwrite confirmation mode
+        if (overwriteMode.active) {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                confirmOverwrite();
+            }
+            else if (event.key === "Escape") {
+                event.preventDefault();
+                exitOverwriteMode();
+                resetInputToCurrentFile();
+            }
+            event.preventDefault();
+            return;
+        }
+        // Delete confirmation mode
+        if (deleteMode.active) {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                confirmDelete();
+            }
+            else if (event.key === "Escape") {
+                event.preventDefault();
+                exitDeleteMode();
+                resetInputToCurrentFile();
+            }
+            // Block all other keys in delete mode
+            event.preventDefault();
+            return;
+        }
         if (namingMode.active) {
             // Handle naming mode
             if (event.key === "Enter") {
@@ -721,6 +1374,57 @@ export const toolbarPanel = (view) => {
             }
             return;
         }
+        // Settings mode keyboard handling
+        if (settingsMode.active) {
+            const results = view.state.field(searchResultsField);
+            // If currently editing a settings value
+            if (settingsMode.editing) {
+                if (event.key === "Enter") {
+                    event.preventDefault();
+                    confirmSettingsEdit();
+                }
+                else if (event.key === "Escape") {
+                    event.preventDefault();
+                    cancelSettingsEdit();
+                }
+                return;
+            }
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                if (results.length) {
+                    selectedIndex = mod(selectedIndex + 1, results.length);
+                    updateDropdown();
+                }
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                if (results.length) {
+                    selectedIndex = mod(selectedIndex - 1, results.length);
+                    updateDropdown();
+                }
+            }
+            else if (event.key === "Enter" && results.length && selectedIndex >= 0) {
+                event.preventDefault();
+                selectResult(results[selectedIndex]);
+            }
+            else if (event.key === "Backspace") {
+                // If filter is empty and not editing, exit settings mode
+                if (settingsMode.filter === '') {
+                    event.preventDefault();
+                    exitSettingsMode();
+                    safeDispatch(view, { effects: setSearchResults.of([]) });
+                    resetInputToCurrentFile();
+                }
+            }
+            else if (event.key === "Escape") {
+                event.preventDefault();
+                exitSettingsMode();
+                safeDispatch(view, { effects: setSearchResults.of([]) });
+                resetInputToCurrentFile();
+                input.blur();
+            }
+            return;
+        }
         // Browse mode keyboard handling
         if (browseMode.active) {
             const results = view.state.field(searchResultsField);
@@ -753,6 +1457,15 @@ export const toolbarPanel = (view) => {
                     refreshBrowseEntries();
                 }
             }
+            else if (event.key === "Delete" && results.length && selectedIndex >= 0) {
+                // Delete a file from the browse dropdown
+                const result = results[selectedIndex];
+                if (isBrowseEntry(result) && result.type === 'browse-file') {
+                    event.preventDefault();
+                    exitBrowseMode();
+                    enterDeleteMode(result.fullPath);
+                }
+            }
             else if (event.key === "Escape") {
                 event.preventDefault();
                 exitBrowseMode();
@@ -786,6 +1499,14 @@ export const toolbarPanel = (view) => {
             event.preventDefault();
             selectResult(results[selectedIndex]);
         }
+        else if (event.key === "Delete" && results.length && selectedIndex >= 0) {
+            // Delete key on a highlighted file result → enter delete confirmation
+            const result = results[selectedIndex];
+            if (!isCommandResult(result) && !isBrowseEntry(result) && !isSettingsEntry(result)) {
+                event.preventDefault();
+                enterDeleteMode(result.id);
+            }
+        }
         else if (event.key === "Escape") {
             event.preventDefault();
             safeDispatch(view, { effects: setSearchResults.of([]) });
@@ -810,43 +1531,78 @@ export const toolbarPanel = (view) => {
             // Apply settings when they change
             const prevSettings = update.startState.field(settingsField);
             const nextSettings = update.state.field(settingsField);
-            if (prevSettings.fontSize !== nextSettings.fontSize || prevSettings.fontFamily !== nextSettings.fontFamily) {
+            if (prevSettings.fontSize !== nextSettings.fontSize || prevSettings.fontFamily !== nextSettings.fontFamily || prevSettings.maxVisibleLines !== nextSettings.maxVisibleLines) {
                 applySettings();
             }
             if (prevSettings.lspLogEnabled !== nextSettings.lspLogEnabled) {
                 updateLspLogVisibility();
                 // Close the log overlay if the user disables it
-                if (!nextSettings.lspLogEnabled && activeOverlayType === 'lsp-log') {
-                    closeOverlay();
+                if (!nextSettings.lspLogEnabled && lspLogOverlay) {
+                    closeLspLogOverlay();
                 }
             }
-            // Update loading indicator with minimum animation duration
+            // Sync autoHideToolbar via JS event handlers
+            if (prevSettings.autoHideToolbar !== nextSettings.autoHideToolbar) {
+                if (nextSettings.autoHideToolbar)
+                    enableAutoHide();
+                else
+                    disableAutoHide();
+            }
+            // Deferred auto-hide init (needs parent element to be mounted)
+            if (autoHidePendingInit && getPanelsTop()) {
+                autoHidePendingInit = false;
+                enableAutoHide();
+            }
+            // Refresh gutter width variables when gutter-related settings change
+            if (prevSettings.showLineNumbers !== nextSettings.showLineNumbers || prevSettings.showFoldGutter !== nextSettings.showFoldGutter) {
+                queueMicrotask(() => updateGutterWidthVariables());
+            }
+            // Refresh settings dropdown when settings change and settings mode is active
+            if (settingsMode.active && prevSettings !== nextSettings) {
+                refreshSettingsEntries();
+            }
+            // Loading spinner — separate element so the container keeps
+            // tracking gutter width while the spinner has fixed dimensions.
             const prevFile = update.startState.field(currentFileField);
             const nextFile = update.state.field(currentFileField);
             if (prevFile.loading !== nextFile.loading) {
                 if (nextFile.loading) {
-                    loadingStartTime = Date.now();
-                    stateIcon.textContent = ''; // clear glyph; CSS border spinner handles the visual
-                    stateIcon.classList.add('cm-loading');
+                    // Immediately swap icon → spinner (no delay to avoid race conditions)
+                    stateIcon.style.display = 'none';
+                    stateIcon.style.opacity = '0';
+                    if (!stateIconContainer.querySelector('.cm-loading')) {
+                        const spinner = document.createElement('div');
+                        spinner.className = 'cm-loading';
+                        stateIconContainer.appendChild(spinner);
+                    }
                 }
                 else {
-                    const elapsed = loadingStartTime ? Date.now() - loadingStartTime : Infinity;
-                    const remaining = Math.max(0, MIN_LOADING_MS - elapsed);
-                    loadingStartTime = null;
-                    setTimeout(() => {
-                        if (!view.state.field(currentFileField).loading) {
-                            stateIcon.textContent = SEARCH_ICON;
-                            stateIcon.classList.remove('cm-loading');
-                        }
-                    }, remaining);
+                    // Fade spinner out, then crossfade icon in
+                    const spinner = stateIconContainer.querySelector('.cm-loading');
+                    if (spinner) {
+                        spinner.style.opacity = '0';
+                        setTimeout(() => {
+                            spinner.remove();
+                            if (!view.state.field(currentFileField).loading) {
+                                stateIcon.style.display = '';
+                                // Force reflow so the browser sees opacity:0 before transitioning to 1
+                                stateIcon.offsetHeight;
+                                stateIcon.style.opacity = '1';
+                            }
+                        }, SPINNER_FADE_MS);
+                    }
+                    else {
+                        stateIcon.style.display = '';
+                        stateIcon.style.opacity = '1';
+                    }
                 }
             }
             // Update LSP log icon when file changes
             if (prevFile.path !== nextFile.path) {
                 updateLspLogIcon();
             }
-            // Sync input value when file path changes (unless overlay is open or user is naming)
-            if (prevFile.path !== nextFile.path && !namingMode.active && !activeOverlayType) {
+            // Sync input value when file path changes (unless overlay/mode is active or user is naming)
+            if (prevFile.path !== nextFile.path && !namingMode.active && !lspLogOverlay && !settingsMode.active) {
                 input.value = nextFile.path || '';
             }
         },
@@ -854,8 +1610,11 @@ export const toolbarPanel = (view) => {
             // Clean up event listeners when panel is destroyed
             document.removeEventListener("click", handleClickOutside);
             systemThemeQuery.removeEventListener('change', handleSystemThemeChange);
-            // Clean up overlay
-            closeOverlay();
+            // Clean up auto-hide
+            if (autoHideEnabled)
+                disableAutoHide();
+            // Clean up LSP log overlay
+            closeLspLogOverlay();
             // Clean up ResizeObserver
             if (gutterObserver) {
                 gutterObserver.disconnect();