@promptctl/rich-js 0.18.1 → 0.20.0

package/dist/widgets/text-input.js

@@ -22,10 +22,15 @@
  * [LAW:types-are-the-program] Three integer spaces coexist: `CellCol` (terminal
  * cell columns), `CodeUnit` (JS UTF-16 indices), and `CodePoint` (code-unit
  * offsets that are additionally on a Unicode code-point boundary — a subtype of
- * `CodeUnit`). `cursorPosition` is `CodePoint`; it is never inside a surrogate
- * pair by construction. Visual positions are `CellCol`. The three are never
+ * `CodeUnit`). `cursorPosition` is `CodePoint`, and stronger: its setter
+ * parses any offset to a grapheme-cluster boundary. Visual positions are `CellCol`. The three are never
  * interchangeable — the type system enforces this at every crossing point.
  *
+ * [LAW:one-source-of-truth] The cursor moves, deletes and draws one grapheme
+ * cluster at a time (`nextGrapheme` / `prevGrapheme`) — the unit `cellLen`
+ * measures — so `👍🏽` is one step and one cursor cell, never a glyph and a
+ * stray skin-tone swatch.
+ *
  * Keymap (readline / emacs compatible):
  *
  *   ─── motion ───
@@ -89,14 +94,13 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
-import { observable, action, observableRef } from "mobx";
+import { observable, action, observableRef, runInAction } from "mobx";
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
-import { ColorSpec } from "../core/color.js";
-import { cellLen, setCellSize, splitText, cellStepFrom, cellColToCodeUnitOffset, asCellCol, asCodePoint, nextCodePoint, prevCodePoint, } from "../core/cells.js";
-import { DEFAULT_TERMINAL_THEME } from "../themes/terminalThemes.js";
+import { cellLen, setCellSize, splitText, cellStepFrom, cellColToCodeUnitOffset, asCellCol, asCodePoint, asCodeUnit, graphemeBoundary, graphemes, nextGrapheme, prevGrapheme, } from "../core/cells.js";
 import { drawable } from "../core/protocol.js";
-import { WidgetBase } from "./widget-base.js";
+import { ThemedWidget } from "./themed-widget.js";
+import { ink } from "./ink.js";
 /**
  * Character-greedy soft wrap. Breaks at any character once `firstWidth`
  * (or `continuationWidth` for continuation rows) cells are exhausted. The
@@ -131,11 +135,18 @@ const NEWLINE_GLYPH = "↵";
 const ASCII_NEWLINE_GLYPH = "~";
 const MASK_GLYPH = "•";
 const ASCII_MASK_GLYPH = "*";
+// Text a key may insert: anything but the C0 controls, DEL and the C1
+// controls, which a terminal reads as escape sequences (U+009B is CSI).
+const PRINTABLE = /^[^\x00-\x1f\x7f-\x9f]+$/u;
 // Word-character regex used by Alt+B/F and Ctrl+Left/Right. Matches the
 // readline default (alphanumeric + underscore), which is what users typing
 // shell commands or code identifiers expect.
 const WORD_CHAR_RE = /[A-Za-z0-9_]/;
 const WHITESPACE_RE = /\s/;
+/** CRLF and lone CR as LF, the line break `value` holds. */
+function toLf(text) {
+    return text.replace(/\r\n?/g, "\n");
+}
 function isWordChar(c) {
     return c !== undefined && WORD_CHAR_RE.test(c);
 }
@@ -143,14 +154,14 @@ function isWhitespace(c) {
     return c !== undefined && WHITESPACE_RE.test(c);
 }
 let TextInput = (() => {
-    let _classSuper = WidgetBase;
+    let _classSuper = ThemedWidget;
     let _instanceExtraInitializers = [];
-    let _value_decorators;
-    let _value_initializers = [];
-    let _value_extraInitializers = [];
-    let _cursorPosition_decorators;
-    let _cursorPosition_initializers = [];
-    let _cursorPosition_extraInitializers = [];
+    let __value_decorators;
+    let __value_initializers = [];
+    let __value_extraInitializers = [];
+    let __cursor_decorators;
+    let __cursor_initializers = [];
+    let __cursor_extraInitializers = [];
     let _placeholder_decorators;
     let _placeholder_initializers = [];
     let _placeholder_extraInitializers = [];
@@ -188,8 +199,8 @@ let TextInput = (() => {
     return class TextInput extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _value_decorators = [observable];
-            _cursorPosition_decorators = [observable];
+            __value_decorators = [observable];
+            __cursor_decorators = [observable];
             _placeholder_decorators = [observableRef];
             _indicatorStyleOverride_decorators = [observableRef];
             _cursorStyleOverride_decorators = [observableRef];
@@ -216,8 +227,8 @@ let TextInput = (() => {
             _yank_decorators = [action];
             _transposeChars_decorators = [action];
             __insertText_decorators = [action];
-            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
-            __esDecorate(this, null, _cursorPosition_decorators, { kind: "accessor", name: "cursorPosition", static: false, private: false, access: { has: obj => "cursorPosition" in obj, get: obj => obj.cursorPosition, set: (obj, value) => { obj.cursorPosition = value; } }, metadata: _metadata }, _cursorPosition_initializers, _cursorPosition_extraInitializers);
+            __esDecorate(this, null, __value_decorators, { kind: "accessor", name: "_value", static: false, private: false, access: { has: obj => "_value" in obj, get: obj => obj._value, set: (obj, value) => { obj._value = value; } }, metadata: _metadata }, __value_initializers, __value_extraInitializers);
+            __esDecorate(this, null, __cursor_decorators, { kind: "accessor", name: "_cursor", static: false, private: false, access: { has: obj => "_cursor" in obj, get: obj => obj._cursor, set: (obj, value) => { obj._cursor = value; } }, metadata: _metadata }, __cursor_initializers, __cursor_extraInitializers);
             __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
             __esDecorate(this, null, _indicatorStyleOverride_decorators, { kind: "accessor", name: "indicatorStyleOverride", static: false, private: false, access: { has: obj => "indicatorStyleOverride" in obj, get: obj => obj.indicatorStyleOverride, set: (obj, value) => { obj.indicatorStyleOverride = value; } }, metadata: _metadata }, _indicatorStyleOverride_initializers, _indicatorStyleOverride_extraInitializers);
             __esDecorate(this, null, _cursorStyleOverride_decorators, { kind: "accessor", name: "cursorStyleOverride", static: false, private: false, access: { has: obj => "cursorStyleOverride" in obj, get: obj => obj.cursorStyleOverride, set: (obj, value) => { obj.cursorStyleOverride = value; } }, metadata: _metadata }, _cursorStyleOverride_initializers, _cursorStyleOverride_extraInitializers);
@@ -248,17 +259,31 @@ let TextInput = (() => {
         }
         id = __runInitializers(this, _instanceExtraInitializers);
         focusable = true;
-        #value_accessor_storage = __runInitializers(this, _value_initializers, void 0);
-        get value() { return this.#value_accessor_storage; }
-        set value(value) { this.#value_accessor_storage = value; }
-        #cursorPosition_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _cursorPosition_initializers, void 0));
-        get cursorPosition() { return this.#cursorPosition_accessor_storage; }
-        set cursorPosition(value) { this.#cursorPosition_accessor_storage = value; }
-        #placeholder_accessor_storage = (__runInitializers(this, _cursorPosition_extraInitializers), __runInitializers(this, _placeholder_initializers, void 0));
+        #_value_accessor_storage = __runInitializers(this, __value_initializers, void 0);
+        get _value() { return this.#_value_accessor_storage; }
+        set _value(value) { this.#_value_accessor_storage = value; }
+        #_cursor_accessor_storage = (__runInitializers(this, __value_extraInitializers), __runInitializers(this, __cursor_initializers, void 0));
+        get _cursor() { return this.#_cursor_accessor_storage; }
+        set _cursor(value) { this.#_cursor_accessor_storage = value; }
+        // [LAW:single-enforcer] Every write to either half of the pair passes
+        // `graphemeBoundary`, so the cursor is a cluster boundary inside `value`
+        // whoever set it last — a caller replacing `value`, a click, an insert that
+        // grew the cluster before it. A line break is `\n`, as in an HTML
+        // textarea's value: `\r\n` is one cluster, and a cursor could not rest at
+        // its line's end.
+        get value() { return this._value; }
+        set value(v) {
+            runInAction(() => {
+                this._value = toLf(v);
+                this._cursor = graphemeBoundary(this._value, this._cursor);
+            });
+        }
+        get cursorPosition() { return this._cursor; }
+        set cursorPosition(p) { this._cursor = graphemeBoundary(this._value, p); }
+        #placeholder_accessor_storage = (__runInitializers(this, __cursor_extraInitializers), __runInitializers(this, _placeholder_initializers, void 0));
         get placeholder() { return this.#placeholder_accessor_storage; }
         set placeholder(value) { this.#placeholder_accessor_storage = value; }
-        _theme = __runInitializers(this, _placeholder_extraInitializers);
-        _maxLength;
+        _maxLength = __runInitializers(this, _placeholder_extraInitializers);
         _password;
         _multiline;
         _wrap;
@@ -311,11 +336,12 @@ let TextInput = (() => {
         // single-line renderer. Captured by _renderSingleLine and read by
         // handleMouse so the hit-test uses the same visual origin the user sees.
         _singleLineViewportStart = asCellCol(0);
+        _singleLineAsciiOnly = false;
         multiline;
         constructor(options = {}) {
-            super();
+            super(options.theme);
             this.id = options.id ?? `text-input-${Math.random().toString(36).slice(2, 8)}`;
-            this.value = options.value ?? "";
+            this._value = toLf(options.value ?? "");
             this.placeholder = options.placeholder ?? "";
             // [LAW:dataflow-not-control-flow] Initial cursor position is data, not
             // a render-time branch. Single-line inputs follow the pre-filled-form
@@ -323,9 +349,8 @@ let TextInput = (() => {
             // inputs follow the textarea convention (cursor at start — pre-loaded
             // content is read top-to-bottom, and the viewport's "scroll into view"
             // logic does nothing because row 0 is already inside the initial window).
-            this.cursorPosition = (options.multiline ?? false) ? asCodePoint(0) : asCodePoint(this.value.length);
+            this._cursor = graphemeBoundary(this._value, asCodeUnit((options.multiline ?? false) ? 0 : this._value.length));
             this.disabled = options.disabled ?? false;
-            this._theme = options.theme ?? DEFAULT_TERMINAL_THEME;
             this._maxLength = options.maxLength;
             this._password = options.password ?? false;
             this._multiline = options.multiline ?? false;
@@ -340,7 +365,6 @@ let TextInput = (() => {
             this.contentStyleOverride = options.contentStyle;
             this.multiline = this._multiline;
         }
-        setTheme(theme) { this._theme = theme; }
         // --- Event handlers ---
         handleKey(event) {
             if (this.disabled)
@@ -499,14 +523,12 @@ let TextInput = (() => {
                 }
             }
             // ─── printable insertion ───
-            // A single-char `event.character` with no command modifiers is text to
+            // A non-control `event.character` with no command modifiers is text to
             // insert. Ctrl/meta-modified keys produce empty `character` from the
-            // router (see event-router.ts) so they never reach this branch.
-            if (event.character.length === 1 &&
-                !event.ctrl &&
-                !event.meta &&
-                event.character >= " " &&
-                event.character !== "\x7f") {
+            // router (see event-router.ts) so they never reach this branch. The router
+            // sends one code point per key, so `👍🏽` arrives as `👍` then `🏽`, and an
+            // astral code point is two UTF-16 units — a `.length === 1` test drops it.
+            if (PRINTABLE.test(event.character) && !event.ctrl && !event.meta) {
                 this._insertText(event.character);
                 event.stop();
             }
@@ -525,7 +547,7 @@ let TextInput = (() => {
                 const rawRowIdx = this._scrollStart + event.y;
                 // Clicks on minRows-padded empty rows (beyond the last real row) snap to end.
                 if (rawRowIdx >= rows.length) {
-                    this.cursorPosition = asCodePoint(this.value.length);
+                    this.cursorPosition = asCodeUnit(this.value.length);
                     this._preferredColumn = null;
                     return;
                 }
@@ -534,13 +556,7 @@ let TextInput = (() => {
                 // Continuation rows start after the marker; non-continuation rows start at column 0.
                 const contentXOff = asCellCol(row.isContinuation ? this._markerWidth : 0);
                 const relX = asCellCol(Math.max(0, event.x - contentXOff));
-                const pos = cellColToCodeUnitOffset(row.content, relX);
-                const absPos = row.valueStart + pos;
-                const chu = absPos < this.value.length ? this.value.charCodeAt(absPos) : 0;
-                const prevChu = absPos > 0 ? this.value.charCodeAt(absPos - 1) : 0;
-                this.cursorPosition = asCodePoint(chu >= 0xDC00 && chu <= 0xDFFF && prevChu >= 0xD800 && prevChu <= 0xDBFF
-                    ? absPos + 1
-                    : absPos);
+                this.cursorPosition = asCodeUnit(row.valueStart + cellColToCodeUnitOffset(row.content, relX));
             }
             else {
                 // [LAW:types-are-the-program] relX is a cell-column offset into the full
@@ -548,20 +564,19 @@ let TextInput = (() => {
                 // by _renderSingleLine) so a click on a scrolled viewport maps to the
                 // correct code-unit in the underlying value.
                 const relX = asCellCol(Math.max(0, event.x - 1) + this._singleLineViewportStart);
-                const displayForHitTest = this._password
-                    ? MASK_GLYPH.repeat(this.value.length)
-                    : this.value.indexOf("\n") >= 0
-                        ? this.value.replace(/\n/g, NEWLINE_GLYPH)
-                        : this.value;
-                const pos = cellColToCodeUnitOffset(displayForHitTest, relX);
-                // Snap forward only when pos lands on a valid surrogate pair, never on a
-                // lone low surrogate (malformed string). Verify the preceding code unit is
-                // the high-surrogate half before advancing.
-                const chu = pos < this.value.length ? this.value.charCodeAt(pos) : 0;
-                const prevChu = pos > 0 ? this.value.charCodeAt(pos - 1) : 0;
-                this.cursorPosition = asCodePoint(chu >= 0xDC00 && chu <= 0xDFFF && prevChu >= 0xD800 && prevChu <= 0xDBFF
-                    ? pos + 1
-                    : pos);
+                // The glyphs of `value` whose shown cells lie wholly left of the click,
+                // shown as the last render showed them.
+                const drawn = { asciiOnly: this._singleLineAsciiOnly };
+                let at = 0;
+                let col = 0;
+                for (const g of graphemes(this.value)) {
+                    const w = cellLen(this._shown(g, drawn));
+                    if (col + w > relX)
+                        break;
+                    col += w;
+                    at += g.length;
+                }
+                this.cursorPosition = asCodeUnit(at);
             }
             this._preferredColumn = null;
         }
@@ -569,11 +584,11 @@ let TextInput = (() => {
         setHovered(value) { this.hovered = value; }
         // ─── Public motion primitives ───────────────────────────────────────────
         moveCharLeft() {
-            this.cursorPosition = prevCodePoint(this.value, this.cursorPosition);
+            this.cursorPosition = prevGrapheme(this.value, this.cursorPosition);
             this._preferredColumn = null;
         }
         moveCharRight() {
-            this.cursorPosition = nextCodePoint(this.value, this.cursorPosition);
+            this.cursorPosition = nextGrapheme(this.value, this.cursorPosition);
             this._preferredColumn = null;
         }
         moveLineUp() {
@@ -587,7 +602,7 @@ let TextInput = (() => {
                     return;
                 const col = this._preferredColumn ?? this._cursorVisualCol();
                 const target = this._visualRows[rowIdx - 1];
-                this.cursorPosition = asCodePoint(target.valueStart + this._clampColForRow(col, rowIdx - 1));
+                this.cursorPosition = asCodeUnit(target.valueStart + this._clampColForRow(col, rowIdx - 1));
                 this._preferredColumn = col;
                 return;
             }
@@ -601,7 +616,7 @@ let TextInput = (() => {
             while (prevLineStart > 0 && this.value[prevLineStart - 1] !== "\n")
                 prevLineStart--;
             const prevLineContent = this.value.slice(prevLineStart, prevLineEnd);
-            this.cursorPosition = asCodePoint(prevLineStart + cellColToCodeUnitOffset(prevLineContent, asCellCol(Math.min(col, cellLen(prevLineContent)))));
+            this.cursorPosition = asCodeUnit(prevLineStart + cellColToCodeUnitOffset(prevLineContent, asCellCol(Math.min(col, cellLen(prevLineContent)))));
             this._preferredColumn = col;
         }
         moveLineDown() {
@@ -610,7 +625,7 @@ let TextInput = (() => {
                 if (rowIdx === this._visualRows.length - 1)
                     return;
                 const col = this._preferredColumn ?? this._cursorVisualCol();
-                this.cursorPosition = asCodePoint(this._visualRows[rowIdx + 1].valueStart + this._clampColForRow(col, rowIdx + 1));
+                this.cursorPosition = asCodeUnit(this._visualRows[rowIdx + 1].valueStart + this._clampColForRow(col, rowIdx + 1));
                 this._preferredColumn = col;
                 return;
             }
@@ -625,14 +640,14 @@ let TextInput = (() => {
             while (nextLineEnd < this.value.length && this.value[nextLineEnd] !== "\n")
                 nextLineEnd++;
             const nextLineContent = this.value.slice(nextLineStart, nextLineEnd);
-            this.cursorPosition = asCodePoint(nextLineStart + cellColToCodeUnitOffset(nextLineContent, asCellCol(Math.min(col, cellLen(nextLineContent)))));
+            this.cursorPosition = asCodeUnit(nextLineStart + cellColToCodeUnitOffset(nextLineContent, asCellCol(Math.min(col, cellLen(nextLineContent)))));
             this._preferredColumn = col;
         }
         // Clamp `col` (a cell column) to the target visual row's content, returning
         // the code-unit offset within that row. When the row IS followed by a
         // continuation of the same logical line, we clamp to the last valid
-        // code-point boundary strictly inside the row (which may be more than
-        // one cell before the visual end when the last code point is wide) so the
+        // cluster boundary strictly inside the row (which may be more than
+        // one cell before the visual end when the last glyph is wide) so the
         // cursor stays strictly inside the target row — landing at the boundary
         // would cause `_cursorVisualRow` to resolve to the *later* row, making
         // every subsequent Up/Down stick at the boundary.
@@ -679,23 +694,23 @@ let TextInput = (() => {
             this._preferredColumn = null;
         }
         moveDocStart() {
-            this.cursorPosition = asCodePoint(0);
+            this.cursorPosition = asCodeUnit(0);
             this._preferredColumn = null;
         }
         moveDocEnd() {
-            this.cursorPosition = asCodePoint(this.value.length);
+            this.cursorPosition = asCodeUnit(this.value.length);
             this._preferredColumn = null;
         }
         moveWordLeft() {
             let p = this.cursorPosition;
             while (p > 0) {
-                const prev = prevCodePoint(this.value, p);
+                const prev = prevGrapheme(this.value, p);
                 if (isWordChar(this.value.slice(prev, p)))
                     break;
                 p = prev;
             }
             while (p > 0) {
-                const prev = prevCodePoint(this.value, p);
+                const prev = prevGrapheme(this.value, p);
                 if (!isWordChar(this.value.slice(prev, p)))
                     break;
                 p = prev;
@@ -706,13 +721,13 @@ let TextInput = (() => {
         moveWordRight() {
             let p = this.cursorPosition;
             while (p < this.value.length) {
-                const next = nextCodePoint(this.value, p);
+                const next = nextGrapheme(this.value, p);
                 if (isWordChar(this.value.slice(p, next)))
                     break;
                 p = next;
             }
             while (p < this.value.length) {
-                const next = nextCodePoint(this.value, p);
+                const next = nextGrapheme(this.value, p);
                 if (!isWordChar(this.value.slice(p, next)))
                     break;
                 p = next;
@@ -724,7 +739,7 @@ let TextInput = (() => {
         deleteCharBack() {
             if (this.cursorPosition === 0)
                 return;
-            const newPos = prevCodePoint(this.value, this.cursorPosition);
+            const newPos = prevGrapheme(this.value, this.cursorPosition);
             this.value = this.value.slice(0, newPos) + this.value.slice(this.cursorPosition);
             this.cursorPosition = newPos;
             this._preferredColumn = null;
@@ -733,7 +748,7 @@ let TextInput = (() => {
         deleteCharForward() {
             if (this.cursorPosition >= this.value.length)
                 return;
-            const nextPos = nextCodePoint(this.value, this.cursorPosition);
+            const nextPos = nextGrapheme(this.value, this.cursorPosition);
             this.value = this.value.slice(0, this.cursorPosition) + this.value.slice(nextPos);
             this._preferredColumn = null;
             this.emitChange();
@@ -744,13 +759,13 @@ let TextInput = (() => {
             // → "foo |" → "|" rather than getting stuck on the trailing space.
             let p = this.cursorPosition;
             while (p > 0) {
-                const prev = prevCodePoint(this.value, p);
+                const prev = prevGrapheme(this.value, p);
                 if (!isWhitespace(this.value.slice(prev, p)))
                     break;
                 p = prev;
             }
             while (p > 0) {
-                const prev = prevCodePoint(this.value, p);
+                const prev = prevGrapheme(this.value, p);
                 if (isWhitespace(this.value.slice(prev, p)))
                     break;
                 p = prev;
@@ -766,13 +781,13 @@ let TextInput = (() => {
         deleteWordForward() {
             let p = this.cursorPosition;
             while (p < this.value.length) {
-                const next = nextCodePoint(this.value, p);
+                const next = nextGrapheme(this.value, p);
                 if (isWordChar(this.value.slice(p, next)))
                     break;
                 p = next;
             }
             while (p < this.value.length) {
-                const next = nextCodePoint(this.value, p);
+                const next = nextGrapheme(this.value, p);
                 if (!isWordChar(this.value.slice(p, next)))
                     break;
                 p = next;
@@ -820,26 +835,28 @@ let TextInput = (() => {
             // Readline `transpose-chars`: swap the char before the cursor with the
             // char at the cursor and advance. At end-of-value, swap the trailing
             // two chars without advancing. At position 0, no-op.
-            const len = this.value.length;
-            if (len < 2 || this.cursorPosition === 0)
+            if (this.cursorPosition === 0)
                 return;
             const p = this.cursorPosition;
-            if (p === len) {
-                // End-of-value: swap the trailing two code points; cursor stays.
-                const cp2 = prevCodePoint(this.value, p);
-                const cp1 = prevCodePoint(this.value, cp2);
+            if (p === this.value.length) {
+                // End-of-value: swap the trailing two glyphs; cursor stays. One glyph
+                // has nothing to swap with.
+                const cp2 = prevGrapheme(this.value, p);
+                if (cp2 === 0)
+                    return;
+                const cp1 = prevGrapheme(this.value, cp2);
                 this.value = this.value.slice(0, cp1) + this.value.slice(cp2) + this.value.slice(cp1, cp2);
                 this._preferredColumn = null;
                 this.emitChange();
                 return;
             }
-            // Normal case: find full code-point substrings for the char before and at cursor.
-            const cpBefore = prevCodePoint(this.value, p);
-            const cpAfter = nextCodePoint(this.value, p);
+            // Normal case: the whole glyphs before and at the cursor.
+            const cpBefore = prevGrapheme(this.value, p);
+            const cpAfter = nextGrapheme(this.value, p);
             const charBefore = this.value.slice(cpBefore, p);
             const charAt = this.value.slice(p, cpAfter);
             this.value = this.value.slice(0, cpBefore) + charAt + charBefore + this.value.slice(cpAfter);
-            this.cursorPosition = asCodePoint(cpAfter);
+            this.cursorPosition = cpAfter;
             this._preferredColumn = null;
             this.emitChange();
         }
@@ -860,42 +877,58 @@ let TextInput = (() => {
             let toInsert = text;
             if (this._maxLength !== undefined) {
                 const room = this._maxLength - this.value.length;
-                if (room <= 0)
-                    return;
-                if (toInsert.length > room)
-                    toInsert = toInsert.slice(0, room);
+                // Cut between glyphs: the longest run of whole clusters within `room`.
+                let fit = 0;
+                for (const g of graphemes(toInsert)) {
+                    if (fit + g.length > room)
+                        break;
+                    fit += g.length;
+                }
+                toInsert = toInsert.slice(0, fit);
             }
+            if (toInsert.length === 0)
+                return;
+            // The end is taken before the write: the value setter has already moved
+            // the cursor past a cluster the insert grew.
+            const end = asCodeUnit(this.cursorPosition + toInsert.length);
             this.value =
                 this.value.slice(0, this.cursorPosition) +
                     toInsert +
                     this.value.slice(this.cursorPosition);
-            this.cursorPosition = asCodePoint(this.cursorPosition + toInsert.length);
+            this.cursorPosition = end;
             this._preferredColumn = null;
             this.emitChange();
         }
         // --- Rendering ---
+        // [LAW:one-source-of-truth] The style a value is drawn in is also what a
+        // short row is padded with, so a caller's `contentStyle` fills the row.
+        get ground() {
+            return this.disabled
+                ? new Style(this.disabledInk)
+                : this.contentStyleOverride ?? super.ground;
+        }
         draw(options) {
             if (this._multiline)
                 return this._renderMultiline(options);
             return this._renderSingleLine(options);
         }
+        // [LAW:dataflow-not-control-flow] How a stretch of `value` is shown in one
+        // line derives from mode: one mask cell per glyph, or `\n` as a visible
+        // glyph. The render and the click hit-test both read it.
+        _shown(text, options) {
+            return this._password
+                ? drawable(options, MASK_GLYPH, ASCII_MASK_GLYPH).repeat(graphemes(text).length)
+                : text.replace(/\n/g, drawable(options, NEWLINE_GLYPH, ASCII_NEWLINE_GLYPH));
+        }
         _renderSingleLine(options) {
             const showPlaceholder = this.focused && this.value.length === 0 && this.placeholder.length > 0;
-            // [LAW:dataflow-not-control-flow] Single rawDisplay value derives from
-            // mode (password / placeholder / plain). NEWLINE_GLYPH substitution maps
-            // every code unit in value 1:1 to rawDisplay so cursorPosition (a code-
-            // unit index) is a valid index into rawDisplay regardless of mode.
-            const rawDisplay = showPlaceholder
-                ? this.placeholder
-                : this._password
-                    ? drawable(options, MASK_GLYPH, ASCII_MASK_GLYPH).repeat(this.value.length)
-                    : this.value.indexOf("\n") >= 0
-                        ? this.value.replace(/\n/g, drawable(options, NEWLINE_GLYPH, ASCII_NEWLINE_GLYPH))
-                        : this.value;
-            // Measure in cell space — cursorPosition is a code-unit index; convert to
-            // cell column for all viewport arithmetic.
+            // The cursor's column is the width of the shown text before it, whatever
+            // the mode — a placeholder is shown only over an empty value.
+            this._singleLineAsciiOnly = options.asciiOnly ?? false;
+            const shown = (text) => this._shown(text, options);
+            const rawDisplay = showPlaceholder ? this.placeholder : shown(this.value);
             const rawCellWidth = asCellCol(cellLen(rawDisplay));
-            const cursorCellCol = asCellCol(cellLen(rawDisplay.slice(0, this.cursorPosition)));
+            const cursorCellCol = asCellCol(cellLen(shown(this.value.slice(0, this.cursorPosition))));
             const maxAvailable = asCellCol(Math.max(MIN_CONTENT_WIDTH, options.maxWidth - 2));
             const desiredWidth = asCellCol(Math.max(MIN_CONTENT_WIDTH, rawCellWidth, cursorCellCol + 1));
             const contentWidth = asCellCol(Math.min(maxAvailable, desiredWidth));
@@ -910,25 +943,16 @@ let TextInput = (() => {
             const display = setCellSize(visible, contentWidth);
             const cursorDisplayCellCol = asCellCol(cursorCellCol - actualStartCell);
             const bracketStyle = this.disabled
-                ? new Style({ color: "#666666", bgcolor: "#333333", dim: true })
-                : new Style({ color: this.resolvePalette("foreground") });
-            const contentStyle = this.disabled
-                ? new Style({ color: "#666666", bgcolor: "#333333", dim: true })
-                : showPlaceholder
-                    ? new Style({ color: this.resolvePalette("foreground"), dim: true })
-                    : this.contentStyleOverride ?? new Style({ color: this.resolvePalette("foreground") });
-            const cursorStyle = this.cursorStyleOverride ?? new Style({
-                color: this.resolvePalette("on-primary"),
-                bgcolor: this.resolvePalette("primary"),
-            });
+                ? new Style(this.disabledInk)
+                : new Style(ink(this.theme, "foreground", "background"));
+            const contentStyle = showPlaceholder && !this.disabled
+                ? new Style({ ...ink(this.theme, "foreground", "background"), dim: true })
+                : this.ground;
+            const cursorStyle = this.cursorStyleOverride ?? new Style(ink(this.theme, "on-primary", "primary"));
             const segments = [new Segment("[", bracketStyle)];
             if (this.focused && !this.disabled && cursorDisplayCellCol >= 0 && cursorDisplayCellCol < contentWidth) {
                 const [before, rest] = splitText(display, cursorDisplayCellCol);
-                let firstCh = "";
-                for (const ch of rest) {
-                    firstCh = ch;
-                    break;
-                }
+                const firstCh = rest.slice(0, nextGrapheme(rest, asCodePoint(0)));
                 const at = firstCh || " ";
                 const after = rest.slice(firstCh.length);
                 if (before.length > 0)
@@ -981,14 +1005,9 @@ let TextInput = (() => {
             if (this._minRows !== undefined && total < this._minRows && this._maxRows === undefined) {
                 padRows = this._minRows - total;
             }
-            const contentStyle = this.disabled
-                ? new Style({ color: "#666666", bgcolor: "#333333", dim: true })
-                : this.contentStyleOverride ?? new Style({ color: this.resolvePalette("foreground") });
-            const markerStyle = new Style({ color: this.resolvePalette("foreground"), dim: true });
-            const cursorStyle = this.cursorStyleOverride ?? new Style({
-                color: this.resolvePalette("on-primary"),
-                bgcolor: this.resolvePalette("primary"),
-            });
+            const contentStyle = this.ground;
+            const markerStyle = new Style({ ...ink(this.theme, "foreground", "background"), dim: true });
+            const cursorStyle = this.cursorStyleOverride ?? new Style(ink(this.theme, "on-primary", "primary"));
             // Scroll-direction arrows appear in the rightmost cell of the first/last
             // visible row, *only* when scroll is actually possible in that direction.
             // _emitRowContent reserves the indicator's cells so content never
@@ -999,7 +1018,7 @@ let TextInput = (() => {
             const arrowsMode = this._scrollIndicator === "arrows";
             const canScrollUp = arrowsMode && scrollable && this._scrollStart > 0;
             const canScrollDown = arrowsMode && scrollable && this._scrollStart + this._maxRows < total;
-            const indicatorStyle = this.indicatorStyleOverride ?? new Style({ color: this.resolvePalette("primary") });
+            const indicatorStyle = this.indicatorStyleOverride ?? new Style(ink(this.theme, "text-primary", "background"));
             const segments = [];
             const showCursor = this.focused && !this.disabled;
             for (let i = 0; i < visibleCount; i++) {
@@ -1051,7 +1070,7 @@ let TextInput = (() => {
                     return;
                 }
                 const before = content.slice(0, cursorCol);
-                const nextCp = nextCodePoint(content, asCodePoint(cursorCol));
+                const nextCp = nextGrapheme(content, asCodePoint(cursorCol));
                 const at = content.slice(cursorCol, nextCp) || " ";
                 const after = content.slice(nextCp);
                 if (before.length > 0)
@@ -1075,11 +1094,7 @@ let TextInput = (() => {
                 : -1;
             if (cursorCellColInRow >= 0 && cursorCellColInRow < contentCellWidth) {
                 const [before, rest] = splitText(paddedContent, asCellCol(cursorCellColInRow));
-                let firstCh = "";
-                for (const ch of rest) {
-                    firstCh = ch;
-                    break;
-                }
+                const firstCh = rest.slice(0, nextGrapheme(rest, asCodePoint(0)));
                 const at = firstCh || " ";
                 const after = rest.slice(firstCh.length);
                 if (before.length > 0)
@@ -1154,12 +1169,6 @@ let TextInput = (() => {
             const cursorRow1 = this._cursorVisualRow() + 1;
             return `[${cursorRow1}/${rows.length}]`;
         }
-        // --- Palette resolution ---
-        resolvePalette(key) {
-            const rgba = this._theme.palette.get(key);
-            // [LAW:no-defensive-null-guards] palette must contain all keys.
-            return ColorSpec.fromRgba(rgba);
-        }
     };
 })();
 export { TextInput };

package/dist/widgets/themed-widget.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ThemedWidget — a widget that draws every cell it owns from one theme's
+ * palette: the interactive widgets, as against `StaticItem`, which shows
+ * content it did not draw.
+ *
+ * [LAW:one-type-per-behavior] The theme, how it is swapped, what a disabled
+ * widget looks like, and the ground a padded row stands on are the same for
+ * every such widget, so they live here once.
+ */
+import { Style } from "../core/style.js";
+import type { TerminalTheme } from "../core/color.js";
+import { WidgetBase } from "./widget-base.js";
+import { ink } from "./ink.js";
+export declare abstract class ThemedWidget extends WidgetBase {
+    protected accessor theme: TerminalTheme;
+    constructor(theme: TerminalTheme | undefined);
+    setTheme(theme: TerminalTheme): void;
+    protected get ground(): Style;
+    protected get disabledInk(): ReturnType<typeof ink>;
+}