@promptctl/rich-js 0.16.0 → 0.18.0

package/dist/widgets/button.js

@@ -1,206 +0,0 @@
-/**
- * Button widget — labeled action trigger with variant styling.
- * [LAW:dataflow-not-control-flow] rendering is a pure function of observable state.
- * [LAW:one-type-per-behavior] shared widget infrastructure lives on WidgetBase.
- *
- * Four visual states:
- *   normal  — variant colors from theme semantic palette (muted)
- *   hover   — full variant accent bg + on-accent fg (WCAG contrast)
- *   focus   — brackets [ label ] surrounding the button
- *   active  — same color pair as hover, plus bold (pressed cue)
- *
- * States compose: active > focus > hover > normal. Active and hover
- * deliberately share colors — active differentiates via bold rather
- * than fg/bg inversion, because inversion produces mostly-accent text
- * on bg-tinted surface, which is unreadable for accents whose contrast
- * partner depends on luminance.
- */
-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, observableRef } from "mobx";
-import { Segment } from "../core/segment.js";
-import { Style } from "../core/style.js";
-import { ColorSpec } from "../core/color.js";
-import { cellLen } from "../core/cells.js";
-import { DEFAULT_TERMINAL_THEME } from "../themes/terminalThemes.js";
-import { WidgetBase } from "./widget-base.js";
-// Variant → palette key mapping. Per variant:
-//   bg / fg     — normal state. Muted accent bg + mostly-accent fg → readable.
-//   hover       — full accent bg; pair with hoverFg, NOT with `fg`. The
-//                 text-* keys are mostly-accent and would clash on a full
-//                 accent bg.
-//   hoverFg     — WCAG-correct contrast colour (on-${accent}) for full bg.
-const VARIANT_KEYS = {
-    default: { bg: "surface", fg: "foreground", hover: "primary", hoverFg: "on-primary" },
-    primary: { bg: "primary-muted", fg: "text-primary", hover: "primary", hoverFg: "on-primary" },
-    success: { bg: "success-muted", fg: "text-success", hover: "success", hoverFg: "on-success" },
-    warning: { bg: "warning-muted", fg: "text-warning", hover: "warning", hoverFg: "on-warning" },
-    danger: { bg: "error-muted", fg: "text-error", hover: "error", hoverFg: "on-error" },
-};
-let Button = (() => {
-    let _classSuper = WidgetBase;
-    let _instanceExtraInitializers = [];
-    let _label_decorators;
-    let _label_initializers = [];
-    let _label_extraInitializers = [];
-    let _variant_decorators;
-    let _variant_initializers = [];
-    let _variant_extraInitializers = [];
-    let __theme_decorators;
-    let __theme_initializers = [];
-    let __theme_extraInitializers = [];
-    let _setTheme_decorators;
-    let _handleKey_decorators;
-    let _handleMouse_decorators;
-    let _setActive_decorators;
-    return class Button extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _label_decorators = [observable];
-            _variant_decorators = [observableRef];
-            __theme_decorators = [observableRef];
-            _setTheme_decorators = [action];
-            _handleKey_decorators = [action];
-            _handleMouse_decorators = [action];
-            _setActive_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, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
-            __esDecorate(this, null, __theme_decorators, { kind: "accessor", name: "_theme", static: false, private: false, access: { has: obj => "_theme" in obj, get: obj => obj._theme, set: (obj, value) => { obj._theme = value; } }, metadata: _metadata }, __theme_initializers, __theme_extraInitializers);
-            __esDecorate(this, null, _setTheme_decorators, { kind: "method", name: "setTheme", static: false, private: false, access: { has: obj => "setTheme" in obj, get: obj => obj.setTheme }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __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, _setActive_decorators, { kind: "method", name: "setActive", static: false, private: false, access: { has: obj => "setActive" in obj, get: obj => obj.setActive }, 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; }
-        #variant_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _variant_initializers, void 0));
-        get variant() { return this.#variant_accessor_storage; }
-        set variant(value) { this.#variant_accessor_storage = value; }
-        #_theme_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, __theme_initializers, void 0));
-        // [LAW:types-are-the-program] @observableRef so setTheme() triggers a
-        // re-render — see slider.ts.
-        get _theme() { return this.#_theme_accessor_storage; }
-        set _theme(value) { this.#_theme_accessor_storage = value; }
-        constructor(options) {
-            super();
-            __runInitializers(this, __theme_extraInitializers);
-            this.id = options.id ?? `button-${options.label.toLowerCase().replace(/\s+/g, "-")}`;
-            this.label = options.label;
-            this.variant = options.variant ?? "default";
-            this.disabled = options.disabled ?? false;
-            this._theme = options.theme ?? DEFAULT_TERMINAL_THEME;
-        }
-        setTheme(theme) { this._theme = theme; }
-        // --- Event handlers ---
-        handleKey(event) {
-            if (this.disabled)
-                return;
-            if (event.key === "enter" || event.key === "space") {
-                this.active = true;
-                this.emitSubmit();
-                // [LAW:one-source-of-truth] Keyboard activation must leave the widget
-                // in the same end state as mouse activation: `active` cleared after
-                // the press. Mouse has a natural mouse_up to clear it; keyboard does
-                // not, so we schedule the clear on the next microtask. The single-
-                // frame `active=true` paint gives the user the visual "pressed" cue
-                // and is then cleared, matching mouse behaviour.
-                queueMicrotask(() => { if (this.active)
-                    this.setActive(false); });
-                event.stop();
-            }
-        }
-        handleMouse(event) {
-            if (this.disabled)
-                return;
-            if (event.type === "mouse_down") {
-                this.active = true;
-            }
-            if (event.type === "mouse_up") {
-                if (this.active) {
-                    this.active = false;
-                    this.emitSubmit();
-                }
-            }
-        }
-        // --- Active mutator (the keyboard-activation microtask uses this) ---
-        setActive(value) { this.active = value; }
-        // --- Rendering ---
-        render(_options) {
-            // [LAW:dataflow-not-control-flow] same segment count and width every state
-            const focused = this.focused;
-            const left = focused ? "[" : " ";
-            const right = focused ? "]" : " ";
-            const text = `${left} ${this.label} ${right}`;
-            if (this.disabled) {
-                return [new Segment(text, new Style({ color: "#666666", bgcolor: "#333333", dim: true }))];
-            }
-            // Active and hover share the same colour pair (full accent bg + on-accent fg).
-            // Active is differentiated by bold, not by inverting fg/bg — inversion gives
-            // mostly-accent text on mostly-bg-tinted background, which is unreadable for
-            // accents whose contrast partner depends on luminance.
-            if (this.active || this.hovered) {
-                const fg = this.resolvePalette(VARIANT_KEYS[this.variant].hoverFg);
-                const bg = this.resolvePalette(VARIANT_KEYS[this.variant].hover);
-                return [new Segment(text, new Style({ color: fg, bgcolor: bg, bold: this.active }))];
-            }
-            const { fg, bg } = this.resolveColors("bg");
-            return [new Segment(text, new Style({ color: fg, bgcolor: bg }))];
-        }
-        measure(_options) {
-            // [LAW:one-source-of-truth] cellLen is the cell-width authority; .length
-            // counts UTF-16 code units and miscounts wide / emoji characters.
-            const width = cellLen(this.label) + 4;
-            return { minimum: width, maximum: width };
-        }
-        // --- Palette resolution ---
-        resolveColors(bgKey) {
-            const keys = VARIANT_KEYS[this.variant];
-            return {
-                fg: this.resolvePalette(keys.fg),
-                bg: this.resolvePalette(bgKey === "hover" ? keys.hover : keys.bg),
-            };
-        }
-        resolvePalette(key) {
-            const rgba = this._theme.palette.get(key);
-            // [LAW:no-defensive-null-guards] palette is required and must contain all keys.
-            return ColorSpec.fromRgba(rgba);
-        }
-    };
-})();
-export { Button };

package/dist/widgets/checkbox.d.ts

@@ -1,41 +0,0 @@
-/**
- * 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
- */
-import { Segment } from "../core/segment.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";
-export interface CheckboxOptions {
-    label: string;
-    checked?: boolean;
-    id?: string;
-    disabled?: boolean;
-    theme?: TerminalTheme;
-}
-export declare class Checkbox extends WidgetBase {
-    readonly id: string;
-    readonly focusable = true;
-    accessor label: string;
-    accessor checked: boolean;
-    private accessor _theme;
-    constructor(options: CheckboxOptions);
-    setTheme(theme: TerminalTheme): void;
-    handleKey(event: KeyEvent): void;
-    handleMouse(event: WidgetMouseEvent): void;
-    render(options: RenderOptions): Iterable<Segment>;
-    measure(_options: RenderOptions): {
-        minimum: number;
-        maximum: number;
-    };
-    private resolvePalette;
-}

package/dist/widgets/checkbox.js

@@ -1,155 +0,0 @@
-/**
- * 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, observableRef } from "mobx";
-import { Segment } from "../core/segment.js";
-import { Style } from "../core/style.js";
-import { ColorSpec } from "../core/color.js";
-import { cellLen } from "../core/cells.js";
-import { DEFAULT_TERMINAL_THEME } from "../themes/terminalThemes.js";
-import { WidgetBase } from "./widget-base.js";
-let Checkbox = (() => {
-    let _classSuper = WidgetBase;
-    let _instanceExtraInitializers = [];
-    let _label_decorators;
-    let _label_initializers = [];
-    let _label_extraInitializers = [];
-    let _checked_decorators;
-    let _checked_initializers = [];
-    let _checked_extraInitializers = [];
-    let __theme_decorators;
-    let __theme_initializers = [];
-    let __theme_extraInitializers = [];
-    let _setTheme_decorators;
-    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];
-            __theme_decorators = [observableRef];
-            _setTheme_decorators = [action];
-            _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, __theme_decorators, { kind: "accessor", name: "_theme", static: false, private: false, access: { has: obj => "_theme" in obj, get: obj => obj._theme, set: (obj, value) => { obj._theme = value; } }, metadata: _metadata }, __theme_initializers, __theme_extraInitializers);
-            __esDecorate(this, null, _setTheme_decorators, { kind: "method", name: "setTheme", static: false, private: false, access: { has: obj => "setTheme" in obj, get: obj => obj.setTheme }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __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; }
-        #_theme_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, __theme_initializers, void 0));
-        // [LAW:types-are-the-program] @observableRef so setTheme() triggers a
-        // re-render — see slider.ts.
-        get _theme() { return this.#_theme_accessor_storage; }
-        set _theme(value) { this.#_theme_accessor_storage = value; }
-        constructor(options) {
-            super();
-            __runInitializers(this, __theme_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;
-            this._theme = options.theme ?? DEFAULT_TERMINAL_THEME;
-        }
-        setTheme(theme) { this._theme = theme; }
-        // --- 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;
-            if (event.type === "mouse_up") {
-                this.checked = !this.checked;
-                this.emitChange();
-            }
-        }
-        // --- Rendering ---
-        render(options) {
-            const indicator = this.checked ? (options.asciiOnly ? "x" : "✓") : " ";
-            const text = `[${indicator}] ${this.label}`;
-            if (this.disabled) {
-                return [new Segment(text, new Style({ color: "#666666", bgcolor: "#333333", dim: true }))];
-            }
-            const fg = this.checked ? this.resolvePalette("primary") : this.resolvePalette("foreground");
-            return [new Segment(text, new Style({ color: fg, 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 };
-        }
-        // --- Palette resolution ---
-        resolvePalette(key) {
-            const rgba = this._theme.palette.get(key);
-            // [LAW:no-defensive-null-guards] palette must contain all keys; missing is a construction bug.
-            return ColorSpec.fromRgba(rgba);
-        }
-    };
-})();
-export { Checkbox };

package/dist/widgets/dropdown.d.ts

@@ -1,67 +0,0 @@
-/**
- * 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 { WidgetBase } from "./widget-base.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 WidgetBase 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;
-    }[];
-    private accessor _theme;
-    constructor(options: DropdownOptions);
-    private clampIndex;
-    setTheme(theme: TerminalTheme): void;
-    handleKey(event: KeyEvent): void;
-    handleMouse(event: WidgetMouseEvent): void;
-    handleFocus(event: WidgetFocusEvent): void;
-    render(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;
-    };
-    private resolvePalette;
-}