@textui/widgets 0.7.0 → 0.9.0

package/dist/navigation/menu.js

@@ -1,10 +1,12 @@
 import { defineComponent, h, stringWidth, useFocus, useI18n, useInput, useState, useTheme } from '@textui/core';
 import { Marquee } from '../display/index.js';
 import { TONE } from '../tone.js';
+/** The name a theme styles a menu row under. See `LIST`. */
+export const MENU = 'Menu';
 export const Menu = defineComponent('Menu', (props) => {
     const theme = useTheme();
     const i18n = useI18n();
-    const { items, onSelect, visibleRows, activeId, autoFocus, interactive = true, descriptions = 'inline', ...rest } = props;
+    const { items, onSelect, visibleRows, activeId, autoFocus, interactive = true, descriptions = 'inline', noMatch, ...rest } = props;
     const focus = useFocus({ autoFocus, disabled: !interactive });
     const selectable = items.filter((i) => !i.disabled);
     const [internalHighlight, setHighlight] = useState(Math.max(0, items.findIndex((i) => i.id === activeId)));
@@ -58,14 +60,19 @@ export const Menu = defineComponent('Menu', (props) => {
         // The description yields first, and by a lot. It is the elaboration;
         // the label is the thing being chosen, and a row reading "Accept ed…"
         // beside a full sentence has given up the wrong half.
+        //
+        // On the row under the cursor the foreground is `undefined`, not a
+        // token: what is written on a selection is the theme's, and a hard
+        // `onSelected` here would be a second answer to the same question that
+        // a theme restating `Menu.focused.fg` could not reach.
         item.description && !below
             ? h(Marquee, {
                 content: item.description,
                 active,
-                fg: active ? 'inverted' : 'muted',
+                fg: active ? undefined : 'muted',
                 shrink: 8,
             })
-            : null, item.shortcut ? h('text', { content: item.shortcut, fg: active ? 'inverted' : 'subtle' }) : null, 
+            : null, item.shortcut ? h('text', { content: item.shortcut, fg: active ? undefined : 'subtle' }) : null, 
         // Present but empty means "this opens something, contents unknown" -
         // which is what the command palette knows about an argument whose
         // choices it has not resolved yet.
@@ -74,12 +81,18 @@ export const Menu = defineComponent('Menu', (props) => {
             key: item.id,
             role: 'menuitem',
             label: item.label,
+            styleAs: MENU,
             selected: active,
+            // The keyboard is the menu's, so the row is told - which is what lets
+            // `Menu.selected` be the dimmer fill a menu shows when something else
+            // has taken the keyboard, and `Menu.focused` the one it shows while
+            // the reader is moving through it.
+            focused: active && focus.focused,
             direction: 'column',
             // One background over both lines: a highlight that stopped after the
-            // label would split the row it is highlighting in two.
-            bg: active ? 'selected' : undefined,
-            fg: item.disabled ? 'disabled' : active ? 'inverted' : item.tone ? TONE[item.tone] : undefined,
+            // label would split the row it is highlighting in two. What it is
+            // filled with is the theme's to say.
+            fg: item.disabled ? 'disabled' : active ? undefined : item.tone ? TONE[item.tone] : undefined,
             onClick: () => { if (!item.disabled)
                 onSelect?.(item.id, item); },
         }, head, 
@@ -94,7 +107,7 @@ export const Menu = defineComponent('Menu', (props) => {
             h(Marquee, {
                 content: item.description,
                 active,
-                fg: active ? 'inverted' : 'muted',
+                fg: active ? undefined : 'muted',
                 flex: 1,
             }))
             : null);
@@ -110,8 +123,8 @@ export const Menu = defineComponent('Menu', (props) => {
         return item.separatorBefore
             ? [h('box', { key: `${item.id}-sep`, height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), row]
             : [row];
-    }), selectable.length === 0
-        ? h('text', { content: `  ${i18n.t('textui.menu.noMatch', undefined, 'no matches')}`, fg: 'subtle' })
+    }), selectable.length === 0 && noMatch !== false
+        ? h('text', { content: `  ${noMatch ?? i18n.t('textui.menu.noMatch', undefined, 'no matches')}`, fg: 'subtle' })
         : null);
 });
 /**

package/dist/navigation/tabs.d.ts

@@ -16,5 +16,7 @@ export interface TabsProps extends BoxProps {
     /** Take focus on mount, so the keyboard has somewhere to be. */
     autoFocus?: boolean;
 }
+/** The name a theme styles a tab under. See `LIST`. */
+export declare const TABS = "Tabs";
 export declare const Tabs: (props: TabsProps) => import("@textui/core").RenderOutput;
 //# sourceMappingURL=tabs.d.ts.map

package/dist/navigation/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/navigation/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,wDAAwD;IACxD,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,2DAiDf,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/navigation/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,wDAAwD;IACxD,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,uDAAuD;AACvD,eAAO,MAAM,IAAI,SAAS,CAAC;AAE3B,eAAO,MAAM,IAAI,2DAyDf,CAAC"}

package/dist/navigation/tabs.js

@@ -1,4 +1,6 @@
 import { defineComponent, h, useFocus, useInput } from '@textui/core';
+/** The name a theme styles a tab under. See `LIST`. */
+export const TABS = 'Tabs';
 export const Tabs = defineComponent('Tabs', (props) => {
     const { items, activeId, onChange, variant = 'underline', separator, autoFocus, ...rest } = props;
     const focus = useFocus({ autoFocus });
@@ -19,12 +21,20 @@ export const Tabs = defineComponent('Tabs', (props) => {
             key: item.id,
             role: 'tab',
             label: item.label,
+            styleAs: TABS,
+            // Carried so the theme can tell a filled tab from an unfilled one: a
+            // solid tab is `Tabs.solid.selected`, an underline one is not filled
+            // at all. See `Tabs` in the built-in themes.
+            variant,
+            // A tab is open, not selected, and it says so with one state. There is
+            // no second name for it because there is nothing to dim: the document
+            // a tab names is open whether or not the strip has the keyboard, and
+            // dimming the tab on losing focus would claim none is.
             selected: active,
             direction: 'row',
             gap: 1,
             padding: variant === 'solid' ? [0, 1] : 0,
-            bg: variant === 'solid' && active ? 'selected' : undefined,
-            fg: item.disabled ? 'disabled' : active ? (variant === 'solid' ? 'inverted' : 'accent') : 'muted',
+            fg: item.disabled ? 'disabled' : active ? (variant === 'solid' ? undefined : 'accent') : 'muted',
             bold: active,
             underline: variant === 'underline' && active,
             onClick: () => { if (!item.disabled)

package/dist/overlay/command-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/overlay/command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAkB/F,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,MAAM,iBAAiB,EAAE,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACzD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,eAAO,MAAM,cAAc,qEAsezB,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACtC,OAAO,GAAG,SAAS,CAKrB;AA2DD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAehG"}
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/overlay/command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAkB/F,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,MAAM,iBAAiB,EAAE,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACzD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,eAAO,MAAM,cAAc,qEAifzB,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACtC,OAAO,GAAG,SAAS,CAKrB;AA2DD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAehG"}

package/dist/overlay/command-palette.js

@@ -323,11 +323,16 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
     // It is the one line in the panel that wraps rather than truncates,
     // because it is the one place a sentence can be read whole.
     const chosen = pending ? offered[index] : undefined;
-    const detail = pending
-        ? chosen?.description
-            ?? pending.arg.description
-            ?? i18n.t('textui.palette.needs', { command: pending.command.title, arg: pending.arg.name }, '{command} needs a {arg}')
-        : highlighted?.description ?? highlighted?.id ?? '';
+    // Nothing selectable is nothing to describe: the line under the list would
+    // otherwise keep the last answer's sentence, or repeat the question the row
+    // above has already asked.
+    const detail = rows.length === 0
+        ? ''
+        : pending
+            ? chosen?.description
+                ?? pending.arg.description
+                ?? i18n.t('textui.palette.needs', { command: pending.command.title, arg: pending.arg.name }, '{command} needs a {arg}')
+            : highlighted?.description ?? highlighted?.id ?? '';
     /*
      * How wide the panel wants to be.
      *
@@ -419,6 +424,11 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
         descriptions: pending?.arg.descriptions ?? descriptions,
         interactive: false,
         activeId: rows[index],
+        // When the answer is a fixed set, the row above already says which kind
+        // of nothing this is and this would be the second line. Searching the
+        // command list has no such row, and there the menu's own line is the one
+        // that says it.
+        noMatch: pending ? false : undefined,
         onSelect: (id) => {
             const at = rows.indexOf(id);
             if (at >= 0)
@@ -428,7 +438,9 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
     }), h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), 
     // What the highlighted row actually is, and how to move around. A palette
     // that shows only titles makes you run something to find out what it does.
-    h('box', { direction: 'row', gap: 1, align: 'start' }, h('text', { content: detail, fg: 'muted', flex: 1, wrap: 'word' }), h('text', { content: `${rows.length}`, fg: 'subtle' })), h('box', { direction: 'row', gap: 1 }, h('text', {
+    h('box', { direction: 'row', gap: 1, align: 'start' }, h('text', { content: detail, fg: 'muted', flex: 1, wrap: 'word' }), 
+    // A zero beside an empty line is a number with nothing to count.
+    rows.length > 0 ? h('text', { content: `${rows.length}`, fg: 'subtle' }) : null), h('box', { direction: 'row', gap: 1 }, h('text', {
         content: pending
             ? (pending.arg.choices === undefined
                 ? hint(theme, [

package/dist/shells/workbench-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFAmEzB,CAAC"}
+{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFAuEzB,CAAC"}

package/dist/shells/workbench-shell.js

@@ -25,7 +25,11 @@ export const WorkbenchShell = defineComponent('WorkbenchShell', (props) => {
         height: '100%',
         bg: 'canvas',
         fg: 'text',
-        border: theme.border,
+        // The frame is chrome, not text. A box that states an `fg` draws its
+        // border in it - which is right for `<box fg="danger" border="single">`
+        // and wrong here, where the `fg` is the application's text colour: it made
+        // every screen's outermost edge as bright as the words inside it.
+        border: { style: theme.border, color: 'border' },
         ...props,
     }, h(SurfaceArea, { surface: 'header' }), h('box', { direction: 'row', flex: 1 }, h(SurfaceArea, { surface: 'rail' }), showSidebar
         ? h('box', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/widgets",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "The TextUI component catalog - layout, display, controls, data, overlays and charts",
   "keywords": [
     "terminal",
@@ -46,7 +46,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@textui/core": "^0.7.0"
+    "@textui/core": "^0.9.0"
   },
   "publishConfig": {
     "access": "public"

package/src/control/text-area.ts

@@ -1,8 +1,10 @@
 import type { BoxProps, KeyEvent, MouseEvent, SemanticVariant, Style } from '@textui/core';
 import {
+  NO_INTERACTION,
   defineComponent,
   graphemes,
   h,
+  stateVariants,
   stringWidth,
   useClipboard,
   useEffect,
@@ -122,6 +124,9 @@ export interface TextAreaProps extends BoxProps {
  * is what typing is. That single fact is why an application with one of these
  * cannot have single-letter global commands, and why it does not need to.
  */
+/** The name a theme styles this field's selection under. See `LIST`. */
+export const TEXT_AREA = 'TextArea';
+
 export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
   const {
     value, onChange, onSubmit, onCancel, onOverflow, onEdge, placeholder, maxRows = 6,
@@ -222,14 +227,20 @@ export const TextArea = defineComponent<TextAreaProps>('TextArea', (props) => {
   /**
    * How a selected cell is drawn.
    *
-   * The same pair a selected list row uses, and dimmer once the field loses
-   * the keyboard: 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.
+   * The theme's to say, and the same pair a selected list row uses: the
+   * `TextArea.focused` fill while the field has the keyboard and the dimmer
+   * `TextArea.selected` one once it does not, because 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.
+   *
+   * Asked for here rather than read off a node, because the field's selection
+   * is painted across cells that are not themselves selected nodes.
    */
-  const selectionStyle: Style = focus.focused
-    ? { bg: 'selected', fg: 'inverted' }
-    : { bg: 'active' };
+  const selectionStyle: Style = theme.styleFor(TEXT_AREA, stateVariants({
+    ...NO_INTERACTION,
+    selected: true,
+    focused: focus.focused,
+  }));
 
   const before = chars.slice(0, position).join('');
   const lines = value === '' ? [''] : value.split('\n');

package/src/control/text-input.ts

@@ -182,6 +182,12 @@ export const TextInput = defineComponent<TextInputProps>('TextInput', (props) =>
         : sliceColumns(shown, start, field),
       fg: empty ? 'subtle' : disabled ? 'disabled' : undefined,
       flex: 1,
+      // The name a theme styles this field's text under. Without it a theme
+      // could colour a list row and not the field a person types in - and the
+      // palette's search box, which is this component, could not be coloured
+      // at all. The placeholder and the disabled case state their own `fg`, so
+      // they keep the colours they had.
+      styleAs: 'TextInput',
     }),
   );
 });

package/src/data/code-viewer.ts

@@ -92,6 +92,9 @@ export const HORIZONTAL_STEP = 4;
  * around it. And it colours by asking the registry for a highlighter, so a new
  * file type arrives coloured without this component learning what it is.
  */
+/** The name a theme styles a code row under. See `LIST`. */
+export const CODE_VIEWER = 'CodeViewer';
+
 export const CodeViewer = defineComponent<CodeViewerProps>('CodeViewer', (props) => {
   const {
     content, lineNumbers = true, startLine = 1, visibleRows, highlight = [],
@@ -242,7 +245,13 @@ export const CodeViewer = defineComponent<CodeViewerProps>('CodeViewer', (props)
         key: number,
         direction: 'row',
         height: 1,
-        bg: marked ? 'active' : onCaret ? 'hover' : undefined,
+        styleAs: CODE_VIEWER,
+        // A marked line is a selection; the caret line is that selection with
+        // the keyboard on it. Both fills are the theme's - `CodeViewer.selected`
+        // and `CodeViewer.focused` - and both carry the colour that reads on
+        // the fill, so a token inside the row that states its own keeps it.
+        selected: marked,
+        focused: onCaret,
       },
         lineNumbers
           ? h('text', {

package/src/data/index.ts

@@ -78,6 +78,9 @@ export interface TableProps<T extends object = Record<string, unknown>> extends
  * table narrows it drops the lowest-priority columns rather than squeezing
  * every column until none of them is readable.
  */
+/** The name a theme styles a table row under. See `LIST` in `./list.js`. */
+export const TABLE = 'Table';
+
 const TableImpl = defineComponent<TableProps<Record<string, unknown>>>('Table', (props) => {
   const theme = useTheme();
   const i18n = useI18n();
@@ -206,11 +209,15 @@ const TableImpl = defineComponent<TableProps<Record<string, unknown>>>('Table',
       return h('box', {
         key,
         role: 'row',
+        styleAs: TABLE,
         selected: active,
+        // The keyboard is the table's; the row is told which row it lands on.
+        focused: active && focus.focused,
         direction: 'row',
         gap,
-        bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
-        fg: active && focus.focused ? 'inverted' : undefined,
+        // What the row is filled with is the theme's to say - `Table.selected`
+        // for the current row and `Table.focused` over it while the table has
+        // the keyboard - as it is for a list, a tree and a menu.
         onClick: () => {
           if (selectedKey === undefined) setInternalKey(key);
           onSelect?.(key, row);

package/src/data/list.ts

@@ -25,6 +25,16 @@ export interface ListItem {
   disabled?: boolean;
 }
 
+/**
+ * The name a theme styles a row under.
+ *
+ * A row is a plain `box`, so without this `components.List` in a theme is a
+ * key nothing reads. Stated once here because the row, the tree, the table
+ * and the menu all fill the same two colours and a theme author comparing
+ * them should be reading the same four names.
+ */
+export const LIST = 'List';
+
 /** How a row stands at the moment it is asked to draw itself. */
 export interface ListItemState {
   /** The row the selection is on. */
@@ -199,14 +209,22 @@ function ListView<T extends ListItem>(props: ListProps<T>): RenderOutput {
         key: item.id,
         role: 'listitem',
         label: item.label,
+        styleAs: LIST,
         selected: active,
+        // The keyboard is the list's, not the row's, so the row is told. It is
+        // the difference between "the current row" and "the current row you
+        // can type at", and a theme states the two fills separately.
+        focused: active && focus.focused,
         direction: 'row',
         gap: 1,
         // One background over the whole row, however many lines it draws: a
         // highlight that stopped after the first would split the row it is
-        // highlighting in two.
-        bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
-        fg: item.disabled ? 'disabled' : active && focus.focused ? 'inverted' : undefined,
+        // highlighting in two. What it is filled with is the theme's to say -
+        // `List.selected` for the current row, `List.focused` over it while
+        // the list has the keyboard - and a background always comes with the
+        // colour that reads on it, which is why that pairing lives in the
+        // theme rather than here.
+        fg: item.disabled ? 'disabled' : undefined,
         onClick: () => {
           if (item.disabled) return;
           if (selectedId === undefined) setInternalId(item.id);

package/src/data/markdown-view.ts

@@ -223,10 +223,13 @@ export const MarkdownView = defineComponent<MarkdownViewProps>('MarkdownView', (
   return h('box', { role: 'document', direction: 'column', ...rest },
     ...out,
     hidden > 0
-      ? h('text', { content: i18n.t(
-          'textui.markdown.moreLines',
-          { glyph: theme.glyphs.ellipsis, count: hidden },
-          '{glyph} {count} more lines',
+      ? h('text', { content: i18n.plural(
+          hidden,
+          {
+            one: i18n.t('textui.markdown.moreLines.one', undefined, '{glyph} {count} more line'),
+            other: i18n.t('textui.markdown.moreLines.other', undefined, '{glyph} {count} more lines'),
+          },
+          { glyph: theme.glyphs.ellipsis },
         ), fg: 'subtle' })
       : null,
   );

package/src/data/pagination.ts

@@ -27,6 +27,9 @@ export const Pagination = defineComponent<PaginationProps>('Pagination', (props)
     h('text', { content: theme.glyphs.chevronLeft, fg: page > 1 ? 'accent' : 'disabled' }),
     h('text', { content: `${page} / ${pageCount}`, bold: focus.focused }),
     h('text', { content: theme.glyphs.chevronRight, fg: page < pageCount ? 'accent' : 'disabled' }),
-    total !== undefined ? h('text', { content: i18n.t('textui.pagination.total', { total }, '{total} items'), fg: 'muted' }) : null,
+    total !== undefined ? h('text', { content: i18n.plural(total, {
+      one: i18n.t('textui.pagination.total.one', undefined, '{count} item'),
+      other: i18n.t('textui.pagination.total.other', undefined, '{count} items'),
+    }), fg: 'muted' }) : null,
   );
 });

package/src/data/tree.ts

@@ -12,6 +12,9 @@ import { usePanelState } from '../panel/index.js';
 import { TONE } from '../tone.js';
 import { viewportRows } from '../viewport.js';
 
+/** The name a theme styles a tree row under. See `LIST`. */
+export const TREE = 'Tree';
+
 export interface TreeNode {
   id: string;
   label: string;
@@ -187,11 +190,15 @@ export const Tree = defineComponent<TreeProps>('Tree', (props) => {
         key: row.node.id,
         role: 'treeitem',
         label: row.node.label,
+        styleAs: TREE,
         selected: active,
+        // The keyboard is the tree's; the row is told which row it lands on.
+        focused: active && focus.focused,
         direction: 'row',
         gap: 1,
-        bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
-        fg: active && focus.focused ? 'inverted' : undefined,
+        // What the row is filled with is the theme's to say - `Tree.selected`
+        // for the current row and `Tree.focused` over it while the tree has
+        // the keyboard - as it is for a list, a table and a menu.
         onClick: () => {
           if (selectedId === undefined) setInternalSelected(row.node.id);
           onSelect?.(row.node.id, row.node);

package/src/display/card.ts

@@ -12,6 +12,18 @@ export const Card = defineComponent<CardProps>('Card', (props) => {
   const { title, subtitle, children, ...rest } = props;
   return h('box', {
     border: theme.border,
+    /*
+     * A card is a surface, so it states a background and is opaque.
+     *
+     * A bordered box that states none is a frame around whatever is already
+     * there, and what is already there can be a pattern, a scrim or a
+     * neighbouring block - a card dropped on a pattern showed the pattern
+     * through its own interior, which reads as a hole rather than as something
+     * laid on top. `Dialog` and `CommandPalette` have always stated `overlay`
+     * for the same reason; this is the page-level one. `...rest` still wins, so
+     * a caller that wants a different colour names it.
+     */
+    bg: 'surface',
     padding: theme.density === 'compact' ? 0 : [0, 1],
     direction: 'column',
     title,

package/src/display/color-text.ts

@@ -1,5 +1,5 @@
 import type {
-  CellStyle, Color, InteractionState, PaintSurface,
+  CellStyle, Color, InteractionState, PaintSurface, Style, StyleInput,
   RenderContext, StyleColor, TextProps, TextWrap,
 } from '@textui/core';
 import {
@@ -177,15 +177,9 @@ export const ColorText = defineComponent<ColorTextProps>('ColorText', (props) =>
 
     // The component's own style, resolved for the state it is in. Not the
     // inherited one - a canvas is not told what it was nested in.
-    const own = mergeStyles(
-      styleFromProps(props as Record<string, unknown>),
-      flattenStyleInput(props.style, stateOf(ctx)),
-    );
-    const rest: CellStyle = {
-      fg: resolveColor(own.fg, ctx.theme, 'default'),
-      attrs: attrsFromStyle(own),
-      link: typeof props.link === 'string' ? props.link : undefined,
-    };
+    const ownProps = props as Record<string, unknown>;
+    const own = inkOwnStyle(ownProps, ctx);
+    const rest = inkCellStyle(own, ctx, props.link);
 
     const cut = props.truncate ?? truncateSideOf(wrap) ?? 'end';
     const dots = ellipsis ?? ctx.theme.glyphs.ellipsis;
@@ -256,11 +250,40 @@ export function blend(a: Color, b: Color, t: number): Color {
  * Exported so a component that paints its own cells - a chart, a viewer with a
  * heat column - can take an `Ink` and mean the same thing by it.
  */
+/**
+ * A component's own style, resolved for the state it is in.
+ *
+ * A canvas is not told what it was nested in, so a component that paints its
+ * own cells cannot inherit the way a `text` does: it resolves the props it was
+ * given against the theme, and hands the result to every cell the ink declines.
+ * Exported beside `painterOf` so a second painter means the same thing by it -
+ * `ColorText` and `Pattern` both paint their own cells and read the same way.
+ */
+export function inkOwnStyle(props: Record<string, unknown>, ctx: RenderContext): Style {
+  return mergeStyles(
+    styleFromProps(props),
+    flattenStyleInput(props.style as StyleInput | undefined, stateOf(ctx)),
+  );
+}
+
+/** The cell style a canvas painter starts from, given that own style. */
+export function inkCellStyle(own: Style, ctx: RenderContext, link?: unknown): CellStyle {
+  return {
+    fg: resolveColor(own.fg, ctx.theme, 'default'),
+    attrs: attrsFromStyle(own),
+    link: typeof link === 'string' ? link : undefined,
+  };
+}
+
 export function painterOf(
   ink: Ink | undefined,
   ctx: RenderContext,
 ): (cell: InkCell) => CellStyle | undefined {
   if (ink === undefined) return () => undefined;
+  // A theme with no colour has no inks, and this is not only faster: a ramp
+  // whose stops all resolve to the terminal's own still has to be *mixed*, and
+  // mixing "no colour" with itself lands on black - which is a colour.
+  if (ctx.theme.monochrome) return () => undefined;
 
   if (typeof ink === 'function') {
     return (cell) => styleOf(ink(cell, ctx), ctx);

package/src/display/font-text.tsx

@@ -0,0 +1,94 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h, useCapabilities, useMeasure, useTheme } from '@textui/core';
+import { banner, DEFAULT_FONT, fontAt, inkGlyphs } from './fonts.js';
+import type { Font } from './fonts.js';
+
+/**
+ * `wrap` is not `BoxProps.wrap`.
+ *
+ * On a `text` it means where a line of *characters* is cut, and the whole point
+ * of this component is that the block it draws is not a line of characters: its
+ * rows are the rows of the letters, so cutting one at column sixty cuts every
+ * letter in it in half. `wrap` here means the one thing that can be done
+ * instead - break the *text* between its words, measured in the font - and it
+ * has no `char`, because a banner broken mid-word is not a banner. The drawn
+ * rows are handed to the `text` node as `wrap: 'none'` always; a caller cannot
+ * reach that.
+ */
+export interface FontTextProps extends Omit<BoxProps, 'wrap'> {
+  /** The text to draw. A newline is a line, and each is a line of banner. */
+  content: string;
+  /**
+   * The font to draw it in. The shipped `block` table by default.
+   *
+   * A font may name a substitute for a terminal that cannot draw its glyphs -
+   * `fallback` - and that is used here in place of it. There is no guessing one
+   * for a table the library has never seen, which is why the font says.
+   */
+  font?: Font;
+  /**
+   * Break the text between its words so the drawn banner fits the box.
+   *
+   * `'none'` - the default - draws the text as it was written, however wide
+   * that is: a banner is usually a size somebody picked, and at a width the
+   * caller did not intend, letters that reflow are worse than letters that
+   * overflow. `'word'` asks the box for its width and breaks the text to it,
+   * words first and a word too wide for a line of its own spent a character at
+   * a time, which is the only place a letter boundary is ever crossed.
+   *
+   * It measures the box, so the first frame - which has no width yet - draws
+   * one unbroken line, exactly as `'none'` would.
+   */
+  wrap?: 'none' | 'word';
+  /**
+   * Blank rows between one line of the block and the next. One by default.
+   *
+   * Not `gap`, which every box already has and means the space between its
+   * *children*: this is the space between the rows of one drawing. `0` butts
+   * the lines together, which for a font with a ground of its own - `pagga`'s
+   * `░`, `tmplt`'s rules - merges them into one texture; a larger number is air
+   * between them, and reads as two lines rather than as one.
+   *
+   * A newline in `content` is a line, and so is a wrap when `wrap: 'word'` is
+   * breaking the text: the gap is the same one either way.
+   */
+  lineGap?: number;
+}
+
+/**
+ * Text as block letters.
+ *
+ * The shape only: a string in, the same string drawn in the font's glyphs out,
+ * as a `text` node that inherits its colour like any other. Colouring the
+ * letters cell by cell - a ramp across a banner, a palette down it - is
+ * [`ColorText`](color-text.md), and handing it this output is the pair the two
+ * were split for.
+ *
+ * The letters are laid out by [`banner`](fonts.ts), which measures in the font
+ * rather than in cells, so the tracking is the font's and a glyph is
+ * proportional to what it actually draws. A character the font has no glyph for
+ * becomes a word space, so a missing letter shows as a gap rather than quietly
+ * closing up, and the placeholders a table is written in - `#`, `%`, `^`, `v` -
+ * are filled from the theme's own glyphs, which is what keeps a banner legible
+ * on a terminal that can only do ascii.
+ */
+export const FontText = defineComponent<FontTextProps>('FontText', (props) => {
+  const theme = useTheme();
+  const capabilities = useCapabilities();
+  const measured = useMeasure();
+  const { content, font: chosen, wrap, lineGap, ...rest } = props;
+
+  const unicode = capabilities.unicode !== 'ascii';
+  const picked = chosen ?? DEFAULT_FONT;
+  const font = !unicode && picked.fallback ? fontAt(picked.fallback) : picked;
+  const width = wrap === 'word' ? measured.width : undefined;
+  const drawn = banner(
+    content, font, inkGlyphs(theme.glyphs, unicode), width ?? Number.POSITIVE_INFINITY, lineGap,
+  );
+
+  // `wrap: 'none'` *after* the spread, so the lines `banner` decided on are the
+  // lines drawn. Every one of them is a row of letters; a text node wrapping
+  // one cuts letters in half, and a caller who passed a `TextWrap` through
+  // `...rest` would be doing exactly that.
+  return h('text', { content: drawn, ...rest, wrap: 'none' });
+});