@textui/widgets 0.5.0 → 0.7.0

package/src/overlay/command-palette.ts

@@ -5,6 +5,7 @@ import {
   stringWidth,
   useEffect,
   useFocusScope,
+  useI18n,
   useInput,
   useRuntime,
   useState,
@@ -89,8 +90,19 @@ export interface CommandPaletteProps extends BoxProps {
  * That is where sub-items come from - the command says what it needs and the
  * palette asks, rather than every caller inventing its own submenu.
  */
+
+/** The question being asked: the command, the argument, and the answers given before it. */
+interface Pending {
+  command: CommandDefinition;
+  arg: ArgSpec;
+  /** Answers given so far, for a command that asks for more than one. */
+  collected: Record<string, unknown>;
+}
+
 export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalette', (props) => {
   const theme = useTheme();
+  const i18n = useI18n();
+  const ellipsis = theme.glyphs.ellipsis;
   const runtime = useRuntime();
   const {
     commands, placeholder, onRun, onClose, execute = true,
@@ -101,12 +113,7 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   const [query, setQuery] = useState('');
   const [highlight, setHighlight] = useState(0);
   /** The command being asked about, when the palette has drilled in. */
-  const [pending, setPending] = useState<{
-    command: CommandDefinition;
-    arg: ArgSpec;
-    /** Answers given so far, for a command that asks for more than one. */
-    collected: Record<string, unknown>;
-  } | null>(null);
+  const [pending, setPending] = useState<Pending | null>(null);
   const [choices, setChoices] = useState<ArgChoice[]>([]);
   /**
    * Whether the answer to "what may I choose" is still on its way.
@@ -127,7 +134,9 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   const given = typeof commands === 'function' ? commands() : commands;
   const all = given ?? app?.commands.list({ slot: 'palette', enabledOnly: true }) ?? [];
 
-  const matches = pending ? [] : filterCommands(all, query);
+  const matches = pending
+    ? []
+    : grouped && query.trim() === '' ? byCategory(all) : filterCommands(all, query);
   const offered = pending ? filterChoices(choices, query) : [];
   const rows = pending ? offered.map((choice) => choice.value) : matches.map((c) => c.id);
   const index = Math.max(0, Math.min(highlight, rows.length - 1));
@@ -142,7 +151,9 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
         // the only thing the palette itself knows about a value.
         ...(choice.description
           ? { description: choice.description }
-          : pending.arg.default === choice.value ? { description: 'default' } : {}),
+          : pending.arg.default === choice.value
+            ? { description: i18n.t('textui.palette.default', undefined, 'default') }
+            : {}),
       }))
       // One row, saying which kind of nothing this is. A disabled item rather
       // than no items: the panel keeps its height, so the answer arriving does
@@ -150,8 +161,10 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
       : [{
         id: '',
         label: asking
-          ? `Asking${theme.glyphs.ellipsis}`
-          : (query === '' ? 'Nothing to choose' : 'No match'),
+          ? i18n.t('textui.palette.asking', { ellipsis }, 'Asking{ellipsis}')
+          : (query === ''
+            ? i18n.t('textui.palette.nothingToChoose', undefined, 'Nothing to choose')
+            : i18n.t('textui.palette.noMatch', undefined, 'No match')),
         disabled: true,
       }])
     : matches.map((command, i) => ({
@@ -186,10 +199,30 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
           : {}),
       }));
 
+  /** The argument answered last, when this question came after one. */
+  const previousOf = (asked: Pending): ArgSpec | undefined => {
+    const last = Object.keys(asked.collected).at(-1);
+    return last === undefined ? undefined : (asked.command.args ?? []).find((arg) => arg.name === last);
+  };
+
+  /**
+   * One question back.
+   *
+   * After a first question the second is asked again from the start with
+   * the earlier answer withdrawn: a wrong provider is corrected by choosing
+   * another, not by closing the whole picker and opening it again. At the
+   * first question, the command list.
+   */
   const back = (): void => {
     // `null` is "never mind": whatever the preview did gets undone by whoever
     // did it, because only the command knows what it changed.
     pending?.arg.preview?.(null);
+    const previous = pending ? previousOf(pending) : undefined;
+    if (pending && previous) {
+      const { [previous.name]: _withdrawn, ...rest } = pending.collected;
+      drillInto(pending.command, previous, rest);
+      return;
+    }
     setPending(null);
     setChoices([]);
     setQuery('');
@@ -233,13 +266,20 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
     onRun?.(id, args);
   };
 
-  /** Ask about one command. `choices` may be a function, and may be async. */
+  /**
+   * Ask about one command. `choices` may be a function, and may be async.
+   *
+   * A resolver is handed what was answered before this argument - and an
+   * argument that was not asked because its `default` stood was answered by
+   * that default. Left out, "the models of the chosen provider" would see no
+   * provider exactly when there was only one to choose from.
+   */
   const drillInto = (
     command: CommandDefinition,
     arg: ArgSpec,
     collected: Record<string, unknown> = {},
   ): void => {
-    const resolved = typeof arg.choices === 'function' ? arg.choices() : arg.choices ?? [];
+    const resolved = typeof arg.choices === 'function' ? arg.choices(answeredBefore(command, arg, collected)) : arg.choices ?? [];
     setPending({ command, arg, collected });
     setQuery('');
 
@@ -350,8 +390,10 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
         // anybody chose to be at: the caller drilled in on their behalf, and
         // the level underneath is a list of one. Backing out to it reads as
         // "escape did nothing", and the second escape - the one that would
-        // close it - is spent leaving a screen nobody asked to see.
-        if (pending && !openAt) { back(); return true; }
+        // close it - is spent leaving a screen nobody asked to see. A question
+        // that came after one is different: there the level underneath is the
+        // earlier question, which somebody did choose to be at.
+        if (pending && (!openAt || previousOf(pending) !== undefined)) { back(); return true; }
         // Whatever a highlighted choice previewed has to be put back on the
         // way out, and `null` is how the command is told to undo it - only it
         // knows what it changed. `back()` did that, so closing instead of
@@ -361,7 +403,7 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
         onClose?.();
         return true;
       }
-      if (event.name === 'left' && pending && query === '' && !openAt) { back(); return true; }
+      if (event.name === 'left' && pending && query === '' && (!openAt || previousOf(pending) !== undefined)) { back(); return true; }
       // Wrapping, both ways. A list you can walk off the end of makes you
       // check where you are before every press; one that comes round means the
       // last item is one key from the first.
@@ -382,17 +424,29 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   );
 
   const highlighted = pending ? undefined : matches[index];
-  const move = `${theme.glyphs.arrowUp}${theme.glyphs.arrowDown} move`;
+  const move = i18n.t(
+    'textui.palette.hint.move',
+    { arrows: `${theme.glyphs.arrowUp}${theme.glyphs.arrowDown}` },
+    '{arrows} move',
+  );
+  const escBack = i18n.t('textui.palette.hint.back', undefined, 'esc back');
   // What the highlighted row is, in full.
   //
   // The rows themselves have to fit, so a choice's own sentence is truncated
   // there - and a sentence about what a mode does is exactly the thing a
   // person needs whole. So the line under the list follows the highlight: the
   // choice's description while there is one, the question's otherwise.
+  // 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 ?? `${pending.command.title} needs a ${pending.arg.name}`
+      ?? pending.arg.description
+      ?? i18n.t(
+        'textui.palette.needs',
+        { command: pending.command.title, arg: pending.arg.name },
+        '{command} needs a {arg}',
+      )
     : highlighted?.description ?? highlighted?.id ?? '';
 
   /*
@@ -411,11 +465,18 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   const content = Math.max(
     ...items.map((item) => rowWidth(item, descriptions)),
     ...(pending ? [stringWidth(pending.command.title) + 12] : [stringWidth(placeholder ?? '') + 4]),
+    // The sentences the line under the list may show, so a question with
+    // three one-word answers is not a panel 28 wide wrapping a sentence
+    // three times under them. Capped like everything else by `maxWidth`.
+    ...(pending
+      ? [pending.arg.description ?? '', ...offered.map((choice) => choice.description ?? '')]
+        .map((sentence) => (sentence === '' ? 0 : stringWidth(sentence) + 6))
+      : []),
   );
 
   return h('box', {
     role: 'dialog',
-    label: 'Commands',
+    label: i18n.t('textui.palette.label', undefined, 'Commands'),
     border: theme.border,
     bg: 'overlay',
     // A stated width is a width. Left off, it fits what it holds.
@@ -431,8 +492,8 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
     // where you are; "commands › id" is what the parameter happens to be
     // called, which is the author's business rather than the reader's.
     title: pending
-      ? ` commands ${theme.glyphs.breadcrumb} ${pending.command.title} `
-      : ' commands ',
+      ? ` ${i18n.t('textui.palette.title', undefined, 'commands')} ${theme.glyphs.breadcrumb} ${pending.command.title} `
+      : ` ${i18n.t('textui.palette.title', undefined, 'commands')} `,
     ...rest,
   },
     h(TextInput, {
@@ -457,11 +518,24 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
         const command = matches[index];
         if (command && argumentOf(command)) choose();
       },
+      // A typed answer's field is the answer, so its placeholder is the
+      // question. A list's field is a filter, and the question goes where
+      // there is room to say it once: here, while the line under the list
+      // is busy saying what each answer means; under the list, whole and
+      // wrapped, when the answers have nothing to say for themselves and
+      // that line would otherwise repeat this one, cut to whatever width
+      // three short answers gave the panel.
       placeholder: pending
-        ? (pending.arg.description ?? (pending.arg.choices === undefined
-          ? `${pending.command.title}${theme.glyphs.ellipsis}`
-          : `Choose ${pending.command.title.toLowerCase()}${theme.glyphs.ellipsis}`))
-        : (placeholder ?? `Type a command${theme.glyphs.ellipsis}`),
+        ? (pending.arg.choices === undefined
+          ? pending.arg.description ?? `${pending.command.title}${theme.glyphs.ellipsis}`
+          : offered.some((choice) => choice.description) && pending.arg.description
+            ? pending.arg.description
+            : i18n.t(
+              'textui.palette.choose',
+              { command: pending.command.title.toLowerCase(), ellipsis },
+              'Choose {command}{ellipsis}',
+            ))
+        : (placeholder ?? i18n.t('textui.palette.placeholder', { ellipsis }, 'Type a command{ellipsis}')),
       search: true,
       autoFocus: true,
       border: 'none',
@@ -484,18 +558,29 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
     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 },
-      h('text', { content: detail, fg: 'muted', flex: 1, truncate: 'end' }),
+    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', {
         content: pending
           ? (pending.arg.choices === undefined
-            ? hint(theme, ['type it', 'enter confirm', 'esc back'])
+            ? hint(theme, [
+              i18n.t('textui.palette.hint.type', undefined, 'type it'),
+              i18n.t('textui.palette.hint.confirm', undefined, 'enter confirm'),
+              escBack,
+            ])
             // Nothing to choose is nothing to press enter on, and offering it
             // is how a panel reads as broken rather than as empty.
-            : hint(theme, rows.length > 0 ? [move, 'enter choose', 'esc back'] : ['esc back']))
-          : hint(theme, [move, 'enter run', `${theme.glyphs.chevronRight} sub-items`, 'esc close']),
+            : hint(theme, rows.length > 0
+              ? [move, i18n.t('textui.palette.hint.choose', undefined, 'enter choose'), escBack]
+              : [escBack]))
+          : hint(theme, [
+            move,
+            i18n.t('textui.palette.hint.run', undefined, 'enter run'),
+            i18n.t('textui.palette.hint.subItems', { glyph: theme.glyphs.chevronRight }, '{glyph} sub-items'),
+            i18n.t('textui.palette.hint.close', undefined, 'esc close'),
+          ]),
         fg: 'subtle',
         truncate: 'end',
       })),
@@ -528,6 +613,26 @@ export function argumentOf(
   );
 }
 
+/**
+ * What a `choices` resolver is told: the answers given, under the defaults
+ * of the arguments before this one that stood in for a question.
+ *
+ * Only the ones ahead of it in the declaration. An argument after this one
+ * has not been reached, and its default is not yet an answer to anything.
+ */
+function answeredBefore(
+  command: CommandDefinition,
+  arg: ArgSpec,
+  collected: Record<string, unknown>,
+): Record<string, unknown> {
+  const answered: Record<string, unknown> = {};
+  for (const spec of command.args ?? []) {
+    if (spec === arg) break;
+    if (spec.default !== undefined) answered[spec.name] = spec.default;
+  }
+  return { ...answered, ...collected };
+}
+
 /** The short form and the long one, as one shape. */
 function asChoice(choice: string | ArgChoice): ArgChoice {
   return typeof choice === 'string' ? { value: choice } : choice;
@@ -547,6 +652,24 @@ function filterChoices(choices: ArgChoice[], query: string): ArgChoice[] {
     .toLowerCase().includes(q));
 }
 
+/**
+ * Each category's commands together, the categories in the order they first
+ * appear and the commands in the order they came.
+ *
+ * Registration order is whatever order the code happened to run in, so a
+ * category registered in two places would be two groups with the same name
+ * over them.
+ */
+function byCategory(commands: CommandDefinition[]): CommandDefinition[] {
+  const groups = new Map<string | undefined, CommandDefinition[]>();
+  for (const command of commands) {
+    const group = groups.get(command.category);
+    if (group) group.push(command);
+    else groups.set(command.category, [command]);
+  }
+  return [...groups.values()].flat();
+}
+
 export function filterCommands(commands: CommandDefinition[], query: string): CommandDefinition[] {
   const q = query.trim().toLowerCase();
   if (q === '') return commands;

package/src/overlay/dialog.ts

@@ -1,5 +1,5 @@
 import type { BoxProps, SemanticVariant } from '@textui/core';
-import { defineComponent, h, useFocusScope, useInput, useTheme } from '@textui/core';
+import { defineComponent, h, useFocusScope, useI18n, useInput, useTheme } from '@textui/core';
 import { Button } from '../control/index.js';
 
 export interface DialogProps extends BoxProps {
@@ -63,3 +63,39 @@ export const Dialog = defineComponent<DialogProps>('Dialog', (props) => {
       : null,
   );
 });
+
+export interface ConfirmDialogProps extends BoxProps {
+  title?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  tone?: SemanticVariant;
+  onConfirm?(): void;
+  onCancel?(): void;
+}
+
+/** Two-button dialog behind the `confirm` helper. */
+export const ConfirmDialog = defineComponent<ConfirmDialogProps>('ConfirmDialog', (props) => {
+  const i18n = useI18n();
+  const { title, message, confirmLabel, cancelLabel, tone, onConfirm, onCancel, ...rest } = props;
+  return h(Dialog, {
+    title: title ?? i18n.t('textui.confirmDialog.title', undefined, 'Confirm'),
+    width: 50,
+    actions: [
+      {
+        id: 'confirm',
+        label: confirmLabel ?? i18n.t('textui.confirmDialog.confirm', undefined, 'Confirm'),
+        tone: tone ?? 'primary',
+        onPress: onConfirm,
+      },
+      {
+        id: 'cancel',
+        label: cancelLabel ?? i18n.t('textui.confirmDialog.cancel', undefined, 'Cancel'),
+        onPress: onCancel,
+      },
+    ],
+    ...rest,
+  },
+    h('text', { content: message, wrap: 'word' }),
+  );
+});

package/src/overlay/index.ts

@@ -7,7 +7,7 @@ import type {
   TextUIApp,
 } from '@textui/core';
 import { CommandPalette } from './command-palette.js';
-import { Dialog } from './dialog.js';
+import { ConfirmDialog, Dialog } from './dialog.js';
 import { LayerScope } from './layer-scope.js';
 import { PathPicker } from './path-picker.js';
 import { PromptDialog } from './prompt-dialog.js';
@@ -68,23 +68,14 @@ export function confirm(
       dismissOnEscape: true,
       onClose: () => finish(false),
       node: {
-        component: 'Dialog',
-        title: options.title ?? 'Confirm',
-        width: 50,
-        children: { component: 'text', content: options.message, wrap: 'word' },
-        actions: [
-          {
-            id: 'confirm',
-            label: options.confirmLabel ?? 'Confirm',
-            tone: options.tone ?? 'primary',
-            onPress: () => finish(true),
-          },
-          {
-            id: 'cancel',
-            label: options.cancelLabel ?? 'Cancel',
-            onPress: () => finish(false),
-          },
-        ],
+        component: 'ConfirmDialog',
+        title: options.title,
+        message: options.message,
+        confirmLabel: options.confirmLabel,
+        cancelLabel: options.cancelLabel,
+        tone: options.tone,
+        onConfirm: { handler: () => finish(true) },
+        onCancel: { handler: () => finish(false) },
       },
     });
   });
@@ -120,7 +111,7 @@ export function prompt(
       onClose: () => finish(null),
       node: {
         component: 'PromptDialog',
-        title: options.title ?? 'Input',
+        title: options.title,
         message: options.message,
         placeholder: options.placeholder,
         initialValue: options.initialValue,
@@ -222,6 +213,7 @@ export function toastPosition(anchor: ToastHostProps['anchor']): LayerPosition {
 
 export const OVERLAY_COMPONENTS: ComponentDefinition[] = [
   { component: 'Dialog', category: 'overlay', renderer: { kind: 'function', render: Dialog }, role: 'dialog', description: 'Modal box with actions; traps focus and restores it.' },
+  { component: 'ConfirmDialog', category: 'overlay', renderer: { kind: 'function', render: ConfirmDialog }, role: 'dialog', description: 'Two-button dialog behind the `confirm` helper.' },
   { component: 'PromptDialog', category: 'overlay', renderer: { kind: 'function', render: PromptDialog }, role: 'dialog', description: 'One-field dialog behind the `prompt` helper.' },
   { component: 'PathPicker', category: 'overlay', renderer: { kind: 'function', render: PathPicker }, role: 'dialog', description: 'Walk the resource tree and pick a file or a folder.' },
   { component: 'Tooltip', category: 'overlay', renderer: { kind: 'function', render: Tooltip }, role: 'tooltip', description: 'Small anchored hint.' },

package/src/overlay/path-picker.ts

@@ -4,6 +4,7 @@ import {
   h,
   nameOf,
   useEffect,
+  useI18n,
   useInput,
   useRuntime,
   useState,
@@ -41,6 +42,8 @@ export const PathPicker = defineComponent<PathPickerProps>('PathPicker', (props)
     width = 60, onPick, onCancel, ...rest
   } = props;
   const theme = useTheme();
+  const i18n = useI18n();
+  const ellipsis = theme.glyphs.ellipsis;
   const runtime = useRuntime();
   const app = runtime.app();
 
@@ -90,7 +93,7 @@ export const PathPicker = defineComponent<PathPickerProps>('PathPicker', (props)
     // child to press enter on and a hidden chord for it is a chord nobody
     // finds. It is first, since it is the answer most often wanted.
     ...(wants === 'directory'
-      ? [{ id: '.', label: 'Use this folder', icon: theme.glyphs.check }]
+      ? [{ id: '.', label: i18n.t('textui.pathPicker.useFolder', undefined, 'Use this folder'), icon: theme.glyphs.check }]
       : []),
     ...(parent !== null ? [{ id: '..', label: '..', icon: theme.glyphs.chevronUp }] : []),
     ...shown.map((e) => ({
@@ -139,17 +142,23 @@ export const PathPicker = defineComponent<PathPickerProps>('PathPicker', (props)
   }, { global: true });
 
 
-  const move = `${theme.glyphs.arrowUp}${theme.glyphs.arrowDown} move`;
+  const move = i18n.t(
+    'textui.pathPicker.hint.move',
+    { arrows: `${theme.glyphs.arrowUp}${theme.glyphs.arrowDown}` },
+    '{arrows} move',
+  );
 
   return h('box', {
     role: 'dialog',
-    label: title ?? 'Choose',
+    label: title ?? i18n.t('textui.pathPicker.label', undefined, 'Choose'),
     border: theme.border,
     bg: 'overlay',
     width,
     direction: 'column',
     ...(theme.border === 'none' ? { padding: { left: 1, right: 1 } } : {}),
-    title: ` ${title ?? (wants === 'directory' ? 'choose a folder' : 'choose a file')} `,
+    title: ` ${title ?? (wants === 'directory'
+      ? i18n.t('textui.pathPicker.titleFolder', undefined, 'choose a folder')
+      : i18n.t('textui.pathPicker.titleFile', undefined, 'choose a file'))} `,
     ...rest,
   },
     // Where you are. A column of bare names with no header is a list you can
@@ -171,7 +180,7 @@ export const PathPicker = defineComponent<PathPickerProps>('PathPicker', (props)
        * what you want while editing one.
        */
       onEdge: (edge: 'start' | 'end') => { if (edge === 'start') up(); },
-      placeholder: placeholder ?? `Filter${theme.glyphs.ellipsis}`,
+      placeholder: placeholder ?? i18n.t('textui.pathPicker.placeholder', { ellipsis }, 'Filter{ellipsis}'),
       search: true,
       autoFocus: true,
       border: 'none',
@@ -195,8 +204,10 @@ export const PathPicker = defineComponent<PathPickerProps>('PathPicker', (props)
     shown.length === 0
       ? h('text', {
           content: loading
-            ? `Reading${theme.glyphs.ellipsis}`
-            : (q === '' ? 'Nothing here.' : 'Nothing matches.'),
+            ? i18n.t('textui.pathPicker.reading', { ellipsis }, 'Reading{ellipsis}')
+            : (q === ''
+              ? i18n.t('textui.pathPicker.empty', undefined, 'Nothing here.')
+              : i18n.t('textui.pathPicker.noMatch', undefined, 'Nothing matches.')),
           fg: 'muted',
         })
       : null,
@@ -204,9 +215,11 @@ export const PathPicker = defineComponent<PathPickerProps>('PathPicker', (props)
     h('text', {
       content: hint(theme, [
         move,
-        wants === 'directory' ? 'enter open' : 'enter choose',
-        `${theme.glyphs.chevronLeft} up`,
-        'esc cancel',
+        wants === 'directory'
+          ? i18n.t('textui.pathPicker.hint.open', undefined, 'enter open')
+          : i18n.t('textui.pathPicker.hint.choose', undefined, 'enter choose'),
+        i18n.t('textui.pathPicker.hint.up', { glyph: theme.glyphs.chevronLeft }, '{glyph} up'),
+        i18n.t('textui.pathPicker.hint.cancel', undefined, 'esc cancel'),
       ]),
       fg: 'subtle',
       truncate: 'end',

package/src/overlay/prompt-dialog.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@textui/core';
-import { defineComponent, h, useState } from '@textui/core';
+import { defineComponent, h, useI18n, useState } from '@textui/core';
 import { TextInput } from '../control/index.js';
 import { Dialog } from './dialog.js';
 
@@ -15,15 +15,16 @@ export interface PromptDialogProps extends BoxProps {
 
 export const PromptDialog = defineComponent<PromptDialogProps>('PromptDialog', (props) => {
   const { title, message, placeholder, initialValue = '', mask, onSubmit, onCancel, ...rest } = props;
+  const i18n = useI18n();
   const [value, setValue] = useState(initialValue);
 
   return h(Dialog, {
-    title,
+    title: title ?? i18n.t('textui.promptDialog.title', undefined, 'Input'),
     width: 50,
     onClose: onCancel,
     actions: [
-      { id: 'ok', label: 'OK', tone: 'primary', onPress: () => onSubmit?.(value) },
-      { id: 'cancel', label: 'Cancel', onPress: onCancel },
+      { id: 'ok', label: i18n.t('textui.promptDialog.ok', undefined, 'OK'), tone: 'primary', onPress: () => onSubmit?.(value) },
+      { id: 'cancel', label: i18n.t('textui.promptDialog.cancel', undefined, 'Cancel'), onPress: onCancel },
     ],
     ...rest,
   },

package/src/panel/index.ts

@@ -244,18 +244,20 @@ export function panelCommands(app: TextUIApp): CommandDefinition[] {
   const targetUri = (args: Record<string, unknown>, id: string | null): string | null =>
     (args.uri as string | undefined) ?? (id === null ? null : panelUri(app.store, id));
 
+  const category = app.i18n.t('textui.panel.category', undefined, 'View');
+
   return [
     {
       id: 'panel.openWith',
-      title: 'Open With…',
-      category: 'View',
+      title: app.i18n.t('textui.panel.openWith', undefined, 'Open With…'),
+      category,
       slots: ['palette'],
       when: PANEL_PATH,
       args: [{
         name: 'renderer',
         type: 'string' as const,
         required: true,
-        description: 'How to show this resource',
+        description: app.i18n.t('textui.panel.renderer', undefined, 'How to show this resource'),
         choices: async () => {
           const id = activePanel(app.store);
           return (await choicesFor(app, id === null ? null : panelUri(app.store, id)))
@@ -272,8 +274,8 @@ export function panelCommands(app: TextUIApp): CommandDefinition[] {
     },
     {
       id: 'panel.nextRenderer',
-      title: 'Next View',
-      category: 'View',
+      title: app.i18n.t('textui.panel.nextView', undefined, 'Next View'),
+      category,
       slots: ['palette'],
       when: PANEL_PATH,
       run: async (args: Record<string, unknown>, ctx: CommandContext) => {
@@ -291,8 +293,8 @@ export function panelCommands(app: TextUIApp): CommandDefinition[] {
     },
     {
       id: 'panel.toggleEdit',
-      title: 'Edit / View',
-      category: 'View',
+      title: app.i18n.t('textui.panel.toggleEdit', undefined, 'Edit / View'),
+      category,
       slots: ['palette'],
       when: PANEL_PATH,
       run: async (args: Record<string, unknown>, ctx: CommandContext) => {

package/src/panel/resource-panel.ts

@@ -12,6 +12,7 @@ import {
   h,
   useEffect,
   useFocusScope,
+  useI18n,
   useRef,
   useRuntime,
   useStoreValue,
@@ -144,6 +145,7 @@ export interface ResourcePanelProps extends BoxProps {
  */
 export const ResourcePanel = defineComponent<ResourcePanelProps>('ResourcePanel', (props) => {
   const runtime = useRuntime();
+  const i18n = useI18n();
   const {
     id: named, uri, renderer, mode, rendererProps, fallbackComponent, autoFocus,
     emptyTitle, ...rest
@@ -265,19 +267,22 @@ export const ResourcePanel = defineComponent<ResourcePanelProps>('ResourcePanel'
     if (claim > 0 && chosen) runtime.store.set(panelClaimPath(id), 0);
   }, [id, claim, chosen?.id ?? null]);
 
-  if (!uri) return h(EmptyState, { title: emptyTitle ?? 'Nothing selected', ...rest });
+  if (!uri) 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 });
+  if (!resource) 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: ComponentNode = {

package/src/surface/mount-view.ts

@@ -1,5 +1,5 @@
 import type { BindingPath, BoxProps, ComponentNode, Mount } from '@textui/core';
-import { defineComponent, h, useRuntime } from '@textui/core';
+import { defineComponent, h, useI18n, useRuntime } from '@textui/core';
 import { EmptyState } from '../display/index.js';
 
 export interface MountViewProps extends BoxProps {
@@ -9,6 +9,7 @@ export interface MountViewProps extends BoxProps {
 /** Renders one mount's target - an inline node, or a node read from a path. */
 export const MountView = defineComponent<MountViewProps>('MountView', ({ mount, ...rest }) => {
   const runtime = useRuntime();
+  const i18n = useI18n();
 
   const target = mount.target;
   const node: ComponentNode | null =
@@ -17,7 +18,7 @@ export const MountView = defineComponent<MountViewProps>('MountView', ({ mount,
       : (runtime.store.get<ComponentNode>((target as { path: BindingPath }).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