@promptctl/rich-js 0.26.0 → 0.28.0

package/dist/themes/palette.js

@@ -1,5 +1,6 @@
 /**
- * A semantic palette: a named map from variable name → ColorRgba.
+ * A semantic palette: a named map from role → ColorRgba, holding every
+ * `PaletteRole`.
  *
  * Distinct from `ColorTable` (the integer-indexed quantization LUT used by
  * the downgrade pipeline). Palettes carry aesthetic intent — `primary`,
@@ -24,26 +25,26 @@
  * draws nothing on any surface, so it needs none and is handed out as it is,
  * and a `Style` reads it as no background at all.
  *
- * @throws RangeError when `background` is translucent, or when a colour is
- * partly transparent and there is no `background` to draw it on.
+ * @throws RangeError when `background` is translucent.
  */
 export class Palette {
     name;
     dark;
     vars;
-    constructor(name, dark, vars) {
+    constructor(name, dark, roles) {
         this.name = name;
         this.dark = dark;
         // [LAW:single-enforcer] Every palette is built through here, so this is
-        // where "a palette colour is opaque or draws nothing" holds. The fresh map is also the
-        // defensive copy: ReadonlyMap is a compile-time aliasing constraint, not a
-        // runtime one.
-        const background = vars.get("background");
-        const draw = background === undefined ? opaqueOnly(name) : drawnOn(name, background);
-        this.vars = new Map([...vars].map(([key, colour]) => [key, draw(colour, key)]));
+        // where "a palette colour is opaque or draws nothing" holds.
+        const draw = drawnOn(name, roles.background);
+        this.vars = new Map(Object.entries(roles).map(([role, colour]) => [role, draw(colour)]));
     }
-    get(key) {
-        return this.vars.get(key);
+    get(role) {
+        return this.vars.get(role);
+    }
+    /** This palette's roles, each put through `colour`: what a new palette is built from. */
+    mapRoles(colour) {
+        return Object.fromEntries([...this.vars].map(([role, was]) => [role, colour(was, role)]));
     }
 }
 /**
@@ -60,12 +61,3 @@ export function drawnOn(name, background) {
     // A fully transparent colour is not a tint: it draws nothing on any surface.
     return (colour) => (colour.alpha === 0 ? colour : colour.compositeOver(background));
 }
-// A palette with no background has nothing to draw a translucent colour on.
-function opaqueOnly(name) {
-    return (colour, key) => {
-        if (colour.alpha !== 1 && colour.alpha !== 0) {
-            throw new RangeError(`palette ${JSON.stringify(name)}: ${key} is translucent (${colour.hex}) but the palette has no "background" to draw it on`);
-        }
-        return colour;
-    };
-}

package/dist/themes/ramp.d.ts

@@ -122,7 +122,7 @@ export declare class ColorRamp {
      * [LAW:one-source-of-truth] When it next changes is `Animation.all`'s
      * answer over the two parts; nothing here says it a second time. Whether
      * the depth it is drawn at can show the move is decided where it is drawn
-     * (`gradient`, through `stillOnSlots`).
+     * (`gradient`, through `stillWhereNothingMoves`).
      */
     moving(motion: RampMotion): Animation<ColorRamp>;
 }

package/dist/themes/ramp.js

@@ -159,7 +159,7 @@ export class ColorRamp {
      * [LAW:one-source-of-truth] When it next changes is `Animation.all`'s
      * answer over the two parts; nothing here says it a second time. Whether
      * the depth it is drawn at can show the move is decided where it is drawn
-     * (`gradient`, through `stillOnSlots`).
+     * (`gradient`, through `stillWhereNothingMoves`).
      */
     moving(motion) {
         const still = Animation.constant(0);

package/dist/themes/registry.d.ts

@@ -1,5 +1,5 @@
 import { ColorRgba, ColorTable } from "../core/color.js";
-import { Palette } from "./palette.js";
+import { type Palette } from "./palette.js";
 import { type ThemeName } from "./data/index.js";
 export type { ThemeName };
 /**
@@ -11,16 +11,15 @@ export declare function listThemePalettes(): readonly ThemeName[];
  *
  * Synchronous: theme data is bundled at compile time via the data barrel,
  * so no I/O happens here. The Palette itself (which requires hex-parsing
- * ~150 vars into ColorRgba values) is constructed lazily on first request
- * and cached — subsequent calls for the same name return the same instance.
+ * ~150 vars into ColorRgba values) is cached on first request — subsequent
+ * calls for the same name return the same instance. `terminalThemes.ts` makes
+ * that request for every theme, on import.
  */
 export declare function getThemePalette(name: ThemeName): Palette;
 export declare function getThemePalette(name: string): Palette | null;
 /**
  * The eight base colors every theme must declare, and its ANSI table. Returned by
- * `getThemeBaseColors` for callers (notably `terminalThemes.ts`) that only
- * need the substrate and would otherwise pay the cost of hydrating the
- * full ~150-var palette and polluting the registry cache.
+ * `getThemeBaseColors` for callers that only need the substrate.
  */
 export interface ThemeBaseColors {
     readonly name: string;
@@ -36,9 +35,7 @@ export interface ThemeBaseColors {
     readonly ansi: ColorTable;
 }
 /**
- * Read just the eight base colors from a theme's data file. Cheap — parses
- * 8 hex strings, allocates no Palette, touches no cache. Use this when you
- * want a `TerminalTheme`-shaped substrate without forcing the full ~150-var
- * palette through the registry's hydration path.
+ * Read just the eight base colors and the ANSI table from a theme's data file.
+ * Parses 8 hex strings, allocates no Palette, touches no cache.
  */
 export declare function getThemeBaseColors(name: ThemeName): ThemeBaseColors;

package/dist/themes/registry.js

@@ -1,6 +1,6 @@
 import { ColorParseError, ColorTable, parseHexColor } from "../core/color.js";
-import { Palette, drawnOn } from "./palette.js";
-import { ACCENT_KEYS, accentText } from "./buildPalette.js";
+import { drawnOn } from "./palette.js";
+import { buildPalette } from "./buildPalette.js";
 import { THEMES } from "./data/index.js";
 import { ANSI_SLOTS } from "./data/types.js";
 import { Memo } from "../core/memo.js";
@@ -23,18 +23,16 @@ function isThemeName(name) {
     return Object.hasOwn(THEMES, name);
 }
 /**
- * Read just the eight base colors from a theme's data file. Cheap — parses
- * 8 hex strings, allocates no Palette, touches no cache. Use this when you
- * want a `TerminalTheme`-shaped substrate without forcing the full ~150-var
- * palette through the registry's hydration path.
+ * Read just the eight base colors and the ANSI table from a theme's data file.
+ * Parses 8 hex strings, allocates no Palette, touches no cache.
  */
 export function getThemeBaseColors(name) {
     const data = THEMES[name];
-    const bg = requireBaseVar(data, "background");
+    const bg = parseHex(data.vars.background, data.name, "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));
+    const base = (key) => draw(parseHex(data.vars[key], data.name, key));
     return {
         name: data.name,
         dark: data.dark,
@@ -49,34 +47,15 @@ export function getThemeBaseColors(name) {
         ansi: new ColorTable(ANSI_SLOTS.map((slot) => parseOpaqueHex(data.ansi[slot], data.name, `ansi.${slot}`))),
     };
 }
-function requireBaseVar(data, key) {
-    const v = data.vars[key];
-    if (v === undefined) {
-        throw new Error(`Theme ${data.name}: required base var "${key}" missing from data file`);
-    }
-    return parseHex(v, data.name, key);
-}
 /**
  * Parse a `ThemePaletteData`'s hex strings into a Palette of ColorRgba.
  *
  * [LAW:single-enforcer] Hex → ColorRgba conversion for theme data lives
- * here, not on Palette. Keeping the parser in this module preserves the
- * `core/color → themes/palette` one-way edge (palette.ts must not import
- * ColorRgba as a value, or it cycles with core/color's own use of Palette
- * for INTERNAL_DEFAULT_THEME).
+ * here, not on Palette; what a theme does not state, `buildPalette` derives.
  */
 function hydrate(data) {
-    const map = new Map();
-    for (const [k, v] of Object.entries(data.vars)) {
-        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);
+    const stated = Object.entries(data.vars).map(([role, hex]) => [role, parseHex(hex, data.name, `var ${role}`)]);
+    return buildPalette(data.name, data.dark, Object.fromEntries(stated));
 }
 // Theme data is authored, so a malformed colour names the theme and the key it
 // sits under; the grammar itself is `parseHexColor`'s.

package/dist/themes/terminalThemes.d.ts

@@ -3,16 +3,10 @@
  * matching `<NAME>` export here. There is no inline-only theme; the data
  * file is the single source of truth for every theme's hex values.
  *
- * Editing `data/<name>.ts` updates both the registry's full ~150-var
- * palette (via `getThemePalette(name)`) AND the matching `TerminalTheme`
- * constant exported below (via `getThemeBaseColors(name)`, which pulls
- * just the 8 substrate keys). The two views never drift because both
- * derive from the same authored data.
- *
- * [LAW:one-source-of-truth] Hex values live in `data/<name>.ts`. This
- * module is a derived view that builds a `TerminalTheme` from each
- * theme's eight base colors via `buildPalette` for the substrate palette,
- * and from the theme's own ANSI table for the sixteen named colours.
+ * [LAW:one-source-of-truth] Hex values live in `data/<name>.ts`, and a theme's
+ * name means one palette: a constant here holds the very `Palette`
+ * `getThemePalette(name)` returns, and takes the background and foreground off
+ * it, with the theme's sixteen named colours beside it.
  *
  * [LAW:one-type-per-behavior] Every theme has the same shape — name,
  * `dark` flag, full Palette in the registry, `TerminalTheme` constant

package/dist/themes/terminalThemes.js

@@ -3,16 +3,10 @@
  * matching `<NAME>` export here. There is no inline-only theme; the data
  * file is the single source of truth for every theme's hex values.
  *
- * Editing `data/<name>.ts` updates both the registry's full ~150-var
- * palette (via `getThemePalette(name)`) AND the matching `TerminalTheme`
- * constant exported below (via `getThemeBaseColors(name)`, which pulls
- * just the 8 substrate keys). The two views never drift because both
- * derive from the same authored data.
- *
- * [LAW:one-source-of-truth] Hex values live in `data/<name>.ts`. This
- * module is a derived view that builds a `TerminalTheme` from each
- * theme's eight base colors via `buildPalette` for the substrate palette,
- * and from the theme's own ANSI table for the sixteen named colours.
+ * [LAW:one-source-of-truth] Hex values live in `data/<name>.ts`, and a theme's
+ * name means one palette: a constant here holds the very `Palette`
+ * `getThemePalette(name)` returns, and takes the background and foreground off
+ * it, with the theme's sixteen named colours beside it.
  *
  * [LAW:one-type-per-behavior] Every theme has the same shape — name,
  * `dark` flag, full Palette in the registry, `TerminalTheme` constant
@@ -24,40 +18,31 @@
  * color primitives; nothing in `core/` imports back.
  */
 import { TerminalTheme } from "../core/color.js";
-import { buildPalette } from "./buildPalette.js";
-import { getThemeBaseColors } from "./registry.js";
-function defineTheme(d) {
-    return new TerminalTheme(d.bg, d.fg, d.ansi, buildPalette(d.name, d.dark, {
-        primary: d.primary,
-        secondary: d.secondary,
-        accent: d.accent,
-        success: d.success,
-        warning: d.warning,
-        error: d.error,
-        background: d.bg,
-        foreground: d.fg,
-    }));
+import { getThemeBaseColors, getThemePalette } from "./registry.js";
+function defineTheme(name) {
+    const palette = getThemePalette(name);
+    return new TerminalTheme(palette.get("background"), palette.get("foreground"), getThemeBaseColors(name).ansi, palette);
 }
-export const DEFAULT_TERMINAL_THEME = defineTheme(getThemeBaseColors("default"));
-export const SVG_EXPORT_THEME = defineTheme(getThemeBaseColors("svg-export"));
-export const MONOKAI = defineTheme(getThemeBaseColors("monokai"));
-export const NORD = defineTheme(getThemeBaseColors("nord"));
-export const GRUVBOX = defineTheme(getThemeBaseColors("gruvbox"));
-export const DRACULA = defineTheme(getThemeBaseColors("dracula"));
-export const TOKYO_NIGHT = defineTheme(getThemeBaseColors("tokyo-night"));
-export const FLEXOKI = defineTheme(getThemeBaseColors("flexoki"));
-export const CYBERPUNK = defineTheme(getThemeBaseColors("cyberpunk"));
-export const CATPPUCCIN_MOCHA = defineTheme(getThemeBaseColors("catppuccin-mocha"));
-export const CATPPUCCIN_LATTE = defineTheme(getThemeBaseColors("catppuccin-latte"));
-export const CATPPUCCIN_FRAPPE = defineTheme(getThemeBaseColors("catppuccin-frappe"));
-export const CATPPUCCIN_MACCHIATO = defineTheme(getThemeBaseColors("catppuccin-macchiato"));
-export const SOLARIZED_DARK = defineTheme(getThemeBaseColors("solarized-dark"));
-export const SOLARIZED_LIGHT = defineTheme(getThemeBaseColors("solarized-light"));
-export const ROSE_PINE = defineTheme(getThemeBaseColors("rose-pine"));
-export const ROSE_PINE_MOON = defineTheme(getThemeBaseColors("rose-pine-moon"));
-export const ROSE_PINE_DAWN = defineTheme(getThemeBaseColors("rose-pine-dawn"));
-export const ATOM_ONE_DARK = defineTheme(getThemeBaseColors("atom-one-dark"));
-export const ATOM_ONE_LIGHT = defineTheme(getThemeBaseColors("atom-one-light"));
-export const TEXTUAL_DARK = defineTheme(getThemeBaseColors("textual-dark"));
-export const TEXTUAL_LIGHT = defineTheme(getThemeBaseColors("textual-light"));
-export const TEXTUAL_ANSI = defineTheme(getThemeBaseColors("textual-ansi"));
+export const DEFAULT_TERMINAL_THEME = defineTheme("default");
+export const SVG_EXPORT_THEME = defineTheme("svg-export");
+export const MONOKAI = defineTheme("monokai");
+export const NORD = defineTheme("nord");
+export const GRUVBOX = defineTheme("gruvbox");
+export const DRACULA = defineTheme("dracula");
+export const TOKYO_NIGHT = defineTheme("tokyo-night");
+export const FLEXOKI = defineTheme("flexoki");
+export const CYBERPUNK = defineTheme("cyberpunk");
+export const CATPPUCCIN_MOCHA = defineTheme("catppuccin-mocha");
+export const CATPPUCCIN_LATTE = defineTheme("catppuccin-latte");
+export const CATPPUCCIN_FRAPPE = defineTheme("catppuccin-frappe");
+export const CATPPUCCIN_MACCHIATO = defineTheme("catppuccin-macchiato");
+export const SOLARIZED_DARK = defineTheme("solarized-dark");
+export const SOLARIZED_LIGHT = defineTheme("solarized-light");
+export const ROSE_PINE = defineTheme("rose-pine");
+export const ROSE_PINE_MOON = defineTheme("rose-pine-moon");
+export const ROSE_PINE_DAWN = defineTheme("rose-pine-dawn");
+export const ATOM_ONE_DARK = defineTheme("atom-one-dark");
+export const ATOM_ONE_LIGHT = defineTheme("atom-one-light");
+export const TEXTUAL_DARK = defineTheme("textual-dark");
+export const TEXTUAL_LIGHT = defineTheme("textual-light");
+export const TEXTUAL_ANSI = defineTheme("textual-ansi");

package/dist/themes/transpose.d.ts

@@ -17,10 +17,10 @@
  * `ThemeKey` to apply (data), not *whether* to apply one (branch).
  *
  * [LAW:one-source-of-truth] Anchor classification lives only in
- * `ANCHORED_ROOTS` below. The buildPalette derivation guarantees every
- * variant of a semantic root shares the root as its hyphen prefix
- * (`error`, `error-darken-1`, `error-lighten-2`, ...), so one set covers
- * the whole family.
+ * `ANCHORED_ROOTS` below. Every variant of a semantic root carries the root
+ * as its first hyphen segment (`error`, `error-darken-1`, `error-muted`, ...)
+ * or after a `text-` or `on-` that draws on it (`text-error`, `on-error`), so
+ * one set covers the whole family.
  *
  * [LAW:one-way-deps] Imports flow `core/oklch → themes/transpose`;
  * nothing in core/ depends back on this file.
@@ -54,12 +54,7 @@ export declare function isAnchored(varName: string): boolean;
  * lightness shifts, mirror-inversions, hue rotations that don't touch L,
  * and combinations of all three. [LAW:types-are-the-program]
  *
- * The transposing path throws if the palette has no `background` var (the
- * `dark`-flag derivation has nothing to read). Failing loudly is preferred
- * over a silent fallback because the alternative — trusting the source
- * `palette.dark` after an arbitrary L-transform — produces flags that lie.
- * The identity fast-path is exempt: it preserves the source `dark` flag
- * verbatim (no derivation), so it needs no `background` and never throws.
+ * The identity fast-path preserves the source `dark` flag verbatim.
  *
  * @param name Optional override for the resulting palette name. Defaults
  *   to the source palette's name. Callers building a family of transposed

package/dist/themes/transpose.js

@@ -17,15 +17,16 @@
  * `ThemeKey` to apply (data), not *whether* to apply one (branch).
  *
  * [LAW:one-source-of-truth] Anchor classification lives only in
- * `ANCHORED_ROOTS` below. The buildPalette derivation guarantees every
- * variant of a semantic root shares the root as its hyphen prefix
- * (`error`, `error-darken-1`, `error-lighten-2`, ...), so one set covers
- * the whole family.
+ * `ANCHORED_ROOTS` below. Every variant of a semantic root carries the root
+ * as its first hyphen segment (`error`, `error-darken-1`, `error-muted`, ...)
+ * or after a `text-` or `on-` that draws on it (`text-error`, `on-error`), so
+ * one set covers the whole family.
  *
  * [LAW:one-way-deps] Imports flow `core/oklch → themes/transpose`;
  * nothing in core/ depends back on this file.
  */
 import { Oklch, isIdentityKey } from "../core/oklch.js";
+import { pattern } from "../core/pattern.js";
 import { Palette } from "./palette.js";
 /**
  * Semantic roots whose hue is locked under transposition. `error` must
@@ -43,9 +44,11 @@ export const ANCHORED_ROOTS = new Set([
     "success",
     "warning",
 ]);
+const DRAWN_ON = pattern(/^(?:text|on)-/);
 function rootOf(varName) {
-    const dash = varName.indexOf("-");
-    return dash === -1 ? varName : varName.slice(0, dash);
+    const role = varName.replace(DRAWN_ON, "");
+    const dash = role.indexOf("-");
+    return dash === -1 ? role : role.slice(0, dash);
 }
 /**
  * Whether a palette var's hue is locked under transposition. The single
@@ -68,12 +71,7 @@ export function isAnchored(varName) {
  * lightness shifts, mirror-inversions, hue rotations that don't touch L,
  * and combinations of all three. [LAW:types-are-the-program]
  *
- * The transposing path throws if the palette has no `background` var (the
- * `dark`-flag derivation has nothing to read). Failing loudly is preferred
- * over a silent fallback because the alternative — trusting the source
- * `palette.dark` after an arbitrary L-transform — produces flags that lie.
- * The identity fast-path is exempt: it preserves the source `dark` flag
- * verbatim (no derivation), so it needs no `background` and never throws.
+ * The identity fast-path preserves the source `dark` flag verbatim.
  *
  * @param name Optional override for the resulting palette name. Defaults
  *   to the source palette's name. Callers building a family of transposed
@@ -81,23 +79,14 @@ export function isAnchored(varName) {
  */
 export function transposePalette(palette, key, name) {
     if (isIdentityKey(key)) {
-        return new Palette(name ?? palette.name, palette.dark, palette.vars);
+        return new Palette(name ?? palette.name, palette.dark, palette.mapRoles((colour) => colour));
     }
     // Anchors share *everything except* hue with the user's key. They still
     // lightness-invert in a dark↔light flip; they still chroma-scale in a
     // saturation sweep — only their hue is held.
     const anchorKey = { ...key, hueShift: 0 };
-    const next = new Map();
-    for (const [varName, color] of palette.vars) {
-        const effective = isAnchored(varName) ? anchorKey : key;
-        next.set(varName, Oklch.fromRgba(color).applyKey(effective).toRgba());
-    }
-    const newBackground = next.get("background");
-    if (newBackground === undefined) {
-        throw new Error(`transposePalette: palette "${palette.name}" has no "background" ` +
-            `var; cannot derive the dark flag without a background color.`);
-    }
-    const newDark = Oklch.fromRgba(newBackground).l < 0.5;
+    const next = palette.mapRoles((colour, role) => Oklch.fromRgba(colour).applyKey(isAnchored(role) ? anchorKey : key).toRgba());
+    const newDark = Oklch.fromRgba(next.background).l < 0.5;
     return new Palette(name ?? palette.name, newDark, next);
 }
 /**

package/dist/widgets/button.d.ts

@@ -37,7 +37,7 @@ export declare class Button extends ThemedWidget {
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     setActive(value: boolean): void;
-    protected draw(_options: RenderOptions): Iterable<Segment>;
+    protected draw(options: RenderOptions): Iterable<Segment>;
     measure(_options: RenderOptions): {
         minimum: number;
         maximum: number;

package/dist/widgets/button.js

@@ -49,9 +49,9 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
+import { labelled } from "../core/orient.js";
 import { action } from "mobx";
 import { observableRef } from "./observable.js";
-import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
 import { cellLen } from "../core/cells.js";
 import { ThemedWidget } from "./themed-widget.js";
@@ -148,14 +148,14 @@ let Button = (() => {
         // --- Active mutator (the keyboard-activation microtask uses this) ---
         setActive(value) { this.active = value; }
         // --- Rendering ---
-        draw(_options) {
+        draw(options) {
             // [LAW:dataflow-not-control-flow] same segment count and width every state
             const focused = this.focused;
             const left = focused ? "[" : " ";
             const right = focused ? "]" : " ";
-            const text = `${left} ${this.label} ${right}`;
+            const drawn = (style) => labelled(`${left} `, this.label, ` ${right}`, style, options.textOrder);
             if (this.disabled) {
-                return [new Segment(text, new Style(this.disabledInk))];
+                return drawn(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
@@ -163,9 +163,9 @@ let Button = (() => {
             // accents whose contrast partner depends on luminance.
             const keys = VARIANT_KEYS[this.variant];
             if (this.active || this.hovered) {
-                return [new Segment(text, new Style({ ...ink(this.theme, keys.hoverFg, keys.hover), bold: this.active }))];
+                return drawn(new Style({ ...ink(this.theme, keys.hoverFg, keys.hover), bold: this.active }));
             }
-            return [new Segment(text, new Style(ink(this.theme, keys.fg, keys.bg)))];
+            return drawn(new Style(ink(this.theme, keys.fg, keys.bg)));
         }
         measure(_options) {
             // [LAW:one-source-of-truth] cellLen is the cell-width authority; .length

package/dist/widgets/checkbox.js

@@ -44,9 +44,9 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
+import { labelled } from "../core/orient.js";
 import { action } from "mobx";
 import { observableRef } from "./observable.js";
-import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
 import { cellLen } from "../core/cells.js";
 import { drawable } from "../core/protocol.js";
@@ -119,12 +119,12 @@ let Checkbox = (() => {
         // --- Rendering ---
         draw(options) {
             const indicator = this.checked ? drawable(options, "✓", "x") : " ";
-            const text = `[${indicator}] ${this.label}`;
+            const drawn = (style) => labelled(`[${indicator}] `, this.label, "", style, options.textOrder);
             if (this.disabled) {
-                return [new Segment(text, new Style(this.disabledInk))];
+                return drawn(new Style(this.disabledInk));
             }
             const colors = ink(this.theme, this.checked ? "text-primary" : "foreground", "background");
-            return [new Segment(text, new Style({ ...colors, underline: this.focused }))];
+            return drawn(new Style({ ...colors, underline: this.focused }));
         }
         measure(_options) {
             // [LAW:one-source-of-truth] cellLen — see button.ts.

package/dist/widgets/dropdown.d.ts

@@ -55,7 +55,7 @@ export declare class Dropdown extends ThemedWidget implements OverlayRenderable
     handleFocus(event: WidgetFocusEvent): void;
     protected draw(options: RenderOptions): Iterable<Segment>;
     private headerText;
-    renderOverlay(_options: RenderOptions): Iterable<Segment> | null;
+    renderOverlay(options: RenderOptions): Iterable<Segment> | null;
     private renderNoMatchRow;
     private renderOptionRow;
     private maxLabelLen;

package/dist/widgets/dropdown.js

@@ -56,6 +56,7 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
+import { labelled } from "../core/orient.js";
 import { action } from "mobx";
 import { observableRef } from "./observable.js";
 import { Segment } from "../core/segment.js";
@@ -318,7 +319,7 @@ let Dropdown = (() => {
             const headerLabel = this.headerText(maxLabelLen, caret);
             return [
                 new Segment("[", baseStyle),
-                new Segment(`${headerLabel} ${arrowChar}`, baseStyle),
+                ...labelled("", headerLabel, ` ${arrowChar}`, baseStyle, options.textOrder),
                 new Segment("]", baseStyle),
             ];
         }
@@ -348,18 +349,19 @@ let Dropdown = (() => {
             const [filterText] = splitText(this.filter, asCellCol(filterRoom));
             return setCellSize(" " + filterText + caret, asCellCol(maxLabelLen));
         }
-        renderOverlay(_options) {
+        renderOverlay(options) {
             if (!this.expanded)
                 return null;
             const maxLabelLen = this.maxLabelLen();
             const fopts = this.filteredOptions;
             if (fopts.length === 0)
                 return this.renderNoMatchRow(maxLabelLen);
+            const order = options.textOrder;
             const segments = [];
             for (let i = 0; i < fopts.length; i++) {
                 if (i > 0)
                     segments.push(new Segment("\n"));
-                segments.push(...this.renderOptionRow(fopts[i], i, maxLabelLen));
+                segments.push(...this.renderOptionRow(fopts[i], i, maxLabelLen, order));
             }
             return segments;
         }
@@ -379,7 +381,7 @@ let Dropdown = (() => {
                 new Segment(" ", style),
             ];
         }
-        renderOptionRow(entry, fpos, maxLabelLen) {
+        renderOptionRow(entry, fpos, maxLabelLen, order) {
             // Row: "  " + label.padEnd(maxLabelLen) + "  "
             // Width = 1 + 1 + maxLabelLen + 1 + 1 = maxLabelLen + 4.
             // Overlay rows are unbracketed — selection/highlight are conveyed by bg
@@ -399,7 +401,7 @@ let Dropdown = (() => {
                         : new Style(ink(this.theme, "foreground", "surface"));
             return [
                 new Segment(" ", rowStyle),
-                new Segment(inner, rowStyle),
+                ...labelled("", inner, "", rowStyle, order),
                 new Segment(" ", rowStyle),
             ];
         }

package/dist/widgets/event-router.js

@@ -78,7 +78,7 @@ export class EventRouter {
     }
     /** Route a key the app heard. */
     key(press) {
-        this.dispatchKey(new KeyEvent(press, this.source.frameTime));
+        this.dispatchKey(new KeyEvent(press, this.source.frameNow().time));
     }
     /** Route a pointer event the app heard. */
     mouse(event) {
@@ -173,7 +173,7 @@ export class EventRouter {
             y: event.y - target.originY,
             over: drew(frame, target.widget, event.x, event.y),
             cell: cellOf(frame, target.widget, event.x, event.y),
-            time: this.source.frameTime,
+            time: this.source.frameNow().time,
         });
         if (event.type === "mouse_down")
             this.captured = target;

package/dist/widgets/ink.d.ts

@@ -11,12 +11,13 @@
  *
  * [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.
+ * [LAW:single-enforcer] Every widget resolves palette roles here, and this is
+ * where 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): {
+import type { PaletteRole } from "../themes/palette.js";
+export declare function ink(theme: TerminalTheme, fg: PaletteRole, bg: PaletteRole): {
     color: ColorSpec;
     bgcolor: ColorSpec;
 };

package/dist/widgets/ink.js

@@ -11,21 +11,18 @@
  *
  * [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.
+ * [LAW:single-enforcer] Every widget resolves palette roles here, and this is
+ * where 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)}`);
-    }
+function paletteColor(theme, role) {
+    const rgba = theme.palette.get(role);
     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`);
+        throw new RangeError(`palette ${JSON.stringify(theme.palette.name)}: ${JSON.stringify(role)} is fully transparent, so it cannot be half of a widget's colour pair`);
     }
     return ColorSpec.fromRgba(rgba);
 }

package/dist/widgets/text-input.d.ts

@@ -198,7 +198,7 @@ export declare class TextInput extends ThemedWidget {
     readonly focusable = true;
     private accessor _value;
     private accessor _cursor;
-    private accessor _blinkFrom;
+    private accessor _blink;
     get value(): string;
     set value(v: string);
     get cursorPosition(): CodePoint;