@promptctl/rich-js 0.18.0 → 0.19.0

package/dist/widgets/checkbox.js

@@ -0,0 +1,135 @@
+/**
+ * Checkbox widget — boolean toggle with label.
+ * [LAW:dataflow-not-control-flow] one Segment of fixed width every render;
+ * the indicator character and style come from observable state.
+ * [LAW:one-type-per-behavior] shared widget infrastructure lives on WidgetBase.
+ *
+ * Visual states:
+ *   unchecked — "[ ] label"
+ *   checked   — "[✓] label"  (ASCII fallback "[x] label" when options.asciiOnly)
+ *   focused   — underline on the rendered segment (no width change)
+ *   disabled  — dimmed
+ */
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+import { observable, action } from "mobx";
+import { Segment } from "../core/segment.js";
+import { Style } from "../core/style.js";
+import { cellLen } from "../core/cells.js";
+import { drawable } from "../core/protocol.js";
+import { ThemedWidget } from "./themed-widget.js";
+import { ink } from "./ink.js";
+let Checkbox = (() => {
+    let _classSuper = ThemedWidget;
+    let _instanceExtraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _checked_decorators;
+    let _checked_initializers = [];
+    let _checked_extraInitializers = [];
+    let _handleKey_decorators;
+    let _handleMouse_decorators;
+    return class Checkbox extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [observable];
+            _checked_decorators = [observable];
+            _handleKey_decorators = [action];
+            _handleMouse_decorators = [action];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
+            __esDecorate(this, null, _handleKey_decorators, { kind: "method", name: "handleKey", static: false, private: false, access: { has: obj => "handleKey" in obj, get: obj => obj.handleKey }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMouse_decorators, { kind: "method", name: "handleMouse", static: false, private: false, access: { has: obj => "handleMouse" in obj, get: obj => obj.handleMouse }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        id = __runInitializers(this, _instanceExtraInitializers);
+        focusable = true;
+        #label_accessor_storage = __runInitializers(this, _label_initializers, void 0);
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #checked_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _checked_initializers, void 0));
+        get checked() { return this.#checked_accessor_storage; }
+        set checked(value) { this.#checked_accessor_storage = value; }
+        constructor(options) {
+            super(options.theme);
+            __runInitializers(this, _checked_extraInitializers);
+            this.id = options.id ?? `checkbox-${options.label.toLowerCase().replace(/\s+/g, "-")}`;
+            this.label = options.label;
+            this.checked = options.checked ?? false;
+            this.disabled = options.disabled ?? false;
+        }
+        // --- Event handlers ---
+        handleKey(event) {
+            if (this.disabled)
+                return;
+            if (event.key === "space") {
+                this.checked = !this.checked;
+                this.emitChange();
+                event.stop();
+                return;
+            }
+            if (event.key === "enter") {
+                this.emitSubmit();
+                event.stop();
+            }
+        }
+        handleMouse(event) {
+            if (this.disabled)
+                return;
+            // A release that dragged off the checkbox cancels the press.
+            if (event.type === "mouse_up" && event.over) {
+                this.checked = !this.checked;
+                this.emitChange();
+            }
+        }
+        // --- Rendering ---
+        draw(options) {
+            const indicator = this.checked ? drawable(options, "✓", "x") : " ";
+            const text = `[${indicator}] ${this.label}`;
+            if (this.disabled) {
+                return [new Segment(text, new Style(this.disabledInk))];
+            }
+            const colors = ink(this.theme, this.checked ? "text-primary" : "foreground", "background");
+            return [new Segment(text, new Style({ ...colors, underline: this.focused }))];
+        }
+        measure(_options) {
+            // [LAW:one-source-of-truth] cellLen — see button.ts.
+            const width = cellLen(this.label) + 4;
+            return { minimum: width, maximum: width };
+        }
+    };
+})();
+export { Checkbox };

package/dist/widgets/dropdown.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Dropdown widget — single-select from option list, with built-in filter.
+ *
+ * [LAW:one-source-of-truth] Inline footprint (always 1 row, the header)
+ * is independent of rendered shape (1 row collapsed, 1 + M rows expanded
+ * where M = filteredOptions.length, or 1 when no matches). render() emits
+ * the header row only; renderOverlay() emits option rows or a
+ * "(no matches)" placeholder.
+ *
+ * [LAW:dataflow-not-control-flow] `expanded` and `filter` are data;
+ * layout never reserves space for the option list; the overlay pass
+ * paints over whatever is below.
+ *
+ * [LAW:one-source-of-truth] `options` and `selectedIndex` are canonical.
+ * `filter` is internal view state. `filteredOptions` is the derived
+ * subsequence (case-insensitive substring match). `highlightedIndex`
+ * indexes into `filteredOptions`. Commit maps the filtered position
+ * back to canonical idx by reference, so selection survives any filter
+ * mutation.
+ *
+ * Width invariant: measure() always returns maxLabelLen(options) + 4
+ * regardless of filter state — the query is right-clipped, never wider
+ * than the header. See docs/widgets.md → Dropdown.
+ */
+import { Segment } from "../core/segment.js";
+import { type RenderOptions } from "../core/protocol.js";
+import type { TerminalTheme } from "../core/color.js";
+import { ThemedWidget } from "./themed-widget.js";
+import type { KeyEvent, WidgetMouseEvent, WidgetFocusEvent, OverlayRenderable } from "./types.js";
+export interface DropdownOptions {
+    options: string[];
+    selectedIndex?: number;
+    id?: string;
+    disabled?: boolean;
+    theme?: TerminalTheme;
+}
+export declare class Dropdown extends ThemedWidget implements OverlayRenderable {
+    readonly id: string;
+    readonly focusable = true;
+    accessor options: string[];
+    accessor selectedIndex: number;
+    accessor expanded: boolean;
+    accessor highlightedIndex: number;
+    accessor filter: string;
+    get filteredOptions(): {
+        label: string;
+        idx: number;
+    }[];
+    constructor(options: DropdownOptions);
+    private clampIndex;
+    handleKey(event: KeyEvent): void;
+    handleMouse(event: WidgetMouseEvent): void;
+    handleFocus(event: WidgetFocusEvent): void;
+    protected draw(options: RenderOptions): Iterable<Segment>;
+    private headerText;
+    renderOverlay(_options: RenderOptions): Iterable<Segment> | null;
+    private renderNoMatchRow;
+    private renderOptionRow;
+    private maxLabelLen;
+    measure(_options: RenderOptions): {
+        minimum: number;
+        maximum: number;
+    };
+}

package/dist/widgets/dropdown.js

@@ -0,0 +1,416 @@
+/**
+ * Dropdown widget — single-select from option list, with built-in filter.
+ *
+ * [LAW:one-source-of-truth] Inline footprint (always 1 row, the header)
+ * is independent of rendered shape (1 row collapsed, 1 + M rows expanded
+ * where M = filteredOptions.length, or 1 when no matches). render() emits
+ * the header row only; renderOverlay() emits option rows or a
+ * "(no matches)" placeholder.
+ *
+ * [LAW:dataflow-not-control-flow] `expanded` and `filter` are data;
+ * layout never reserves space for the option list; the overlay pass
+ * paints over whatever is below.
+ *
+ * [LAW:one-source-of-truth] `options` and `selectedIndex` are canonical.
+ * `filter` is internal view state. `filteredOptions` is the derived
+ * subsequence (case-insensitive substring match). `highlightedIndex`
+ * indexes into `filteredOptions`. Commit maps the filtered position
+ * back to canonical idx by reference, so selection survives any filter
+ * mutation.
+ *
+ * Width invariant: measure() always returns maxLabelLen(options) + 4
+ * regardless of filter state — the query is right-clipped, never wider
+ * than the header. See docs/widgets.md → Dropdown.
+ */
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+import { observable, action, observableShallow } from "mobx";
+import { Segment } from "../core/segment.js";
+import { Style } from "../core/style.js";
+import { cellLen, setCellSize, splitText, asCellCol } from "../core/cells.js";
+import { drawable } from "../core/protocol.js";
+import { ThemedWidget } from "./themed-widget.js";
+import { ink } from "./ink.js";
+let Dropdown = (() => {
+    let _classSuper = ThemedWidget;
+    let _instanceExtraInitializers = [];
+    let _options_decorators;
+    let _options_initializers = [];
+    let _options_extraInitializers = [];
+    let _selectedIndex_decorators;
+    let _selectedIndex_initializers = [];
+    let _selectedIndex_extraInitializers = [];
+    let _expanded_decorators;
+    let _expanded_initializers = [];
+    let _expanded_extraInitializers = [];
+    let _highlightedIndex_decorators;
+    let _highlightedIndex_initializers = [];
+    let _highlightedIndex_extraInitializers = [];
+    let _filter_decorators;
+    let _filter_initializers = [];
+    let _filter_extraInitializers = [];
+    let _handleKey_decorators;
+    let _handleMouse_decorators;
+    let _handleFocus_decorators;
+    return class Dropdown extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _options_decorators = [observableShallow];
+            _selectedIndex_decorators = [observable];
+            _expanded_decorators = [observable];
+            _highlightedIndex_decorators = [observable];
+            _filter_decorators = [observable];
+            _handleKey_decorators = [action];
+            _handleMouse_decorators = [action];
+            _handleFocus_decorators = [action];
+            __esDecorate(this, null, _options_decorators, { kind: "accessor", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
+            __esDecorate(this, null, _selectedIndex_decorators, { kind: "accessor", name: "selectedIndex", static: false, private: false, access: { has: obj => "selectedIndex" in obj, get: obj => obj.selectedIndex, set: (obj, value) => { obj.selectedIndex = value; } }, metadata: _metadata }, _selectedIndex_initializers, _selectedIndex_extraInitializers);
+            __esDecorate(this, null, _expanded_decorators, { kind: "accessor", name: "expanded", static: false, private: false, access: { has: obj => "expanded" in obj, get: obj => obj.expanded, set: (obj, value) => { obj.expanded = value; } }, metadata: _metadata }, _expanded_initializers, _expanded_extraInitializers);
+            __esDecorate(this, null, _highlightedIndex_decorators, { kind: "accessor", name: "highlightedIndex", static: false, private: false, access: { has: obj => "highlightedIndex" in obj, get: obj => obj.highlightedIndex, set: (obj, value) => { obj.highlightedIndex = value; } }, metadata: _metadata }, _highlightedIndex_initializers, _highlightedIndex_extraInitializers);
+            __esDecorate(this, null, _filter_decorators, { kind: "accessor", name: "filter", static: false, private: false, access: { has: obj => "filter" in obj, get: obj => obj.filter, set: (obj, value) => { obj.filter = value; } }, metadata: _metadata }, _filter_initializers, _filter_extraInitializers);
+            __esDecorate(this, null, _handleKey_decorators, { kind: "method", name: "handleKey", static: false, private: false, access: { has: obj => "handleKey" in obj, get: obj => obj.handleKey }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMouse_decorators, { kind: "method", name: "handleMouse", static: false, private: false, access: { has: obj => "handleMouse" in obj, get: obj => obj.handleMouse }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFocus_decorators, { kind: "method", name: "handleFocus", static: false, private: false, access: { has: obj => "handleFocus" in obj, get: obj => obj.handleFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        id = __runInitializers(this, _instanceExtraInitializers);
+        focusable = true;
+        #options_accessor_storage = __runInitializers(this, _options_initializers, void 0);
+        get options() { return this.#options_accessor_storage; }
+        set options(value) { this.#options_accessor_storage = value; }
+        #selectedIndex_accessor_storage = (__runInitializers(this, _options_extraInitializers), __runInitializers(this, _selectedIndex_initializers, void 0));
+        get selectedIndex() { return this.#selectedIndex_accessor_storage; }
+        set selectedIndex(value) { this.#selectedIndex_accessor_storage = value; }
+        #expanded_accessor_storage = (__runInitializers(this, _selectedIndex_extraInitializers), __runInitializers(this, _expanded_initializers, false));
+        get expanded() { return this.#expanded_accessor_storage; }
+        set expanded(value) { this.#expanded_accessor_storage = value; }
+        #highlightedIndex_accessor_storage = (__runInitializers(this, _expanded_extraInitializers), __runInitializers(this, _highlightedIndex_initializers, void 0));
+        get highlightedIndex() { return this.#highlightedIndex_accessor_storage; }
+        set highlightedIndex(value) { this.#highlightedIndex_accessor_storage = value; }
+        #filter_accessor_storage = (__runInitializers(this, _highlightedIndex_extraInitializers), __runInitializers(this, _filter_initializers, ""));
+        get filter() { return this.#filter_accessor_storage; }
+        set filter(value) { this.#filter_accessor_storage = value; }
+        // [LAW:dataflow-not-control-flow] Derived view; empty filter falls out
+        // naturally because "".includes("") is true for every label — no
+        // special-case branch.
+        get filteredOptions() {
+            const f = this.filter.toLowerCase();
+            const result = [];
+            for (let i = 0; i < this.options.length; i++) {
+                const label = this.options[i];
+                if (label.toLowerCase().includes(f))
+                    result.push({ label, idx: i });
+            }
+            return result;
+        }
+        constructor(options) {
+            super(options.theme);
+            __runInitializers(this, _filter_extraInitializers);
+            this.id = options.id ?? `dropdown-${Math.random().toString(36).slice(2, 8)}`;
+            this.options = [...options.options];
+            // [LAW:types-are-the-program] selectedIndex must point to a valid
+            // option (or be 0 for the empty-options case). Clamp at the trust
+            // boundary so headerText / render / commit logic can all assume
+            // validity. Empty options is allowed — render falls back to an
+            // empty label and commit is a no-op until options are populated.
+            this.selectedIndex = this.clampIndex(options.selectedIndex ?? 0);
+            this.highlightedIndex = this.selectedIndex;
+            this.disabled = options.disabled ?? false;
+        }
+        // [LAW:single-enforcer] One place owns "is this index valid for the
+        // current options". selectedIndex and options are public observables —
+        // external code can move them out of range. Anywhere internal code
+        // seeds highlightedIndex from selectedIndex (constructor + every
+        // expand path), route through this clamp so the seeded value is
+        // always a legal option index (or 0 for empty options).
+        clampIndex(n) {
+            if (this.options.length === 0)
+                return 0;
+            return Math.max(0, Math.min(n, this.options.length - 1));
+        }
+        // --- Event handlers ---
+        handleKey(event) {
+            if (this.disabled)
+                return;
+            const isPrintable = event.character.length === 1 &&
+                !event.ctrl &&
+                !event.meta &&
+                event.character >= " " &&
+                event.character !== "\x7f";
+            if (!this.expanded) {
+                // enter/space remain the explicit "open with selection seeded" gesture.
+                if (event.key === "enter" || event.key === "space") {
+                    this.expanded = true;
+                    this.highlightedIndex = this.clampIndex(this.selectedIndex);
+                    event.stop();
+                    return;
+                }
+                // Any other printable char auto-expands and starts filtering.
+                if (isPrintable) {
+                    this.expanded = true;
+                    this.filter = this.filter + event.character;
+                    this.highlightedIndex = 0;
+                    event.stop();
+                }
+                return;
+            }
+            // expanded
+            switch (event.key) {
+                case "up":
+                    this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+                    event.stop();
+                    return;
+                case "down": {
+                    const max = Math.max(0, this.filteredOptions.length - 1);
+                    this.highlightedIndex = Math.min(max, this.highlightedIndex + 1);
+                    event.stop();
+                    return;
+                }
+                case "enter": {
+                    // [LAW:one-source-of-truth] Map filtered position → canonical idx.
+                    // No-op when filteredOptions is empty (highlighted is undefined).
+                    const picked = this.filteredOptions[this.highlightedIndex];
+                    event.stop();
+                    if (picked === undefined)
+                        return;
+                    this.selectedIndex = picked.idx;
+                    this.filter = "";
+                    this.expanded = false;
+                    this.emitChange();
+                    this.emitSubmit();
+                    return;
+                }
+                case "escape":
+                    // Single-step: clear filter + collapse.
+                    this.filter = "";
+                    this.expanded = false;
+                    event.stop();
+                    return;
+                case "backspace":
+                    // [LAW:dataflow-not-control-flow] slice(0,-1) on "" is "" — no guard.
+                    this.filter = this.filter.slice(0, -1);
+                    this.highlightedIndex = 0;
+                    event.stop();
+                    return;
+                case "tab":
+                    // First Tab while expanded cancels (clear filter + collapse) and
+                    // KEEPS focus on the dropdown. event.stop() halts the chain so
+                    // FocusManager's normal-priority Tab handler never runs — focus
+                    // traversal only happens on the *next* Tab press, when this widget
+                    // is collapsed and no longer stops the event. Shift direction is
+                    // ignored: both Tab and Shift+Tab cancel.
+                    this.filter = "";
+                    this.expanded = false;
+                    event.stop();
+                    return;
+            }
+            if (isPrintable) {
+                this.filter = this.filter + event.character;
+                this.highlightedIndex = 0;
+                event.stop();
+            }
+        }
+        handleMouse(event) {
+            if (this.disabled)
+                return;
+            if (event.type !== "mouse_up")
+                return;
+            // [LAW:one-source-of-truth] Whether the release is on this dropdown is
+            // read off the frame (`over`), not its own idea of its size; a press on
+            // it that dragged away releases elsewhere. Row 0 is the header, and the
+            // overlay rows continue below it.
+            const inside = event.over;
+            if (!this.expanded) {
+                if (inside) {
+                    this.expanded = true;
+                    this.highlightedIndex = this.clampIndex(this.selectedIndex);
+                }
+                return;
+            }
+            // expanded: row 0 is the header; rows 1..M are filtered options.
+            if (!inside) {
+                // Click outside cancels — clear filter + collapse.
+                this.filter = "";
+                this.expanded = false;
+                return;
+            }
+            if (event.y === 0) {
+                // Click the header → collapse + clear filter, no selection change.
+                this.filter = "";
+                this.expanded = false;
+                return;
+            }
+            // [LAW:one-source-of-truth] Filtered position → canonical idx.
+            const picked = this.filteredOptions[event.y - 1];
+            if (picked === undefined)
+                return;
+            this.selectedIndex = picked.idx;
+            this.filter = "";
+            this.expanded = false;
+            this.emitChange();
+            this.emitSubmit();
+        }
+        // [LAW:single-enforcer] FocusManager is the single dispatcher of focus
+        // transitions; overriding handleFocus here catches every blur path (Tab
+        // cycling, programmatic focus, unregister) so the overlay cannot outlive
+        // the widget's focus. Collapse is the data; no separate "should I close"
+        // branch lives at the router or elsewhere.
+        handleFocus(event) {
+            super.handleFocus(event);
+            if (event.type === "blur") {
+                this.filter = "";
+                this.expanded = false;
+            }
+        }
+        // --- Rendering ---
+        draw(options) {
+            // Header only — the inline footprint that flow layout sees. Always
+            // 1 row regardless of `expanded`/`filter`. Option rows live in
+            // renderOverlay. Width invariant: maxLabelLen + 4.
+            const arrowChar = drawable(options, "▾", "v");
+            // [LAW:one-source-of-truth] Both glyphs are resolved here, once, and flow
+            // into headerText as data rather than headerText re-reading the options.
+            const caret = this.focused ? drawable(options, "│", "|") : "";
+            const maxLabelLen = this.maxLabelLen();
+            const baseStyle = this.disabled
+                ? new Style(this.disabledInk)
+                : new Style({
+                    ...ink(this.theme, "foreground", "surface"),
+                    underline: this.focused,
+                });
+            const headerLabel = this.headerText(maxLabelLen, caret);
+            return [
+                new Segment("[", baseStyle),
+                new Segment(`${headerLabel} ${arrowChar}`, baseStyle),
+                new Segment("]", baseStyle),
+            ];
+        }
+        // [LAW:dataflow-not-control-flow] One header text function; the data
+        // (filter empty vs not) chooses between selected-label and query+cursor.
+        // Both branches yield exactly maxLabelLen cells — width invariant.
+        // Selected label is centered; filter input is left-aligned so the caret
+        // doesn't jitter horizontally while typing.
+        //
+        // [LAW:one-source-of-truth] All width math is in terminal cells via
+        // cellLen / setCellSize / splitText — plain `.length` would miscount
+        // wide / emoji characters and break the width invariant.
+        headerText(maxLabelLen, caret) {
+            if (this.filter === "") {
+                const raw = this.options[this.selectedIndex] ?? "";
+                const w = cellLen(raw);
+                if (w >= maxLabelLen)
+                    return setCellSize(raw, asCellCol(maxLabelLen));
+                const pad = maxLabelLen - w;
+                const left = Math.floor(pad / 2);
+                const right = pad - left;
+                return " ".repeat(left) + raw + " ".repeat(right);
+            }
+            // Leading space gives the filter input a small gutter from the [ chrome,
+            // matching the visual breathing room of the centered label.
+            const filterRoom = Math.max(0, maxLabelLen - cellLen(caret) - 1);
+            const [filterText] = splitText(this.filter, asCellCol(filterRoom));
+            return setCellSize(" " + filterText + caret, asCellCol(maxLabelLen));
+        }
+        renderOverlay(_options) {
+            if (!this.expanded)
+                return null;
+            const maxLabelLen = this.maxLabelLen();
+            const fopts = this.filteredOptions;
+            if (fopts.length === 0)
+                return this.renderNoMatchRow(maxLabelLen);
+            const segments = [];
+            for (let i = 0; i < fopts.length; i++) {
+                if (i > 0)
+                    segments.push(new Segment("\n"));
+                segments.push(...this.renderOptionRow(fopts[i], i, maxLabelLen));
+            }
+            return segments;
+        }
+        renderNoMatchRow(maxLabelLen) {
+            // Right-clipped + padded so width matches a normal option row.
+            const text = setCellSize("(no matches)", asCellCol(maxLabelLen));
+            const inner = ` ${text} `;
+            const style = this.disabled
+                ? new Style(this.disabledInk)
+                : new Style({
+                    ...ink(this.theme, "foreground", "surface"),
+                    dim: true,
+                });
+            return [
+                new Segment(" ", style),
+                new Segment(inner, style),
+                new Segment(" ", style),
+            ];
+        }
+        renderOptionRow(entry, fpos, maxLabelLen) {
+            // Row: "  " + label.padEnd(maxLabelLen) + "  "
+            // Width = 1 + 1 + maxLabelLen + 1 + 1 = maxLabelLen + 4.
+            // Overlay rows are unbracketed — selection/highlight are conveyed by bg
+            // color; the header keeps [ ] as its focus-indicator chrome.
+            const label = setCellSize(entry.label, asCellCol(maxLabelLen));
+            const inner = ` ${label} `;
+            const isSelected = entry.idx === this.selectedIndex;
+            const isHighlighted = fpos === this.highlightedIndex;
+            // Highlighted: muted bg → text-primary (mostly-accent fg) is readable.
+            // Selected:    full primary bg → on-primary (WCAG contrast) for fg.
+            const rowStyle = this.disabled
+                ? new Style(this.disabledInk)
+                : isHighlighted
+                    ? new Style(ink(this.theme, "text-primary", "primary-muted"))
+                    : isSelected
+                        ? new Style(ink(this.theme, "on-primary", "primary"))
+                        : new Style(ink(this.theme, "foreground", "surface"));
+            return [
+                new Segment(" ", rowStyle),
+                new Segment(inner, rowStyle),
+                new Segment(" ", rowStyle),
+            ];
+        }
+        maxLabelLen() {
+            let m = 0;
+            for (const label of this.options) {
+                const w = cellLen(label);
+                if (w > m)
+                    m = w;
+            }
+            return m;
+        }
+        measure(_options) {
+            const width = this.maxLabelLen() + 4;
+            return { minimum: width, maximum: width };
+        }
+    };
+})();
+export { Dropdown };