@promptctl/rich-js 0.17.0 → 0.18.1

package/dist/widgets/text-input.js

@@ -95,6 +95,7 @@ import { Style } from "../core/style.js";
 import { ColorSpec } from "../core/color.js";
 import { cellLen, setCellSize, splitText, cellStepFrom, cellColToCodeUnitOffset, asCellCol, asCodePoint, nextCodePoint, prevCodePoint, } from "../core/cells.js";
 import { DEFAULT_TERMINAL_THEME } from "../themes/terminalThemes.js";
+import { drawable } from "../core/protocol.js";
 import { WidgetBase } from "./widget-base.js";
 /**
  * Character-greedy soft wrap. Breaks at any character once `firstWidth`
@@ -124,7 +125,12 @@ export const charGreedyWrap = (line, { firstWidth, continuationWidth }) => {
     return rows;
 };
 const MIN_CONTENT_WIDTH = 8;
+// Each glyph and its ASCII stand-in are one code unit and one cell, so the
+// display string maps 1:1 onto `value` and hit-testing needs no render options.
 const NEWLINE_GLYPH = "↵";
+const ASCII_NEWLINE_GLYPH = "~";
+const MASK_GLYPH = "•";
+const ASCII_MASK_GLYPH = "*";
 // 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.
@@ -510,17 +516,13 @@ let TextInput = (() => {
                 return;
             if (event.type !== "mouse_down")
                 return;
-            const b = this.bounds;
-            if (!b)
-                return;
             if (this._multiline) {
                 // 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 relY = event.y - b.y;
-                const rawRowIdx = this._scrollStart + relY;
+                const rawRowIdx = this._scrollStart + event.y;
                 // Clicks on minRows-padded empty rows (beyond the last real row) snap to end.
                 if (rawRowIdx >= rows.length) {
                     this.cursorPosition = asCodePoint(this.value.length);
@@ -531,7 +533,7 @@ let TextInput = (() => {
                 const row = rows[rowIdx];
                 // 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 - b.x - contentXOff));
+                const relX = asCellCol(Math.max(0, event.x - contentXOff));
                 const pos = cellColToCodeUnitOffset(row.content, relX);
                 const absPos = row.valueStart + pos;
                 const chu = absPos < this.value.length ? this.value.charCodeAt(absPos) : 0;
@@ -545,9 +547,9 @@ let TextInput = (() => {
                 // 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 - b.x - 1) + this._singleLineViewportStart);
+                const relX = asCellCol(Math.max(0, event.x - 1) + this._singleLineViewportStart);
                 const displayForHitTest = this._password
-                    ? "•".repeat(this.value.length)
+                    ? MASK_GLYPH.repeat(this.value.length)
                     : this.value.indexOf("\n") >= 0
                         ? this.value.replace(/\n/g, NEWLINE_GLYPH)
                         : this.value;
@@ -872,7 +874,7 @@ let TextInput = (() => {
             this.emitChange();
         }
         // --- Rendering ---
-        render(options) {
+        draw(options) {
             if (this._multiline)
                 return this._renderMultiline(options);
             return this._renderSingleLine(options);
@@ -886,9 +888,9 @@ let TextInput = (() => {
             const rawDisplay = showPlaceholder
                 ? this.placeholder
                 : this._password
-                    ? "•".repeat(this.value.length)
+                    ? drawable(options, MASK_GLYPH, ASCII_MASK_GLYPH).repeat(this.value.length)
                     : this.value.indexOf("\n") >= 0
-                        ? this.value.replace(/\n/g, NEWLINE_GLYPH)
+                        ? this.value.replace(/\n/g, drawable(options, NEWLINE_GLYPH, ASCII_NEWLINE_GLYPH))
                         : this.value;
             // Measure in cell space — cursorPosition is a code-unit index; convert to
             // cell column for all viewport arithmetic.
@@ -1006,14 +1008,15 @@ let TextInput = (() => {
                 if (i > 0)
                     segments.push(new Segment("\n"));
                 if (row.isContinuation) {
-                    segments.push(new Segment(this._continuationMarker, markerStyle));
+                    // 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: "▲", style: indicatorStyle };
+                    indicator = { ch: drawable(options, "▲", "^"), style: indicatorStyle };
                 }
                 else if (i === visibleCount - 1 && canScrollDown) {
-                    indicator = { ch: "▼", style: indicatorStyle };
+                    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

package/dist/widgets/toggle.d.ts

@@ -35,7 +35,7 @@ export declare class Toggle extends WidgetBase {
     setTheme(theme: TerminalTheme): void;
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
-    render(_options: RenderOptions): Iterable<Segment>;
+    protected draw(_options: RenderOptions): Iterable<Segment>;
     measure(_options: RenderOptions): {
         minimum: number;
         maximum: number;

package/dist/widgets/toggle.js

@@ -145,13 +145,14 @@ let Toggle = (() => {
         handleMouse(event) {
             if (this.disabled)
                 return;
-            if (event.type === "mouse_up") {
+            // A release that dragged off the toggle cancels the press.
+            if (event.type === "mouse_up" && event.over) {
                 this.on = !this.on;
                 this.emitChange();
             }
         }
         // --- Rendering ---
-        render(_options) {
+        draw(_options) {
             // Both indicators are exactly 5 cells: "[ON] " and "[OFF]".
             const indicator = this.on ? "[ON] " : "[OFF]";
             const text = `${indicator} ${this.label}`;

package/dist/widgets/types.d.ts

@@ -30,23 +30,24 @@ export type KeyHandlerPriority = "high" | "normal";
 export interface KeyHandlerOptions {
     priority?: KeyHandlerPriority;
 }
-export interface WidgetMouseEvent {
-    type: "mouse_down" | "mouse_up" | "mouse_move" | "scroll_up" | "scroll_down";
+export type ScreenMouseEvent = {
+    [T in MouseEventType]: MouseEventOf<T>;
+}[MouseEventType];
+type MouseEventType = "mouse_down" | "mouse_up" | "mouse_move" | "scroll_up" | "scroll_down";
+interface MouseEventOf<Type extends string> {
+    type: Type;
     x: number;
     y: number;
     button: number;
     shift: boolean;
     ctrl: boolean;
 }
+export interface WidgetMouseEvent extends MouseEventOf<"mouse_down" | "mouse_up" | "mouse_move"> {
+    over: boolean;
+}
 export interface WidgetFocusEvent {
     type: "focus" | "blur";
 }
-export interface WidgetBounds {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
 export interface InteractiveWidget extends Renderable, Measurable {
     readonly id: string;
     readonly focusable: boolean;
@@ -54,8 +55,6 @@ export interface InteractiveWidget extends Renderable, Measurable {
     hovered: boolean;
     active: boolean;
     disabled: boolean;
-    visible: boolean;
-    bounds: WidgetBounds | null;
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     handleFocus(event: WidgetFocusEvent): void;
@@ -63,46 +62,26 @@ export interface InteractiveWidget extends Renderable, Measurable {
     blur(): void;
     setDisabled(value: boolean): void;
     setHovered(value: boolean): void;
-    containsPoint(x: number, y: number): boolean;
     onChange(handler: (widget: InteractiveWidget) => void): Unsubscribe;
     onSubmit(handler: (widget: InteractiveWidget) => void): Unsubscribe;
 }
-export type Placement = {
-    kind: "flow";
-} | {
-    kind: "inline";
-} | {
-    kind: "fixed";
-    x: number;
-    y: number;
-};
-export declare const FLOW: Placement;
 export interface OverlayRenderable {
     renderOverlay(options: RenderOptions): Iterable<Segment> | null;
 }
 export declare function hasOverlay(value: object): value is OverlayRenderable;
 export interface FocusManager {
     readonly current: InteractiveWidget | null;
+    /** The widgets Tab moves between, in the order it moves. */
     readonly widgets: readonly InteractiveWidget[];
-    register(widget: InteractiveWidget): void;
-    unregister(widget: InteractiveWidget): void;
     next(): void;
     prev(): void;
     focus(widget: InteractiveWidget): void;
-    blur(): void;
     handleKey(event: KeyEvent): void;
     onChange(handler: (current: InteractiveWidget | null) => void): Unsubscribe;
 }
-export type MountEntry = InteractiveWidget | {
-    widget: InteractiveWidget;
-    placement: Placement;
-};
-export interface Screen {
-    mount(...entries: MountEntry[]): void;
-    unmount(widget: InteractiveWidget): void;
-    start(): void;
-    stop(): void;
+export interface FrameSource {
     readonly focusManager: FocusManager;
-    readonly running: boolean;
-    readonly widgets: readonly InteractiveWidget[];
+    readonly frame: readonly (readonly Segment[])[];
+    refresh(): void;
 }
+export {};

package/dist/widgets/types.js

@@ -24,7 +24,6 @@ export class KeyEvent {
     // and no focused-widget handler downstream of the caller will see it.
     stop() { this._stopped = true; }
 }
-export const FLOW = { kind: "flow" };
 export function hasOverlay(value) {
     return ("renderOverlay" in value &&
         typeof value.renderOverlay === "function");

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

@@ -0,0 +1,63 @@
+/**
+ * WidgetApp — an `App` whose view has widgets in it: keys reach the focused
+ * widget, the pointer reaches the widget that drew the cell under it, and a
+ * change to anything a frame read paints the next one.
+ *
+ * A widget goes wherever a renderable goes — in a `Panel`, a `Layout` pane, a
+ * `Table` cell — and nothing lays it out a second time. Everything added here
+ * reads the frame the view drew:
+ *
+ * - Focus moves in document order: the order widgets start to render in
+ *   (`RenderOptions.onDraw`), among those with a cell on the frame on screen.
+ *   Not reading order — in a `Layout` split into columns, reading order
+ *   zigzags between the columns row by row.
+ * - Overlays are painted over the view's frame, in document order, directly
+ *   below their owner's footprint (`OverlayRenderable`). Paint order is the
+ *   z-order: a later overlay covers an earlier one.
+ * - A pointer event goes to the innermost widget that drew the cell under it
+ *   (`widgetAt`), in that widget's own coordinates; the wheel goes to the
+ *   innermost `Viewport` that can move (`scrollTargetAt`).
+ *
+ * [LAW:locality-or-seam] `App` knows nothing of widgets — `host/` depends on
+ * `core/` alone — and this reaches it only through the seams it already has:
+ * the view is a renderable, and `onPaint` hears the frame.
+ */
+import { Segment } from "../core/segment.js";
+import type { Unsubscribe } from "../core/subscription.js";
+import { type AppOptions, type AppPhase } from "../host/app.js";
+import type { FocusManager, FrameSource, KeyEvent, KeyHandlerOptions, ScreenMouseEvent } from "./types.js";
+export declare class WidgetApp implements FrameSource {
+    readonly focusManager: FocusManager;
+    private readonly focus;
+    private readonly app;
+    private readonly router;
+    private readonly reaction;
+    private drawn;
+    constructor(options: AppOptions);
+    get phase(): AppPhase;
+    /** The rows on screen now, as painted: what a pointer event lands on. */
+    get frame(): readonly (readonly Segment[])[];
+    /**
+     * Take the terminal, paint the first frame, and route input to its widgets
+     * until the app stops — `App.run`, with the input.
+     */
+    run(): Promise<void>;
+    stop(): void;
+    fail(error: unknown): void;
+    /**
+     * Paint the next frame, as `App.refresh` does. A change to an observable
+     * the view read needs none; one no observable carries — a `Viewport`
+     * scrolled from a key handler — does.
+     */
+    refresh(): void;
+    suspend(): Promise<void>;
+    /**
+     * Hear every key. A `high` handler hears it before the focused widget, a
+     * `normal` one after it — and after Tab has moved focus — and a handler
+     * that calls `event.stop()` ends the key there.
+     */
+    onKey(handler: (event: KeyEvent) => void, options?: KeyHandlerOptions): Unsubscribe;
+    /** Hear every pointer event, in terminal cells, before any widget does. */
+    onMouse(handler: (event: ScreenMouseEvent) => void): Unsubscribe;
+    private compose;
+}

package/dist/widgets/widget-app.js

@@ -0,0 +1,199 @@
+/**
+ * WidgetApp — an `App` whose view has widgets in it: keys reach the focused
+ * widget, the pointer reaches the widget that drew the cell under it, and a
+ * change to anything a frame read paints the next one.
+ *
+ * A widget goes wherever a renderable goes — in a `Panel`, a `Layout` pane, a
+ * `Table` cell — and nothing lays it out a second time. Everything added here
+ * reads the frame the view drew:
+ *
+ * - Focus moves in document order: the order widgets start to render in
+ *   (`RenderOptions.onDraw`), among those with a cell on the frame on screen.
+ *   Not reading order — in a `Layout` split into columns, reading order
+ *   zigzags between the columns row by row.
+ * - Overlays are painted over the view's frame, in document order, directly
+ *   below their owner's footprint (`OverlayRenderable`). Paint order is the
+ *   z-order: a later overlay covers an earlier one.
+ * - A pointer event goes to the innermost widget that drew the cell under it
+ *   (`widgetAt`), in that widget's own coordinates; the wheel goes to the
+ *   innermost `Viewport` that can move (`scrollTargetAt`).
+ *
+ * [LAW:locality-or-seam] `App` knows nothing of widgets — `host/` depends on
+ * `core/` alone — and this reaches it only through the seams it already has:
+ * the view is a renderable, and `onPaint` hears the frame.
+ */
+import { Reaction } from "mobx";
+import { Segment } from "../core/segment.js";
+import { App } from "../host/app.js";
+import { DefaultFocusManager } from "./focus-manager.js";
+import { EventRouter } from "./event-router.js";
+import { footprintOf, ownersOn } from "./hit.js";
+import { hasOverlay } from "./types.js";
+import { WidgetBase } from "./widget-base.js";
+export class WidgetApp {
+    focusManager;
+    focus;
+    app;
+    router;
+    // Paints the next frame when anything the last one read changes.
+    reaction;
+    // The widgets the view drew for the frame on screen, in document order.
+    drawn = [];
+    constructor(options) {
+        const { view } = options;
+        this.reaction = new Reaction("WidgetApp", () => this.app.refresh());
+        const root = { render: (renderOptions) => this.compose(view, renderOptions) };
+        this.app = new App({ ...options, view: () => root });
+        this.focus = new DefaultFocusManager(() => {
+            const owners = ownersOn(this.app.frame);
+            return this.drawn.filter((widget) => owners.has(widget));
+        });
+        this.focusManager = this.focus;
+        this.router = new EventRouter({ source: this, host: options.host });
+        this.app.onPaint(() => {
+            this.focus.settle(this.drawn);
+            this.router.framePainted();
+        });
+        // [LAW:single-enforcer] `settle` judges every focus move, so every move
+        // paints — including one onto a widget no frame has read yet.
+        this.focus.onChange(() => this.app.refresh());
+    }
+    get phase() {
+        return this.app.phase;
+    }
+    /** The rows on screen now, as painted: what a pointer event lands on. */
+    get frame() {
+        return this.app.frame;
+    }
+    /**
+     * Take the terminal, paint the first frame, and route input to its widgets
+     * until the app stops — `App.run`, with the input.
+     */
+    async run() {
+        // App refuses a second run; this one must not end the input of the first.
+        if (this.app.phase !== "idle")
+            return this.app.run();
+        // Listening before the app starts, so a first frame that throws — and
+        // stops the host — is not followed by a subscription that restarts it.
+        this.router.start();
+        const running = this.app.run();
+        try {
+            await running;
+        }
+        finally {
+            this.router.stop();
+            this.reaction.dispose();
+        }
+    }
+    stop() {
+        this.app.stop();
+    }
+    fail(error) {
+        this.app.fail(error);
+    }
+    /**
+     * Paint the next frame, as `App.refresh` does. A change to an observable
+     * the view read needs none; one no observable carries — a `Viewport`
+     * scrolled from a key handler — does.
+     */
+    refresh() {
+        this.app.refresh();
+    }
+    suspend() {
+        return this.app.suspend();
+    }
+    /**
+     * Hear every key. A `high` handler hears it before the focused widget, a
+     * `normal` one after it — and after Tab has moved focus — and a handler
+     * that calls `event.stop()` ends the key there.
+     */
+    onKey(handler, options) {
+        return this.router.onKey(handler, options);
+    }
+    /** Hear every pointer event, in terminal cells, before any widget does. */
+    onMouse(handler) {
+        return this.router.onMouse(handler);
+    }
+    compose(view, options) {
+        const drawn = new Set();
+        // [LAW:parse-dont-validate] An owner is any object; only a `WidgetBase`
+        // reports itself as a widget, so this is where `object` becomes one.
+        const onDraw = (owner) => {
+            if (owner instanceof WidgetBase)
+                drawn.add(owner);
+        };
+        // The view, its render and the overlays are all tracked, so an observable
+        // any of them reads — a label, `focused`, the state that picks what the
+        // view shows — paints the next frame when it changes.
+        // An overlay reports what it draws too: a widget in it is on the frame,
+        // and visiting `drawn` in insertion order paints its overlay in turn.
+        const render = { ...options, onDraw };
+        const lines = tracked(this.reaction, () => {
+            const base = Segment.splitLines(view().render(render));
+            for (const widget of drawn)
+                paintOverlay(base, widget, render);
+            return base;
+        });
+        this.drawn = [...drawn];
+        return lines.flatMap((line) => [...line, Segment.line()]);
+    }
+}
+/**
+ * `fn`, with every observable it reads subscribed to by `reaction`.
+ *
+ * [LAW:no-silent-failure] mobx reports an error thrown inside `track` and
+ * carries on, which would paint an empty frame for a view that threw. The
+ * error is carried out instead, and fails the app as `App` fails on any frame
+ * that throws.
+ */
+function tracked(reaction, fn) {
+    // Written inside `track`, which the compiler cannot see run.
+    let outcome = {
+        ok: false,
+        error: new Error("WidgetApp: a frame drawn after the app stopped"),
+    };
+    reaction.track(() => {
+        try {
+            outcome = { ok: true, value: fn() };
+        }
+        catch (error) {
+            outcome = { ok: false, error };
+        }
+    });
+    if (!outcome.ok)
+        throw outcome.error;
+    return outcome.value;
+}
+/**
+ * Paint `widget`'s overlay over `lines`, below its footprint and at the column
+ * of its row 0, each overlay row stamped as the widget's row below its last —
+ * so a click there reaches the widget, in its own coordinates. A widget whose
+ * row 0 is not on the frame has nowhere to hang an overlay, and paints none.
+ */
+function paintOverlay(lines, widget, options) {
+    if (!hasOverlay(widget))
+        return;
+    const at = footprintOf(lines, widget);
+    if (!at)
+        return;
+    // An overlay floats over the frame; no region holds it.
+    const overlay = widget.renderOverlay({ ...options, height: undefined });
+    if (overlay === null)
+        return;
+    const width = Math.max(0, options.maxWidth - at.x);
+    const rows = Segment.anchorLines(Segment.splitLines(overlay), widget, at.rows).map((line) => Segment.adjustLineLength(line, width, undefined, false));
+    paintLines(lines, rows, at.x, at.y + at.rows);
+}
+// Paint `rows` into `lines` with its top-left cell at (x, y), growing `lines`
+// as needed; each painted cell replaces the one beneath it.
+function paintLines(lines, rows, x, y) {
+    while (lines.length < y + rows.length)
+        lines.push([]);
+    rows.forEach((source, i) => {
+        const row = lines[y + i];
+        // Padded to `x`, so a row that ends short of the overlay still reaches it.
+        const gap = Math.max(0, x - Segment.getLineLength(row));
+        const [before = [], , after = []] = Segment.divide([...row, new Segment(" ".repeat(gap))], [x, x + Segment.getLineLength(source)]);
+        lines[y + i] = [...before, ...source, ...after];
+    });
+}

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

@@ -7,9 +7,9 @@
  * `accessor` members. Each decorator registers its own member, so there is no
  * makeObservable call and subclasses add observables the same way.
  */
-import type { Segment } from "../core/segment.js";
+import { Segment } from "../core/segment.js";
 import type { RenderOptions } from "../core/protocol.js";
-import type { InteractiveWidget, KeyEvent, WidgetMouseEvent, WidgetFocusEvent, WidgetBounds } from "./types.js";
+import type { InteractiveWidget, KeyEvent, WidgetMouseEvent, WidgetFocusEvent } from "./types.js";
 import type { Unsubscribe } from "../core/subscription.js";
 export declare abstract class WidgetBase implements InteractiveWidget {
     abstract readonly id: string;
@@ -18,8 +18,6 @@ export declare abstract class WidgetBase implements InteractiveWidget {
     accessor hovered: boolean;
     accessor active: boolean;
     accessor disabled: boolean;
-    accessor visible: boolean;
-    accessor bounds: WidgetBounds | null;
     private readonly changeHandlers;
     private readonly submitHandlers;
     abstract handleKey(event: KeyEvent): void;
@@ -29,12 +27,12 @@ export declare abstract class WidgetBase implements InteractiveWidget {
     blur(): void;
     setDisabled(value: boolean): void;
     setHovered(value: boolean): void;
-    containsPoint(x: number, y: number): boolean;
     onChange(handler: (widget: InteractiveWidget) => void): Unsubscribe;
     onSubmit(handler: (widget: InteractiveWidget) => void): Unsubscribe;
     protected emitChange(): void;
     protected emitSubmit(): void;
-    abstract render(options: RenderOptions): Iterable<Segment>;
+    render(options: RenderOptions): Iterable<Segment>;
+    protected abstract draw(options: RenderOptions): Iterable<Segment>;
     abstract measure(options: RenderOptions): {
         minimum: number;
         maximum: number;

package/dist/widgets/widget-base.js

@@ -42,6 +42,7 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     done = true;
 };
 import { observable, action } from "mobx";
+import { Segment } from "../core/segment.js";
 let WidgetBase = (() => {
     let _instanceExtraInitializers = [];
     let _focused_decorators;
@@ -56,9 +57,6 @@ let WidgetBase = (() => {
     let _disabled_decorators;
     let _disabled_initializers = [];
     let _disabled_extraInitializers = [];
-    let _visible_decorators;
-    let _visible_initializers = [];
-    let _visible_extraInitializers = [];
     let _handleFocus_decorators;
     let _focus_decorators;
     let _blur_decorators;
@@ -71,7 +69,6 @@ let WidgetBase = (() => {
             _hovered_decorators = [observable];
             _active_decorators = [observable];
             _disabled_decorators = [observable];
-            _visible_decorators = [observable];
             _handleFocus_decorators = [action];
             _focus_decorators = [action];
             _blur_decorators = [action];
@@ -81,7 +78,6 @@ let WidgetBase = (() => {
             __esDecorate(this, null, _hovered_decorators, { kind: "accessor", name: "hovered", static: false, private: false, access: { has: obj => "hovered" in obj, get: obj => obj.hovered, set: (obj, value) => { obj.hovered = value; } }, metadata: _metadata }, _hovered_initializers, _hovered_extraInitializers);
             __esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
-            __esDecorate(this, null, _visible_decorators, { kind: "accessor", name: "visible", static: false, private: false, access: { has: obj => "visible" in obj, get: obj => obj.visible, set: (obj, value) => { obj.visible = value; } }, metadata: _metadata }, _visible_initializers, _visible_extraInitializers);
             __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, _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);
@@ -101,20 +97,7 @@ let WidgetBase = (() => {
         #disabled_accessor_storage = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _disabled_initializers, false));
         get disabled() { return this.#disabled_accessor_storage; }
         set disabled(value) { this.#disabled_accessor_storage = value; }
-        #visible_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _visible_initializers, true));
-        get visible() { return this.#visible_accessor_storage; }
-        set visible(value) { this.#visible_accessor_storage = value; }
-        #bounds_accessor_storage = (__runInitializers(this, _visible_extraInitializers), null);
-        // [LAW:types-are-the-program] Layout output, not reactive state. In
-        // DefaultScreen usage the sole writer is Screen.draw(); custom hosts
-        // (test harnesses, alternative layout loops) also write directly. The
-        // only readers are imperative input handlers (containsPoint,
-        // handleMouse). Modeling as observable adds reactive surface no
-        // consumer uses and creates a strict-mode hazard when draw() runs from
-        // a microtask outside its origin autorun.
-        get bounds() { return this.#bounds_accessor_storage; }
-        set bounds(value) { this.#bounds_accessor_storage = value; }
-        changeHandlers = new Set();
+        changeHandlers = (__runInitializers(this, _disabled_extraInitializers), new Set());
         submitHandlers = new Set();
         handleMouse(_event) { }
         handleFocus(event) {
@@ -135,20 +118,12 @@ let WidgetBase = (() => {
             this.disabled = value;
         }
         // [LAW:single-enforcer] One canonical setter for hover state lives on
-        // the base. EventRouter calls it on every widget whose hit-test result
-        // diverges from `hovered`; widgets that need to react to hover transitions
-        // override handleMouse and read the synthesized `mouse_move`. The router
-        // no longer maintains a "does this widget have setHovered" fallback path.
+        // the base. EventRouter calls it when the pointer moves onto or off this
+        // widget; widgets that need to react to hover transitions override
+        // handleMouse and read the synthesized `mouse_move`.
         setHovered(value) {
             this.hovered = value;
         }
-        // --- Hit-testing ---
-        containsPoint(x, y) {
-            const b = this.bounds;
-            if (!b)
-                return false;
-            return x >= b.x && x < b.x + b.width && y >= b.y && y < b.y + b.height;
-        }
         // --- Subscriptions ---
         onChange(handler) {
             this.changeHandlers.add(handler);
@@ -168,6 +143,23 @@ let WidgetBase = (() => {
                 handler(this);
             }
         }
+        // --- Renderable + Measurable ---
+        // [LAW:single-enforcer] The one place a widget's cells get their anchor, so
+        // a hit on any cell names this widget and the cell's place in its output
+        // (`widgetAt`). Subclasses draw; none stamps itself. A `RichText` admits no
+        // anchor, so stamping has to follow every text layout `draw` does.
+        // Every row is padded to the widest, so the widget owns its whole rectangle
+        // and a click past the end of a short row still reaches it; every row ends
+        // in a newline, so a blank last row survives the next `splitLines`.
+        // Reporting itself before it draws is what puts a widget ahead of the
+        // widgets nested in it in document order — the order focus traverses.
+        render(options) {
+            options.onDraw?.(this);
+            const drawn = Segment.splitLines(this.draw(options));
+            const [width] = Segment.getShape(drawn);
+            const lines = Segment.anchorLines(drawn.map((line) => Segment.adjustLineLength(line, width)), this);
+            return lines.flatMap((line) => [...line, Segment.line()]);
+        }
     };
 })();
 export { WidgetBase };