blots-editor 0.0.14 → 0.0.16

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();
+            }, { mode: "normal" }),
+        ];
+        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.16",
 	"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;