blots-editor 0.0.12 → 0.0.14

package/dist/view/modal-frame.js

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

package/dist/view/settings.d.ts

@@ -1,2 +1,13 @@
 import React from "react";
+export type SettingsEntriesProps = {
+    /** Called on Esc/Backspace — the screen navigates back, the in-editor
+     *  settings layer closes itself. */
+    onExit: () => void;
+};
+/**
+ * The setting rows with their keyboard navigation and modal pickers.
+ * Shared by the settings screen and the in-editor settings layer; the only
+ * difference is what `onExit` does.
+ */
+export declare function SettingsEntries({ onExit }: SettingsEntriesProps): React.JSX.Element;
 export declare function Settings(): React.JSX.Element;

package/dist/view/settings.js

@@ -1,6 +1,6 @@
 import { Box, Text } from "ink";
 import { back, ModalLayerElementContext, useI18n, useKeyboard, useMouseRegion, useScreenSystem, } from "ink-cartridge";
-import React, { useCallback, useContext, useEffect, useMemo, useState, } from "react";
+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";
@@ -95,16 +95,101 @@ function SensitivityPicker({ sensitivityKey }) {
             value.toFixed(1),
             "\u00D7")));
 }
-/** A single settings entry: label plus its current value; opens a picker on activation. */
+/** Small clickable button used inside the file-tree-root picker. */
+function PickerButton({ label, 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)));
+}
+/**
+ * Modal picker for the file-tree root: startup directory or a custom path.
+ * Up/down switches the mode; while "custom" is active the row is a text
+ * input (any key appends, backspace deletes). Return confirms, Esc cancels.
+ */
+function FileTreePicker() {
+    const ctx = useContext(ModalLayerElementContext);
+    const { t } = useI18n();
+    const { boundKeyboard } = useKeyboard();
+    const { closeModalLayer } = useScreenSystem();
+    const { settings, setFileTree } = useSettings();
+    const [root, setRoot] = useState(settings.fileTree.root);
+    const [path, setPath] = useState(settings.fileTree.customPath);
+    const [hovered, setHovered] = useState(null);
+    // The wildcard handler needs the current mode without rebinding on
+    // every keystroke; a ref keeps it fresh.
+    const rootRef = useRef(root);
+    rootRef.current = root;
+    const apply = useCallback(() => {
+        if (!ctx) {
+            return;
+        }
+        setFileTree({
+            root,
+            customPath: root === "custom" ? path : "",
+        });
+        closeModalLayer(ctx.modalLayer.layerId);
+    }, [closeModalLayer, ctx, path, root, setFileTree]);
+    const close = useCallback(() => {
+        if (ctx) {
+            closeModalLayer(ctx.modalLayer.layerId);
+        }
+    }, [closeModalLayer, ctx]);
+    useEffect(() => {
+        if (!ctx) {
+            return;
+        }
+        const unbinds = [
+            boundKeyboard(["up"], () => setRoot((r) => (r === "custom" ? "startup" : "custom")), { elementId: ctx.id }),
+            boundKeyboard(["down"], () => setRoot((r) => (r === "custom" ? "startup" : "custom")), { elementId: ctx.id }),
+            boundKeyboard(["*"], (ch) => {
+                // Typing only makes sense while editing a custom path.
+                if (rootRef.current === "custom") {
+                    setPath((p) => p + ch);
+                }
+            }, { elementId: ctx.id }),
+            boundKeyboard(["backspace"], () => {
+                if (rootRef.current === "custom") {
+                    setPath((p) => p.slice(0, -1));
+                }
+            }, { elementId: ctx.id }),
+            boundKeyboard(["return"], apply, { elementId: ctx.id }),
+            boundKeyboard(["escape"], close, { elementId: ctx.id }),
+        ];
+        return () => unbinds.forEach((fn) => fn());
+    }, [apply, boundKeyboard, close, ctx]);
+    return (React.createElement(ModalFrame, { title: t("settings.fileTreeRoot") },
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { inverse: root === "startup" },
+                root === "startup" ? "▸ " : "  ",
+                t("settings.fileTreeRoot.startup")),
+            React.createElement(Text, { inverse: root === "custom" },
+                root === "custom" ? "▸ " : "  ",
+                t("settings.fileTreeRoot.custom"),
+                ": ",
+                React.createElement(Text, { color: root === "custom" ? undefined : "gray" },
+                    path,
+                    root === "custom" ? "▌" : ""))),
+        React.createElement(Box, { flexDirection: "row", gap: 2 },
+            React.createElement(PickerButton, { label: t("settings.ok"), active: hovered === "ok", onEnter: () => setHovered("ok"), onLeave: () => setHovered((h) => (h === "ok" ? null : h)), onClick: apply }),
+            React.createElement(PickerButton, { label: t("settings.cancel"), active: hovered === "cancel", onEnter: () => setHovered("cancel"), onLeave: () => setHovered((h) => (h === "cancel" ? null : h)), onClick: close }))));
+}
+/** A single settings entry: label plus its current value; opens a picker on
+ *  activation. priority 1: rows live inside the draggable ModalFrame in the
+ *  in-editor settings layer and must win over the frame region. */
 function SettingRow({ label, value, active, onEnter, onLeave, onClick, }) {
-    const ref = useMouseRegion({ onEnter, onLeave, onClick });
+    const ref = useMouseRegion({ onEnter, onLeave, onClick }, { priority: 1 });
     return (React.createElement(Box, { ref: ref, paddingLeft: 1, paddingRight: 1, flexDirection: "row", gap: 2 },
         React.createElement(Text, { inverse: active },
             active ? "> " : "  ",
             label),
         React.createElement(Text, { dimColor: true }, value)));
 }
-export function Settings() {
+/**
+ * The setting rows with their keyboard navigation and modal pickers.
+ * Shared by the settings screen and the in-editor settings layer; the only
+ * difference is what `onExit` does.
+ */
+export function SettingsEntries({ onExit }) {
     const { t, currentLanguage } = useI18n();
     const { boundKeyboard } = useKeyboard();
     const { openModalLayer, applyElementToModalLayer } = useScreenSystem();
@@ -128,6 +213,13 @@ export function Settings() {
             element: Picker,
         });
     }, [applyElementToModalLayer, openModalLayer]);
+    const openFileTreePicker = useCallback(() => {
+        openModalLayer("file-tree-root", 50);
+        applyElementToModalLayer("file-tree-root", {
+            elementId: "file-tree-root-picker",
+            element: FileTreePicker,
+        });
+    }, [applyElementToModalLayer, openModalLayer]);
     const currentLabel = LANGUAGES.find((lang) => lang.code === currentLanguage)?.labelKey ??
         "settings.language.en";
     const entries = useMemo(() => [
@@ -149,26 +241,41 @@ export function Settings() {
             value: `${settings.wheel.view.toFixed(1)}×`,
             open: () => openSensitivityPicker("view"),
         },
+        {
+            id: "file-tree-root",
+            label: t("settings.fileTreeRoot"),
+            value: settings.fileTree.root === "custom" && settings.fileTree.customPath
+                ? settings.fileTree.customPath
+                : t("settings.fileTreeRoot.startup"),
+            open: openFileTreePicker,
+        },
     ], [
         t,
         currentLabel,
         settings.wheel.cursor,
         settings.wheel.view,
+        settings.fileTree.root,
+        settings.fileTree.customPath,
         openLanguagePicker,
         openSensitivityPicker,
+        openFileTreePicker,
     ]);
     useEffect(() => {
         const unbinds = [
             boundKeyboard(["up"], () => setIndex((i) => Math.max(0, i - 1))),
             boundKeyboard(["down"], () => setIndex((i) => Math.min(entries.length - 1, i + 1))),
             boundKeyboard(["return"], () => entries[index].open()),
-            boundKeyboard(["escape", "backspace"], () => back()),
+            boundKeyboard(["escape", "backspace"], () => onExit()),
         ];
         return () => unbinds.forEach((fn) => fn());
-    }, [boundKeyboard, entries, index]);
+    }, [boundKeyboard, entries, index, onExit]);
+    return (React.createElement(Box, { flexDirection: "column", gap: 2, marginTop: 2 }, entries.map((entry, i) => (React.createElement(SettingRow, { key: entry.id, label: entry.label, value: entry.value, active: i === index || hovered === i, onEnter: () => setHovered(i), onLeave: () => setHovered((h) => (h === i ? null : h)), onClick: entry.open })))));
+}
+export function Settings() {
+    const { t } = useI18n();
     return (React.createElement(Box, { flexDirection: "column", justifyContent: "center", alignItems: "center", width: "100%", height: "100%", gap: 2 },
         React.createElement(Text, { bold: true }, t("settings.title")),
-        React.createElement(Box, { flexDirection: "column", gap: 2, marginTop: 2 }, entries.map((entry, i) => (React.createElement(SettingRow, { key: entry.id, label: entry.label, value: entry.value, active: i === index || hovered === i, onEnter: () => setHovered(i), onLeave: () => setHovered((h) => (h === i ? null : h)), onClick: entry.open })))),
+        React.createElement(SettingsEntries, { onExit: () => back() }),
         React.createElement(Box, { marginTop: 4 },
             React.createElement(Text, { dimColor: true },
                 t("settings.back"),

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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,148 @@
+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/toolbar-store.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+type BarPosition = {
+    top: number;
+    left: number;
+} | null;
+/** Read the current persisted position (imperative access for effects). */
+export declare function getBarPosition(): BarPosition;
+/** Update the persisted bar position (drag move / initial grab). */
+export declare function setBarPosition(next: BarPosition): void;
+/** Reactive binding for the toolbar: null = bottom-center flex layout. */
+export declare function useBarPosition(): BarPosition;
+export {};

package/dist/view/toolbar-store.js

@@ -0,0 +1,25 @@
+import { useSyncExternalStore } from "react";
+let position = null;
+const listeners = new Set();
+function getPosition() {
+    return position;
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** Read the current persisted position (imperative access for effects). */
+export function getBarPosition() {
+    return position;
+}
+/** Update the persisted bar position (drag move / initial grab). */
+export function setBarPosition(next) {
+    position = next;
+    listeners.forEach((fn) => fn());
+}
+/** Reactive binding for the toolbar: null = bottom-center flex layout. */
+export function useBarPosition() {
+    return useSyncExternalStore(subscribe, getPosition, getPosition);
+}

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

@@ -0,0 +1,6 @@
+/** 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;

package/dist/view/tree-width-store.js

@@ -0,0 +1,31 @@
+import { useSyncExternalStore } from "react";
+/**
+ * Current width of the file-tree pane, shared with the toolbar.
+ *
+ * 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;
+const listeners = new Set();
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** Imperative read for drag handlers. */
+export function getTreeWidth() {
+    return width;
+}
+/** Update the reported pane width (no-op when unchanged). */
+export function setTreeWidth(next) {
+    if (next === width) {
+        return;
+    }
+    width = next;
+    listeners.forEach((fn) => fn());
+}
+/** Reactive binding: re-renders whenever the pane width changes. */
+export function useTreeWidth() {
+    return useSyncExternalStore(subscribe, getTreeWidth, getTreeWidth);
+}

package/package.json

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