blots-editor 0.0.13 → 0.0.15

package/dist/core/settings/useSettings.js

@@ -1,4 +1,4 @@
-import { useSyncExternalStore } from "react";
+import { useMemo, useSyncExternalStore } from "react";
 import { SettingsStore } from "./store.js";
 /**
  * Shared settings store for the whole editor. One instance serves the
@@ -13,15 +13,20 @@ export const settingsStore = new SettingsStore();
  */
 export function useSettings() {
     const settings = useSyncExternalStore(settingsStore.subscribe, () => settingsStore.settings, () => settingsStore.settings);
-    const next = (key, value) => ({
-        ...settings,
-        wheel: { ...settings.wheel, [key]: value },
-    });
-    return {
-        settings,
-        setSensitivity: (key, value) => settingsStore.persist(next(key, value)),
-        setDraft: (key, value) => settingsStore.update(next(key, value)),
-        commit: () => settingsStore.commit(),
-        setLanguage: (code) => settingsStore.persist({ ...settings, language: code }),
-    };
+    // Memoized per settings snapshot so the returned functions keep stable
+    // identities across renders — effect deps that reference them stay calm.
+    return useMemo(() => {
+        const next = (key, value) => ({
+            ...settings,
+            wheel: { ...settings.wheel, [key]: value },
+        });
+        return {
+            settings,
+            setSensitivity: (key, value) => settingsStore.persist(next(key, value)),
+            setDraft: (key, value) => settingsStore.update(next(key, value)),
+            commit: () => settingsStore.commit(),
+            setLanguage: (code) => settingsStore.persist({ ...settings, language: code }),
+            setFileTree: (fileTree) => settingsStore.persist({ ...settings, fileTree }),
+        };
+    }, [settings]);
 }

package/dist/index.js

@@ -2,11 +2,11 @@
 import { render } from "ink";
 import React from "react";
 import { CurrentScreen, KeyboardProvider, LanguageProvider, registerComponent, ScenarioManagementProvider, } from "ink-cartridge";
-import { resources } from "./i18n-resources.js";
+import { resources } from "./utils/view/i18n-resources.js";
 import { settingsStore } from "./core/settings/useSettings.js";
-import { MainMenu } from "./view/main-menu.js";
-import { Editor } from "./view/editor.js";
-import { Settings } from "./view/settings.js";
+import { MainMenu } from "./view/page/main-menu.js";
+import { Editor } from "./view/page/editor.js";
+import { Settings } from "./view/page/settings.js";
 registerComponent(MainMenu, {});
 registerComponent(Editor, {}, { parent: MainMenu });
 registerComponent(Settings, {}, { parent: MainMenu });

package/dist/{view → utils/view}/click-mapping.d.ts

@@ -1,4 +1,4 @@
-import type { Document } from "../core/document/document.js";
+import type { Document } from "../../core/document/document.js";
 export type ClickTarget = {
     line: number;
     logical: number;

package/dist/{view → utils/view}/frame-clamp.d.ts

@@ -8,3 +8,7 @@ export declare function clampFrame(left: number, top: number, columns: number, r
     left: number;
     top: number;
 };
+export declare function clampBarPos(left: number, top: number, width: number, height: number, columns: number, rows: number, fileTreeOpen: boolean, treeWidth: number): {
+    left: number;
+    top: number;
+};

package/dist/{view → utils/view}/frame-clamp.js

@@ -10,3 +10,11 @@ export function clampFrame(left, top, columns, rows, width, height) {
         top: Math.min(Math.max(0, top), Math.max(0, rows - height)),
     };
 }
+export function clampBarPos(left, top, width, height, columns, rows, fileTreeOpen, treeWidth) {
+    const clamped = clampFrame(left, top, columns, rows, width, height);
+    const maxLeft = fileTreeOpen ? columns - treeWidth - width : columns - width;
+    return {
+        left: Math.min(Math.max(0, clamped.left), Math.max(0, maxLeft)),
+        top: Math.max(1, clamped.top),
+    };
+}

package/dist/{i18n-resources.js → utils/view/i18n-resources.js}

@@ -8,7 +8,7 @@ import { readFileSync } from "node:fs";
  * global installs work regardless of cwd — the JSON files ship inside the
  * package via the `asset` entry in `files`.
  */
-const LANGUAGE_DIR = new URL("../asset/language/", import.meta.url);
+const LANGUAGE_DIR = new URL("../../../asset/language/", import.meta.url);
 function loadPack(locale) {
     return JSON.parse(readFileSync(new URL(`${locale}.json`, LANGUAGE_DIR), "utf8"));
 }

package/dist/view/editor/command-bar.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { EditorSession } from "../../core/io/session.js";
+export type CommandBarProps = {
+    /** File session used by `:save`. */
+    session?: EditorSession | null;
+};
+/**
+ * Modal command bar (like Helix's `:` prompt). Rendered as a modal layer
+ * element, so it exclusively owns the keyboard while open — the editor's
+ * bindings (including the insert-mode `*` wildcard) stay dormant.
+ */
+export declare function CommandBar({ session }: CommandBarProps): React.JSX.Element;

package/dist/view/{command-bar.js → editor/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/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/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 "../page/settings.js";
+import { ModalFrame } from "../utils/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/file-tree.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { FileTreeState } from "../../core/io/file-tree-model.js";
+import type { EditorSession } from "../../core/io/session.js";
+export type FileTreeProps = {
+    /** The shared file session; clicking a file opens it here. */
+    session: EditorSession;
+};
+export type FileTreeDirState = FileTreeState | {
+    noDir?: boolean;
+};
+/**
+ * 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/editor/file-tree.js

@@ -0,0 +1,235 @@
+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/io/file-tree-model.js";
+import { useSettings } from "../../core/settings/useSettings.js";
+import { ModalFrame } from "../utils/modal-frame.js";
+import { setTreePos } from "../event/subscription/tree-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 { t } = useI18n();
+    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, setRoot] = useState({
+        scanning: true,
+    });
+    const [prevRoot, setPrevRoot] = useState(root);
+    useEffect(() => {
+        setRoot({ scanning: true });
+        (async () => {
+            const resolved = resolveFileTreeRoot(settings.fileTree, process.cwd());
+            const tree = resolved
+                ? await scanDirectoryCached(resolved)
+                : { noDir: true };
+            setRoot(tree);
+        })();
+    }, [settings.fileTree, scanTick]);
+    // A new scan (root changed) starts collapsed at the top — reset during
+    // render so the next frame already renders with the reset state.
+    if (prevRoot !== root) {
+        setPrevRoot(root);
+        setExpanded(new Set());
+        setScrollTop(0);
+    }
+    const visibleRows = useMemo(() => ('node' in root ? flattenTree(root.node, 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, t("fileTree.unsaved"));
+        }
+        else {
+            session.open(path);
+        }
+    }, [session, t]);
+    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 = "node" in 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(() => {
+        setTreePos({
+            y: 1,
+            x: columns - treeWidth,
+            width: treeWidth,
+            height: rows - 1,
+        });
+    }, [treeWidth, columns, rows]);
+    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 }, "node" in root ? basename(root.path) : "-"),
+            React.createElement(Box, { ref: refreshRef, marginLeft: 1 },
+                React.createElement(Text, { color: refreshHovered ? "green" : "gray" }, "\u21BB"))),
+        "scanning" in root ? (React.createElement(Box, { paddingLeft: 1 },
+            React.createElement(Text, { dimColor: true }, t("fileTree.scanning")))) : "noDir" in root ? (React.createElement(Box, { paddingLeft: 1 },
+            React.createElement(Text, { dimColor: true }, t("fileTree.noDir")))) : "fail" in root ? (React.createElement(Box, { paddingLeft: 1 },
+            React.createElement(Text, { dimColor: true }, t("fileTree.fail")))) : (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);
+                }
+            } }))))));
+}
+/**
+ * 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, title) {
+    openModalLayer("unsaved", 100);
+    applyElementToModalLayer("unsaved", {
+        elementId: "unsaved-prompt",
+        element: UnsavedPrompt,
+        props: {
+            title,
+            onSave: () => {
+                const saved = session.save();
+                if (saved.ok) {
+                    session.open(targetPath);
+                }
+            },
+            onDiscard: () => session.open(targetPath),
+            onCancel: () => { },
+        },
+    });
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import type { EditorSession } from "../../core/io/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, 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/editor/information-bar.js

@@ -0,0 +1,35 @@
+import { Box, Text } from "ink";
+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" },
+            "  ",
+            "Ln ",
+            cursor.line + 1,
+            ", Col ",
+            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/editor/tool-bar.d.ts

@@ -0,0 +1,36 @@
+import { XtermMouseEvent } from "@cartridge-engine/keyboard-engine";
+import React from "react";
+import { EditorSession } from "../../core/io/session.js";
+/**
+ * Props for a single tool button.
+ *
+ * @prop priority - Hit-test priority over whatever sits underneath (the editor
+ *   surface). Buttons must win so clicking them does not also place the cursor.
+ * @prop onClick - Called on mouse click and on Enter selection in normal
+ *   mode; the event is absent for the keyboard path.
+ * @prop text - The text to display on the button.
+ * @prop focused - Keyboard focus (normal-mode navigation); overrides hover.
+ */
+export type ToolButtonProps = {
+    priority: number;
+    onClick: (event?: XtermMouseEvent) => void;
+    onDragStart: (event: XtermMouseEvent) => void;
+    onDragMove: (event: XtermMouseEvent) => void;
+    onDragEnd: (event: XtermMouseEvent) => void;
+    text: string;
+    focused?: boolean;
+};
+export type ToolBarProps = {
+    currentMode: string | null;
+    session: EditorSession;
+    openFileTree: () => void;
+    openSettings: () => void;
+    fileTreeOpen: boolean;
+};
+export type ToolButton = {
+    onClick: (event?: XtermMouseEvent) => void;
+    text: string;
+    priority: number;
+    id: string;
+};
+export declare function ToolBar({ currentMode, session, openFileTree, openSettings, fileTreeOpen, }: ToolBarProps): React.JSX.Element;