@promptctl/rich-js 0.28.0 → 0.29.0

package/dist/themes/data/types.d.ts

@@ -13,7 +13,7 @@ export interface ThemePaletteData {
     readonly name: string;
     readonly dark: boolean;
     /**
-     * The sixteen colours a terminal showing this theme draws `red`, `blue`,
+     * The sixteen colors a terminal showing this theme draws `red`, `blue`,
      * `bright_black` and the rest in. A theme without its own table would draw
      * them in the VGA defaults (`blue` as #000080), which belong to no theme.
      */
@@ -22,12 +22,12 @@ export interface ThemePaletteData {
     readonly vars: Readonly<Record<BaseRole, string> & Partial<Record<PaletteRole, string>>>;
 }
 /**
- * ANSI colour numbers 0–15 in order: the eight normal colours, then their
+ * ANSI color numbers 0–15 in order: the eight normal colors, then their
  * bright forms. Named rather than positional so a data file cannot shift a
- * colour into its neighbour's slot by miscounting.
+ * color into its neighbour's slot by miscounting.
  */
 export declare const ANSI_SLOTS: readonly ["black", "red", "green", "yellow", "blue", "magenta", "cyan", "white", "brightBlack", "brightRed", "brightGreen", "brightYellow", "brightBlue", "brightMagenta", "brightCyan", "brightWhite"];
-/** One `#RRGGBB` per ANSI colour number, keyed by `ANSI_SLOTS`. */
+/** One `#RRGGBB` per ANSI color number, keyed by `ANSI_SLOTS`. */
 export type AnsiColorsData = {
     readonly [K in (typeof ANSI_SLOTS)[number]]: string;
 };

package/dist/themes/data/types.js

@@ -1,7 +1,7 @@
 /**
- * ANSI colour numbers 0–15 in order: the eight normal colours, then their
+ * ANSI color numbers 0–15 in order: the eight normal colors, then their
  * bright forms. Named rather than positional so a data file cannot shift a
- * colour into its neighbour's slot by miscounting.
+ * color into its neighbour's slot by miscounting.
  */
 export const ANSI_SLOTS = [
     "black", "red", "green", "yellow", "blue", "magenta", "cyan", "white",

package/dist/themes/palette.d.ts

@@ -10,7 +10,7 @@ export type Shade = `-${"darken" | "lighten"}-${1 | 2 | 3}`;
  * list is read off those rules.
  */
 export type PaletteRole = ShadedRole | `${ShadedRole}${Shade}` | `${AccentRole}-muted` | `text-${AccentRole}` | `on-${AccentRole}` | "background-muted" | "foreground-muted" | "foreground-disabled" | "surface-active" | "text" | "text-muted" | "text-disabled" | "border" | "border-blurred" | "block-cursor-background" | "block-cursor-foreground" | "block-cursor-blurred-background" | "block-cursor-blurred-foreground" | "block-hover-background" | "button-foreground" | "button-color-foreground" | "footer-background" | "footer-foreground" | "footer-description-background" | "footer-description-foreground" | "footer-item-background" | "footer-key-background" | "footer-key-foreground" | "input-cursor-background" | "input-cursor-foreground" | "input-selection-background" | "link-background" | "link-background-hover" | "link-color" | "link-color-hover" | `markdown-h${1 | 2 | 3 | 4 | 5 | 6}-${"background" | "color"}` | "scrollbar" | "scrollbar-active" | "scrollbar-hover" | "scrollbar-background" | "scrollbar-background-active" | "scrollbar-background-hover" | "scrollbar-corner-color";
-/** A colour for each role: what proves a palette complete. */
+/** A color for each role: what proves a palette complete. */
 export type PaletteRoles = Readonly<Record<PaletteRole, ColorRgba>>;
 /**
  * A semantic palette: a named map from role → ColorRgba, holding every
@@ -22,20 +22,20 @@ export type PaletteRoles = Readonly<Record<PaletteRole, ColorRgba>>;
  *
  * Storage is uniformly ColorRgba; consumers that load from hex JSON
  * parse to ColorRgba at load time. `get` is a bare lookup — turning an
- * author-written *reference* (a name, or a `#RRGGBB` literal) into a colour
+ * author-written *reference* (a name, or a `#RRGGBB` literal) into a color
  * is `resolveColorRef`'s job in `colorRef.ts`, so a Palette never has to
  * know about the syntax callers write.
  *
- * Every colour a Palette hands out is opaque or fully transparent. A theme's translucent variable
+ * Every color a Palette hands out is opaque or fully transparent. A theme's translucent variable
  * (Textual's `boost`, a hover overlay) is a tint meant for that theme's own
- * background, and a colour leaving the palette no longer knows which
+ * background, and a color leaving the palette no longer knows which
  * background that was: the SGR writer would composite it over the terminal's
  * black, which is not the theme's background, and draw a tint the theme never
  * meant.
  * So it is drawn onto `background` here, once, and the writer, the exporters
- * and the contrast choosers all read the colour it has there. On any other
- * surface it keeps that colour: the tint does not follow what is under it.
- * The exception is a fully transparent colour, Textual's "no background": it
+ * and the contrast choosers all read the color it has there. On any other
+ * surface it keeps that color: the tint does not follow what is under it.
+ * The exception is a fully transparent color, Textual's "no background": it
  * 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.
  *
@@ -48,14 +48,14 @@ export declare class Palette {
     constructor(name: string, dark: boolean, roles: PaletteRoles);
     get(role: PaletteRole): ColorRgba;
     get(role: string): ColorRgba | undefined;
-    /** This palette's roles, each put through `colour`: what a new palette is built from. */
-    mapRoles(colour: (colour: ColorRgba, role: PaletteRole) => ColorRgba): PaletteRoles;
+    /** This palette's roles, each put through `color`: what a new palette is built from. */
+    mapRoles(color: (color: ColorRgba, role: PaletteRole) => ColorRgba): PaletteRoles;
 }
 /**
- * A palette colour as it is drawn: composited onto the palette's own
+ * A palette color as it is drawn: composited onto the palette's own
  * `background`, which has nothing under it and so must itself be opaque.
  * [LAW:one-source-of-truth] The one statement of what a translucent palette
- * colour means; `buildPalette` draws its base colours through it before
+ * color means; `buildPalette` draws its base colors through it before
  * deriving from them.
  */
-export declare function drawnOn(name: string, background: ColorRgba): (colour: ColorRgba) => ColorRgba;
+export declare function drawnOn(name: string, background: ColorRgba): (color: ColorRgba) => ColorRgba;

package/dist/themes/palette.js

@@ -8,20 +8,20 @@
  *
  * Storage is uniformly ColorRgba; consumers that load from hex JSON
  * parse to ColorRgba at load time. `get` is a bare lookup — turning an
- * author-written *reference* (a name, or a `#RRGGBB` literal) into a colour
+ * author-written *reference* (a name, or a `#RRGGBB` literal) into a color
  * is `resolveColorRef`'s job in `colorRef.ts`, so a Palette never has to
  * know about the syntax callers write.
  *
- * Every colour a Palette hands out is opaque or fully transparent. A theme's translucent variable
+ * Every color a Palette hands out is opaque or fully transparent. A theme's translucent variable
  * (Textual's `boost`, a hover overlay) is a tint meant for that theme's own
- * background, and a colour leaving the palette no longer knows which
+ * background, and a color leaving the palette no longer knows which
  * background that was: the SGR writer would composite it over the terminal's
  * black, which is not the theme's background, and draw a tint the theme never
  * meant.
  * So it is drawn onto `background` here, once, and the writer, the exporters
- * and the contrast choosers all read the colour it has there. On any other
- * surface it keeps that colour: the tint does not follow what is under it.
- * The exception is a fully transparent colour, Textual's "no background": it
+ * and the contrast choosers all read the color it has there. On any other
+ * surface it keeps that color: the tint does not follow what is under it.
+ * The exception is a fully transparent color, Textual's "no background": it
  * 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.
  *
@@ -35,29 +35,29 @@ export class Palette {
         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.
+        // where "a palette color 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)]));
+        this.vars = new Map(Object.entries(roles).map(([role, color]) => [role, draw(color)]));
     }
     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)]));
+    /** This palette's roles, each put through `color`: what a new palette is built from. */
+    mapRoles(color) {
+        return Object.fromEntries([...this.vars].map(([role, was]) => [role, color(was, role)]));
     }
 }
 /**
- * A palette colour as it is drawn: composited onto the palette's own
+ * A palette color as it is drawn: composited onto the palette's own
  * `background`, which has nothing under it and so must itself be opaque.
  * [LAW:one-source-of-truth] The one statement of what a translucent palette
- * colour means; `buildPalette` draws its base colours through it before
+ * color means; `buildPalette` draws its base colors through it before
  * deriving from them.
  */
 export function drawnOn(name, background) {
     if (background.alpha !== 1) {
-        throw new RangeError(`palette ${JSON.stringify(name)}: background is the surface its translucent colours are drawn on, so it must be opaque; got ${background.hex}`);
+        throw new RangeError(`palette ${JSON.stringify(name)}: background is the surface its translucent colors are drawn on, so it must be opaque; got ${background.hex}`);
     }
-    // A fully transparent colour is not a tint: it draws nothing on any surface.
-    return (colour) => (colour.alpha === 0 ? colour : colour.compositeOver(background));
+    // A fully transparent color is not a tint: it draws nothing on any surface.
+    return (color) => (color.alpha === 0 ? color : color.compositeOver(background));
 }

package/dist/themes/ramp.d.ts

@@ -6,13 +6,13 @@
  * color, and none takes a *measurement*. Without a ramp the answer gets
  * computed outside the theme system — a script emits a hex, a template
  * branches `if ge .pct 80 … else if ge .pct 50 …` — and that color decision
- * can no longer transpose with the palette it was meant to belong to. A ramp
+ * can no longer adjust 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 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 — any `Ease` from `core/easing`, the vocabulary every effect shares —
+ * value — any `Easing` 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.
  *
@@ -21,7 +21,7 @@
  * midpoints of an sRGB blend.
  *
  * A ramp also carries how far it has been moved: `scroll`, in spans, how
- * far its colours have travelled along it, and `hue`, in turns, how far
+ * far its colors have travelled along it, and `hue`, in turns, how far
  * they are rotated round the OKLCH hue circle. A moved ramp is still a
  * `ColorRamp`, so anything that reads a ramp reads a moving one frame by
  * frame (`moving`) with nothing new to learn. [LAW:one-type-per-behavior]
@@ -33,7 +33,7 @@
  */
 import { Animation } from "../core/animation.js";
 import type { ColorRgba } from "../core/color.js";
-import { type Ease } from "../core/easing.js";
+import { type Easing } from "../core/easing.js";
 /** One stop: the color the ramp is exactly `color` at position `at`. */
 export interface ColorStop {
     readonly at: number;
@@ -42,8 +42,8 @@ export interface ColorStop {
 /**
  * How a ramp moves over time, each part an `Animation<number>` that is
  * `Animation.constant(0)` when not given. `scroll` is in spans: at 1 the
- * colours have travelled the whole way from the first stop to the last and
- * wrapped back, so `Animation.continuous(Phase.loop(seconds))` scrolls once
+ * colors have travelled the whole way from the first stop to the last and
+ * wrapped back, so `Animation.continuous(WrapMode.loop(seconds))` scrolls once
  * every `seconds`. `hue` is in turns, CSS's `turn`: at 1 every hue has gone
  * once round the circle. A one-shot that settles is a `tween` to where it
  * rests.
@@ -68,13 +68,13 @@ export interface RampMotion {
  * same way).
  */
 export declare class ColorRamp {
-    readonly ease: Ease;
+    readonly ease: Easing;
     readonly stops: readonly ColorStop[];
-    /** How far the colours have moved along the span, in spans, in [0, 1). */
+    /** How far the colors have moved along the span, in spans, in [0, 1). */
     readonly scroll: number;
     /** How far every hue is rotated in OKLCH, in turns, in [0, 1). */
     readonly hue: number;
-    constructor(ease: Ease, stops: readonly ColorStop[], scroll?: number, hue?: number);
+    constructor(ease: Easing, stops: readonly ColorStop[], scroll?: number, hue?: number);
     /**
      * 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 the raw progress
@@ -91,26 +91,26 @@ export declare class ColorRamp {
      * CSS defines them. An ease that overshoots [0, 1] holds the end colors
      * where it does: a ramp never paints outside its stops.
      *
-     * A scrolled ramp reads, inside its span, the colour `scroll` spans behind
+     * A scrolled ramp reads, inside its span, the color `scroll` spans behind
      * `value`, wrapped back round the span as a repeating gradient does —
-     * seamless when the first and last stops are one colour; outside the span
-     * its end colours hold, however far it has scrolled. A rotated ramp turns
-     * the colour read by `hue` at its own lightness and chroma. Unmoved, every
+     * seamless when the first and last stops are one color; outside the span
+     * its end colors hold, however far it has scrolled. A rotated ramp turns
+     * the color read by `hue` at its own lightness and chroma. Unmoved, every
      * read keeps the exactness above.
      */
     at(value: number): ColorRgba;
-    /** The colour at `value` with the ramp unmoved: the stops and the ease alone. */
+    /** The color at `value` with the ramp unmoved: the stops and the ease alone. */
     private unmoved;
     /**
      * This ramp read over time: its span of positions, from the first stop's
      * to the last's, crossed at a steady rate in `seconds` and held at the last
-     * stop from then on, each colour along the way the ramp's own. A colour
+     * stop from then on, each color along the way the ramp's own. A color
      * tween is a two-stop ramp over its seconds — the ramp's ease shaping the
      * move, so `new ColorRamp(ease, [{ at: 0, color: a }, { at: 1, color: b
      * }]).over(seconds)` is `a` eased to `b` — and a ramp of more stops over
      * time is a sweep through all of them. [LAW:one-source-of-truth] The
      * blending is `at`'s; what time adds is `tween`'s (`core/tween.ts`), so a
-     * host sampling once a second or sixty times reads the stop colours byte
+     * host sampling once a second or sixty times reads the stop colors byte
      * for byte where `at` paints them.
      */
     over(seconds: number): Animation<ColorRgba>;
@@ -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 `stillWhereNothingMoves`).
+     * (`gradient`, through `staticWhereUnchanged`).
      */
     moving(motion: RampMotion): Animation<ColorRamp>;
 }

package/dist/themes/ramp.js

@@ -6,13 +6,13 @@
  * color, and none takes a *measurement*. Without a ramp the answer gets
  * computed outside the theme system — a script emits a hex, a template
  * branches `if ge .pct 80 … else if ge .pct 50 …` — and that color decision
- * can no longer transpose with the palette it was meant to belong to. A ramp
+ * can no longer adjust 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 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 — any `Ease` from `core/easing`, the vocabulary every effect shares —
+ * value — any `Easing` 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.
  *
@@ -21,7 +21,7 @@
  * midpoints of an sRGB blend.
  *
  * A ramp also carries how far it has been moved: `scroll`, in spans, how
- * far its colours have travelled along it, and `hue`, in turns, how far
+ * far its colors have travelled along it, and `hue`, in turns, how far
  * they are rotated round the OKLCH hue circle. A moved ramp is still a
  * `ColorRamp`, so anything that reads a ramp reads a moving one frame by
  * frame (`moving`) with nothing new to learn. [LAW:one-type-per-behavior]
@@ -53,7 +53,7 @@ import { tween } from "../core/tween.js";
 export class ColorRamp {
     ease;
     stops;
-    /** How far the colours have moved along the span, in spans, in [0, 1). */
+    /** How far the colors have moved along the span, in spans, in [0, 1). */
     scroll;
     /** How far every hue is rotated in OKLCH, in turns, in [0, 1). */
     hue;
@@ -92,11 +92,11 @@ export class ColorRamp {
      * CSS defines them. An ease that overshoots [0, 1] holds the end colors
      * where it does: a ramp never paints outside its stops.
      *
-     * A scrolled ramp reads, inside its span, the colour `scroll` spans behind
+     * A scrolled ramp reads, inside its span, the color `scroll` spans behind
      * `value`, wrapped back round the span as a repeating gradient does —
-     * seamless when the first and last stops are one colour; outside the span
-     * its end colours hold, however far it has scrolled. A rotated ramp turns
-     * the colour read by `hue` at its own lightness and chroma. Unmoved, every
+     * seamless when the first and last stops are one color; outside the span
+     * its end colors hold, however far it has scrolled. A rotated ramp turns
+     * the color read by `hue` at its own lightness and chroma. Unmoved, every
      * read keeps the exactness above.
      */
     at(value) {
@@ -112,7 +112,7 @@ export class ColorRamp {
         // Exact when unrotated: the OKLCH round trip can land a channel one off.
         return this.hue === 0 ? read : Oklch.fromRgba(read).applyKey({ ...IDENTITY, hueShift: 360 * this.hue }).toRgba();
     }
-    /** The colour at `value` with the ramp unmoved: the stops and the ease alone. */
+    /** The color at `value` with the ramp unmoved: the stops and the ease alone. */
     unmoved(value) {
         const stops = this.stops;
         // The last stop at or below `value`; -1 when `value` is below them all.
@@ -137,13 +137,13 @@ export class ColorRamp {
     /**
      * This ramp read over time: its span of positions, from the first stop's
      * to the last's, crossed at a steady rate in `seconds` and held at the last
-     * stop from then on, each colour along the way the ramp's own. A colour
+     * stop from then on, each color along the way the ramp's own. A color
      * tween is a two-stop ramp over its seconds — the ramp's ease shaping the
      * move, so `new ColorRamp(ease, [{ at: 0, color: a }, { at: 1, color: b
      * }]).over(seconds)` is `a` eased to `b` — and a ramp of more stops over
      * time is a sweep through all of them. [LAW:one-source-of-truth] The
      * blending is `at`'s; what time adds is `tween`'s (`core/tween.ts`), so a
-     * host sampling once a second or sixty times reads the stop colours byte
+     * host sampling once a second or sixty times reads the stop colors byte
      * for byte where `at` paints them.
      */
     over(seconds) {
@@ -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 `stillWhereNothingMoves`).
+     * (`gradient`, through `staticWhereUnchanged`).
      */
     moving(motion) {
         const still = Animation.constant(0);

package/dist/themes/registry.js

@@ -29,8 +29,8 @@ function isThemeName(name) {
 export function getThemeBaseColors(name) {
     const data = THEMES[name];
     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.
+    // The colors `getThemePalette(name)` hands out for the same names: drawn on
+    // the theme's own background, as a Palette draws every color it holds.
     const draw = drawnOn(data.name, bg);
     const base = (key) => draw(parseHex(data.vars[key], data.name, key));
     return {
@@ -57,7 +57,7 @@ function hydrate(data) {
     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
+// Theme data is authored, so a malformed color names the theme and the key it
 // sits under; the grammar itself is `parseHexColor`'s.
 function parseHex(value, theme, key) {
     try {
@@ -70,7 +70,7 @@ function parseHex(value, theme, key) {
     }
 }
 /**
- * An ANSI slot is a colour a terminal paints, never a blend, so it takes no
+ * An ANSI slot is a color 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) {

package/dist/themes/terminalThemes.d.ts

@@ -6,7 +6,7 @@
  * [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.
+ * it, with the theme's sixteen named colors 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

@@ -6,7 +6,7 @@
  * [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.
+ * it, with the theme's sixteen named colors 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/widgets/button.d.ts

@@ -19,7 +19,7 @@ import { Segment } from "../core/segment.js";
 import type { RenderOptions } from "../core/protocol.js";
 import type { TerminalTheme } from "../core/color.js";
 import { ThemedWidget } from "./themed-widget.js";
-import type { KeyEvent, WidgetMouseEvent } from "./types.js";
+import type { WidgetKeyEvent, WidgetMouseEvent } from "./types.js";
 export type ButtonVariant = "default" | "primary" | "success" | "warning" | "danger";
 export interface ButtonOptions {
     label: string;
@@ -34,7 +34,7 @@ export declare class Button extends ThemedWidget {
     accessor label: string;
     accessor variant: ButtonVariant;
     constructor(options: ButtonOptions);
-    handleKey(event: KeyEvent): void;
+    handleKey(event: WidgetKeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     setActive(value: boolean): void;
     protected draw(options: RenderOptions): Iterable<Segment>;

package/dist/widgets/button.js

@@ -49,7 +49,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 { labeled } from "../core/orient.js";
 import { action } from "mobx";
 import { observableRef } from "./observable.js";
 import { Style } from "../core/style.js";
@@ -61,7 +61,7 @@ import { ink } from "./ink.js";
 //   hover       — full accent bg; pair with hoverFg, NOT with `fg`. The
 //                 text-* keys are mostly-accent and would clash on a full
 //                 accent bg.
-//   hoverFg     — WCAG-correct contrast colour (on-${accent}) for full bg.
+//   hoverFg     — WCAG-correct contrast color (on-${accent}) for full bg.
 const VARIANT_KEYS = {
     default: { bg: "surface", fg: "foreground", hover: "primary", hoverFg: "on-primary" },
     primary: { bg: "primary-muted", fg: "text-primary", hover: "primary", hoverFg: "on-primary" },
@@ -153,11 +153,11 @@ let Button = (() => {
             const focused = this.focused;
             const left = focused ? "[" : " ";
             const right = focused ? "]" : " ";
-            const drawn = (style) => labelled(`${left} `, this.label, ` ${right}`, style, options.textOrder);
+            const drawn = (style) => labeled(`${left} `, this.label, ` ${right}`, style, options.textOrder);
             if (this.disabled) {
                 return drawn(new Style(this.disabledInk));
             }
-            // Active and hover share the same colour pair (full accent bg + on-accent fg).
+            // Active and hover share the same color 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.

package/dist/widgets/checkbox.d.ts

@@ -14,7 +14,7 @@ import { Segment } from "../core/segment.js";
 import { type RenderOptions } from "../core/protocol.js";
 import type { TerminalTheme } from "../core/color.js";
 import { ThemedWidget } from "./themed-widget.js";
-import type { KeyEvent, WidgetMouseEvent } from "./types.js";
+import type { WidgetKeyEvent, WidgetMouseEvent } from "./types.js";
 export interface CheckboxOptions {
     label: string;
     checked?: boolean;
@@ -28,7 +28,7 @@ export declare class Checkbox extends ThemedWidget {
     accessor label: string;
     accessor checked: boolean;
     constructor(options: CheckboxOptions);
-    handleKey(event: KeyEvent): void;
+    handleKey(event: WidgetKeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     protected draw(options: RenderOptions): Iterable<Segment>;
     measure(_options: RenderOptions): {

package/dist/widgets/checkbox.js

@@ -44,7 +44,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 { labeled } from "../core/orient.js";
 import { action } from "mobx";
 import { observableRef } from "./observable.js";
 import { Style } from "../core/style.js";
@@ -119,7 +119,7 @@ let Checkbox = (() => {
         // --- Rendering ---
         draw(options) {
             const indicator = this.checked ? drawable(options, "✓", "x") : " ";
-            const drawn = (style) => labelled(`[${indicator}] `, this.label, "", style, options.textOrder);
+            const drawn = (style) => labeled(`[${indicator}] `, this.label, "", style, options.textOrder);
             if (this.disabled) {
                 return drawn(new Style(this.disabledInk));
             }

package/dist/widgets/dropdown.d.ts

@@ -26,7 +26,7 @@ import { Segment } from "../core/segment.js";
 import { type RenderOptions } from "../core/protocol.js";
 import type { TerminalTheme } from "../core/color.js";
 import { ThemedWidget } from "./themed-widget.js";
-import type { KeyEvent, WidgetMouseEvent, WidgetFocusEvent, OverlayRenderable } from "./types.js";
+import type { WidgetKeyEvent, WidgetMouseEvent, WidgetFocusEvent, OverlayRenderable } from "./types.js";
 export interface DropdownOptions {
     options: string[];
     selectedIndex?: number;
@@ -50,7 +50,7 @@ export declare class Dropdown extends ThemedWidget implements OverlayRenderable
     }[];
     constructor(options: DropdownOptions);
     private clampIndex;
-    handleKey(event: KeyEvent): void;
+    handleKey(event: WidgetKeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     handleFocus(event: WidgetFocusEvent): void;
     protected draw(options: RenderOptions): Iterable<Segment>;

package/dist/widgets/dropdown.js

@@ -56,7 +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 { labeled } from "../core/orient.js";
 import { action } from "mobx";
 import { observableRef } from "./observable.js";
 import { Segment } from "../core/segment.js";
@@ -319,7 +319,7 @@ let Dropdown = (() => {
             const headerLabel = this.headerText(maxLabelLen, caret);
             return [
                 new Segment("[", baseStyle),
-                ...labelled("", headerLabel, ` ${arrowChar}`, baseStyle, options.textOrder),
+                ...labeled("", headerLabel, ` ${arrowChar}`, baseStyle, options.textOrder),
                 new Segment("]", baseStyle),
             ];
         }
@@ -401,7 +401,7 @@ let Dropdown = (() => {
                         : new Style(ink(this.theme, "foreground", "surface"));
             return [
                 new Segment(" ", rowStyle),
-                ...labelled("", inner, "", rowStyle, order),
+                ...labeled("", inner, "", rowStyle, order),
                 new Segment(" ", rowStyle),
             ];
         }

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

@@ -5,13 +5,13 @@
  * It parses nothing and reads no terminal: `App` owns the one parser over its
  * host's input (`host/input`), and `WidgetApp` hands this what the app hears.
  */
-import { KeyEvent } from "./types.js";
+import { WidgetKeyEvent } from "./types.js";
 import type { FrameSource, KeyHandlerOptions } from "./types.js";
 import type { Unsubscribe } from "../core/subscription.js";
-import type { KeyPress } from "../host/input.js";
+import type { KeyEvent } from "../host/input.js";
 import type { AppMouseEvent } from "../host/app.js";
-import type { Wheel } from "../host/app.js";
-type KeyHandler = (event: KeyEvent) => void;
+import type { WheelEvent } from "../host/app.js";
+type KeyHandler = (event: WidgetKeyEvent) => void;
 export interface EventRouterOptions {
     source: FrameSource;
     /** Whether a left-button press focuses the widget under it before it hears the press. */
@@ -44,7 +44,7 @@ export declare class EventRouter {
     onKey(handler: KeyHandler, options?: KeyHandlerOptions): Unsubscribe;
     onMouse(handler: (event: AppMouseEvent) => void): Unsubscribe;
     /** Route a key the app heard. */
-    key(press: KeyPress): void;
+    key(press: KeyEvent): void;
     /** Route a pointer event the app heard. */
     mouse(event: AppMouseEvent): void;
     /**
@@ -53,7 +53,7 @@ export declare class EventRouter {
      * Whether one moved is the answer: with none, the app passes the wheel
      * outward.
      */
-    wheel({ x, y, lines }: Wheel): boolean;
+    wheel({ x, y, lines }: WheelEvent): boolean;
     private point;
     private dispatchKey;
     private dispatchMouse;

package/dist/widgets/event-router.js

@@ -5,7 +5,7 @@
  * It parses nothing and reads no terminal: `App` owns the one parser over its
  * host's input (`host/input`), and `WidgetApp` hands this what the app hears.
  */
-import { KeyEvent } from "./types.js";
+import { WidgetKeyEvent } from "./types.js";
 import { cellOf, drew, originOf, scrollTargetAt, widgetAt } from "./hit.js";
 export class EventRouter {
     source;
@@ -78,7 +78,7 @@ export class EventRouter {
     }
     /** Route a key the app heard. */
     key(press) {
-        this.dispatchKey(new KeyEvent(press, this.source.frameNow().time));
+        this.dispatchKey(new WidgetKeyEvent(press, this.source.frameNow().time));
     }
     /** Route a pointer event the app heard. */
     mouse(event) {

package/dist/widgets/focus-manager.d.ts

@@ -4,12 +4,12 @@
  * [LAW:dataflow-not-control-flow] focus transitions are observable state;
  * widgets react to focus/blur events, the manager never skips dispatch.
  */
-import type { InteractiveWidget, FocusManager, KeyEvent } from "./types.js";
+import type { InteractiveWidget, FocusManager, WidgetKeyEvent } from "./types.js";
 import type { Unsubscribe } from "../core/subscription.js";
 /** What focus follows: the frame a `WidgetApp` just painted. */
 export interface FocusView {
     /** Every widget the view holds, in document order, whether or not it has a cell on screen. */
-    present(): readonly InteractiveWidget[];
+    mounted(): readonly InteractiveWidget[];
     /** The widgets with a cell on the frame on screen, in document order. */
     onScreen(): readonly InteractiveWidget[];
     /** The time a frame drawn now is drawn for (`RenderOptions.frame`), which a focus change is stamped with. */
@@ -46,7 +46,7 @@ export declare class DefaultFocusManager implements FocusManager {
      */
     settle(): void;
     onChange(handler: (current: InteractiveWidget | null) => void): Unsubscribe;
-    handleKey(event: KeyEvent): void;
+    handleKey(event: WidgetKeyEvent): void;
     private step;
     private clear;
     private setFocus;

package/dist/widgets/focus-manager.js

@@ -90,10 +90,10 @@ let DefaultFocusManager = (() => {
             return this.view.onScreen().filter(takesFocus);
         }
         next() {
-            this.step(this.view.present());
+            this.step(this.view.mounted());
         }
         prev() {
-            this.step([...this.view.present()].reverse());
+            this.step([...this.view.mounted()].reverse());
         }
         // A widget not on screen yet can take focus: an app that is about to show
         // it focuses it first, and the frame that shows it keeps it (`settle`).
@@ -118,7 +118,7 @@ let DefaultFocusManager = (() => {
          */
         settle() {
             const current = this.currentWidget;
-            if (current && takesFocus(current) && this.view.present().includes(current))
+            if (current && takesFocus(current) && this.view.mounted().includes(current))
                 return;
             const first = this.widgets[0];
             if (first)