blots-editor 0.0.13 → 0.0.14

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

@@ -1,18 +1,19 @@
 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 ctrl+enter selection; the event
- *   is absent for the keyboard path.
+ * @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 green like hover.
+ * @prop dragging - The bar is being dragged; buttons tint red.
  */
 export type ToolButtonProps = {
     priority: number;
@@ -29,23 +30,33 @@ export type Tool = {
     id: string;
     /** i18n key for the button label. */
     labelKey: string;
-    /** Placeholder until the file-tree feature lands. */
     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 the file-tree entry. */
+    /** 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). 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, ctrl+enter
- * selects). Insert mode stays mouse-only because those bindings are
- * mode-restricted and never fire there.
+ * 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 }: ToolBarProps): React.JSX.Element;
+export declare function ToolBar({ mode, tools, session, onToggleFileTree, onOpenSettings, fileTreeOpen, }: ToolBarProps): React.JSX.Element;

package/dist/view/tool-bar.js

@@ -1,7 +1,21 @@
 import { Box, Text, measureElement, useWindowSize } from "ink";
 import { useI18n, useKeyboard, useMouseRegion } from "ink-cartridge";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+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({
@@ -12,40 +26,61 @@ function ToolButton({ priority, onClick, text, focused = false, onDragStart, onD
         onDragMove,
         onDragEnd,
     }, { priority });
-    // Focus is the keyboard state, so it outranks the transient hover color.
-    const borderColor = focused ? "blue" : hover || dragging ? "green" : "white";
+    // 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", paddingLeft: 2, paddingRight: 2 },
+        backgroundColor: "#1e1e1e", height: "100%", justifyContent: "center", alignItems: "center", borderBackgroundColor: "#1e1e1e", paddingLeft: 2, paddingRight: 2 },
         React.createElement(Text, null, text)));
 }
-const DEFAULT_TOOLS = [
-    {
-        id: "file-tree",
-        labelKey: "toolbar.fileTree",
-        onClick: () => {
-            // Business logic (opening the file tree) lands here later.
-        },
-    },
-];
 /**
  * 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). 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, ctrl+enter
- * selects). Insert mode stays mouse-only because those bindings are
- * mode-restricted and never fire there.
+ * 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 = DEFAULT_TOOLS }) {
+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.
-    const [pos, setPos] = useState(null);
+    // 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
@@ -68,25 +103,46 @@ export function ToolBar({ mode = null, tools = DEFAULT_TOOLS }) {
         };
         // Switch from flex centering to absolute positioning at the current
         // rect — seamless, no jump on the first frame.
-        setPos({ top: m.y, left: m.x });
+        setBarPosition({ top: m.y, left: m.x });
         setDragging(true);
     }, []);
     const moveDrag = useCallback((event) => {
         const { dx, dy, width, height } = grabRef.current;
-        setPos(clampFrame(event.x - dx - 1, event.y - dy - 1, columns, rows, width, height));
-    }, [columns, rows]);
+        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 + tools.length) % tools.length), { mode: "normal" }),
-            boundKeyboard(["ctrl+right"], () => setActiveIndex((i) => (i + 1) % tools.length), { mode: "normal" }),
-            boundKeyboard(["ctrl+return"], () => tools[activeIndex]?.onClick(), {
+            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, tools, activeIndex]);
+    }, [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: 4, flexDirection: "row", justifyContent: "center", alignItems: "center" }, tools.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 }))))));
+        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.13",
+	"version": "0.0.14",
 	"description": "A lightweight Markdown editor for the terminal, built on ink-cartridge",
 	"type": "module",
 	"main": "./dist/index.js",