@textui/widgets 0.6.1 → 0.8.0

package/dist/panel/resource-panel.js

@@ -1,4 +1,4 @@
-import { defineComponent, escapeSegment, h, useEffect, useFocusScope, useRef, useRuntime, useStoreValue, useTask, } from '@textui/core';
+import { defineComponent, escapeSegment, h, useEffect, useFocusScope, useI18n, useRef, useRuntime, useStoreValue, useTask, } from '@textui/core';
 import { EmptyState, ErrorState, Spinner } from '../display/index.js';
 import { LOOSE, PanelContext } from './shared.js';
 /** Every panel's remembered state. */
@@ -67,6 +67,7 @@ export function defaultRenderer(renderers) {
  */
 export const ResourcePanel = defineComponent('ResourcePanel', (props) => {
     const runtime = useRuntime();
+    const i18n = useI18n();
     const { id: named, uri, renderer, mode, rendererProps, fallbackComponent, autoFocus, emptyTitle, ...rest } = props;
     const app = runtime.app();
     const scope = useFocusScope({
@@ -178,20 +179,23 @@ export const ResourcePanel = defineComponent('ResourcePanel', (props) => {
             runtime.store.set(panelClaimPath(id), 0);
     }, [id, claim, chosen?.id ?? null]);
     if (!uri)
-        return h(EmptyState, { title: emptyTitle ?? 'Nothing selected', ...rest });
+        return h(EmptyState, { title: emptyTitle ?? i18n.t('textui.resourcePanel.empty', undefined, 'Nothing selected'), ...rest });
     if (!app)
         return null;
     if (task.status === 'running' || task.status === 'idle') {
-        return h(Spinner, { label: 'Loading…', ...rest });
+        return h(Spinner, { label: i18n.t('textui.resourcePanel.loading', undefined, 'Loading…'), ...rest });
     }
     if (task.status === 'error')
         return h(ErrorState, { error: task.error, ...rest });
     if (!resource)
-        return h(EmptyState, { title: 'Not found', message: uri, ...rest });
+        return h(EmptyState, { title: i18n.t('textui.resourcePanel.notFound', undefined, 'Not found'), message: uri, ...rest });
     if (!chosen) {
         return h('box', { direction: 'column', flex: 1, id: scope, ...rest }, fallbackComponent
             ? { component: fallbackComponent, resource, uri }
-            : h(EmptyState, { title: 'No renderer', message: resource.kind }));
+            : h(EmptyState, {
+                title: i18n.t('textui.resourcePanel.noRenderer', undefined, 'No renderer'),
+                message: resource.kind,
+            }));
     }
     const node = {
         component: chosen.component,

package/dist/surface/mount-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mount-view.d.ts","sourceRoot":"","sources":["../../src/surface/mount-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,QAAQ,EAAiB,KAAK,EAAE,MAAM,cAAc,CAAC;AAIhF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,KAAK,EAAE,KAAK,CAAC;CACd;AAED,+EAA+E;AAC/E,eAAO,MAAM,SAAS,gEAoBpB,CAAC"}
+{"version":3,"file":"mount-view.d.ts","sourceRoot":"","sources":["../../src/surface/mount-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,QAAQ,EAAiB,KAAK,EAAE,MAAM,cAAc,CAAC;AAIhF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,KAAK,EAAE,KAAK,CAAC;CACd;AAED,+EAA+E;AAC/E,eAAO,MAAM,SAAS,gEAqBpB,CAAC"}

package/dist/surface/mount-view.js

@@ -1,14 +1,15 @@
-import { defineComponent, h, useRuntime } from '@textui/core';
+import { defineComponent, h, useI18n, useRuntime } from '@textui/core';
 import { EmptyState } from '../display/index.js';
 /** Renders one mount's target - an inline node, or a node read from a path. */
 export const MountView = defineComponent('MountView', ({ mount, ...rest }) => {
     const runtime = useRuntime();
+    const i18n = useI18n();
     const target = mount.target;
     const node = 'component' in target
         ? target
         : (runtime.store.get(target.path) ?? null);
     if (!node) {
-        return h(EmptyState, { title: 'Nothing mounted', ...rest });
+        return h(EmptyState, { title: i18n.t('textui.mountView.empty', undefined, 'Nothing mounted'), ...rest });
     }
     // A mount's data context makes relative paths inside it resolve against the
     // record it was opened for.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/widgets",
-  "version": "0.6.1",
+  "version": "0.8.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.6.1"
+    "@textui/core": "^0.8.0"
   },
   "publishConfig": {
     "access": "public"

package/src/chart/line-chart.ts

@@ -1,5 +1,5 @@
 import type { PaintSurface, RenderContext } from '@textui/core';
-import { defineComponent, fitTo, h, stringWidth, useTheme } from '@textui/core';
+import { defineComponent, fitTo, h, stringWidth, useI18n, useTheme } from '@textui/core';
 import type { LineChartProps } from './shared.js';
 import { TONE, bounds, resample } from './shared.js';
 
@@ -9,6 +9,7 @@ import { TONE, bounds, resample } from './shared.js';
  */
 export const LineChart = defineComponent<LineChartProps>('LineChart', (props) => {
   const theme = useTheme();
+  const i18n = useI18n();
   const {
     series, min, max, chartWidth, chartHeight = 8,
     axis = true, area = false, format, ...rest
@@ -83,7 +84,7 @@ export const LineChart = defineComponent<LineChartProps>('LineChart', (props) =>
           ...series.map((s, i) =>
             h('box', { key: i, direction: 'row', gap: 1 },
               h('text', { content: theme.glyphs.bulletFilled, fg: TONE[s.tone ?? (i === 0 ? 'accent' : 'secondary')] }),
-              h('text', { content: s.label ?? `series ${i + 1}`, fg: 'muted' }))))
+              h('text', { content: s.label ?? i18n.t('textui.lineChart.series', { n: i + 1 }, 'series {n}'), fg: 'muted' }))))
       : null,
   );
 });

package/src/control/select.ts

@@ -1,6 +1,6 @@
 import type { BoxProps, ComponentNode, RenderOutput } from '@textui/core';
 import {
-  defineComponent, h, useApp, useEffect, useFocus, useInput, useMeasure, useState, useTheme,
+  defineComponent, h, useApp, useEffect, useFocus, useI18n, useInput, useMeasure, useState, useTheme,
 } from '@textui/core';
 
 export interface SelectOption {
@@ -46,6 +46,7 @@ export interface SelectProps extends BoxProps {
 
 export const Select = defineComponent<SelectProps>('Select', (props) => {
   const theme = useTheme();
+  const i18n = useI18n();
   const {
     options, value, onChange, label, placeholder,
     open: openProp, visibleRows = 6, disabled, mode = 'inline', ...rest
@@ -54,7 +55,8 @@ export const Select = defineComponent<SelectProps>('Select', (props) => {
   const app = useApp();
   const focus = useFocus({ disabled });
   const measured = useMeasure();
-  const empty = placeholder ?? `Select${theme.glyphs.ellipsis}`;
+  const empty = placeholder
+    ?? i18n.t('textui.select.placeholder', { ellipsis: theme.glyphs.ellipsis }, 'Select{ellipsis}');
   const [open, setOpen] = useState(openProp ?? false);
   const index = Math.max(0, options.findIndex((o) => o.value === value));
   const [highlight, setHighlight] = useState(index);

package/src/control/switch.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@textui/core';
-import { defineComponent, h, useFocus, useInput } from '@textui/core';
+import { defineComponent, h, useFocus, useI18n, useInput } from '@textui/core';
 
 export interface SwitchProps extends BoxProps {
   label?: string;
@@ -10,7 +10,14 @@ export interface SwitchProps extends BoxProps {
 }
 
 export const Switch = defineComponent<SwitchProps>('Switch', (props) => {
-  const { label, value = false, onChange, labels = ['off', 'on'], disabled, ...rest } = props;
+  const i18n = useI18n();
+  const {
+    label, value = false, onChange, disabled, ...rest
+  } = props;
+  const labels = props.labels ?? [
+    i18n.t('textui.switch.off', undefined, 'off'),
+    i18n.t('textui.switch.on', undefined, 'on'),
+  ];
   const focus = useFocus({ disabled });
 
   useInput(

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/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

@@ -6,6 +6,7 @@ import {
   h,
   stringWidth,
   useFocus,
+  useI18n,
   useInput,
   useMeasure,
   useState,
@@ -77,11 +78,15 @@ 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();
   const {
     columns, rows, rowKey = 'id', selectedKey, onSelect, onActivate,
-    visibleRows, showHeader = true, emptyMessage = 'No rows',
+    visibleRows, showHeader = true, emptyMessage = i18n.t('textui.table.empty', undefined, 'No rows'),
     focusable = true, responsive = true, width, ...rest
   } = props;
 
@@ -204,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

@@ -4,6 +4,7 @@ import {
   defineComponent,
   h,
   useFocus,
+  useI18n,
   useInput,
   useMeasure,
   useState,
@@ -24,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. */
@@ -98,9 +109,10 @@ export interface ListProps<T extends ListItem = ListItem> extends BoxProps {
 
 function ListView<T extends ListItem>(props: ListProps<T>): RenderOutput {
   const theme = useTheme();
+  const i18n = useI18n();
   const {
     items, selectedId, onSelect, onActivate, visibleRows,
-    emptyMessage = 'Nothing here', marker = true, focusable = true,
+    emptyMessage = i18n.t('textui.list.empty', undefined, 'Nothing here'), marker = true, focusable = true,
     autoFocus, focusId, renderItem, itemHeight = 1, ...rest
   } = props;
 
@@ -197,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/log-viewer.ts

@@ -4,6 +4,7 @@ import {
   defineComponent,
   h,
   useFocus,
+  useI18n,
   useInput,
   useMeasure,
   useState,
@@ -45,6 +46,7 @@ export const LogViewer = defineComponent<LogViewerProps>('LogViewer', (props) =>
     lines, visibleRows: visibleRowsProp, follow: followProp, showTime = true,
     showLevel = true, onFollowChange, ...rest
   } = props;
+  const i18n = useI18n();
 
   const focus = useFocus({});
   const measured = useMeasure();
@@ -99,7 +101,11 @@ export const LogViewer = defineComponent<LogViewerProps>('LogViewer', (props) =>
         h('text', { content: line.message, flex: 1, truncate: 'end' }),
       )),
     !follow
-      ? h('text', { content: '  paused - end to follow', fg: 'warning', dim: true })
+      ? h('text', {
+        content: `  ${i18n.t('textui.logViewer.paused', undefined, 'paused - end to follow')}`,
+        fg: 'warning',
+        dim: true,
+      })
       : null,
   );
 });

package/src/data/markdown-view.ts

@@ -4,6 +4,7 @@ import {
   h,
   layoutMarkdown,
   repeatToWidth,
+  useI18n,
   useMeasure,
   useMemo,
   useTheme,
@@ -52,6 +53,7 @@ export const MarkdownView = defineComponent<MarkdownViewProps>('MarkdownView', (
   // a document with no search over it carries no extra prop per run.
   const hit = match ? { match } : {};
   const theme = useTheme();
+  const i18n = useI18n();
   const measured = useMeasure();
   const width = measured.width > 0 ? measured.width : 0;
   const ruled = theme.border !== 'none';
@@ -221,7 +223,14 @@ export const MarkdownView = defineComponent<MarkdownViewProps>('MarkdownView', (
   return h('box', { role: 'document', direction: 'column', ...rest },
     ...out,
     hidden > 0
-      ? h('text', { content: `${theme.glyphs.ellipsis} ${hidden} more lines`, fg: 'subtle' })
+      ? 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

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@textui/core';
-import { defineComponent, h, useFocus, useInput, useTheme } from '@textui/core';
+import { defineComponent, h, useFocus, useI18n, useInput, useTheme } from '@textui/core';
 
 export interface PaginationProps extends BoxProps {
   page: number;
@@ -10,6 +10,7 @@ export interface PaginationProps extends BoxProps {
 
 export const Pagination = defineComponent<PaginationProps>('Pagination', (props) => {
   const theme = useTheme();
+  const i18n = useI18n();
   const { page, pageCount, total, onChange, ...rest } = props;
   const focus = useFocus({});
 
@@ -26,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: `${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/error-state.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@textui/core';
-import { defineComponent, h, useTheme } from '@textui/core';
+import { defineComponent, h, useI18n, useTheme } from '@textui/core';
 
 export interface ErrorStateProps extends BoxProps {
   title?: string;
@@ -10,7 +10,8 @@ export interface ErrorStateProps extends BoxProps {
 
 export const ErrorState = defineComponent<ErrorStateProps>('ErrorState', (props) => {
   const theme = useTheme();
-  const { title = 'Something went wrong', error, onRetry, ...rest } = props;
+  const i18n = useI18n();
+  const { title = i18n.t('textui.errorState.title', undefined, 'Something went wrong'), error, onRetry, ...rest } = props;
   const message = error instanceof Error ? error.message : String(error);
 
   return h('box', { role: 'alert', direction: 'column', gap: 1, padding: 1, ...rest },
@@ -18,6 +19,6 @@ export const ErrorState = defineComponent<ErrorStateProps>('ErrorState', (props)
       h('text', { content: theme.glyphs.cross, fg: 'danger' }),
       h('text', { content: title, bold: true, fg: 'danger' })),
     h('text', { content: message, fg: 'muted', wrap: 'word' }),
-    onRetry ? h('text', { content: 'r  retry', fg: 'subtle' }) : null,
+    onRetry ? h('text', { content: i18n.t('textui.errorState.retry', undefined, 'r  retry'), fg: 'subtle' }) : null,
   );
 });