@promptctl/rich-js 0.17.0 → 0.18.1

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

@@ -1,5 +1,5 @@
 /**
- * FocusManager — flat focus cycling over registered widgets.
+ * FocusManager — which widget has focus, over the widgets on the frame.
  * [LAW:one-source-of-truth] single authority for which widget has focus.
  * [LAW:dataflow-not-control-flow] focus transitions are observable state;
  * widgets react to focus/blur events, the manager never skips dispatch.
@@ -7,20 +7,39 @@
 import type { InteractiveWidget, FocusManager, KeyEvent } from "./types.js";
 import type { Unsubscribe } from "../core/subscription.js";
 export declare class DefaultFocusManager implements FocusManager {
-    accessor widgetList: InteractiveWidget[];
+    private readonly onScreen;
     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.
+     */
+    constructor(onScreen: () => readonly InteractiveWidget[]);
     get current(): InteractiveWidget | null;
     get widgets(): readonly InteractiveWidget[];
-    register(widget: InteractiveWidget): void;
-    unregister(widget: InteractiveWidget): void;
     next(): void;
     prev(): void;
     focus(widget: InteractiveWidget): void;
-    blur(): 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.
+     *
+     * 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.
+     *
+     * [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
+     * or was disabled.
+     */
+    settle(drawn: readonly InteractiveWidget[]): void;
     onChange(handler: (current: InteractiveWidget | null) => void): Unsubscribe;
     handleKey(event: KeyEvent): void;
-    private focusableWidgets;
+    private clear;
     private setFocus;
     private emitChange;
 }

package/dist/widgets/focus-manager.js

@@ -1,5 +1,5 @@
 /**
- * FocusManager — flat focus cycling over registered widgets.
+ * FocusManager — which widget has focus, over the widgets on the frame.
  * [LAW:one-source-of-truth] single authority for which widget has focus.
  * [LAW:dataflow-not-control-flow] focus transitions are observable state;
  * widgets react to focus/blur events, the manager never skips dispatch.
@@ -38,89 +38,60 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
-import { action, observableRef, observableShallow } from "mobx";
+import { action, observableRef } from "mobx";
 let DefaultFocusManager = (() => {
     let _instanceExtraInitializers = [];
-    let _widgetList_decorators;
-    let _widgetList_initializers = [];
-    let _widgetList_extraInitializers = [];
     let _currentWidget_decorators;
     let _currentWidget_initializers = [];
     let _currentWidget_extraInitializers = [];
-    let _register_decorators;
-    let _unregister_decorators;
     let _next_decorators;
     let _prev_decorators;
     let _focus_decorators;
-    let _blur_decorators;
+    let _settle_decorators;
+    let _clear_decorators;
     let _setFocus_decorators;
     return class DefaultFocusManager {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _widgetList_decorators = [observableShallow];
             _currentWidget_decorators = [observableRef];
-            _register_decorators = [action];
-            _unregister_decorators = [action];
             _next_decorators = [action];
             _prev_decorators = [action];
             _focus_decorators = [action];
-            _blur_decorators = [action];
+            _settle_decorators = [action];
+            _clear_decorators = [action];
             _setFocus_decorators = [action];
-            __esDecorate(this, null, _widgetList_decorators, { kind: "accessor", name: "widgetList", static: false, private: false, access: { has: obj => "widgetList" in obj, get: obj => obj.widgetList, set: (obj, value) => { obj.widgetList = value; } }, metadata: _metadata }, _widgetList_initializers, _widgetList_extraInitializers);
             __esDecorate(this, null, _currentWidget_decorators, { kind: "accessor", name: "currentWidget", static: false, private: false, access: { has: obj => "currentWidget" in obj, get: obj => obj.currentWidget, set: (obj, value) => { obj.currentWidget = value; } }, metadata: _metadata }, _currentWidget_initializers, _currentWidget_extraInitializers);
-            __esDecorate(this, null, _register_decorators, { kind: "method", name: "register", static: false, private: false, access: { has: obj => "register" in obj, get: obj => obj.register }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _unregister_decorators, { kind: "method", name: "unregister", static: false, private: false, access: { has: obj => "unregister" in obj, get: obj => obj.unregister }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _next_decorators, { kind: "method", name: "next", static: false, private: false, access: { has: obj => "next" in obj, get: obj => obj.next }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _prev_decorators, { kind: "method", name: "prev", static: false, private: false, access: { has: obj => "prev" in obj, get: obj => obj.prev }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _focus_decorators, { kind: "method", name: "focus", static: false, private: false, access: { has: obj => "focus" in obj, get: obj => obj.focus }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _blur_decorators, { kind: "method", name: "blur", static: false, private: false, access: { has: obj => "blur" in obj, get: obj => obj.blur }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _settle_decorators, { kind: "method", name: "settle", static: false, private: false, access: { has: obj => "settle" in obj, get: obj => obj.settle }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _clear_decorators, { kind: "method", name: "clear", static: false, private: false, access: { has: obj => "clear" in obj, get: obj => obj.clear }, metadata: _metadata }, null, _instanceExtraInitializers);
             __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 });
         }
-        #widgetList_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _widgetList_initializers, []));
-        get widgetList() { return this.#widgetList_accessor_storage; }
-        set widgetList(value) { this.#widgetList_accessor_storage = value; }
-        #currentWidget_accessor_storage = (__runInitializers(this, _widgetList_extraInitializers), __runInitializers(this, _currentWidget_initializers, null));
+        onScreen = __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.
+         */
+        constructor(onScreen) {
+            this.onScreen = onScreen;
+        }
         get current() {
             return this.currentWidget;
         }
         get widgets() {
-            return this.widgetList;
-        }
-        register(widget) {
-            // [LAW:one-source-of-truth] register is idempotent — the widgetList is
-            // a set in spirit, not a multiset. Without this guard, double-registration
-            // would duplicate the widget so next/prev cycle through it twice and
-            // unregister only removes one copy.
-            if (this.widgetList.includes(widget))
-                return;
-            this.widgetList = [...this.widgetList, widget];
-            if (!this.currentWidget && widget.focusable && !widget.disabled) {
-                this.setFocus(widget);
-            }
-        }
-        unregister(widget) {
-            const idx = this.widgetList.indexOf(widget);
-            if (idx === -1)
-                return;
-            this.widgetList = this.widgetList.filter((w) => w !== widget);
-            if (this.currentWidget === widget) {
-                // [LAW:single-enforcer] WidgetBase.focus()/blur() already route through
-                // handleFocus, so calling both would double-dispatch and trigger any
-                // subclass side effect (e.g. Dropdown clearing filter/overlay) twice.
-                widget.blur();
-                const next = this.widgetList.find((w) => w.focusable && !w.disabled) ?? null;
-                if (next)
-                    next.focus();
-                this.currentWidget = next;
-                this.emitChange();
-            }
+            return this.onScreen().filter(takesFocus);
         }
         next() {
-            const focusable = this.focusableWidgets();
+            const focusable = this.widgets;
             if (focusable.length === 0)
                 return;
             const currentIdx = this.currentWidget ? focusable.indexOf(this.currentWidget) : -1;
@@ -128,28 +99,42 @@ let DefaultFocusManager = (() => {
             this.setFocus(focusable[nextIdx]);
         }
         prev() {
-            const focusable = this.focusableWidgets();
+            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]);
         }
+        // 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`).
         focus(widget) {
-            if (!widget.focusable || widget.disabled)
-                return;
-            if (!this.widgetList.includes(widget))
+            if (!takesFocus(widget))
                 return;
             this.setFocus(widget);
         }
-        blur() {
-            if (!this.currentWidget)
+        /**
+         * 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.
+         *
+         * 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.
+         *
+         * [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
+         * or was disabled.
+         */
+        settle(drawn) {
+            const current = this.currentWidget;
+            if (current && takesFocus(current) && drawn.includes(current))
                 return;
-            // [LAW:single-enforcer] blur() already dispatches handleFocus on
-            // WidgetBase — see unregister() for the rationale.
-            this.currentWidget.blur();
-            this.currentWidget = null;
-            this.emitChange();
+            const first = this.widgets[0];
+            if (first)
+                this.setFocus(first);
+            else
+                this.clear();
         }
         onChange(handler) {
             this.changeHandlers.add(handler);
@@ -169,14 +154,24 @@ let DefaultFocusManager = (() => {
             event.stop();
         }
         // --- Private ---
-        focusableWidgets() {
-            return this.widgetList.filter((w) => w.focusable && !w.disabled);
+        // 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.
+        clear() {
+            if (!this.currentWidget)
+                return;
+            // [LAW:single-enforcer] WidgetBase.focus()/blur() route through
+            // handleFocus; calling it here as well would dispatch twice and run any
+            // subclass side effect (e.g. Dropdown clearing its filter) twice.
+            this.currentWidget.blur();
+            this.currentWidget = null;
+            this.emitChange();
         }
         setFocus(widget) {
             if (this.currentWidget === widget)
                 return;
             // [LAW:single-enforcer] focus()/blur() already dispatch handleFocus —
-            // see unregister() for the rationale.
+            // see clear() for the rationale.
             if (this.currentWidget)
                 this.currentWidget.blur();
             this.currentWidget = widget;
@@ -191,3 +186,6 @@ let DefaultFocusManager = (() => {
     };
 })();
 export { DefaultFocusManager };
+function takesFocus(widget) {
+    return widget.focusable && !widget.disabled;
+}

package/dist/widgets/hit.d.ts

@@ -0,0 +1,64 @@
+/**
+ * widgetAt — which widget drew a cell of a painted frame, and where in its
+ * own output that cell sits; scrollTargetAt — what the wheel over that cell
+ * moves.
+ *
+ * A widget stamps every cell it draws (`WidgetBase.render`), and a
+ * `Scrollable` such as `Viewport` every cell it shows, around its content's
+ * stamps. The stamp rides
+ * through every container on the cell's `Style`, and the frame a screen paints
+ * is therefore its own hit map: nothing lays widgets out a second time to
+ * answer "what is under the pointer", so the answer cannot disagree with what
+ * the user sees. Z-order is paint order — whoever painted a cell last owns it.
+ */
+import { Segment } from "../core/segment.js";
+import type { Scrollable } from "../core/protocol.js";
+import type { InteractiveWidget } from "./types.js";
+/** A pointer position resolved to the widget that drew it. */
+export interface WidgetHit {
+    readonly widget: InteractiveWidget;
+    /** Column of the cell in the widget's own output. */
+    readonly col: number;
+    /** Row of the cell in the widget's own output. */
+    readonly row: number;
+}
+/**
+ * The innermost widget that drew the cell at column `x` of row `y` of
+ * `frame`, or `undefined` when no widget drew it. A widget nested inside
+ * another widget's output wins over the one containing it.
+ */
+export declare function widgetAt(frame: readonly (readonly Segment[])[], x: number, y: number): WidgetHit | undefined;
+/**
+ * The innermost `Scrollable` that drew the cell at column `x` of row `y` of
+ * `frame` and that `scrollBy(lines)` would move, or `undefined` when none
+ * did. A widget drawn inside it does not hide it: the widget's anchor is
+ * nested in its. One that cannot move that way — a viewport whose content
+ * fits, or that is at that end — passes the wheel to the one around it.
+ */
+export declare function scrollTargetAt(frame: readonly (readonly Segment[])[], x: number, y: number, lines: number): Scrollable | undefined;
+/**
+ * Where `widget`'s output starts in `frame` — the cell its own row 0, column
+ * 0 falls on — read off the first cell it drew, or `undefined` when it drew
+ * none.
+ */
+export declare function originOf(frame: readonly (readonly Segment[])[], widget: InteractiveWidget): {
+    x: number;
+    y: number;
+} | undefined;
+/**
+ * Whether `widget` drew the cell at column `x` of row `y` of `frame`, itself
+ * or through a widget nested in its output.
+ */
+export declare function drew(frame: readonly (readonly Segment[])[], widget: InteractiveWidget, x: number, y: number): boolean;
+/**
+ * Where `widget`'s footprint sits in `frame`: the cell its row 0, column 0
+ * falls on, and how many of its rows the frame shows down to its lowest — or
+ * `undefined` when the frame does not show its row 0.
+ */
+export declare function footprintOf(frame: readonly (readonly Segment[])[], widget: InteractiveWidget): {
+    x: number;
+    y: number;
+    rows: number;
+} | undefined;
+/** Every owner that drew a cell of `frame`, at every depth of nesting. */
+export declare function ownersOn(frame: readonly (readonly Segment[])[]): Set<object>;

package/dist/widgets/hit.js

@@ -0,0 +1,113 @@
+/**
+ * widgetAt — which widget drew a cell of a painted frame, and where in its
+ * own output that cell sits; scrollTargetAt — what the wheel over that cell
+ * moves.
+ *
+ * A widget stamps every cell it draws (`WidgetBase.render`), and a
+ * `Scrollable` such as `Viewport` every cell it shows, around its content's
+ * stamps. The stamp rides
+ * through every container on the cell's `Style`, and the frame a screen paints
+ * is therefore its own hit map: nothing lays widgets out a second time to
+ * answer "what is under the pointer", so the answer cannot disagree with what
+ * the user sees. Z-order is paint order — whoever painted a cell last owns it.
+ */
+import { Segment } from "../core/segment.js";
+import { isScrollable } from "../core/protocol.js";
+import { WidgetBase } from "./widget-base.js";
+/**
+ * The innermost widget that drew the cell at column `x` of row `y` of
+ * `frame`, or `undefined` when no widget drew it. A widget nested inside
+ * another widget's output wins over the one containing it.
+ */
+export function widgetAt(frame, x, y) {
+    const hit = innermost(frame, x, y, (owner) => (owner instanceof WidgetBase ? owner : undefined));
+    return hit && { widget: hit.owner, col: hit.col, row: hit.row };
+}
+/**
+ * The innermost `Scrollable` that drew the cell at column `x` of row `y` of
+ * `frame` and that `scrollBy(lines)` would move, or `undefined` when none
+ * did. A widget drawn inside it does not hide it: the widget's anchor is
+ * nested in its. One that cannot move that way — a viewport whose content
+ * fits, or that is at that end — passes the wheel to the one around it.
+ */
+export function scrollTargetAt(frame, x, y, lines) {
+    return innermost(frame, x, y, (owner) => isScrollable(owner) && owner.canScrollBy(lines) ? owner : undefined)?.owner;
+}
+/**
+ * The innermost owner of the cell at column `x` of row `y` of `frame` that
+ * `accept` turns into a `T`, with the cell's place in that owner's output.
+ *
+ * [LAW:parse-dont-validate] An anchor's owner is any object; `accept` is
+ * where it becomes the kind of owner the caller asked for, or nothing.
+ */
+function innermost(frame, x, y, accept) {
+    let found;
+    for (let a = Segment.anchorAt(frame, x, y); a; a = a.inner) {
+        const owner = accept(a.owner);
+        if (owner)
+            found = { owner, col: a.col, row: a.row };
+    }
+    return found;
+}
+/**
+ * Where `widget`'s output starts in `frame` — the cell its own row 0, column
+ * 0 falls on — read off the first cell it drew, or `undefined` when it drew
+ * none.
+ */
+export function originOf(frame, widget) {
+    for (let y = 0; y < frame.length; y++) {
+        let start = 0;
+        for (const segment of frame[y]) {
+            for (let a = segment.style?.anchor; a; a = a.inner) {
+                if (a.owner === widget)
+                    return { x: start - a.col, y: y - a.row };
+            }
+            start += segment.cellLength;
+        }
+    }
+    return undefined;
+}
+/**
+ * Whether `widget` drew the cell at column `x` of row `y` of `frame`, itself
+ * or through a widget nested in its output.
+ */
+export function drew(frame, widget, x, y) {
+    for (let a = Segment.anchorAt(frame, x, y); a; a = a.inner)
+        if (a.owner === widget)
+            return true;
+    return false;
+}
+/**
+ * Where `widget`'s footprint sits in `frame`: the cell its row 0, column 0
+ * falls on, and how many of its rows the frame shows down to its lowest — or
+ * `undefined` when the frame does not show its row 0.
+ */
+export function footprintOf(frame, widget) {
+    let origin;
+    let rows = 0;
+    for (let y = 0; y < frame.length; y++) {
+        let start = 0;
+        for (const segment of frame[y]) {
+            for (let a = segment.style?.anchor; a; a = a.inner) {
+                if (a.owner !== widget)
+                    continue;
+                if (a.row === 0 && !origin)
+                    origin = { x: start - a.col, y };
+                rows = Math.max(rows, a.row + 1);
+            }
+            start += segment.cellLength;
+        }
+    }
+    return origin && { ...origin, rows };
+}
+/** Every owner that drew a cell of `frame`, at every depth of nesting. */
+export function ownersOn(frame) {
+    const owners = new Set();
+    for (const line of frame) {
+        for (const segment of line) {
+            for (let a = segment.style?.anchor; a; a = a.inner)
+                owners.add(a.owner);
+        }
+    }
+    return owners;
+}

package/dist/widgets/index.d.ts

@@ -1,11 +1,9 @@
-export type { KeyEventInit, KeyHandlerPriority, KeyHandlerOptions, WidgetMouseEvent, WidgetFocusEvent, WidgetBounds, InteractiveWidget, OverlayRenderable, FocusManager, Screen, MountEntry, Placement, } from "./types.js";
-export { FLOW, hasOverlay, KeyEvent } from "./types.js";
+export type { KeyEventInit, KeyHandlerPriority, KeyHandlerOptions, ScreenMouseEvent, WidgetMouseEvent, WidgetFocusEvent, InteractiveWidget, OverlayRenderable, FocusManager, } from "./types.js";
+export { hasOverlay, KeyEvent } from "./types.js";
 export { StaticItem } from "./static-item.js";
 export type { StaticItemOptions } from "./static-item.js";
 export { WidgetBase } from "./widget-base.js";
-export { DefaultFocusManager } from "./focus-manager.js";
-export { DefaultScreen } from "./screen.js";
-export type { ScreenOptions, ColorSystemSpec } from "./screen.js";
+export { WidgetApp } from "./widget-app.js";
 export { Button } from "./button.js";
 export type { ButtonVariant, ButtonOptions } from "./button.js";
 export { Checkbox } from "./checkbox.js";
@@ -18,5 +16,5 @@ export { Dropdown } from "./dropdown.js";
 export type { DropdownOptions } from "./dropdown.js";
 export { Slider } from "./slider.js";
 export type { SliderOptions } from "./slider.js";
-export { EventRouter } from "./event-router.js";
-export type { EventRouterOptions } from "./event-router.js";
+export { widgetAt } from "./hit.js";
+export type { WidgetHit } from "./hit.js";

package/dist/widgets/index.js

@@ -1,15 +1,14 @@
-export { FLOW, hasOverlay, KeyEvent } from "./types.js";
+export { hasOverlay, KeyEvent } from "./types.js";
 export { StaticItem } from "./static-item.js";
 export { WidgetBase } from "./widget-base.js";
-export { DefaultFocusManager } from "./focus-manager.js";
-export { DefaultScreen } from "./screen.js";
+export { WidgetApp } from "./widget-app.js";
 export { Button } from "./button.js";
 export { Checkbox } from "./checkbox.js";
 export { Toggle } from "./toggle.js";
 export { TextInput, charGreedyWrap } from "./text-input.js";
 export { Dropdown } from "./dropdown.js";
 export { Slider } from "./slider.js";
-export { EventRouter } from "./event-router.js";
+export { widgetAt } from "./hit.js";
 // The terminal seam is not re-exported here. It lives on the `host` subpath,
 // and a second path to `TerminalHost` would be the two-clocks problem the
 // subpath split exists to remove.

package/dist/widgets/slider.d.ts

@@ -18,7 +18,7 @@
  *   disabled — dim
  */
 import { Segment } from "../core/segment.js";
-import type { RenderOptions } from "../core/protocol.js";
+import { type RenderOptions } from "../core/protocol.js";
 import type { TerminalTheme } from "../core/color.js";
 import { WidgetBase } from "./widget-base.js";
 import type { KeyEvent, WidgetMouseEvent } from "./types.js";
@@ -48,7 +48,7 @@ export declare class Slider extends WidgetBase {
     handleMouse(event: WidgetMouseEvent): void;
     private setValue;
     private setValueFromMouseX;
-    render(options: RenderOptions): Iterable<Segment>;
+    protected draw(options: RenderOptions): Iterable<Segment>;
     measure(_options: RenderOptions): {
         minimum: number;
         maximum: number;

package/dist/widgets/slider.js

@@ -56,6 +56,7 @@ import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
 import { ColorSpec } from "../core/color.js";
 import { DEFAULT_TERMINAL_THEME } from "../themes/terminalThemes.js";
+import { drawable } from "../core/protocol.js";
 import { WidgetBase } from "./widget-base.js";
 const DEFAULT_WIDTH = 20;
 let Slider = (() => {
@@ -206,20 +207,19 @@ let Slider = (() => {
             this.value = snapped;
             this.emitChange();
         }
+        // `x` is a column of this slider's own track, and runs outside 0..width
+        // when a drag carries the pointer past either end.
         setValueFromMouseX(x) {
-            const b = this.bounds;
-            if (!b)
-                return;
             const cellsAvailable = Math.max(1, this.width - 1);
-            const clamped = Math.max(0, Math.min(this.width - 1, x - b.x));
+            const clamped = Math.max(0, Math.min(this.width - 1, x));
             const fraction = clamped / cellsAvailable;
             const next = this.min + fraction * (this.max - this.min);
             this.setValue(next);
         }
         // --- Rendering ---
-        render(options) {
-            const trackChar = options.asciiOnly ? "-" : "─";
-            const markerChar = options.asciiOnly ? "*" : "●";
+        draw(options) {
+            const trackChar = drawable(options, "─", "-");
+            const markerChar = drawable(options, "●", "*");
             const range = this.max - this.min;
             const fraction = range === 0 ? 0 : (this.value - this.min) / range;
             const markerIdx = Math.round(fraction * (this.width - 1));

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

@@ -1,20 +1,14 @@
 /**
- * StaticItem — a non-focusable, non-interactive Renderable wrapped to fit
- * the InteractiveWidget surface so it can be mounted by Screen alongside
- * real widgets.
+ * StaticItem — a renderable on the widget surface: it takes no focus and
+ * ignores keys, and it stamps its cells like any widget.
  *
- * [LAW:one-type-per-behavior] Screen.mount accepts a uniform array of
- * InteractiveWidget. Static text, panels, swatches, and other display-only
- * Renderables flow through the same pipeline by being expressed as the
- * same type. The differences (no focus, no event handling) are configured
- * via `focusable: false` plus the no-op handlers WidgetBase already
- * provides — there is no second type, no "static vs interactive" branch in
- * Screen's render loop.
+ * [LAW:one-type-per-behavior] Display-only content is a `WidgetBase` with
+ * `focusable: false` and the no-op handlers the base already provides, not a
+ * second type.
  *
- * The wrapped renderable can be a function that re-evaluates each frame
- * (so the host can read MobX observables inside `render` and have Screen
- * re-render reactively) or a plain object that returns the same segments
- * every time.
+ * The wrapped renderable can be a function that re-evaluates each frame — it
+ * reads MobX observables, and the app repaints when they change — or a plain
+ * renderable.
  */
 import { Segment } from "../core/segment.js";
 import type { Measurable, Renderable, RenderOptions } from "../core/protocol.js";
@@ -32,7 +26,7 @@ export declare class StaticItem extends WidgetBase {
     private readonly measureFn;
     constructor(options: StaticItemOptions);
     handleKey(_event: KeyEvent): void;
-    render(options: RenderOptions): Iterable<Segment>;
+    protected draw(options: RenderOptions): Iterable<Segment>;
     measure(options: RenderOptions): {
         minimum: number;
         maximum: number;

package/dist/widgets/static-item.js

@@ -1,20 +1,14 @@
 /**
- * StaticItem — a non-focusable, non-interactive Renderable wrapped to fit
- * the InteractiveWidget surface so it can be mounted by Screen alongside
- * real widgets.
+ * StaticItem — a renderable on the widget surface: it takes no focus and
+ * ignores keys, and it stamps its cells like any widget.
  *
- * [LAW:one-type-per-behavior] Screen.mount accepts a uniform array of
- * InteractiveWidget. Static text, panels, swatches, and other display-only
- * Renderables flow through the same pipeline by being expressed as the
- * same type. The differences (no focus, no event handling) are configured
- * via `focusable: false` plus the no-op handlers WidgetBase already
- * provides — there is no second type, no "static vs interactive" branch in
- * Screen's render loop.
+ * [LAW:one-type-per-behavior] Display-only content is a `WidgetBase` with
+ * `focusable: false` and the no-op handlers the base already provides, not a
+ * second type.
  *
- * The wrapped renderable can be a function that re-evaluates each frame
- * (so the host can read MobX observables inside `render` and have Screen
- * re-render reactively) or a plain object that returns the same segments
- * every time.
+ * The wrapped renderable can be a function that re-evaluates each frame — it
+ * reads MobX observables, and the app repaints when they change — or a plain
+ * renderable.
  */
 import { Segment } from "../core/segment.js";
 import { WidgetBase } from "./widget-base.js";
@@ -36,7 +30,7 @@ export class StaticItem extends WidgetBase {
     // 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) { }
-    render(options) {
+    draw(options) {
         return this.renderFn(options);
     }
     measure(options) {

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

@@ -58,7 +58,7 @@
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
 import { type CellCol, type CodePoint } from "../core/cells.js";
-import type { RenderOptions } from "../core/protocol.js";
+import { type RenderOptions } from "../core/protocol.js";
 import type { TerminalTheme } from "../core/color.js";
 import { WidgetBase } from "./widget-base.js";
 import type { KeyEvent, WidgetMouseEvent } from "./types.js";
@@ -247,7 +247,7 @@ export declare class TextInput extends WidgetBase {
     private _lineStart;
     private _lineEnd;
     private _insertText;
-    render(options: RenderOptions): Iterable<Segment>;
+    protected draw(options: RenderOptions): Iterable<Segment>;
     private _renderSingleLine;
     private _renderMultiline;
     private _emitRowContent;