blots-editor 0.0.7 → 0.0.9

package/asset/language/en.json

@@ -0,0 +1,15 @@
+{
+  "menu.edit": "Edit Mode",
+  "menu.settings": "Settings",
+  "menu.other": "Other",
+  "menu.quit": "Quit",
+  "settings.title": "Settings",
+  "settings.language": "Language",
+  "settings.language.en": "English",
+  "settings.language.zh": "中文",
+  "settings.back": "Back",
+  "editor.mode.insert": "INSERT",
+  "editor.mode.normal": "NORMAL",
+  "command.prompt": "Command",
+  "command.unknown": "Unknown command: {cmd}"
+}

package/asset/language/zh.json

@@ -0,0 +1,15 @@
+{
+  "menu.edit": "编辑模式",
+  "menu.settings": "设置",
+  "menu.other": "其他",
+  "menu.quit": "退出",
+  "settings.title": "设置",
+  "settings.language": "语言",
+  "settings.language.en": "英文",
+  "settings.language.zh": "中文",
+  "settings.back": "返回",
+  "editor.mode.insert": "插入",
+  "editor.mode.normal": "普通",
+  "command.prompt": "命令",
+  "command.unknown": "未知命令：{cmd}"
+}

package/dist/i18n-resources.d.ts

@@ -0,0 +1 @@
+export declare const resources: Record<string, Record<string, string>>;

package/dist/i18n-resources.js

@@ -0,0 +1,18 @@
+import { readFileSync } from "node:fs";
+/**
+ * Load language packs from asset/language/*.json.
+ *
+ * We read the files at module load instead of `import x from "./x.json"`:
+ * Node ESM requires import attributes for JSON modules and tsc does not
+ * emit them. Paths resolve from this module's own location (dist/), so
+ * global installs work regardless of cwd — the JSON files ship inside the
+ * package via the `asset` entry in `files`.
+ */
+const LANGUAGE_DIR = new URL("../asset/language/", import.meta.url);
+function loadPack(locale) {
+    return JSON.parse(readFileSync(new URL(`${locale}.json`, LANGUAGE_DIR), "utf8"));
+}
+export const resources = {
+    en: loadPack("en"),
+    zh: loadPack("zh"),
+};

package/dist/index.d.ts

@@ -1 +1,2 @@
+#!/usr/bin/env node
 export {};

package/dist/index.js

@@ -1,16 +1,15 @@
-import { Box, render } from "ink";
+#!/usr/bin/env node
+import { render } from "ink";
 import React from "react";
-import { InformationBar } from "./view/information-bar.js";
-import { CurrentScreen, KeyboardProvider, registerComponent, ScenarioManagementProvider, } from "ink-cartridge";
+import { CurrentScreen, KeyboardProvider, LanguageProvider, registerComponent, ScenarioManagementProvider, } from "ink-cartridge";
+import { resources } from "./i18n-resources.js";
+import { MainMenu } from "./view/main-menu.js";
 import { Editor } from "./view/editor.js";
-function App() {
-    return (React.createElement(Box, { flexDirection: "column", height: "100%", width: "100%" },
-        React.createElement(Box, { flexGrow: 1 },
-            React.createElement(InformationBar, { mode: "NONE" })),
-        React.createElement(Box, { height: "100%", width: "100%" },
-            React.createElement(Editor, { value: "\u4F60\u597D", onChance: () => { } }))));
-}
-registerComponent(App, {});
-render(React.createElement(ScenarioManagementProvider, { defaultScreen: App, fullScreen: true },
-    React.createElement(KeyboardProvider, { autoTab: false, mouse: true },
-        React.createElement(CurrentScreen, null))));
+import { Settings } from "./view/settings.js";
+registerComponent(MainMenu, {});
+registerComponent(Editor, {}, { parent: MainMenu });
+registerComponent(Settings, {}, { parent: MainMenu });
+render(React.createElement(ScenarioManagementProvider, { defaultScreen: MainMenu, fullScreen: true },
+    React.createElement(LanguageProvider, { resources: resources, defaultLanguage: "en", fallbackLanguage: "en" },
+        React.createElement(KeyboardProvider, { autoTab: false, mouse: true, modes: ["insert", "normal"], defaultMode: "insert" },
+            React.createElement(CurrentScreen, null)))));

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

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Modal command bar (like Helix's `:` prompt). Rendered as a modal layer
+ * element, so it exclusively owns the keyboard while open — the editor's
+ * bindings (including the insert-mode `*` wildcard) stay dormant.
+ */
+export declare function CommandBar(): React.JSX.Element;

package/dist/view/command-bar.js

@@ -0,0 +1,57 @@
+import { Box, Text } from "ink";
+import { back, ModalLayerElementContext, useI18n, useKeyboard, useScreenSystem, } from "ink-cartridge";
+import React, { useContext, useEffect, useRef, useState } from "react";
+/**
+ * Modal command bar (like Helix's `:` prompt). Rendered as a modal layer
+ * element, so it exclusively owns the keyboard while open — the editor's
+ * bindings (including the insert-mode `*` wildcard) stay dormant.
+ */
+export function CommandBar() {
+    const ctx = useContext(ModalLayerElementContext);
+    const { t } = useI18n();
+    const { boundKeyboard, setMode } = useKeyboard();
+    const { closeModalLayer } = useScreenSystem();
+    const [input, setInput] = useState("");
+    const [error, setError] = useState(null);
+    // Handler closures stay stable across renders; the ref holds the truth.
+    const inputRef = useRef("");
+    useEffect(() => {
+        if (!ctx) {
+            return;
+        }
+        const unbinds = [];
+        unbinds.push(boundKeyboard(["*"], (ch) => {
+            inputRef.current += ch;
+            setInput(inputRef.current);
+            setError(null);
+        }, { elementId: ctx.id }));
+        unbinds.push(boundKeyboard(["backspace"], () => {
+            inputRef.current = inputRef.current.slice(0, -1);
+            setInput(inputRef.current);
+        }, { elementId: ctx.id }));
+        unbinds.push(boundKeyboard(["escape"], () => {
+            closeModalLayer(ctx.modalLayer.layerId);
+            setMode("normal");
+        }, { elementId: ctx.id }));
+        unbinds.push(boundKeyboard(["return"], () => {
+            const cmd = inputRef.current.trim();
+            if (cmd === "quit") {
+                closeModalLayer(ctx.modalLayer.layerId);
+                setMode("insert");
+                back();
+            }
+            else if (cmd) {
+                setError(t("command.unknown", { params: { cmd } }));
+            }
+        }, { elementId: ctx.id }));
+        return () => {
+            unbinds.forEach((fn) => fn());
+        };
+    }, [boundKeyboard, closeModalLayer, ctx, setMode, t]);
+    return (React.createElement(Box, { flexDirection: "row", width: "100%", height: 1, paddingLeft: 1, backgroundColor: "black" },
+        React.createElement(Text, { color: "green" }, ":"),
+        React.createElement(Text, null, input),
+        error ? React.createElement(Text, { color: "red" },
+            "  ",
+            error) : null));
+}

package/dist/view/editor.d.ts

@@ -1,16 +1,16 @@
 import React from "react";
 export type EditorContext = {
-    onChance: () => void;
-    value: string;
+    onChance?: () => void;
+    value?: string;
     lineNumberRightSpacing?: number;
     cursorOffset?: number;
     cursorHeightOffset?: number;
     numberOfIndentationSpaces?: number;
 };
 /**
- * Main editor view: renders line numbers + text and routes every keystroke
- * to the controller as a named command. Rendering diffs via the controller's
- * change notifications; the controller lives in a ref so its state survives
- * re-renders (same pattern the old TextCalculation used).
+ * Main editor view: renders the status bar + line numbers + text, routes
+ * every keystroke to the controller as a named command, and splits
+ * bindings by mode — insert keeps the classic editing keys, normal gets
+ * hjkl + arrow-key movement and the `:` command bar.
  */
 export declare function Editor({ value: initialText, lineNumberRightSpacing, cursorOffset, cursorHeightOffset, numberOfIndentationSpaces, }: EditorContext): React.JSX.Element;

package/dist/view/editor.js

@@ -1,15 +1,17 @@
 import { Box, Text, useBoxMetrics, useCursor } from "ink";
-import { useKeyboard, useMouseRegion } from "ink-cartridge";
-import React, { useEffect, useRef, useState } from "react";
+import { applyElementToModalLayer, openModalLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { EditorController } from "../core/editor-controller.js";
 import { clickToPosition } from "./click-mapping.js";
+import { CommandBar } from "./command-bar.js";
+import { InformationBar } from "./information-bar.js";
 /**
- * Main editor view: renders line numbers + text and routes every keystroke
- * to the controller as a named command. Rendering diffs via the controller's
- * change notifications; the controller lives in a ref so its state survives
- * re-renders (same pattern the old TextCalculation used).
+ * Main editor view: renders the status bar + line numbers + text, routes
+ * every keystroke to the controller as a named command, and splits
+ * bindings by mode — insert keeps the classic editing keys, normal gets
+ * hjkl + arrow-key movement and the `:` command bar.
  */
-export function Editor({ value: initialText, lineNumberRightSpacing = 1, cursorOffset = 0, cursorHeightOffset = 2, numberOfIndentationSpaces = 2, }) {
+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, {
@@ -22,27 +24,91 @@ export function Editor({ value: initialText, lineNumberRightSpacing = 1, cursorO
         return controller.onChange(() => forceUpdate((n) => n + 1));
     }, [controller]);
     const { setCursorPosition } = useCursor();
-    const { boundKeyboard, enableWildcardPriority } = useKeyboard();
+    const { boundKeyboard, enableWildcardPriority, getCurrentMode, registryCompositionKey, removeCompositionKey, setMode, } = useKeyboard();
+    const { t } = useI18n();
+    // The engine keeps modes in a ref (no React notification), so we mirror
+    // switches locally to keep the status bar live.
+    const [mode, setLocalMode] = useState(() => getCurrentMode());
+    const switchMode = useCallback((next) => {
+        setMode(next);
+        setLocalMode(next);
+    }, [setMode]);
+    const openCommandBar = useCallback(() => {
+        openModalLayer("command", 100);
+        applyElementToModalLayer("command", {
+            elementId: "command-input",
+            element: CommandBar,
+        });
+    }, []);
     useEffect(() => {
         const removeWildcard = enableWildcardPriority();
         const unbinds = [];
-        unbinds.push(boundKeyboard(["*"], (input) => controller.execute("editor.insertText", { text: input })));
-        unbinds.push(boundKeyboard(["return"], () => controller.execute("editor.splitLine")));
-        unbinds.push(boundKeyboard(["right"], () => controller.execute("cursor.moveRight")));
-        unbinds.push(boundKeyboard(["left"], () => controller.execute("cursor.moveLeft")));
-        // backspace deletes before the cursor; delete removes after it —
-        // the old prototype treated both as backspace.
-        unbinds.push(boundKeyboard(["backspace"], () => controller.execute("editor.deleteBefore")));
-        unbinds.push(boundKeyboard(["delete"], () => controller.execute("editor.deleteAfter")));
-        unbinds.push(boundKeyboard(["up"], () => controller.execute("cursor.moveUp")));
-        unbinds.push(boundKeyboard(["down"], () => controller.execute("cursor.moveDown")));
-        unbinds.push(boundKeyboard(["tab"], () => controller.execute("editor.indent")));
-        unbinds.push(boundKeyboard(["shift+tab"], () => controller.execute("editor.outdent")));
+        const bind = (keys, handler, options = {}) => {
+            unbinds.push(boundKeyboard(keys, handler, options));
+        };
+        // insert mode: classic editing
+        bind(["*"], (input) => controller.execute("editor.insertText", { text: input }), { mode: "insert" });
+        bind(["return"], () => controller.execute("editor.splitLine"), { mode: "insert" });
+        bind(["right"], () => controller.execute("cursor.moveRight"), { mode: "insert" });
+        bind(["left"], () => controller.execute("cursor.moveLeft"), { mode: "insert" });
+        // backspace deletes before the cursor; delete removes after it.
+        bind(["backspace"], () => controller.execute("editor.deleteBefore"), {
+            mode: "insert",
+        });
+        bind(["delete"], () => controller.execute("editor.deleteAfter"), { mode: "insert" });
+        bind(["up"], () => controller.execute("cursor.moveUp"), { mode: "insert" });
+        bind(["down"], () => controller.execute("cursor.moveDown"), { mode: "insert" });
+        bind(["tab"], () => controller.execute("editor.indent"), { mode: "insert" });
+        bind(["shift+tab"], () => controller.execute("editor.outdent"), { mode: "insert" });
+        bind(["escape"], () => switchMode("normal"), { mode: "insert" });
+        // normal mode: movement + command bar
+        bind(["h", "left"], () => controller.execute("cursor.moveLeft"), { mode: "normal" });
+        bind(["j"], () => controller.execute("cursor.moveDown"), { mode: "normal" });
+        bind(["down"], () => controller.execute("cursor.moveDown"), { mode: "normal" });
+        bind(["k", "up"], () => controller.execute("cursor.moveUp"), { mode: "normal" });
+        bind(["l", "right"], () => controller.execute("cursor.moveRight"), { mode: "normal" });
+        bind(["w"], () => controller.execute("cursor.wordForward"), { mode: "normal" });
+        bind(["b"], () => controller.execute("cursor.wordBackward"), { mode: "normal" });
+        bind(["0"], () => controller.execute("cursor.lineStart"), { mode: "normal" });
+        bind(["$"], () => controller.execute("cursor.lineEnd"), { mode: "normal" });
+        // `gg` via the composition engine: the first `g` arms the chain, the
+        // second fires documentStart. `mode` keeps typing `g` in insert mode
+        // untouched, since composition runs ahead of the `*` wildcard.
+        registryCompositionKey({
+            key: "g",
+            flags: [],
+            alternativeFlag: "goto",
+            needs: ["goto"],
+            optional: true,
+            mode: "normal",
+            execute: (ctx) => {
+                if (ctx.lastFlag === "goto") {
+                    controller.execute("cursor.documentStart");
+                    return null;
+                }
+                // head press: let the engine fill the flag from alternativeFlag
+                return { ...ctx, lastFlag: null };
+            },
+        });
+        unbinds.push(() => removeCompositionKey("g"));
+        // Ink marks "G" as shift+g, so the normalized key name is "shift+G".
+        bind(["shift+G"], () => controller.execute("cursor.documentEnd"), { mode: "normal" });
+        bind(["i"], () => switchMode("insert"), { mode: "normal" });
+        bind([":"], () => openCommandBar(), { mode: "normal" });
         return () => {
             removeWildcard();
             unbinds.forEach((fn) => fn());
         };
-    }, [boundKeyboard, enableWildcardPriority, controller]);
+    }, [
+        boundKeyboard,
+        controller,
+        enableWildcardPriority,
+        getCurrentMode,
+        openCommandBar,
+        registryCompositionKey,
+        removeCompositionKey,
+        switchMode,
+    ]);
     const ref = useRef(null);
     const { height } = useBoxMetrics(ref);
     const doc = controller.document;
@@ -54,9 +120,8 @@ export function Editor({ value: initialText, lineNumberRightSpacing = 1, cursorO
     const cursorX = cursor.visual + lineNumberWidth + lineNumberRightSpacing + cursorOffset;
     const cursorY = cursor.line - visibleStart + cursorHeightOffset;
     setCursorPosition({ x: cursorX, y: cursorY });
-    // Mouse: clicks position the cursor; the wheel scrolls one line at a time.
-    // The callbacks close over this render's metrics, and useMouseRegion keeps
-    // them fresh, so scrollTop/gutter always match what the user sees.
+    // Mouse: clicks position the cursor in any mode; the wheel scrolls one
+    // line at a time. The callbacks close over this render's metrics.
     const mouseRef = useMouseRegion({
         onClick: (event, rect) => {
             const target = clickToPosition(event, rect, lineNumberWidth + lineNumberRightSpacing, doc.scrollTop, doc.lineCount);
@@ -74,12 +139,15 @@ export function Editor({ value: initialText, lineNumberRightSpacing = 1, cursorO
             }
         },
     });
-    return (React.createElement(Box, { ref: mouseRef, height: "100%", width: "100%", backgroundColor: "#1e1e1e" },
-        React.createElement(Box, { ref: ref, height: "100%", width: "100%", flexDirection: "column" }, visibleLines.map((each, i) => {
-            const lineNumber = visibleStart + i;
-            return (React.createElement(Box, { key: lineNumber, flexDirection: "row" },
-                React.createElement(Box, { width: lineNumberWidth, justifyContent: "flex-end", marginRight: lineNumberRightSpacing },
-                    React.createElement(Text, { bold: cursor.line === lineNumber }, lineNumber)),
-                React.createElement(Text, null, each)));
-        }))));
+    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(Box, { ref: mouseRef, flexGrow: 1, width: "100%", backgroundColor: "#1e1e1e" },
+            React.createElement(Box, { ref: ref, height: "100%", width: "100%", flexDirection: "column" }, visibleLines.map((each, i) => {
+                const lineNumber = visibleStart + i;
+                return (React.createElement(Box, { key: lineNumber, flexDirection: "row" },
+                    React.createElement(Box, { width: lineNumberWidth, justifyContent: "flex-end", marginRight: lineNumberRightSpacing },
+                        React.createElement(Text, { bold: cursor.line === lineNumber }, lineNumber)),
+                    React.createElement(Text, null, each)));
+            })))));
 }

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

@@ -1,8 +1,10 @@
 import React from "react";
-export type Information = {
-    /**
-     * current mode
-     */
+export type InformationBarProps = {
     mode: string;
+    cursor?: {
+        line: number;
+        column: number;
+    };
 };
-export declare function InformationBar({ mode }: Information): React.JSX.Element;
+/** Status bar: current mode (live) plus the cursor's 1-based position. */
+export declare function InformationBar({ mode, cursor }: InformationBarProps): React.JSX.Element;

package/dist/view/information-bar.js

@@ -1,6 +1,13 @@
 import { Box, Text } from "ink";
 import React from "react";
-export function InformationBar({ mode }) {
-    return React.createElement(Box, { width: "100%", height: 1, backgroundColor: "blue", flexDirection: 'row', paddingLeft: 2 },
-        React.createElement(Text, { color: 'white', bold: true }, mode));
+/** Status bar: current mode (live) plus the cursor's 1-based position. */
+export function InformationBar({ mode, cursor }) {
+    return (React.createElement(Box, { width: "100%", height: 1, backgroundColor: "blue", flexDirection: "row", paddingLeft: 2 },
+        React.createElement(Text, { color: "white", bold: true }, mode),
+        cursor ? (React.createElement(Text, { color: "white" },
+            "  ",
+            "Ln ",
+            cursor.line + 1,
+            ", Col ",
+            cursor.column + 1)) : null));
 }

package/dist/view/logo.d.ts

@@ -0,0 +1,9 @@
+/**
+ * "Blots Editor" ASCII logo — figlet box-drawing style (█ ╔ ═ ║ ╚ ╝), whose
+ * shaded edges give a pseudo-3D look. "BLOTS" renders white, "EDITOR" gray.
+ *
+ * To swap the style, replace these lines with your own art, keeping the
+ * white/gray per-line split.
+ */
+export declare const LOGO_WHITE: string[];
+export declare const LOGO_GRAY: string[];

package/dist/view/logo.js

@@ -0,0 +1,23 @@
+/**
+ * "Blots Editor" ASCII logo — figlet box-drawing style (█ ╔ ═ ║ ╚ ╝), whose
+ * shaded edges give a pseudo-3D look. "BLOTS" renders white, "EDITOR" gray.
+ *
+ * To swap the style, replace these lines with your own art, keeping the
+ * white/gray per-line split.
+ */
+export const LOGO_WHITE = [
+    "██████╗ ██╗     ██████╗ ████████╗ ██████╗  ",
+    "██╔══██╗██║     ██╔══██╗╚══██╔══╝██╔════╝  ",
+    "██████╔╝██║     ██║  ██║   ██║   ███████╗  ",
+    "██╔══██╗██║     ██║  ██║   ██║   ╚════██║  ",
+    "██████╔╝██║     ██║  ██║   ██║   ███████║  ",
+    "╚═════╝ ╚██████╗╚██████╔╝   ╚═╝   ╚══════╝  ",
+];
+export const LOGO_GRAY = [
+    "███████╗ ██████╗ ████████╗ ████████╗ ██████╗ ██████╗",
+    "██╔════╝ ██╔══██╗    ██╔═╝ ╚══██╔══╝ ██╔══██╗ ██╔══██╗",
+    "█████╗   ██║  ██║    ██║     ██║   ██║  ██║ ██████╔╝",
+    "██╔══╝   ██║  ██║    ██║     ██║   ██║  ██║ ██╔══██╗",
+    "███████╗ ██║  ██║    ██║     ██║   ██║  ██║ ██║  ██║",
+    "╚══════╝ ╚█████╔╝    ╚═╝     ╚═╝   ╚██████╔╝ ╚═╝  ╚═╝",
+];

package/dist/view/main-menu.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function MainMenu(): React.JSX.Element;

package/dist/view/main-menu.js

@@ -0,0 +1,52 @@
+import { Box, Text } from "ink";
+import { useI18n, useKeyboard, useMouseRegion } from "ink-cartridge";
+import React, { useEffect, useState } from "react";
+import { Editor } from "./editor.js";
+import { Settings } from "./settings.js";
+import { gotoScreen } from "ink-cartridge";
+import { LOGO_GRAY, LOGO_WHITE } 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.
+ */
+function MenuButton({ label, shortcut, disabled, onClick }) {
+    const [hovered, setHovered] = useState(false);
+    const ref = useMouseRegion({
+        onEnter: () => setHovered(true),
+        onLeave: () => setHovered(false),
+        onClick: () => {
+            if (!disabled) {
+                onClick?.();
+            }
+        },
+    });
+    return (React.createElement(Box, { ref: ref, paddingLeft: 1, paddingRight: 1 },
+        React.createElement(Text, { inverse: hovered, dimColor: disabled }, label),
+        !disabled && shortcut ? React.createElement(Text, { dimColor: true },
+            "  [",
+            shortcut,
+            "]") : null));
+}
+export function MainMenu() {
+    const { t } = useI18n();
+    const { boundKeyboard } = useKeyboard();
+    useEffect(() => {
+        const unbinds = [
+            boundKeyboard(["e"], () => gotoScreen(Editor, {})),
+            boundKeyboard(["s"], () => gotoScreen(Settings, {})),
+            boundKeyboard(["q"], () => process.exit(0)),
+        ];
+        return () => unbinds.forEach((fn) => fn());
+    }, [boundKeyboard]);
+    return (React.createElement(Box, { flexDirection: "column", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" },
+        React.createElement(Box, { flexDirection: "column", gap: 1, marginBottom: 6 }, LOGO_WHITE.map((line, i) => (React.createElement(Box, { key: i, flexDirection: "row" },
+            React.createElement(Text, { color: "white" },
+                line,
+                " "),
+            React.createElement(Text, { color: "gray" }, LOGO_GRAY[i]))))),
+        React.createElement(Box, { flexDirection: "row", gap: 6 },
+            React.createElement(MenuButton, { label: t("menu.edit"), shortcut: "e", onClick: () => gotoScreen(Editor, {}) }),
+            React.createElement(MenuButton, { label: t("menu.settings"), shortcut: "s", onClick: () => gotoScreen(Settings, {}) }),
+            React.createElement(MenuButton, { label: t("menu.other"), disabled: true }),
+            React.createElement(MenuButton, { label: t("menu.quit"), shortcut: "q", onClick: () => process.exit(0) }))));
+}

package/dist/view/settings.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Settings(): React.JSX.Element;

package/dist/view/settings.js

@@ -0,0 +1,97 @@
+import { Box, Text } from "ink";
+import { back, ModalLayerElementContext, useI18n, useKeyboard, useMouseRegion, useScreenSystem, } from "ink-cartridge";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+const LANGUAGES = [
+    { code: "en", labelKey: "settings.language.en" },
+    { code: "zh", labelKey: "settings.language.zh" },
+];
+/** Selectable language row with the same hover-highlight style as the menu. */
+function LanguageRow({ label, selected, active, onEnter, onLeave, onClick, }) {
+    const ref = useMouseRegion({ onEnter, onLeave, onClick });
+    return (React.createElement(Box, { ref: ref, paddingLeft: 1, paddingRight: 1 },
+        React.createElement(Text, { inverse: active },
+            active ? "> " : "  ",
+            label,
+            selected ? " *" : "")));
+}
+/**
+ * Modal language picker, opened from the settings screen. While open it owns
+ * the keyboard (modal layer takeover); picking a language applies it and
+ * closes, Esc cancels without changing anything.
+ */
+function LanguagePicker() {
+    const ctx = useContext(ModalLayerElementContext);
+    const { t, setLanguage, currentLanguage } = useI18n();
+    const { boundKeyboard } = useKeyboard();
+    const { closeModalLayer } = useScreenSystem();
+    const [index, setIndex] = useState(0);
+    const [hovered, setHovered] = useState(null);
+    useEffect(() => {
+        if (!ctx) {
+            return;
+        }
+        const unbinds = [
+            boundKeyboard(["up"], () => setIndex((i) => Math.max(0, i - 1)), { elementId: ctx.id }),
+            boundKeyboard(["down"], () => setIndex((i) => Math.min(LANGUAGES.length - 1, i + 1)), { elementId: ctx.id }),
+            boundKeyboard(["return"], () => {
+                setLanguage(LANGUAGES[index].code);
+                closeModalLayer(ctx.modalLayer.layerId);
+            }, { elementId: ctx.id }),
+            boundKeyboard(["escape"], () => closeModalLayer(ctx.modalLayer.layerId), { elementId: ctx.id }),
+        ];
+        return () => unbinds.forEach((fn) => fn());
+    }, [boundKeyboard, closeModalLayer, ctx, index, setLanguage]);
+    const apply = (code) => {
+        if (!ctx) {
+            return;
+        }
+        setLanguage(code);
+        closeModalLayer(ctx.modalLayer.layerId);
+    };
+    return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
+        React.createElement(Box, { flexDirection: "column", borderStyle: "bold", borderColor: "white", backgroundColor: "black", width: 36, alignItems: "center", paddingX: 4, paddingY: 1, gap: 1 },
+            React.createElement(Text, { bold: true }, t("settings.language")),
+            LANGUAGES.map((lang, i) => (React.createElement(LanguageRow, { key: lang.code, label: t(lang.labelKey), selected: currentLanguage === lang.code, active: i === index || hovered === i, onEnter: () => setHovered(i), onLeave: () => setHovered((h) => (h === i ? null : h)), onClick: () => apply(lang.code) }))),
+            React.createElement(Text, { dimColor: true },
+                t("settings.back"),
+                " (Esc)"))));
+}
+/** A single settings entry: label plus its current value; opens a picker on activation. */
+function SettingRow({ label, value, active, onEnter, onLeave, onClick, }) {
+    const ref = useMouseRegion({ onEnter, onLeave, onClick });
+    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() {
+    const { t, currentLanguage } = useI18n();
+    const { boundKeyboard } = useKeyboard();
+    const { openModalLayer, applyElementToModalLayer } = useScreenSystem();
+    const [hovered, setHovered] = useState(false);
+    const openLanguagePicker = useCallback(() => {
+        openModalLayer("language", 50);
+        applyElementToModalLayer("language", {
+            elementId: "language-picker",
+            element: LanguagePicker,
+        });
+    }, [applyElementToModalLayer, openModalLayer]);
+    useEffect(() => {
+        const unbinds = [
+            boundKeyboard(["return"], () => openLanguagePicker()),
+            boundKeyboard(["escape", "backspace"], () => back()),
+        ];
+        return () => unbinds.forEach((fn) => fn());
+    }, [boundKeyboard, openLanguagePicker]);
+    const currentLabel = LANGUAGES.find((lang) => lang.code === currentLanguage)?.labelKey ??
+        "settings.language.en";
+    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 },
+            React.createElement(SettingRow, { label: t("settings.language"), value: t(currentLabel), active: hovered, onEnter: () => setHovered(true), onLeave: () => setHovered(false), onClick: openLanguagePicker })),
+        React.createElement(Box, { marginTop: 4 },
+            React.createElement(Text, { dimColor: true },
+                t("settings.back"),
+                " (Esc)"))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blots-editor",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"description": "A lightweight Markdown editor for the terminal, built on ink-cartridge",
 	"type": "module",
 	"main": "./dist/index.js",
@@ -16,6 +16,7 @@
 	},
 	"files": [
 		"dist",
+		"asset",
 		"README.md",
 		"LICENSE"
 	],