@promptctl/rich-js 0.18.1 → 0.20.0

package/dist/themes/ramp.js

@@ -9,46 +9,22 @@
  * can no longer transpose with the palette it was meant to belong to. A ramp
  * is the one function whose input is a number, so the decision stays inside.
  *
- * A threshold cascade is a ramp too: the same stops with a `step` easing hold
+ * A threshold cascade is a ramp too: the same stops with the `step` ease hold
  * each color until the next position, which is exactly `≥ threshold → hotter`
  * written as data. [LAW:one-type-per-behavior] One primitive; the easing is a
- * value, so a gradient and a cascade differ by one word, not by which function
- * was called.
+ * value — any `Ease` from `core/easing`, the vocabulary every effect shares —
+ * so a gradient and a cascade differ by one word, not by which function was
+ * called. [LAW:dataflow-not-control-flow] `at` applies it unconditionally.
  *
  * Interpolation is in OKLCH (`Oklch.mix`), so a `linear` ramp between two
  * theme colors passes through perceptually even steps rather than the muddy
  * midpoints of an sRGB blend.
  *
- * [LAW:one-way-deps] Imports `core/color` and `core/oklch` only; nothing here
- * knows what a palette is. Resolving stop *names* is the template binding's
+ * [LAW:one-way-deps] Imports `core/color`, `core/easing` and `core/oklch`
+ * only; nothing here knows what a palette is. Resolving stop *names* is the template binding's
  * job (`paletteFuncs`), which hands this module resolved colors.
  */
 import { Oklch } from "../core/oklch.js";
-/**
- * How a value between two stops maps to progress along them. Each easing is
- * a function on segment progress `t ∈ [0, 1)` — `linear` keeps it, `step`
- * holds the left stop for the whole segment.
- *
- * [LAW:dataflow-not-control-flow] The easing is looked up by name and applied
- * unconditionally; `at` runs the same code for a gradient and a cascade.
- */
-export const RAMP_EASINGS = {
-    linear: (t) => t,
-    step: () => 0,
-};
-export const RAMP_EASING_NAMES = Object.keys(RAMP_EASINGS);
-/**
- * The gate a spelled easing crosses. [LAW:parse-dont-validate] — returns the
- * narrowed name, so `ColorRamp` never re-checks. Unknown names throw naming
- * every legal one. [LAW:no-silent-failure]
- */
-export function parseRampEasing(name) {
-    if (!Object.hasOwn(RAMP_EASINGS, name)) {
-        throw new RangeError(`unknown ramp easing ${JSON.stringify(name)}; expected one of ` +
-            RAMP_EASING_NAMES.map((n) => JSON.stringify(n)).join(", "));
-    }
-    return name;
-}
 /**
  * An immutable ramp over stops sorted by position.
  *
@@ -65,10 +41,10 @@ export function parseRampEasing(name) {
  * same way).
  */
 export class ColorRamp {
-    easing;
+    ease;
     stops;
-    constructor(easing, stops) {
-        this.easing = easing;
+    constructor(ease, stops) {
+        this.ease = ease;
         this.stops = stops;
         if (stops.length === 0) {
             throw new RangeError("a ColorRamp needs at least one stop");
@@ -86,14 +62,19 @@ export class ColorRamp {
     }
     /**
      * The color at `value`. Below the first stop it is the first color; at or
-     * above the last stop it is the last; between two stops it is `easing`
-     * of the way from the lower to the upper, so a value exactly on a stop is
-     * that stop's color, byte for byte.
+     * above the last stop it is the last; between two stops the raw progress
+     * from the lower to the upper goes through `ease`, and the eased progress
+     * says how far to mix.
      *
-     * The two endpoint returns are the exactness contract, not a shortcut:
-     * the sRGB → OKLCH → sRGB round-trip can land a channel one unit off, and a
-     * ramp that does not hit its own stops exactly would make a `step` ramp
-     * paint a color the author never wrote.
+     * Eased progress 0 is the lower stop's color and 1 the upper's, byte for
+     * byte — the exactness contract, not a shortcut: the sRGB → OKLCH → sRGB
+     * round-trip can land a channel one unit off, and a ramp that did not hit
+     * its own stops exactly would make a `step` ramp paint a color the author
+     * never wrote. So a value on a stop is that stop's color whenever the ease
+     * starts at 0, as every built-in does but `step-start` and the
+     * `jump-start`/`jump-both` steps, which jump at the start of the interval as
+     * CSS defines them. An ease that overshoots [0, 1] holds the end colors
+     * where it does: a ramp never paints outside its stops.
      */
     at(value) {
         if (!Number.isFinite(value)) {
@@ -110,9 +91,9 @@ export class ColorRamp {
         if (lower === stops.length - 1)
             return from.color;
         // `to.at > value >= from.at` by construction of `lower`, so the segment
-        // has positive width and `t ∈ [0, 1)`.
+        // has positive width and raw progress is in [0, 1).
         const to = stops[lower + 1];
-        const t = RAMP_EASINGS[this.easing]((value - from.at) / (to.at - from.at));
+        const t = this.ease((value - from.at) / (to.at - from.at));
         if (t <= 0)
             return from.color;
         if (t >= 1)

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;
 }