blots-editor 0.0.8 → 0.0.10

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/core/document/document.d.ts

@@ -17,6 +17,8 @@ export declare class Document {
     private _lines;
     private _cursor;
     private _scrollTop;
+    private _wrapWidth;
+    private _viewScrollTop;
     readonly indentWidth: number;
     constructor(text: string, options?: DocumentOptions);
     get lineCount(): number;
@@ -25,6 +27,35 @@ export declare class Document {
     getLine(i: number): string;
     get cursor(): CursorState;
     get scrollTop(): number;
+    /** Soft-wrap width in terminal cells; `Infinity` disables wrapping. */
+    get wrapWidth(): number;
+    /** Set the soft-wrap width (clamped to at least 1 cell). */
+    setWrapWidth(width: number): void;
+    /** The soft-wrap segments of one logical line (an empty line is one empty segment). */
+    private lineSegments;
+    /** Total number of visual (soft-wrapped) lines across the document. */
+    get visualLineCount(): number;
+    /**
+     * Map a global visual line to its logical line and the segment's logical
+     * span. `first` marks the segment that starts at the logical line start
+     * (the one that carries the line number).
+     */
+    visualLineAt(vline: number): {
+        line: number;
+        start: number;
+        end: number;
+        first: boolean;
+    } | null;
+    /** Global visual line the cursor sits on. */
+    get cursorVisualLine(): number;
+    /** Visual offset of the cursor within its current soft-wrap segment. */
+    get cursorSegmentVisual(): number;
+    /**
+     * The target logical column for a vertical move onto `segment` (in any
+     * line): keep the cursor's offset within its current segment, clamping to
+     * the segment end only when the target segment is narrower.
+     */
+    private moveToSegment;
     /** Gutter width = decimal digit count of the last line number (at least 1). */
     getLineNumberWidth(): number;
     setLine(i: number, text: string): void;
@@ -40,6 +71,10 @@ export declare class Document {
      * (see {@link TextLine.logicalAt}).
      */
     setCursorAtVisual(line: number, visual: number): void;
+    /** Terminal column on a logical line → nearest logical column. */
+    logicalAtVisual(line: number, visual: number): number;
+    /** Logical column → terminal column on a logical line. */
+    visualAtLogical(line: number, logical: number): number;
     moveLeft(): void;
     moveRight(): void;
     /** Vertical movement aligns by visual column, so wide-character lines do not drift. */
@@ -53,13 +88,21 @@ export declare class Document {
     moveWordForward(): void;
     /** A word is a run of non-whitespace; jump back to the current/previous word start. */
     moveWordBackward(): void;
-    /** Page up: move the cursor up by `height - 1` lines (one line of overlap), keeping the visual column. */
+    /** Page up: move the cursor up by `height - 1` visual lines (one line of overlap), keeping the visual column. */
     movePageUp(height: number): void;
     movePageDown(height: number): void;
     /**
-     * Scroll the viewport so the cursor stays visible: if the cursor is above
-     * the viewport, scroll to its line; if below, scroll so it becomes the
-     * last visible line. Returns the new scrollTop.
+     * Scroll the viewport by `delta` visual lines without moving the cursor,
+     * clamped to the document range. Locks the view in place (Ctrl+wheel
+     * browsing) until the cursor moves.
+     */
+    scrollView(delta: number, height: number): number;
+    /**
+     * Scroll the viewport so the cursor stays visible, in visual-line terms:
+     * if the cursor's visual line is above the viewport, scroll to it; if
+     * below, scroll so it becomes the last visible line. Returns the new
+     * scrollTop (in visual lines). While the view is manually locked
+     * (`scrollView`), the position is kept instead and only clamped.
      */
     updateScroll(height: number): number;
 }

package/dist/core/document/document.js

@@ -14,6 +14,10 @@ export class Document {
     _lines;
     _cursor;
     _scrollTop = 0;
+    _wrapWidth = Infinity;
+    // Non-null while the user is scrolling the view manually (Ctrl+wheel):
+    // updateScroll keeps this position instead of following the cursor.
+    _viewScrollTop = null;
     indentWidth;
     constructor(text, options = {}) {
         this._lines = text.split(/\r?\n/).map((t) => new TextLine(t));
@@ -41,6 +45,106 @@ export class Document {
     get scrollTop() {
         return this._scrollTop;
     }
+    /** Soft-wrap width in terminal cells; `Infinity` disables wrapping. */
+    get wrapWidth() {
+        return this._wrapWidth;
+    }
+    /** Set the soft-wrap width (clamped to at least 1 cell). */
+    setWrapWidth(width) {
+        this._wrapWidth = Math.max(1, width);
+    }
+    /** The soft-wrap segments of one logical line (an empty line is one empty segment). */
+    lineSegments(line) {
+        const tl = this._lines[line];
+        if (tl.text.length === 0) {
+            return [{ start: 0, end: 0 }];
+        }
+        const segs = [];
+        let segVisual = 0;
+        let segStart = 0;
+        while (segStart < tl.text.length) {
+            const seg = tl.segmentFrom(segVisual, this._wrapWidth);
+            segs.push({ start: segStart, end: seg.endLogical });
+            if (seg.text === "") {
+                break;
+            }
+            segStart = seg.endLogical;
+            segVisual = seg.endVisual;
+        }
+        return segs;
+    }
+    /** Total number of visual (soft-wrapped) lines across the document. */
+    get visualLineCount() {
+        let total = 0;
+        for (let i = 0; i < this._lines.length; i++) {
+            total += this.lineSegments(i).length;
+        }
+        return total;
+    }
+    /**
+     * Map a global visual line to its logical line and the segment's logical
+     * span. `first` marks the segment that starts at the logical line start
+     * (the one that carries the line number).
+     */
+    visualLineAt(vline) {
+        if (vline < 0) {
+            return null;
+        }
+        let remaining = vline;
+        for (let line = 0; line < this._lines.length; line++) {
+            const segs = this.lineSegments(line);
+            if (remaining < segs.length) {
+                return {
+                    line,
+                    start: segs[remaining].start,
+                    end: segs[remaining].end,
+                    first: remaining === 0,
+                };
+            }
+            remaining -= segs.length;
+        }
+        return null;
+    }
+    /** Global visual line the cursor sits on. */
+    get cursorVisualLine() {
+        const { line, logical } = this._cursor;
+        let v = 0;
+        for (let i = 0; i < line; i++) {
+            v += this.lineSegments(i).length;
+        }
+        const segs = this.lineSegments(line);
+        let idx = 0;
+        // A cursor exactly on a segment boundary belongs to the segment
+        // starting there, so visual lines read like real lines: the boundary
+        // column is the first cell of the next visual line.
+        while (idx < segs.length - 1 && logical >= segs[idx + 1].start) {
+            idx++;
+        }
+        return v + idx;
+    }
+    /** Visual offset of the cursor within its current soft-wrap segment. */
+    get cursorSegmentVisual() {
+        const tl = this._lines[this._cursor.line];
+        const segs = this.lineSegments(this._cursor.line);
+        const { logical } = this._cursor;
+        let idx = segs.length - 1;
+        while (idx > 0 && logical < segs[idx].start) {
+            idx--;
+        }
+        return tl.visualAt(logical) - tl.visualAt(segs[idx].start);
+    }
+    /**
+     * The target logical column for a vertical move onto `segment` (in any
+     * line): keep the cursor's offset within its current segment, clamping to
+     * the segment end only when the target segment is narrower.
+     */
+    moveToSegment(segment) {
+        const offset = this.cursorSegmentVisual;
+        const targetVisual = this.visualAtLogical(segment.line, segment.start) + offset;
+        let col = this.logicalAtVisual(segment.line, targetVisual);
+        col = Math.min(Math.max(col, segment.start), segment.end);
+        this.setCursor(segment.line, col);
+    }
     /** Gutter width = decimal digit count of the last line number (at least 1). */
     getLineNumberWidth() {
         return Math.max(String(this._lines.length - 1).length, 1);
@@ -61,6 +165,9 @@ export class Document {
         const l = Math.max(0, Math.min(line, this._lines.length - 1));
         const len = this._lines[l].text.length;
         this._cursor = { line: l, logical: Math.max(0, Math.min(logical, len)) };
+        // Any cursor movement releases the manual view-scroll lock so the
+        // viewport follows the cursor again.
+        this._viewScrollTop = null;
     }
     /**
      * Set the cursor by terminal column instead of code unit index — the
@@ -71,6 +178,14 @@ export class Document {
         const l = Math.max(0, Math.min(line, this._lines.length - 1));
         this.setCursor(l, this._lines[l].logicalAt(visual));
     }
+    /** Terminal column on a logical line → nearest logical column. */
+    logicalAtVisual(line, visual) {
+        return this._lines[line].logicalAt(visual);
+    }
+    /** Logical column → terminal column on a logical line. */
+    visualAtLogical(line, logical) {
+        return this._lines[line].visualAt(logical);
+    }
     moveLeft() {
         const { line, logical } = this._cursor;
         if (logical > 0) {
@@ -86,17 +201,32 @@ export class Document {
     /** Vertical movement aligns by visual column, so wide-character lines do not drift. */
     moveUp() {
         const { line, logical } = this._cursor;
-        if (line > 0) {
-            const visual = this._lines[line].visualAt(logical);
-            this.setCursor(line - 1, this._lines[line - 1].logicalAt(visual));
+        if (this.cursorVisualLine === 0) {
+            // Already on the first visual line: still move to the start of the
+            // current segment (like up-to-line-start in vim).
+            const segs = this.lineSegments(line);
+            let idx = 0;
+            while (idx < segs.length - 1 && logical >= segs[idx + 1].start) {
+                idx++;
+            }
+            this.setCursor(line, segs[idx].start);
+            return;
         }
+        const prev = this.visualLineAt(this.cursorVisualLine - 1);
+        if (!prev) {
+            return;
+        }
+        this.moveToSegment(prev);
     }
     moveDown() {
-        const { line, logical } = this._cursor;
-        if (line < this._lines.length - 1) {
-            const visual = this._lines[line].visualAt(logical);
-            this.setCursor(line + 1, this._lines[line + 1].logicalAt(visual));
+        if (this.cursorVisualLine >= this.visualLineCount - 1) {
+            return;
         }
+        const next = this.visualLineAt(this.cursorVisualLine + 1);
+        if (!next) {
+            return;
+        }
+        this.moveToSegment(next);
     }
     moveToLineStart() {
         this.setCursor(this._cursor.line, 0);
@@ -140,34 +270,63 @@ export class Document {
         }
         this.setCursor(line, i);
     }
-    /** Page up: move the cursor up by `height - 1` lines (one line of overlap), keeping the visual column. */
+    /** Page up: move the cursor up by `height - 1` visual lines (one line of overlap), keeping the visual column. */
     movePageUp(height) {
-        const { line, logical } = this._cursor;
-        const visual = this._lines[line].visualAt(logical);
-        const target = Math.max(0, line - Math.max(1, height - 1));
-        this.setCursor(target, this._lines[target].logicalAt(visual));
+        const target = Math.max(0, this.cursorVisualLine - Math.max(1, height - 1));
+        const seg = this.visualLineAt(target);
+        if (!seg) {
+            return;
+        }
+        this.moveToSegment(seg);
     }
     movePageDown(height) {
-        const { line, logical } = this._cursor;
-        const visual = this._lines[line].visualAt(logical);
-        const target = Math.min(this._lines.length - 1, line + Math.max(1, height - 1));
-        this.setCursor(target, this._lines[target].logicalAt(visual));
+        const target = Math.min(this.visualLineCount - 1, this.cursorVisualLine + Math.max(1, height - 1));
+        const seg = this.visualLineAt(target);
+        if (!seg) {
+            return;
+        }
+        this.moveToSegment(seg);
     }
     /**
-     * Scroll the viewport so the cursor stays visible: if the cursor is above
-     * the viewport, scroll to its line; if below, scroll so it becomes the
-     * last visible line. Returns the new scrollTop.
+     * Scroll the viewport by `delta` visual lines without moving the cursor,
+     * clamped to the document range. Locks the view in place (Ctrl+wheel
+     * browsing) until the cursor moves.
+     */
+    scrollView(delta, height) {
+        const total = this.visualLineCount;
+        const effectiveH = height > 0 ? height : total;
+        const maxScroll = Math.max(0, total - effectiveH);
+        const base = this._viewScrollTop ?? this._scrollTop;
+        const vs = Math.max(0, Math.min(base + delta, maxScroll));
+        this._viewScrollTop = vs;
+        this._scrollTop = vs;
+        return vs;
+    }
+    /**
+     * Scroll the viewport so the cursor stays visible, in visual-line terms:
+     * if the cursor's visual line is above the viewport, scroll to it; if
+     * below, scroll so it becomes the last visible line. Returns the new
+     * scrollTop (in visual lines). While the view is manually locked
+     * (`scrollView`), the position is kept instead and only clamped.
      */
     updateScroll(height) {
-        const effectiveH = height > 0 ? height : this._lines.length;
+        const total = this.visualLineCount;
+        const effectiveH = height > 0 ? height : total;
+        const maxScroll = Math.max(0, total - effectiveH);
+        if (this._viewScrollTop !== null) {
+            const vs = Math.max(0, Math.min(this._viewScrollTop, maxScroll));
+            this._viewScrollTop = vs;
+            this._scrollTop = vs;
+            return vs;
+        }
+        const vline = this.cursorVisualLine;
         let vs = this._scrollTop;
-        if (this._cursor.line < vs) {
-            vs = this._cursor.line;
+        if (vline < vs) {
+            vs = vline;
         }
-        else if (this._cursor.line >= vs + effectiveH) {
-            vs = this._cursor.line - effectiveH + 1;
+        else if (vline >= vs + effectiveH) {
+            vs = vline - effectiveH + 1;
         }
-        const maxScroll = Math.max(0, this._lines.length - effectiveH);
         vs = Math.max(0, Math.min(vs, maxScroll));
         this._scrollTop = vs;
         return vs;

package/dist/core/document/text-line.d.ts

@@ -21,4 +21,17 @@ export declare class TextLine {
      * (largest prefix not exceeding the target).
      */
     logicalAt(visual: number): number;
+    /**
+     * Cut one soft-wrap segment starting at `startVisual`: the longest
+     * slice whose terminal width is at most `wrapWidth`. Returns the segment
+     * text plus the visual/logical position where it ends (the next call's
+     * `startVisual`). A single character wider than `wrapWidth` (or the
+     * trailing empty segment at line end) is returned on its own so the
+     * caller always makes progress.
+     */
+    segmentFrom(startVisual: number, wrapWidth: number): {
+        text: string;
+        endVisual: number;
+        endLogical: number;
+    };
 }

package/dist/core/document/text-line.js

@@ -57,4 +57,35 @@ export class TextLine {
         }
         return lo;
     }
+    /**
+     * Cut one soft-wrap segment starting at `startVisual`: the longest
+     * slice whose terminal width is at most `wrapWidth`. Returns the segment
+     * text plus the visual/logical position where it ends (the next call's
+     * `startVisual`). A single character wider than `wrapWidth` (or the
+     * trailing empty segment at line end) is returned on its own so the
+     * caller always makes progress.
+     */
+    segmentFrom(startVisual, wrapWidth) {
+        const start = this.logicalAt(startVisual);
+        if (start >= this.text.length) {
+            return {
+                text: "",
+                endVisual: this.visualAt(start),
+                endLogical: start,
+            };
+        }
+        const startVisualActual = this.visualAt(start);
+        const limit = startVisualActual + Math.max(1, wrapWidth);
+        let end = this.logicalAt(limit);
+        // `logicalAt` may snap left onto a wide char; guarantee progress by
+        // taking at least one code point (a surrogate pair counts as one).
+        if (end <= start) {
+            end = start + (this.text.codePointAt(start) > 0xffff ? 2 : 1);
+        }
+        return {
+            text: this.text.slice(start, end),
+            endVisual: this.visualAt(end),
+            endLogical: end,
+        };
+    }
 }

package/dist/core/editor-controller.js

@@ -80,11 +80,22 @@ export class EditorController {
             const height = typeof args?.height === "number" ? args.height : 1;
             doc.movePageDown(height);
         });
-        // Mouse click: position the cursor by terminal column (not code units).
+        // Mouse click: position the cursor by logical column (soft-wrap aware).
         this.defineCommand("cursor.setPosition", (doc, args) => {
             const line = typeof args?.line === "number" ? args.line : doc.cursor.line;
-            const visual = typeof args?.visual === "number" ? args.visual : doc.cursor.visual;
-            doc.setCursorAtVisual(line, visual);
+            if (typeof args?.logical === "number") {
+                doc.setCursor(line, args.logical);
+            }
+            else {
+                const visual = typeof args?.visual === "number" ? args.visual : doc.cursor.visual;
+                doc.setCursorAtVisual(line, visual);
+            }
+        });
+        // Ctrl+wheel: scroll the view without moving the cursor (clamped).
+        this.defineCommand("view.scroll", (doc, args) => {
+            const delta = typeof args?.delta === "number" ? args.delta : 0;
+            const height = typeof args?.height === "number" ? args.height : 1;
+            doc.scrollView(delta, height);
         });
     }
 }

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.js

@@ -1,17 +1,15 @@
 #!/usr/bin/env node
-import { Box, render } from "ink";
+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/click-mapping.d.ts

@@ -1,16 +1,21 @@
+import type { Document } from "../core/document/document.js";
 export type ClickTarget = {
     line: number;
-    visual: number;
+    logical: number;
 };
 /**
  * Convert a 1-based terminal click (from `useMouseRegion`) into a document
- * position, accounting for the line-number gutter and the vertical scroll
- * offset.
+ * position, accounting for the line-number gutter, the vertical scroll
+ * offset, and soft-wrap segments.
  *
  * Assumes the region is the editor box itself with no padding, so
  * `event.x - rect.x` is a 0-based cell column inside the region. Columns
  * left of the gutter (clicks on the line numbers) snap to the text area's
  * left edge; rows past the last document line clamp to it.
+ *
+ * The clicked visual line is mapped through `doc.visualLineAt`, so a click
+ * on a wrapped continuation lands on the same logical line with the segment
+ * offset translated back to a logical column.
  */
 export declare function clickToPosition(event: {
     x: number;
@@ -20,4 +25,4 @@ export declare function clickToPosition(event: {
     y: number;
     width: number;
     height: number;
-}, gutterWidth: number, visibleStart: number, lineCount: number): ClickTarget;
+}, gutterWidth: number, visibleStart: number, doc: Document): ClickTarget;

package/dist/view/click-mapping.js

@@ -1,17 +1,29 @@
 /**
  * Convert a 1-based terminal click (from `useMouseRegion`) into a document
- * position, accounting for the line-number gutter and the vertical scroll
- * offset.
+ * position, accounting for the line-number gutter, the vertical scroll
+ * offset, and soft-wrap segments.
  *
  * Assumes the region is the editor box itself with no padding, so
  * `event.x - rect.x` is a 0-based cell column inside the region. Columns
  * left of the gutter (clicks on the line numbers) snap to the text area's
  * left edge; rows past the last document line clamp to it.
+ *
+ * The clicked visual line is mapped through `doc.visualLineAt`, so a click
+ * on a wrapped continuation lands on the same logical line with the segment
+ * offset translated back to a logical column.
  */
-export function clickToPosition(event, rect, gutterWidth, visibleStart, lineCount) {
+export function clickToPosition(event, rect, gutterWidth, visibleStart, doc) {
     const localX = event.x - rect.x;
     const localY = event.y - rect.y;
-    const visual = Math.max(0, localX - gutterWidth);
-    const line = Math.max(0, Math.min(visibleStart + localY, lineCount - 1));
-    return { line, visual };
+    const vline = visibleStart + localY;
+    const seg = doc.visualLineAt(vline);
+    if (!seg) {
+        const last = doc.lineCount - 1;
+        return { line: last, logical: doc.getLine(last).length };
+    }
+    const segmentOffset = Math.max(0, localX - gutterWidth);
+    const segStartVisual = doc.visualAtLogical(seg.line, seg.start);
+    const col = doc.logicalAtVisual(seg.line, segStartVisual + segmentOffset);
+    const logical = Math.min(Math.max(col, seg.start), seg.end);
+    return { line: seg.line, logical };
 }

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,64 +24,147 @@ 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 { height, width } = useBoxMetrics(ref);
     const doc = controller.document;
     const lineNumberWidth = doc.getLineNumberWidth();
+    // Soft-wrap the text at the editable width minus one cell, leaving a
+    // right-hand margin so the last column never hugs the edge.
+    doc.setWrapWidth(width - lineNumberWidth - lineNumberRightSpacing - 1);
     const visibleStart = doc.updateScroll(height);
-    const effectiveH = height > 0 ? height : doc.lineCount;
-    const visibleLines = doc.lines.slice(visibleStart, visibleStart + effectiveH);
+    const effectiveH = height > 0 ? height : doc.visualLineCount;
     const cursor = doc.cursor;
-    const cursorX = cursor.visual + lineNumberWidth + lineNumberRightSpacing + cursorOffset;
-    const cursorY = cursor.line - visibleStart + cursorHeightOffset;
+    const cursorVisualLine = doc.cursorVisualLine;
+    const cursorX = doc.cursorSegmentVisual + lineNumberWidth + lineNumberRightSpacing + cursorOffset;
+    const cursorY = cursorVisualLine - 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. A plain wheel moves the
+    // cursor one visual line per notch; Ctrl+wheel scrolls the view without
+    // moving the cursor (clamped to the document). Callbacks close over this
+    // render's metrics.
     const mouseRef = useMouseRegion({
         onClick: (event, rect) => {
-            const target = clickToPosition(event, rect, lineNumberWidth + lineNumberRightSpacing, doc.scrollTop, doc.lineCount);
+            const target = clickToPosition(event, rect, lineNumberWidth + lineNumberRightSpacing, doc.scrollTop, doc);
             controller.execute("cursor.setPosition", {
                 line: target.line,
-                visual: target.visual,
+                logical: target.logical,
             });
         },
         onWheel: (event) => {
-            if (event.button === "wheel-up") {
-                controller.execute("cursor.pageUp", { height: 1 });
+            const up = event.button === "wheel-up";
+            const down = event.button === "wheel-down";
+            if (!up && !down) {
+                return;
             }
-            else if (event.button === "wheel-down") {
-                controller.execute("cursor.pageDown", { height: 1 });
+            if (event.ctrl) {
+                controller.execute("view.scroll", {
+                    delta: up ? -1 : 1,
+                    height,
+                });
+                return;
             }
+            controller.execute(up ? "cursor.pageUp" : "cursor.pageDown", {
+                height: 1,
+            });
         },
     });
-    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" }, Array.from({ length: effectiveH }, (_, i) => {
+                const vline = visibleStart + i;
+                const seg = doc.visualLineAt(vline);
+                if (!seg) {
+                    return null;
+                }
+                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))));
+            })))));
 }

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,6 @@
+/**
+ * Pick the logo variant for the current terminal size. Wider screens get the
+ * words side by side; narrower screens stack them, and shrinking height steps
+ * the font down (block → simple → chrome → tiny) so buttons stay visible.
+ */
+export declare function getLogo(columns: number, rows: number): string;

package/dist/view/logo.js

@@ -0,0 +1,87 @@
+import chalk from "chalk";
+import cfonts from "cfonts";
+import gradient from "gradient-string";
+/**
+ * "Blots Editor" rainbow-gradient logo.
+ *
+ * Generated with the same stack `oh-my-logo --filled` uses (cfonts block
+ * glyphs + gradient-string palette) but as a plain string, since
+ * oh-my-logo's own `renderFilled` renders through its own ink instance and
+ * cannot be embedded. `chalk.level` is forced so the gradient survives
+ * non-interactive output (pipes, tests).
+ *
+ * `getLogo(columns, rows)` picks a size tier from terminal dimensions so the
+ * logo shrinks instead of crowding out the menu buttons on small screens.
+ */
+chalk.level = 3;
+const RAINBOW = [
+    "#FF0000",
+    "#FF7F00",
+    "#FFFF00",
+    "#00FF00",
+    "#0000FF",
+    "#8B00FF",
+];
+const FONTS = {
+    block: "block",
+    simple: "simple",
+    chrome: "chrome",
+    tiny: "tiny",
+};
+const renderBlock = (text, font) => {
+    const result = cfonts.render(text, {
+        font: FONTS[font],
+        align: "left",
+        colors: ["system"],
+        backgroundColor: "transparent",
+        letterSpacing: 1,
+        lineHeight: 1,
+        space: true,
+        maxLength: 0,
+    });
+    // cfonts returns `false` when it cannot render; fall back to plain text.
+    const art = (result === false ? text : result.string).replace(/^\n+|\n+$/g, "");
+    return art.split("\n");
+};
+/** Side-by-side layout: "Blots  Editor" on shared lines. */
+const wide = (font) => {
+    const blots = renderBlock("Blots", font);
+    const editor = renderBlock("Editor", font);
+    return blots.map((line, i) => `${line}  ${editor[i] ?? ""}`).join("\n");
+};
+/** Stacked layout: "Blots" above "Editor". */
+const narrow = (font) => `${renderBlock("Blots", font).join("\n")}\n\n${renderBlock("Editor", font).join("\n")}`;
+/** Same gradient pass across the whole logo, whichever layout/font. */
+const toLogo = (plain) => gradient(RAINBOW).multiline(plain);
+/** Size tiers: (min rows, min cols for side-by-side) → (layout, font). */
+const TIERS = [
+    // Wide screens: words side by side; shrink the font as height drops.
+    { minCols: 104, minRows: 26, build: () => wide("block") },
+    { minCols: 104, minRows: 20, build: () => wide("simple") },
+    { minCols: 104, minRows: 0, build: () => wide("tiny") },
+    // Narrow screens: words stacked; shrink the font as height drops.
+    { minCols: 0, minRows: 30, build: () => narrow("block") },
+    { minCols: 0, minRows: 24, build: () => narrow("simple") },
+    { minCols: 0, minRows: 20, build: () => narrow("chrome") },
+    { minCols: 0, minRows: 0, build: () => narrow("tiny") },
+];
+const cache = new Map();
+/**
+ * Pick the logo variant for the current terminal size. Wider screens get the
+ * words side by side; narrower screens stack them, and shrinking height steps
+ * the font down (block → simple → chrome → tiny) so buttons stay visible.
+ */
+export function getLogo(columns, rows) {
+    for (const tier of TIERS) {
+        if (columns >= tier.minCols && rows >= tier.minRows) {
+            const key = tier.build.toString();
+            let logo = cache.get(key);
+            if (!logo) {
+                logo = toLogo(tier.build());
+                cache.set(key, logo);
+            }
+            return logo;
+        }
+    }
+    return toLogo(wide("block"));
+}

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,54 @@
+import { Box, Text, useWindowSize } 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 { 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.
+ */
+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();
+    // The wide logo needs ≈100 columns; below that the words stack vertically.
+    // On short screens `getLogo` also shrinks the font so buttons stay visible.
+    const { columns, rows } = useWindowSize();
+    const narrow = columns < 104;
+    const logo = getLogo(columns, rows);
+    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", marginBottom: narrow ? 2 : 6 },
+            React.createElement(Text, null, logo)),
+        React.createElement(Box, { flexDirection: narrow ? "column" : "row", gap: narrow ? 1 : 6, alignItems: "center" },
+            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.8",
+	"version": "0.0.10",
 	"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"
 	],
@@ -50,10 +51,15 @@
 		"react": ">=18"
 	},
 	"dependencies": {
+		"cfonts": "^3.3.1",
+		"chalk": "^4.1.2",
+		"gradient-string": "^2.0.2",
 		"ink-cartridge": "*",
+		"oh-my-logo": "^0.5.0",
 		"string-width": "^8.2.2"
 	},
 	"devDependencies": {
+		"@types/gradient-string": "^1.1.6",
 		"@types/node": "^20.19.39",
 		"@types/react": "^19.2.14",
 		"ink": "^7.1.1",