blots-editor 0.0.13 → 0.0.14

package/dist/view/command-bar.js

@@ -6,7 +6,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
  * element, so it exclusively owns the keyboard while open — the editor's
  * bindings (including the insert-mode `*` wildcard) stay dormant.
  */
-export function CommandBar() {
+export function CommandBar({ session = null }) {
     const ctx = useContext(ModalLayerElementContext);
     const { t } = useI18n();
     const { boundKeyboard, setMode } = useKeyboard();
@@ -40,6 +40,15 @@ export function CommandBar() {
                 setMode("insert");
                 back();
             }
+            else if (cmd === "save") {
+                // The session records the result as an info-bar message.
+                if (session?.save().ok) {
+                    closeModalLayer(ctx.modalLayer.layerId);
+                }
+                else if (session) {
+                    setError(session.message?.text ?? t("command.saveError"));
+                }
+            }
             else if (cmd) {
                 setError(t("command.unknown", { params: { cmd } }));
             }
@@ -47,7 +56,7 @@ export function CommandBar() {
         return () => {
             unbinds.forEach((fn) => fn());
         };
-    }, [boundKeyboard, closeModalLayer, ctx, setMode, t]);
+    }, [boundKeyboard, closeModalLayer, ctx, session, setMode, t]);
     return (React.createElement(Box, { flexDirection: "row", width: "100%", height: 1, paddingLeft: 1, backgroundColor: "black" },
         React.createElement(Text, { color: "green" }, ":"),
         React.createElement(Text, null, input),

package/dist/view/editor-setting.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * In-editor menu (regular layer element, opened from the toolbar's Settings
+ * button). Two mouse-clickable buttons: "Settings" opens the settings panel
+ * as its own layer on top, "Exit" navigates back to the main menu. Esc
+ * closes this layer.
+ */
+export declare function EditorSetting(): React.JSX.Element;

package/dist/view/editor-setting.js

@@ -0,0 +1,69 @@
+import { Box, Text } from "ink";
+import { applyElement, back, closeLayer, LayerElementContext, openLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { SettingsEntries } from "./settings.js";
+import { ModalFrame } from "./modal-frame.js";
+/** Layer hosting the settings panel, opened on top of the menu layer. */
+const SETTINGS_PANEL_LAYER_ID = "settings-panel";
+const SETTINGS_PANEL_Z_INDEX = 3;
+/** Full-width menu button: bold border, editor background, green hover.
+ *  priority 1: the button lives inside the draggable ModalFrame and must win
+ *  the hit test over the overlapping frame region. */
+function MenuButton({ label, active, onEnter, onLeave, onClick }) {
+    const ref = useMouseRegion({ onEnter, onLeave, onClick }, { priority: 1 });
+    return (React.createElement(Box, { ref: ref, borderStyle: "bold", borderColor: active ? "green" : "white", borderBackgroundColor: "#1e1e1e", backgroundColor: "#1e1e1e", height: 3, width: "100%", justifyContent: "center", alignItems: "center" },
+        React.createElement(Text, null, label)));
+}
+/**
+ * The settings panel as its own layer, opened from the editor menu's
+ * "Settings" button. Same entries as the settings screen; the Back button
+ * (or Esc) closes this layer and returns to the menu layer underneath.
+ */
+function SettingsPanel() {
+    const ctx = useContext(LayerElementContext);
+    const { t } = useI18n();
+    const [hovered, setHovered] = useState(false);
+    const close = useCallback(() => {
+        if (ctx) {
+            closeLayer(ctx.layer.layerId);
+        }
+    }, [ctx]);
+    return (React.createElement(ModalFrame, { title: t("settings.title"), width: 44, footer: React.createElement(Text, { dimColor: true },
+            t("settings.back"),
+            " (Esc)") },
+        React.createElement(SettingsEntries, { onExit: close }),
+        React.createElement(MenuButton, { label: t("settings.back"), active: hovered, onEnter: () => setHovered(true), onLeave: () => setHovered(false), onClick: close })));
+}
+/**
+ * In-editor menu (regular layer element, opened from the toolbar's Settings
+ * button). Two mouse-clickable buttons: "Settings" opens the settings panel
+ * as its own layer on top, "Exit" navigates back to the main menu. Esc
+ * closes this layer.
+ */
+export function EditorSetting() {
+    const ctx = useContext(LayerElementContext);
+    const { t } = useI18n();
+    const { boundKeyboard } = useKeyboard();
+    const [hovered, setHovered] = useState(null);
+    const close = useCallback(() => {
+        if (ctx) {
+            closeLayer(ctx.layer.layerId);
+        }
+    }, [ctx]);
+    const openSettings = useCallback(() => {
+        openLayer(SETTINGS_PANEL_LAYER_ID, SETTINGS_PANEL_Z_INDEX);
+        applyElement(SETTINGS_PANEL_LAYER_ID, {
+            elementId: "settings-panel",
+            element: SettingsPanel,
+        });
+    }, []);
+    useEffect(() => {
+        return boundKeyboard(["escape"], close);
+    }, [boundKeyboard, close]);
+    return (React.createElement(ModalFrame, { title: t("editor.setting.title"), width: 34 },
+        React.createElement(MenuButton, { label: t("editor.setting.openSetting"), active: hovered === "setting", onEnter: () => setHovered("setting"), onLeave: () => setHovered((h) => (h === "setting" ? null : h)), onClick: openSettings }),
+        React.createElement(MenuButton, { label: t("editor.setting.exit"), active: hovered === "exit", onEnter: () => setHovered("exit"), onLeave: () => setHovered((h) => (h === "exit" ? null : h)), onClick: () => {
+                close();
+                back();
+            } })));
+}

package/dist/view/editor.js

@@ -1,16 +1,24 @@
 import { Box, Text, useBoxMetrics, useCursor } from "ink";
-import { applyElement, applyElementToModalLayer, closeLayer, openLayer, openModalLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
+import { applyElement, applyElementToModalLayer, closeLayer, eraseElement, openLayer, openModalLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { EditorController } from "../core/editor-controller.js";
+import { EditorSession } from "../core/session.js";
 import { useSettings } from "../core/settings/useSettings.js";
 import { clickToPosition } from "./click-mapping.js";
 import { CommandBar } from "./command-bar.js";
+import { EditorSetting } from "./editor-setting.js";
+import { FileTree } from "./file-tree.js";
 import { InformationBar } from "./information-bar.js";
 import { ToolBar } from "./tool-bar.js";
 /** Layer hosting the floating toolbar; below modal layers so it never
  *  intercepts keys meant for a modal (e.g. the command bar). */
 const TOOLBAR_LAYER_ID = "toolbar";
 const TOOLBAR_Z_INDEX = 1;
+/** Layer hosting the file tree; a regular layer like the toolbar. */
+const FILETREE_LAYER_ID = "file-tree";
+const FILETREE_Z_INDEX = 1;
+/** Layer hosting the in-editor settings overlay (above the other panes). */
+const EDITOR_SETTINGS_LAYER_ID = "editor-settings";
+const EDITOR_SETTINGS_Z_INDEX = 2;
 /**
  * Main editor view: renders the status bar + line numbers + text, routes
  * every keystroke to the controller as a named command, and splits
@@ -18,17 +26,26 @@ const TOOLBAR_Z_INDEX = 1;
  * hjkl + arrow-key movement and the `:` command bar.
  */
 export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cursorOffset = 0, cursorHeightOffset = 2, numberOfIndentationSpaces = 2, }) {
-    const controllerRef = useRef(null);
-    if (!controllerRef.current) {
-        controllerRef.current = new EditorController(initialText, {
+    // One file session per editor mount; `Document.setText` keeps the
+    // controller instance stable across file opens, so bindings stay live.
+    const sessionRef = useRef(null);
+    if (!sessionRef.current) {
+        sessionRef.current = new EditorSession(initialText, {
             indentWidth: numberOfIndentationSpaces,
         });
     }
-    const controller = controllerRef.current;
+    const session = sessionRef.current;
+    const controller = session.controller;
     const [, forceUpdate] = useState(0);
     useEffect(() => {
-        return controller.onChange(() => forceUpdate((n) => n + 1));
-    }, [controller]);
+        const unbindDoc = controller.onChange(() => forceUpdate((n) => n + 1));
+        // File opens/saves notify the session, not the controller.
+        const unbindSession = session.onChange(() => forceUpdate((n) => n + 1));
+        return () => {
+            unbindDoc();
+            unbindSession();
+        };
+    }, [controller, session]);
     const { setCursorPosition } = useCursor();
     const { boundKeyboard, enableWildcardPriority, getCurrentMode, registryCompositionKey, removeCompositionKey, setMode, } = useKeyboard();
     const { t } = useI18n();
@@ -45,8 +62,9 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         applyElementToModalLayer("command", {
             elementId: "command-input",
             element: CommandBar,
+            props: { session },
         });
-    }, []);
+    }, [session]);
     // The toolbar lives in a regular layer (below modal layers) so it floats
     // above the document without taking over the keyboard. The editor owns the
     // layer lifecycle and the ctrl+tab toggle because the layer's element
@@ -60,6 +78,12 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
     // dispatcher registration and openLayer would throw. ctrl+tab toggles hit
     // the same deferred path — the one-tick delay is imperceptible. Closing is
     // safe immediately because the dispatcher is registered by then.
+    // The file tree pane (right side) toggles via the toolbar's File Tree
+    // button; it defaults to open so the editor greets the user with a tree.
+    const [fileTreeOpen, setFileTreeOpen] = useState(true);
+    // The in-editor settings overlay toggles via the toolbar's Settings
+    // button; the overlay itself closes via its Exit button or Esc.
+    const [settingsOpen, setSettingsOpen] = useState(false);
     useEffect(() => {
         if (!toolbarOpen) {
             closeLayer(TOOLBAR_LAYER_ID);
@@ -67,14 +91,63 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         }
         const timer = setTimeout(() => {
             openLayer(TOOLBAR_LAYER_ID, TOOLBAR_Z_INDEX);
+            // applyElement ignores re-applies of an existing element id, so
+            // erase first — otherwise prop updates (mode, fileTreeOpen) would
+            // never reach the mounted toolbar. The toolbar's drag position
+            // survives the remount via the external position store.
+            eraseElement(TOOLBAR_LAYER_ID, "toolbar");
             applyElement(TOOLBAR_LAYER_ID, {
                 elementId: "toolbar",
                 element: ToolBar,
-                props: { mode },
+                props: {
+                    mode,
+                    session,
+                    fileTreeOpen,
+                    onToggleFileTree: () => setFileTreeOpen((open) => !open),
+                    onOpenSettings: () => setSettingsOpen((open) => !open),
+                },
             });
         }, 0);
         return () => clearTimeout(timer);
-    }, [toolbarOpen, mode]);
+    }, [toolbarOpen, mode, session, fileTreeOpen, settingsOpen]);
+    useEffect(() => {
+        if (!fileTreeOpen) {
+            closeLayer(FILETREE_LAYER_ID);
+            return;
+        }
+        const timer = setTimeout(() => {
+            openLayer(FILETREE_LAYER_ID, FILETREE_Z_INDEX);
+            applyElement(FILETREE_LAYER_ID, {
+                elementId: "file-tree",
+                element: FileTree,
+                props: { session },
+            });
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [fileTreeOpen, session]);
+    // Both branches are deferred: settingsOpen starts false, and an immediate
+    // closeLayer on the first mount would race the provider's dispatcher
+    // registration (same child-first effect ordering as the toolbar open).
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (!settingsOpen) {
+                closeLayer(EDITOR_SETTINGS_LAYER_ID);
+                return;
+            }
+            openLayer(EDITOR_SETTINGS_LAYER_ID, EDITOR_SETTINGS_Z_INDEX);
+            applyElement(EDITOR_SETTINGS_LAYER_ID, {
+                elementId: "editor-settings",
+                element: EditorSetting,
+            });
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [settingsOpen]);
+    useEffect(() => {
+        return () => closeLayer(EDITOR_SETTINGS_LAYER_ID);
+    }, []);
+    useEffect(() => {
+        return () => closeLayer(FILETREE_LAYER_ID);
+    }, []);
     useEffect(() => {
         return boundKeyboard(["ctrl+tab"], () => setToolbarOpen((open) => !open));
     }, [boundKeyboard]);
@@ -133,6 +206,8 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         bind(["shift+G"], () => controller.execute("cursor.documentEnd"), { mode: "normal" });
         bind(["i"], () => switchMode("insert"), { mode: "normal" });
         bind([":"], () => openCommandBar(), { mode: "normal" });
+        // Ctrl+S saves in normal mode (Vim-style; insert stays untouched).
+        bind(["ctrl+s"], () => session.save(), { mode: "normal" });
         return () => {
             removeWildcard();
             unbinds.forEach((fn) => fn());
@@ -146,6 +221,7 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         registryCompositionKey,
         removeCompositionKey,
         switchMode,
+        session,
     ]);
     const ref = useRef(null);
     const { height, width } = useBoxMetrics(ref);
@@ -196,7 +272,7 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
     });
     const modeText = mode === "normal" ? t("editor.mode.normal") : t("editor.mode.insert");
     return (React.createElement(Box, { flexDirection: "column", height: "100%", width: "100%" },
-        React.createElement(InformationBar, { mode: modeText, cursor: { line: cursor.line, column: cursor.visual } }),
+        React.createElement(InformationBar, { mode: modeText, cursor: { line: cursor.line, column: cursor.visual }, session: session }),
         React.createElement(Box, { ref: mouseRef, flexGrow: 1, width: "100%", backgroundColor: "#1e1e1e" },
             React.createElement(Box, { ref: ref, height: "100%", width: "100%", flexDirection: "column" }, Array.from({ length: effectiveH }, (_, i) => {
                 const vline = visibleStart + i;
@@ -206,6 +282,6 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
                 }
                 return (React.createElement(Box, { key: vline, flexDirection: "row" },
                     React.createElement(Box, { width: lineNumberWidth, justifyContent: "flex-end", marginRight: lineNumberRightSpacing }, seg.first ? (React.createElement(Text, { bold: cursor.line === seg.line }, seg.line)) : null),
-                    React.createElement(Text, null, doc.getLine(seg.line).slice(seg.start, seg.end))));
+                    React.createElement(Text, null, seg.text)));
             })))));
 }

package/dist/view/file-tree.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { EditorSession } from "../core/session.js";
+export type FileTreeProps = {
+    /** The shared file session; clicking a file opens it here. */
+    session: EditorSession;
+};
+/**
+ * VSCode-style file tree pinned to the right edge of the terminal (regular
+ * layer element). Recursively scans the configured root directory once per
+ * settings change; directories expand/collapse on click, files open in the
+ * editor (with an unsaved-changes prompt when the buffer is dirty). Scrolling
+ * is mouse-wheel only; the pane is fixed — not draggable — and stays below
+ * the information bar.
+ */
+export declare function FileTree({ session }: FileTreeProps): React.JSX.Element;

package/dist/view/file-tree.js

@@ -0,0 +1,217 @@
+import { Box, Text, useWindowSize } from "ink";
+import { applyElementToModalLayer, ModalLayerElementContext, openModalLayer, useI18n, useKeyboard, useMouseRegion, useScreenSystem, } from "ink-cartridge";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { basename } from "node:path";
+import stringWidth from "string-width";
+import { clearFileTreeCache, flattenTree, resolveFileTreeRoot, scanDirectoryCached, toggleExpanded, } from "../core/file-tree-model.js";
+import { useSettings } from "../core/settings/useSettings.js";
+import { ModalFrame } from "./modal-frame.js";
+import { setTreeWidth } from "./tree-width-store.js";
+/** Narrowest the pane can be; wide enough for short names. */
+const MIN_TREE_WIDTH = 24;
+/** Widest the pane can be — the editor keeps at least 20 columns. */
+const MAX_TREE_WIDTH = 60;
+/**
+ * VSCode-style file tree pinned to the right edge of the terminal (regular
+ * layer element). Recursively scans the configured root directory once per
+ * settings change; directories expand/collapse on click, files open in the
+ * editor (with an unsaved-changes prompt when the buffer is dirty). Scrolling
+ * is mouse-wheel only; the pane is fixed — not draggable — and stays below
+ * the information bar.
+ */
+export function FileTree({ session }) {
+    const { rows, columns } = useWindowSize();
+    const { settings } = useSettings();
+    const [expanded, setExpanded] = useState(() => new Set());
+    const [scrollTop, setScrollTop] = useState(0);
+    const [hoveredPath, setHoveredPath] = useState(null);
+    // scanTick bumps to force a re-scan — the cache never expires on its own.
+    const [scanTick, setScanTick] = useState(0);
+    const root = useMemo(() => {
+        // scanTick is a dependency only to force a re-scan on refresh.
+        void scanTick;
+        const resolved = resolveFileTreeRoot(settings.fileTree, process.cwd());
+        return resolved ? scanDirectoryCached(resolved) : null;
+    }, [settings.fileTree, scanTick]);
+    // A new scan (root path changed) starts collapsed at the top.
+    useEffect(() => {
+        setExpanded(new Set());
+        setScrollTop(0);
+    }, [root]);
+    const visibleRows = useMemo(() => (root ? flattenTree(root, expanded) : []), [root, expanded]);
+    const handleWheel = useCallback((event) => {
+        if (event.button === "wheel-up") {
+            setScrollTop((t) => Math.max(0, t - 1));
+        }
+        else if (event.button === "wheel-down") {
+            setScrollTop((t) => t + 1);
+        }
+    }, []);
+    const openFile = useCallback((path) => {
+        if (session.isDirty()) {
+            openUnsavedPrompt(session, path);
+        }
+        else {
+            session.open(path);
+        }
+    }, [session]);
+    const toggleDir = useCallback((path) => {
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            toggleExpanded(next, path);
+            return next;
+        });
+    }, []);
+    const containerRef = useMouseRegion({ onWheel: handleWheel });
+    // Manual refresh: the scan cache never expires on its own, so new files
+    // only appear after a click here (cache cleared + re-scan).
+    const [refreshHovered, setRefreshHovered] = useState(false);
+    const refreshRef = useMouseRegion({
+        onEnter: () => setRefreshHovered(true),
+        onLeave: () => setRefreshHovered(false),
+        onClick: () => {
+            clearFileTreeCache();
+            setScanTick((t) => t + 1);
+        },
+    });
+    const viewportRows = Math.max(1, rows - 4);
+    const visible = visibleRows.slice(scrollTop, scrollTop + viewportRows);
+    // Fit the pane to its widest visible line (indent + arrow + name), so
+    // long file names stay readable; capped so the editor keeps room.
+    const treeWidth = useMemo(() => {
+        const widest = visible.reduce((max, row) => Math.max(max, (row.depth - 1) * 2 + 2 + stringWidth(row.node.name)), 0);
+        const title = root ? stringWidth(basename(root.path)) : 0;
+        // +3 = row padding (1) + the two border cells.
+        const content = Math.max(widest, title) + 3;
+        return Math.min(Math.max(MIN_TREE_WIDTH, content), MAX_TREE_WIDTH);
+    }, [root, visible]);
+    // Publish the live width so the toolbar's drag clamp stays in sync
+    // (module store — the tree and toolbar are separate layer elements).
+    useEffect(() => {
+        setTreeWidth(treeWidth);
+    }, [treeWidth]);
+    return (React.createElement(Box, { ref: containerRef, position: "absolute", top: 1, left: columns - treeWidth, width: treeWidth, height: rows - 1, borderStyle: "bold", borderColor: "white", 
+        // Match the editor surface so the pane reads as part of it.
+        backgroundColor: "#1e1e1e", borderBackgroundColor: "#1e1e1e", flexDirection: "column" },
+        React.createElement(Box, { paddingLeft: 1, paddingTop: 1, flexDirection: "row" },
+            React.createElement(Text, { bold: true }, root ? basename(root.path) : "-"),
+            React.createElement(Box, { ref: refreshRef, marginLeft: 1 },
+                React.createElement(Text, { color: refreshHovered ? "green" : "gray" }, "\u21BB"))),
+        root ? (visible.map((row) => (React.createElement(TreeRow, { key: row.node.path, node: row.node, depth: row.depth, expanded: expanded.has(row.node.path), hovered: hoveredPath === row.node.path, onEnter: () => setHoveredPath(row.node.path), onLeave: () => setHoveredPath((h) => (h === row.node.path ? null : h)), onWheel: handleWheel, onClick: () => {
+                if (row.node.isDir) {
+                    toggleDir(row.node.path);
+                }
+                else {
+                    openFile(row.node.path);
+                }
+            } })))) : (React.createElement(Box, { paddingLeft: 1 },
+            React.createElement(Text, { dimColor: true }, "No directory")))));
+}
+/**
+ * One tree line: indent + expand arrow (dirs) + name. The arrow follows the
+ * expansion state: collapsed dirs point right, expanded ones point down
+ * (VSCode convention); empty dirs show no arrow. Wheel events are forwarded
+ * so scrolling works while the cursor is over a row — the engine delivers
+ * wheel to the top hit region only.
+ */
+function TreeRow({ node, depth, expanded, hovered, onEnter, onLeave, onWheel, onClick }) {
+    const ref = useMouseRegion({ onEnter, onLeave, onClick, onWheel }, { priority: 1 });
+    const hasChildren = (node.children?.length ?? 0) > 0;
+    const arrow = node.isDir
+        ? hasChildren
+            ? expanded
+                ? "▾ "
+                : "▸ "
+            : "  "
+        : "  ";
+    // The root is not rendered, so depth starts at 1; each level adds one indent.
+    const indent = "  ".repeat(Math.max(0, depth - 1));
+    return (React.createElement(Box, { ref: ref, paddingLeft: 1 },
+        React.createElement(Text, { inverse: hovered, bold: node.isDir },
+            indent,
+            arrow,
+            node.name)));
+}
+/** One button of the unsaved-changes prompt (mouse + keyboard hotkey). */
+function PromptButton({ label, hotkey, active, onEnter, onLeave, onClick }) {
+    const ref = useMouseRegion({ onEnter, onLeave, onClick }, { priority: 1 });
+    return (React.createElement(Box, { ref: ref, paddingLeft: 1, paddingRight: 1 },
+        React.createElement(Text, { inverse: active },
+            label,
+            " (",
+            hotkey,
+            ")")));
+}
+/**
+ * Modal "unsaved changes" prompt with three choices (Save / Discard /
+ * Cancel), opened when a file-tree click would discard a dirty buffer.
+ * Keyboard: s / d / c (Esc also cancels); the buttons are mouse-clickable.
+ */
+function UnsavedPrompt({ title, onSave, onDiscard, onCancel }) {
+    const ctx = useContext(ModalLayerElementContext);
+    const { t } = useI18n();
+    const { boundKeyboard } = useKeyboard();
+    const { closeModalLayer } = useScreenSystem();
+    const [hovered, setHovered] = useState(null);
+    const close = useCallback(() => {
+        if (ctx) {
+            closeModalLayer(ctx.modalLayer.layerId);
+        }
+    }, [closeModalLayer, ctx]);
+    useEffect(() => {
+        if (!ctx) {
+            return;
+        }
+        const unbinds = [
+            boundKeyboard(["s"], () => {
+                close();
+                onSave();
+            }, { elementId: ctx.id }),
+            boundKeyboard(["d"], () => {
+                close();
+                onDiscard();
+            }, { elementId: ctx.id }),
+            boundKeyboard(["c", "escape"], () => {
+                close();
+                onCancel();
+            }, { elementId: ctx.id }),
+        ];
+        return () => unbinds.forEach((fn) => fn());
+    }, [boundKeyboard, close, ctx, onCancel, onDiscard, onSave]);
+    return (React.createElement(ModalFrame, { title: title },
+        React.createElement(Box, { flexDirection: "row", gap: 2 },
+            React.createElement(PromptButton, { label: t("confirm.save"), hotkey: "s", active: hovered === "save", onEnter: () => setHovered("save"), onLeave: () => setHovered((h) => (h === "save" ? null : h)), onClick: () => {
+                    close();
+                    onSave();
+                } }),
+            React.createElement(PromptButton, { label: t("confirm.discard"), hotkey: "d", active: hovered === "discard", onEnter: () => setHovered("discard"), onLeave: () => setHovered((h) => (h === "discard" ? null : h)), onClick: () => {
+                    close();
+                    onDiscard();
+                } }),
+            React.createElement(PromptButton, { label: t("confirm.cancel"), hotkey: "c", active: hovered === "cancel", onEnter: () => setHovered("cancel"), onLeave: () => setHovered((h) => (h === "cancel" ? null : h)), onClick: () => {
+                    close();
+                    onCancel();
+                } }))));
+}
+/**
+ * Open the unsaved-changes prompt; on Save the buffer is written first and
+ * only then is the target file loaded (a failed save keeps the editor put).
+ */
+function openUnsavedPrompt(session, targetPath) {
+    openModalLayer("unsaved", 100);
+    applyElementToModalLayer("unsaved", {
+        elementId: "unsaved-prompt",
+        element: UnsavedPrompt,
+        props: {
+            title: "Unsaved changes",
+            onSave: () => {
+                const saved = session.save();
+                if (saved.ok) {
+                    session.open(targetPath);
+                }
+            },
+            onDiscard: () => session.open(targetPath),
+            onCancel: () => { },
+        },
+    });
+}

package/dist/view/information-bar.d.ts

@@ -1,10 +1,16 @@
 import React from "react";
+import type { EditorSession } from "../core/session.js";
 export type InformationBarProps = {
     mode: string;
     cursor?: {
         line: number;
         column: number;
     };
+    /** File session: drives the file name, dirty marker, and save messages. */
+    session?: EditorSession | null;
 };
-/** Status bar: current mode (live) plus the cursor's 1-based position. */
-export declare function InformationBar({ mode, cursor }: InformationBarProps): React.JSX.Element;
+/**
+ * Status bar: current mode, cursor position, and (with a session) the open
+ * file name with a dirty marker plus the last save/open result message.
+ */
+export declare function InformationBar({ mode, cursor, session }: InformationBarProps): React.JSX.Element;

package/dist/view/information-bar.js

@@ -1,7 +1,21 @@
 import { Box, Text } from "ink";
-import React from "react";
-/** Status bar: current mode (live) plus the cursor's 1-based position. */
-export function InformationBar({ mode, cursor }) {
+import React, { useEffect, useState } from "react";
+/**
+ * Status bar: current mode, cursor position, and (with a session) the open
+ * file name with a dirty marker plus the last save/open result message.
+ */
+export function InformationBar({ mode, cursor, session = null }) {
+    // Session changes (file open, save) don't rerender the editor's doc —
+    // subscribe here so the right side of the bar stays live.
+    const [, forceUpdate] = useState(0);
+    useEffect(() => {
+        if (!session) {
+            return;
+        }
+        return session.onChange(() => forceUpdate((n) => n + 1));
+    }, [session]);
+    const dirty = session?.isDirty() ?? false;
+    const message = session?.message ?? null;
     return (React.createElement(Box, { width: "100%", height: 1, backgroundColor: "blue", flexDirection: "row", paddingLeft: 2 },
         React.createElement(Text, { color: "white", bold: true }, mode),
         cursor ? (React.createElement(Text, { color: "white" },
@@ -9,5 +23,13 @@ export function InformationBar({ mode, cursor }) {
             "Ln ",
             cursor.line + 1,
             ", Col ",
-            cursor.column + 1)) : null));
+            cursor.column + 1)) : null,
+        session ? (React.createElement(Text, { color: "white" },
+            "  ",
+            session.displayName,
+            dirty ? " ●" : "")) : null,
+        message ? (React.createElement(React.Fragment, null,
+            React.createElement(Box, { flexGrow: 1 }),
+            React.createElement(Box, { marginRight: 2 },
+                React.createElement(Text, { color: message.kind === "error" ? "red" : "green" }, message.text)))) : null));
 }

package/dist/view/modal-frame.js

@@ -1,6 +1,6 @@
 import { Box, Text, useWindowSize } from "ink";
 import { useMouseRegion } from "ink-cartridge";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { clampFrame } from "./frame-clamp.js";
 /**
  * Shared draggable modal frame used by the language and sensitivity pickers.
@@ -18,12 +18,16 @@ export function ModalFrame({ title, children, footer, width = 36, }) {
     // Where inside the frame the cursor was grabbed, so the frame doesn't
     // jump so its top-left lands under the cursor on the first drag move.
     const grabOffsetRef = useRef({ dx: 0, dy: 0 });
+    // The frame's size, captured at grab time — used by the resize clamp
+    // below (a non-null position implies a drag happened, so this is set).
+    const frameSizeRef = useRef({ width: 0, height: 0 });
     const frameRef = useMouseRegion({
         onDragStart: (event, rect) => {
             grabOffsetRef.current = {
                 dx: event.x - rect.x,
                 dy: event.y - rect.y,
             };
+            frameSizeRef.current = { width: rect.width, height: rect.height };
             // Switch from flex centering to absolute positioning at the
             // current rect — seamless, no jump on the first frame.
             setPos({ top: rect.y - 1, left: rect.x - 1 });
@@ -31,12 +35,40 @@ export function ModalFrame({ title, children, footer, width = 36, }) {
         },
         onDragMove: (event, rect) => {
             const { dx, dy } = grabOffsetRef.current;
-            setPos(clampFrame(event.x - dx - 1, event.y - dy - 1, columns, rows, rect.width, rect.height));
+            const clamped = clampFrame(event.x - dx - 1, event.y - dy - 1, columns, rows, rect.width, rect.height);
+            // The information bar occupies the top row — keep the frame below
+            // it, same as the toolbar.
+            setPos({ top: Math.max(1, clamped.top), left: clamped.left });
         },
         onDragEnd: () => setDragging(false),
     });
-    return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
-        React.createElement(Box, { ref: frameRef, position: pos ? "absolute" : undefined, top: pos?.top, left: pos?.left, flexDirection: "column", borderStyle: "bold", borderColor: dragging ? "green" : "white", backgroundColor: "black", width: width, alignItems: "center", paddingX: 4, paddingY: 1, gap: 1 },
+    // The drag clamp only runs while dragging — a terminal resize can shrink
+    // the viewport under a dragged frame afterwards. Re-clamp on every size
+    // change so the frame never extends past the edge (top stays ≥ 1 so it
+    // cannot overlap the information bar). The centered state (pos null) is
+    // flex-laid-out and follows the terminal automatically; a non-null pos
+    // implies a drag happened, so frameSizeRef is populated.
+    useEffect(() => {
+        const { width, height } = frameSizeRef.current;
+        if (!width || !height) {
+            return;
+        }
+        setPos((current) => {
+            if (!current) {
+                return current;
+            }
+            const clamped = clampFrame(current.left, current.top, columns, rows, width, height);
+            const next = { top: Math.max(1, clamped.top), left: clamped.left };
+            return next.left === current.left && next.top === current.top ? current : next;
+        });
+    }, [columns, rows]);
+    return (
+    // paddingTop keeps the centered frame below the information bar even
+    // in short terminals where centering would push it into row 1.
+    React.createElement(Box, { width: "100%", height: "100%", paddingTop: 1, justifyContent: "center", alignItems: "center" },
+        React.createElement(Box, { ref: frameRef, position: pos ? "absolute" : undefined, top: pos?.top, left: pos?.left, flexDirection: "column", borderStyle: "bold", borderColor: dragging ? "green" : "white", 
+            // Match the editor surface so dialogs read as part of it.
+            backgroundColor: "#1e1e1e", borderBackgroundColor: "#1e1e1e", width: width, alignItems: "center", paddingX: 4, paddingY: 1, gap: 1 },
             React.createElement(Text, { bold: true }, title),
             children,
             footer)));