blots-editor 0.0.14 → 0.0.15

package/asset/language/en.json

@@ -19,6 +19,10 @@
   "toolbar.fileTree": "File Tree",
   "toolbar.save": "Save",
   "toolbar.settings": "Settings",
+  "fileTree.scanning": "Scanning...",
+  "fileTree.noDir": "No directory",
+  "fileTree.fail": "Scan failed",
+  "fileTree.unsaved": "Unsaved changes",
   "editor.setting.title": "Menu",
   "editor.setting.openSetting": "Settings",
   "editor.setting.exit": "Exit",

package/asset/language/zh.json

@@ -19,6 +19,10 @@
   "toolbar.fileTree": "文件树",
   "toolbar.save": "保存",
   "toolbar.settings": "设置",
+  "fileTree.scanning": "正在扫描...",
+  "fileTree.noDir": "没有目录",
+  "fileTree.fail": "扫描失败",
+  "fileTree.unsaved": "未保存的更改",
   "editor.setting.title": "菜单",
   "editor.setting.openSetting": "设置",
   "editor.setting.exit": "退出",

package/dist/core/{file-tree-model.d.ts → io/file-tree-model.d.ts}

@@ -1,8 +1,17 @@
-import type { FileTreeSettings } from "./settings/schema.js";
+import type { FileTreeSettings } from "../settings/schema.js";
 /** Clear the scan cache (refresh button, tests). */
 export declare function clearFileTreeCache(): void;
+export type FileTreeState = {
+    ok: true;
+    node: FileNode;
+    path: string;
+} | {
+    fail: true;
+} | {
+    scanning: true;
+};
 /** Scan a directory, serving repeat calls for the same root from the cache. */
-export declare function scanDirectoryCached(root: string): FileNode | null;
+export declare function scanDirectoryCached(root: string): Promise<FileTreeState>;
 /** One entry of the scanned tree. Directories carry their children. */
 export type FileNode = {
     /** Entry name (not the full path). */
@@ -24,7 +33,7 @@ export declare function resolveFileTreeRoot(settings: FileTreeSettings, startupD
  *
  * @returns The root node, or null when the directory cannot be read.
  */
-export declare function scanDirectory(root: string): FileNode | null;
+export declare function scanDirectory(root: string): Promise<FileNode | null>;
 /** One visible tree row produced by flattening with expansion state. */
 export type TreeRow = {
     node: FileNode;

package/dist/core/{file-tree-model.js → io/file-tree-model.js}

@@ -1,4 +1,4 @@
-import { readdirSync } from "node:fs";
+import fs from 'node:fs/promises';
 import { homedir } from "node:os";
 import { join } from "node:path";
 /**
@@ -13,16 +13,27 @@ export function clearFileTreeCache() {
     scanCache.clear();
 }
 /** Scan a directory, serving repeat calls for the same root from the cache. */
-export function scanDirectoryCached(root) {
+export async function scanDirectoryCached(root) {
     const hit = scanCache.get(root);
     if (hit) {
-        return hit;
+        return {
+            ok: true,
+            node: hit,
+            path: root
+        };
     }
-    const tree = scanDirectory(root);
+    const tree = await scanDirectory(root);
     if (tree) {
         scanCache.set(root, tree);
+        return {
+            ok: true,
+            node: tree,
+            path: root
+        };
     }
-    return tree;
+    return {
+        fail: true
+    };
 }
 /** Directories skipped at every depth (dependency dirs, VCS internals). */
 const SKIP_DIRS = new Set(["node_modules", ".git", "dist", ".next", ".cache"]);
@@ -47,8 +58,8 @@ export function resolveFileTreeRoot(settings, startupDir) {
  *
  * @returns The root node, or null when the directory cannot be read.
  */
-export function scanDirectory(root) {
-    const entries = readDirSafe(root);
+export async function scanDirectory(root) {
+    const entries = await readDirSafe(root);
     if (!entries) {
         return null;
     }
@@ -63,7 +74,7 @@ export function scanDirectory(root) {
             if (SKIP_DIRS.has(name)) {
                 continue;
             }
-            nodes.push({ name, path, isDir: true, children: scanChildren(path) });
+            nodes.push({ name, path, isDir: true, children: await scanChildren(path) });
         }
         else if (entry.isFile()) {
             nodes.push({ name, path, isDir: false });
@@ -74,14 +85,14 @@ export function scanDirectory(root) {
     nodes.sort((a, b) => a.isDir === b.isDir ? (a.name < b.name ? -1 : a.name > b.name ? 1 : 0) : a.isDir ? -1 : 1);
     return { name: root, path: root, isDir: true, children: nodes };
 }
-function scanChildren(dir) {
-    const child = scanDirectory(dir);
+async function scanChildren(dir) {
+    const child = await scanDirectory(dir);
     return child?.children;
 }
 /** Read a directory without throwing; null when unreadable (EACCES etc.). */
-function readDirSafe(path) {
+async function readDirSafe(path) {
     try {
-        return readdirSync(path, { withFileTypes: true });
+        return await fs.readdir(path, { withFileTypes: true });
     }
     catch {
         return null;

package/dist/core/{session.d.ts → io/session.d.ts}

@@ -1,4 +1,4 @@
-import { EditorController, type EditorOptions } from "./editor-controller.js";
+import { EditorController, type EditorOptions } from "../editor-controller.js";
 export type ActionResult = {
     ok: true;
 } | {

package/dist/core/{session.js → io/session.js}

@@ -1,7 +1,7 @@
 import { createHash } from "node:crypto";
 import { readFileSync, writeFileSync } from "node:fs";
 import { basename } from "node:path";
-import { EditorController } from "./editor-controller.js";
+import { EditorController } from "../editor-controller.js";
 /**
  * File-session coordinator shared by the editor, file tree, and toolbar.
  *

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/{command-bar.d.ts → editor/command-bar.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { EditorSession } from "../core/session.js";
+import type { EditorSession } from "../../core/io/session.js";
 export type CommandBarProps = {
     /** File session used by `:save`. */
     session?: EditorSession | null;

package/dist/view/{editor-setting.js → editor/editor-setting.js}

@@ -1,8 +1,8 @@
 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";
+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;

package/dist/view/{file-tree.d.ts → editor/file-tree.d.ts}

@@ -1,9 +1,13 @@
 import React from "react";
-import type { EditorSession } from "../core/session.js";
+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

package/dist/view/{file-tree.js → editor/file-tree.js}

@@ -1,12 +1,12 @@
 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 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";
+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. */
@@ -22,23 +22,34 @@ const MAX_TREE_WIDTH = 60;
 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 = 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.
+    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);
-    }, [root]);
-    const visibleRows = useMemo(() => (root ? flattenTree(root, expanded) : []), [root, expanded]);
+    }
+    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));
@@ -49,12 +60,12 @@ export function FileTree({ session }) {
     }, []);
     const openFile = useCallback((path) => {
         if (session.isDirty()) {
-            openUnsavedPrompt(session, path);
+            openUnsavedPrompt(session, path, t("fileTree.unsaved"));
         }
         else {
             session.open(path);
         }
-    }, [session]);
+    }, [session, t]);
     const toggleDir = useCallback((path) => {
         setExpanded((prev) => {
             const next = new Set(prev);
@@ -80,7 +91,7 @@ export function FileTree({ session }) {
     // 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;
+        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);
@@ -88,24 +99,31 @@ export function FileTree({ session }) {
     // 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]);
+        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 }, root ? basename(root.path) : "-"),
+            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"))),
-        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: () => {
+        "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);
                 }
-            } })))) : (React.createElement(Box, { paddingLeft: 1 },
-            React.createElement(Text, { dimColor: true }, "No directory")))));
+            } }))))));
 }
 /**
  * One tree line: indent + expand arrow (dirs) + name. The arrow follows the
@@ -114,7 +132,7 @@ export function FileTree({ session }) {
  * 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 }) {
+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
@@ -133,7 +151,7 @@ function TreeRow({ node, depth, expanded, hovered, onEnter, onLeave, onWheel, on
             node.name)));
 }
 /** One button of the unsaved-changes prompt (mouse + keyboard hotkey). */
-function PromptButton({ label, hotkey, active, onEnter, onLeave, onClick }) {
+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 },
@@ -147,7 +165,7 @@ function PromptButton({ label, hotkey, active, onEnter, onLeave, onClick }) {
  * 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 }) {
+function UnsavedPrompt({ title, onSave, onDiscard, onCancel, }) {
     const ctx = useContext(ModalLayerElementContext);
     const { t } = useI18n();
     const { boundKeyboard } = useKeyboard();
@@ -197,13 +215,13 @@ function UnsavedPrompt({ title, onSave, onDiscard, 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) {
+function openUnsavedPrompt(session, targetPath, title) {
     openModalLayer("unsaved", 100);
     applyElementToModalLayer("unsaved", {
         elementId: "unsaved-prompt",
         element: UnsavedPrompt,
         props: {
-            title: "Unsaved changes",
+            title,
             onSave: () => {
                 const saved = session.save();
                 if (saved.ok) {

package/dist/view/{information-bar.d.ts → editor/information-bar.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { EditorSession } from "../core/session.js";
+import type { EditorSession } from "../../core/io/session.js";
 export type InformationBarProps = {
     mode: string;
     cursor?: {

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;

package/dist/view/editor/tool-bar.js

@@ -0,0 +1,134 @@
+import { useI18n, useKeyboard, useMouseRegion } from "ink-cartridge";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useState } from "react";
+import { Box, measureElement, Text, useWindowSize } from "ink";
+import { useTree } from "../event/subscription/tree-store.js";
+import { getBarPosition, setBarPosition, useBarPosition, } from "../event/subscription/toolbar-store.js";
+import { clampBarPos } from "../../utils/view/frame-clamp.js";
+function ToolButton({ priority, onClick, text, focused = false, onDragStart, onDragMove, onDragEnd, }) {
+    const [flush, setFlush] = useState(false);
+    const timerRef = React.useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    const ref = useMouseRegion({
+        onClick: (event) => {
+            setFlush(true);
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+            timerRef.current = setTimeout(() => {
+                setFlush(false);
+            }, 150);
+            onClick(event);
+        },
+        onDragEnd,
+        onDragMove,
+        onDragStart,
+    }, { priority });
+    return (React.createElement(Box, { ref: ref, borderColor: flush ? "whiteBright" : focused ? "blue" : "white", borderStyle: "bold", 
+        // Match the editor's surface so the floating bar reads as part of it.
+        backgroundColor: "#1e1e1e", height: "100%", justifyContent: "center", alignItems: "center", borderBackgroundColor: "#1e1e1e", paddingLeft: 2, paddingRight: 2 },
+        React.createElement(Text, null, text)));
+}
+export function ToolBar({ currentMode, session, openFileTree, openSettings, fileTreeOpen, }) {
+    const { t } = useI18n();
+    const { boundKeyboard } = useKeyboard();
+    const [index, setIndex] = useState(0);
+    const items = useMemo(() => [
+        {
+            id: "save",
+            onClick: () => {
+                session.save();
+            },
+            text: t("toolbar.save"),
+            priority: 1,
+        },
+        {
+            id: "file-tree",
+            onClick: () => {
+                openFileTree();
+            },
+            text: t("toolbar.fileTree"),
+            priority: 1,
+        },
+        {
+            id: "settings",
+            onClick: () => {
+                openSettings();
+            },
+            text: t("toolbar.settings"),
+            priority: 1,
+        },
+    ], [session, t, openFileTree, openSettings]);
+    const { rows, columns } = useWindowSize();
+    const pos = useBarPosition();
+    const treePos = useTree();
+    const barRef = useRef(null);
+    // Grab offset (where inside the bar the cursor went down) plus the bar's
+    // size at grab time, kept in a ref so drag moves need no re-measurement.
+    const grabRef = useRef({ dx: 0, dy: 0, width: 0, height: 0 });
+    const treeWidth = treePos.width;
+    const startDrag = useCallback((event) => {
+        const node = barRef.current;
+        if (!node) {
+            return;
+        }
+        // Measure the bar itself, not the hit region — a button may be the
+        // captured target, and its rect would put the bar's corner at the
+        // button's corner.
+        const m = measureElement(node);
+        grabRef.current = {
+            dx: event.x - m.x - 1,
+            dy: event.y - m.y - 1,
+            width: m.width,
+            height: m.height,
+        };
+        setBarPosition({ top: m.y, left: m.x });
+    }, []);
+    const moveDrag = useCallback((event) => {
+        const { dx, dy, width, height } = grabRef.current;
+        setBarPosition(clampBarPos(event.x - dx - 1, event.y - dy - 1, width, height, columns, rows, fileTreeOpen, treeWidth));
+    }, [columns, rows, fileTreeOpen, treeWidth]);
+    const endDrag = useCallback(() => { }, []);
+    // Re-clamp when a layout input changes (resize, tree toggled): a bar
+    // positioned earlier can end up outside the allowed region.
+    useEffect(() => {
+        const node = barRef.current;
+        if (!node) {
+            return;
+        }
+        const m = measureElement(node);
+        const current = getBarPosition();
+        if (!current) {
+            return;
+        }
+        const next = clampBarPos(current.left, current.top, m.width, m.height, columns, rows, fileTreeOpen, treeWidth);
+        if (next.left !== current.left || next.top !== current.top) {
+            setBarPosition(next);
+        }
+    }, [columns, rows, fileTreeOpen, treeWidth]);
+    useEffect(() => {
+        const unbinds = [
+            boundKeyboard(["ctrl+left"], () => {
+                setIndex((prev) => (prev - 1 + items.length) % items.length);
+            }),
+            boundKeyboard(["ctrl+right"], () => {
+                setIndex((prev) => (prev + 1) % items.length);
+            }),
+            boundKeyboard(["return"], () => {
+                items[index].onClick();
+            }),
+        ];
+        return () => {
+            unbinds.forEach((unbind) => unbind());
+        };
+    }, [boundKeyboard, index, items]);
+    const showFocus = currentMode === "normal";
+    return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "flex-end" },
+        React.createElement(Box, { ref: barRef, position: pos ? "absolute" : undefined, top: pos?.top, left: pos?.left, height: 3, flexDirection: "row", justifyContent: "center", alignItems: "center" }, items.map((item, itemIndex) => (React.createElement(ToolButton, { key: item.id, onClick: item.onClick, text: item.text, priority: item.priority, focused: showFocus && index === itemIndex, onDragStart: startDrag, onDragMove: moveDrag, onDragEnd: endDrag }))))));
+}

package/dist/view/{toolbar-store.d.ts → event/subscription/toolbar-store.d.ts}

@@ -1,10 +1,9 @@
 /**
- * Module-level drag position of the floating toolbar.
- *
- * The toolbar element is erased and re-applied whenever its props change
- * (the layer system treats re-applies of an existing element id as no-ops),
- * which would otherwise reset the component's internal position state. An
- * external store survives those remounts, so a dragged bar keeps its spot.
+ * Module-level drag position of the floating toolbar. null = the bar sits
+ * at the bottom-center via flex layout; once the user grabs it, absolute
+ * positioning takes over so it follows the cursor. An external store
+ * survives the layer system's erase/re-apply remounts, so a dragged bar
+ * keeps its spot.
  */
 type BarPosition = {
     top: number;

package/dist/view/event/subscription/tree-store.d.ts

@@ -0,0 +1,10 @@
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function getTreePos(): Rect;
+export declare function setTreePos(newPos: Rect): void;
+/** Reactive binding: re-renders whenever the pane width changes. */
+export declare function useTree(): Rect;

package/dist/view/{tree-width-store.js → event/subscription/tree-store.js}

@@ -5,7 +5,7 @@ import { useSyncExternalStore } from "react";
  * The tree sizes itself to its content, so its width is dynamic; the toolbar
  * must not overlap it, so it reads the live width instead of a constant.
  */
-let width = 32;
+let pos = { x: 0, y: 0, width: 0, height: 0 };
 const listeners = new Set();
 function subscribe(listener) {
     listeners.add(listener);
@@ -13,19 +13,16 @@ function subscribe(listener) {
         listeners.delete(listener);
     };
 }
-/** Imperative read for drag handlers. */
-export function getTreeWidth() {
-    return width;
+export function getTreePos() {
+    return pos;
 }
-/** Update the reported pane width (no-op when unchanged). */
-export function setTreeWidth(next) {
-    if (next === width) {
-        return;
+export function setTreePos(newPos) {
+    pos = newPos;
+    for (const listener of listeners) {
+        listener();
     }
-    width = next;
-    listeners.forEach((fn) => fn());
 }
 /** Reactive binding: re-renders whenever the pane width changes. */
-export function useTreeWidth() {
-    return useSyncExternalStore(subscribe, getTreeWidth, getTreeWidth);
+export function useTree() {
+    return useSyncExternalStore(subscribe, getTreePos, getTreePos);
 }

package/dist/view/{editor.js → page/editor.js}

@@ -1,14 +1,14 @@
 import { Box, Text, useBoxMetrics, useCursor } from "ink";
 import { applyElement, applyElementToModalLayer, closeLayer, eraseElement, openLayer, openModalLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-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";
+import { EditorSession } from "../../core/io/session.js";
+import { useSettings } from "../../core/settings/useSettings.js";
+import { clickToPosition } from "../../utils/view/click-mapping.js";
+import { CommandBar } from "../editor/command-bar.js";
+import { EditorSetting } from "../editor/editor-setting.js";
+import { FileTree } from "../editor/file-tree.js";
+import { ToolBar } from "../editor/tool-bar.js";
+import { InformationBar } from "../editor/information-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";
@@ -100,11 +100,11 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
                 elementId: "toolbar",
                 element: ToolBar,
                 props: {
-                    mode,
+                    currentMode: mode,
                     session,
-                    fileTreeOpen,
-                    onToggleFileTree: () => setFileTreeOpen((open) => !open),
-                    onOpenSettings: () => setSettingsOpen((open) => !open),
+                    openFileTree: () => setFileTreeOpen((open) => !open),
+                    openSettings: () => setSettingsOpen((open) => !open),
+                    fileTreeOpen
                 },
             });
         }, 0);

package/dist/view/{main-menu.js → page/main-menu.js}

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { Editor } from "./editor.js";
 import { Settings } from "./settings.js";
 import { gotoScreen } from "ink-cartridge";
-import { getLogo } from "./logo.js";
+import { getLogo } from "../logo.js";
 /**
  * A borderless text button: the plain Box provides the mouse hit area,
  * hovering inverts the text as visual feedback, disabled buttons dim.

package/dist/view/{settings.js → page/settings.js}

@@ -1,9 +1,9 @@
 import { Box, Text } from "ink";
 import { back, ModalLayerElementContext, useI18n, useKeyboard, useMouseRegion, useScreenSystem, } from "ink-cartridge";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { useSettings } from "../core/settings/useSettings.js";
-import { ModalFrame } from "./modal-frame.js";
-import { SensitivityBar, snapSensitivity } from "./sensitivity-bar.js";
+import { useSettings } from "../../core/settings/useSettings.js";
+import { ModalFrame } from "../utils/modal-frame.js";
+import { SensitivityBar, snapSensitivity } from "../utils/sensitivity-bar.js";
 const LANGUAGES = [
     { code: "en", labelKey: "settings.language.en" },
     { code: "zh", labelKey: "settings.language.zh" },

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

@@ -1,7 +1,7 @@
 import { Box, Text, useWindowSize } from "ink";
 import { useMouseRegion } from "ink-cartridge";
 import React, { useEffect, useRef, useState } from "react";
-import { clampFrame } from "./frame-clamp.js";
+import { clampFrame } from "../../utils/view/frame-clamp.js";
 /**
  * Shared draggable modal frame used by the language and sensitivity pickers.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blots-editor",
-	"version": "0.0.14",
+	"version": "0.0.15",
 	"description": "A lightweight Markdown editor for the terminal, built on ink-cartridge",
 	"type": "module",
 	"main": "./dist/index.js",

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

@@ -1,62 +0,0 @@
-import React from "react";
-import type { XtermMouseEvent } from "@cartridge-engine/keyboard-engine";
-import type { EditorSession } from "../core/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.
- * @prop onDragStart/onDragMove/onDragEnd - Forwarded from the toolbar. The
- *   engine captures a drag on the pressed region only, so buttons must carry
- *   the drag handlers or dragging from a button would not move the bar.
- * @prop dragging - The bar is being dragged; buttons tint red.
- */
-export type ToolButtonProps = {
-    priority: number;
-    onClick: (event?: XtermMouseEvent) => void;
-    text: string;
-    focused?: boolean;
-    onDragStart?: (event: XtermMouseEvent) => void;
-    onDragMove?: (event: XtermMouseEvent) => void;
-    onDragEnd?: (event: XtermMouseEvent) => void;
-    dragging?: boolean;
-};
-/** One tool entry; the list is the extension point for future tools. */
-export type Tool = {
-    id: string;
-    /** i18n key for the button label. */
-    labelKey: string;
-    onClick: (event?: XtermMouseEvent) => void;
-};
-export type ToolBarProps = {
-    /** Current keyboard mode, passed down by the editor; drives focus display. */
-    mode?: string | null;
-    /** Tools to render, centered in the bar. Defaults to save + file tree. */
-    tools?: Tool[];
-    /** File session wired to the default Save tool. */
-    session?: EditorSession | null;
-    /** Toggles the file-tree pane (default File Tree tool). */
-    onToggleFileTree?: () => void;
-    /** Opens/closes the in-editor settings layer (default Settings tool). */
-    onOpenSettings?: () => void;
-    /** Whether the file-tree pane is open; the bar stays left of it. */
-    fileTreeOpen?: boolean;
-};
-/**
- * Floating toolbar, bottom-center of the terminal until the user drags it.
- * Dragging switches it to absolute positioning and clamps it inside the
- * terminal view (clampFrame, top ≥ 1 to preserve the information bar).
- * Purely presentational for now: one centered button with hover/focus states.
- * The editor owns the layer that hosts this bar (and the ctrl+tab toggle);
- * this component only adds the normal-mode keyboard navigation
- * (ctrl+left/ctrl+right move the focus ring, enter selects). The activator
- * is bare Enter, not ctrl+enter: terminals send the same byte (`\r`) for
- * both, so a ctrl-modified Enter can never reach the engine. Insert mode
- * stays mouse-only because these bindings are mode-restricted and never
- * fire there.
- */
-export declare function ToolBar({ mode, tools, session, onToggleFileTree, onOpenSettings, fileTreeOpen, }: ToolBarProps): React.JSX.Element;

package/dist/view/tool-bar.js

@@ -1,148 +0,0 @@
-import { Box, Text, measureElement, useWindowSize } from "ink";
-import { useI18n, useKeyboard, useMouseRegion } from "ink-cartridge";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { clampFrame } from "./frame-clamp.js";
-import { getBarPosition, setBarPosition, useBarPosition } from "./toolbar-store.js";
-import { useTreeWidth } from "./tree-width-store.js";
-/**
- * Clamp the bar's top-left: inside the terminal, below the information bar,
- * and — while the file tree is open — left of the tree pane.
- */
-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),
-    };
-}
-function ToolButton({ priority, onClick, text, focused = false, onDragStart, onDragMove, onDragEnd, dragging = false, }) {
-    const [hover, setHover] = useState(false);
-    const ref = useMouseRegion({
-        onClick: (event) => onClick(event),
-        onEnter: () => setHover(true),
-        onLeave: () => setHover(false),
-        onDragStart,
-        onDragMove,
-        onDragEnd,
-    }, { priority });
-    // Dragging outranks everything (the bar is moving), then keyboard focus,
-    // then the transient hover tint.
-    const borderColor = dragging ? "red" : focused ? "blue" : hover ? "green" : "white";
-    return (React.createElement(Box, { ref: ref, borderColor: borderColor, borderStyle: "bold", 
-        // Match the editor's surface so the floating bar reads as part of it.
-        backgroundColor: "#1e1e1e", height: "100%", justifyContent: "center", alignItems: "center", borderBackgroundColor: "#1e1e1e", paddingLeft: 2, paddingRight: 2 },
-        React.createElement(Text, null, text)));
-}
-/**
- * Floating toolbar, bottom-center of the terminal until the user drags it.
- * Dragging switches it to absolute positioning and clamps it inside the
- * terminal view (clampFrame, top ≥ 1 to preserve the information bar).
- * Purely presentational for now: one centered button with hover/focus states.
- * The editor owns the layer that hosts this bar (and the ctrl+tab toggle);
- * this component only adds the normal-mode keyboard navigation
- * (ctrl+left/ctrl+right move the focus ring, enter selects). The activator
- * is bare Enter, not ctrl+enter: terminals send the same byte (`\r`) for
- * both, so a ctrl-modified Enter can never reach the engine. Insert mode
- * stays mouse-only because these bindings are mode-restricted and never
- * fire there.
- */
-export function ToolBar({ mode = null, tools, session = null, onToggleFileTree, onOpenSettings, fileTreeOpen = false, }) {
-    const { rows, columns } = useWindowSize();
-    const { t } = useI18n();
-    const { boundKeyboard } = useKeyboard();
-    const [activeIndex, setActiveIndex] = useState(0);
-    // The default tools need live context, so they are built per instance
-    // instead of at module level; `tools` stays the extension point.
-    const defaultTools = useMemo(() => [
-        {
-            id: "save",
-            labelKey: "toolbar.save",
-            onClick: () => {
-                session?.save();
-            },
-        },
-        {
-            id: "file-tree",
-            labelKey: "toolbar.fileTree",
-            onClick: onToggleFileTree ?? (() => { }),
-        },
-        {
-            id: "settings",
-            labelKey: "toolbar.settings",
-            onClick: onOpenSettings ?? (() => { }),
-        },
-    ], [session, onToggleFileTree, onOpenSettings]);
-    const activeTools = tools ?? defaultTools;
-    // null = bar sits at the bottom-center via flex layout; once the user
-    // grabs it, absolute positioning takes over so it follows the cursor.
-    // Position lives in a module store so erase/re-apply remounts (prop
-    // updates) do not reset a dragged bar back to the bottom.
-    const pos = useBarPosition();
-    // Live pane width, so the drag clamp follows the tree's adaptive size.
-    const treeWidth = useTreeWidth();
-    const [dragging, setDragging] = useState(false);
-    const barRef = useRef(null);
-    // Grab offset (where inside the bar the cursor went down) plus the bar's
-    // size at grab time, kept in a ref so drag moves need no re-measurement.
-    const grabRef = useRef({ dx: 0, dy: 0, width: 0, height: 0 });
-    const startDrag = useCallback((event) => {
-        const node = barRef.current;
-        if (!node) {
-            return;
-        }
-        // Measure the bar itself, not the hit region — a button may be the
-        // captured target, and its rect would put the bar's corner at the
-        // button's corner.
-        const m = measureElement(node);
-        grabRef.current = {
-            dx: event.x - m.x - 1,
-            dy: event.y - m.y - 1,
-            width: m.width,
-            height: m.height,
-        };
-        // Switch from flex centering to absolute positioning at the current
-        // rect — seamless, no jump on the first frame.
-        setBarPosition({ top: m.y, left: m.x });
-        setDragging(true);
-    }, []);
-    const moveDrag = useCallback((event) => {
-        const { dx, dy, width, height } = grabRef.current;
-        setBarPosition(clampBarPos(event.x - dx - 1, event.y - dy - 1, width, height, columns, rows, fileTreeOpen, treeWidth));
-    }, [columns, rows, fileTreeOpen, treeWidth]);
-    const endDrag = useCallback(() => setDragging(false), []);
-    // The drag clamp only runs while dragging — a terminal resize can shrink
-    // the viewport under an absolutely-positioned bar afterwards (and opening
-    // the file tree can shrink the free area). Re-clamp whenever any of the
-    // layout inputs change so the bar never extends past its allowed region.
-    useEffect(() => {
-        const node = barRef.current;
-        if (!node) {
-            return;
-        }
-        // Read the latest position imperatively — no `pos` dependency, so this
-        // effect only runs when a layout input actually changes.
-        const m = measureElement(node);
-        const current = getBarPosition();
-        if (!current) {
-            return;
-        }
-        const next = clampBarPos(current.left, current.top, m.width, m.height, columns, rows, fileTreeOpen, treeWidth);
-        if (next.left !== current.left || next.top !== current.top) {
-            setBarPosition(next);
-        }
-    }, [columns, rows, fileTreeOpen, treeWidth]);
-    const showFocus = mode === "normal";
-    useEffect(() => {
-        const unbinds = [
-            boundKeyboard(["ctrl+left"], () => setActiveIndex((i) => (i - 1 + activeTools.length) % activeTools.length), { mode: "normal" }),
-            boundKeyboard(["ctrl+right"], () => setActiveIndex((i) => (i + 1) % activeTools.length), { mode: "normal" }),
-            boundKeyboard(["return"], () => activeTools[activeIndex]?.onClick(), {
-                mode: "normal",
-            }),
-        ];
-        return () => unbinds.forEach((fn) => fn());
-    }, [boundKeyboard, activeTools, activeIndex]);
-    return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "flex-end" },
-        React.createElement(Box, { ref: barRef, position: pos ? "absolute" : undefined, top: pos?.top, left: pos?.left, height: 3, flexDirection: "row", justifyContent: "center", alignItems: "center" }, activeTools.map((tool, index) => (React.createElement(ToolButton, { key: tool.id, text: t(tool.labelKey), priority: 1, focused: showFocus && index === activeIndex, onClick: tool.onClick, dragging: dragging, onDragStart: startDrag, onDragMove: moveDrag, onDragEnd: endDrag }))))));
-}

package/dist/view/tree-width-store.d.ts

@@ -1,6 +0,0 @@
-/** Imperative read for drag handlers. */
-export declare function getTreeWidth(): number;
-/** Update the reported pane width (no-op when unchanged). */
-export declare function setTreeWidth(next: number): void;
-/** Reactive binding: re-renders whenever the pane width changes. */
-export declare function useTreeWidth(): number;