@textui/core 0.7.0 → 0.9.0

package/dist/util/text.d.ts

@@ -45,6 +45,15 @@ export declare function sliceColumns(text: string, start: number, width: number)
  */
 export declare function expandTabs(text: string, tabWidth?: number): string;
 export type TruncateSide = 'end' | 'start' | 'middle';
+/**
+ * Fit into `width` cells, marking the cut whether or not there was one.
+ *
+ * `truncate` marks only what it had to cut, which is right for a string that
+ * has to fit a cell. A paragraph stopped by the box rather than by its own
+ * length is the other case: its last visible row may fit exactly and still not
+ * be the end of the text, and it has to say so.
+ */
+export declare function markCut(text: string, width: number, ellipsis?: string): string;
 /** Fit into `width` cells, marking the cut with `ellipsis`. */
 export declare function truncate(text: string, width: number, ellipsis?: string, side?: TruncateSide): string;
 /** Pad to exactly `width` cells. Over-long input is returned unchanged. */

package/dist/util/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/util/text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAelD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAM7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAShD;AA8ED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAsBrD;AAsBD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAgBhD;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYhE;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAgC/E;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAuB7D;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEtD,+DAA+D;AAC/D,wBAAgB,QAAQ,CACtB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,SAAM,EACd,IAAI,GAAE,YAAoB,GACzB,MAAM,CAkCR;AAED,2EAA2E;AAC3E,wBAAgB,KAAK,CACnB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,MAAM,GAAG,QAAQ,GAAG,OAAgB,EAC3C,IAAI,SAAM,GACT,MAAM,CAQR;AAED,kEAAkE;AAClE,wBAAgB,KAAK,CACnB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,MAAM,GAAG,QAAQ,GAAG,OAAgB,EAC3C,QAAQ,SAAM,GACb,MAAM,CAER;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAOnF;AAED,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAE/D;AAED,4EAA4E;AAC5E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,GAAE,QAAiB,GAAG,MAAM,EAAE,CAuDvF;AAOD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIjE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/util/text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAelD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAM7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAShD;AA8ED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAsBrD;AAsBD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAgBhD;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYhE;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAgC/E;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAuB7D;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEtD;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAM,GAAG,MAAM,CAK3E;AAED,+DAA+D;AAC/D,wBAAgB,QAAQ,CACtB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,SAAM,EACd,IAAI,GAAE,YAAoB,GACzB,MAAM,CAkCR;AAED,2EAA2E;AAC3E,wBAAgB,KAAK,CACnB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,MAAM,GAAG,QAAQ,GAAG,OAAgB,EAC3C,IAAI,SAAM,GACT,MAAM,CAQR;AAED,kEAAkE;AAClE,wBAAgB,KAAK,CACnB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,MAAM,GAAG,QAAQ,GAAG,OAAgB,EAC3C,QAAQ,SAAM,GACb,MAAM,CAER;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAOnF;AAED,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAE/D;AAED,4EAA4E;AAC5E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,GAAE,QAAiB,GAAG,MAAM,EAAE,CAuDvF;AAOD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIjE"}

package/dist/util/text.js

@@ -280,6 +280,22 @@ export function expandTabs(text, tabWidth = 4) {
     })
         .join('\n');
 }
+/**
+ * Fit into `width` cells, marking the cut whether or not there was one.
+ *
+ * `truncate` marks only what it had to cut, which is right for a string that
+ * has to fit a cell. A paragraph stopped by the box rather than by its own
+ * length is the other case: its last visible row may fit exactly and still not
+ * be the end of the text, and it has to say so.
+ */
+export function markCut(text, width, ellipsis = '…') {
+    if (width <= 0)
+        return '';
+    const ew = stringWidth(ellipsis);
+    if (width <= ew)
+        return sliceByWidth(ellipsis, width);
+    return sliceByWidth(text, width - ew).trimEnd() + ellipsis;
+}
 /** Fit into `width` cells, marking the cut with `ellipsis`. */
 export function truncate(text, width, ellipsis = '…', side = 'end') {
     const total = stringWidth(text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/core",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Graph-mounted terminal UI runtime - store, registries, renderer, host primitives",
   "keywords": [
     "terminal",

package/src/app/app.ts

@@ -752,8 +752,15 @@ export class App implements TextUIApp {
   private stateOf(instance: Instance): InteractionState {
     const id = typeof instance.props.id === 'string' ? instance.props.id : instance.id;
     const focusedId = this.focus.focused();
+    // A node may state its own focus, and a row has to: the list holds the
+    // keyboard, the row is where it lands. Left to the id comparison every
+    // row in every list reads as unfocused, so "the current row" and "the
+    // current row you can type at" would be the same fill.
+    const stated = instance.props.focused;
     return {
-      focused: focusedId === id || focusedId === `${instance.id}:focus`,
+      focused: typeof stated === 'boolean'
+        ? stated
+        : focusedId === id || focusedId === `${instance.id}:focus`,
       hovered: this.hovered === id || this.hoveredChain.has(instance),
       active: false,
       selected: instance.props.selected === true,

package/src/core/i18n.ts

@@ -94,10 +94,10 @@ export class I18nRegistry implements I18n {
     return new Intl.ListFormat(this.locale, options).format(items);
   }
 
-  plural(count: number, forms: Record<string, string>): string {
+  plural(count: number, forms: Record<string, string>, values?: Record<string, unknown>): string {
     const rule = new Intl.PluralRules(this.locale).select(count);
     const template = forms[rule] ?? forms.other ?? '';
-    return interpolate(template, { count });
+    return interpolate(template, { ...values, count });
   }
 
   onChange(fn: (locale: LocaleId) => void): Disposable {

package/src/jsx/intrinsics.ts

@@ -24,6 +24,31 @@ export interface BaseProps extends Style {
   disabled?: boolean;
   selected?: boolean;
 
+  /**
+   * The states this node is in, for `style` overlays and for a theme.
+   *
+   * `focused` is a tri-state on purpose. Left out, the runtime asks the focus
+   * manager - which is right for a control and wrong for a row: a list row does
+   * not hold the keyboard, the list does. A row that has to be told so, or the
+   * distinction between "this is the current row" and "this is the current row
+   * and you can type at it" cannot be drawn at all.
+   */
+  focused?: boolean;
+
+  /**
+   * Which of the component's boxes a theme styles.
+   *
+   * A composite component draws plain `box` nodes, so without this its entry
+   * in a theme's `components` map is a key nothing reads - a list row is a
+   * `box`, and `components.List.selected` is what a theme author would reach
+   * for. The name has to be stated by the component that owns the box, which
+   * is the only place that knows what the row is part of.
+   *
+   * Omitted, the node is styled under its own host name, so `components.box`
+   * and a `variant` keep working exactly as they did.
+   */
+  styleAs?: string;
+
   /** Participates in tab order. Implied by an interactive role. */
   focusable?: boolean;
   /** The focus scope this node belongs to. */

package/src/runtime/paint.ts

@@ -12,7 +12,7 @@ import type { Buffer } from '../render/buffer.js';
 import { COLOR_DEFAULT, mix, packColor, type PackedColor } from '../render/color.js';
 import { rectIntersect } from '../types/geometry.js';
 import {
-  graphemes, graphemeWidth, isAscii, sanitize, stringWidth, truncate,
+  graphemes, graphemeWidth, isAscii, markCut, sanitize, stringWidth, truncate,
   truncateSideOf, wrapModeOf, wrapText,
 } from '../util/text.js';
 import {
@@ -751,7 +751,16 @@ function paintText(
 
   for (let i = 0; i < raw.length && i < area.height; i++) {
     let line = raw[i] as string;
-    if (stringWidth(line) > area.width) {
+    // The last line the box has room for is cut when the text goes on past
+    // it, exactly as a line too wide for the box is. Without this a wrapped
+    // paragraph with more to say stopped mid-sentence and read as the whole
+    // of it, which is the failure `truncate` exists to prevent sideways.
+    const stopped = i === area.height - 1 && raw.length > area.height;
+    if (stopped) {
+      // The last row it has room for, with more to say: always marked, since
+      // the row itself may fit to the cell.
+      line = truncateSide === false ? line : markCut(line, area.width, ellipsis);
+    } else if (stringWidth(line) > area.width) {
       line = truncateSide === false
         ? line
         : truncate(line, area.width, ellipsis, truncateSide ?? 'end');

package/src/runtime/style.ts

@@ -1,4 +1,4 @@
-import type { Style, StatefulStyle, StyleInput, BorderSpec, BorderStyle, StyleColor } from '../types/style.js';
+import type { Style, StatefulStyle, StyleInput, BorderSpec, BorderColor, BorderStyle, StyleColor, StateName } from '../types/style.js';
 import type { ResolvedTheme } from '../types/theme.js';
 import type { Edges } from '../types/geometry.js';
 import type { Color } from '../types/cells.js';
@@ -31,6 +31,7 @@ export const STYLE_KEYS = new Set<string>([
 export interface InteractionState {
   focused: boolean;
   hovered: boolean;
+  /** Pressed. Not a selection - that is `selected`. */
   active: boolean;
   selected: boolean;
   disabled: boolean;
@@ -40,6 +41,37 @@ export const NO_INTERACTION: InteractionState = {
   focused: false, hovered: false, active: false, selected: false, disabled: false,
 };
 
+/**
+ * The states, least to most specific - the order the last one wins.
+ *
+ * `flattenStyleInput` merges a `style` prop in this order and so does a
+ * theme's per-component map, which is the only way the two can be made to
+ * agree: a theme states `focus` over `selected` and gets the same answer
+ * whether the state came from the node or from the theme. `hovered` is the
+ * state; `hover` is the name it wears, which is why this is the one place
+ * that has to know the difference.
+ */
+const STATE_ORDER: readonly (keyof InteractionState)[] = [
+  'selected', 'hovered', 'active', 'focused', 'disabled',
+];
+
+const STATE_VARIANT: Record<keyof InteractionState, StateName> = {
+  selected: 'selected',
+  hovered: 'hover',
+  active: 'active',
+  focused: 'focus',
+  disabled: 'disabled',
+};
+
+/** The names of the states that are true, in the order the last one wins. */
+export function stateVariants(state: InteractionState): StateName[] {
+  const out: StateName[] = [];
+  for (const key of STATE_ORDER) {
+    if (state[key]) out.push(STATE_VARIANT[key]);
+  }
+  return out;
+}
+
 function isStateful(value: Style | StatefulStyle): value is StatefulStyle {
   return (
     'base' in value || 'focus' in value || 'hover' in value ||
@@ -68,6 +100,7 @@ export function flattenStyleInput(input: StyleInput | undefined, state: Interact
 
   // Order matters: selected loses to active, active loses to focus, and
   // disabled wins over everything - a disabled control is not focusable.
+  // The same order `stateVariants` gives a theme, so the two cannot disagree.
   return mergeStyles(
     input.base,
     state.selected ? input.selected : undefined,
@@ -94,13 +127,37 @@ export function resolveStyle(
   defaultStyle: Style | undefined,
   state: InteractionState,
 ): Style {
-  const variants: string[] = [];
-  if (typeof props.variant === 'string') variants.push(props.variant);
-  if (typeof props.tone === 'string') variants.push(props.tone);
-  if (typeof props.size === 'string') variants.push(props.size);
+  const qualifiers: string[] = [];
+  if (typeof props.variant === 'string') qualifiers.push(props.variant);
+  if (typeof props.tone === 'string') qualifiers.push(props.tone);
+  if (typeof props.size === 'string') qualifiers.push(props.size);
+  const variants: string[] = [...qualifiers];
+
+  // The states join last, so a theme's entry for one of them wins over the
+  // same name used as a variant - `List.focused` is the fill on the row the
+  // keyboard is on, and a `focused` variant means nothing else.
+  //
+  // Each state is also offered qualified by each of the props-driven names,
+  // immediately after the flat one, for the case the flat name cannot say:
+  // whether a state paints at all is sometimes a property of a variant rather
+  // than of the state. A solid tab is filled and an underline one is not, and
+  // `Tabs.selected` has to mean the pair for both while `Tabs.solid.selected`
+  // is the one that adds the fill. The qualified name merges last and the
+  // order between the states is unchanged, so `disabled` still wins over
+  // everything and `focus` still wins over `selected`.
+  for (const name of stateVariants(state)) {
+    variants.push(name);
+    for (const qualifier of qualifiers) variants.push(`${qualifier}.${name}`);
+  }
+
+  // `styleAs` is how a component says which of its boxes a theme styles. A
+  // list draws its rows as plain `box` nodes, so without it `components.List`
+  // would be a key nothing ever reads - which is what every `components` entry
+  // written for a composite component was until this.
+  const owner = typeof props.styleAs === 'string' ? props.styleAs : component;
 
   return mergeStyles(
-    theme.styleFor(component, variants),
+    theme.styleFor(owner, variants),
     defaultStyle,
     styleFromProps(props),
     flattenStyleInput(props.style as StyleInput | undefined, state),
@@ -109,7 +166,13 @@ export function resolveStyle(
 
 // ------------------------------------------------------------------ colour
 
-/** A token name, a literal colour, or nothing. */
+/**
+ * A token name, a literal colour, or nothing.
+ *
+ * Takes the whole union because it is the one place a colour is turned into
+ * a cell value: the narrowing happened at the field that named it, which is
+ * where the mistake is made and where the error belongs.
+ */
 export function resolveColor(
   value: StyleColor | undefined,
   theme: ResolvedTheme,
@@ -119,6 +182,7 @@ export function resolveColor(
   return theme.color(value as string);
 }
 
+/** Pack a colour for a cell, at the caller's own channel. */
 export function packStyleColor(
   value: StyleColor | undefined,
   theme: ResolvedTheme,
@@ -144,9 +208,9 @@ export function attrsFromStyle(style: Style): number {
 export interface ResolvedBorder {
   style: BorderStyle;
   chars: BorderChars;
-  color: StyleColor | undefined;
+  color: BorderColor | undefined;
   /** Per-edge overrides. Undefined here means "use `color`". */
-  colors: { top?: StyleColor; right?: StyleColor; bottom?: StyleColor; left?: StyleColor };
+  colors: { top?: BorderColor; right?: BorderColor; bottom?: BorderColor; left?: BorderColor };
   dim: boolean;
   sides: { top: boolean; right: boolean; bottom: boolean; left: boolean };
   edges: Edges;

package/src/themes/builtin.ts

@@ -1,3 +1,4 @@
+import type { Style } from '../types/style.js';
 import type { ThemeDefinition } from '../types/theme.js';
 
 /**
@@ -10,6 +11,74 @@ import type { ThemeDefinition } from '../types/theme.js';
  * difference lives here, in border style and density, not in the catalog.
  */
 
+/**
+ * A selection, in the two states it has.
+ *
+ * `selected` is "this is the current one" and `focus` is the same row while
+ * the component holds the keyboard, so a theme states the bright fill once and
+ * the dimmer one for everything the reader has walked away from. They were one
+ * name once - `active` meant both this and pressed - and a word that means two
+ * things gets filled with either.
+ *
+ * Both name tokens rather than colours, which is the point of the whole
+ * arrangement: retint the palette and every component that has not said
+ * otherwise moves with it, while a theme that states `components.List.focused`
+ * moves the list and leaves the table where it was.
+ */
+const SELECTION_FOCUSED: Style = { bg: 'selected', fg: 'onSelected', bold: true };
+const SELECTION_UNFOCUSED: Style = { bg: 'active', fg: 'onActive' };
+const SELECTION_HOVER: Style = { bg: 'hover', fg: 'onActive' };
+// The other way to draw a selection: reverse video, which is legible whatever
+// a theme's own two colours are. Left beside the three above while that is
+// decided - nothing reads them yet.
+// const SELECTION_DEFAULT: Style = { bg: 'default', fg: 'default', inverse: true };
+// const SELECTION_DIMMED: Style = { bg: 'default', fg: 'default', inverse: true, dim: true };
+
+/**
+ * The state colours every built-in theme starts from.
+ *
+ * Stated once and spread into `dark` and `light` because a theme that
+ * extends either inherits it whole: the entries name tokens, so `console`
+ * keeps its own `selected` and gets its own fills, without restating a single
+ * component. That is also what makes them the *defaults* - a theme states
+ * `components` to differ, and says nothing here about what it does not.
+ */
+const STATE_STYLES: ThemeDefinition['components'] = {
+  List: { selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+  Tree: { selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+  Table: { selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+  // The field's own selection, over the text it covers. Same pair, same
+  // reason: a selection left visible in an unfocused field says what is on
+  // the clipboard, and saying it as loudly as the live one would put two
+  // selections on the screen.
+  TextArea: { selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+  // A marked line is a selection. The caret line is that selection plus the
+  // keyboard, so it takes the next fill up rather than a colour of its own.
+  CodeViewer: { selected: SELECTION_UNFOCUSED, focus: SELECTION_HOVER },
+  Menu: { base: { fg: 'text' }, selected: SELECTION_UNFOCUSED, focus: SELECTION_FOCUSED },
+  TextInput: { base: { fg: 'text' } },
+  // A tab is open, not selected. Dimming it when the strip does not have the
+  // keyboard would say no document is open, which is a different claim and a
+  // wrong one - so it has one state and no second.
+  //
+  // Whether a tab is *filled* is a property of the variant rather than of the
+  // state: a solid tab is, an underline one is not. So the pair is stated for
+  // the state and the fill only for the variant that has one.
+  Tabs: { selected: { fg: 'onSelected' }, 'solid.selected': SELECTION_FOCUSED },
+  // The chat rows take the same fills, and for the same reason. `ToolCallRow`
+  // and `ReasoningBlock` are selections in a transcript that the caller
+  // names, so they have `selected` and no `focus`; a `ComposerChip` lights up
+  // only while it holds the keyboard, so it has `focus` and no `selected`.
+  ToolCallRow: { selected: SELECTION_FOCUSED },
+  ReasoningBlock: { selected: SELECTION_FOCUSED },
+  ComposerChip: { focus: SELECTION_FOCUSED },
+  // A range in a document is a selection, drawn in reverse video so it keeps
+  // the colours the text under it was already drawn in - the syntax of a
+  // selection is the syntax of the code it covers - and shows whether or not
+  // the theme's `active` is a fill.
+  Editor: { selected: { inverse: true } },
+};
+
 export const DARK: ThemeDefinition = {
   id: 'dark',
   name: 'Dark',
@@ -25,9 +94,9 @@ export const DARK: ThemeDefinition = {
     borderStrong: '#484f58',
     borderSubtle: '#21262d',
     divider: '#484f58',
-    text: '#e6edf3',
+    text: '#f3e6f1',
     muted: '#8b949e',
-    subtle: '#6e7681',
+    subtle: '#546f94',
     inverted: '#0d1117',
     accent: '#58a6ff',
     primary: '#388bfd',
@@ -46,8 +115,10 @@ export const DARK: ThemeDefinition = {
     onWarning: '#0d1117',
     onDanger: '#0d1117',
     hover: '#1f2937',
-    active: '#264466',
-    selected: '#1f6feb',
+    active: 'default',
+    onActive: '#3191ff',
+    selected: 'default',
+    onSelected: '#3191ff',
     focus: '#58a6ff',
     disabled: '#484f58',
     scrim: '#010409',
@@ -55,6 +126,7 @@ export const DARK: ThemeDefinition = {
     shadow: '#010409',
   },
   spacing: { none: 0, xs: 0, sm: 1, md: 1, lg: 2, xl: 3 },
+  components: { ...STATE_STYLES },
 };
 
 export const LIGHT: ThemeDefinition = {
@@ -93,8 +165,10 @@ export const LIGHT: ThemeDefinition = {
     onWarning: '#ffffff',
     onDanger: '#ffffff',
     hover: '#eaeef2',
-    active: '#dbeafe',
-    selected: '#0969da',
+    active: 'default',
+    onActive: '#0969da',
+    selected: 'default',
+    onSelected: '#0969da',
     focus: '#0969da',
     disabled: '#8c959f',
     scrim: '#8c959f',
@@ -102,6 +176,7 @@ export const LIGHT: ThemeDefinition = {
     shadow: '#d0d7de',
   },
   spacing: { none: 0, xs: 0, sm: 1, md: 1, lg: 2, xl: 3 },
+  components: { ...STATE_STYLES },
 };
 
 /** Dense, bordered, high contrast. Every region is a labelled box. */
@@ -127,11 +202,16 @@ export const CONSOLE: ThemeDefinition = {
     //
     // The two selection backgrounds are picked rather than derived: `selected`
     // carries `inverted` text so it has to be light, and `active` carries
-    // `text` so it has to be dark. Same hue, opposite ends.
+    // `text` so it has to be dark. Same hue, opposite ends. `active` is what
+    // a selection looks like when the component does not have the keyboard -
+    // it is the dim end of the pair, not a pressed control.
     primary: '#88c0d0',
     info: '#88c0d0',
     selected: '#6ba3b2',
     active: '#1e3d47',
+    // Stated, because `dark` states its own for a selection with no fill.
+    onSelected: '#0a0e14',
+    onActive: '#d8dee9',
     onAccent: '#0a0e14',
     onPrimary: '#0a0e14',
     onInfo: '#0a0e14',
@@ -172,6 +252,7 @@ export const PAPER: ThemeDefinition = {
     warning: '#d29922',
     danger: '#f85149',
     info: '#58a6ff',
+    /* ---- */
     onAccent: '#0d1117',
     onDefault: '#0d1117',
     onPrimary: '#0d1117',
@@ -181,17 +262,23 @@ export const PAPER: ThemeDefinition = {
     onInfo: '#0d1117',
     onWarning: '#0d1117',
     onDanger: '#0d1117',
+    /* ---- */
     hover: '#1f2937',
-    active: '#264466',
-    selected: '#1f6feb',
+    active: 'default',
+    onActive: '#3191ff',
+    selected: 'default',
+    onSelected: '#58a6ff',
     focus: '#58a6ff',
     disabled: '#484f58',
+
+    /* ---- */
     scrim: '#010409',
     cursor: 'default',
     shadow: '#010409',
   },
   spacing: { none: 0, xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
   components: {
+    ...STATE_STYLES,
     Panel: { base: { border: 'none', padding: [1, 2] } },
     Button: { base: { padding: [0, 2] } },
   },
@@ -224,6 +311,9 @@ export const PAPER_LIGHT: ThemeDefinition = {
     hover: '#f7f1e7',
     active: '#efe4d2',
     selected: '#eadcc6',
+    // Stated, because `light` states its own for a selection with no fill.
+    onActive: '#2b2a27',
+    onSelected: '#2b2a27',
     inverted: '#2b2a27',
     focus: '#b4531f',
   },
@@ -234,6 +324,49 @@ export const PAPER_LIGHT: ThemeDefinition = {
   },
 };
 
+/**
+ * Paper, after dark.
+ *
+ * The same airy, borderless, warm-accented character as `paper` - the point of
+ * it is the restraint, not the brightness - with the ink and the page swapped.
+ * A warm dark rather than a blue one, so the two read as one family and a
+ * reader moving between them is not moving between two different products.
+ */
+export const PAPER_DARK: ThemeDefinition = {
+  id: 'paper-dark',
+  name: 'Paper Dark',
+  appearance: 'dark',
+  extends: 'dark',
+  border: 'none',
+  density: 'airy',
+  colors: {
+    canvas: '#1c1a17',
+    surface: '#1c1a17',
+    surfaceAlt: '#26231f',
+    border: '#3a352e',
+    borderSubtle: '#2a2621',
+    divider: 'default',
+    subtle: '#db8c4c',
+    text: '#e8e3d9',
+    muted: '#9a9287',
+    accent: '#e0873f',
+    primary: '#e0873f',
+    // The same restraint, the other way up.
+    hover: '#26231f',
+    active: 'default',
+    onActive: '#e0873f',
+    selected: 'default',
+    onSelected: '#e0873f',
+    inverted: '#f4efe6',
+    focus: '#e0873f',
+  },
+  spacing: { none: 0, xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
+  components: {
+    Panel: { base: { border: 'none', padding: [1, 2] } },
+    Button: { base: { padding: [0, 2] } },
+  },
+};
+
 /** Rounded chrome around a persistent frame. */
 export const WORKBENCH: ThemeDefinition = {
   id: 'workbench',
@@ -263,6 +396,10 @@ export const WORKBENCH: ThemeDefinition = {
     hover: '#313244',
     active: '#45475a',
     selected: '#585b70',
+    // The selection is a mid grey, so the light text is what reads on it; the
+    // inherited `inverted` is darker than the fill and nearly disappears.
+    onSelected: '#cdd6f4',
+    onActive: '#cdd6f4',
     focus: '#89b4fa',
     scrim: '#11111b',
   },
@@ -276,7 +413,12 @@ export const MONO: ThemeDefinition = {
   id: 'mono',
   name: 'Monochrome',
   appearance: 'dark',
+  // The theme's own colours are all `default`; this is what makes that true of
+  // the ones a component states for itself, which is the difference between a
+  // palette that happens to be grey and a theme with no colour in it.
+  monochrome: true,
   border: 'ascii',
+  // border: 'none',
   cursor: 'underline',
   // Chosen, not downgraded to: this theme is ascii on a terminal that could
   // draw anything, so the rule has to say so too.
@@ -317,47 +459,21 @@ export const MONO: ThemeDefinition = {
     cursor: 'default',
     shadow: 'default',
   },
-};
-
-/**
- * Paper, after dark.
- *
- * The same airy, borderless, warm-accented character as `paper` - the point of
- * it is the restraint, not the brightness - with the ink and the page swapped.
- * A warm dark rather than a blue one, so the two read as one family and a
- * reader moving between them is not moving between two different products.
- */
-export const PAPER_DARK: ThemeDefinition = {
-  id: 'paper-dark',
-  name: 'Paper Dark',
-  appearance: 'dark',
-  extends: 'dark',
-  border: 'none',
-  density: 'airy',
-  colors: {
-    canvas: '#1c1a17',
-    surface: '#1c1a17',
-    surfaceAlt: '#26231f',
-    border: '#3a352e',
-    borderSubtle: '#2a2621',
-    divider: 'default',
-    subtle: '#db8c4c',
-    text: '#e8e3d9',
-    muted: '#9a9287',
-    accent: '#e0873f',
-    primary: '#e0873f',
-    // The same restraint, the other way up.
-    hover: '#26231f',
-    active: '#332e27',
-    selected: '#3d362c',
-    inverted: '#f4efe6',
-    focus: '#e0873f',
-  },
-  spacing: { none: 0, xs: 1, sm: 1, md: 2, lg: 3, xl: 4 },
   components: {
-    Panel: { base: { border: 'none', padding: [1, 2] } },
-    Button: { base: { padding: [0, 2] } },
-  },
+    List: { selected: { bold: true }, focus: { bold: true } },
+    Tree: { selected: { bold: true }, focus: { bold: true } },
+    Table: { selected: { bold: true }, focus: { bold: true } },
+    TextArea: { selected: { bold: true }, focus: { bold: true } },
+    CodeViewer: { selected: { bold: true }, focus: { bold: true } },
+    Menu: { selected: { bold: true }, focus: { bold: true } },
+    Tabs: { selected: { bold: true }, 'solid.selected': { bold: true } },
+    ToolCallRow: { selected: { bold: true } },
+    ReasoningBlock: { selected: { bold: true } },
+    ComposerChip: { focus: { bold: true } },
+    Editor: { selected: { bold: true } },
+    Panel: { base: { border: 'ascii', padding: [0, 1] } },
+    Button: { base: { padding: [0, 1] } },
+  }
 };
 
 export const BUILTIN_THEMES: ThemeDefinition[] = [