@promptctl/rich-js 0.24.0 → 0.24.1

package/dist/renderables/tree.js

@@ -5,7 +5,7 @@ import { Segment } from "../core/segment.js";
 import { cellFit, cellLen, asCellCol } from "../core/cells.js";
 import { Style, NULL_STYLE } from "../core/style.js";
 import { embed } from "./embed.js";
-import { drawable, getStyle, stackedHeight, withBoundedWidth, withCellWidth } from "../core/protocol.js";
+import { drawable, getStyle, render, stackedHeight, withBoundedWidth, withCellWidth } from "../core/protocol.js";
 import { Measurement } from "../core/measure.js";
 /** Every glyph of every set is this wide, so a row's guides are as wide however they are drawn. */
 const GUIDE_CELLS = 4;
@@ -62,6 +62,12 @@ export class Tree {
             yield* this._renderRow(options, row);
         }
     }
+    // Every label `render` draws, from the same walk. Not `children`, which is
+    // the subtrees, as Rich names them.
+    *contents() {
+        for (const row of this._walk())
+            yield row.label;
+    }
     /**
      * The rows `render` and `measure` both read, entered in exactly one place so
      * the two cannot start the walk differently. A hidden root takes its own row
@@ -115,9 +121,9 @@ export class Tree {
      * [LAW:single-enforcer] Tree also owns its row boundaries here rather than
      * depending on label renderables to invent trailing newlines: the label's
      * output is cut into lines and every line ends where Tree ends it. A label
-     * that emits nothing still holds its row, and one that ends in a newline of
-     * its own gets the blank row that line is, as in Rich — padded to the label's
-     * width when the label is justified.
+     * that emits nothing — one left no column, say — has no row, and one
+     * that ends in a newline of its own gets the blank row that line is, as in
+     * Rich — padded to the label's width when the label is justified.
      *
      * The node's style sits under the label's own, as Rich's `Styled` puts it, so
      * markup in the label still wins; its background alone reaches under the
@@ -140,9 +146,7 @@ export class Tree {
         // guides were fitted into. No highlighter: a label is drawn plain, as
         // Rich's `Tree` hands its labels `highlight=False`.
         const labelOptions = { ...options, highlight: false, maxWidth: width, height: stackedHeight(options.height) };
-        const lines = Segment.splitLines(Segment.applyStyle(Segment.cropLines(row.label.render(labelOptions), width), style));
-        if (lines.length === 0)
-            lines.push([]);
+        const lines = Segment.splitLines(Segment.applyStyle(Segment.cropLines(render(row.label, labelOptions), width), style));
         for (let i = 0; i < lines.length; i++) {
             let left = options.maxWidth;
             for (let g = 0; g < row.guides.length; g++) {

package/dist/renderables/viewport.d.ts

@@ -19,9 +19,9 @@
  * against exists before a render: the rows come from the budget the render is
  * handed, and the content's length from rendering it at the width it is handed.
  * So `scrollTo`, `scrollBy` and `ensureVisible` do not move anything when they
- * are called. Each queues a move, and the next render resolves the queue in
- * call order, clamping after every move, against the rows and length that
- * render found. Calling an operation before the first render, or three of them
+ * are called. Each queues a move, and the next render that draws the content
+ * resolves the queue in call order, clamping after every move, against the
+ * rows and length that render found. Calling an operation before the first render, or three of them
  * between two renders, is the same code path as calling one.
  *
  * Every cell of its rows, gutter included, is stamped as its own
@@ -33,7 +33,7 @@
  */
 import { Segment } from "../core/segment.js";
 import type { Style } from "../core/style.js";
-import type { Measurable, Renderable, RenderOptions, Scrollable } from "../core/protocol.js";
+import type { Composite, Measurable, Renderable, RenderOptions, Scrollable } from "../core/protocol.js";
 /** How one part of a scrollbar draws each row it covers. */
 export interface ScrollbarPart {
     readonly glyph: string;
@@ -60,7 +60,7 @@ export interface ViewportOptions {
     /** A scrollbar down the right edge. Absent, the content has the full width. */
     scrollbar?: Scrollbar;
 }
-export declare class Viewport implements Renderable, Measurable, Scrollable {
+export declare class Viewport implements Renderable, Measurable, Scrollable, Composite {
     /**
      * What the viewport shows. Replace it to show new content from the same
      * scroll position — a view rebuilt every frame keeps one `Viewport`.
@@ -113,7 +113,15 @@ export declare class Viewport implements Renderable, Measurable, Scrollable {
     contentWidth(width: number): number;
     /** The cells the scrollbar's gutter takes beside the content. */
     get gutter(): number;
+    contents(): Iterable<Renderable>;
     render(rawOptions: RenderOptions): Iterable<Segment>;
+    /**
+     * What a render that drew the content found, made the viewport's: `extent`
+     * is the rows and length the next move is clamped against, a followed range
+     * that was in view is kept in view if the rows changed, and the queued moves
+     * resolve into the offset this returns.
+     */
+    private commit;
     /**
      * [LAW:one-source-of-truth] Where the queued moves leave the offset against
      * `extent`: what a render commits, and what `canScrollBy` asks from.

package/dist/renderables/viewport.js

@@ -19,9 +19,9 @@
  * against exists before a render: the rows come from the budget the render is
  * handed, and the content's length from rendering it at the width it is handed.
  * So `scrollTo`, `scrollBy` and `ensureVisible` do not move anything when they
- * are called. Each queues a move, and the next render resolves the queue in
- * call order, clamping after every move, against the rows and length that
- * render found. Calling an operation before the first render, or three of them
+ * are called. Each queues a move, and the next render that draws the content
+ * resolves the queue in call order, clamping after every move, against the
+ * rows and length that render found. Calling an operation before the first render, or three of them
  * between two renders, is the same code path as calling one.
  *
  * Every cell of its rows, gutter included, is stamped as its own
@@ -35,7 +35,8 @@ import { Segment } from "../core/segment.js";
 import { Measurement } from "../core/measure.js";
 import { cellCount, cellLen } from "../core/cells.js";
 import { NULL_STYLE } from "../core/style.js";
-import { drawable, fitHeight, getStyle, regionRows, withBoundedWidth, withCellWidth, } from "../core/protocol.js";
+import { drawable, drawsNothing, fitHeight, getStyle, regionRows, withBoundedWidth, withCellWidth, } from "../core/protocol.js";
+import { render } from "../core/protocol.js";
 /** A heavy line for the thumb on a light line for the track. */
 export const SCROLLBAR = {
     thumb: { glyph: "┃", style: "scrollbar.thumb" },
@@ -125,26 +126,27 @@ export class Viewport {
     get gutter() {
         return gutterWidth(this.scrollbar);
     }
+    *contents() {
+        yield this.content;
+    }
     *render(rawOptions) {
         const { height, ...options } = withBoundedWidth(rawOptions, this);
         const gutter = this.gutter;
         const contentWidth = this.contentWidth(options.maxWidth);
-        const lines = Segment.splitLines(this.content.render({ ...options, maxWidth: contentWidth }));
-        const extent = { rows: viewRows(height, this.rows, lines.length), lines: lines.length };
-        const followed = this._followed;
-        const wasShown = followed.start >= this._offset && followed.end <= this._offset + this._extent.rows;
-        this._extent = extent;
-        if (!Number.isNaN(followed.rows) && followed.rows !== extent.rows && wasShown) {
-            this.ensureVisible(followed.start, followed.end);
-        }
-        if (!Number.isNaN(followed.start))
-            this._followed = { ...followed, rows: extent.rows };
-        this._offset = this.resolve(extent);
-        this._moves = [];
-        const shown = fitHeight(lines.slice(this._offset, this._offset + extent.rows), { rows: extent.rows, exact: true });
-        // [LAW:no-ambient-temporal-coupling] The thumb is drawn from the offset
-        // this render just resolved, not from `offset` as it stood before it.
-        const thumb = thumbRows(extent, this._offset);
+        const lines = Segment.splitLines(render(this.content, { ...options, maxWidth: contentWidth }));
+        // [LAW:no-ambient-temporal-coupling] Content handed no column is held, not
+        // drawn, so this render learns its budget but not the content's length. It
+        // commits nothing: the offset, the followed range and the queued moves wait
+        // for a render that draws, and this one draws the scrollbar against the
+        // length the last one found.
+        const held = drawsNothing({ maxWidth: contentWidth });
+        const length = held ? this._extent.lines : lines.length;
+        const extent = { rows: viewRows(height, this.rows, length), lines: length };
+        const offset = held ? clampOffset(this._offset, extent) : this.commit(extent);
+        const shown = fitHeight(lines.slice(offset, offset + extent.rows), { rows: extent.rows, exact: true });
+        // The thumb is drawn from the offset this render resolved, not from
+        // `offset` as it stood before it.
+        const thumb = thumbRows(extent, offset);
         // The content's cells and the gutter's drawn cells sum to the offer: a
         // gutter wider than the whole offer is drawn cropped to it.
         const drawn = Math.min(gutter, options.maxWidth);
@@ -168,6 +170,25 @@ export class Viewport {
             yield Segment.line();
         }
     }
+    /**
+     * What a render that drew the content found, made the viewport's: `extent`
+     * is the rows and length the next move is clamped against, a followed range
+     * that was in view is kept in view if the rows changed, and the queued moves
+     * resolve into the offset this returns.
+     */
+    commit(extent) {
+        const followed = this._followed;
+        const wasShown = followed.start >= this._offset && followed.end <= this._offset + this._extent.rows;
+        this._extent = extent;
+        if (!Number.isNaN(followed.rows) && followed.rows !== extent.rows && wasShown) {
+            this.ensureVisible(followed.start, followed.end);
+        }
+        if (!Number.isNaN(followed.start))
+            this._followed = { ...followed, rows: extent.rows };
+        this._offset = this.resolve(extent);
+        this._moves = [];
+        return this._offset;
+    }
     /**
      * [LAW:one-source-of-truth] Where the queued moves leave the offset against
      * `extent`: what a render commits, and what `canScrollBy` asks from.

package/dist/template-bindings/animation-funcs.js

@@ -27,7 +27,7 @@
  * colour — is parsed in `pairs`, once. [LAW:types-are-the-program]
  */
 import { beat } from "../core/easing.js";
-import { FrameSequence } from "../renderables/frames.js";
+import { FrameSequence, frameAt } from "../renderables/frames.js";
 import { asColor } from "./color-funcs.js";
 import { asFragment } from "./helpers.js";
 /**
@@ -64,7 +64,7 @@ export function animationFuncs(frameTime) {
     const framesFunc = {
         fn: ((...tail) => {
             const frames = pairs("frame", tail, asFragment).map(({ seconds, value }) => ({ seconds, text: value }));
-            return new FrameSequence(frames).text(frameTime());
+            return frameAt(new FrameSequence(frames), frameTime());
         }),
         argTypes: ["float", "liftable"],
         arity: { kind: "alternating", minimum: 2 },

package/dist/template-bindings/index.js

@@ -40,6 +40,7 @@ import { createEngine } from "@promptctl/go-template-js";
 import { RichText } from "../core/text.js";
 import { Style } from "../core/style.js";
 import { Segment } from "../core/segment.js";
+import { render } from "../core/protocol.js";
 import { richTextStyleFuncs } from "./style-funcs.js";
 import { colorFuncs } from "./color-funcs.js";
 export { paletteFuncs } from "./palette-funcs.js";
@@ -131,7 +132,7 @@ export function renderTemplate(engine, source, scope = {}, options) {
     catch (e) {
         return [new Segment(errorLine(e, maxWidth), safeErrorStyle(errorStyle))];
     }
-    return Array.from(text.render({ isTerminal: true, ...renderOptions, maxWidth }));
+    return Array.from(render(text, { isTerminal: true, ...renderOptions, maxWidth }));
 }
 /**
  * A caught error as the one line `renderTemplate` promises. The summary is the

package/dist/themes/ramp.d.ts

@@ -20,12 +20,14 @@
  * theme colors passes through perceptually even steps rather than the muddy
  * midpoints of an sRGB blend.
  *
- * [LAW:one-way-deps] Imports `core/color`, `core/easing` and `core/oklch`
- * only; nothing here knows what a palette is. Resolving stop *names* is the template binding's
+ * [LAW:one-way-deps] Imports `core/color`, `core/easing`, `core/oklch`,
+ * and for `over`, `core/animation` and `core/tween`; nothing here knows
+ * what a palette is. Resolving stop *names* is the template binding's
  * job (`paletteFuncs`), which hands this module resolved colors.
  */
+import { Animation } from "../core/animation.js";
 import type { ColorRgba } from "../core/color.js";
-import type { Ease } from "../core/easing.js";
+import { type Ease } from "../core/easing.js";
 /** One stop: the color the ramp is exactly `color` at position `at`. */
 export interface ColorStop {
     readonly at: number;
@@ -67,4 +69,17 @@ export declare class ColorRamp {
      * where it does: a ramp never paints outside its stops.
      */
     at(value: number): ColorRgba;
+    /**
+     * This ramp read over time: its span of positions, from the first stop's
+     * to the last's, crossed at a steady rate in `seconds` and held at the last
+     * stop from then on, each colour along the way the ramp's own. A colour
+     * tween is a two-stop ramp over its seconds — the ramp's ease shaping the
+     * move, so `new ColorRamp(ease, [{ at: 0, color: a }, { at: 1, color: b
+     * }]).over(seconds)` is `a` eased to `b` — and a ramp of more stops over
+     * time is a sweep through all of them. [LAW:one-source-of-truth] The
+     * blending is `at`'s; what time adds is `tween`'s (`core/tween.ts`), so a
+     * host sampling once a second or sixty times reads the stop colours byte
+     * for byte where `at` paints them.
+     */
+    over(seconds: number): Animation<ColorRgba>;
 }

package/dist/themes/ramp.js

@@ -20,11 +20,15 @@
  * theme colors passes through perceptually even steps rather than the muddy
  * midpoints of an sRGB blend.
  *
- * [LAW:one-way-deps] Imports `core/color`, `core/easing` and `core/oklch`
- * only; nothing here knows what a palette is. Resolving stop *names* is the template binding's
+ * [LAW:one-way-deps] Imports `core/color`, `core/easing`, `core/oklch`,
+ * and for `over`, `core/animation` and `core/tween`; nothing here knows
+ * what a palette is. Resolving stop *names* is the template binding's
  * job (`paletteFuncs`), which hands this module resolved colors.
  */
+import { Animation } from "../core/animation.js";
+import { EASES } from "../core/easing.js";
 import { Oklch } from "../core/oklch.js";
+import { tween } from "../core/tween.js";
 /**
  * An immutable ramp over stops sorted by position.
  *
@@ -100,4 +104,21 @@ export class ColorRamp {
             return to.color;
         return Oklch.fromRgba(from.color).mix(Oklch.fromRgba(to.color), t).toRgba();
     }
+    /**
+     * This ramp read over time: its span of positions, from the first stop's
+     * to the last's, crossed at a steady rate in `seconds` and held at the last
+     * stop from then on, each colour along the way the ramp's own. A colour
+     * tween is a two-stop ramp over its seconds — the ramp's ease shaping the
+     * move, so `new ColorRamp(ease, [{ at: 0, color: a }, { at: 1, color: b
+     * }]).over(seconds)` is `a` eased to `b` — and a ramp of more stops over
+     * time is a sweep through all of them. [LAW:one-source-of-truth] The
+     * blending is `at`'s; what time adds is `tween`'s (`core/tween.ts`), so a
+     * host sampling once a second or sixty times reads the stop colours byte
+     * for byte where `at` paints them.
+     */
+    over(seconds) {
+        const first = this.stops[0].at;
+        const last = this.stops[this.stops.length - 1].at;
+        return Animation.map(tween(first, last, { seconds, ease: EASES.linear }), (value) => this.at(value));
+    }
 }

package/dist/widgets/focus-manager.d.ts

@@ -6,18 +6,23 @@
  */
 import type { InteractiveWidget, FocusManager, KeyEvent } from "./types.js";
 import type { Unsubscribe } from "../core/subscription.js";
+/** What focus follows: the frame a `WidgetApp` just painted. */
+export interface FocusView {
+    /** Every widget the view holds, in document order, whether or not it has a cell on screen. */
+    present(): readonly InteractiveWidget[];
+    /** The widgets with a cell on the frame on screen, in document order. */
+    onScreen(): readonly InteractiveWidget[];
+}
 export declare class DefaultFocusManager implements FocusManager {
-    private readonly onScreen;
+    private readonly view;
     accessor currentWidget: InteractiveWidget | null;
     private readonly changeHandlers;
     /**
-     * `onScreen` is the widgets on the frame on screen, in document order.
-     *
-     * [LAW:one-source-of-truth] It is asked every time rather than kept: a list
-     * of the widgets held here would be a second picture of the frame, and
-     * wrong from the next paint.
+     * [LAW:one-source-of-truth] The view is asked every time rather than kept:
+     * a list of the widgets held here would be a second picture of the frame,
+     * and wrong from the next paint.
      */
-    constructor(onScreen: () => readonly InteractiveWidget[]);
+    constructor(view: FocusView);
     get current(): InteractiveWidget | null;
     get widgets(): readonly InteractiveWidget[];
     next(): void;
@@ -25,20 +30,22 @@ export declare class DefaultFocusManager implements FocusManager {
     focus(widget: InteractiveWidget): void;
     /**
      * Put focus where the frame just painted lets it rest: it stays on a widget
-     * the view drew (`drawn`) that can take it, and otherwise moves to the first
-     * one on screen that can, or to none.
+     * the view holds (`present`) that can take it, and otherwise moves to the
+     * first one on screen that can, or to none.
      *
-     * Drawn, not on screen: a widget cropped for the moment — the terminal
-     * shrank, a viewport scrolled, an overlay covers it — is still in the view,
-     * and keeps focus and whatever focus holds, like a half-typed filter.
+     * In the view, not on screen: a widget cropped for the moment — the
+     * terminal shrank, a viewport scrolled, an overlay covers it, its container
+     * handed it no column — is still in the view, and keeps focus and whatever
+     * focus holds, like a half-typed filter.
      *
      * [LAW:single-enforcer] The one place focus follows the frame — onto the
-     * first widget when the app starts, off a widget that stopped being drawn
+     * first widget when the app starts, off a widget that left the view
      * or was disabled.
      */
-    settle(drawn: readonly InteractiveWidget[]): void;
+    settle(): void;
     onChange(handler: (current: InteractiveWidget | null) => void): Unsubscribe;
     handleKey(event: KeyEvent): void;
+    private step;
     private clear;
     private setFocus;
     private emitChange;

package/dist/widgets/focus-manager.js

@@ -69,42 +69,30 @@ let DefaultFocusManager = (() => {
             __esDecorate(this, null, _setFocus_decorators, { kind: "method", name: "setFocus", static: false, private: false, access: { has: obj => "setFocus" in obj, get: obj => obj.setFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        onScreen = __runInitializers(this, _instanceExtraInitializers);
+        view = __runInitializers(this, _instanceExtraInitializers);
         #currentWidget_accessor_storage = __runInitializers(this, _currentWidget_initializers, null);
         get currentWidget() { return this.#currentWidget_accessor_storage; }
         set currentWidget(value) { this.#currentWidget_accessor_storage = value; }
         changeHandlers = (__runInitializers(this, _currentWidget_extraInitializers), new Set());
         /**
-         * `onScreen` is the widgets on the frame on screen, in document order.
-         *
-         * [LAW:one-source-of-truth] It is asked every time rather than kept: a list
-         * of the widgets held here would be a second picture of the frame, and
-         * wrong from the next paint.
+         * [LAW:one-source-of-truth] The view is asked every time rather than kept:
+         * a list of the widgets held here would be a second picture of the frame,
+         * and wrong from the next paint.
          */
-        constructor(onScreen) {
-            this.onScreen = onScreen;
+        constructor(view) {
+            this.view = view;
         }
         get current() {
             return this.currentWidget;
         }
         get widgets() {
-            return this.onScreen().filter(takesFocus);
+            return this.view.onScreen().filter(takesFocus);
         }
         next() {
-            const focusable = this.widgets;
-            if (focusable.length === 0)
-                return;
-            const currentIdx = this.currentWidget ? focusable.indexOf(this.currentWidget) : -1;
-            const nextIdx = (currentIdx + 1) % focusable.length;
-            this.setFocus(focusable[nextIdx]);
+            this.step(this.view.present());
         }
         prev() {
-            const focusable = this.widgets;
-            if (focusable.length === 0)
-                return;
-            const currentIdx = this.currentWidget ? focusable.indexOf(this.currentWidget) : -1;
-            const prevIdx = currentIdx <= 0 ? focusable.length - 1 : currentIdx - 1;
-            this.setFocus(focusable[prevIdx]);
+            this.step([...this.view.present()].reverse());
         }
         // A widget not on screen yet can take focus: an app that is about to show
         // it focuses it first, and the frame that shows it keeps it (`settle`).
@@ -115,20 +103,21 @@ let DefaultFocusManager = (() => {
         }
         /**
          * Put focus where the frame just painted lets it rest: it stays on a widget
-         * the view drew (`drawn`) that can take it, and otherwise moves to the first
-         * one on screen that can, or to none.
+         * the view holds (`present`) that can take it, and otherwise moves to the
+         * first one on screen that can, or to none.
          *
-         * Drawn, not on screen: a widget cropped for the moment — the terminal
-         * shrank, a viewport scrolled, an overlay covers it — is still in the view,
-         * and keeps focus and whatever focus holds, like a half-typed filter.
+         * In the view, not on screen: a widget cropped for the moment — the
+         * terminal shrank, a viewport scrolled, an overlay covers it, its container
+         * handed it no column — is still in the view, and keeps focus and whatever
+         * focus holds, like a half-typed filter.
          *
          * [LAW:single-enforcer] The one place focus follows the frame — onto the
-         * first widget when the app starts, off a widget that stopped being drawn
+         * first widget when the app starts, off a widget that left the view
          * or was disabled.
          */
-        settle(drawn) {
+        settle() {
             const current = this.currentWidget;
-            if (current && takesFocus(current) && drawn.includes(current))
+            if (current && takesFocus(current) && this.view.present().includes(current))
                 return;
             const first = this.widgets[0];
             if (first)
@@ -154,6 +143,16 @@ let DefaultFocusManager = (() => {
             event.stop();
         }
         // --- Private ---
+        // To the first widget Tab moves between that follows the focused one in
+        // `order`, wrapping. It is found by its place in the view, not among those
+        // on screen, so Tab from a widget on no cell moves to its neighbour.
+        step(order) {
+            const tabbable = new Set(this.widgets);
+            const at = this.currentWidget ? order.indexOf(this.currentWidget) : -1;
+            const target = [...order.slice(at + 1), ...order.slice(0, at + 1)].find((widget) => tabbable.has(widget));
+            if (target)
+                this.setFocus(target);
+        }
         // No focus is where `settle` leaves an app with nothing to focus, and only
         // there: anywhere else the next frame would put focus back on the first
         // widget, so there is no public way in.

package/dist/widgets/index.d.ts

@@ -4,7 +4,7 @@ export { StaticItem } from "./static-item.js";
 export type { StaticItemOptions } from "./static-item.js";
 export { WidgetBase } from "./widget-base.js";
 export { WidgetApp } from "./widget-app.js";
-export type { WidgetAppOptions } from "./widget-app.js";
+export type { WidgetAppOptions, WidgetPresence } from "./widget-app.js";
 export { Button } from "./button.js";
 export type { ButtonVariant, ButtonOptions } from "./button.js";
 export { Checkbox } from "./checkbox.js";

package/dist/widgets/static-item.d.ts

@@ -11,7 +11,7 @@
  * renderable.
  */
 import { Segment } from "../core/segment.js";
-import type { Measurable, Renderable, RenderOptions } from "../core/protocol.js";
+import type { Composite, Measurable, Renderable, RenderOptions } from "../core/protocol.js";
 import { WidgetBase } from "./widget-base.js";
 import type { KeyEvent } from "./types.js";
 export interface StaticItemOptions {
@@ -19,12 +19,13 @@ export interface StaticItemOptions {
     render: Renderable | ((options: RenderOptions) => Iterable<Segment>);
     measure?: Measurable["measure"];
 }
-export declare class StaticItem extends WidgetBase {
+export declare class StaticItem extends WidgetBase implements Composite {
     readonly id: string;
     readonly focusable = false;
-    private readonly renderFn;
+    private readonly body;
     private readonly measureFn;
     constructor(options: StaticItemOptions);
+    contents(): Iterable<Renderable>;
     handleKey(_event: KeyEvent): void;
     protected draw(options: RenderOptions): Iterable<Segment>;
     measure(options: RenderOptions): {

package/dist/widgets/static-item.js

@@ -11,27 +11,29 @@
  * renderable.
  */
 import { Segment } from "../core/segment.js";
+import { render } from "../core/protocol.js";
 import { WidgetBase } from "./widget-base.js";
 export class StaticItem extends WidgetBase {
     id;
     focusable = false;
-    renderFn;
+    // The body as a renderable either way: a function is one that holds nothing.
+    body;
     measureFn;
     constructor(options) {
         super();
         this.id = options.id;
         const r = options.render;
-        this.renderFn =
-            typeof r === "function"
-                ? (opts) => r(opts)
-                : (opts) => r.render(opts);
+        this.body = typeof r === "function" ? { render: r } : r;
         this.measureFn = options.measure;
     }
+    *contents() {
+        yield this.body;
+    }
     // Static items don't respond to keys. WidgetBase.handleMouse / handleFocus
     // are already no-ops, so we only need to satisfy the abstract handleKey.
     handleKey(_event) { }
     draw(options) {
-        return this.renderFn(options);
+        return render(this.body, options);
     }
     measure(options) {
         if (this.measureFn)
@@ -41,7 +43,7 @@ export class StaticItem extends WidgetBase {
         // values too, not just the "\n" sentinel segment. Walking segments and
         // testing `seg.text === "\n"` miscounts widths for any renderable
         // that emits "a\nb" as a single segment.
-        const segments = Array.from(this.renderFn(options));
+        const segments = Array.from(render(this.body, options));
         const lines = Segment.splitLines(segments);
         let max = 0;
         for (const line of lines) {

package/dist/widgets/text-input.d.ts

@@ -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
@@ -69,20 +71,22 @@ import { ThemedWidget } from "./themed-widget.js";
 import type { KeyEvent, WidgetMouseEvent } from "./types.js";
 /**
  * A soft-wrap strategy. Given one logical line of text and cell-width budgets,
- * return the visual sub-rows that line wraps into. The first sub-row uses
- * `firstWidth` as its capacity; every subsequent (continuation) sub-row uses
- * `continuationWidth` (typically `firstWidth - cellLen(continuationMarker)`).
+ * return the visual sub-rows that line wraps into. The line arrives as the
+ * widget shows it — each glyph of zero cells already its one-cell `◌`, each
+ * glyph of a password its mask — so the budget counts the cells drawn. The
+ * first sub-row uses `firstWidth` as its capacity; every subsequent
+ * (continuation) sub-row uses `continuationWidth` (typically
+ * `firstWidth - cellLen(continuationMarker)`).
  *
- * Each returned row carries:
- *   - `content` — the displayed text for that visual row (the widget prepends
- *     the continuation marker itself; the strategy never includes it).
- *   - `start`   — code-unit offset into the *logical line* where `content`
- *     begins, so the widget can map visual positions back to absolute `value`
- *     offsets for cursor projection.
+ * Each returned row is the stretch `[start, end)` of the line as given that
+ * the row draws; the widget draws the matching stretch of `value` and
+ * prepends the continuation marker itself.
  *
- * [LAW:types-are-the-program] Budget params are `CellCol`; `start` is
- * `CodePoint` (a `CodeUnit` on a code-point boundary) — the type system
- * prevents mixing these integer spaces inside a custom strategy.
+ * [LAW:types-are-the-program] A row names where it falls in the line rather
+ * than carrying text of its own, so it cannot draw anything the line does not
+ * hold. Budget params are `CellCol`; offsets are `CodePoint` (a `CodeUnit` on
+ * a code-point boundary) — the type system prevents mixing these integer
+ * spaces inside a custom strategy.
  *
  * Built-in: `charGreedyWrap` (break at any character at the width limit).
  * Custom: any function matching this signature. Template-aware wrapping
@@ -94,9 +98,10 @@ export type WrapStrategy = (logicalLine: string, budget: {
     continuationWidth: CellCol;
 }) => readonly WrapRow[];
 export interface WrapRow {
-    readonly content: string;
-    /** Code-point offset into the logical line where `content` begins. */
+    /** Offset into the line as given where the row begins. */
     readonly start: CodePoint;
+    /** Offset into the line as given where the row ends, exclusive. */
+    readonly end: CodePoint;
 }
 /**
  * Character-greedy soft wrap. Breaks at any character once `firstWidth`
@@ -225,7 +230,7 @@ export declare class TextInput extends ThemedWidget {
     private _killBuffer;
     private _scrollStart;
     private _singleLineViewportStart;
-    private _singleLineAsciiOnly;
+    private _drawn;
     readonly multiline: boolean;
     constructor(options?: TextInputOptions);
     handleKey(event: KeyEvent): void;
@@ -257,12 +262,16 @@ export declare class TextInput extends ThemedWidget {
     private _insertText;
     protected get ground(): Style;
     protected draw(options: RenderOptions): Iterable<Segment>;
+    private _shownAs;
     private _shown;
+    private _shownCells;
+    private _offsetAtShownCell;
     private _renderSingleLine;
     private _renderMultiline;
+    private _drawsArrows;
     private _emitRowContent;
     private _computeVisualRows;
-    measure(_options: RenderOptions): {
+    measure(options: RenderOptions): {
         minimum: number;
         maximum: number;
     };
@@ -271,7 +280,8 @@ export declare class TextInput extends ThemedWidget {
      * 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.
+     * it evaluates after content has been rendered for the current frame;
+     * `BorderAccessory` names the widths where it has not.
      *
      * Returns `undefined` when:
      *   - `scrollIndicator` is not `"indices"`, or