blots-editor 0.0.16 → 0.0.18

package/dist/core/io/file-tree-model.d.ts

@@ -24,8 +24,13 @@ export type FileNode = {
 };
 /** Expand a leading `~` to the user's home directory. */
 export declare function expandHome(path: string): string;
-/** Resolve the file-tree root from settings: startup dir or custom path. */
-export declare function resolveFileTreeRoot(settings: FileTreeSettings, startupDir: string): string | null;
+/**
+ * Resolve the file-tree root from settings: the custom path, or the startup
+ * directory. A custom mode with a blank path falls back to the startup
+ * directory — the picker lets you select custom before typing anything, and an
+ * empty root should not read as "no directory".
+ */
+export declare function resolveFileTreeRoot(settings: FileTreeSettings, startupDir: string): string;
 /**
  * Recursively scan a directory into a tree. Symlinks are never followed
  * (they can loop), dotfiles and known dependency/VCS dirs are skipped.

package/dist/core/io/file-tree-model.js

@@ -43,11 +43,18 @@ const isHidden = (name) => name.startsWith(".");
 export function expandHome(path) {
     return path === "~" ? homedir() : path.startsWith("~/") ? join(homedir(), path.slice(2)) : path;
 }
-/** Resolve the file-tree root from settings: startup dir or custom path. */
+/**
+ * Resolve the file-tree root from settings: the custom path, or the startup
+ * directory. A custom mode with a blank path falls back to the startup
+ * directory — the picker lets you select custom before typing anything, and an
+ * empty root should not read as "no directory".
+ */
 export function resolveFileTreeRoot(settings, startupDir) {
     if (settings.root === "custom") {
         const custom = expandHome(settings.customPath.trim());
-        return custom.length > 0 ? custom : null;
+        if (custom.length > 0) {
+            return custom;
+        }
     }
     return startupDir;
 }

package/dist/core/io/session.js

@@ -73,6 +73,9 @@ export class EditorSession {
             return { ok: false, error: "Binary file" };
         }
         this._controller.document.setText(text);
+        // Recorded positions refer to the previous text, so the history is
+        // meaningless once the document is replaced.
+        this._controller.history.clear();
         this._filePath = filePath;
         // Hash the NORMALIZED document text, not the raw disk bytes: the
         // document normalizes CRLF to LF, so hashing the raw text would

package/dist/core/settings/schema.d.ts

@@ -9,6 +9,16 @@ import { z } from "zod";
  */
 /** Wheel sensitivity in visual lines per notch, 1.0–10.0, 0.5 steps. */
 export declare const sensitivitySchema: z.ZodDefault<z.ZodNumber>;
+/** Undo coalescing range in ms; `0` disables merging. */
+export declare const MERGE_WINDOW_MIN = 0;
+export declare const MERGE_WINDOW_MAX = 2000;
+export declare const MERGE_WINDOW_STEP = 100;
+export declare const MERGE_WINDOW_DEFAULT = 500;
+/**
+ * Consecutive mergeable edits closer than this (ms) collapse into one undo
+ * step. `0` turns merging off, so every edit is its own step.
+ */
+export declare const mergeWindowSchema: z.ZodDefault<z.ZodNumber>;
 /** File-tree root source: the process startup directory or a custom path. */
 export declare const fileTreeRootSchema: z.ZodDefault<z.ZodEnum<{
     startup: "startup";
@@ -27,10 +37,14 @@ export declare const settingsSchema: z.ZodObject<{
         }>>;
         customPath: z.ZodDefault<z.ZodString>;
     }, z.core.$strip>>;
+    history: z.ZodDefault<z.ZodObject<{
+        mergeWindow: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export type EditorSettings = z.infer<typeof settingsSchema>;
 export type WheelSensitivity = EditorSettings["wheel"];
 export type FileTreeSettings = EditorSettings["fileTree"];
+export type HistorySettings = EditorSettings["history"];
 export declare const DEFAULT_SETTINGS: EditorSettings;
 /** Parse an unknown persisted value, falling back to defaults on any failure. */
 export declare function parseSettings(raw: unknown): EditorSettings;

package/dist/core/settings/schema.js

@@ -14,6 +14,22 @@ export const sensitivitySchema = z
     .max(10)
     .step(0.5)
     .default(1);
+/** Undo coalescing range in ms; `0` disables merging. */
+export const MERGE_WINDOW_MIN = 0;
+export const MERGE_WINDOW_MAX = 2000;
+export const MERGE_WINDOW_STEP = 100;
+export const MERGE_WINDOW_DEFAULT = 500;
+/**
+ * Consecutive mergeable edits closer than this (ms) collapse into one undo
+ * step. `0` turns merging off, so every edit is its own step.
+ */
+export const mergeWindowSchema = z
+    .number()
+    .int()
+    .min(MERGE_WINDOW_MIN)
+    .max(MERGE_WINDOW_MAX)
+    .multipleOf(MERGE_WINDOW_STEP)
+    .default(MERGE_WINDOW_DEFAULT);
 const DEFAULT_WHEEL = { cursor: 1, view: 3 };
 /** File-tree root source: the process startup directory or a custom path. */
 export const fileTreeRootSchema = z.enum(["startup", "custom"]).default("startup");
@@ -36,11 +52,18 @@ export const settingsSchema = z.object({
         customPath: z.string().default(""),
     })
         .default({ root: "startup", customPath: "" }),
+    history: z
+        .object({
+        /** Undo coalescing window in ms; see {@link mergeWindowSchema}. */
+        mergeWindow: mergeWindowSchema,
+    })
+        .default({ mergeWindow: MERGE_WINDOW_DEFAULT }),
 });
 export const DEFAULT_SETTINGS = {
     language: "en",
     wheel: DEFAULT_WHEEL,
     fileTree: { root: "startup", customPath: "" },
+    history: { mergeWindow: MERGE_WINDOW_DEFAULT },
 };
 /** Parse an unknown persisted value, falling back to defaults on any failure. */
 export function parseSettings(raw) {

package/dist/core/settings/useSettings.d.ts

@@ -18,6 +18,10 @@ export type SettingsApi = {
     setLanguage: (code: string) => void;
     /** Persist the file-tree root settings. */
     setFileTree: (fileTree: EditorSettings["fileTree"]) => void;
+    /** Set the undo merge window (ms) and persist it immediately. */
+    setMergeWindow: (ms: number) => void;
+    /** Update the merge window in memory only (while dragging); commit on release. */
+    setMergeWindowDraft: (ms: number) => void;
 };
 /**
  * React binding for the shared {@link settingsStore}. Re-renders subscribers

package/dist/core/settings/useSettings.js

@@ -27,6 +27,14 @@ export function useSettings() {
             commit: () => settingsStore.commit(),
             setLanguage: (code) => settingsStore.persist({ ...settings, language: code }),
             setFileTree: (fileTree) => settingsStore.persist({ ...settings, fileTree }),
+            setMergeWindow: (ms) => settingsStore.persist({
+                ...settings,
+                history: { ...settings.history, mergeWindow: ms },
+            }),
+            setMergeWindowDraft: (ms) => settingsStore.update({
+                ...settings,
+                history: { ...settings.history, mergeWindow: ms },
+            }),
         };
     }, [settings]);
 }

package/dist/index.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 import { render } from "ink";
 import React from "react";
-import { CurrentScreen, KeyboardProvider, LanguageProvider, registerComponent, ScenarioManagementProvider, } from "ink-cartridge";
+import { LanguageProvider } from "@cartridge-engine/i18n";
+import { CurrentScreen, KeyboardProvider, registerComponent, ScenarioManagementProvider, } from "ink-cartridge";
 import { resources } from "./utils/view/i18n-resources.js";
 import { settingsStore } from "./core/settings/useSettings.js";
 import { MainMenu } from "./view/page/main-menu.js";

package/dist/view/editor/command-bar.js

@@ -1,5 +1,6 @@
+import { useI18n } from "@cartridge-engine/i18n";
 import { Box, Text } from "ink";
-import { back, ModalLayerElementContext, useI18n, useKeyboard, useScreenSystem, } from "ink-cartridge";
+import { back, ModalLayerElementContext, 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

package/dist/view/editor/editor-setting.js

@@ -1,5 +1,6 @@
+import { useI18n } from "@cartridge-engine/i18n";
 import { Box, Text } from "ink";
-import { applyElement, back, closeLayer, LayerElementContext, openLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
+import { applyElement, back, closeLayer, LayerElementContext, openLayer, useKeyboard, useMouseRegion, } from "ink-cartridge";
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import { SettingsEntries } from "../page/settings.js";
 import { ModalFrame } from "../utils/modal-frame.js";

package/dist/view/editor/file-tree.d.ts

@@ -1,13 +1,9 @@
 import React from "react";
-import type { FileTreeState } from "../../core/io/file-tree-model.js";
 import type { EditorSession } from "../../core/io/session.js";
 export type FileTreeProps = {
     /** The shared file session; clicking a file opens it here. */
     session: EditorSession;
 };
-export type FileTreeDirState = FileTreeState | {
-    noDir?: boolean;
-};
 /**
  * VSCode-style file tree pinned to the right edge of the terminal (regular
  * layer element). Recursively scans the configured root directory once per

package/dist/view/editor/file-tree.js

@@ -1,5 +1,6 @@
+import { useI18n } from "@cartridge-engine/i18n";
 import { Box, Text, useWindowSize } from "ink";
-import { applyElementToModalLayer, ModalLayerElementContext, openModalLayer, useI18n, useKeyboard, useMouseRegion, useScreenSystem, } from "ink-cartridge";
+import { applyElementToModalLayer, ModalLayerElementContext, openModalLayer, useKeyboard, useMouseRegion, useScreenSystem, } from "ink-cartridge";
 import React, { useCallback, useContext, useEffect, useMemo, useState, } from "react";
 import { basename } from "node:path";
 import stringWidth from "string-width";
@@ -36,10 +37,7 @@ export function FileTree({ session }) {
         setRoot({ scanning: true });
         (async () => {
             const resolved = resolveFileTreeRoot(settings.fileTree, process.cwd());
-            const tree = resolved
-                ? await scanDirectoryCached(resolved)
-                : { noDir: true };
-            setRoot(tree);
+            setRoot(await scanDirectoryCached(resolved));
         })();
     }, [settings.fileTree, scanTick]);
     // A new scan (root changed) starts collapsed at the top — reset during
@@ -114,8 +112,7 @@ export function FileTree({ session }) {
             React.createElement(Box, { ref: refreshRef, marginLeft: 1 },
                 React.createElement(Text, { color: refreshHovered ? "green" : "gray" }, "\u21BB"))),
         "scanning" in root ? (React.createElement(Box, { paddingLeft: 1 },
-            React.createElement(Text, { dimColor: true }, t("fileTree.scanning")))) : "noDir" in root ? (React.createElement(Box, { paddingLeft: 1 },
-            React.createElement(Text, { dimColor: true }, t("fileTree.noDir")))) : "fail" in root ? (React.createElement(Box, { paddingLeft: 1 },
+            React.createElement(Text, { dimColor: true }, t("fileTree.scanning")))) : "fail" in root ? (React.createElement(Box, { paddingLeft: 1 },
             React.createElement(Text, { dimColor: true }, t("fileTree.fail")))) : (visible.map((row) => (React.createElement(TreeRow, { key: row.node.path, node: row.node, depth: row.depth, expanded: expanded.has(row.node.path), hovered: hoveredPath === row.node.path, onEnter: () => setHoveredPath(row.node.path), onLeave: () => setHoveredPath((h) => (h === row.node.path ? null : h)), onWheel: handleWheel, onClick: () => {
                 if (row.node.isDir) {
                     toggleDir(row.node.path);

package/dist/view/editor/tool-bar.js

@@ -1,4 +1,5 @@
-import { useI18n, useKeyboard, useMouseRegion } from "ink-cartridge";
+import { useI18n } from "@cartridge-engine/i18n";
+import { useKeyboard, useMouseRegion } from "ink-cartridge";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useState } from "react";
 import { Box, measureElement, Text, useWindowSize } from "ink";

package/dist/view/page/editor.js

@@ -1,5 +1,6 @@
+import { useI18n } from "@cartridge-engine/i18n";
 import { Box, Text, useBoxMetrics, useCursor } from "ink";
-import { applyElement, applyElementToModalLayer, closeLayer, eraseElement, openLayer, openModalLayer, useI18n, useKeyboard, useMouseRegion, } from "ink-cartridge";
+import { applyElement, applyElementToModalLayer, closeLayer, eraseElement, openLayer, openModalLayer, useKeyboard, useMouseRegion, } from "ink-cartridge";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { EditorSession } from "../../core/io/session.js";
 import { useSettings } from "../../core/settings/useSettings.js";
@@ -104,7 +105,7 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
                     session,
                     openFileTree: () => setFileTreeOpen((open) => !open),
                     openSettings: () => setSettingsOpen((open) => !open),
-                    fileTreeOpen
+                    fileTreeOpen,
                 },
             });
         }, 0);
@@ -151,6 +152,11 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
     useEffect(() => {
         return boundKeyboard(["ctrl+tab"], () => setToolbarOpen((open) => !open));
     }, [boundKeyboard]);
+    // Keep the coalescing window in step with the persisted setting; edits
+    // closer together than it share one undo step (0 disables merging).
+    useEffect(() => {
+        controller.history.setMergeWindow(settings.history.mergeWindow);
+    }, [controller, settings.history.mergeWindow]);
     useEffect(() => {
         const removeWildcard = enableWildcardPriority();
         const unbinds = [];
@@ -158,7 +164,9 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
             unbinds.push(boundKeyboard(keys, handler, options));
         };
         // insert mode: classic editing
-        bind(["*"], (input) => controller.execute("editor.insertText", { text: input }), { mode: "insert" });
+        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" });
@@ -201,13 +209,63 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
                 return { ...ctx, lastFlag: null };
             },
         });
+        // Vim-style count prefix: digits accumulate in the chain's `value`, then a
+        // direction key spends it (`5j`, `12k`). Composition runs ahead of the
+        // screen bindings, so a bare digit arms a chain instead of moving.
+        const countKeys = [];
+        for (const digit of "1234567890") {
+            countKeys.push(digit);
+            registryCompositionKey({
+                key: digit,
+                flags: [],
+                alternativeFlag: "number",
+                needs: ["number"],
+                // `0` cannot open a count, so a bare `0` keeps meaning line-start
+                // via its binding below; it may still extend one (`10j`).
+                optional: digit !== "0",
+                mode: "normal",
+                execute: (ctx) => ({
+                    ...ctx,
+                    value: (typeof ctx.value === "number" ? ctx.value : 0) * 10 + Number(digit),
+                    lastFlag: "number",
+                }),
+            });
+        }
+        // Counts only pay off on the vertical keys; h/l/left/right stay untouched.
+        const directions = [
+            ["k", "cursor.moveUp"],
+            ["up", "cursor.moveUp"],
+            ["j", "cursor.moveDown"],
+            ["down", "cursor.moveDown"],
+        ];
+        for (const [key, command] of directions) {
+            countKeys.push(key);
+            registryCompositionKey({
+                key,
+                flags: [],
+                alternativeFlag: "direction",
+                needs: ["number"],
+                mode: "normal",
+                // The count is spent here and the chain ends, so swallow the key —
+                // otherwise the plain binding below would move one extra line.
+                KeyReleaseWhenChainInterrupted: true,
+                execute: (ctx) => {
+                    controller.execute(command, { count: ctx.value });
+                    return null;
+                },
+            });
+        }
         unbinds.push(() => removeCompositionKey("g"));
+        unbinds.push(() => countKeys.forEach((key) => removeCompositionKey(key)));
         // 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" });
         // Ctrl+S saves in normal mode (Vim-style; insert stays untouched).
         bind(["ctrl+s"], () => session.save(), { mode: "normal" });
+        // Undo/redo also live in normal mode; insert stays untouched.
+        bind(["u"], () => controller.execute("history.undo"), { mode: "normal" });
+        bind(["ctrl+r"], () => controller.execute("history.redo"), { mode: "normal" });
         return () => {
             removeWildcard();
             unbinds.forEach((fn) => fn());
@@ -281,7 +339,7 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
                     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(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, seg.text)));
             })))));
 }

package/dist/view/page/main-menu.js

@@ -1,5 +1,6 @@
+import { useI18n } from "@cartridge-engine/i18n";
 import { Box, Text, useWindowSize } from "ink";
-import { useI18n, useKeyboard, useMouseRegion } from "ink-cartridge";
+import { useKeyboard, useMouseRegion } from "ink-cartridge";
 import React, { useEffect, useState } from "react";
 import { Editor } from "./editor.js";
 import { Settings } from "./settings.js";

package/dist/view/page/settings.js

@@ -1,9 +1,11 @@
+import { useI18n } from "@cartridge-engine/i18n";
 import { Box, Text } from "ink";
-import { back, ModalLayerElementContext, useI18n, useKeyboard, useMouseRegion, useScreenSystem, } from "ink-cartridge";
+import { back, ModalLayerElementContext, useKeyboard, useMouseRegion, useScreenSystem, } from "ink-cartridge";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { MERGE_WINDOW_MAX, MERGE_WINDOW_MIN, MERGE_WINDOW_STEP, } from "../../core/settings/schema.js";
 import { useSettings } from "../../core/settings/useSettings.js";
 import { ModalFrame } from "../utils/modal-frame.js";
-import { SensitivityBar, snapSensitivity } from "../utils/sensitivity-bar.js";
+import { SensitivityBar, Slider, snapSensitivity, snapValue, } from "../utils/sensitivity-bar.js";
 const LANGUAGES = [
     { code: "en", labelKey: "settings.language.en" },
     { code: "zh", labelKey: "settings.language.zh" },
@@ -95,6 +97,42 @@ function SensitivityPicker({ sensitivityKey }) {
             value.toFixed(1),
             "\u00D7")));
 }
+/**
+ * Modal slider for the undo merge window. The bar is drag/click driven;
+ * dragging updates in memory only, release/click persists. `0` disables
+ * merging, so the label reads "off" instead of the bare number.
+ */
+function MergeWindowPicker() {
+    const ctx = useContext(ModalLayerElementContext);
+    const { t } = useI18n();
+    const { boundKeyboard } = useKeyboard();
+    const { closeModalLayer } = useScreenSystem();
+    const { settings, setMergeWindow, setMergeWindowDraft, commit } = useSettings();
+    const value = settings.history.mergeWindow;
+    useEffect(() => {
+        if (!ctx) {
+            return;
+        }
+        const snap = (dir) => snapValue(value, dir, MERGE_WINDOW_MIN, MERGE_WINDOW_MAX, MERGE_WINDOW_STEP);
+        const unbinds = [
+            boundKeyboard(["left"], () => setMergeWindow(snap(-1)), {
+                elementId: ctx.id,
+            }),
+            boundKeyboard(["right"], () => setMergeWindow(snap(1)), {
+                elementId: ctx.id,
+            }),
+            boundKeyboard(["escape"], () => closeModalLayer(ctx.modalLayer.layerId), { elementId: ctx.id }),
+        ];
+        return () => unbinds.forEach((fn) => fn());
+    }, [boundKeyboard, closeModalLayer, ctx, setMergeWindow, value]);
+    return (React.createElement(ModalFrame, { title: t("settings.mergeWindow"), footer: React.createElement(Text, { dimColor: true },
+            t("settings.back"),
+            " (Esc)") },
+        React.createElement(Slider, { value: value, min: MERGE_WINDOW_MIN, max: MERGE_WINDOW_MAX, step: MERGE_WINDOW_STEP, onChange: setMergeWindowDraft, onCommit: commit, hint: t("settings.slider.hint") }),
+        React.createElement(Text, null, value === MERGE_WINDOW_MIN
+            ? t("settings.mergeWindow.off")
+            : `${value} ms`)));
+}
 /** 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 });
@@ -220,6 +258,13 @@ export function SettingsEntries({ onExit }) {
             element: FileTreePicker,
         });
     }, [applyElementToModalLayer, openModalLayer]);
+    const openMergeWindowPicker = useCallback(() => {
+        openModalLayer("merge-window", 50);
+        applyElementToModalLayer("merge-window", {
+            elementId: "merge-window-picker",
+            element: MergeWindowPicker,
+        });
+    }, [applyElementToModalLayer, openModalLayer]);
     const currentLabel = LANGUAGES.find((lang) => lang.code === currentLanguage)?.labelKey ??
         "settings.language.en";
     const entries = useMemo(() => [
@@ -249,6 +294,14 @@ export function SettingsEntries({ onExit }) {
                 : t("settings.fileTreeRoot.startup"),
             open: openFileTreePicker,
         },
+        {
+            id: "merge-window",
+            label: t("settings.mergeWindow"),
+            value: settings.history.mergeWindow === MERGE_WINDOW_MIN
+                ? t("settings.mergeWindow.off")
+                : `${settings.history.mergeWindow} ms`,
+            open: openMergeWindowPicker,
+        },
     ], [
         t,
         currentLabel,
@@ -256,9 +309,11 @@ export function SettingsEntries({ onExit }) {
         settings.wheel.view,
         settings.fileTree.root,
         settings.fileTree.customPath,
+        settings.history.mergeWindow,
         openLanguagePicker,
         openSensitivityPicker,
         openFileTreePicker,
+        openMergeWindowPicker,
     ]);
     useEffect(() => {
         const unbinds = [

package/dist/view/utils/sensitivity-bar.d.ts

@@ -2,23 +2,57 @@ import React from "react";
 export declare const SENSITIVITY_MIN = 1;
 export declare const SENSITIVITY_MAX = 10;
 export declare const SENSITIVITY_STEP = 0.5;
-/** Bar cells: (10 - 1) / 0.5 steps, so every cell maps to exactly one step. */
-export declare const BAR_WIDTH: number;
-/** Map a 0..1 ratio to a sensitivity value in 0.5 steps. */
-export declare function valueFromRatio(ratio: number): number;
+/** Number of steps a `min..max` range of `step` size spans. */
+export declare function stepsFor(min: number, max: number, step: number): number;
+/** Map a 0..1 ratio to a value snapped to `step`, clamped to `min..max`. */
+export declare function valueFromRatio(ratio: number, min?: number, max?: number, step?: number): number;
 /** Clamp value + dir*step to the valid 1..10 range (0.5 steps). */
 export declare function snapSensitivity(value: number, dir: 1 | -1): number;
-type SensitivityBarProps = {
+/** Clamp value + dir*step to an arbitrary `min..max` range. */
+export declare function snapValue(value: number, dir: 1 | -1, min: number, max: number, step: number): number;
+/**
+ * Value for a click on cell `localX` (0-based) of a bar that renders exactly
+ * `steps + 1` cells — one per value from `min` to `max` inclusive. The ratio
+ * therefore runs `localX / steps`, which is exactly one value per cell; using
+ * `steps` cells instead would have to skip an interior value to still reach
+ * `max` (e.g. 1000 ms, or 5.5×, would be unreachable by mouse).
+ */
+export declare function valueFromBarX(localX: number, min: number, max: number, step: number): number;
+/**
+ * Filled-cell count for `value` on the `min..max` bar, matching
+ * {@link valueFromBarX}: cell `i` selects `min + i*step`, so the value's own
+ * cell is filled and everything left of it too — one cell at `min`, the whole
+ * bar at `max`. Deriving the count from that integer cell index — rather than
+ * from the value's fraction of the range — keeps the fill aligned with the
+ * click mapping: a proportional `fraction * (steps + 1)` rounds unevenly and
+ * skips a cell at the midpoint.
+ */
+export declare function filledCells(value: number, min: number, max: number, step: number): number;
+type SliderProps = {
     value: number;
+    min: number;
+    max: number;
+    step: number;
     /** Called on click/drag with the new value (in-memory draft). */
     onChange: (value: number) => void;
     /** Called when the interaction ends — persist the draft. */
     onCommit: () => void;
+    /** Localized hint rendered under the bar. */
+    hint: string;
 };
 /**
- * Mouse-driven sensitivity slider. Clicking or dragging anywhere on the bar
- * sets the value proportionally (0.5 steps); the fuller the bar, the higher
- * the sensitivity, and the 1..10 range caps it by construction.
+ * Mouse-driven slider over an arbitrary `min..max`/`step` range. Clicking or
+ * dragging anywhere on the bar sets the value proportionally, snapped to
+ * `step`; the fuller the bar, the higher the value.
  */
+export declare function Slider({ value, min, max, step, onChange, onCommit, hint }: SliderProps): React.JSX.Element;
+type SensitivityBarProps = {
+    value: number;
+    /** Called on click/drag with the new value (in-memory draft). */
+    onChange: (value: number) => void;
+    /** Called when the interaction ends — persist the draft. */
+    onCommit: () => void;
+};
+/** Slider preset for the 1..10 wheel sensitivity range. */
 export declare function SensitivityBar({ value, onChange, onCommit }: SensitivityBarProps): React.JSX.Element;
 export {};

package/dist/view/utils/sensitivity-bar.js

@@ -1,28 +1,61 @@
+import { useI18n } from "@cartridge-engine/i18n";
 import { Box, Text } from "ink";
-import { useI18n, useMouseRegion } from "ink-cartridge";
+import { useMouseRegion } from "ink-cartridge";
 import React from "react";
 export const SENSITIVITY_MIN = 1;
 export const SENSITIVITY_MAX = 10;
 export const SENSITIVITY_STEP = 0.5;
-/** Bar cells: (10 - 1) / 0.5 steps, so every cell maps to exactly one step. */
-export const BAR_WIDTH = (SENSITIVITY_MAX - SENSITIVITY_MIN) / SENSITIVITY_STEP;
-/** Map a 0..1 ratio to a sensitivity value in 0.5 steps. */
-export function valueFromRatio(ratio) {
+/** Number of steps a `min..max` range of `step` size spans. */
+export function stepsFor(min, max, step) {
+    return Math.round((max - min) / step);
+}
+/** Map a 0..1 ratio to a value snapped to `step`, clamped to `min..max`. */
+export function valueFromRatio(ratio, min = SENSITIVITY_MIN, max = SENSITIVITY_MAX, step = SENSITIVITY_STEP) {
     const r = Math.max(0, Math.min(1, ratio));
-    // BAR_WIDTH cells span exactly the 1..10 range (18 steps of 0.5).
-    return SENSITIVITY_MIN + Math.round(r * BAR_WIDTH) * SENSITIVITY_STEP;
+    return min + Math.round(r * stepsFor(min, max, step)) * step;
 }
 /** Clamp value + dir*step to the valid 1..10 range (0.5 steps). */
 export function snapSensitivity(value, dir) {
-    return Math.min(SENSITIVITY_MAX, Math.max(SENSITIVITY_MIN, value + dir * SENSITIVITY_STEP));
+    return snapValue(value, dir, SENSITIVITY_MIN, SENSITIVITY_MAX, SENSITIVITY_STEP);
+}
+/** Clamp value + dir*step to an arbitrary `min..max` range. */
+export function snapValue(value, dir, min, max, step) {
+    return Math.min(max, Math.max(min, value + dir * step));
 }
 /**
- * Mouse-driven sensitivity slider. Clicking or dragging anywhere on the bar
- * sets the value proportionally (0.5 steps); the fuller the bar, the higher
- * the sensitivity, and the 1..10 range caps it by construction.
+ * Value for a click on cell `localX` (0-based) of a bar that renders exactly
+ * `steps + 1` cells — one per value from `min` to `max` inclusive. The ratio
+ * therefore runs `localX / steps`, which is exactly one value per cell; using
+ * `steps` cells instead would have to skip an interior value to still reach
+ * `max` (e.g. 1000 ms, or 5.5×, would be unreachable by mouse).
  */
-export function SensitivityBar({ value, onChange, onCommit }) {
-    const { t } = useI18n();
+export function valueFromBarX(localX, min, max, step) {
+    const steps = stepsFor(min, max, step);
+    // A zero-width bar (single value) can only mean `min`; avoid /0.
+    return steps <= 0 ? min : valueFromRatio(localX / steps, min, max, step);
+}
+/**
+ * Filled-cell count for `value` on the `min..max` bar, matching
+ * {@link valueFromBarX}: cell `i` selects `min + i*step`, so the value's own
+ * cell is filled and everything left of it too — one cell at `min`, the whole
+ * bar at `max`. Deriving the count from that integer cell index — rather than
+ * from the value's fraction of the range — keeps the fill aligned with the
+ * click mapping: a proportional `fraction * (steps + 1)` rounds unevenly and
+ * skips a cell at the midpoint.
+ */
+export function filledCells(value, min, max, step) {
+    const total = stepsFor(min, max, step) + 1;
+    const index = Math.round((value - min) / step);
+    return Math.min(total, Math.max(1, index + 1));
+}
+/**
+ * Mouse-driven slider over an arbitrary `min..max`/`step` range. Clicking or
+ * dragging anywhere on the bar sets the value proportionally, snapped to
+ * `step`; the fuller the bar, the higher the value.
+ */
+export function Slider({ value, min, max, step, onChange, onCommit, hint }) {
+    const steps = stepsFor(min, max, step);
+    const valueFromX = (localX) => valueFromBarX(localX, min, max, step);
     // priority 1: the bar sits inside the draggable ModalFrame, whose region
     // overlaps it — the child control must always win the hit test, no matter
     // the registration order after frame drags.
@@ -35,14 +68,18 @@ export function SensitivityBar({ value, onChange, onCommit }) {
         onDragMove: (event, rect) => onChange(valueFromX(event.x - rect.x)),
         onDragEnd: () => onCommit(),
     }, { priority: 1 });
-    const filled = Math.round((value - SENSITIVITY_MIN) / SENSITIVITY_STEP);
+    // One cell per value (min..max inclusive); the fill is derived from the
+    // value's own cell, so it matches what a click on that cell would select.
+    const total = steps + 1;
+    const filled = filledCells(value, min, max, step);
     return (React.createElement(Box, { flexDirection: "column", alignItems: "center", gap: 1 },
         React.createElement(Box, { ref: ref, flexDirection: "row" },
             React.createElement(Text, null, filled > 0 ? "█".repeat(filled) : ""),
-            React.createElement(Text, { dimColor: true }, "░".repeat(BAR_WIDTH - filled))),
-        React.createElement(Text, { dimColor: true }, t("settings.sensitivity.hint"))));
+            React.createElement(Text, { dimColor: true }, "░".repeat(total - filled))),
+        React.createElement(Text, { dimColor: true }, hint)));
 }
-/** Value for a click at `localX` cells inside the bar (0-based). */
-function valueFromX(localX) {
-    return valueFromRatio(localX / BAR_WIDTH);
+/** Slider preset for the 1..10 wheel sensitivity range. */
+export function SensitivityBar({ value, onChange, onCommit }) {
+    const { t } = useI18n();
+    return (React.createElement(Slider, { value: value, min: SENSITIVITY_MIN, max: SENSITIVITY_MAX, step: SENSITIVITY_STEP, onChange: onChange, onCommit: onCommit, hint: t("settings.slider.hint") }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blots-editor",
-	"version": "0.0.16",
+	"version": "0.0.18",
 	"description": "A lightweight Markdown editor for the terminal, built on ink-cartridge",
 	"type": "module",
 	"main": "./dist/index.js",
@@ -51,6 +51,7 @@
 		"react": ">=18"
 	},
 	"dependencies": {
+		"@cartridge-engine/i18n": "*",
 		"cfonts": "^3.3.1",
 		"chalk": "^4.1.2",
 		"gradient-string": "^2.0.2",