@textui/widgets 0.6.1 → 0.8.0

package/src/navigation/menu.ts

@@ -1,5 +1,5 @@
 import type { BoxProps, SemanticVariant } from '@textui/core';
-import { defineComponent, h, stringWidth, useFocus, useInput, useState, useTheme } from '@textui/core';
+import { defineComponent, h, stringWidth, useFocus, useI18n, useInput, useState, useTheme } from '@textui/core';
 import { Marquee } from '../display/index.js';
 import { TONE } from '../tone.js';
 
@@ -61,8 +61,12 @@ export interface MenuProps extends BoxProps {
   interactive?: boolean;
 }
 
+/** The name a theme styles a menu row under. See `LIST`. */
+export const MENU = 'Menu';
+
 export const Menu = defineComponent<MenuProps>('Menu', (props) => {
   const theme = useTheme();
+  const i18n = useI18n();
   const {
     items, onSelect, visibleRows, activeId, autoFocus, interactive = true,
     descriptions = 'inline', ...rest
@@ -125,15 +129,20 @@ export const Menu = defineComponent<MenuProps>('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,
+        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.
@@ -144,12 +153,18 @@ export const Menu = defineComponent<MenuProps>('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,
@@ -165,7 +180,7 @@ export const Menu = defineComponent<MenuProps>('Menu', (props) => {
             h(Marquee, {
               content: item.description as string,
               active,
-              fg: active ? 'inverted' : 'muted',
+              fg: active ? undefined : 'muted',
               flex: 1,
             }))
           : null,
@@ -188,7 +203,7 @@ export const Menu = defineComponent<MenuProps>('Menu', (props) => {
         : [row];
     }),
     selectable.length === 0
-      ? h('text', { content: '  no matches', fg: 'subtle' })
+      ? h('text', { content: `  ${i18n.t('textui.menu.noMatch', undefined, 'no matches')}`, fg: 'subtle' })
       : null,
   );
 });

package/src/navigation/tabs.ts

@@ -21,6 +21,9 @@ export interface TabsProps extends BoxProps {
   autoFocus?: boolean;
 }
 
+/** The name a theme styles a tab under. See `LIST`. */
+export const TABS = 'Tabs';
+
 export const Tabs = defineComponent<TabsProps>('Tabs', (props) => {
   const { items, activeId, onChange, variant = 'underline', separator, autoFocus, ...rest } = props;
   const focus = useFocus({ autoFocus });
@@ -46,12 +49,20 @@ export const Tabs = defineComponent<TabsProps>('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) onChange?.(item.id); },

package/src/overlay/command-palette.ts

@@ -5,6 +5,7 @@ import {
   stringWidth,
   useEffect,
   useFocusScope,
+  useI18n,
   useInput,
   useRuntime,
   useState,
@@ -100,6 +101,8 @@ interface Pending {
 
 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,
@@ -131,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));
@@ -146,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
@@ -154,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) => ({
@@ -415,7 +424,12 @@ 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
@@ -427,7 +441,12 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
   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 ?? '';
 
   /*
@@ -457,7 +476,7 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
 
   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.
@@ -473,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, {
@@ -511,8 +530,12 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
           ? pending.arg.description ?? `${pending.command.title}${theme.glyphs.ellipsis}`
           : offered.some((choice) => choice.description) && pending.arg.description
             ? pending.arg.description
-            : `Choose ${pending.command.title.toLowerCase()}${theme.glyphs.ellipsis}`)
-        : (placeholder ?? `Type a command${theme.glyphs.ellipsis}`),
+            : 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',
@@ -542,11 +565,22 @@ export const CommandPalette = defineComponent<CommandPaletteProps>('CommandPalet
       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',
       })),
@@ -618,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