@textui/widgets 0.6.1 → 0.7.0

package/dist/overlay/path-picker.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, nameOf, useEffect, useInput, useRuntime, useState, useTheme, } from '@textui/core';
+import { defineComponent, h, nameOf, useEffect, useI18n, useInput, useRuntime, useState, useTheme, } from '@textui/core';
 import { TextInput } from '../control/index.js';
 import { Menu } from '../navigation/index.js';
 import { hint } from './shared.js';
@@ -17,6 +17,8 @@ export function parentOf(uri) {
 export const PathPicker = defineComponent('PathPicker', (props) => {
     const { start, wants = 'file', title, placeholder, visibleRows = 10, width = 60, onPick, onCancel, ...rest } = props;
     const theme = useTheme();
+    const i18n = useI18n();
+    const ellipsis = theme.glyphs.ellipsis;
     const runtime = useRuntime();
     const app = runtime.app();
     const [at, setAt] = useState(start);
@@ -63,7 +65,7 @@ export const PathPicker = defineComponent('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) => ({
@@ -130,16 +132,18 @@ export const PathPicker = defineComponent('PathPicker', (props) => {
         }
         return false;
     }, { 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
@@ -161,7 +165,7 @@ export const PathPicker = defineComponent('PathPicker', (props) => {
          */
         onEdge: (edge) => { 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',
@@ -183,16 +187,20 @@ export const PathPicker = defineComponent('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, h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), 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/dist/overlay/prompt-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prompt-dialog.d.ts","sourceRoot":"","sources":["../../src/overlay/prompt-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAK7C,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,mEA6BvB,CAAC"}
+{"version":3,"file":"prompt-dialog.d.ts","sourceRoot":"","sources":["../../src/overlay/prompt-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAK7C,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,mEA8BvB,CAAC"}

package/dist/overlay/prompt-dialog.js

@@ -1,16 +1,17 @@
-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';
 export const PromptDialog = defineComponent('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,
     }, message ? h('text', { content: message, wrap: 'word' }) : null, h(TextInput, {

package/dist/panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EAEX,iBAAiB,EACjB,aAAa,EAEb,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAalE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,cAAc,qBAAqB,CAAC;AAEpC,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEvD;AAED,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAEjE;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAEpF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAE/D;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAExE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAElF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAE9E;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAE1F;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,aAAa,EACpB,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI,CAMN;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,IAAI,WAAW,GAAG,IAAI,CAE7C;AAQD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7D,QAAQ,EAAE,CAAC,GACV,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CA0BlC;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAUxD;AAgDD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,SAAS,GAAG,iBAAiB,EAAE,CAsFjE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EAEX,iBAAiB,EACjB,aAAa,EAEb,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAalE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,cAAc,qBAAqB,CAAC;AAEpC,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEvD;AAED,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAEjE;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAEpF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAE/D;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAExE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAElF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAE9E;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAE1F;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,aAAa,EACpB,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI,CAMN;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,IAAI,WAAW,GAAG,IAAI,CAE7C;AAQD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7D,QAAQ,EAAE,CAAC,GACV,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CA0BlC;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAUxD;AAgDD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,SAAS,GAAG,iBAAiB,EAAE,CAwFjE"}

package/dist/panel/index.js

@@ -182,18 +182,19 @@ export function panelCommands(app) {
      * to draw it.
      */
     const targetUri = (args, id) => args.uri ?? (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',
                     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)))
@@ -210,8 +211,8 @@ export function panelCommands(app) {
         },
         {
             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, ctx) => {
@@ -230,8 +231,8 @@ export function panelCommands(app) {
         },
         {
             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, ctx) => {

package/dist/panel/resource-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resource-panel.d.ts","sourceRoot":"","sources":["../../src/panel/resource-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,QAAQ,EACR,mBAAmB,EAEnB,QAAQ,EACR,0BAA0B,EAC3B,MAAM,cAAc,CAAC;AAetB,sCAAsC;AACtC,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAEzC,sCAAsC;AACtC,eAAO,MAAM,UAAU,EAAmB,WAAW,CAAC;AAEtD,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEjD;AAED,mDAAmD;AACnD,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,WAAW,CAElE;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEpD;AAED,6EAA6E;AAC7E,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEzD;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEtD;AAED,MAAM,WAAW,SAAS;IACxB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAE/C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAE1D;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,0BAA0B,EAAE,GACtC,0BAA0B,GAAG,IAAI,CAEnC;AAID,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAID,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,oEAsJxB,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,mBAAmB,EAOjD,CAAC"}
+{"version":3,"file":"resource-panel.d.ts","sourceRoot":"","sources":["../../src/panel/resource-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,QAAQ,EACR,mBAAmB,EAEnB,QAAQ,EACR,0BAA0B,EAC3B,MAAM,cAAc,CAAC;AAgBtB,sCAAsC;AACtC,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAEzC,sCAAsC;AACtC,eAAO,MAAM,UAAU,EAAmB,WAAW,CAAC;AAEtD,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEjD;AAED,mDAAmD;AACnD,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,WAAW,CAElE;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEpD;AAED,6EAA6E;AAC7E,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEzD;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAEtD;AAED,MAAM,WAAW,SAAS;IACxB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAE/C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAE1D;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,0BAA0B,EAAE,GACtC,0BAA0B,GAAG,IAAI,CAEnC;AAID,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAID,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,oEA0JxB,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,mBAAmB,EAOjD,CAAC"}

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.7.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.7.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/data/index.ts

@@ -6,6 +6,7 @@ import {
   h,
   stringWidth,
   useFocus,
+  useI18n,
   useInput,
   useMeasure,
   useState,
@@ -79,9 +80,10 @@ export interface TableProps<T extends object = Record<string, unknown>> extends
  */
 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;
 

package/src/data/list.ts

@@ -4,6 +4,7 @@ import {
   defineComponent,
   h,
   useFocus,
+  useI18n,
   useInput,
   useMeasure,
   useState,
@@ -98,9 +99,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;
 

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,11 @@ 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.t(
+          'textui.markdown.moreLines',
+          { glyph: theme.glyphs.ellipsis, count: hidden },
+          '{glyph} {count} more lines',
+        ), 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,6 @@ 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.t('textui.pagination.total', { total }, '{total} items'), fg: 'muted' }) : null,
   );
 });

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,
   );
 });

package/src/form/danger-zone.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';
 import { Button } from '../control/index.js';
 
 export interface DangerZoneProps extends BoxProps {
@@ -13,8 +13,9 @@ export interface DangerZoneProps extends BoxProps {
 
 export const DangerZone = defineComponent<DangerZoneProps>('DangerZone', (props) => {
   const theme = useTheme();
+  const i18n = useI18n();
   const {
-    title = 'Danger zone', description, actionLabel, onAction, confirmText, ...rest
+    title = i18n.t('textui.dangerZone.title', undefined, 'Danger zone'), description, actionLabel, onAction, confirmText, ...rest
   } = props;
 
   return h('box', {
@@ -26,7 +27,10 @@ export const DangerZone = defineComponent<DangerZoneProps>('DangerZone', (props)
   },
     description ? h('text', { content: description, fg: 'muted', wrap: 'word' }) : null,
     confirmText
-      ? h('text', { content: `Type "${confirmText}" to confirm.`, fg: 'subtle' })
+      ? h('text', {
+        content: i18n.t('textui.dangerZone.confirm', { text: confirmText }, 'Type "{text}" to confirm.'),
+        fg: 'subtle',
+      })
       : null,
     h('box', { direction: 'row', justify: 'end' },
       h(Button, { label: actionLabel, tone: 'danger', variant: 'outline', onPress: onAction })),

package/src/form/form-actions.ts

@@ -1,5 +1,5 @@
 import type { BoxProps, SemanticVariant } from '@textui/core';
-import { defineComponent, h, useTheme } from '@textui/core';
+import { defineComponent, h, useI18n, useTheme } from '@textui/core';
 import { Button } from '../control/index.js';
 import { useFormContext } from './shared.js';
 
@@ -14,9 +14,12 @@ export interface FormActionsProps extends BoxProps {
 
 export const FormActions = defineComponent<FormActionsProps>('FormActions', (props) => {
   const theme = useTheme();
+  const i18n = useI18n();
   const form = useFormContext();
   const {
-    submitLabel = 'Submit', cancelLabel = 'Cancel', onCancel,
+    submitLabel = i18n.t('textui.formActions.submit', undefined, 'Submit'),
+    cancelLabel = i18n.t('textui.formActions.cancel', undefined, 'Cancel'),
+    onCancel,
     tone = 'primary', requireDirty = false, ...rest
   } = props;
 

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';
 
@@ -63,6 +63,7 @@ export interface MenuProps extends BoxProps {
 
 export const Menu = defineComponent<MenuProps>('Menu', (props) => {
   const theme = useTheme();
+  const i18n = useI18n();
   const {
     items, onSelect, visibleRows, activeId, autoFocus, interactive = true,
     descriptions = 'inline', ...rest
@@ -188,7 +189,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,
   );
 });