@promptctl/rich-js 0.18.1 → 0.20.0

package/dist/widgets/dropdown.js

@@ -56,16 +56,16 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
-import { observable, action, observableRef, observableShallow } from "mobx";
+import { observable, action, observableShallow } 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 { drawable } from "../core/protocol.js";
-import { WidgetBase } from "./widget-base.js";
+import { moveSelection } from "../core/selection.js";
+import { ThemedWidget } from "./themed-widget.js";
+import { ink } from "./ink.js";
 let Dropdown = (() => {
-    let _classSuper = WidgetBase;
+    let _classSuper = ThemedWidget;
     let _instanceExtraInitializers = [];
     let _options_decorators;
     let _options_initializers = [];
@@ -82,10 +82,6 @@ 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 _handleFocus_decorators;
@@ -97,8 +93,6 @@ let Dropdown = (() => {
             _expanded_decorators = [observable];
             _highlightedIndex_decorators = [observable];
             _filter_decorators = [observable];
-            __theme_decorators = [observableRef];
-            _setTheme_decorators = [action];
             _handleKey_decorators = [action];
             _handleMouse_decorators = [action];
             _handleFocus_decorators = [action];
@@ -107,8 +101,6 @@ let Dropdown = (() => {
             __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, _handleFocus_decorators, { kind: "method", name: "handleFocus", static: false, private: false, access: { has: obj => "handleFocus" in obj, get: obj => obj.handleFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -144,15 +136,9 @@ let Dropdown = (() => {
             }
             return result;
         }
-        #_theme_accessor_storage = (__runInitializers(this, _filter_extraInitializers), __runInitializers(this, __theme_initializers, void 0));
-        // [LAW:types-are-the-program] @observableRef 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);
+            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
@@ -163,7 +149,6 @@ let Dropdown = (() => {
             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 —
@@ -176,7 +161,6 @@ let Dropdown = (() => {
                 return 0;
             return Math.max(0, Math.min(n, this.options.length - 1));
         }
-        setTheme(theme) { this._theme = theme; }
         // --- Event handlers ---
         handleKey(event) {
             if (this.disabled)
@@ -206,12 +190,11 @@ let Dropdown = (() => {
             // expanded
             switch (event.key) {
                 case "up":
-                    this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+                    this.highlightedIndex = moveSelection(this.highlightedIndex, -1, this.filteredOptions.length);
                     event.stop();
                     return;
                 case "down": {
-                    const max = Math.max(0, this.filteredOptions.length - 1);
-                    this.highlightedIndex = Math.min(max, this.highlightedIndex + 1);
+                    this.highlightedIndex = moveSelection(this.highlightedIndex, 1, this.filteredOptions.length);
                     event.stop();
                     return;
                 }
@@ -322,10 +305,9 @@ let Dropdown = (() => {
             const caret = this.focused ? drawable(options, "│", "|") : "";
             const maxLabelLen = this.maxLabelLen();
             const baseStyle = this.disabled
-                ? new Style({ color: "#666666", bgcolor: "#333333", dim: true })
+                ? new Style(this.disabledInk)
                 : new Style({
-                    color: this.resolvePalette("foreground"),
-                    bgcolor: this.resolvePalette("surface"),
+                    ...ink(this.theme, "foreground", "surface"),
                     underline: this.focused,
                 });
             const headerLabel = this.headerText(maxLabelLen, caret);
@@ -381,10 +363,9 @@ let Dropdown = (() => {
             const text = setCellSize("(no matches)", asCellCol(maxLabelLen));
             const inner = ` ${text} `;
             const style = this.disabled
-                ? new Style({ color: "#666666", bgcolor: "#333333", dim: true })
+                ? new Style(this.disabledInk)
                 : new Style({
-                    color: this.resolvePalette("foreground"),
-                    bgcolor: this.resolvePalette("surface"),
+                    ...ink(this.theme, "foreground", "surface"),
                     dim: true,
                 });
             return [
@@ -405,21 +386,12 @@ let Dropdown = (() => {
             // 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({ color: "#666666", bgcolor: "#333333", dim: true })
+                ? new Style(this.disabledInk)
                 : isHighlighted
-                    ? new Style({
-                        color: this.resolvePalette("text-primary"),
-                        bgcolor: this.resolvePalette("primary-muted"),
-                    })
+                    ? new Style(ink(this.theme, "text-primary", "primary-muted"))
                     : isSelected
-                        ? new Style({
-                            color: this.resolvePalette("on-primary"),
-                            bgcolor: this.resolvePalette("primary"),
-                        })
-                        : new Style({
-                            color: this.resolvePalette("foreground"),
-                            bgcolor: this.resolvePalette("surface"),
-                        });
+                        ? new Style(ink(this.theme, "on-primary", "primary"))
+                        : new Style(ink(this.theme, "foreground", "surface"));
             return [
                 new Segment(" ", rowStyle),
                 new Segment(inner, rowStyle),
@@ -439,12 +411,6 @@ let Dropdown = (() => {
             const width = this.maxLabelLen() + 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.
-            return ColorSpec.fromRgba(rgba);
-        }
     };
 })();
 export { Dropdown };

package/dist/widgets/event-router.d.ts

@@ -1,49 +1,38 @@
 /**
- * EventRouter — parses raw stdin into KeyEvent / ScreenMouseEvent values
- * and dispatches them to widgets via a FocusManager and the frame on screen.
+ * EventRouter — dispatches the keys and pointer events an `App` hears to
+ * widgets, via a FocusManager and the frame on screen.
  *
- * It reads the terminal and never sets it up: raw mode and mouse tracking are
- * the runtime's (`App`), which undoes them on every path out.
- *
- * [LAW:single-enforcer] ANSI escape parsing lives only here — widgets never
- * see raw bytes. One parser, one dispatch surface.
- *
- * [LAW:dataflow-not-control-flow] The same parse pipeline runs for every
- * input chunk: append → consume one event at a time until the buffer can't
- * yield more. The byte's value, not a side-mode, decides which event is
- * emitted. There is no "are we mid-sequence" mode flag — the buffer head
- * carries all the state we need.
- *
- * Lone-ESC handling: a bare `\x1b` is ambiguous (escape key vs. start of a
- * CSI sequence). When the buffer is drained but ends with a lone ESC, the
- * router defers emission via setTimeout(0). The next chunk cancels the timer
- * if it extends the sequence. Tests can call `flush()` to drain synchronously.
+ * It parses nothing and reads no terminal: `App` owns the one parser over its
+ * host's input (`host/input`), and `WidgetApp` hands this what the app hears.
  */
 import { KeyEvent } from "./types.js";
-import type { FrameSource, ScreenMouseEvent, KeyHandlerOptions } from "./types.js";
+import type { FrameSource, KeyHandlerOptions } from "./types.js";
 import type { Unsubscribe } from "../core/subscription.js";
-import type { TerminalHost } from "../host/terminal-host.js";
+import type { KeyPress } from "../host/input.js";
+import type { AppMouseEvent } from "../host/app.js";
+import type { Wheel } from "../host/app.js";
 type KeyHandler = (event: KeyEvent) => void;
 export interface EventRouterOptions {
     source: FrameSource;
-    /** The I/O capability the router reads input from. */
-    host: TerminalHost;
+    /** Whether a left-button press focuses the widget under it before it hears the press. */
+    focusOnClick: boolean;
 }
 export declare class EventRouter {
     private readonly source;
-    private readonly host;
-    private buffer;
-    private running;
-    private dataUnsubscribe;
-    private escTimer;
+    private readonly focusOnClick;
     private captured;
     private pointer;
     private hoveredWidget;
     private readonly keyChain;
     private readonly mouseHandlers;
     constructor(options: EventRouterOptions);
-    start(): void;
-    stop(): void;
+    /**
+     * Drop what a run left behind — a captured drag, the pointer, hover — so the
+     * router is in the shape a fresh construction would be.
+     *
+     * [LAW:one-source-of-truth] Per-session state belongs to one session.
+     */
+    reset(): void;
     /**
      * Read hover again off the frame just painted: under a pointer that has not
      * moved, a widget may have gone, moved, or arrived.
@@ -53,17 +42,19 @@ export declare class EventRouter {
      */
     framePainted(): void;
     onKey(handler: KeyHandler, options?: KeyHandlerOptions): Unsubscribe;
-    onMouse(handler: (event: ScreenMouseEvent) => void): Unsubscribe;
-    /** Feed a chunk of bytes (or a string of bytes) into the parser. */
-    feed(chunk: Uint8Array | string): void;
-    /** Force any pending lone ESC out of the buffer. */
-    flush(): void;
-    private drain;
-    private consumeOne;
-    private consumePrintable;
-    private consumeEscape;
-    private consumeSS3;
-    private consumeCSI;
+    onMouse(handler: (event: AppMouseEvent) => void): Unsubscribe;
+    /** Route a key the app heard. */
+    key(press: KeyPress): void;
+    /** Route a pointer event the app heard. */
+    mouse(event: AppMouseEvent): void;
+    /**
+     * Scroll the innermost viewport under the pointer that can move, a line a
+     * notch, past any widget it shows there and whatever a drag captured.
+     * Whether one moved is the answer: with none, the app passes the wheel
+     * outward.
+     */
+    wheel({ x, y, lines }: Wheel): boolean;
+    private point;
     private dispatchKey;
     private dispatchMouse;
     private hover;