blots-editor 0.0.13 → 0.0.15

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/event/subscription/toolbar-store.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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;
+    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/event/subscription/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/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/event/subscription/tree-store.js

@@ -0,0 +1,28 @@
+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 pos = { x: 0, y: 0, width: 0, height: 0 };
+const listeners = new Set();
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function getTreePos() {
+    return pos;
+}
+export function setTreePos(newPos) {
+    pos = newPos;
+    for (const listener of listeners) {
+        listener();
+    }
+}
+/** Reactive binding: re-renders whenever the pane width changes. */
+export function useTree() {
+    return useSyncExternalStore(subscribe, getTreePos, getTreePos);
+}

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

@@ -1,16 +1,24 @@
 import { Box, Text, useBoxMetrics, useCursor } from "ink";
-import { applyElement, applyElementToModalLayer, closeLayer, openLayer, openModalLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
+import { applyElement, applyElementToModalLayer, closeLayer, eraseElement, openLayer, openModalLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { EditorController } from "../core/editor-controller.js";
-import { useSettings } from "../core/settings/useSettings.js";
-import { clickToPosition } from "./click-mapping.js";
-import { CommandBar } from "./command-bar.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";
 const TOOLBAR_Z_INDEX = 1;
+/** Layer hosting the file tree; a regular layer like the toolbar. */
+const FILETREE_LAYER_ID = "file-tree";
+const FILETREE_Z_INDEX = 1;
+/** Layer hosting the in-editor settings overlay (above the other panes). */
+const EDITOR_SETTINGS_LAYER_ID = "editor-settings";
+const EDITOR_SETTINGS_Z_INDEX = 2;
 /**
  * Main editor view: renders the status bar + line numbers + text, routes
  * every keystroke to the controller as a named command, and splits
@@ -18,17 +26,26 @@ const TOOLBAR_Z_INDEX = 1;
  * hjkl + arrow-key movement and the `:` command bar.
  */
 export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cursorOffset = 0, cursorHeightOffset = 2, numberOfIndentationSpaces = 2, }) {
-    const controllerRef = useRef(null);
-    if (!controllerRef.current) {
-        controllerRef.current = new EditorController(initialText, {
+    // One file session per editor mount; `Document.setText` keeps the
+    // controller instance stable across file opens, so bindings stay live.
+    const sessionRef = useRef(null);
+    if (!sessionRef.current) {
+        sessionRef.current = new EditorSession(initialText, {
             indentWidth: numberOfIndentationSpaces,
         });
     }
-    const controller = controllerRef.current;
+    const session = sessionRef.current;
+    const controller = session.controller;
     const [, forceUpdate] = useState(0);
     useEffect(() => {
-        return controller.onChange(() => forceUpdate((n) => n + 1));
-    }, [controller]);
+        const unbindDoc = controller.onChange(() => forceUpdate((n) => n + 1));
+        // File opens/saves notify the session, not the controller.
+        const unbindSession = session.onChange(() => forceUpdate((n) => n + 1));
+        return () => {
+            unbindDoc();
+            unbindSession();
+        };
+    }, [controller, session]);
     const { setCursorPosition } = useCursor();
     const { boundKeyboard, enableWildcardPriority, getCurrentMode, registryCompositionKey, removeCompositionKey, setMode, } = useKeyboard();
     const { t } = useI18n();
@@ -45,8 +62,9 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         applyElementToModalLayer("command", {
             elementId: "command-input",
             element: CommandBar,
+            props: { session },
         });
-    }, []);
+    }, [session]);
     // The toolbar lives in a regular layer (below modal layers) so it floats
     // above the document without taking over the keyboard. The editor owns the
     // layer lifecycle and the ctrl+tab toggle because the layer's element
@@ -60,6 +78,12 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
     // dispatcher registration and openLayer would throw. ctrl+tab toggles hit
     // the same deferred path — the one-tick delay is imperceptible. Closing is
     // safe immediately because the dispatcher is registered by then.
+    // The file tree pane (right side) toggles via the toolbar's File Tree
+    // button; it defaults to open so the editor greets the user with a tree.
+    const [fileTreeOpen, setFileTreeOpen] = useState(true);
+    // The in-editor settings overlay toggles via the toolbar's Settings
+    // button; the overlay itself closes via its Exit button or Esc.
+    const [settingsOpen, setSettingsOpen] = useState(false);
     useEffect(() => {
         if (!toolbarOpen) {
             closeLayer(TOOLBAR_LAYER_ID);
@@ -67,14 +91,63 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         }
         const timer = setTimeout(() => {
             openLayer(TOOLBAR_LAYER_ID, TOOLBAR_Z_INDEX);
+            // applyElement ignores re-applies of an existing element id, so
+            // erase first — otherwise prop updates (mode, fileTreeOpen) would
+            // never reach the mounted toolbar. The toolbar's drag position
+            // survives the remount via the external position store.
+            eraseElement(TOOLBAR_LAYER_ID, "toolbar");
             applyElement(TOOLBAR_LAYER_ID, {
                 elementId: "toolbar",
                 element: ToolBar,
-                props: { mode },
+                props: {
+                    currentMode: mode,
+                    session,
+                    openFileTree: () => setFileTreeOpen((open) => !open),
+                    openSettings: () => setSettingsOpen((open) => !open),
+                    fileTreeOpen
+                },
             });
         }, 0);
         return () => clearTimeout(timer);
-    }, [toolbarOpen, mode]);
+    }, [toolbarOpen, mode, session, fileTreeOpen, settingsOpen]);
+    useEffect(() => {
+        if (!fileTreeOpen) {
+            closeLayer(FILETREE_LAYER_ID);
+            return;
+        }
+        const timer = setTimeout(() => {
+            openLayer(FILETREE_LAYER_ID, FILETREE_Z_INDEX);
+            applyElement(FILETREE_LAYER_ID, {
+                elementId: "file-tree",
+                element: FileTree,
+                props: { session },
+            });
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [fileTreeOpen, session]);
+    // Both branches are deferred: settingsOpen starts false, and an immediate
+    // closeLayer on the first mount would race the provider's dispatcher
+    // registration (same child-first effect ordering as the toolbar open).
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (!settingsOpen) {
+                closeLayer(EDITOR_SETTINGS_LAYER_ID);
+                return;
+            }
+            openLayer(EDITOR_SETTINGS_LAYER_ID, EDITOR_SETTINGS_Z_INDEX);
+            applyElement(EDITOR_SETTINGS_LAYER_ID, {
+                elementId: "editor-settings",
+                element: EditorSetting,
+            });
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [settingsOpen]);
+    useEffect(() => {
+        return () => closeLayer(EDITOR_SETTINGS_LAYER_ID);
+    }, []);
+    useEffect(() => {
+        return () => closeLayer(FILETREE_LAYER_ID);
+    }, []);
     useEffect(() => {
         return boundKeyboard(["ctrl+tab"], () => setToolbarOpen((open) => !open));
     }, [boundKeyboard]);
@@ -133,6 +206,8 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         bind(["shift+G"], () => controller.execute("cursor.documentEnd"), { mode: "normal" });
         bind(["i"], () => switchMode("insert"), { mode: "normal" });
         bind([":"], () => openCommandBar(), { mode: "normal" });
+        // Ctrl+S saves in normal mode (Vim-style; insert stays untouched).
+        bind(["ctrl+s"], () => session.save(), { mode: "normal" });
         return () => {
             removeWildcard();
             unbinds.forEach((fn) => fn());
@@ -146,6 +221,7 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         registryCompositionKey,
         removeCompositionKey,
         switchMode,
+        session,
     ]);
     const ref = useRef(null);
     const { height, width } = useBoxMetrics(ref);
@@ -196,7 +272,7 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
     });
     const modeText = mode === "normal" ? t("editor.mode.normal") : t("editor.mode.insert");
     return (React.createElement(Box, { flexDirection: "column", height: "100%", width: "100%" },
-        React.createElement(InformationBar, { mode: modeText, cursor: { line: cursor.line, column: cursor.visual } }),
+        React.createElement(InformationBar, { mode: modeText, cursor: { line: cursor.line, column: cursor.visual }, session: session }),
         React.createElement(Box, { ref: mouseRef, flexGrow: 1, width: "100%", backgroundColor: "#1e1e1e" },
             React.createElement(Box, { ref: ref, height: "100%", width: "100%", flexDirection: "column" }, Array.from({ length: effectiveH }, (_, i) => {
                 const vline = visibleStart + i;
@@ -206,6 +282,6 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
                 }
                 return (React.createElement(Box, { key: vline, flexDirection: "row" },
                     React.createElement(Box, { width: lineNumberWidth, justifyContent: "flex-end", marginRight: lineNumberRightSpacing }, seg.first ? (React.createElement(Text, { bold: cursor.line === seg.line }, seg.line)) : null),
-                    React.createElement(Text, null, doc.getLine(seg.line).slice(seg.start, seg.end))));
+                    React.createElement(Text, null, seg.text)));
             })))));
 }

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/page/settings.d.ts

@@ -0,0 +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 → 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, useState, } from "react";
-import { useSettings } from "../core/settings/useSettings.js";
-import { ModalFrame } from "./modal-frame.js";
-import { SensitivityBar, snapSensitivity } from "./sensitivity-bar.js";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+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" },
@@ -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"),