@textui/widgets 0.5.0 → 0.7.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.5.0",
+  "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.5.0"
+    "@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,
   );
 });