@promptctl/rich-js 0.18.1 → 0.19.0

package/dist/themes/registry.js

@@ -1,5 +1,6 @@
-import { ColorTable, parseRgbHex, parseRgbaHex } from "../core/color.js";
-import { Palette } from "./palette.js";
+import { ColorParseError, ColorTable, parseHexColor } from "../core/color.js";
+import { Palette, drawnOn } from "./palette.js";
+import { ACCENT_KEYS, accentText } from "./buildPalette.js";
 import { THEMES } from "./data/index.js";
 import { ANSI_SLOTS } from "./data/types.js";
 const THEME_NAMES = Object.freeze(Object.keys(THEMES).sort());
@@ -31,17 +32,22 @@ function isThemeName(name) {
  */
 export function getThemeBaseColors(name) {
     const data = THEMES[name];
+    const bg = requireBaseVar(data, "background");
+    // The colours `getThemePalette(name)` hands out for the same names: drawn on
+    // the theme's own background, as a Palette draws every colour it holds.
+    const draw = drawnOn(data.name, bg);
+    const base = (key) => draw(requireBaseVar(data, key));
     return {
         name: data.name,
         dark: data.dark,
-        bg: requireBaseVar(data, "background"),
-        fg: requireBaseVar(data, "foreground"),
-        primary: requireBaseVar(data, "primary"),
-        secondary: requireBaseVar(data, "secondary"),
-        accent: requireBaseVar(data, "accent"),
-        success: requireBaseVar(data, "success"),
-        warning: requireBaseVar(data, "warning"),
-        error: requireBaseVar(data, "error"),
+        bg,
+        fg: base("foreground"),
+        primary: base("primary"),
+        secondary: base("secondary"),
+        accent: base("accent"),
+        success: base("success"),
+        warning: base("warning"),
+        error: base("error"),
         ansi: new ColorTable(ANSI_SLOTS.map((slot) => parseOpaqueHex(data.ansi[slot], data.name, `ansi.${slot}`))),
     };
 }
@@ -64,31 +70,36 @@ function requireBaseVar(data, key) {
 function hydrate(data) {
     const map = new Map();
     for (const [k, v] of Object.entries(data.vars)) {
-        map.set(k, parseHex(v, data.name, k));
+        map.set(k, parseHex(v, data.name, `var ${k}`));
+    }
+    // The data is Textual's as authored; its `text-*` is held to the pair this
+    // library promises by the same rule `buildPalette` derives it with.
+    for (const key of ACCENT_KEYS) {
+        const text = requireBaseVar(data, `text-${key}`);
+        map.set(`text-${key}`, accentText(text, requireBaseVar(data, `${key}-muted`), requireBaseVar(data, "background")));
     }
     return new Palette(data.name, data.dark, map);
 }
-// [LAW:single-enforcer] This is the loud-failure boundary for theme hex
-// data. `parseRgbHex`/`parseRgbaHex` in core/color.ts trust their input
-// shape (they assume the caller validated); here we are the caller from
-// the untrusted side (authored data files) and the place that has to
-// reject `"0G"`, `""`, `"#GGGGGG"`, etc.
-const HEX_RE = /^[0-9a-fA-F]+$/;
+// Theme data is authored, so a malformed colour names the theme and the key it
+// sits under; the grammar itself is `parseHexColor`'s.
+function parseHex(value, theme, key) {
+    try {
+        return parseHexColor(value);
+    }
+    catch (cause) {
+        if (!(cause instanceof ColorParseError))
+            throw cause;
+        throw new Error(`Theme ${theme}: ${key}: ${cause.message}`, { cause });
+    }
+}
 /**
  * An ANSI slot is a colour a terminal paints, never a blend, so it takes no
  * alpha: `flattenAlpha` leaves a STANDARD spec alone and would pass one through.
  */
 function parseOpaqueHex(value, theme, key) {
-    if (!/^#[0-9A-Fa-f]{6}$/.test(value)) {
-        throw new Error(`Theme ${theme}: ${key} has invalid hex ${JSON.stringify(value)} (expected #RRGGBB)`);
-    }
-    return parseRgbHex(value.slice(1));
-}
-function parseHex(value, theme, key) {
-    const hex = value.startsWith("#") ? value.slice(1) : value;
-    if ((hex.length !== 6 && hex.length !== 8) || !HEX_RE.test(hex)) {
-        throw new Error(`Theme ${theme}: var ${key} has invalid hex ${JSON.stringify(value)} ` +
-            `(expected #RRGGBB or #RRGGBBAA)`);
+    const color = parseHex(value, theme, key);
+    if (color.alpha !== 1) {
+        throw new Error(`Theme ${theme}: ${key} has alpha in ${JSON.stringify(value)} (expected #RRGGBB)`);
     }
-    return hex.length === 6 ? parseRgbHex(hex) : parseRgbaHex(hex);
+    return color;
 }

package/dist/widgets/button.d.ts

@@ -18,7 +18,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 { ThemedWidget } from "./themed-widget.js";
 import type { KeyEvent, WidgetMouseEvent } from "./types.js";
 export type ButtonVariant = "default" | "primary" | "success" | "warning" | "danger";
 export interface ButtonOptions {
@@ -28,14 +28,12 @@ export interface ButtonOptions {
     disabled?: boolean;
     theme?: TerminalTheme;
 }
-export declare class Button extends WidgetBase {
+export declare class Button extends ThemedWidget {
     readonly id: string;
     readonly focusable = true;
     accessor label: string;
     accessor variant: ButtonVariant;
-    private accessor _theme;
     constructor(options: ButtonOptions);
-    setTheme(theme: TerminalTheme): void;
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     setActive(value: boolean): void;
@@ -44,6 +42,4 @@ export declare class Button extends WidgetBase {
         minimum: number;
         maximum: number;
     };
-    private resolveColors;
-    private resolvePalette;
 }

package/dist/widgets/button.js

@@ -52,10 +52,9 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
 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";
+import { ThemedWidget } from "./themed-widget.js";
+import { ink } from "./ink.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
@@ -70,7 +69,7 @@ const VARIANT_KEYS = {
     danger: { bg: "error-muted", fg: "text-error", hover: "error", hoverFg: "on-error" },
 };
 let Button = (() => {
-    let _classSuper = WidgetBase;
+    let _classSuper = ThemedWidget;
     let _instanceExtraInitializers = [];
     let _label_decorators;
     let _label_initializers = [];
@@ -78,10 +77,6 @@ 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 _setActive_decorators;
@@ -90,15 +85,11 @@ let Button = (() => {
             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);
@@ -112,21 +103,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_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);
+            super(options.theme);
+            __runInitializers(this, _variant_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)
@@ -170,19 +154,17 @@ let Button = (() => {
             const right = focused ? "]" : " ";
             const text = `${left} ${this.label} ${right}`;
             if (this.disabled) {
-                return [new Segment(text, new Style({ color: "#666666", bgcolor: "#333333", dim: true }))];
+                return [new Segment(text, new Style(this.disabledInk))];
             }
             // 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.
+            const keys = VARIANT_KEYS[this.variant];
             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 }))];
+                return [new Segment(text, new Style({ ...ink(this.theme, keys.hoverFg, keys.hover), bold: this.active }))];
             }
-            const { fg, bg } = this.resolveColors("bg");
-            return [new Segment(text, new Style({ color: fg, bgcolor: bg }))];
+            return [new Segment(text, new Style(ink(this.theme, keys.fg, keys.bg)))];
         }
         measure(_options) {
             // [LAW:one-source-of-truth] cellLen is the cell-width authority; .length
@@ -190,19 +172,6 @@ let Button = (() => {
             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

@@ -13,7 +13,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 { ThemedWidget } from "./themed-widget.js";
 import type { KeyEvent, WidgetMouseEvent } from "./types.js";
 export interface CheckboxOptions {
     label: string;
@@ -22,14 +22,12 @@ export interface CheckboxOptions {
     disabled?: boolean;
     theme?: TerminalTheme;
 }
-export declare class Checkbox extends WidgetBase {
+export declare class Checkbox extends ThemedWidget {
     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;
     protected draw(options: RenderOptions): Iterable<Segment>;
@@ -37,5 +35,4 @@ export declare class Checkbox extends WidgetBase {
         minimum: number;
         maximum: number;
     };
-    private resolvePalette;
 }

package/dist/widgets/checkbox.js

@@ -44,16 +44,15 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
-import { observable, action, observableRef } from "mobx";
+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 { drawable } from "../core/protocol.js";
-import { WidgetBase } from "./widget-base.js";
+import { ThemedWidget } from "./themed-widget.js";
+import { ink } from "./ink.js";
 let Checkbox = (() => {
-    let _classSuper = WidgetBase;
+    let _classSuper = ThemedWidget;
     let _instanceExtraInitializers = [];
     let _label_decorators;
     let _label_initializers = [];
@@ -61,10 +60,6 @@ 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;
     return class Checkbox extends _classSuper {
@@ -72,14 +67,10 @@ let Checkbox = (() => {
             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 });
@@ -92,21 +83,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_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);
+            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;
-            this._theme = options.theme ?? DEFAULT_TERMINAL_THEME;
         }
-        setTheme(theme) { this._theme = theme; }
         // --- Event handlers ---
         handleKey(event) {
             if (this.disabled)
@@ -136,22 +120,16 @@ let Checkbox = (() => {
             const indicator = this.checked ? drawable(options, "✓", "x") : " ";
             const text = `[${indicator}] ${this.label}`;
             if (this.disabled) {
-                return [new Segment(text, new Style({ color: "#666666", bgcolor: "#333333", dim: true }))];
+                return [new Segment(text, new Style(this.disabledInk))];
             }
-            const fg = this.checked ? this.resolvePalette("primary") : this.resolvePalette("foreground");
-            return [new Segment(text, new Style({ color: fg, underline: this.focused }))];
+            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 };
         }
-        // --- 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

@@ -25,7 +25,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 { ThemedWidget } from "./themed-widget.js";
 import type { KeyEvent, WidgetMouseEvent, WidgetFocusEvent, OverlayRenderable } from "./types.js";
 export interface DropdownOptions {
     options: string[];
@@ -34,7 +34,7 @@ export interface DropdownOptions {
     disabled?: boolean;
     theme?: TerminalTheme;
 }
-export declare class Dropdown extends WidgetBase implements OverlayRenderable {
+export declare class Dropdown extends ThemedWidget implements OverlayRenderable {
     readonly id: string;
     readonly focusable = true;
     accessor options: string[];
@@ -46,10 +46,8 @@ export declare class Dropdown extends WidgetBase implements OverlayRenderable {
         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;
@@ -63,5 +61,4 @@ export declare class Dropdown extends WidgetBase implements OverlayRenderable {
         minimum: number;
         maximum: number;
     };
-    private resolvePalette;
 }

package/dist/widgets/dropdown.js

@@ -56,16 +56,15 @@ 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 { 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 +81,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 +92,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 +100,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 +135,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 +148,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 +160,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)
@@ -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/ink.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ink — the colour pair a widget cell is drawn in: a foreground and the ground
+ * it stands on, both from one theme's palette.
+ *
+ * A palette's colours are chosen against that palette's own background. A
+ * foreground drawn over whatever the terminal shows is readable only when the
+ * terminal happens to match the theme — the default theme's white text
+ * vanished into a light terminal. With both halves taken from the palette, a
+ * widget looks the same on every terminal, so it is readable on all of them
+ * exactly when its theme is readable against itself.
+ *
+ * [LAW:types-are-the-program] There is no call that takes a foreground alone,
+ * so a widget cannot draw half a pair.
+ * [LAW:single-enforcer] Every widget resolves palette keys here, and this is
+ * where a key the palette lacks, or one that draws no colour (a theme's
+ * fully transparent "no background"), is reported.
+ */
+import { ColorSpec, type TerminalTheme } from "../core/color.js";
+export declare function ink(theme: TerminalTheme, fg: string, bg: string): {
+    color: ColorSpec;
+    bgcolor: ColorSpec;
+};

package/dist/widgets/ink.js

@@ -0,0 +1,31 @@
+/**
+ * ink — the colour pair a widget cell is drawn in: a foreground and the ground
+ * it stands on, both from one theme's palette.
+ *
+ * A palette's colours are chosen against that palette's own background. A
+ * foreground drawn over whatever the terminal shows is readable only when the
+ * terminal happens to match the theme — the default theme's white text
+ * vanished into a light terminal. With both halves taken from the palette, a
+ * widget looks the same on every terminal, so it is readable on all of them
+ * exactly when its theme is readable against itself.
+ *
+ * [LAW:types-are-the-program] There is no call that takes a foreground alone,
+ * so a widget cannot draw half a pair.
+ * [LAW:single-enforcer] Every widget resolves palette keys here, and this is
+ * where a key the palette lacks, or one that draws no colour (a theme's
+ * fully transparent "no background"), is reported.
+ */
+import { ColorSpec } from "../core/color.js";
+export function ink(theme, fg, bg) {
+    return { color: paletteColor(theme, fg), bgcolor: paletteColor(theme, bg) };
+}
+function paletteColor(theme, key) {
+    const rgba = theme.palette.get(key);
+    if (rgba === undefined) {
+        throw new RangeError(`palette ${JSON.stringify(theme.palette.name)} has no ${JSON.stringify(key)}`);
+    }
+    if (rgba.alpha === 0) {
+        throw new RangeError(`palette ${JSON.stringify(theme.palette.name)}: ${JSON.stringify(key)} is fully transparent, so it cannot be half of a widget's colour pair`);
+    }
+    return ColorSpec.fromRgba(rgba);
+}

package/dist/widgets/slider.d.ts

@@ -20,7 +20,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 { ThemedWidget } from "./themed-widget.js";
 import type { KeyEvent, WidgetMouseEvent } from "./types.js";
 export interface SliderOptions {
     value?: number;
@@ -32,7 +32,7 @@ export interface SliderOptions {
     disabled?: boolean;
     theme?: TerminalTheme;
 }
-export declare class Slider extends WidgetBase {
+export declare class Slider extends ThemedWidget {
     readonly id: string;
     readonly focusable = true;
     accessor value: number;
@@ -40,10 +40,8 @@ export declare class Slider extends WidgetBase {
     accessor max: number;
     accessor step: number;
     accessor width: number;
-    private accessor _theme;
     private _dragging;
     constructor(options?: SliderOptions);
-    setTheme(theme: TerminalTheme): void;
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     private setValue;
@@ -53,5 +51,4 @@ export declare class Slider extends WidgetBase {
         minimum: number;
         maximum: number;
     };
-    private resolvePalette;
 }