@promptctl/rich-js 0.27.0 → 0.28.0

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

@@ -11,15 +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 fill the registry cache.
+ * `getThemeBaseColors` for callers that only need the substrate.
  */
 export interface ThemeBaseColors {
     readonly name: string;
@@ -35,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

@@ -23,10 +23,8 @@ 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];

package/dist/themes/terminalThemes.d.ts

@@ -3,17 +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 palette (via
- * `getThemePalette(name)`) AND the matching `TerminalTheme` constant exported
- * below (via `getThemeBaseColors(name)`, which pulls just the 8 substrate
- * keys). The two views agree on those eight. Every other role of a
- * `TerminalTheme`'s palette is derived from them, so it is not the colour the
- * theme authored: read `getThemePalette` for that.
- *
- * [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,17 +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 palette (via
- * `getThemePalette(name)`) AND the matching `TerminalTheme` constant exported
- * below (via `getThemeBaseColors(name)`, which pulls just the 8 substrate
- * keys). The two views agree on those eight. Every other role of a
- * `TerminalTheme`'s palette is derived from them, so it is not the colour the
- * theme authored: read `getThemePalette` for that.
- *
- * [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
@@ -25,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/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/themed-widget.js

@@ -80,10 +80,10 @@ let ThemedWidget = (() => {
             return new Style(ink(this.theme, "foreground", "background"));
         }
         // [LAW:one-source-of-truth] How every widget looks while disabled: the
-        // palette's de-emphasized text on its ground. WCAG sets no contrast floor for
-        // an inactive control, and this sits under the one for text on purpose.
+        // palette's disabled text on its ground. WCAG sets no contrast floor for an
+        // inactive control, and this sits under the one for text on purpose.
         get disabledInk() {
-            return ink(this.theme, "foreground-muted", "background");
+            return ink(this.theme, "foreground-disabled", "background");
         }
     };
 })();

package/dist/widgets/toggle.d.ts

@@ -33,7 +33,7 @@ export declare class Toggle extends ThemedWidget {
     constructor(options: ToggleOptions);
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
-    protected draw(_options: RenderOptions): Iterable<Segment>;
+    protected draw(options: RenderOptions): Iterable<Segment>;
     measure(_options: RenderOptions): {
         minimum: number;
         maximum: number;

package/dist/widgets/toggle.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 { ThemedWidget } from "./themed-widget.js";
@@ -137,16 +137,16 @@ let Toggle = (() => {
             }
         }
         // --- Rendering ---
-        draw(_options) {
+        draw(options) {
             // Both indicators are exactly 5 cells: "[ON] " and "[OFF]".
             const indicator = this.on ? "[ON] " : "[OFF]";
-            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 keys = VARIANT_KEYS[this.variant];
             const colors = this.on ? ink(this.theme, keys.onFg, keys.onBg) : ink(this.theme, keys.offFg, keys.offBg);
-            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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptctl/rich-js",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Rich text and beautiful formatting in the terminal — a TypeScript port of Python's Rich",
   "repository": {
     "type": "git",
@@ -89,6 +89,7 @@
     "template-bindings": "node scripts/build-demos.ts && node dist-demo/examples/rich-template-bindings/main.js",
     "themes-and-color-studio": "node scripts/build-demos.ts && node dist-demo/examples/themes-and-color-studio/node.js",
     "terminal-host": "node scripts/build-demos.ts && node dist-demo/examples/terminal-host/main.js",
+    "terminal-colors": "node scripts/build-demos.ts && node dist-demo/examples/terminal-colors/index.js",
     "test:demos": "playwright test"
   },
   "keywords": [
@@ -123,14 +124,14 @@
     "@codemirror/view": "^6.43.13",
     "@lezer/highlight": "^1.2.5",
     "@playwright/test": "^1.63.0",
-    "@promptctl/go-template-js": "^0.10.0",
+    "@promptctl/go-template-js": "0.12.0",
     "@types/markdown-it": "^14.2.0",
     "@types/node": "^26.5.1",
     "@types/semver": "^7.8.0",
     "@xterm/headless": "^6.0.0",
     "markdown-it": "^14.3.2",
     "markdown-it-container": "^4.0.0",
-    "mobx": "^7.0.3",
+    "mobx": "7.0.3",
     "node-inspect-extracted": "^3.3.3",
     "semver": "^7.8.5",
     "strip-ansi": "^7.2.0",
@@ -141,7 +142,7 @@
     "vitest": "^5.0.0"
   },
   "peerDependencies": {
-    "@promptctl/go-template-js": "^0.10.0",
+    "@promptctl/go-template-js": "^0.12.0",
     "mobx": "^7.0.3"
   },
   "peerDependenciesMeta": {