@promptctl/rich-js 0.24.0 → 0.25.0

package/dist/widgets/text-input.js

@@ -3,10 +3,12 @@
  *
  * Two modes:
  *   - single-line (default): Enter submits; newlines in value are rendered
- *                            as a literal `↵` glyph if they ever appear.
+ *                            as a literal `↵` glyph if they ever appear, and
+ *                            any other glyph of zero cells as `◌`.
  *   - multi-line  (`multiline: true`): Enter inserts a `\n`; `value` may
  *                            contain logical line breaks; Up/Down navigate
  *                            between logical lines preserving column intent.
+ *                            A glyph of zero cells is drawn as `◌` here too.
  *
  * [LAW:dataflow-not-control-flow] cursor and value are observable data; the
  * keymap dispatches to small `@action` mutators that all flow through the
@@ -94,13 +96,72 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
-import { observable, action, observableRef, runInAction } from "mobx";
+import { action, runInAction } from "mobx";
+import { observableRef } from "./observable.js";
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.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 { cellLen, setCellSize, splitText, cellFitEnd, cellRows, clustersBefore, clustersFrom, asCellCol, cellCount, asCodePoint, asCodeUnit, graphemeBoundary, graphemes, nextGrapheme, prevGrapheme, } from "../core/cells.js";
+import { afterPass, drawable, render } from "../core/protocol.js";
+import { State } from "../core/state.js";
+import { Viewport } from "../renderables/viewport.js";
+import { Animation } from "../core/animation.js";
+import { beat } from "../core/easing.js";
+import { Timeline } from "../core/timeline.js";
+import { holdOf, shownAt, stampFrame } from "../core/animation.js";
+import { levelOf } from "../core/anchor.js";
 import { ThemedWidget } from "./themed-widget.js";
 import { ink } from "./ink.js";
+import { pattern } from "../core/pattern.js";
+/** The row of `rows` the cursor at `cursor` sits on: the last that starts at or before it. */
+function cursorRowIn(rows, cursor) {
+    let row = rows.length - 1;
+    while (row > 0 && rows[row].valueStart > cursor)
+        row--;
+    return Math.max(0, row);
+}
+/**
+ * The content row `shown`'s first row draws: what a viewport showing content
+ * stamped by `owner` scrolled it to. [LAW:no-silent-failure] Every content row
+ * is padded and stamped, so a first row without the stamp is a broken frame,
+ * not an offset of 0.
+ */
+function shownRow(shown, owner) {
+    if (shown.length === 0)
+        return 0;
+    const anchor = levelOf(Segment.anchorAt(shown, 0, 0), owner);
+    if (anchor === undefined)
+        throw new Error("TextInput: the viewport's first row carries no row of the field's content");
+    return anchor.row;
+}
+/**
+ * [LAW:one-source-of-truth] A frame's layout, as the owner of every cell the
+ * field drew in it: a click and the scroll indicator read the layout of the
+ * frame they land on off its cells, never one a later frame kept.
+ */
+class Laid {
+    layout;
+    constructor(layout) {
+        this.layout = layout;
+    }
+}
+/** The layout stamped on the cell `anchor` names, at whatever depth. */
+function layoutOn(anchor) {
+    let a = anchor;
+    while (a !== undefined && !(a.owner instanceof Laid))
+        a = a.inner;
+    return a === undefined ? undefined : a.owner.layout;
+}
+/** The layout `field` drew in the frame `lines` hold: off the first of its cells. */
+function layoutIn(lines, field) {
+    for (const line of lines) {
+        for (const segment of line) {
+            const layout = layoutOn(levelOf(segment.style?.anchor, field));
+            if (layout !== undefined)
+                return layout;
+        }
+    }
+    return undefined;
+}
 /**
  * Character-greedy soft wrap. Breaks at any character once `firstWidth`
  * (or `continuationWidth` for continuation rows) cells are exhausted. The
@@ -109,40 +170,45 @@ import { ink } from "./ink.js";
  *
  * Wide characters (CJK, emoji) are treated as atomic: a char that would
  * straddle the budget is moved to the next row rather than split, and one too
- * wide for the whole budget is force-taken — see `cellStepFrom`.
+ * wide for the whole budget is force-taken — see `cellRows`.
  */
 export const charGreedyWrap = (line, { firstWidth, continuationWidth }) => {
     if (line.length === 0)
-        return [{ content: "", start: asCodePoint(0) }];
+        return [{ start: asCodePoint(0), end: asCodePoint(0) }];
+    const capOf = (row) => (row === 0 ? firstWidth : continuationWidth);
     const rows = [];
-    let pos = asCodePoint(0);
-    let isFirst = true;
-    while (pos < line.length) {
-        const cap = isFirst ? firstWidth : continuationWidth;
-        if (cap <= 0)
+    for (const row of cellRows(line, capOf)) {
+        if (capOf(rows.length) <= 0)
             break;
-        const end = cellStepFrom(line, pos, cap);
-        rows.push({ content: line.slice(pos, end), start: pos });
-        pos = end;
-        isFirst = false;
+        rows.push(row);
     }
     return rows;
 };
 const MIN_CONTENT_WIDTH = 8;
-// Each glyph and its ASCII stand-in are one code unit and one cell, so the
-// display string maps 1:1 onto `value` and hit-testing needs no render options.
+// [LAW:one-source-of-truth] The cells single-line content takes: its text and,
+// past the text's end, the cell the cursor stands on there — never fewer than
+// the floor. The render sizes and scrolls the field by it; `measure` asks it
+// with the cursor at the end, the widest a value draws.
+function singleLineExtent(textCells, cursorCell) {
+    return asCellCol(Math.max(MIN_CONTENT_WIDTH, textCells, cursorCell + 1));
+}
+// What one line shows in place of a glyph of `value`; each is one cell.
 const NEWLINE_GLYPH = "↵";
 const ASCII_NEWLINE_GLYPH = "~";
 const MASK_GLYPH = "•";
 const ASCII_MASK_GLYPH = "*";
+// The dotted circle Unicode draws for a mark with no base to sit on; `?` is the
+// ASCII replacement character.
+const ZERO_CELL_GLYPH = "◌";
+const ASCII_ZERO_CELL_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;
+const PRINTABLE = pattern(/^[^\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/;
+const WORD_CHAR_RE = pattern(/[A-Za-z0-9_]/);
+const WHITESPACE_RE = pattern(/\s/);
 /** CRLF and lone CR as LF, the line break `value` holds. */
 function toLf(text) {
     return text.replace(/\r\n?/g, "\n");
@@ -153,6 +219,33 @@ function isWordChar(c) {
 function isWhitespace(c) {
     return c !== undefined && WHITESPACE_RE.test(c);
 }
+const isNotWordChar = (c) => !isWordChar(c);
+const isNotWhitespace = (c) => !isWhitespace(c);
+/**
+ * How many code units a word motion crosses: every leading cluster `skipped`
+ * accepts, then every one after them `taken` accepts. `clusters` is one walk
+ * from the cursor (`clustersFrom` or `clustersBefore`), so a motion across a
+ * long word segments the value once, not once a cluster.
+ */
+function wordSpan(clusters, skipped, taken) {
+    let span = 0;
+    let skipping = true;
+    for (const cluster of clusters) {
+        skipping &&= skipped(cluster);
+        if (!skipping && !taken(cluster))
+            break;
+        span += cluster.length;
+    }
+    return span;
+}
+/**
+ * The caret's blink, from the moment it restarts: lit for the first half
+ * second, so the caret is solid the moment the field is touched, then dark
+ * for the next, on a `beat`. A loop, so with its motion taken out it holds lit.
+ */
+const CARET_BLINK = Animation.map(beat([0.5, 0.5]), (hold) => hold === 0);
+/** The caret of a frame drawn for no moment — a `print` — which nothing moves: lit, and never changing. */
+const CARET_UNTIMED = { lit: true, hold: { lastChange: Number.NEGATIVE_INFINITY, nextChange: Number.POSITIVE_INFINITY } };
 let TextInput = (() => {
     let _classSuper = ThemedWidget;
     let _instanceExtraInitializers = [];
@@ -162,6 +255,9 @@ let TextInput = (() => {
     let __cursor_decorators;
     let __cursor_initializers = [];
     let __cursor_extraInitializers = [];
+    let __blinkFrom_decorators;
+    let __blinkFrom_initializers = [];
+    let __blinkFrom_extraInitializers = [];
     let _placeholder_decorators;
     let _placeholder_initializers = [];
     let _placeholder_extraInitializers = [];
@@ -175,6 +271,7 @@ let TextInput = (() => {
     let _contentStyleOverride_initializers = [];
     let _contentStyleOverride_extraInitializers = [];
     let _handleKey_decorators;
+    let _handleFocus_decorators;
     let _handleMouse_decorators;
     let _setHovered_decorators;
     let _moveCharLeft_decorators;
@@ -199,13 +296,15 @@ 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];
-            __cursor_decorators = [observable];
+            __value_decorators = [observableRef];
+            __cursor_decorators = [observableRef];
+            __blinkFrom_decorators = [observableRef];
             _placeholder_decorators = [observableRef];
             _indicatorStyleOverride_decorators = [observableRef];
             _cursorStyleOverride_decorators = [observableRef];
             _contentStyleOverride_decorators = [observableRef];
             _handleKey_decorators = [action];
+            _handleFocus_decorators = [action];
             _handleMouse_decorators = [action];
             _setHovered_decorators = [action];
             _moveCharLeft_decorators = [action];
@@ -229,11 +328,13 @@ let TextInput = (() => {
             __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, __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, __blinkFrom_decorators, { kind: "accessor", name: "_blinkFrom", static: false, private: false, access: { has: obj => "_blinkFrom" in obj, get: obj => obj._blinkFrom, set: (obj, value) => { obj._blinkFrom = value; } }, metadata: _metadata }, __blinkFrom_initializers, __blinkFrom_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);
             __esDecorate(this, null, _contentStyleOverride_decorators, { kind: "accessor", name: "contentStyleOverride", static: false, private: false, access: { has: obj => "contentStyleOverride" in obj, get: obj => obj.contentStyleOverride, set: (obj, value) => { obj.contentStyleOverride = value; } }, metadata: _metadata }, _contentStyleOverride_initializers, _contentStyleOverride_extraInitializers);
             __esDecorate(this, null, _handleKey_decorators, { kind: "method", name: "handleKey", static: false, private: false, access: { has: obj => "handleKey" in obj, get: obj => obj.handleKey }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFocus_decorators, { kind: "method", name: "handleFocus", static: false, private: false, access: { has: obj => "handleFocus" in obj, get: obj => obj.handleFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleMouse_decorators, { kind: "method", name: "handleMouse", static: false, private: false, access: { has: obj => "handleMouse" in obj, get: obj => obj.handleMouse }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _setHovered_decorators, { kind: "method", name: "setHovered", static: false, private: false, access: { has: obj => "setHovered" in obj, get: obj => obj.setHovered }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _moveCharLeft_decorators, { kind: "method", name: "moveCharLeft", static: false, private: false, access: { has: obj => "moveCharLeft" in obj, get: obj => obj.moveCharLeft }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -265,6 +366,13 @@ let TextInput = (() => {
         #_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; }
+        #_blinkFrom_accessor_storage = (__runInitializers(this, __cursor_extraInitializers), __runInitializers(this, __blinkFrom_initializers, 0));
+        // When the field last took focus, a click, or a key it handled, on the
+        // frame's clock (each event's `time`): where the caret's blink restarts.
+        // The blink itself is a function of this and the time a frame is drawn
+        // for, so nothing about it is kept.
+        get _blinkFrom() { return this.#_blinkFrom_accessor_storage; }
+        set _blinkFrom(value) { this.#_blinkFrom_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
@@ -280,7 +388,7 @@ let TextInput = (() => {
         }
         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));
+        #placeholder_accessor_storage = (__runInitializers(this, __blinkFrom_extraInitializers), __runInitializers(this, _placeholder_initializers, void 0));
         get placeholder() { return this.#placeholder_accessor_storage; }
         set placeholder(value) { this.#placeholder_accessor_storage = value; }
         _maxLength = __runInitializers(this, _placeholder_extraInitializers);
@@ -301,42 +409,28 @@ let TextInput = (() => {
         #contentStyleOverride_accessor_storage = (__runInitializers(this, _cursorStyleOverride_extraInitializers), __runInitializers(this, _contentStyleOverride_initializers, void 0));
         get contentStyleOverride() { return this.#contentStyleOverride_accessor_storage; }
         set contentStyleOverride(value) { this.#contentStyleOverride_accessor_storage = value; }
-        /**
-         * Last computed visual-row decomposition. Cached at the end of `render()`
-         * so vertical motion (Up/Down) can step row-by-row without re-running the
-         * wrap strategy. Null before the first render — vertical motion falls
-         * back to logical-line motion in that case.
-         *
-         * [LAW:dataflow-not-control-flow] One source of truth for "what does Up
-         * mean right now": the row table the renderer just produced. No parallel
-         * "where would the cursor go" math; both the renderer and the keymap
-         * read from the same array.
-         */
-        _visualRows = (__runInitializers(this, _contentStyleOverride_extraInitializers), null);
         // [LAW:types-are-the-program] `_preferredColumn` is a cell column (not a
         // code-unit index) — vertical motion navigates the visual surface, not the
         // string's byte layout. Reset to null on every non-vertical motion or edit
         // so the next Up/Down captures a fresh intent. Without this, Down through a
         // short line then back Up would land at the short-line column instead of the
         // original.
-        _preferredColumn = null;
+        _preferredColumn = (__runInitializers(this, _contentStyleOverride_extraInitializers), new State(null));
         // Single-slot kill buffer used by Ctrl+U / Ctrl+K → Ctrl+Y. Not a full
         // kill ring (no Alt+Y rotation) — sufficient for the common cut/paste
         // pattern that's the readline 90% case.
-        _killBuffer = "";
-        // [LAW:one-source-of-truth] Top visual row of the scroll viewport.
-        // Persisted across renders so the cursor can move *within* the viewport
-        // without dragging it along — the viewport scrolls only when the cursor
-        // would leave it. Without this, recomputing scroll from cursor position
-        // alone pins the cursor to the viewport's bottom edge whenever
-        // `cursorRow >= maxRows`, making every subsequent Up/Down scroll in
-        // lockstep with the cursor.
-        _scrollStart = 0;
-        // [LAW:one-source-of-truth] Viewport scroll offset in cells for the
-        // 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;
+        _killBuffer = new State("");
+        // [LAW:one-source-of-truth] What the last frame drew under — the one layout
+        // fact only a render learns. The visual rows, the single-line window and
+        // the cursor's row are functions of it and of `value`, derived where they
+        // are read: a click and Up/Down see the rows of the value as it is now at
+        // the width the user last saw. Kept once the frame is drawn (`afterPass`).
+        // Before any frame the width bounds nothing, and nothing wraps.
+        _drawn = new State({ maxWidth: Infinity, asciiOnly: false });
+        // [LAW:single-enforcer] The multiline scroll: the viewport keeps the cursor
+        // row in view, clamps when the value shrinks, and keeps its offset once the
+        // frame is drawn, as it does for a `ListView`.
+        _viewport;
         multiline;
         constructor(options = {}) {
             super(options.theme);
@@ -354,7 +448,8 @@ let TextInput = (() => {
             this._maxLength = options.maxLength;
             this._password = options.password ?? false;
             this._multiline = options.multiline ?? false;
-            this._wrap = options.wrap;
+            // Soft wrap is multiline's: one line wraps to nothing.
+            this._wrap = this._multiline ? options.wrap : undefined;
             this._continuationMarker = options.continuationMarker ?? "↳ ";
             this._markerWidth = asCellCol(cellLen(this._continuationMarker));
             this._maxRows = options.maxRows;
@@ -364,9 +459,29 @@ let TextInput = (() => {
             this.cursorStyleOverride = options.cursorStyle;
             this.contentStyleOverride = options.contentStyle;
             this.multiline = this._multiline;
+            this._viewport = new Viewport();
         }
         // --- Event handlers ---
+        // A key the field handles is one it stops; only that restarts the blink,
+        // so a key passing through to the app — Tab, Escape — moves nothing here.
         handleKey(event) {
+            this._edit(event);
+            if (!event.stopped)
+                return;
+            this._blinkFrom = event.time;
+            // An edit on the cursor's row moves no followed range, so the row is
+            // brought into view here too: typing after the wheel scrolled away scrolls
+            // back. The rows are the edited value's, at the width last drawn.
+            if (this._multiline) {
+                const row = cursorRowIn(this._rows(this._drawn.get()), this.cursorPosition);
+                this._viewport.ensureVisible(row, row + 1);
+            }
+        }
+        handleFocus(event) {
+            super.handleFocus(event);
+            this._blinkFrom = event.time;
+        }
+        _edit(event) {
             if (this.disabled)
                 return;
             // ─── editing keys (modifier-conscious) ───
@@ -538,110 +653,69 @@ let TextInput = (() => {
                 return;
             if (event.type !== "mouse_down")
                 return;
-            if (this._multiline) {
+            this._blinkFrom = event.time;
+            // [LAW:no-silent-failure] Every cell the field draws carries its frame's
+            // layout, so a press without one did not come off a frame it drew.
+            const layout = layoutOn(event.cell);
+            if (layout === undefined)
+                throw new Error("TextInput: a press carries no layout of the frame it landed on");
+            if (layout.kind === "rows") {
                 // Multiline has no brackets; rows may have a leading continuation marker.
-                // Use event.y to pick the visual row, then project event.x into its content.
-                const rows = this._visualRows;
-                if (!rows || rows.length === 0)
-                    return;
-                const rawRowIdx = this._scrollStart + event.y;
+                // event.y is a row of the window the clicked frame showed; event.x is
+                // projected into the row's content.
+                const rawRowIdx = layout.offset + event.y;
                 // Clicks on minRows-padded empty rows (beyond the last real row) snap to end.
-                if (rawRowIdx >= rows.length) {
+                if (rawRowIdx >= layout.rows.length) {
                     this.cursorPosition = asCodeUnit(this.value.length);
-                    this._preferredColumn = null;
+                    this._preferredColumn.set(null);
                     return;
                 }
-                const rowIdx = Math.max(0, rawRowIdx);
-                const row = rows[rowIdx];
+                const row = layout.rows[rawRowIdx];
                 // 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));
-                this.cursorPosition = asCodeUnit(row.valueStart + cellColToCodeUnitOffset(row.content, relX));
+                this.cursorPosition = asCodeUnit(row.valueStart + this._offsetAtShownCell(row.content, relX, layout.drawn));
             }
             else {
                 // [LAW:types-are-the-program] relX is a cell-column offset into the full
-                // display string. Add _singleLineViewportStart (the scroll offset captured
-                // 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);
-                // 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);
+                // display string: the click's column past the bracket, from where the
+                // window the clicked frame showed begins.
+                const relX = asCellCol(Math.max(0, event.x - 1) + layout.startCell);
+                this.cursorPosition = this._offsetAtShownCell(layout.value, relX, layout.drawn);
             }
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
         }
         // --- Hover mutator (router fast-path) ---
         setHovered(value) { this.hovered = value; }
         // ─── Public motion primitives ───────────────────────────────────────────
         moveCharLeft() {
             this.cursorPosition = prevGrapheme(this.value, this.cursorPosition);
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
         }
         moveCharRight() {
             this.cursorPosition = nextGrapheme(this.value, this.cursorPosition);
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
         }
         moveLineUp() {
-            // Prefer the on-screen visual decomposition when it exists — wraps,
-            // marker offsets, and scroll alignment are all already accounted for.
-            // Fall back to logical-line motion only when no render has occurred yet
-            // (e.g. cursor motion before mount).
-            if (this._visualRows !== null && this._visualRows.length > 1) {
-                const rowIdx = this._cursorVisualRow();
-                if (rowIdx === 0)
-                    return;
-                const col = this._preferredColumn ?? this._cursorVisualCol();
-                const target = this._visualRows[rowIdx - 1];
-                this.cursorPosition = asCodeUnit(target.valueStart + this._clampColForRow(col, rowIdx - 1));
-                this._preferredColumn = col;
-                return;
-            }
-            const lineStart = this._lineStart();
-            if (lineStart === 0)
-                return;
-            // Fallback: no render cache yet; use cell-space arithmetic for wide-char correctness.
-            const col = this._preferredColumn ?? asCellCol(cellLen(this.value.slice(lineStart, this.cursorPosition)));
-            const prevLineEnd = lineStart - 1;
-            let prevLineStart = prevLineEnd;
-            while (prevLineStart > 0 && this.value[prevLineStart - 1] !== "\n")
-                prevLineStart--;
-            const prevLineContent = this.value.slice(prevLineStart, prevLineEnd);
-            this.cursorPosition = asCodeUnit(prevLineStart + cellColToCodeUnitOffset(prevLineContent, asCellCol(Math.min(col, cellLen(prevLineContent)))));
-            this._preferredColumn = col;
+            this._moveLine(-1);
         }
         moveLineDown() {
-            if (this._visualRows !== null && this._visualRows.length > 1) {
-                const rowIdx = this._cursorVisualRow();
-                if (rowIdx === this._visualRows.length - 1)
-                    return;
-                const col = this._preferredColumn ?? this._cursorVisualCol();
-                this.cursorPosition = asCodeUnit(this._visualRows[rowIdx + 1].valueStart + this._clampColForRow(col, rowIdx + 1));
-                this._preferredColumn = col;
-                return;
-            }
-            const lineEnd = this._lineEnd();
-            if (lineEnd === this.value.length)
+            this._moveLine(1);
+        }
+        // [LAW:dataflow-not-control-flow] One motion over the rows as last drawn —
+        // wraps and marker offsets accounted for. Before any frame they are the
+        // logical lines, so motion before mount is this same path, not a fallback.
+        _moveLine(step) {
+            const rows = this._rows(this._drawn.get());
+            const rowIdx = cursorRowIn(rows, this.cursorPosition);
+            const targetIdx = rowIdx + step;
+            const target = rows[targetIdx];
+            if (target === undefined)
                 return;
-            const lineStart = this._lineStart();
-            // Fallback: no render cache yet; use cell-space arithmetic for wide-char correctness.
-            const col = this._preferredColumn ?? asCellCol(cellLen(this.value.slice(lineStart, this.cursorPosition)));
-            const nextLineStart = lineEnd + 1;
-            let nextLineEnd = nextLineStart;
-            while (nextLineEnd < this.value.length && this.value[nextLineEnd] !== "\n")
-                nextLineEnd++;
-            const nextLineContent = this.value.slice(nextLineStart, nextLineEnd);
-            this.cursorPosition = asCodeUnit(nextLineStart + cellColToCodeUnitOffset(nextLineContent, asCellCol(Math.min(col, cellLen(nextLineContent)))));
-            this._preferredColumn = col;
+            const row = rows[rowIdx];
+            const col = this._preferredColumn.get() ?? this._shownCells(row.content.slice(0, this.cursorPosition - row.valueStart));
+            this.cursorPosition = asCodeUnit(target.valueStart + this._clampColForRow(rows, col, targetIdx));
+            this._preferredColumn.set(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
@@ -649,91 +723,46 @@ let TextInput = (() => {
         // 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
+        // would cause `cursorRowIn` to resolve to the *later* row, making
         // every subsequent Up/Down stick at the boundary.
         //
         // For rows NOT followed by a continuation (last wrap row, or any unwrapped
         // logical line), the end-of-line position is valid — there is no adjacent
         // continuation row to collide with.
-        _clampColForRow(col, targetIdx) {
-            const rows = this._visualRows;
+        _clampColForRow(rows, col, targetIdx) {
             const target = rows[targetIdx];
             const nextIsContinuation = targetIdx + 1 < rows.length && rows[targetIdx + 1].isContinuation;
-            const contentCellWidth = asCellCol(cellLen(target.content));
+            const contentCellWidth = this._shownCells(target.content);
             const capCells = nextIsContinuation
                 ? asCellCol(Math.max(0, contentCellWidth - 1))
                 : contentCellWidth;
-            return cellColToCodeUnitOffset(target.content, asCellCol(Math.min(col, capCells)));
-        }
-        // Locate which cached visual row the cursor sits on. Returns the row index
-        // for use in `moveLineUp`/`moveLineDown`; caller must guard `_visualRows`.
-        _cursorVisualRow() {
-            const rows = this._visualRows;
-            let idx = 0;
-            for (let i = rows.length - 1; i >= 0; i--) {
-                if (rows[i].valueStart <= this.cursorPosition) {
-                    idx = i;
-                    break;
-                }
-            }
-            return idx;
-        }
-        // Returns the cursor's cell column within its current visual row.
-        _cursorVisualCol() {
-            const rows = this._visualRows;
-            const idx = this._cursorVisualRow();
-            const row = rows[idx];
-            return asCellCol(cellLen(row.content.slice(0, this.cursorPosition - row.valueStart)));
+            return this._offsetAtShownCell(target.content, asCellCol(Math.min(col, capCells)), this._drawn.get());
         }
         moveLineStart() {
             this.cursorPosition = this._lineStart();
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
         }
         moveLineEnd() {
             this.cursorPosition = this._lineEnd();
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
         }
         moveDocStart() {
             this.cursorPosition = asCodeUnit(0);
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
         }
         moveDocEnd() {
             this.cursorPosition = asCodeUnit(this.value.length);
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
         }
         moveWordLeft() {
-            let p = this.cursorPosition;
-            while (p > 0) {
-                const prev = prevGrapheme(this.value, p);
-                if (isWordChar(this.value.slice(prev, p)))
-                    break;
-                p = prev;
-            }
-            while (p > 0) {
-                const prev = prevGrapheme(this.value, p);
-                if (!isWordChar(this.value.slice(prev, p)))
-                    break;
-                p = prev;
-            }
-            this.cursorPosition = p;
-            this._preferredColumn = null;
+            const at = this.cursorPosition;
+            this.cursorPosition = asCodePoint(at - wordSpan(clustersBefore(this.value, at), isNotWordChar, isWordChar));
+            this._preferredColumn.set(null);
         }
         moveWordRight() {
-            let p = this.cursorPosition;
-            while (p < this.value.length) {
-                const next = nextGrapheme(this.value, p);
-                if (isWordChar(this.value.slice(p, next)))
-                    break;
-                p = next;
-            }
-            while (p < this.value.length) {
-                const next = nextGrapheme(this.value, p);
-                if (!isWordChar(this.value.slice(p, next)))
-                    break;
-                p = next;
-            }
-            this.cursorPosition = p;
-            this._preferredColumn = null;
+            const at = this.cursorPosition;
+            this.cursorPosition = asCodePoint(at + wordSpan(clustersFrom(this.value, at), isNotWordChar, isWordChar));
+            this._preferredColumn.set(null);
         }
         // ─── Public editing primitives ──────────────────────────────────────────
         deleteCharBack() {
@@ -742,7 +771,7 @@ let TextInput = (() => {
             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;
+            this._preferredColumn.set(null);
             this.emitChange();
         }
         deleteCharForward() {
@@ -750,86 +779,63 @@ let TextInput = (() => {
                 return;
             const nextPos = nextGrapheme(this.value, this.cursorPosition);
             this.value = this.value.slice(0, this.cursorPosition) + this.value.slice(nextPos);
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
             this.emitChange();
         }
         deleteWordBack() {
             // Readline `unix-word-rubout` semantics: delete back to nearest whitespace,
             // skipping trailing whitespace first so successive Ctrl+W at "foo bar |"
             // → "foo |" → "|" rather than getting stuck on the trailing space.
-            let p = this.cursorPosition;
-            while (p > 0) {
-                const prev = prevGrapheme(this.value, p);
-                if (!isWhitespace(this.value.slice(prev, p)))
-                    break;
-                p = prev;
-            }
-            while (p > 0) {
-                const prev = prevGrapheme(this.value, p);
-                if (isWhitespace(this.value.slice(prev, p)))
-                    break;
-                p = prev;
-            }
+            const p = asCodePoint(this.cursorPosition - wordSpan(clustersBefore(this.value, this.cursorPosition), isWhitespace, isNotWhitespace));
             if (p === this.cursorPosition)
                 return;
-            this._killBuffer = this.value.slice(p, this.cursorPosition);
+            this._killBuffer.set(this.value.slice(p, this.cursorPosition));
             this.value = this.value.slice(0, p) + this.value.slice(this.cursorPosition);
             this.cursorPosition = p;
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
             this.emitChange();
         }
         deleteWordForward() {
-            let p = this.cursorPosition;
-            while (p < this.value.length) {
-                const next = nextGrapheme(this.value, p);
-                if (isWordChar(this.value.slice(p, next)))
-                    break;
-                p = next;
-            }
-            while (p < this.value.length) {
-                const next = nextGrapheme(this.value, p);
-                if (!isWordChar(this.value.slice(p, next)))
-                    break;
-                p = next;
-            }
+            const p = this.cursorPosition + wordSpan(clustersFrom(this.value, this.cursorPosition), isNotWordChar, isWordChar);
             if (p === this.cursorPosition)
                 return;
-            this._killBuffer = this.value.slice(this.cursorPosition, p);
+            this._killBuffer.set(this.value.slice(this.cursorPosition, p));
             this.value = this.value.slice(0, this.cursorPosition) + this.value.slice(p);
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
             this.emitChange();
         }
         killLineBack() {
             const start = this._lineStart();
             if (start === this.cursorPosition)
                 return;
-            this._killBuffer = this.value.slice(start, this.cursorPosition);
+            this._killBuffer.set(this.value.slice(start, this.cursorPosition));
             this.value = this.value.slice(0, start) + this.value.slice(this.cursorPosition);
             this.cursorPosition = start;
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
             this.emitChange();
         }
         killLineForward() {
             const end = this._lineEnd();
             if (end > this.cursorPosition) {
-                this._killBuffer = this.value.slice(this.cursorPosition, end);
+                this._killBuffer.set(this.value.slice(this.cursorPosition, end));
                 this.value = this.value.slice(0, this.cursorPosition) + this.value.slice(end);
-                this._preferredColumn = null;
+                this._preferredColumn.set(null);
                 this.emitChange();
                 return;
             }
             // Already at line end → kill the trailing `\n` (join next line).
             if (this.cursorPosition < this.value.length) {
-                this._killBuffer = "\n";
+                this._killBuffer.set("\n");
                 this.value = this.value.slice(0, this.cursorPosition) + this.value.slice(this.cursorPosition + 1);
-                this._preferredColumn = null;
+                this._preferredColumn.set(null);
                 this.emitChange();
             }
         }
         yank() {
-            if (this._killBuffer.length === 0)
+            const killed = this._killBuffer.get();
+            if (killed.length === 0)
                 return;
-            this._insertText(this._killBuffer);
+            this._insertText(killed);
         }
         transposeChars() {
             // Readline `transpose-chars`: swap the char before the cursor with the
@@ -846,7 +852,7 @@ let TextInput = (() => {
                     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._preferredColumn.set(null);
                 this.emitChange();
                 return;
             }
@@ -857,7 +863,7 @@ let TextInput = (() => {
             const charAt = this.value.slice(p, cpAfter);
             this.value = this.value.slice(0, cpBefore) + charAt + charBefore + this.value.slice(cpAfter);
             this.cursorPosition = cpAfter;
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
             this.emitChange();
         }
         // ─── Internal helpers ───────────────────────────────────────────────────
@@ -896,7 +902,7 @@ let TextInput = (() => {
                     toInsert +
                     this.value.slice(this.cursorPosition);
             this.cursorPosition = end;
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
             this.emitChange();
         }
         // --- Rendering ---
@@ -908,56 +914,93 @@ let TextInput = (() => {
                 : this.contentStyleOverride ?? super.ground;
         }
         draw(options) {
-            if (this._multiline)
-                return this._renderMultiline(options);
-            return this._renderSingleLine(options);
+            const drawn = { maxWidth: options.maxWidth, asciiOnly: options.asciiOnly ?? false };
+            // [LAW:effects-at-boundaries] Kept once the frame is drawn, never while it is.
+            afterPass(() => this._drawn.set(drawn));
+            const { lines, layout } = this._multiline ? this._renderMultiline(options, drawn) : this._renderSingleLine(options, drawn);
+            return Segment.anchorLines(lines, new Laid(layout)).flatMap((line) => [...line, Segment.line()]);
         }
         // [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.
+        // line derives glyph by glyph from mode: a mask cell in password mode, else
+        // the glyph itself — or, for a glyph of zero cells, a stand-in of one cell.
+        // Every glyph then has a column of its own, so each cursor stop draws the
+        // cursor somewhere new. The render and the click hit-test both read it.
+        _shownAs(options) {
+            const mask = drawable(options, MASK_GLYPH, ASCII_MASK_GLYPH);
+            const newline = drawable(options, NEWLINE_GLYPH, ASCII_NEWLINE_GLYPH);
+            const zeroCell = drawable(options, ZERO_CELL_GLYPH, ASCII_ZERO_CELL_GLYPH);
+            return (g) => this._password ? mask
+                : cellLen(g) > 0 ? g
+                    : g === "\n" ? newline : zeroCell;
+        }
         _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));
+            return graphemes(text).map(this._shownAs(options)).join("");
         }
-        _renderSingleLine(options) {
-            const showPlaceholder = this.focused && this.value.length === 0 && this.placeholder.length > 0;
+        // The cells a stretch of `value` took in the last render.
+        _shownCells(text) {
+            return asCellCol(cellLen(this._shown(text, this._drawn.get())));
+        }
+        // The end of the glyphs of `text` whose cells, as a frame drawn under `drawn`
+        // shows them, lie wholly left of `col`, so a column inside a wide glyph
+        // lands before it.
+        _offsetAtShownCell(text, col, drawn) {
+            const shownAs = this._shownAs(drawn);
+            let at = 0;
+            let cells = 0;
+            for (const g of graphemes(text)) {
+                cells += cellLen(shownAs(g));
+                if (cells > col)
+                    break;
+                at += g.length;
+            }
+            return asCodePoint(at);
+        }
+        // The window single-line content shows at `drawn`: what it displays, how
+        // many cells wide, from which cell, and the cursor's cell in it. The render
+        // draws it and a click maps through it.
+        _singleLine(drawn) {
             // 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 shown = (text) => this._shown(text, drawn);
+            const rawDisplay = this._showsPlaceholder() ? this.placeholder : shown(this.value);
             const rawCellWidth = asCellCol(cellLen(rawDisplay));
-            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));
-            // Slide viewport (in cells) to keep cursor visible when content overflows.
-            const startCell = asCellCol(Math.max(0, Math.min(rawCellWidth - contentWidth, cursorCellCol - contentWidth + 1)));
+            const beforeCursor = shown(this.value.slice(0, this.cursorPosition));
+            const cursorCellCol = asCellCol(cellLen(beforeCursor));
+            // The cursor's glyph, or the one cell past the text's end.
+            const cursorCells = Math.max(1, cellLen(shown(this.value.slice(this.cursorPosition, nextGrapheme(this.value, this.cursorPosition)))));
+            const maxAvailable = asCellCol(Math.max(MIN_CONTENT_WIDTH, drawn.maxWidth - 2));
+            const contentWidth = asCellCol(Math.min(maxAvailable, singleLineExtent(rawCellWidth, cursorCellCol)));
+            // The window (in cells) starts where the most of the text before the
+            // cursor that fits beside the cursor's glyph begins: a glyph boundary, so
+            // a wide glyph is never cut, and the cursor's glyph always in view.
+            const startCell = asCellCol(cursorCellCol - cellLen(cellFitEnd(beforeCursor, asCellCol(contentWidth - cursorCells))));
+            return { rawDisplay, contentWidth, startCell, cursorCellCol };
+        }
+        _showsPlaceholder() {
+            return this.focused && this.value.length === 0 && this.placeholder.length > 0;
+        }
+        _renderSingleLine(options, drawn) {
+            const { rawDisplay, contentWidth, startCell, cursorCellCol } = this._singleLine(drawn);
             const [, afterStart] = splitText(rawDisplay, startCell);
-            // splitText snaps backward when startCell falls mid-wide-char, so afterStart
-            // may start 1 cell earlier than requested. actualStartCell is the real offset.
-            const actualStartCell = asCellCol(rawCellWidth - cellLen(afterStart));
-            this._singleLineViewportStart = actualStartCell;
             const [visible] = splitText(afterStart, contentWidth);
             const display = setCellSize(visible, contentWidth);
-            const cursorDisplayCellCol = asCellCol(cursorCellCol - actualStartCell);
+            const cursorDisplayCellCol = asCellCol(cursorCellCol - startCell);
             const bracketStyle = this.disabled
                 ? new Style(this.disabledInk)
                 : new Style(ink(this.theme, "foreground", "background"));
-            const contentStyle = showPlaceholder && !this.disabled
+            const contentStyle = this._showsPlaceholder() && !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) {
+            if (this.focused && !this.disabled) {
                 const [before, rest] = splitText(display, cursorDisplayCellCol);
                 const firstCh = rest.slice(0, nextGrapheme(rest, asCodePoint(0)));
                 const at = firstCh || " ";
                 const after = rest.slice(firstCh.length);
                 if (before.length > 0)
                     segments.push(new Segment(before, contentStyle));
-                segments.push(new Segment(at, cursorStyle));
+                segments.push(...this._caret(at, cursorStyle, contentStyle, options));
                 if (after.length > 0)
                     segments.push(new Segment(after, contentStyle));
             }
@@ -965,169 +1008,168 @@ let TextInput = (() => {
                 segments.push(new Segment(display, contentStyle));
             }
             segments.push(new Segment("]", bracketStyle));
-            return segments;
+            return { lines: [segments], layout: { drawn, kind: "line", value: this.value, startCell } };
         }
-        _renderMultiline(options) {
-            // [LAW:dataflow-not-control-flow] Decompose `value` into visual rows
-            // exactly once per render, cache the result, then drive both display
-            // *and* cursor projection from the same array. Vertical motion reads
-            // from the cache so Up/Down step through whatever the user actually
-            // sees, including soft-wrap continuations.
-            const visualRows = this._computeVisualRows(options.maxWidth);
-            this._visualRows = visualRows;
-            // Scroll window: keep `_scrollStart` (the viewport's top row) stable
-            // across renders, adjusting only when the cursor would leave the
-            // viewport. This is the textarea-conventional "viewport follows cursor
-            // when it has to" behavior — cursor moves freely *within* the visible
-            // rows; the window scrolls only at the edges. When `maxRows` is unset,
-            // render every row.
+        _renderMultiline(options, drawn) {
+            // [LAW:dataflow-not-control-flow] Decompose `value` into visual rows once,
+            // then drive both display and cursor projection from the same array.
+            const visualRows = this._rows(drawn);
             const total = visualRows.length;
-            const cursorRow = this._cursorVisualRow();
-            let scrollStart = 0;
-            let visibleCount = total;
-            if (this._maxRows !== undefined && total > this._maxRows) {
-                const maxStart = total - this._maxRows;
-                if (cursorRow < this._scrollStart) {
-                    this._scrollStart = cursorRow;
-                }
-                else if (cursorRow >= this._scrollStart + this._maxRows) {
-                    this._scrollStart = cursorRow - this._maxRows + 1;
-                }
-                this._scrollStart = Math.max(0, Math.min(maxStart, this._scrollStart));
-                scrollStart = this._scrollStart;
-                visibleCount = this._maxRows;
-            }
-            else {
-                this._scrollStart = 0;
-            }
-            // Pad with empty rows when the value is shorter than `minRows`.
-            let padRows = 0;
-            if (this._minRows !== undefined && total < this._minRows && this._maxRows === undefined) {
-                padRows = this._minRows - total;
-            }
+            const cursorRow = cursorRowIn(visualRows, this.cursorPosition);
+            const arrows = this._drawsArrows(total);
             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
-            // collides with the arrow. Only emitted in `"arrows"` mode; other modes
-            // leave the content area untouched and rely on the host to surface scroll
-            // state externally (e.g. Panel border accessory).
-            const scrollable = this._maxRows !== undefined && total > this._maxRows;
-            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(ink(this.theme, "text-primary", "background"));
-            const segments = [];
             const showCursor = this.focused && !this.disabled;
-            for (let i = 0; i < visibleCount; i++) {
-                const rowIdx = scrollStart + i;
+            // One visual row as drawn: its continuation marker, then its content, the
+            // caret on the cursor's row.
+            const rowAt = (rowIdx) => {
                 const row = visualRows[rowIdx];
-                if (i > 0)
-                    segments.push(new Segment("\n"));
+                // A row past the value's last is `minRows` padding: blank.
+                if (row === undefined)
+                    return [];
+                const line = [];
                 if (row.isContinuation) {
                     // An ASCII stand-in as wide as the marker, so the rows keep their geometry.
-                    segments.push(new Segment(drawable(options, this._continuationMarker, ">".padEnd(this._markerWidth)), markerStyle));
-                }
-                let indicator;
-                if (i === 0 && canScrollUp) {
-                    indicator = { ch: drawable(options, "▲", "^"), style: indicatorStyle };
-                }
-                else if (i === visibleCount - 1 && canScrollDown) {
-                    indicator = { ch: drawable(options, "▼", "v"), style: indicatorStyle };
+                    line.push(new Segment(drawable(options, this._continuationMarker, ">".padEnd(this._markerWidth)), markerStyle));
                 }
-                // When a continuation marker was emitted, the row's printable width is
-                // reduced by the marker width — the indicator column is still at
-                // `options.maxWidth - 1` in the panel's view, which is
-                // `options.maxWidth - markerWidth - 1` columns past the marker.
-                const rowPrintWidth = row.isContinuation
-                    ? asCellCol(Math.max(0, options.maxWidth - this._markerWidth))
-                    : asCellCol(options.maxWidth);
-                this._emitRowContent(segments, row, rowIdx === cursorRow && showCursor, contentStyle, cursorStyle, indicator, rowPrintWidth);
-            }
-            // Trailing empty rows for minRows padding (no cursor, no marker).
-            // Emit a whitespace segment of the full content width so Segment.splitLines
-            // does not drop the row — an empty segment before a newline would produce
-            // an invisible row that the renderer discards.
-            for (let i = 0; i < padRows; i++) {
-                segments.push(new Segment("\n"));
-                segments.push(new Segment(setCellSize("", asCellCol(options.maxWidth)), contentStyle));
-            }
-            return segments;
+                this._emitRowContent(line, options, row, rowIdx === cursorRow && showCursor, contentStyle, cursorStyle);
+                return line;
+            };
+            // The window is drawn at the width offered, or wider where the cursor's
+            // row draws past it: a caret past the end of a full row.
+            const offered = cellCount(options.maxWidth);
+            const width = Math.max(offered, Segment.getLineLength(rowAt(cursorRow)));
+            // Pad with empty rows when the value is shorter than `minRows`.
+            const padRows = this._minRows !== undefined && this._maxRows === undefined ? Math.max(0, this._minRows - total) : 0;
+            // [LAW:dataflow-not-control-flow] Only the rows a frame shows are drawn,
+            // so a frame costs the rows in view and not the value's length. Every row
+            // is padded to the width, so each has cells to stamp — a blank row
+            // included — and the stamp names its row of the content.
+            const owner = {};
+            const rowLines = {
+                layout: () => ({
+                    length: total + padRows,
+                    lines: (start, end) => Segment.anchorLines(Array.from({ length: end - start }, (_, i) => Segment.adjustLineLength(rowAt(start + i), width, contentStyle)), owner, start),
+                }),
+                measure: () => ({ minimum: width, maximum: width }),
+            };
+            // The viewport picks the window, at most `maxRows` tall whatever region the
+            // field is placed in, with the cursor's row followed.
+            const shown = Segment.splitLines(render(this._viewport.showingLines(rowLines, { start: cursorRow, end: cursorRow + 1 }), { ...options, maxWidth: width, height: this._maxRows === undefined ? undefined : { rows: this._maxRows, exact: false } }));
+            // The content row the window's first row shows: the offset this frame
+            // drew, read off what the viewport drew.
+            const offset = shownRow(shown, owner);
+            // The field is as wide as the widest row it shows, and never narrower than
+            // its least measure the offer allows, so a blank field has cells to click;
+            // a field with arrows is the whole offer, the arrows in its last cell. Read
+            // off the rows in view, so a frame never measures the whole value.
+            const widest = shown.reduce((w, _, i) => Math.max(w, Segment.getLineLength(rowAt(offset + i))), 0);
+            const fieldWidth = arrows ? width : Math.min(width, Math.max(widest, Math.min(offered, MIN_CONTENT_WIDTH + 2)));
+            // Scroll-direction arrows appear in the rightmost cell of the first/last
+            // visible row, *only* when scroll is actually possible in that direction.
+            // Only emitted in `"arrows"` mode; other modes leave the content area
+            // untouched and rely on the host to surface scroll state externally (e.g.
+            // Panel border accessory).
+            const indicatorStyle = this.indicatorStyleOverride ?? new Style(ink(this.theme, "text-primary", "background"));
+            const arrowOn = (i) => !arrows ? undefined
+                : i === 0 && offset > 0 ? drawable(options, "▲", "^")
+                    : i === shown.length - 1 && offset + shown.length < total ? drawable(options, "▼", "v")
+                        : undefined;
+            // The arrow's cells are reserved at the end of the offer, so a wide glyph
+            // never collides with it: the row is cut to the cells before it. The arrow
+            // keeps the place of the cell it covers, the viewport's included, so the
+            // wheel over it scrolls the field.
+            const withArrows = shown.map((line, i) => {
+                const arrow = arrowOn(i);
+                if (arrow === undefined)
+                    return Segment.adjustLineLength(line, fieldWidth, contentStyle);
+                const at = offered - cellLen(arrow);
+                const cell = indicatorStyle.withAnchor(Segment.anchorAt([line], at, 0));
+                return Segment.adjustLineLength([...Segment.adjustLineLength(line, at, contentStyle), new Segment(arrow, cell)], fieldWidth, contentStyle);
+            });
+            return { lines: withArrows, layout: { drawn, kind: "rows", rows: visualRows, offset } };
         }
-        _emitRowContent(out, row, cursorOnRow, contentStyle, cursorStyle, indicator, rowPrintWidth) {
-            const content = row.content;
-            // cursorCol is a code-unit offset into row.content; both cursorPosition
-            // and valueStart are CodePoint, so their difference lands on a code-point
-            // boundary within content and is safe for string slicing.
-            const cursorCol = cursorOnRow ? this.cursorPosition - row.valueStart : -1;
-            // Fast path: no indicator on this row. Let the wrapper pad to width.
-            if (indicator === undefined) {
-                if (!cursorOnRow) {
-                    if (content.length > 0)
-                        out.push(new Segment(content, contentStyle));
-                    return;
-                }
-                const before = content.slice(0, cursorCol);
-                const nextCp = nextGrapheme(content, asCodePoint(cursorCol));
-                const at = content.slice(cursorCol, nextCp) || " ";
-                const after = content.slice(nextCp);
-                if (before.length > 0)
-                    out.push(new Segment(before, contentStyle));
-                out.push(new Segment(at, cursorStyle));
-                if (after.length > 0)
-                    out.push(new Segment(after, contentStyle));
-                return;
-            }
-            // Indicator path: reserve the indicator's cells at the end of the row so
-            // wide characters never collide with it. Content fills [0, contentCellWidth)
-            // cells; the indicator occupies the remaining cells.
-            const indicatorWidth = asCellCol(cellLen(indicator.ch));
-            const contentCellWidth = asCellCol(Math.max(0, rowPrintWidth - indicatorWidth));
-            // Clip row content to the non-indicator region and pad to exact cell width.
-            const [visibleContent] = splitText(content, contentCellWidth);
-            const paddedContent = setCellSize(visibleContent, contentCellWidth);
-            // Map the code-unit cursor offset to a cell column within this row.
-            const cursorCellColInRow = cursorOnRow && cursorCol >= 0
-                ? cellLen(content.slice(0, cursorCol))
-                : -1;
-            if (cursorCellColInRow >= 0 && cursorCellColInRow < contentCellWidth) {
-                const [before, rest] = splitText(paddedContent, asCellCol(cursorCellColInRow));
+        // The caret's cell for the frame `options` draws: the blink restarted at the
+        // last touch, sampled at the frame's time (`shownAt`, so under reduced
+        // motion it holds lit). It runs away from the restart in either direction
+        // of time, so a timeline played backwards also finds it lit just after a
+        // key. Lit, the cell is the cursor's; dark, it is drawn as the
+        // text around it, since the cursor is a colour pair and no attribute hides
+        // it. The cell says when it next flips, which is when a host draws again.
+        _caret(at, cursorStyle, contentStyle, options) {
+            const { frame } = options;
+            const blink = (time) => {
+                const shown = shownAt(Timeline.run(Timeline.play(this._blinkFrom, time < this._blinkFrom ? -1 : 1), CARET_BLINK), time, options);
+                return { lit: shown.value, hold: holdOf(shown, time) };
+            };
+            const { lit, hold } = frame === undefined ? CARET_UNTIMED : blink(frame.time);
+            return stampFrame([new Segment(at, lit ? cursorStyle : contentStyle)], hold);
+        }
+        // Whether `rows` visual rows draw a scroll arrow in the last cell of a row.
+        _drawsArrows(rows) {
+            return this._scrollIndicator === "arrows" && this._maxRows !== undefined && rows > this._maxRows;
+        }
+        _emitRowContent(out, options, row, cursorOnRow, contentStyle, cursorStyle) {
+            const display = this._shown(row.content, options);
+            // cursorPosition and valueStart are both cluster boundaries, so the
+            // cursor's offset into the row is one too, and the shown cells before it
+            // are its column.
+            if (cursorOnRow) {
+                const cursorCell = cellLen(this._shown(row.content.slice(0, this.cursorPosition - row.valueStart), options));
+                const [before, rest] = splitText(display, asCellCol(cursorCell));
                 const firstCh = rest.slice(0, nextGrapheme(rest, asCodePoint(0)));
                 const at = firstCh || " ";
                 const after = rest.slice(firstCh.length);
                 if (before.length > 0)
                     out.push(new Segment(before, contentStyle));
-                out.push(new Segment(at, cursorStyle));
+                out.push(...this._caret(at, cursorStyle, contentStyle, options));
                 if (after.length > 0)
                     out.push(new Segment(after, contentStyle));
             }
-            else {
-                if (paddedContent.length > 0)
-                    out.push(new Segment(paddedContent, contentStyle));
+            else if (display.length > 0) {
+                out.push(new Segment(display, contentStyle));
             }
-            out.push(new Segment(indicator.ch, indicator.style));
         }
-        _computeVisualRows(maxWidth) {
-            const firstWidth = asCellCol(Math.max(1, maxWidth));
+        // The visual rows `value` lays out into at `drawn`. A width that bounds
+        // nothing wraps nothing, so before any frame they are the logical lines.
+        _rows(drawn) {
+            const wrap = Number.isFinite(drawn.maxWidth) ? this._wrap : undefined;
+            const firstWidth = asCellCol(Math.max(1, drawn.maxWidth));
             const continuationWidth = asCellCol(Math.max(1, firstWidth - this._markerWidth));
+            const shownAs = this._shownAs(drawn);
             const rows = [];
             const lines = this.value.split("\n");
             let pos = 0;
             for (let li = 0; li < lines.length; li++) {
                 const line = lines[li];
-                if (this._wrap !== undefined) {
-                    const wrapRows = this._wrap(line, { firstWidth, continuationWidth });
+                if (wrap !== undefined) {
+                    // `lineOffset[s]` is where offset `s` of the line as shown falls in
+                    // `line`: a glyph shown as itself maps code unit for code unit, and
+                    // every offset inside a stand-in falls at the start of its glyph, so
+                    // a row the strategy ends there draws the glyph on the next row.
+                    let shownLine = "";
+                    const lineOffset = [];
+                    let at = 0;
+                    for (const g of graphemes(line)) {
+                        const s = shownAs(g);
+                        for (let i = 0; i < s.length; i++)
+                            lineOffset.push(s === g ? at + i : at);
+                        shownLine += s;
+                        at += g.length;
+                    }
+                    lineOffset.push(at);
+                    const wrapRows = wrap(shownLine, { firstWidth, continuationWidth });
                     if (wrapRows.length === 0) {
                         rows.push({ content: "", valueStart: asCodePoint(pos), isContinuation: false });
                     }
                     else {
                         for (let ri = 0; ri < wrapRows.length; ri++) {
                             const wr = wrapRows[ri];
+                            const start = lineOffset[wr.start];
                             rows.push({
-                                content: wr.content,
-                                valueStart: asCodePoint(pos + wr.start),
+                                content: line.slice(start, lineOffset[wr.end]),
+                                valueStart: asCodePoint(pos + start),
                                 isContinuation: ri > 0,
                             });
                         }
@@ -1140,34 +1182,49 @@ let TextInput = (() => {
             }
             return rows;
         }
-        measure(_options) {
+        measure(options) {
             const minimum = MIN_CONTENT_WIDTH + 2;
-            const maximum = Math.max(minimum, Math.max(cellLen(this.value), cellLen(this.placeholder)) + 2);
-            return { minimum, maximum };
+            const shownCells = (line) => cellLen(this._shown(line, options));
+            // The widest the value draws, its cursor at the end of a line included. A
+            // multi-line value draws each logical line on rows of its own, with no
+            // brackets and no placeholder, and a scroll arrow's cell past each line
+            // when its lines outnumber the rows.
+            if (this._multiline) {
+                const lines = this.value.split("\n");
+                const arrowCells = this._drawsArrows(lines.length) ? 1 : 0;
+                return { minimum, maximum: lines.reduce((w, line) => Math.max(w, shownCells(line) + 1 + arrowCells), minimum) };
+            }
+            // A single-line value draws its breaks as glyphs between brackets, and its
+            // placeholder over an empty value.
+            const valueCells = shownCells(this.value);
+            return { minimum, maximum: singleLineExtent(this.value === "" ? cellLen(this.placeholder) : valueCells, valueCells) + 2 };
         }
         /**
          * `[X/Y]` scroll-position string when there's actually something to
          * scroll, else `undefined`. X is the cursor's 1-indexed visual row; Y is
-         * the total visual row count. Reads cached state populated by the most
-         * recent `render()` — call from a `Panel.bottomRightAccessory` thunk so
-         * it evaluates after content has been rendered for the current frame.
+         * the total visual row count. Hand it a frame this field is drawn in — a
+         * `Panel`'s `bottomRightAccessory` function is handed its body's:
+         *
+         *   bottomRightAccessory: (body) => input.scrollIndicatorText(body)
+         *
+         * It counts the rows that frame laid out, read off the field's own cells, so
+         * it is right on the frame it labels however deep the field sits in it.
          *
          * Returns `undefined` when:
          *   - `scrollIndicator` is not `"indices"`, or
          *   - `maxRows` is unset, or total visual rows ≤ maxRows (nothing to
          *     scroll), or
-         *   - no render has happened yet (cache is empty).
+         *   - `frame` shows none of the field's rows (a width too narrow to draw it).
          */
-        get scrollIndicatorText() {
+        scrollIndicatorText(frame) {
             if (this._scrollIndicator !== "indices")
                 return undefined;
             if (this._maxRows === undefined)
                 return undefined;
-            const rows = this._visualRows;
-            if (rows === null || rows.length <= this._maxRows)
+            const layout = layoutIn(frame, this);
+            if (layout?.kind !== "rows" || layout.rows.length <= this._maxRows)
                 return undefined;
-            const cursorRow1 = this._cursorVisualRow() + 1;
-            return `[${cursorRow1}/${rows.length}]`;
+            return `[${cursorRowIn(layout.rows, this.cursorPosition) + 1}/${layout.rows.length}]`;
         }
     };
 })();