@promptctl/rich-js 0.24.1 → 0.25.0

package/dist/widgets/text-input.js

@@ -96,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, cellFitEnd, cellStepFrom, 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
@@ -111,22 +170,17 @@ 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 [{ 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({ start: pos, end });
-        pos = end;
-        isFirst = false;
+        rows.push(row);
     }
     return rows;
 };
@@ -149,12 +203,12 @@ 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");
@@ -165,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 = [];
@@ -174,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 = [];
@@ -187,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;
@@ -211,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];
@@ -241,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);
@@ -277,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
@@ -292,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);
@@ -313,44 +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);
-        // How the last render could draw, so the hit-test and vertical motion
-        // measure `value` as it was shown.
-        _drawn = { asciiOnly: 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);
@@ -368,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;
@@ -378,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) ───
@@ -552,98 +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 + this._offsetAtShownCell(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);
-                this.cursorPosition = this._offsetAtShownCell(this.value, relX);
+                // 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 ?? this._shownCells(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 + this._offsetAtShownCell(prevLineContent, col));
-            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 ?? this._shownCells(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 + this._offsetAtShownCell(nextLineContent, col));
-            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
@@ -651,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 = this._shownCells(target.content);
             const capCells = nextIsContinuation
                 ? asCellCol(Math.max(0, contentCellWidth - 1))
                 : contentCellWidth;
-            return this._offsetAtShownCell(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 this._shownCells(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() {
@@ -744,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() {
@@ -752,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
@@ -848,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;
             }
@@ -859,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 ───────────────────────────────────────────────────
@@ -898,7 +902,7 @@ let TextInput = (() => {
                     toInsert +
                     this.value.slice(this.cursorPosition);
             this.cursorPosition = end;
-            this._preferredColumn = null;
+            this._preferredColumn.set(null);
             this.emitChange();
         }
         // --- Rendering ---
@@ -910,10 +914,11 @@ let TextInput = (() => {
                 : this.contentStyleOverride ?? super.ground;
         }
         draw(options) {
-            this._drawn = { asciiOnly: options.asciiOnly ?? false };
-            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 glyph by glyph from mode: a mask cell in password mode, else
@@ -933,12 +938,13 @@ let TextInput = (() => {
         }
         // The cells a stretch of `value` took in the last render.
         _shownCells(text) {
-            return asCellCol(cellLen(this._shown(text, this._drawn)));
+            return asCellCol(cellLen(this._shown(text, this._drawn.get())));
         }
-        // The end of the glyphs of `text` whose cells in the last render lie wholly
-        // left of `col`, so a column inside a wide glyph lands before it.
-        _offsetAtShownCell(text, col) {
-            const shownAs = this._shownAs(this._drawn);
+        // 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)) {
@@ -949,24 +955,32 @@ let TextInput = (() => {
             }
             return asCodePoint(at);
         }
-        _renderSingleLine(options) {
-            const showPlaceholder = this.focused && this.value.length === 0 && this.placeholder.length > 0;
+        // 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.
-            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 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, options.maxWidth - 2));
+            const maxAvailable = asCellCol(Math.max(MIN_CONTENT_WIDTH, drawn.maxWidth - 2));
             const contentWidth = asCellCol(Math.min(maxAvailable, singleLineExtent(rawCellWidth, cursorCellCol)));
-            // The viewport (in cells) starts where the most of the text before the
+            // 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))));
-            this._singleLineViewportStart = startCell;
+            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);
             const [visible] = splitText(afterStart, contentWidth);
             const display = setCellSize(visible, contentWidth);
@@ -974,7 +988,7 @@ let TextInput = (() => {
             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"));
@@ -986,7 +1000,7 @@ let TextInput = (() => {
                 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));
             }
@@ -994,144 +1008,142 @@ 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);
-            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 arrows = this._drawsArrows(total);
-            const canScrollUp = arrows && this._scrollStart > 0;
-            const canScrollDown = arrows && 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 };
+                    line.push(new Segment(drawable(options, this._continuationMarker, ">".padEnd(this._markerWidth)), markerStyle));
                 }
-                else if (i === visibleCount - 1 && canScrollDown) {
-                    indicator = { ch: drawable(options, "▼", "v"), style: indicatorStyle };
-                }
-                // 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, options, 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 } };
+        }
+        // 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, indicator, rowPrintWidth) {
-            const shown = this._shown(row.content, options);
-            // An indicator's cells are reserved at the end of the row, so wide glyphs
-            // never collide with it: the content is cut to the cells before it and
-            // padded out to them. With no indicator the wrapper pads the row.
-            const contentCellWidth = indicator === undefined
-                ? Infinity
-                : Math.max(0, rowPrintWidth - cellLen(indicator.ch));
-            const display = indicator === undefined
-                ? shown
-                : setCellSize(splitText(shown, asCellCol(contentCellWidth))[0], asCellCol(contentCellWidth));
+        _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.
-            const cursorCell = cursorOnRow
-                ? cellLen(this._shown(row.content.slice(0, this.cursorPosition - row.valueStart), options))
-                : -1;
-            if (cursorCell >= 0 && cursorCell < contentCellWidth) {
+            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 (display.length > 0) {
                 out.push(new Segment(display, contentStyle));
             }
-            if (indicator !== undefined)
-                out.push(new Segment(indicator.ch, indicator.style));
         }
-        _computeVisualRows(options) {
-            const firstWidth = asCellCol(Math.max(1, options.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(options);
+            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) {
+                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
@@ -1147,7 +1159,7 @@ let TextInput = (() => {
                         at += g.length;
                     }
                     lineOffset.push(at);
-                    const wrapRows = this._wrap(shownLine, { firstWidth, continuationWidth });
+                    const wrapRows = wrap(shownLine, { firstWidth, continuationWidth });
                     if (wrapRows.length === 0) {
                         rows.push({ content: "", valueStart: asCodePoint(pos), isContinuation: false });
                     }
@@ -1190,27 +1202,29 @@ let TextInput = (() => {
         /**
          * `[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;
-         * `BorderAccessory` names the widths where it has not.
+         * 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}]`;
         }
     };
 })();