@hanzo/build 0.2.80 → 0.2.81

package/lib/panel.js

@@ -23,6 +23,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * panel is the whole window instead (`sheet`).
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { ArrowLeft, ArrowRight, ChevronRight, Columns2, ExternalLink, Globe, Maximize2, Minimize2, Minus, MoreHorizontal, PanelLeftOpen, Pin, Plus, RotateCcw, RotateCw, SquarePlus, X } from '@hanzogui/lucide-icons-2';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@hanzo/ui';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -36,7 +38,9 @@ const KEYS = MAC ? '⌘⇧B' : 'Ctrl+Shift+B';
 /** Every key that shows and hides the tabs (tabs.ts `useKey`). */
 const SHORTCUTS = 'Control+Shift+B Meta+Shift+B Control+Period Meta+Period';
 /** A tab's title where it has none of its own. */
-const BLANK = 'New tab';
+const BLANK = phrase('New tab');
+/** On an icon that points along the line (Back, Forward): it turns in a right-to-left page. */
+const MIRROR = { 'data-i18n-mirror': '' };
 /** The row heights, px: the strip (the conversation header's row), and a page's bar. */
 const STRIP = 56;
 const BAR = 48;
@@ -57,12 +61,14 @@ const quiet = (on = false, disabled = false) => ({
 /**
  * The header's control for the tabs, while they are hidden: an icon among the
  * header's icons. Open, the strip's own toggle stands at the panel's end and
- * this one is not drawn, so the page carries one toggle at a time.
+ * this one is not drawn, so the page carries one toggle at a time. Its words
+ * are the reader's language; the key chord is an argument, as this platform writes it.
  */
 export function PanelToggle({ open, onToggle }) {
+    const { t } = useI18n();
     if (open)
         return null;
-    return (_jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": "Show tabs", "aria-expanded": false, "aria-keyshortcuts": SHORTCUTS, ...{ title: `Show tabs (${KEYS})` }, onPress: onToggle, width: 32, height: 32, ...quiet(), children: _jsx(SquarePlus, { size: 16 }) }));
+    return (_jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": t('Show tabs'), "aria-expanded": false, "aria-keyshortcuts": SHORTCUTS, ...{ title: t('Show tabs ({keys})', { keys: KEYS }) }, onPress: onToggle, width: 32, height: 32, ...quiet(), children: _jsx(SquarePlus, { size: 16 }) }));
 }
 /** Our own hosts: a page of theirs answers a frame on any of our pages. */
 const OURS = ['hanzo.ai', 'hanzo.app', 'hanzo.bot'];
@@ -123,11 +129,13 @@ function Mark({ icon, title }) {
 }
 /** An empty page: the places the surface suggests, as cards in a row that scrolls sideways. */
 function Suggested({ suggested, onGo }) {
-    return (_jsxs(YStack, { "data-slot": "side-suggested", px: "$4", pt: "$4", gap: "$3", children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: "Suggested" }), suggested.length ? (_jsx(XStack, { role: "list", "aria-label": "Suggested", gap: "$2", overflowX: "auto", overflowY: "hidden", pb: "$2", children: suggested.map((s) => (_jsxs(YStack, { role: "listitem", render: "button", "aria-label": s.title, onPress: () => onGo(s.url), width: 120, shrink: 0, items: "center", gap: "$2", py: "$2.5", px: "$1.5", rounded: 12, cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(Mark, { icon: s.icon, title: s.title }), _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, maxW: "100%", children: s.title })] }, s.url))) })) : (_jsx(SizableText, { fontSize: 13, color: "$soft", children: "No suggestions." }))] }));
+    const { t } = useI18n();
+    return (_jsxs(YStack, { "data-slot": "side-suggested", px: "$4", pt: "$4", gap: "$3", children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: t('Suggested') }), suggested.length ? (_jsx(XStack, { role: "list", "aria-label": t('Suggested'), gap: "$2", overflowX: "auto", overflowY: "hidden", pb: "$2", children: suggested.map((s) => (_jsxs(YStack, { role: "listitem", render: "button", "aria-label": s.title, onPress: () => onGo(s.url), width: 120, shrink: 0, items: "center", gap: "$2", py: "$2.5", px: "$1.5", rounded: 12, cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(Mark, { icon: s.icon, title: s.title }), _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, maxW: "100%", children: s.title })] }, s.url))) })) : (_jsx(SizableText, { fontSize: 13, color: "$soft", children: t('No suggestions.') }))] }));
 }
 /** A remote address a browser page may not frame: what it is, and the one way to open it. */
 function Elsewhere({ tab }) {
-    return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", p: "$5", "data-slot": "side-elsewhere", children: [_jsx(Globe, { size: 20, opacity: 0.6 }), _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, maxW: "100%", children: tab.title || tab.url }), _jsxs(XStack, { render: "button", role: "button", onPress: () => popOut(tab), items: "center", gap: "$1.5", px: "$3", height: 32, rounded: 999, borderWidth: 1, borderColor: "$borderColor", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(ExternalLink, { size: 13 }), _jsx(SizableText, { fontSize: 13, color: "$ink", children: "Open in a new window" })] })] }));
+    const { t } = useI18n();
+    return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", p: "$5", "data-slot": "side-elsewhere", children: [_jsx(Globe, { size: 20, opacity: 0.6 }), _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, maxW: "100%", children: tab.title || tab.url }), _jsxs(XStack, { render: "button", role: "button", onPress: () => popOut(tab), items: "center", gap: "$1.5", px: "$3", height: 32, rounded: 999, borderWidth: 1, borderColor: "$borderColor", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(ExternalLink, { size: 13 }), _jsx(SizableText, { fontSize: 13, color: "$ink", children: t('Open in a new window') })] })] }));
 }
 /** A row of the page's menu, px: a browser's menu is denser than a form's. */
 const ROW = 29;
@@ -145,17 +153,19 @@ function Row({ label, onSelect, disabled, end }) {
 }
 /** The zoom row: the level between − and +, and the way back to 100. Plain buttons, so a press keeps the menu open. */
 function Zoom({ level, onLevel, disabled }) {
+    const { t } = useI18n();
     const step = (way) => () => onLevel(zoomed(level, way));
     const box = (label, onPress, child) => (_jsx(XStack, { render: "button", role: "button", "aria-label": label, "aria-disabled": disabled || undefined, onPress: disabled ? undefined : onPress, width: 24, height: 24, ...quiet(false, disabled), rounded: 6, children: child }));
-    return (_jsxs(XStack, { "data-slot": "page-zoom", role: "group", "aria-label": "Zoom", items: "center", gap: "$2", px: 8, height: 38, opacity: disabled ? 0.5 : 1, children: [_jsx(SizableText, { fontSize: 13, color: "$ink", flex: 1, children: "Zoom" }), _jsxs(XStack, { items: "center", gap: 2, borderWidth: 1, borderColor: "$borderColor", rounded: 8, px: 2, height: 28, children: [box('Zoom out', step(-1), _jsx(Minus, { size: 12 })), _jsx(SizableText, { fontSize: 12, color: "$ink", width: 40, text: "center", "aria-live": "polite", children: `${level}%` }), box('Zoom in', step(1), _jsx(Plus, { size: 12 }))] }), box('Reset zoom', () => onLevel(100), _jsx(RotateCcw, { size: 13 }))] }));
+    return (_jsxs(XStack, { "data-slot": "page-zoom", role: "group", "aria-label": t('Zoom'), items: "center", gap: "$2", px: 8, height: 38, opacity: disabled ? 0.5 : 1, children: [_jsx(SizableText, { fontSize: 13, color: "$ink", flex: 1, children: t('Zoom') }), _jsxs(XStack, { items: "center", gap: 2, borderWidth: 1, borderColor: "$borderColor", rounded: 8, px: 2, height: 28, children: [box(t('Zoom out'), step(-1), _jsx(Minus, { size: 12 })), _jsx(SizableText, { fontSize: 12, color: "$ink", width: 40, text: "center", "aria-live": "polite", children: `${level}%` }), box(t('Zoom in'), step(1), _jsx(Plus, { size: 12 }))] }), box(t('Reset zoom'), () => onLevel(100), _jsx(RotateCcw, { size: 13 }))] }));
 }
 /**
  * Skills, a submenu. Its panel is mounted only while open: a closed one stays
  * laid out over the menu and takes its presses.
  */
 function Skills({ skills, here }) {
+    const { t } = useI18n();
     const [open, setOpen] = useState(false);
-    return (_jsxs(DropdownMenuSub, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuSubTrigger, { disabled: !here, minH: ROW, py: 0, children: _jsx(SizableText, { fontSize: 13, color: "$ink", flex: 1, children: "Skills" }) }), open ? (_jsx(DropdownMenuSubContent, { minW: 200, children: skills.map((k) => (_jsx(Row, { label: k.name, onSelect: () => here && k.run(here) }, k.id))) })) : null] }));
+    return (_jsxs(DropdownMenuSub, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuSubTrigger, { disabled: !here, minH: ROW, py: 0, children: _jsx(SizableText, { fontSize: 13, color: "$ink", flex: 1, children: t('Skills') }) }), open ? (_jsx(DropdownMenuSubContent, { minW: 200, children: skills.map((k) => (_jsx(Row, { label: k.name, onSelect: () => here && k.run(here) }, k.id))) })) : null] }));
 }
 /**
  * The page's menu, in a browser's order: what we add first (ask about it, open
@@ -167,6 +177,7 @@ function Skills({ skills, here }) {
  * an empty tab.
  */
 function Actions({ tab, here, frame, framed, same, level, onLevel, acts, browser, onPin, }) {
+    const { t } = useI18n();
     const shown = here ? { id: tab.id, ...here } : null;
     const none = !shown;
     const pick = () => {
@@ -195,29 +206,29 @@ function Actions({ tab, here, frame, framed, same, level, onLevel, acts, browser
     const print = browser?.print ?? (same ? () => frame.current?.contentWindow?.print() : undefined);
     const zoom = Boolean(browser?.zoom) || framed;
     const ours = [
-        acts.onAsk ? _jsx(Row, { label: "Ask about this page", disabled: none, onSelect: () => void ask() }, "ask") : null,
-        acts.onDev && shown && hosted(shown.url) ? _jsx(Row, { label: "Open in Dev", onSelect: () => acts.onDev?.({ url: shown.url, title: shown.title }) }, "dev") : null,
+        acts.onAsk ? _jsx(Row, { label: t('Ask about this page'), disabled: none, onSelect: () => void ask() }, "ask") : null,
+        acts.onDev && shown && hosted(shown.url) ? _jsx(Row, { label: t('Open in Dev'), onSelect: () => acts.onDev?.({ url: shown.url, title: shown.title }) }, "dev") : null,
         acts.skills?.length ? _jsx(Skills, { skills: acts.skills, here: here }, "skills") : null,
-        _jsx(Row, { label: "Open in a new window", disabled: none, onSelect: () => popOut(tab) }, "out"),
-        _jsx(Row, { label: "Copy link", disabled: none || !tab.url, onSelect: () => tab.url && void navigator.clipboard?.writeText(tab.url) }, "copy"),
-        onPin ? _jsx(Row, { label: tab.pinned ? 'Unpin tab' : 'Pin tab', onSelect: () => onPin(!tab.pinned) }, "pin") : null,
+        _jsx(Row, { label: t('Open in a new window'), disabled: none, onSelect: () => popOut(tab) }, "out"),
+        _jsx(Row, { label: t('Copy link'), disabled: none || !tab.url, onSelect: () => tab.url && void navigator.clipboard?.writeText(tab.url) }, "copy"),
+        onPin ? _jsx(Row, { label: tab.pinned ? t('Unpin tab') : t('Pin tab'), onSelect: () => onPin(!tab.pinned) }, "pin") : null,
     ].filter(Boolean);
     const page = [
-        browser?.find ? _jsx(Row, { label: "Find in page", disabled: none, onSelect: () => shown && browser.find?.(shown) }, "find") : null,
-        print ? _jsx(Row, { label: "Print", disabled: none, onSelect: () => shown && print(shown) }, "print") : null,
+        browser?.find ? _jsx(Row, { label: t('Find in page'), disabled: none, onSelect: () => shown && browser.find?.(shown) }, "find") : null,
+        print ? _jsx(Row, { label: t('Print'), disabled: none, onSelect: () => shown && print(shown) }, "print") : null,
         zoom ? _jsx(Zoom, { level: level, onLevel: onLevel, disabled: none }, "zoom") : null,
-        browser?.devices ? _jsx(Row, { label: "Show device toolbar", disabled: none, onSelect: () => shown && browser.devices?.(shown) }, "devices") : null,
-        browser?.capture && acts.onCapture ? _jsx(Row, { label: "Take a screenshot", disabled: none, onSelect: () => void capture() }, "capture") : null,
+        browser?.devices ? _jsx(Row, { label: t('Show device toolbar'), disabled: none, onSelect: () => shown && browser.devices?.(shown) }, "devices") : null,
+        browser?.capture && acts.onCapture ? _jsx(Row, { label: t('Take a screenshot'), disabled: none, onSelect: () => void capture() }, "capture") : null,
     ].filter(Boolean);
     const own = [
-        browser?.passwords ? _jsx(Row, { label: "Passwords and autofill", onSelect: browser.passwords, end: _jsx(ChevronRight, { size: 14, opacity: 0.6 }) }, "passwords") : null,
-        browser?.downloads ? _jsx(Row, { label: "Downloads", onSelect: browser.downloads }, "downloads") : null,
-        browser?.history ? _jsx(Row, { label: "History", onSelect: browser.history }, "history") : null,
-        browser?.clear ? _jsx(Row, { label: "Clear browsing data", onSelect: browser.clear }, "clear") : null,
+        browser?.passwords ? _jsx(Row, { label: t('Passwords and autofill'), onSelect: browser.passwords, end: _jsx(ChevronRight, { size: 14, opacity: 0.6 }) }, "passwords") : null,
+        browser?.downloads ? _jsx(Row, { label: t('Downloads'), onSelect: browser.downloads }, "downloads") : null,
+        browser?.history ? _jsx(Row, { label: t('History'), onSelect: browser.history }, "history") : null,
+        browser?.clear ? _jsx(Row, { label: t('Clear browsing data'), onSelect: browser.clear }, "clear") : null,
     ].filter(Boolean);
-    const settings = browser?.settings ? [_jsx(Row, { label: "Browser settings", onSelect: browser.settings }, "settings")] : [];
+    const settings = browser?.settings ? [_jsx(Row, { label: t('Browser settings'), onSelect: browser.settings }, "settings")] : [];
     const groups = [ours, page, own, settings].filter((g) => g.length);
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", role: "button", "aria-label": "Page actions", width: PILL, height: PILL, ...quiet(), rounded: 999, bg: "$edge", children: _jsx(MoreHorizontal, { size: 16 }) }) }), _jsx(DropdownMenuContent, { align: "end", minW: 240, "data-slot": "page-menu", children: groups.flatMap((g, i) => (i ? [_jsx(DropdownMenuSeparator, {}, `line-${i}`), ...g] : g)) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", role: "button", "aria-label": t('Page actions'), width: PILL, height: PILL, ...quiet(), rounded: 999, bg: "$edge", children: _jsx(MoreHorizontal, { size: 16 }) }) }), _jsx(DropdownMenuContent, { align: "end", minW: 240, "data-slot": "page-menu", children: groups.flatMap((g, i) => (i ? [_jsx(DropdownMenuSeparator, {}, `line-${i}`), ...g] : g)) })] }));
 }
 /**
  * A page tab: its bar, then an address, bytes rendered as their type, or the
@@ -228,6 +239,7 @@ function Actions({ tab, here, frame, framed, same, level, onLevel, acts, browser
  * remote page takes its own origin, and withholding same-origin breaks it.
  */
 export function Page({ tab, onGo, onBack, onForward, onTitle, onPin, suggested = [], ...acts }) {
+    const { t } = useI18n();
     const Browse = useBrowse();
     const browser = useBrowser();
     const frame = useRef(null);
@@ -272,9 +284,9 @@ export function Page({ tab, onGo, onBack, onForward, onTitle, onPin, suggested =
     };
     // A frame scaled from its corner, its box grown to fill the panel at the scale.
     const scale = native || level === 100 ? null : { width: `${10000 / level}%`, height: `${10000 / level}%`, transform: `scale(${level / 100})`, transformOrigin: '0 0' };
-    return (_jsxs(YStack, { flex: 1, minH: 0, "data-slot": "side-page", children: [_jsxs(XStack, { "data-slot": "side-bar", height: BAR, px: "$2", gap: "$2", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsxs(XStack, { items: "center", height: PILL, px: 4, gap: 2, rounded: 999, bg: "$edge", shrink: 0, children: [_jsx(XStack, { render: "button", role: "button", "aria-label": "Back", "aria-disabled": !back || undefined, onPress: back ? onBack : undefined, width: 28, height: 28, ...quiet(false, !back), rounded: 999, children: _jsx(ArrowLeft, { size: 15 }) }), _jsx(XStack, { render: "button", role: "button", "aria-label": "Forward", "aria-disabled": !ahead || undefined, onPress: ahead ? onForward : undefined, width: 28, height: 28, ...quiet(false, !ahead), rounded: 999, children: _jsx(ArrowRight, { size: 15 }) }), _jsx(XStack, { render: "button", role: "button", "aria-label": "Reload this tab", onPress: () => again((n) => n + 1), width: 28, height: 28, ...quiet(), rounded: 999, children: _jsx(RotateCw, { size: 14 }) })] }), _jsx(XStack, { flex: 1, minW: 0, items: "center", height: PILL, px: "$3.5", rounded: 999, bg: "$edge", borderWidth: 1, 
+    return (_jsxs(YStack, { flex: 1, minH: 0, "data-slot": "side-page", children: [_jsxs(XStack, { "data-slot": "side-bar", height: BAR, px: "$2", gap: "$2", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsxs(XStack, { items: "center", height: PILL, px: 4, gap: 2, rounded: 999, bg: "$edge", shrink: 0, children: [_jsx(XStack, { render: "button", role: "button", "aria-label": t('Back'), "aria-disabled": !back || undefined, onPress: back ? onBack : undefined, width: 28, height: 28, ...quiet(false, !back), rounded: 999, children: _jsx(ArrowLeft, { size: 15, ...MIRROR }) }), _jsx(XStack, { render: "button", role: "button", "aria-label": t('Forward'), "aria-disabled": !ahead || undefined, onPress: ahead ? onForward : undefined, width: 28, height: 28, ...quiet(false, !ahead), rounded: 999, children: _jsx(ArrowRight, { size: 15, ...MIRROR }) }), _jsx(XStack, { render: "button", role: "button", "aria-label": t('Reload this tab'), onPress: () => again((n) => n + 1), width: 28, height: 28, ...quiet(), rounded: 999, children: _jsx(RotateCw, { size: 14 }) })] }), _jsx(XStack, { flex: 1, minW: 0, items: "center", height: PILL, px: "$3.5", rounded: 999, bg: "$edge", borderWidth: 1, 
                         // Focused, the address is the bar's one ringed thing, as a browser's is.
-                        borderColor: typing ? '$outlineColor' : 'transparent', "data-slot": "side-address", children: _jsx("input", { value: own ? tab.title : typed, readOnly: own, placeholder: "Search or enter a URL", "aria-label": "Address", spellCheck: false, autoFocus: !own && !tab.url, onFocus: (e) => {
+                        borderColor: typing ? '$outlineColor' : 'transparent', "data-slot": "side-address", children: _jsx("input", { value: own ? tab.title : typed, readOnly: own, placeholder: t('Search or enter a URL'), "aria-label": t('Address'), spellCheck: false, autoFocus: !own && !tab.url, onFocus: (e) => {
                                 setTyping(true);
                                 e.currentTarget.select();
                             }, onBlur: () => setTyping(false), onChange: (e) => setTyped(e.target.value), onKeyDown: (e) => {
@@ -290,9 +302,9 @@ export function Page({ tab, onGo, onBack, onForward, onTitle, onPin, suggested =
                                 color: 'var(--foreground)',
                                 font: 'inherit',
                                 fontSize: 14,
-                                // The resting bar reads centred, as a browser's new tab does; typed in, it reads from the left.
-                                textAlign: typing || typed ? 'left' : 'center',
-                            } }, tab.id) }), _jsx(Actions, { tab: tab, here: here, frame: frame, framed: framed, same: same, level: level, onLevel: zoomTo, acts: acts, browser: browser, onPin: onPin })] }), !src ? (_jsx(Suggested, { suggested: suggested, onGo: onGo })) : native && Browse ? (_jsx(YStack, { flex: 1, minH: 0, children: _jsx(Browse, { url: src, title: tab.title, onGo: onGo, onTitle: onTitle }) }, round)) : elsewhere ? (_jsx(Elsewhere, { tab: tab })) : picture && !own ? (_jsx(YStack, { flex: 1, minH: 0, items: "center", justify: "center", p: "$3", overflowY: "auto", overflowX: "hidden", children: _jsx("img", { src: src, alt: tab.title, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', ...(scale ? { transform: scale.transform } : null) } }, round) })) : shows ? (_jsx(YStack, { flex: 1, minH: 0, overflow: "hidden", position: "relative", children: _jsx("iframe", { ref: frame, src: src, title: tab.title, sandbox: local ? 'allow-scripts allow-popups allow-forms' : 'allow-same-origin allow-scripts allow-popups allow-forms allow-modals', style: { position: 'absolute', top: 0, left: 0, border: 0, width: '100%', height: '100%', display: 'block', background: 'var(--background)', ...scale } }, round) })) : (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${(ext || type || 'This').toUpperCase()} previews aren’t supported yet.` }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Open it in a new window to view it." })] }))] }));
+                                // The resting bar reads centred, as a browser's new tab does; typed in, it reads from the line's start.
+                                textAlign: typing || typed ? 'start' : 'center',
+                            } }, tab.id) }), _jsx(Actions, { tab: tab, here: here, frame: frame, framed: framed, same: same, level: level, onLevel: zoomTo, acts: acts, browser: browser, onPin: onPin })] }), !src ? (_jsx(Suggested, { suggested: suggested, onGo: onGo })) : native && Browse ? (_jsx(YStack, { flex: 1, minH: 0, children: _jsx(Browse, { url: src, title: tab.title, onGo: onGo, onTitle: onTitle }) }, round)) : elsewhere ? (_jsx(Elsewhere, { tab: tab })) : picture && !own ? (_jsx(YStack, { flex: 1, minH: 0, items: "center", justify: "center", p: "$3", overflowY: "auto", overflowX: "hidden", children: _jsx("img", { src: src, alt: tab.title, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', ...(scale ? { transform: scale.transform } : null) } }, round) })) : shows ? (_jsx(YStack, { flex: 1, minH: 0, overflow: "hidden", position: "relative", children: _jsx("iframe", { ref: frame, src: src, title: tab.title, sandbox: local ? 'allow-scripts allow-popups allow-forms' : 'allow-same-origin allow-scripts allow-popups allow-forms allow-modals', style: { position: 'absolute', top: 0, left: 0, border: 0, width: '100%', height: '100%', display: 'block', background: 'var(--background)', ...scale } }, round) })) : (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: t('{type} previews aren’t supported yet.', { type: (ext || type || 'This').toUpperCase() }) }), _jsx(SizableText, { size: "$2", color: "$soft", children: t('Open it in a new window to view it.') })] }))] }));
 }
 const DRAG = 'text/x-hanzo-tab';
 /**
@@ -301,10 +313,12 @@ const DRAG = 'text/x-hanzo-tab';
  * lets it go, and closes it, whatever kind it is.
  */
 function Leaf({ tab, on, side, index, label, icon }) {
-    return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsx(Strip, { tab: tab, on: on, side: side, index: index, label: label, icon: icon }) }), _jsxs(ContextMenuContent, { minW: 180, "aria-label": `${label} tab`, children: [_jsx(ContextMenuItem, { onSelect: () => (tab.pinned ? side.unpin(tab.id) : side.pin(tab.id)), children: tab.pinned ? 'Unpin tab' : 'Pin tab' }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { onSelect: () => side.shut(tab.id), children: "Close tab" })] })] }));
+    const { t } = useI18n();
+    return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsx(Strip, { tab: tab, on: on, side: side, index: index, label: label, icon: icon }) }), _jsxs(ContextMenuContent, { minW: 180, "aria-label": t('{tab} tab', { tab: label }), children: [_jsx(ContextMenuItem, { onSelect: () => (tab.pinned ? side.unpin(tab.id) : side.pin(tab.id)), children: tab.pinned ? t('Unpin tab') : t('Pin tab') }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { onSelect: () => side.shut(tab.id), children: t('Close tab') })] })] }));
 }
 /** The tab itself, as the strip draws it. */
 function Strip({ tab, on, side, index, label, icon, ...rest }) {
+    const { t } = useI18n();
     return (_jsxs(XStack, { ...rest, "data-slot": "side-tab", "data-tab": tab.id, items: "center", gap: "$1", pl: "$2.5", pr: "$1", height: 30, 
         // As wide as a title wants up to a browser tab's width, sharing the strip
         // as a browser's tabs do when there are many.
@@ -353,12 +367,13 @@ function Strip({ tab, on, side, index, label, icon, ...rest }) {
                         e.preventDefault?.();
                         side.shut(tab.id);
                     }
-                }, flex: 1, minW: 0, items: "center", gap: "$2", cursor: "pointer", children: [icon ? (_jsx(XStack, { "aria-hidden": true, shrink: 0, opacity: on ? 1 : 0.7, children: icon })) : null, _jsx(SizableText, { fontSize: 13, color: on ? '$ink' : '$soft', numberOfLines: 1, children: label })] }), tab.pinned ? (_jsx(XStack, { render: "button", role: "button", "aria-label": `Unpin ${label}`, tabIndex: -1, onPress: () => side.unpin(tab.id), width: 22, height: 22, items: "center", justify: "center", rounded: 6, cursor: "pointer", opacity: on ? 0.8 : 0.55, hoverStyle: { bg: '$hover', opacity: 1 }, children: _jsx(Pin, { size: 12 }) })) : (_jsx(XStack, { render: "button", role: "button", "aria-label": `Close ${label}`, tabIndex: -1, onPress: () => side.shut(tab.id), width: 22, height: 22, items: "center", justify: "center", rounded: 6, cursor: "pointer", opacity: on ? 0.8 : 0.45, hoverStyle: { bg: '$hover', opacity: 1 }, 
+                }, flex: 1, minW: 0, items: "center", gap: "$2", cursor: "pointer", children: [icon ? (_jsx(XStack, { "aria-hidden": true, shrink: 0, opacity: on ? 1 : 0.7, children: icon })) : null, _jsx(SizableText, { fontSize: 13, color: on ? '$ink' : '$soft', numberOfLines: 1, children: label })] }), tab.pinned ? (_jsx(XStack, { render: "button", role: "button", "aria-label": t('Unpin {tab}', { tab: label }), tabIndex: -1, onPress: () => side.unpin(tab.id), width: 22, height: 22, items: "center", justify: "center", rounded: 6, cursor: "pointer", opacity: on ? 0.8 : 0.55, hoverStyle: { bg: '$hover', opacity: 1 }, children: _jsx(Pin, { size: 12 }) })) : (_jsx(XStack, { render: "button", role: "button", "aria-label": t('Close {tab}', { tab: label }), tabIndex: -1, onPress: () => side.shut(tab.id), width: 22, height: 22, items: "center", justify: "center", rounded: 6, cursor: "pointer", opacity: on ? 0.8 : 0.45, hoverStyle: { bg: '$hover', opacity: 1 }, 
                 // The chosen tab's cross: the others keep their room for their titles when the strip is shared.
                 display: on ? 'flex' : 'none', children: _jsx(X, { size: 12 }) }))] }));
 }
 /** The panel: the strip, and the chosen tab. */
-export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = 'Side panel', suggested, ...acts }) {
+export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label, suggested, ...acts }) {
+    const { t: say } = useI18n();
     const tab = side.tabs.find((t) => t.id === side.at) ?? null;
     // The column it stands in; a phone's sheet is the whole window already.
     const stands = useSide();
@@ -371,17 +386,18 @@ export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = '
     const kind = tab && tab.kind !== PAGE ? kinds.find((k) => k.id === tab.kind) : undefined;
     const bleed = !tab || tab.kind === PAGE || Boolean(kind?.bleed);
     const closed = kinds.filter((k) => !side.tabs.some((t) => t.kind === k.id));
-    const title = (t) => (t.kind === PAGE ? t.title || BLANK : (kinds.find((k) => k.id === t.kind)?.label ?? t.title));
+    // A page's title is the page's own; an empty one is a new tab, in the reader's language.
+    const title = (t) => (t.kind === PAGE ? (t.title && t.title !== BLANK ? t.title : say(BLANK)) : (kinds.find((k) => k.id === t.kind)?.label ?? t.title));
     const mark = (t) => (t.kind === PAGE ? _jsx(Globe, { size: 14 }) : (kinds.find((k) => k.id === t.kind)?.icon ?? null));
     const blank = () => side.open({ kind: PAGE, title: BLANK, url: '' });
     const poppable = tab?.kind === PAGE && (tab.body !== undefined || Boolean(tab.url));
-    const plus = (_jsx(XStack, { render: "button", role: "button", "aria-label": "Open a tab", width: 28, height: 28, ...quiet(), onPress: closed.length ? undefined : blank, children: _jsx(Plus, { size: 16 }) }));
-    const body = (_jsxs(YStack, { role: "complementary", "aria-label": label, "data-slot": "side", flex: 1, minW: 0, minH: 0, overflow: "hidden", style: { borderRadius: 'inherit' }, children: [_jsxs(XStack, { "data-slot": "side-strip", height: STRIP, px: "$2", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [column?.hidden && !column.full ? (_jsxs(XStack, { render: "button", role: "button", "data-slot": "side-show", onPress: column.show, height: 32, px: "$2", gap: "$1.5", ...quiet(), children: [_jsx(PanelLeftOpen, { size: 16 }), _jsx(SizableText, { fontSize: 13, color: "$ink", children: `Show ${column.main}` })] })) : null, _jsx(XStack, { role: "tablist", "aria-label": "Tabs", shrink: 1, minW: 0, gap: "$1", items: "center", overflowX: "auto", overflowY: "hidden", "$platform-web": { scrollbarWidth: 'none' }, children: side.tabs.map((t, i) => (_jsx(Leaf, { tab: t, on: t.id === side.at, side: side, index: i, label: title(t), icon: mark(t) }, t.id))) }), closed.length ? (_jsx(DropdownMenu, { trigger: plus, items: [
+    const plus = (_jsx(XStack, { render: "button", role: "button", "aria-label": say('Open a tab'), width: 28, height: 28, ...quiet(), onPress: closed.length ? undefined : blank, children: _jsx(Plus, { size: 16 }) }));
+    const body = (_jsxs(YStack, { role: "complementary", "aria-label": label ?? say('Side panel'), "data-slot": "side", flex: 1, minW: 0, minH: 0, overflow: "hidden", rounded: "inherit", children: [_jsxs(XStack, { "data-slot": "side-strip", height: STRIP, px: "$2", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [column?.hidden && !column.full ? (_jsxs(XStack, { render: "button", role: "button", "data-slot": "side-show", onPress: column.show, height: 32, px: "$2", gap: "$1.5", ...quiet(), children: [_jsx(PanelLeftOpen, { size: 16 }), _jsx(SizableText, { fontSize: 13, color: "$ink", children: column.main === 'run' ? say('Show run') : column.main === 'chat' ? say('Show chat') : say('Show {main}', { main: column.main }) })] })) : null, _jsx(XStack, { role: "tablist", "aria-label": say('Tabs'), shrink: 1, minW: 0, gap: "$1", items: "center", overflowX: "auto", overflowY: "hidden", "$platform-web": { scrollbarWidth: 'none' }, children: side.tabs.map((t, i) => (_jsx(Leaf, { tab: t, on: t.id === side.at, side: side, index: i, label: title(t), icon: mark(t) }, t.id))) }), closed.length ? (_jsx(DropdownMenu, { trigger: plus, items: [
                             ...closed.map((k) => ({ key: k.id, label: k.label, onSelect: () => side.open({ kind: k.id, title: k.label }) })),
-                            { key: PAGE, label: 'Page', description: 'An address, framed here', onSelect: blank },
-                        ] })) : (plus), _jsx(XStack, { flex: 1 }), menu, _jsx(XStack, { render: "button", role: "button", "aria-label": "Open this tab in a new window", "aria-disabled": !poppable || undefined, onPress: poppable ? () => popOut(tab) : undefined, width: 28, height: 28, ...quiet(false, !poppable), children: _jsx(ExternalLink, { size: 14 }) }), column ? (_jsx(XStack, { render: "button", role: "button", "data-slot": "side-full", "aria-label": column.full ? 'Exit full screen' : 'Full screen', "aria-pressed": column.full, "aria-keyshortcuts": column.full ? 'Escape' : undefined, ...{ title: column.full ? 'Exit full screen (Esc)' : 'Full screen' }, onPress: () => column.fill(!column.full), width: 28, height: 28, ...quiet(column.full), children: column.full ? _jsx(Minimize2, { size: 14 }) : _jsx(Maximize2, { size: 14 }) })) : null, _jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": "Hide tabs", "aria-expanded": true, "aria-keyshortcuts": SHORTCUTS, ...{ title: `Hide tabs (${KEYS})` }, onPress: onHide, width: 32, height: 32, ...quiet(true), children: _jsx(Columns2, { size: 16 }) })] }), bar, _jsx(YStack, { id: "side-body", role: "tabpanel", "aria-labelledby": tab ? `side-tab-${tab.id}` : undefined, 
+                            { key: PAGE, label: say('Page'), description: say('An address, framed here'), onSelect: blank },
+                        ] })) : (plus), _jsx(XStack, { flex: 1 }), menu, _jsx(XStack, { render: "button", role: "button", "aria-label": say('Open this tab in a new window'), "aria-disabled": !poppable || undefined, onPress: poppable ? () => popOut(tab) : undefined, width: 28, height: 28, ...quiet(false, !poppable), children: _jsx(ExternalLink, { size: 14 }) }), column ? (_jsx(XStack, { render: "button", role: "button", "data-slot": "side-full", "aria-label": column.full ? say('Exit full screen') : say('Full screen'), "aria-pressed": column.full, "aria-keyshortcuts": column.full ? 'Escape' : undefined, ...{ title: column.full ? say('Exit full screen ({key})', { key: 'Esc' }) : say('Full screen') }, onPress: () => column.fill(!column.full), width: 28, height: 28, ...quiet(column.full), children: column.full ? _jsx(Minimize2, { size: 14 }) : _jsx(Maximize2, { size: 14 }) })) : null, _jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": say('Hide tabs'), "aria-expanded": true, "aria-keyshortcuts": SHORTCUTS, ...{ title: say('Hide tabs ({keys})', { keys: KEYS }) }, onPress: onHide, width: 32, height: 32, ...quiet(true), children: _jsx(Columns2, { size: 16 }) })] }), bar, _jsx(YStack, { id: "side-body", role: "tabpanel", "aria-labelledby": tab ? `side-tab-${tab.id}` : undefined, 
                 // What a tab lays over itself (a door's "Connecting…") stays inside it, under the strip.
-                position: "relative", flex: 1, minH: 0, overflowY: bleed ? 'hidden' : 'auto', overflowX: "hidden", px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: !tab ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$5", children: _jsx(SizableText, { fontSize: 13, color: "$soft", children: "No tabs open." }) })) : tab.kind === PAGE ? (_jsx(Page, { tab: tab, onGo: (url) => side.go(tab.id, url), onBack: () => side.back(tab.id), onForward: () => side.forward(tab.id), onTitle: (t) => side.rename(tab.id, t), onPin: (on) => (on ? side.pin(tab.id) : side.unpin(tab.id)), suggested: suggested, ...acts }, tab.id)) : kind ? (kind.render()) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "This tab is not offered here." })) })] }));
+                position: "relative", flex: 1, minH: 0, overflowY: bleed ? 'hidden' : 'auto', overflowX: "hidden", px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: !tab ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$5", children: _jsx(SizableText, { fontSize: 13, color: "$soft", children: say('No tabs open.') }) })) : tab.kind === PAGE ? (_jsx(Page, { tab: tab, onGo: (url) => side.go(tab.id, url), onBack: () => side.back(tab.id), onForward: () => side.forward(tab.id), onTitle: (t) => side.rename(tab.id, t), onPin: (on) => (on ? side.pin(tab.id) : side.unpin(tab.id)), suggested: suggested, ...acts }, tab.id)) : kind ? (kind.render()) : (_jsx(SizableText, { size: "$2", color: "$soft", children: say('This tab is not offered here.') })) })] }));
     if (!sheet || typeof document === 'undefined')
         return body;
     // A phone: the panel over the whole window, clear of the notch and the home

package/lib/plan.d.ts

@@ -1,20 +1,4 @@
-/**
- * A plan as a person reads it, and how much of it is used.
- *
- * NAMED BY FAMILY. A slug is the catalog's rung (`max-20x`); a person reads the
- * family — Free, Go, Pro, Max, Team, Agency, Enterprise — with the rung inside
- * it as a small tag (`20x`). A slug outside the families reads as words
- * (`growth-plus` is Growth Plus); one that is an id is never printed, and reads
- * as the tier it is served under.
- *
- * MEASURED IN SHARES. `GET /v1/ai/limits` (cloud apps/ai/limits_ops.go) answers
- * every window as a percent used, its state and when it starts over — the
- * session, the UTC day, and each class's billing period — never an amount.
- *
- * THREE KINDS OF ACCOUNT, three meters: on a PLAN its windows are the meter, on
- * FREE the free allowance left today is, and with CREDITS and no plan (pay as
- * you go) the balance is. A plan's meter never shows money.
- */
+import type { Say } from '@hanzo/i18n/react';
 export interface Label {
     /** The family: `Max`. */
     name: string;
@@ -63,9 +47,9 @@ export declare function when(iso: string, now?: number): string;
 /**
  * What a reader whose plan's included usage is used is told: the plan, which
  * models, and when they come back — `Your Max 20x plan’s included premium model
- * usage is used until 5:00 PM.`
+ * usage is used until 5:00 PM.` In the language of `t`.
  */
-export declare function spent(l: Label | null, classes: readonly string[], resets: string, now?: number): string;
+export declare function spent(l: Label | null, classes: readonly string[], resets: string, now?: number, t?: Say): string;
 /**
  * The ways past a spent allowance, in this order and two at most: keep going
  * on credits — or, with none the server would let pay, add some — then the
@@ -75,4 +59,4 @@ export declare function spent(l: Label | null, classes: readonly string[], reset
 export declare function ways<A extends {
     kind: string;
     label: string;
-}>(actions: readonly A[]): A[];
+}>(actions: readonly A[], t?: Say): A[];

package/lib/plan.js

@@ -14,10 +14,16 @@
  * THREE KINDS OF ACCOUNT, three meters: on a PLAN its windows are the meter, on
  * FREE the free allowance left today is, and with CREDITS and no plan (pay as
  * you go) the balance is. A plan's meter never shows money.
+ *
+ * WORDS in English: a family's name is a name, the rest is marked (`phrase`)
+ * or takes the caller's @hanzo/i18n `t`, so a surface says it in the reader's
+ * language.
  */
+import { phrase } from '@hanzo/i18n';
+import { english } from './say.js';
 /** The families, by the slug's first word. `dev` is the slug Pro is sold under. */
 const FAMILY = {
-    free: 'Free',
+    free: phrase('Free'),
     go: 'Go',
     dev: 'Pro',
     pro: 'Pro',
@@ -50,14 +56,14 @@ export function label(slug, tier) {
         return fallback();
     // A rung that is an id still IS a rung: the account is on a plan, so it reads as one.
     if (ID.test(raw))
-        return fallback() ?? { name: 'Paid plan', tag: '' };
+        return fallback() ?? { name: phrase('Paid plan'), tag: '' };
     const s = raw.replace(/[\s_]+/g, '-');
     const [head, ...rest] = s.split('-').filter(Boolean);
     const family = FAMILY[head];
     if (!family)
         return { name: s.split('-').filter(Boolean).map(word).join(' '), tag: '' };
     const tail = rest.join('-');
-    const tag = /^\d+x$/.test(tail) ? tail : /^(annual|yearly|year)$/.test(tail) ? 'Annual' : tail ? rest.map(word).join(' ') : '';
+    const tag = /^\d+x$/.test(tail) ? tail : /^(annual|yearly|year)$/.test(tail) ? phrase('Annual') : tail ? rest.map(word).join(' ') : '';
     return { name: family, tag };
 }
 /** A label as a sentence says it: `Max 20x`. */
@@ -109,16 +115,26 @@ export function when(iso, now = Date.now()) {
 }
 /** A class of model as a sentence names it. */
 const CLASS = { premium: 'premium', ours: 'Hanzo' };
+/** What was used, by the classes that used it, as one phrase each. */
+const USED = {
+    '': phrase('usage'),
+    premium: phrase('premium model usage'),
+    Hanzo: phrase('Hanzo model usage'),
+    'premium and Hanzo': phrase('premium and Hanzo model usage'),
+};
 /**
  * What a reader whose plan's included usage is used is told: the plan, which
  * models, and when they come back — `Your Max 20x plan’s included premium model
- * usage is used until 5:00 PM.`
+ * usage is used until 5:00 PM.` In the language of `t`.
  */
-export function spent(l, classes, resets, now = Date.now()) {
-    const names = classes.map((c) => CLASS[c]).filter(Boolean);
-    const what = names.length ? `${names.join(' and ')} model usage` : 'usage';
+export function spent(l, classes, resets, now = Date.now(), t = english) {
+    const names = classes.map((c) => CLASS[c]).filter(Boolean).join(' and ');
+    const what = USED[names] !== undefined ? t(USED[names]) : `${names} model usage`;
     const at = when(resets, now);
-    return `Your ${l ? `${said(l)} plan’s` : 'plan’s'} included ${what} is used${at ? ` until ${at}` : ''}.`;
+    if (!l)
+        return at ? t('Your plan’s included {what} is used until {time}.', { what, time: at }) : t('Your plan’s included {what} is used.', { what });
+    const plan = said({ name: t(l.name), tag: l.tag ? t(l.tag) : '' });
+    return at ? t('Your {plan} plan’s included {what} is used until {time}.', { plan, what, time: at }) : t('Your {plan} plan’s included {what} is used.', { plan, what });
 }
 /**
  * The ways past a spent allowance, in this order and two at most: keep going
@@ -126,8 +142,8 @@ export function spent(l, classes, resets, now = Date.now()) {
  * upgrade; and a switch to another model where the server offers one. Taken
  * from what the server sent, so nothing is offered that it would refuse.
  */
-export function ways(actions) {
+export function ways(actions, t = english) {
     const pick = (kind) => actions.find((a) => a.kind === kind);
     const topup = pick('topup');
-    return [pick('credits') ?? (topup ? { ...topup, label: 'Add credits' } : undefined), pick('upgrade'), pick('switch')].filter((a) => a !== undefined);
+    return [pick('credits') ?? (topup ? { ...topup, label: t('Add credits') } : undefined), pick('upgrade'), pick('switch')].filter((a) => a !== undefined);
 }

package/lib/plans.js

@@ -7,8 +7,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * price; the platform sells one paid plan at a time, so a move between paid
  * plans is the current one ending first. Going back to Free is ending the paid
  * plan at the close of the period already paid for.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a plan's name,
+ * description, features and price are the catalog's, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Check, ChevronLeft } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
 import { useState } from 'react';
@@ -25,11 +29,12 @@ function price(p, term) {
 }
 export function Plans() {
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
+    const { t } = useI18n();
     const signed = Boolean(host.person);
-    const list = useRead(() => plans(t), [], [t]);
-    const subs = useRead(signed ? () => subscriptions(t) : null, [], [t, signed]);
-    const cards = useRead(signed ? () => methods(t) : null, [], [t, signed]);
+    const list = useRead(() => plans(target), [], [target]);
+    const subs = useRead(signed ? () => subscriptions(target) : null, [], [target, signed]);
+    const cards = useRead(signed ? () => methods(target) : null, [], [target, signed]);
     const [term, setTerm] = useState('month');
     const [buying, setBuying] = useState(null);
     const [leaving, setLeaving] = useState(false);
@@ -37,7 +42,7 @@ export function Plans() {
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
     const on = current(subs.value);
-    const who = host.org ?? 'This organization';
+    const org = host.org;
     const card = chosen(cards.value);
     const yearly = list.value.some((p) => p.yearly > 0);
     const free = (p) => p.monthly === 0 && !p.sales;
@@ -63,50 +68,64 @@ export function Plans() {
     /** The one thing a card can do, or a line saying why it does nothing. */
     const move = (p) => {
         if (mine(p)) {
-            return (_jsx(Button, { size: "sm", variant: "outline", disabled: true, children: "Current plan" }));
+            return (_jsx(Button, { size: "sm", variant: "outline", disabled: true, children: t('Current plan') }));
         }
         if (p.sales)
-            return _jsx(Line, { children: "Priced with our team for your organization." });
+            return _jsx(Line, { children: t('Priced with our team for your organization.') });
         if (!signed)
-            return _jsx(Line, { children: "Sign in to choose a plan." });
+            return _jsx(Line, { children: t('Sign in to choose a plan.') });
         if (!host.admin)
-            return _jsx(Line, { children: "An org admin changes the plan." });
+            return _jsx(Line, { children: t('An org admin changes the plan.') });
         if (!settled)
             return null;
         if (free(p)) {
             // A free plan that is not the org's means a paid one is.
             const paid = on;
             if (paid.ending)
-                return _jsx(Line, { children: `You move to ${p.name} when ${paid.name} ends on ${day(paid.ends)}.` });
-            return (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setLeaving(true), children: `Switch to ${p.name}` }));
+                return _jsx(Line, { children: t('You move to {plan} when {current} ends on {date}.', { plan: p.name, current: paid.name, date: day(paid.ends) }) });
+            return (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setLeaving(true), children: t('Switch to {plan}', { plan: p.name }) }));
         }
         if (on && on.price > 0)
-            return _jsx(Line, { children: `One paid plan at a time: ${on.name} ends before ${p.name} begins.` });
+            return _jsx(Line, { children: t('One paid plan at a time: {current} ends before {plan} begins.', { current: on.name, plan: p.name }) });
         if (!card) {
-            return (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: "Add a card to upgrade" }));
+            return (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: t('Add a card to upgrade') }));
         }
-        return (_jsx(Button, { size: "sm", variant: p.popular ? 'primary' : 'outline', onPress: () => setBuying(p), children: `Upgrade to ${p.name}` }));
+        return (_jsx(Button, { size: "sm", variant: p.popular ? 'primary' : 'outline', onPress: () => setBuying(p), children: t('Upgrade to {plan}', { plan: p.name }) }));
     };
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", children: [_jsxs(YStack, { width: "100%", maxW: 1100, mx: "auto", px: "$5", py: "$5", gap: "$5", children: [_jsxs(XStack, { render: "button", "aria-label": "Back to billing", items: "center", gap: "$1", self: "flex-start", onPress: () => host.go(path({ kind: 'settings', section: 'billing' })), children: [_jsx(ChevronLeft, { size: 16 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Billing" })] }), _jsxs(XStack, { items: "flex-end", gap: "$4", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 240, gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$7", color: "$ink", children: "Plans that grow with you" }), _jsx(SizableText, { size: "$2", color: "$soft", children: !signed
-                                            ? 'Sign in to see the plan you are on.'
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", children: [_jsxs(YStack, { width: "100%", maxW: 1100, mx: "auto", px: "$5", py: "$5", gap: "$5", children: [_jsxs(XStack, { render: "button", "aria-label": t('Back to billing'), items: "center", gap: "$1", self: "flex-start", onPress: () => host.go(path({ kind: 'settings', section: 'billing' })), children: [_jsx(ChevronLeft, { size: 16, 'data-i18n-mirror': '' }), _jsx(SizableText, { size: "$2", color: "$soft", children: t('Billing') })] }), _jsxs(XStack, { items: "flex-end", gap: "$4", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 240, gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$7", color: "$ink", children: t('Plans that grow with you') }), _jsx(SizableText, { size: "$2", color: "$soft", children: !signed
+                                            ? t('Sign in to see the plan you are on.')
                                             : on
-                                                ? `${who} is on ${on.name}.`
-                                                : `${who} is on the free plan.` })] }), yearly ? (_jsx(XStack, { role: "radiogroup", "aria-label": "Billing period", p: "$1", gap: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: ['month', 'year'].map((k) => (_jsx(XStack, { render: "button", role: "radio", "aria-checked": term === k, "aria-label": k === 'month' ? 'Monthly' : 'Yearly', onPress: () => setTerm(k), px: "$3", py: "$1.5", rounded: "$10", bg: term === k ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$2", color: term === k ? '$ink' : '$soft', children: k === 'month' ? 'Monthly' : 'Yearly' }) }, k))) })) : null] }), list.error ? (_jsx(Line, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Line, { children: "Reading plans\u2026" })) : list.value.length === 0 ? (_jsx(Line, { children: "This brand sells no plans." })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$4", children: list.value.map((p) => {
+                                                ? org
+                                                    ? t('{org} is on {plan}.', { org, plan: on.name })
+                                                    : t('This organization is on {plan}.', { plan: on.name })
+                                                : org
+                                                    ? t('{org} is on the free plan.', { org })
+                                                    : t('This organization is on the free plan.') })] }), yearly ? (_jsx(XStack, { role: "radiogroup", "aria-label": t('Billing period'), p: "$1", gap: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: ['month', 'year'].map((k) => (_jsx(XStack, { render: "button", role: "radio", "aria-checked": term === k, "aria-label": k === 'month' ? t('Monthly') : t('Yearly'), onPress: () => setTerm(k), px: "$3", py: "$1.5", rounded: "$10", bg: term === k ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$2", color: term === k ? '$ink' : '$soft', children: k === 'month' ? t('Monthly') : t('Yearly') }) }, k))) })) : null] }), list.error ? (_jsx(Line, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Line, { children: t('Reading plans…') })) : list.value.length === 0 ? (_jsx(Line, { children: t('This brand sells no plans.') })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$4", children: list.value.map((p) => {
                             const cost = price(p, term);
-                            return (_jsxs(YStack, { "aria-label": `${p.name} plan`, flex: 1, minW: 240, maxW: 360, "$max-sm": { maxW: '100%' }, gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: mine(p) || p.popular ? '$ink' : '$borderColor', bg: "$panel", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$5", color: "$ink", children: p.name }), mine(p) ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Current" })) : p.popular ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Popular" })) : null] }), p.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: p.description })) : null, _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$7", color: "$ink", children: p.sales ? 'Custom' : cost.month === 0 ? 'Free' : money(cost.month, p.currency) }), _jsx(SizableText, { size: "$1", color: "$soft", children: p.sales
-                                                    ? 'Talk to us'
+                            return (_jsxs(YStack, { "aria-label": t('{plan} plan', { plan: p.name }), flex: 1, minW: 240, maxW: 360, "$max-sm": { maxW: '100%' }, gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: mine(p) || p.popular ? '$ink' : '$borderColor', bg: "$panel", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$5", color: "$ink", children: p.name }), mine(p) ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('Current') })) : p.popular ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('Popular') })) : null] }), p.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: p.description })) : null, _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$7", color: "$ink", children: p.sales ? t('Custom') : cost.month === 0 ? t('Free') : money(cost.month, p.currency) }), _jsx(SizableText, { size: "$1", color: "$soft", children: p.sales
+                                                    ? t('Talk to us')
                                                     : cost.month === 0
-                                                        ? 'Forever'
-                                                        : `${p.perSeat ? 'per seat, ' : ''}a month${term === 'year' && p.yearly ? `, ${money(cost.now, p.currency)} billed yearly` : ''}` })] }), _jsx(XStack, { children: move(p) }), p.features.length ? (_jsx(YStack, { gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: p.features.map((f) => (_jsxs(XStack, { gap: "$2", items: "flex-start", children: [_jsx(YStack, { pt: 2, children: _jsx(Check, { size: 14 }) }), _jsx(SizableText, { flex: 1, size: "$2", color: "$soft", children: f })] }, f))) })) : null] }, p.id));
-                        }) })), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null] }), _jsx(Dialog, { open: Boolean(buying), onOpenChange: (o) => !o && setBuying(null), children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: buying ? `Upgrade to ${buying.name}` : 'Upgrade' }), buying && card ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${label(card)} is charged ${money(price(buying, term).now, buying.currency)} now, and again every ${term} until you cancel.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(null), children: "Not now" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void act(async () => {
-                                                await subscribe(t, { plan: buying.id, interval: yearly && buying.yearly ? term : 'month', method: card.id });
-                                                return `${who} is on ${buying.name}`;
-                                            }), children: "Upgrade" })] })] })) : null] }) }), _jsx(Dialog, { open: leaving, onOpenChange: setLeaving, children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Switch to the free plan?" }), on ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${on.name} stays on until ${day(on.ends) || 'the end of this period'}, and nothing is charged after that.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setLeaving(false), children: `Keep ${on.name}` }), _jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: () => void act(async () => {
-                                                await cancel(t, on.id);
-                                                return `${on.name} ends on ${day(on.ends)}`;
-                                            }), children: "Switch" })] })] })) : null] }) }), _jsx(AddCard, { open: adding, onOpenChange: setAdding, onSaved: (m) => {
+                                                        ? t('Forever')
+                                                        : term === 'year' && p.yearly
+                                                            ? p.perSeat
+                                                                ? t('per seat, a month, {price} billed yearly', { price: money(cost.now, p.currency) })
+                                                                : t('a month, {price} billed yearly', { price: money(cost.now, p.currency) })
+                                                            : p.perSeat
+                                                                ? t('per seat, a month')
+                                                                : t('a month') })] }), _jsx(XStack, { children: move(p) }), p.features.length ? (_jsx(YStack, { gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: p.features.map((f) => (_jsxs(XStack, { gap: "$2", items: "flex-start", children: [_jsx(YStack, { pt: 2, children: _jsx(Check, { size: 14 }) }), _jsx(SizableText, { flex: 1, size: "$2", color: "$soft", children: f })] }, f))) })) : null] }, p.id));
+                        }) })), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null] }), _jsx(Dialog, { open: Boolean(buying), onOpenChange: (o) => !o && setBuying(null), children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: buying ? t('Upgrade to {plan}', { plan: buying.name }) : t('Upgrade') }), buying && card ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: term === 'year'
+                                        ? t('{card} is charged {amount} now, and again every year until you cancel.', { card: label(card), amount: money(price(buying, term).now, buying.currency) })
+                                        : t('{card} is charged {amount} now, and again every month until you cancel.', { card: label(card), amount: money(price(buying, term).now, buying.currency) }) }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(null), children: t('Not now') }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void act(async () => {
+                                                await subscribe(target, { plan: buying.id, interval: yearly && buying.yearly ? term : 'month', method: card.id });
+                                                return org ? t('{org} is on {plan}', { org, plan: buying.name }) : t('This organization is on {plan}', { plan: buying.name });
+                                            }), children: t('Upgrade') })] })] })) : null] }) }), _jsx(Dialog, { open: leaving, onOpenChange: setLeaving, children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: t('Switch to the free plan?') }), on ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: day(on.ends)
+                                        ? t('{plan} stays on until {date}, and nothing is charged after that.', { plan: on.name, date: day(on.ends) })
+                                        : t('{plan} stays on until the end of this period, and nothing is charged after that.', { plan: on.name }) }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setLeaving(false), children: t('Keep {plan}', { plan: on.name }) }), _jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: () => void act(async () => {
+                                                await cancel(target, on.id);
+                                                return t('{plan} ends on {date}', { plan: on.name, date: day(on.ends) });
+                                            }), children: t('Switch') })] })] })) : null] }) }), _jsx(AddCard, { open: adding, onOpenChange: setAdding, onSaved: (m) => {
                     cards.reload();
-                    setNote(`${label(m)} is saved`);
+                    setNote(t('{card} is saved', { card: label(m) }));
                 } })] }));
 }
 function Line({ children }) {

package/lib/plugins/design.js

@@ -8,6 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * everything made after it follows it. From `+` › Design system it attaches to
  * any later conversation, in Chat or in Dev.
  */
+import { phrase } from '@hanzo/i18n';
 import { Palette } from '@hanzogui/lucide-icons-2';
 import { call } from '../api/call.js';
 import { keepBrand } from '../api/studio.js';
@@ -63,8 +64,8 @@ export async function make(turn, t, signal) {
 }
 export const designer = {
     id: 'design',
-    name: 'Design system',
-    note: 'Make one from a brief or a site',
+    name: phrase('Design system'),
+    note: phrase('Make one from a brief or a site'),
     icon: _jsx(Palette, { size: 16 }),
     prepare: (turn, c, signal) => make(turn, c.target, signal),
 };

package/lib/plugins/index.d.ts

@@ -1,3 +1,21 @@
+/**
+ * The plugins the composer offers, from `+` › Plugins and by typing `@`: only
+ * those that run for this person, each on Hanzo's own services.
+ *
+ *   Work in a project   the org has a project (GET /v1/projects)
+ *   Deep research       signed in: web search, page reading and a Hanzo model, as the person
+ *   Sketch              always: it draws in the page
+ *   Template Creator    an org admin: only an admin writes the org's skills
+ *   Presentations       Studio runs its `slides` template (GET /v1/studio/templates)
+ *   PDF                 signed in: read and verify in the page; create where Studio runs `document`
+ *
+ * What is there is read once per platform, org and sign-in, and kept for the page.
+ *
+ * Deep research IS the Research switch: its row turns `Gear.research` on and
+ * off, and `prep` asks it when that is on. Every other plugin that prepares is on
+ * while its id is in `Gear.plugins`; one that opens something runs when picked.
+ */
+import type { Say } from '@hanzo/i18n/react';
 import type { Target } from '../api/call.ts';
 import type { Gear, GearState } from '../gear.ts';
 import type { Composer, Plugin, Prep, Turn } from '../plugin.ts';
@@ -13,8 +31,8 @@ export declare const BUILD: string;
 /** What runs for this person, in the menu's order. */
 export declare function probe(t: Target): Promise<Plugin[]>;
 export declare function usePlugins(t: Target): Plugins;
-/** The `+` menu's Plugins shelf. */
-export declare function shelf(p: Plugins, g: GearState, c: Composer): Shelf;
+/** The `+` menu's Plugins shelf, in the words of the caller's `t` (a plugin's name and note are marked where it is written). */
+export declare function shelf(p: Plugins, g: GearState, c: Composer, t?: Say): Shelf;
 /** The plugins this message asks, in the menu's order. */
 export declare const active: (plugins: readonly Plugin[], g: Gear) => Plugin[];
 /** Several plugins' preparations as one: system parts and replies in order, files together, the design system one made. */
@@ -22,6 +40,7 @@ export declare function merge(preps: readonly Prep[]): Prep;
 /**
  * Ask every plugin that is on what the message carries. A plugin that fails
  * fails the message, with its name and its reason: a report asked for and not
- * researched must not arrive looking researched.
+ * researched must not arrive looking researched. Its name is said in the
+ * caller's `t`; the reason is `say`'s.
  */
-export declare function prep(plugins: readonly Plugin[], g: Gear, turn: Turn, c: Composer, signal: AbortSignal, denied?: readonly string[]): Promise<Prep>;
+export declare function prep(plugins: readonly Plugin[], g: Gear, turn: Turn, c: Composer, signal: AbortSignal, denied?: readonly string[], t?: Say): Promise<Prep>;