@promptctl/rich-js 0.2.0 → 0.3.0

package/dist/widgets/button.js

@@ -5,11 +5,15 @@
  *
  * Four visual states:
  *   normal  — variant colors from theme semantic palette (muted)
- *   hover   — full variant accent color (brighter than muted)
+ *   hover   — full variant accent bg + on-accent fg (WCAG contrast)
  *   focus   — brackets [ label ] surrounding the button
- *   active  — color reversal (pressed)
+ *   active  — same color pair as hover, plus bold (pressed cue)
  *
- * States compose: active > focus > hover > normal.
+ * 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;
@@ -49,6 +53,7 @@ import { observable, action } 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:
@@ -65,7 +70,7 @@ const VARIANT_KEYS = {
     danger: { bg: "error-muted", fg: "text-error", hover: "error", hoverFg: "on-error" },
 };
 let Button = (() => {
-    var _a;
+    var _a, _b;
     let _classSuper = WidgetBase;
     let _instanceExtraInitializers = [];
     let _label_decorators;
@@ -74,24 +79,29 @@ let Button = (() => {
     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 _setHovered_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 = [(_a = observable).ref.bind(_a)];
+            __theme_decorators = [(_b = observable).ref.bind(_b)];
+            _setTheme_decorators = [action];
             _handleKey_decorators = [action];
             _handleMouse_decorators = [action];
-            _setHovered_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, _setHovered_decorators, { kind: "method", name: "setHovered", static: false, private: false, access: { has: obj => "setHovered" in obj, get: obj => obj.setHovered }, 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 });
         }
@@ -103,9 +113,14 @@ let Button = (() => {
         #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 = __runInitializers(this, _variant_extraInitializers);
+        #_theme_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, __theme_initializers, void 0));
+        // [LAW:types-are-the-program] @observable.ref 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";
@@ -120,6 +135,15 @@ let Button = (() => {
             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) {
@@ -135,8 +159,7 @@ let Button = (() => {
                 }
             }
         }
-        // --- Hover/active mutators (router fast-path uses setHovered) ---
-        setHovered(value) { this.hovered = value; }
+        // --- Active mutator (the keyboard-activation microtask uses this) ---
         setActive(value) { this.active = value; }
         // --- Rendering ---
         render(_options) {
@@ -161,7 +184,9 @@ let Button = (() => {
             return [new Segment(text, new Style({ color: fg, bgcolor: bg }))];
         }
         measure(_options) {
-            const width = this.label.length + 4;
+            // [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 ---

package/dist/widgets/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/widgets/button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/widgets/button.ts"],"names":[],"mappings":"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"}

package/dist/widgets/checkbox.d.ts

@@ -27,12 +27,11 @@ export declare class Checkbox extends WidgetBase {
     readonly focusable = true;
     accessor label: string;
     accessor checked: boolean;
-    private _theme;
+    private accessor _theme;
     constructor(options: CheckboxOptions);
     setTheme(theme: TerminalTheme): void;
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
-    setHovered(value: boolean): void;
     render(options: RenderOptions): Iterable<Segment>;
     measure(_options: RenderOptions): {
         minimum: number;

package/dist/widgets/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/widgets/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAI7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,qBAAa,QAAS,SAAQ,UAAU;IACtC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,SAAS,QAAQ;IAEd,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAEtC,OAAO,CAAC,MAAM,CAAgB;gBAElB,OAAO,EAAE,eAAe;IASpC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKpC,SAAS,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAavB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAWnD,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAIhC,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;IAYjD,OAAO,CAAC,QAAQ,EAAE,aAAa,GAAG;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE;IAOtE,OAAO,CAAC,cAAc;CAKvB"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/widgets/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAK7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,qBAAa,QAAS,SAAQ,UAAU;IACtC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,SAAS,QAAQ;IAEd,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAItB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;gBAE3C,OAAO,EAAE,eAAe;IAUpC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKpC,SAAS,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAevB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAUnD,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;IAYjD,OAAO,CAAC,QAAQ,EAAE,aAAa,GAAG;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE;IAQtE,OAAO,CAAC,cAAc;CAKvB"}

package/dist/widgets/checkbox.js

@@ -48,9 +48,11 @@ import { observable, action } 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 = (() => {
+    var _a;
     let _classSuper = WidgetBase;
     let _instanceExtraInitializers = [];
     let _label_decorators;
@@ -59,22 +61,27 @@ let Checkbox = (() => {
     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;
-    let _setHovered_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 = [(_a = observable).ref.bind(_a)];
+            _setTheme_decorators = [action];
             _handleKey_decorators = [action];
             _handleMouse_decorators = [action];
-            _setHovered_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);
-            __esDecorate(this, null, _setHovered_decorators, { kind: "method", name: "setHovered", static: false, private: false, access: { has: obj => "setHovered" in obj, get: obj => obj.setHovered }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         id = __runInitializers(this, _instanceExtraInitializers);
@@ -85,9 +92,14 @@ let Checkbox = (() => {
         #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 = __runInitializers(this, _checked_extraInitializers);
+        #_theme_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, __theme_initializers, void 0));
+        // [LAW:types-are-the-program] @observable.ref 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;
@@ -102,10 +114,12 @@ let Checkbox = (() => {
             if (event.key === "space") {
                 this.checked = !this.checked;
                 this.emitChange();
+                event.stop();
                 return;
             }
             if (event.key === "enter") {
                 this.emitSubmit();
+                event.stop();
             }
         }
         handleMouse(event) {
@@ -116,8 +130,6 @@ let Checkbox = (() => {
                 this.emitChange();
             }
         }
-        // --- Hover/active mutators (router fast-path uses setHovered) ---
-        setHovered(value) { this.hovered = value; }
         // --- Rendering ---
         render(options) {
             const indicator = this.checked ? (options.asciiOnly ? "x" : "✓") : " ";
@@ -129,7 +141,8 @@ let Checkbox = (() => {
             return [new Segment(text, new Style({ color: fg, underline: this.focused }))];
         }
         measure(_options) {
-            const width = this.label.length + 4;
+            // [LAW:one-source-of-truth] cellLen — see button.ts.
+            const width = cellLen(this.label) + 4;
             return { minimum: width, maximum: width };
         }
         // --- Palette resolution ---

package/dist/widgets/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/widgets/checkbox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/widgets/checkbox.ts"],"names":[],"mappings":"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"}

package/dist/widgets/dropdown.d.ts

@@ -26,7 +26,7 @@ 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, OverlayRenderable } from "./types.js";
+import type { KeyEvent, WidgetMouseEvent, WidgetFocusEvent, OverlayRenderable } from "./types.js";
 export interface DropdownOptions {
     options: string[];
     selectedIndex?: number;
@@ -46,12 +46,13 @@ export declare class Dropdown extends WidgetBase implements OverlayRenderable {
         label: string;
         idx: number;
     }[];
-    private _theme;
+    private accessor _theme;
     constructor(options: DropdownOptions);
+    private clampIndex;
     setTheme(theme: TerminalTheme): void;
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
-    setHovered(value: boolean): void;
+    handleFocus(event: WidgetFocusEvent): void;
     render(options: RenderOptions): Iterable<Segment>;
     private headerText;
     renderOverlay(_options: RenderOptions): Iterable<Segment> | null;

package/dist/widgets/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/widgets/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAI7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEhF,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,qBAAa,QAAS,SAAQ,UAAW,YAAW,iBAAiB;IACnE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,SAAS,QAAQ;IAEN,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAS;IACnC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAM;IAKzC,IAAI,eAAe,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,CAQtD;IAED,OAAO,CAAC,MAAM,CAAgB;gBAElB,OAAO,EAAE,eAAe;IAUpC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKpC,SAAS,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAmEvB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAgDnD,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAIhC,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;IA0BjD,OAAO,CAAC,UAAU;IAUlB,aAAa,CAAC,QAAQ,EAAE,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAI;IAchE,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,eAAe;IAuCvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ,EAAE,aAAa,GAAG;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE;IAOtE,OAAO,CAAC,cAAc;CAKvB"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/widgets/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAK7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EACV,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,qBAAa,QAAS,SAAQ,UAAW,YAAW,iBAAiB;IACnE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,SAAS,QAAQ;IAEN,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAS;IACnC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAM;IAKzC,IAAI,eAAe,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,CAQtD;IAKe,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;gBAE3C,OAAO,EAAE,eAAe;IAqBpC,OAAO,CAAC,UAAU;IAMlB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKpC,SAAS,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAsFvB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAmD1C,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAUnD,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;IAoCjD,OAAO,CAAC,UAAU;IAiBlB,aAAa,CAAC,QAAQ,EAAE,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAI;IAchE,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,eAAe;IAyCvB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ,EAAE,aAAa,GAAG;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE;IAOtE,OAAO,CAAC,cAAc;CAKvB"}

package/dist/widgets/dropdown.js

@@ -60,10 +60,11 @@ import { observable, action } from "mobx";
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
 import { ColorSpec } from "../core/color.js";
+import { cellLen, setCellSize, splitText, asCellCol } from "../core/cells.js";
 import { DEFAULT_TERMINAL_THEME } from "../themes/terminalThemes.js";
 import { WidgetBase } from "./widget-base.js";
 let Dropdown = (() => {
-    var _a;
+    var _a, _b;
     let _classSuper = WidgetBase;
     let _instanceExtraInitializers = [];
     let _options_decorators;
@@ -81,9 +82,13 @@ let Dropdown = (() => {
     let _filter_decorators;
     let _filter_initializers = [];
     let _filter_extraInitializers = [];
+    let __theme_decorators;
+    let __theme_initializers = [];
+    let __theme_extraInitializers = [];
+    let _setTheme_decorators;
     let _handleKey_decorators;
     let _handleMouse_decorators;
-    let _setHovered_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;
@@ -92,17 +97,21 @@ let Dropdown = (() => {
             _expanded_decorators = [observable];
             _highlightedIndex_decorators = [observable];
             _filter_decorators = [observable];
+            __theme_decorators = [(_b = observable).ref.bind(_b)];
+            _setTheme_decorators = [action];
             _handleKey_decorators = [action];
             _handleMouse_decorators = [action];
-            _setHovered_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, __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, _setHovered_decorators, { kind: "method", name: "setHovered", static: false, private: false, access: { has: obj => "setHovered" in obj, get: obj => obj.setHovered }, 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);
@@ -135,16 +144,38 @@ let Dropdown = (() => {
             }
             return result;
         }
-        _theme = __runInitializers(this, _filter_extraInitializers);
+        #_theme_accessor_storage = (__runInitializers(this, _filter_extraInitializers), __runInitializers(this, __theme_initializers, void 0));
+        // [LAW:types-are-the-program] @observable.ref so setTheme() triggers a
+        // re-render — render() and resolvePalette() read _theme.palette, so the
+        // theme reference must participate in MobX reactivity.
+        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 ?? `dropdown-${Math.random().toString(36).slice(2, 8)}`;
             this.options = [...options.options];
-            this.selectedIndex = options.selectedIndex ?? 0;
+            // [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;
             this._theme = options.theme ?? DEFAULT_TERMINAL_THEME;
         }
+        // [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));
+        }
         setTheme(theme) { this._theme = theme; }
         // --- Event handlers ---
         handleKey(event) {
@@ -159,7 +190,8 @@ let Dropdown = (() => {
                 // enter/space remain the explicit "open with selection seeded" gesture.
                 if (event.key === "enter" || event.key === "space") {
                     this.expanded = true;
-                    this.highlightedIndex = this.selectedIndex;
+                    this.highlightedIndex = this.clampIndex(this.selectedIndex);
+                    event.stop();
                     return;
                 }
                 // Any other printable char auto-expands and starts filtering.
@@ -167,6 +199,7 @@ let Dropdown = (() => {
                     this.expanded = true;
                     this.filter = this.filter + event.character;
                     this.highlightedIndex = 0;
+                    event.stop();
                 }
                 return;
             }
@@ -174,16 +207,19 @@ let Dropdown = (() => {
             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;
@@ -197,16 +233,30 @@ let Dropdown = (() => {
                     // 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) {
@@ -224,7 +274,7 @@ let Dropdown = (() => {
             if (!this.expanded) {
                 if (inside) {
                     this.expanded = true;
-                    this.highlightedIndex = this.selectedIndex;
+                    this.highlightedIndex = this.clampIndex(this.selectedIndex);
                 }
                 return;
             }
@@ -252,14 +302,28 @@ let Dropdown = (() => {
             this.emitChange();
             this.emitSubmit();
         }
-        // --- Hover mutator (router fast-path) ---
-        setHovered(value) { this.hovered = value; }
+        // [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 ---
         render(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 = options.asciiOnly ? "v" : "▾";
+            // [LAW:one-source-of-truth] render() owns the asciiOnly switch; the
+            // caret character flows into headerText as data rather than headerText
+            // re-reading the option flag. Same arrow / caret resolution path.
+            const caret = this.focused ? (options.asciiOnly ? "|" : "│") : "";
             const maxLabelLen = this.maxLabelLen();
             const baseStyle = this.disabled
                 ? new Style({ color: "#666666", bgcolor: "#333333", dim: true })
@@ -268,7 +332,7 @@ let Dropdown = (() => {
                     bgcolor: this.resolvePalette("surface"),
                     underline: this.focused,
                 });
-            const headerLabel = this.headerText(maxLabelLen);
+            const headerLabel = this.headerText(maxLabelLen, caret);
             return [
                 new Segment("[", baseStyle),
                 new Segment(`${headerLabel} ${arrowChar}`, baseStyle),
@@ -278,14 +342,28 @@ let Dropdown = (() => {
         // [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.
-        headerText(maxLabelLen) {
+        // 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 === "") {
-                return (this.options[this.selectedIndex] ?? "").padEnd(maxLabelLen, " ");
+                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);
             }
-            const cursor = this.focused ? "│" : "";
-            const filterRoom = Math.max(0, maxLabelLen - cursor.length);
-            const filterText = this.filter.slice(0, filterRoom);
-            return (filterText + cursor).padEnd(maxLabelLen, " ");
+            // 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)
@@ -304,7 +382,7 @@ let Dropdown = (() => {
         }
         renderNoMatchRow(maxLabelLen) {
             // Right-clipped + padded so width matches a normal option row.
-            const text = "(no matches)".slice(0, maxLabelLen).padEnd(maxLabelLen, " ");
+            const text = setCellSize("(no matches)", asCellCol(maxLabelLen));
             const inner = ` ${text} `;
             const style = this.disabled
                 ? new Style({ color: "#666666", bgcolor: "#333333", dim: true })
@@ -314,15 +392,17 @@ let Dropdown = (() => {
                     dim: true,
                 });
             return [
-                new Segment("[", style),
+                new Segment(" ", style),
                 new Segment(inner, style),
-                new Segment("]", style),
+                new Segment(" ", style),
             ];
         }
         renderOptionRow(entry, fpos, maxLabelLen) {
-            // Row: "[ " + label.padEnd(maxLabelLen) + " ]"
+            // Row: "  " + label.padEnd(maxLabelLen) + "  "
             // Width = 1 + 1 + maxLabelLen + 1 + 1 = maxLabelLen + 4.
-            const label = entry.label.padEnd(maxLabelLen, " ");
+            // 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;
@@ -345,16 +425,18 @@ let Dropdown = (() => {
                             bgcolor: this.resolvePalette("surface"),
                         });
             return [
-                new Segment("[", rowStyle),
+                new Segment(" ", rowStyle),
                 new Segment(inner, rowStyle),
-                new Segment("]", rowStyle),
+                new Segment(" ", rowStyle),
             ];
         }
         maxLabelLen() {
             let m = 0;
-            for (const label of this.options)
-                if (label.length > m)
-                    m = label.length;
+            for (const label of this.options) {
+                const w = cellLen(label);
+                if (w > m)
+                    m = w;
+            }
             return m;
         }
         measure(_options) {