@hanzo/build 0.2.80 → 0.2.82

package/lib/section.js

@@ -11,6 +11,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * host's own `go`.
  */
 import { SizableText } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { SidebarItem, SidebarSection, StatusDot } from '@hanzo/ui/chat';
 import { useMemo } from 'react';
 import { useRecents } from './data.js';
@@ -36,7 +37,8 @@ const Note = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft",
  * own. `onPick` fires after a move, so a host that draws its rail as a drawer
  * on a phone can close it.
  */
-export function DevSection({ host, onPick, label = 'Runs', children, }) {
+export function DevSection({ host, onPick, label, children, }) {
+    const { t } = useI18n();
     const sessions = useSessions(host);
     const r = route(host.path);
     // Every row, a place or a run, closes a drawer behind it.
@@ -44,5 +46,9 @@ export function DevSection({ host, onPick, label = 'Runs', children, }) {
         press?.();
         onPick?.();
     };
-    return (_jsxs(_Fragment, { children: [nav(host, host.go).map((g) => (_jsx(SidebarSection, { label: g.label, children: g.links.map((l) => (_jsx(SidebarItem, { icon: l.icon, active: l.active, onPress: then(l.onPress), children: l.label }, l.id))) }, g.id))), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: then(() => host.go(s.id)), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));
+    return (_jsxs(_Fragment, { children: [nav(host, host.go, t).map((g) => (_jsx(SidebarSection, { label: g.label, children: g.links.map((l) => (_jsx(SidebarItem, { icon: l.icon, active: l.active, onPress: then(l.onPress), children: l.label }, l.id))) }, g.id))), children, _jsx(SidebarSection, { label: label ?? t('Runs'), children: !host.person ? (_jsx(Note, { children: t('Sign in to see your runs.') })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: then(() => host.go(s.id)), children: s.title || t('Untitled run') }, s.id)))) : (_jsx(Note, { children: sessions.error
+                        ? t(sessions.error.message)
+                        : sessions.loading
+                            ? t('Reading…')
+                            : `${t('No runs yet.')} ${t('Say what to build and it lands here.')}` })) })] }));
 }

package/lib/settings/account.d.ts

@@ -1,3 +1,4 @@
+/** What a person may say they work on, each label English and marked (`phrase`), drawn through `t`. */
 export declare const WORK: {
     id: string;
     label: string;

package/lib/settings/account.js

@@ -6,33 +6,41 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * to, the one this page acts in, a way to act in another, and logging out.
  *
  * The email is how the person signs in, so it is shown and not edited here.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a name, an email and
+ * an organization's id are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Check, Copy, LogOut } from '@hanzogui/lucide-icons-2';
 import { Button, Input, Textarea } from '@hanzo/ui';
 import { ChipSelect } from '@hanzo/ui/product';
 import { useEffect, useRef, useState } from 'react';
+import { told } from '../api/call.js';
 import { PHOTO, photo, rename } from '../api/profile.js';
 import { useHost, useTarget } from '../host.js';
 import { usePrefs } from '../prefs.js';
 import { Card, Field, Group, Heading, Note, Row, Soft } from './ui.js';
+/** What a person may say they work on, each label English and marked (`phrase`), drawn through `t`. */
 export const WORK = [
-    { id: 'engineering', label: 'Software engineering' },
-    { id: 'data', label: 'Data science' },
-    { id: 'design', label: 'Design' },
-    { id: 'product', label: 'Product management' },
-    { id: 'research', label: 'Research' },
-    { id: 'writing', label: 'Writing' },
-    { id: 'education', label: 'Education' },
-    { id: 'operations', label: 'Operations' },
-    { id: 'marketing', label: 'Marketing and sales' },
-    { id: 'other', label: 'Something else' },
+    { id: 'engineering', label: phrase('Software engineering') },
+    { id: 'data', label: phrase('Data science') },
+    { id: 'design', label: phrase('Design') },
+    { id: 'product', label: phrase('Product management') },
+    { id: 'research', label: phrase('Research') },
+    { id: 'writing', label: phrase('Writing') },
+    { id: 'education', label: phrase('Education') },
+    { id: 'operations', label: phrase('Operations') },
+    { id: 'marketing', label: phrase('Marketing and sales') },
+    { id: 'other', label: phrase('Something else') },
 ];
 /** Long enough for real guidance, short enough to sit in the settings document beside everything else. */
 const INSTRUCTIONS = 3000;
 export function Account() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const { prefs, save } = usePrefs();
     const who = host.person;
     const [name, setName] = useState(who?.name ?? '');
@@ -57,7 +65,7 @@ export function Account() {
         setInstructions(prefs.instructions ?? '');
     }, [prefs.callName, prefs.work, prefs.instructions]);
     if (!who) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Account" }), _jsx(Soft, { children: "Sign in to see your account." }), host.signIn ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : null] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Account') }), _jsx(Soft, { children: t('Sign in to see your account.') }), host.signIn ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: t('Sign in') }) })) : null] }));
     }
     const patch = {};
     if (callName.trim() !== (prefs.callName ?? ''))
@@ -74,13 +82,13 @@ export function Account() {
         setNote('');
         try {
             if (renamed)
-                setShownName((await rename(t, name)).displayName || name.trim());
+                setShownName((await rename(target, name)).displayName || name.trim());
             if (Object.keys(patch).length)
                 await save(patch);
-            setNote('Saved');
+            setNote(t('Saved'));
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setBusy(false);
@@ -90,11 +98,11 @@ export function Account() {
         setBusy(true);
         setNote('');
         try {
-            setFace(await photo(t, file));
-            setNote('Your photo is saved');
+            setFace(await photo(target, file));
+            setNote(t('Your photo is saved'));
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setBusy(false);
@@ -102,12 +110,14 @@ export function Account() {
     };
     const org = host.org;
     const orgs = host.memberships ?? (org ? [org] : []);
-    const chosenWork = WORK.find((w) => w.id === work) ?? (work ? { id: work, label: work } : null);
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Account", detail: "Your Hanzo identity, and what Hanzo should know about you.", action: host.signOut ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => host.signOut?.(), children: [_jsx(LogOut, { size: 14 }), " Log out"] })) : undefined }), _jsx(Group, { title: "Profile", children: _jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [face ? (_jsx("img", { src: face, alt: "", width: 48, height: 48, style: { borderRadius: 999, objectFit: 'cover' } })) : (_jsx(YStack, { width: 48, height: 48, rounded: 999, bg: "$raised", items: "center", justify: "center", children: _jsx(SizableText, { size: "$5", color: "$ink", children: (shownName || who.email || '?').charAt(0).toUpperCase() }) })), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$4", color: "$ink", numberOfLines: 1, children: shownName || who.email }), _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email })] }), _jsx(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => picker.current?.click(), children: "Change photo" }), _jsx("input", { ref: picker, type: "file", accept: PHOTO, hidden: true, style: { display: 'none' }, tabIndex: -1, "aria-label": "Photo", onChange: (e) => {
+    // The list's words in the reader's language; a work the list does not hold is the person's own, as given.
+    const works = WORK.map((w) => ({ ...w, label: t(w.label) }));
+    const chosenWork = works.find((w) => w.id === work) ?? (work ? { id: work, label: work } : null);
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Account'), detail: t('Your Hanzo identity, and what Hanzo should know about you.'), action: host.signOut ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => host.signOut?.(), children: [_jsx(LogOut, { size: 14 }), " ", t('Log out')] })) : undefined }), _jsx(Group, { title: t('Profile'), children: _jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [face ? (_jsx("img", { src: face, alt: "", width: 48, height: 48, style: { borderRadius: 999, objectFit: 'cover' } })) : (_jsx(YStack, { width: 48, height: 48, rounded: 999, bg: "$raised", items: "center", justify: "center", children: _jsx(SizableText, { size: "$5", color: "$ink", children: (shownName || who.email || '?').charAt(0).toUpperCase() }) })), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$4", color: "$ink", numberOfLines: 1, children: shownName || who.email }), _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email })] }), _jsx(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => picker.current?.click(), children: t('Change photo') }), _jsx("input", { ref: picker, type: "file", accept: PHOTO, hidden: true, style: { display: 'none' }, tabIndex: -1, "aria-label": t('Photo'), onChange: (e) => {
                                         const input = e.currentTarget;
                                         const file = input.files?.[0];
                                         input.value = '';
                                         if (file)
                                             void upload(file);
-                                    } })] }), _jsx(Field, { label: "Full name", children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Full name", placeholder: "Your name" }) }), _jsx(Field, { label: "Email", hint: "You sign in with this address, so it is not changed here.", children: _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email || 'No email on this account' }) }), _jsx(Field, { label: "What should Hanzo call you?", children: _jsx(Input, { value: callName, onChangeText: setCallName, "aria-label": "What should Hanzo call you?", placeholder: shownName.split(' ')[0] || 'A first name' }) }), _jsx(Field, { label: "What best describes your work?", children: _jsx(XStack, { children: _jsx(ChipSelect, { name: "Work", label: chosenWork?.label ?? 'Choose one', chosen: chosenWork, items: WORK, onChange: (w) => setWork(w.id), placement: "bottom-start", width: 260 }) }) }), _jsx(Field, { label: "Instructions for Hanzo", hint: `Every coding run reads these before it starts. ${instructions.length}/${INSTRUCTIONS}`, children: _jsx(Textarea, { value: instructions, onChangeText: (v) => setInstructions(v.slice(0, INSTRUCTIONS)), "aria-label": "Instructions for Hanzo", placeholder: "How you like to work: the languages and tools you prefer, the style to follow, what to avoid.", rows: 5 }) }), _jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(Button, { size: "sm", disabled: busy || !changed, onPress: () => void submit(), children: "Save" }), _jsx(Note, { children: note })] })] }) }), org ? (_jsx(Group, { title: "Organization", detail: "The organization this page acts in. Runs, codebases and settings belong to it.", children: _jsx(Card, { children: _jsx(Row, { first: true, mono: true, title: org, detail: `Organization ID${host.admin ? ' · you are an admin' : ''}`, trailing: _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": copied ? 'Organization ID copied' : 'Copy organization ID', onPress: () => void navigator.clipboard?.writeText(org).then(() => setCopied(true)), children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }) }) }) })) : null, _jsx(Group, { title: "Organizations", detail: "Every organization you belong to. Switch to act in another.", children: orgs.length ? (_jsx(Card, { children: orgs.map((o, i) => (_jsx(Row, { first: i === 0, title: o, detail: o === host.org ? `Acting in ${o}${host.admin ? ' as an admin' : ''}` : undefined, trailing: o === host.org ? (_jsx(Check, { size: 16 })) : host.chooseOrg ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => host.chooseOrg?.(o), children: "Switch" })) : null }, o))) })) : (_jsx(Soft, { children: "You belong to no organization yet." })) })] }));
+                                    } })] }), _jsx(Field, { label: t('Full name'), children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": t('Full name'), placeholder: t('Your name') }) }), _jsx(Field, { label: t('Email'), hint: t('You sign in with this address, so it is not changed here.'), children: _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email || t('No email on this account') }) }), _jsx(Field, { label: t('What should Hanzo call you?'), children: _jsx(Input, { value: callName, onChangeText: setCallName, "aria-label": t('What should Hanzo call you?'), placeholder: shownName.split(' ')[0] || t('A first name') }) }), _jsx(Field, { label: t('What best describes your work?'), children: _jsx(XStack, { children: _jsx(ChipSelect, { name: t('Work'), label: chosenWork?.label ?? t('Choose one'), chosen: chosenWork, items: works, onChange: (w) => setWork(w.id), placement: "bottom-start", width: 260 }) }) }), _jsx(Field, { label: t('Instructions for Hanzo'), hint: t('Every coding run reads these before it starts. {used}/{most}', { used: instructions.length, most: INSTRUCTIONS }), children: _jsx(Textarea, { value: instructions, onChangeText: (v) => setInstructions(v.slice(0, INSTRUCTIONS)), "aria-label": t('Instructions for Hanzo'), placeholder: t('How you like to work: the languages and tools you prefer, the style to follow, what to avoid.'), rows: 5 }) }), _jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(Button, { size: "sm", disabled: busy || !changed, onPress: () => void submit(), children: t('Save') }), _jsx(Note, { children: note })] })] }) }), org ? (_jsx(Group, { title: t('Organization'), detail: t('The organization this page acts in. Runs, codebases and settings belong to it.'), children: _jsx(Card, { children: _jsx(Row, { first: true, mono: true, title: org, detail: host.admin ? t('Organization ID · you are an admin') : t('Organization ID'), trailing: _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": copied ? t('Organization ID copied') : t('Copy organization ID'), onPress: () => void navigator.clipboard?.writeText(org).then(() => setCopied(true)), children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }) }) }) })) : null, _jsx(Group, { title: t('Organizations'), detail: t('Every organization you belong to. Switch to act in another.'), children: orgs.length ? (_jsx(Card, { children: orgs.map((o, i) => (_jsx(Row, { first: i === 0, title: o, detail: o === host.org ? (host.admin ? t('Acting in {org} as an admin', { org: o }) : t('Acting in {org}', { org: o })) : undefined, trailing: o === host.org ? (_jsx(Check, { size: 16 })) : host.chooseOrg ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => host.chooseOrg?.(o), children: t('Switch') })) : null }, o))) })) : (_jsx(Soft, { children: t('You belong to no organization yet.') })) })] }));
 }

package/lib/settings/billing.js

@@ -4,12 +4,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * credits (`Credits`: the balance, grants, top-ups, auto-reload, this month's
  * spend and its limit), the cards it pays with, its invoices, and ending the
  * plan. Changing plan is the Plans screen; this page says what is true now.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a plan's name, a
+ * card's, an invoice's lines and its status are billing's, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { CreditCard, Download, Plus, X } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, Input, toast } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
 import { cancel, chosen, current, detach, formatAddress, invoices, label, makeDefault, methods, money, pdf, reactivate, subscriptions, tier, updateMethod, } from '../api/billing.js';
+import { told } from '../api/call.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Title } from '../meter.js';
@@ -19,13 +25,14 @@ import { AddCard } from './card.js';
 import { Credits } from './credits.js';
 import { Card, day, Field, Group, Heading, Note, Row, Soft } from './ui.js';
 export function Billing() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const subs = useRead(signed ? () => subscriptions(t) : null, [], [t, signed]);
-    const cards = useRead(signed ? () => methods(t) : null, [], [t, signed]);
-    const bills = useRead(signed ? () => invoices(t) : null, [], [t, signed]);
-    const billed = useRead(signed ? () => tier(t) : null, null, [t, signed]);
+    const subs = useRead(signed ? () => subscriptions(target) : null, [], [target, signed]);
+    const cards = useRead(signed ? () => methods(target) : null, [], [target, signed]);
+    const bills = useRead(signed ? () => invoices(target) : null, [], [target, signed]);
+    const billed = useRead(signed ? () => tier(target) : null, null, [target, signed]);
     const [adding, setAdding] = useState(false);
     const [ending, setEnding] = useState(false);
     const [editingBilling, setEditingBilling] = useState(null);
@@ -33,7 +40,7 @@ export function Billing() {
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Billing" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s billing." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Billing') }), _jsx(Soft, { children: t('Sign in to see this organization’s billing.') })] }));
     }
     const plan = current(subs.value);
     // The plan by its family, `Max` with `20x` beside it; the subscription names
@@ -54,32 +61,33 @@ export function Billing() {
             toast.success(done);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setWorking(false);
         }
     };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Billing", detail: `The plan ${host.org ?? 'this organization'} is on, the cards it pays with, and its invoices.` }), _jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 200, gap: "$1", "data-slot": "billing-plan", children: [reading ? (_jsx(SizableText, { size: "$5", color: "$ink", children: "Reading your plan\u2026" })) : (_jsx(Title, { label: title ?? { name: 'Free', tag: '' }, size: "$5" })), _jsx(SizableText, { size: "$2", color: "$soft", children: subs.error ? subs.error.message : plan ? terms(plan) : title ? 'Your plan.' : 'No paid plan. Usage is paid from credits.' })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'plans' })), children: "Adjust plan" })] }), _jsx(Credits, { target: t, admin: host.admin, onCard: () => setAdding(true) }), _jsxs(Group, { title: "Payment", detail: "The card a plan renews on and a top-up charges.", action: host.admin && (cards.error || cards.value.length > 0) ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Add card"] })) : undefined, children: [cards.error ? (_jsx(Soft, { children: cards.error.message })) : cards.loading && !cards.value.length ? (_jsx(Soft, { children: "Reading cards\u2026" })) : empty ? (_jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsx(CreditCard, { size: 20 }), _jsxs(YStack, { flex: 1, minW: 180, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "No card on file." }), _jsx(SizableText, { size: "$2", color: "$soft", children: host.admin ? 'Add one to pay for a plan or a top-up. Adding it charges nothing.' : 'An org admin adds cards.' })] }), host.admin ? (_jsxs(Button, { variant: "primary", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 16 }), " Add card"] })) : null] })) : (_jsx(Card, { children: cards.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(CreditCard, { size: 16 }), title: label(m), detail: [
-                                m.expires ? `Expires ${m.expires}` : '',
-                                m.default ? 'Default' : '',
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Billing'), detail: host.org ? t('The plan {org} is on, the cards it pays with, and its invoices.', { org: host.org }) : t('The plan this organization is on, the cards it pays with, and its invoices.') }), _jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 200, gap: "$1", "data-slot": "billing-plan", children: [reading ? (_jsx(SizableText, { size: "$5", color: "$ink", children: t('Reading your plan…') })) : (_jsx(Title, { label: title ?? { name: phrase('Free'), tag: '' }, size: "$5" })), _jsx(SizableText, { size: "$2", color: "$soft", children: subs.error ? told(subs.error, t) : plan ? terms(plan, t) : title ? t('Your plan.') : t('No paid plan. Usage is paid from credits.') })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'plans' })), children: t('Adjust plan') })] }), _jsx(Credits, { target: target, admin: host.admin, onCard: () => setAdding(true) }), _jsxs(Group, { title: t('Payment'), detail: t('The card a plan renews on and a top-up charges.'), action: host.admin && (cards.error || cards.value.length > 0) ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", t('Add card')] })) : undefined, children: [cards.error ? (_jsx(Soft, { children: told(cards.error, t) })) : cards.loading && !cards.value.length ? (_jsx(Soft, { children: t('Reading cards…') })) : empty ? (_jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsx(CreditCard, { size: 20 }), _jsxs(YStack, { flex: 1, minW: 180, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: t('No card on file.') }), _jsx(SizableText, { size: "$2", color: "$soft", children: host.admin ? t('Add one to pay for a plan or a top-up. Adding it charges nothing.') : t('An org admin adds cards.') })] }), host.admin ? (_jsxs(Button, { variant: "primary", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 16 }), " ", t('Add card')] })) : null] })) : (_jsx(Card, { children: cards.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(CreditCard, { size: 16 }), title: method(m, t), detail: [
+                                m.expires ? t('Expires {date}', { date: m.expires }) : '',
+                                m.default ? t('Default') : '',
                                 m.billingAddress ? formatAddress(m.billingAddress) : '',
                             ]
                                 .filter(Boolean)
-                                .join(' · ') || undefined, trailing: host.admin ? (_jsxs(XStack, { gap: "$2", items: "center", children: [!m.default ? (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Make ${label(m)} default`, disabled: working, onPress: () => void act(() => makeDefault(t, m.id), `${label(m)} is now the default`, cards.reload), children: "Make default" })) : null, _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Edit billing info for ${label(m)}`, disabled: working, onPress: () => setEditingBilling(m), children: "Edit info" }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Remove ${label(m)}`, disabled: working, onPress: () => void act(() => detach(t, m.id), `${label(m)} is removed`, cards.reload), children: "Remove" })] })) : undefined }, m.id))) })), !host.admin && cards.value.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin adds and removes cards." })) : null] }), _jsx(Group, { title: "Billing details", detail: "Information printed on invoices and payment receipts.", action: host.admin && defaultCard ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setEditingBilling(defaultCard), children: defaultCard.billingAddress ? 'Edit details' : 'Add billing info' })) : undefined, children: defaultCard?.billingAddress ? (_jsx(Card, { children: _jsxs(YStack, { p: "$3", gap: "$1.5", children: [defaultCard.billingAddress.name ? (_jsx(SizableText, { size: "$3", color: "$ink", style: { fontWeight: 600 }, children: defaultCard.billingAddress.name })) : null, defaultCard.billingAddress.line1 ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: [defaultCard.billingAddress.line1, defaultCard.billingAddress.line2 ? `, ${defaultCard.billingAddress.line2}` : ''] })) : null, defaultCard.billingAddress.city || defaultCard.billingAddress.state || defaultCard.billingAddress.postalCode ? (_jsx(SizableText, { size: "$2", color: "$soft", children: [defaultCard.billingAddress.city, defaultCard.billingAddress.state, defaultCard.billingAddress.postalCode]
+                                .join(' · ') || undefined, trailing: host.admin ? (_jsxs(XStack, { gap: "$2", items: "center", children: [!m.default ? (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('Make {card} default', { card: method(m, t) }), disabled: working, onPress: () => void act(() => makeDefault(target, m.id), t('{card} is now the default', { card: method(m, t) }), cards.reload), children: t('Make default') })) : null, _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('Edit billing info for {card}', { card: method(m, t) }), disabled: working, onPress: () => setEditingBilling(m), children: t('Edit info') }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('Remove {card}', { card: method(m, t) }), disabled: working, onPress: () => void act(() => detach(target, m.id), t('{card} is removed', { card: method(m, t) }), cards.reload), children: t('Remove') })] })) : undefined }, m.id))) })), !host.admin && cards.value.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('An org admin adds and removes cards.') })) : null] }), _jsx(Group, { title: t('Billing details'), detail: t('Information printed on invoices and payment receipts.'), action: host.admin && defaultCard ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setEditingBilling(defaultCard), children: defaultCard.billingAddress ? t('Edit details') : t('Add billing info') })) : undefined, children: defaultCard?.billingAddress ? (_jsx(Card, { children: _jsxs(YStack, { p: "$3", gap: "$1.5", children: [defaultCard.billingAddress.name ? (_jsx(SizableText, { size: "$3", color: "$ink", style: { fontWeight: 600 }, children: defaultCard.billingAddress.name })) : null, defaultCard.billingAddress.line1 ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: [defaultCard.billingAddress.line1, defaultCard.billingAddress.line2 ? `, ${defaultCard.billingAddress.line2}` : ''] })) : null, defaultCard.billingAddress.city || defaultCard.billingAddress.state || defaultCard.billingAddress.postalCode ? (_jsx(SizableText, { size: "$2", color: "$soft", children: [defaultCard.billingAddress.city, defaultCard.billingAddress.state, defaultCard.billingAddress.postalCode]
                                     .filter(Boolean)
-                                    .join(' ') })) : null, defaultCard.billingAddress.country ? (_jsx(SizableText, { size: "$2", color: "$soft", children: defaultCard.billingAddress.country })) : null] }) })) : (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$4", py: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 180, gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "No billing address on file." }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Add your company name and address so they appear on monthly invoices and receipts." })] }), host.admin ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => (defaultCard ? setEditingBilling(defaultCard) : setAdding(true)), children: [_jsx(Plus, { size: 14 }), " ", defaultCard ? 'Add billing info' : 'Set billing info'] })) : null] })) }), _jsx(Group, { title: "Invoices", children: bills.error ? (_jsx(Soft, { children: bills.error.message })) : bills.loading && !bills.value.length ? (_jsx(Soft, { children: "Reading invoices\u2026" })) : bills.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "No invoices yet." }) })) : (_jsxs(Card, { children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", children: [_jsx(SizableText, { flex: 1, size: "$1", color: "$soft", children: "Date" }), _jsx(SizableText, { width: 90, size: "$1", color: "$soft", style: { textAlign: 'right' }, children: "Total" }), _jsx(SizableText, { width: 70, size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: "Status" }), _jsx(YStack, { width: 64 })] }), bills.value.map((b) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: day(b.date) || b.number || b.id }), _jsx(SizableText, { width: 90, size: "$2", color: "$ink", style: { textAlign: 'right' }, children: money(b.total, b.currency) }), _jsx(SizableText, { width: 70, size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: word(b.status) }), _jsx(XStack, { width: 64, justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `View invoice ${b.number || day(b.date)}`, onPress: () => setOpen(b), children: "View" }) })] }, b.id)))] })) }), plan ? (_jsx(Group, { title: "Cancellation", children: _jsx(Card, { children: _jsx(Row, { first: true, title: plan.ending ? `Your plan ends on ${day(plan.ends)}` : 'Cancel plan', detail: plan.ending ? 'Keep it, and it renews as before.' : 'It runs to the end of the period you paid for, then ends.', trailing: !host.admin ? undefined : plan.ending ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => reactivate(t, plan.id), 'Your plan renews as before', subs.reload), children: "Keep plan" })) : (_jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: () => setEnding(true), children: "Cancel" })) }) }) })) : null, _jsx(Note, { children: note }), _jsx(AddCard, { open: adding, onOpenChange: setAdding, onSaved: (m) => {
+                                    .join(' ') })) : null, defaultCard.billingAddress.country ? (_jsx(SizableText, { size: "$2", color: "$soft", children: defaultCard.billingAddress.country })) : null] }) })) : (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$4", py: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 180, gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: t('No billing address on file.') }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Add your company name and address so they appear on monthly invoices and receipts.') })] }), host.admin ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => (defaultCard ? setEditingBilling(defaultCard) : setAdding(true)), children: [_jsx(Plus, { size: 14 }), " ", defaultCard ? t('Add billing info') : t('Set billing info')] })) : null] })) }), _jsx(Group, { title: t('Invoices'), children: bills.error ? (_jsx(Soft, { children: told(bills.error, t) })) : bills.loading && !bills.value.length ? (_jsx(Soft, { children: t('Reading invoices…') })) : bills.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: t('No invoices yet.') }) })) : (_jsxs(Card, { children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", children: [_jsx(SizableText, { flex: 1, size: "$1", color: "$soft", children: t('Date') }), _jsx(SizableText, { width: 90, size: "$1", color: "$soft", text: "end", children: t('Total') }), _jsx(SizableText, { width: 70, size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: t('Status') }), _jsx(YStack, { width: 64 })] }), bills.value.map((b) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: day(b.date) || b.number || b.id }), _jsx(SizableText, { width: 90, size: "$2", color: "$ink", text: "end", children: money(b.total, b.currency) }), _jsx(SizableText, { width: 70, size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: word(b.status) }), _jsx(XStack, { width: 64, justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('View invoice {invoice}', { invoice: b.number || day(b.date) }), onPress: () => setOpen(b), children: t('View') }) })] }, b.id)))] })) }), plan ? (_jsx(Group, { title: t('Cancellation'), children: _jsx(Card, { children: _jsx(Row, { first: true, title: plan.ending ? t('Your plan ends on {date}', { date: day(plan.ends) }) : t('Cancel plan'), detail: plan.ending ? t('Keep it, and it renews as before.') : t('It runs to the end of the period you paid for, then ends.'), trailing: !host.admin ? undefined : plan.ending ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => reactivate(target, plan.id), t('Your plan renews as before'), subs.reload), children: t('Keep plan') })) : (_jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: () => setEnding(true), children: t('Cancel') })) }) }) })) : null, _jsx(Note, { children: note }), _jsx(AddCard, { open: adding, onOpenChange: setAdding, onSaved: (m) => {
                     cards.reload();
-                    toast.success(`${label(m)} is saved`);
+                    toast.success(t('{card} is saved', { card: method(m, t) }));
                 } }), _jsx(EditBilling, { open: editingBilling !== null, onOpenChange: (o) => !o && setEditingBilling(null), card: editingBilling, onSaved: () => {
                     cards.reload();
-                } }), plan ? (_jsx(Ending, { plan: plan, open: ending, working: working, onOpenChange: setEnding, onConfirm: () => void act(() => cancel(t, plan.id), `Your plan ends on ${day(plan.ends)}`, () => {
+                } }), plan ? (_jsx(Ending, { plan: plan, open: ending, working: working, onOpenChange: setEnding, onConfirm: () => void act(() => cancel(target, plan.id), t('Your plan ends on {date}', { date: day(plan.ends) }), () => {
                     setEnding(false);
                     subs.reload();
                 }) })) : null, open ? _jsx(Bill, { invoice: open, onClose: () => setOpen(null) }) : null] }));
 }
 function EditBilling({ open, onOpenChange, card, onSaved, }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const [name, setName] = useState('');
     const [line1, setLine1] = useState('');
     const [line2, setLine2] = useState('');
@@ -125,39 +133,58 @@ function EditBilling({ open, onOpenChange, card, onSaved, }) {
                 postalCode: postalCode.trim() || undefined,
                 country: country.trim() || undefined,
             };
-            await updateMethod(t, card.id, { billingAddress: address });
+            await updateMethod(target, card.id, { billingAddress: address });
             onSaved();
             onOpenChange(false);
-            toast.success('Billing details updated');
+            toast.success(t('Billing details updated'));
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setWorking(false);
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: "Billing details" }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "These details appear on your invoices and receipts." }), _jsx(Field, { label: "Business or personal name", children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "e.g. Webby AI, Inc. or Joshua Lynch" }) }), _jsx(Field, { label: "Address line 1", children: _jsx(Input, { value: line1, onChangeText: setLine1, placeholder: "Street address or P.O. Box" }) }), _jsx(Field, { label: "Address line 2", hint: "Optional", children: _jsx(Input, { value: line2, onChangeText: setLine2, placeholder: "Suite, unit, building, floor" }) }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(Field, { label: "City", children: _jsx(Input, { value: city, onChangeText: setCity, placeholder: "City" }) }) }), _jsx(YStack, { width: 100, children: _jsx(Field, { label: "State", children: _jsx(Input, { value: stateVal, onChangeText: setStateVal, placeholder: "State / Prov" }) }) })] }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(Field, { label: "Postal / ZIP code", children: _jsx(Input, { value: postalCode, onChangeText: setPostalCode, placeholder: "ZIP or Postal Code" }) }) }), _jsx(YStack, { width: 110, children: _jsx(Field, { label: "Country", children: _jsx(Input, { value: country, onChangeText: setCountry, placeholder: "Country (US)" }) }) })] }), note ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", pt: "$2", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save details" })] })] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: t('Billing details') }), _jsx(XStack, { render: "button", "aria-label": t('Close'), p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: t('These details appear on your invoices and receipts.') }), _jsx(Field, { label: t('Business or personal name'), children: _jsx(Input, { value: name, onChangeText: setName, placeholder: t('e.g. Webby AI, Inc. or Joshua Lynch') }) }), _jsx(Field, { label: t('Address line 1'), children: _jsx(Input, { value: line1, onChangeText: setLine1, placeholder: t('Street address or P.O. Box') }) }), _jsx(Field, { label: t('Address line 2'), hint: t('Optional'), children: _jsx(Input, { value: line2, onChangeText: setLine2, placeholder: t('Suite, unit, building, floor') }) }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(Field, { label: t('City'), children: _jsx(Input, { value: city, onChangeText: setCity, placeholder: t('City') }) }) }), _jsx(YStack, { width: 100, children: _jsx(Field, { label: t('State'), children: _jsx(Input, { value: stateVal, onChangeText: setStateVal, placeholder: t('State / Prov') }) }) })] }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(Field, { label: t('Postal / ZIP code'), children: _jsx(Input, { value: postalCode, onChangeText: setPostalCode, placeholder: t('ZIP or Postal Code') }) }) }), _jsx(YStack, { width: 110, children: _jsx(Field, { label: t('Country'), children: _jsx(Input, { value: country, onChangeText: setCountry, placeholder: t('Country (US)') }) }) })] }), note ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", pt: "$2", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => onOpenChange(false), children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: t('Save details') })] })] })] }) }));
 }
-/** What the plan costs, and when it renews or ends. */
-function terms(p) {
-    const cost = `${money(p.price * p.seats, p.currency)} a ${p.interval}${p.seats > 1 ? ` for ${p.seats} seats` : ''}.`;
-    return p.ends ? `${cost} ${p.ending ? 'Ends' : 'Renews'} on ${day(p.ends)}.` : cost;
+/** What a plan costs by its interval, alone and for its seats: one sentence each, so a language says the interval its own way. */
+const COST = {
+    month: { one: phrase('{amount} a month.'), seats: phrase('{amount} a month for {seats} seats.') },
+    year: { one: phrase('{amount} a year.'), seats: phrase('{amount} a year for {seats} seats.') },
+};
+/** What the plan costs, and when it renews or ends, in the words of `t`. */
+function terms(p, t) {
+    const amount = money(p.price * p.seats, p.currency);
+    const by = COST[p.interval];
+    const cost = by
+        ? t(p.seats > 1 ? by.seats : by.one, { amount, seats: p.seats })
+        : p.seats > 1
+            ? t('{amount} a {interval} for {seats} seats.', { amount, interval: p.interval, seats: p.seats })
+            : t('{amount} a {interval}.', { amount, interval: p.interval });
+    if (!p.ends)
+        return cost;
+    return `${cost} ${p.ending ? t('Ends on {date}.', { date: day(p.ends) }) : t('Renews on {date}.', { date: day(p.ends) })}`;
 }
+/** A saved method as a row names it (api/billing.ts `label`); a card with no brand is said in the words of `t`. */
+const method = (m, t) => (m.last4 && !m.brand ? t('Card •••• {last4}', { last4: m.last4 }) : label(m));
 const word = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1).replace(/_/g, ' ') : '');
 function Ending({ plan, open, working, onOpenChange, onConfirm, }) {
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Cancel your plan?" }), _jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${plan.name} stays on until ${day(plan.ends) || 'the end of this period'}, and nothing is charged after that. You can keep it any time before then.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: "Keep plan" }), _jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: onConfirm, children: "Cancel plan" })] })] })] }) }));
+    const { t } = useI18n();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: t('Cancel your plan?') }), _jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: day(plan.ends)
+                                ? t('{plan} stays on until {date}, and nothing is charged after that. You can keep it any time before then.', { plan: plan.name, date: day(plan.ends) })
+                                : t('{plan} stays on until the end of this period, and nothing is charged after that. You can keep it any time before then.', { plan: plan.name }) }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: t('Keep plan') }), _jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: onConfirm, children: t('Cancel plan') })] })] })] }) }));
 }
 /** One invoice, read in the page, with its PDF to keep. Drawn while it is open, so each opens anew. */
 function Bill({ invoice: b, onClose }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const [note, setNote] = useState('');
     const [working, setWorking] = useState(false);
     const keep = async () => {
         setWorking(true);
         setNote('');
         try {
-            const blob = await pdf(t, b.id);
+            const blob = await pdf(target, b.id);
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
@@ -166,12 +193,12 @@ function Bill({ invoice: b, onClose }) {
             window.setTimeout(() => URL.revokeObjectURL(url), 1000);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setWorking(false);
         }
     };
     const line = (what, cents, strong = false) => (_jsxs(XStack, { justify: "space-between", gap: "$3", children: [_jsx(SizableText, { size: "$2", color: strong ? '$ink' : '$soft', children: what }), _jsx(SizableText, { size: "$2", color: strong ? '$ink' : '$soft', children: money(cents, b.currency) })] }, what));
-    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && onClose(), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: b.number ? `Invoice ${b.number}` : 'Invoice' }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: onClose, children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: [day(b.date), word(b.status), b.start && b.end ? `for ${day(b.start)} – ${day(b.end)}` : ''].filter(Boolean).join(' · ') }), _jsx(YStack, { gap: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: b.lines.length ? b.lines.map((l, i) => line(l.description || `Line ${i + 1}`, l.amount)) : line('Subtotal', b.subtotal) }), _jsxs(YStack, { gap: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: [b.discount ? line('Discount', -b.discount) : null, b.tax ? line('Tax', b.tax) : null, line('Total', b.total, true), b.credit ? line('Credit applied', -b.credit) : null, line('Paid', b.paid), b.due ? line('Due', b.due, true) : null] }), _jsx(Note, { children: note }), _jsx(XStack, { justify: "flex-end", children: _jsxs(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void keep(), children: [_jsx(Download, { size: 14 }), " Download PDF"] }) })] })] }) }));
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && onClose(), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: b.number ? t('Invoice {number}', { number: b.number }) : t('Invoice') }), _jsx(XStack, { render: "button", "aria-label": t('Close'), p: "$1", onPress: onClose, children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: [day(b.date), word(b.status), b.start && b.end ? t('for {start} – {end}', { start: day(b.start), end: day(b.end) }) : ''].filter(Boolean).join(' · ') }), _jsx(YStack, { gap: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: b.lines.length ? b.lines.map((l, i) => line(l.description || t('Line {n}', { n: i + 1 }), l.amount)) : line(t('Subtotal'), b.subtotal) }), _jsxs(YStack, { gap: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: [b.discount ? line(t('Discount'), -b.discount) : null, b.tax ? line(t('Tax'), b.tax) : null, line(t('Total'), b.total, true), b.credit ? line(t('Credit applied'), -b.credit) : null, line(t('Paid'), b.paid), b.due ? line(t('Due'), b.due, true) : null] }), _jsx(Note, { children: note }), _jsx(XStack, { justify: "flex-end", children: _jsxs(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void keep(), children: [_jsx(Download, { size: 14 }), " ", t('Download PDF')] }) })] })] }) }));
 }

package/lib/settings/capabilities.js

@@ -5,51 +5,62 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * servers. A tool that is off is still listed to the agent's discovery but is
  * refused when called. Switching a kind on turns on every tool of that kind;
  * off turns them all off. It is the organization's setting, not only yours.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`).
  */
 import { SizableText, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Switch } from '@hanzo/ui';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { activate, SOURCES, tools } from '../api/capabilities.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
+/** Each kind's name and the sentence that says what it is, English and marked (`phrase`), drawn through `t`. */
 const KINDS = {
-    connector: { label: 'Connector actions', about: 'Actions in the apps your organization connected' },
-    function: { label: 'Functions', about: 'Functions your organization wrote' },
-    'zap-service': { label: 'Services', about: 'Routes of the services your organization runs' },
-    agent: { label: 'Agents', about: 'Your organization’s agents, called as tools' },
-    skill: { label: 'Skills', about: 'Skills attached to agents' },
-    mcp: { label: 'MCP servers', about: 'Tools on the MCP servers your organization added' },
+    connector: { label: phrase('Connector actions'), about: phrase('Actions in the apps your organization connected.') },
+    function: { label: phrase('Functions'), about: phrase('Functions your organization wrote.') },
+    'zap-service': { label: phrase('Services'), about: phrase('Routes of the services your organization runs.') },
+    agent: { label: phrase('Agents'), about: phrase('Your organization’s agents, called as tools.') },
+    skill: { label: phrase('Skills'), about: phrase('Skills attached to agents.') },
+    mcp: { label: phrase('MCP servers'), about: phrase('Tools on the MCP servers your organization added.') },
 };
 export function Capabilities() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const list = useRead(signed ? () => tools(t) : null, [], [t, signed]);
+    const list = useRead(signed ? () => tools(target) : null, [], [target, signed]);
     const [busy, setBusy] = useState('');
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Capabilities" }), _jsx(Soft, { children: "Sign in to see what the agent may use." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Capabilities') }), _jsx(Soft, { children: t('Sign in to see what the agent may use.') })] }));
     }
     const kinds = SOURCES.map((s) => ({ source: s, all: list.value.filter((x) => x.source === s) })).filter((k) => k.all.length);
     const flip = async (source, all, on) => {
         setBusy(source);
         setNote('');
         try {
-            await activate(t, all.map((x) => x.name), on);
+            await activate(target, all.map((x) => x.name), on);
             list.reload();
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setBusy('');
         }
     };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Capabilities", detail: `What the agent may use in ${host.org ?? 'this organization'}. A tool that is off is refused when the agent calls it.` }), _jsx(Group, { title: "Tools", detail: host.admin
-                    ? 'Switching a kind on or off applies to every tool of that kind, for everyone in the organization.'
-                    : 'An org admin switches these, for everyone in the organization.', children: list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Soft, { children: "Reading tools\u2026" })) : !kinds.length ? (_jsx(Soft, { children: "No tools are available to this organization yet." })) : (_jsx(Card, { children: kinds.map(({ source, all }, i) => {
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Capabilities'), detail: host.org
+                    ? t('What the agent may use in {org}. A tool that is off is refused when the agent calls it.', { org: host.org })
+                    : t('What the agent may use in this organization. A tool that is off is refused when the agent calls it.') }), _jsx(Group, { title: t('Tools'), detail: host.admin
+                    ? t('Switching a kind on or off applies to every tool of that kind, for everyone in the organization.')
+                    : t('An org admin switches these, for everyone in the organization.'), children: list.error ? (_jsx(Soft, { children: told(list.error, t) })) : list.loading && !list.value.length ? (_jsx(Soft, { children: t('Reading tools…') })) : !kinds.length ? (_jsx(Soft, { children: t('No tools are available to this organization yet.') })) : (_jsx(Card, { children: kinds.map(({ source, all }, i) => {
                         const on = all.filter((x) => x.activated).length;
-                        return (_jsx(Row, { first: i === 0, title: KINDS[source].label, detail: `${KINDS[source].about}. ${on === all.length ? `All ${all.length} on` : on ? `${on} of ${all.length} on` : `${all.length} available, all off`}.`, trailing: host.admin ? (_jsx(Switch, { "aria-label": KINDS[source].label, checked: on === all.length, disabled: busy !== '', onCheckedChange: (v) => void flip(source, all, v) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: on === all.length ? 'On' : on ? 'Partly on' : 'Off' })) }, source));
+                        // What the kind is, then how much of it is on: two sentences.
+                        const count = on === all.length ? t('All {n} on.', { n: all.length }) : on ? t('{on} of {n} on.', { on, n: all.length }) : t('{n} available, all off.', { n: all.length });
+                        return (_jsx(Row, { first: i === 0, title: t(KINDS[source].label), detail: `${t(KINDS[source].about)} ${count}`, trailing: host.admin ? (_jsx(Switch, { "aria-label": t(KINDS[source].label), checked: on === all.length, disabled: busy !== '', onCheckedChange: (v) => void flip(source, all, v) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: on === all.length ? t('On') : on ? t('Partly on') : t('Off') })) }, source));
                     }) })) }), _jsx(Note, { children: note })] }));
 }

package/lib/settings/card.js

@@ -6,12 +6,18 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * the card from that. Which processor, and its sandbox or live account, is the
  * platform's answer at /v1/billing/settings, so the card is saved to the account
  * it will be charged on.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); what the processor's
+ * field says of a card is the processor's, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { ChevronDown, ChevronUp, X } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
 import { useEffect, useRef, useState } from 'react';
 import { processor, save } from '../api/billing.js';
+import { told } from '../api/call.js';
 import { useRead } from '../data.js';
 import { useTarget } from '../host.js';
 import { Field as FormField } from './ui.js';
@@ -29,10 +35,10 @@ function load(environment) {
         const s = document.createElement('script');
         s.src = src;
         s.async = true;
-        s.onload = () => (window.Square ? resolve(window.Square) : reject(new Error('The card form did not load')));
+        s.onload = () => (window.Square ? resolve(window.Square) : reject(new Error(phrase('The card form did not load'))));
         s.onerror = () => {
             loads.delete(src);
-            reject(new Error('The card form did not load'));
+            reject(new Error(phrase('The card form did not load')));
         };
         document.head.appendChild(s);
     });
@@ -41,8 +47,9 @@ function load(environment) {
 }
 const ready = (p) => Boolean(p && p.provider === 'square' && p.application && p.location);
 export function AddCard({ open, onOpenChange, onSaved }) {
-    const t = useTarget();
-    const cfg = useRead(open ? () => processor(t) : null, null, [t, open]);
+    const { t } = useI18n();
+    const target = useTarget();
+    const cfg = useRead(open ? () => processor(target) : null, null, [target, open]);
     const [box, setBox] = useState(null);
     const field = useRef(null);
     const [mounted, setMounted] = useState(false);
@@ -75,7 +82,7 @@ export function AddCard({ open, onOpenChange, onSaved }) {
         })
             .catch((e) => {
             if (!gone)
-                setNote(e instanceof Error ? e.message : 'The card form did not load');
+                setNote(e instanceof Error ? told(e, t) : t('The card form did not load'));
         });
         return () => {
             gone = true;
@@ -94,7 +101,7 @@ export function AddCard({ open, onOpenChange, onSaved }) {
         try {
             const r = await f.tokenize();
             if (r.status !== 'OK' || !r.token)
-                throw new Error(r.errors?.map((e) => e.message).filter(Boolean).join('; ') || 'The card details are incomplete');
+                throw new Error(r.errors?.map((e) => e.message).filter(Boolean).join('; ') || phrase('The card details are incomplete'));
             const billingAddress = name.trim() || postalCode.trim() || line1.trim() || city.trim() || stateVal.trim()
                 ? {
                     name: name.trim() || undefined,
@@ -105,19 +112,19 @@ export function AddCard({ open, onOpenChange, onSaved }) {
                     country: country.trim() || 'US',
                 }
                 : undefined;
-            const m = await save(t, r.token, billingAddress);
+            const m = await save(target, r.token, billingAddress);
             onSaved(m);
             onOpenChange(false);
         }
         catch (e) {
-            setNote(e instanceof Error ? e.message : 'The card was not saved');
+            setNote(e instanceof Error ? told(e, t) : t('The card was not saved'));
         }
         finally {
             setWorking(false);
         }
     };
-    const why = cfg.error ? cfg.error.message : !cfg.loading && !ready(p) ? 'This deployment takes no cards yet.' : '';
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: "Add a card" }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [why ? (_jsx(SizableText, { size: "$2", color: "$soft", children: why })) : (_jsxs(_Fragment, { children: [_jsxs(YStack, { minH: 96, "aria-label": "Card details", children: [_jsx("div", { ref: setBox, style: { minHeight: 96 } }), !mounted && !note ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Loading the card form\u2026" })) : null] }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(FormField, { label: "Name on card", hint: "Optional", children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "Name or business" }) }) }), _jsx(YStack, { width: 120, children: _jsx(FormField, { label: "Postal code", hint: "Optional", children: _jsx(Input, { value: postalCode, onChangeText: setPostalCode, placeholder: "ZIP / Postal" }) }) })] }), _jsx(XStack, { children: _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setMoreAddress(!moreAddress), children: [moreAddress ? _jsx(ChevronUp, { size: 14 }) : _jsx(ChevronDown, { size: 14 }), moreAddress ? 'Hide address' : 'Add billing address'] }) }), moreAddress ? (_jsxs(YStack, { gap: "$2", pt: "$1", children: [_jsx(FormField, { label: "Street address", children: _jsx(Input, { value: line1, onChangeText: setLine1, placeholder: "Address line 1" }) }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(FormField, { label: "City", children: _jsx(Input, { value: city, onChangeText: setCity, placeholder: "City" }) }) }), _jsx(YStack, { width: 90, children: _jsx(FormField, { label: "State", children: _jsx(Input, { value: stateVal, onChangeText: setStateVal, placeholder: "State" }) }) }), _jsx(YStack, { width: 90, children: _jsx(FormField, { label: "Country", children: _jsx(Input, { value: country, onChangeText: setCountry, placeholder: "Country (US)" }) }) })] })] })) : null, _jsx(SizableText, { size: "$1", color: "$soft", children: p && p.environment !== 'production'
-                                        ? 'Sandbox: use a test card. Nothing is charged.'
-                                        : 'The card number goes to the payment processor, never to Hanzo. Saving it charges nothing.' })] })), note ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: !mounted || working, onPress: () => void add(), children: "Save card" })] })] })] }) }));
+    const why = cfg.error ? told(cfg.error, t) : !cfg.loading && !ready(p) ? t('This deployment takes no cards yet.') : '';
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: t('Add a card') }), _jsx(XStack, { render: "button", "aria-label": t('Close'), p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [why ? (_jsx(SizableText, { size: "$2", color: "$soft", children: why })) : (_jsxs(_Fragment, { children: [_jsxs(YStack, { minH: 96, "aria-label": t('Card details'), children: [_jsx("div", { ref: setBox, style: { minHeight: 96 } }), !mounted && !note ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('Loading the card form…') })) : null] }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(FormField, { label: t('Name on card'), hint: t('Optional'), children: _jsx(Input, { value: name, onChangeText: setName, placeholder: t('Name or business') }) }) }), _jsx(YStack, { width: 120, children: _jsx(FormField, { label: t('Postal code'), hint: t('Optional'), children: _jsx(Input, { value: postalCode, onChangeText: setPostalCode, placeholder: t('ZIP / Postal') }) }) })] }), _jsx(XStack, { children: _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setMoreAddress(!moreAddress), children: [moreAddress ? _jsx(ChevronUp, { size: 14 }) : _jsx(ChevronDown, { size: 14 }), moreAddress ? t('Hide address') : t('Add billing address')] }) }), moreAddress ? (_jsxs(YStack, { gap: "$2", pt: "$1", children: [_jsx(FormField, { label: t('Street address'), children: _jsx(Input, { value: line1, onChangeText: setLine1, placeholder: t('Address line 1') }) }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(FormField, { label: t('City'), children: _jsx(Input, { value: city, onChangeText: setCity, placeholder: t('City') }) }) }), _jsx(YStack, { width: 90, children: _jsx(FormField, { label: t('State'), children: _jsx(Input, { value: stateVal, onChangeText: setStateVal, placeholder: t('State') }) }) }), _jsx(YStack, { width: 90, children: _jsx(FormField, { label: t('Country'), children: _jsx(Input, { value: country, onChangeText: setCountry, placeholder: t('Country (US)') }) }) })] })] })) : null, _jsx(SizableText, { size: "$1", color: "$soft", children: p && p.environment !== 'production'
+                                        ? t('Sandbox: use a test card. Nothing is charged.')
+                                        : t('The card number goes to the payment processor, never to Hanzo. Saving it charges nothing.') })] })), note ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: !mounted || working, onPress: () => void add(), children: t('Save card') })] })] })] }) }));
 }