@hanzo/build 0.2.80 → 0.2.82

package/lib/plugins/index.js

@@ -1,26 +1,10 @@
-/**
- * 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 { useEffect, useState } from 'react';
 import { templates } from '../api/studio.js';
 import { projects } from '../api/projects.js';
 import { administers } from '../claims.js';
 import { say } from '../customize/say.js';
 import { path } from '../route.js';
+import { english } from '../say.js';
 import { pdf } from './pdf.js';
 import { project } from './project.js';
 import { designer } from './design.js';
@@ -72,10 +56,10 @@ export function usePlugins(t) {
 }
 /** Whether a plugin that prepares is on in this conversation. */
 const on = (p, g) => (p.id === deep.id ? g.research : g.plugins.includes(p.id));
-/** The `+` menu's Plugins shelf. */
-export function shelf(p, g, c) {
+/** 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 function shelf(p, g, c, t = english) {
     return {
-        rows: p.plugins.map((x) => ({ id: x.id, label: x.name, note: x.note, icon: x.icon, on: x.prepare ? on(x, g.gear) : undefined })),
+        rows: p.plugins.map((x) => ({ id: x.id, label: t(x.name), note: t(x.note), icon: x.icon, on: x.prepare ? on(x, g.gear) : undefined })),
         pick: (id) => {
             const x = p.plugins.find((y) => y.id === id);
             if (!x)
@@ -89,9 +73,9 @@ export function shelf(p, g, c) {
         },
         loading: p.loading,
         error: p.error,
-        search: 'Type to search plugins',
-        empty: 'No plugins here',
-        create: { label: 'Create plugin', onPress: () => c.go(BUILD) },
+        search: t('Type to search plugins'),
+        empty: t('No plugins here'),
+        create: { label: t('Create plugin'), onPress: () => c.go(BUILD) },
     };
 }
 /** The plugins this message asks, in the menu's order. */
@@ -118,15 +102,16 @@ export function merge(preps) {
 /**
  * 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 async function prep(plugins, g, turn, c, signal, denied = []) {
+export async function prep(plugins, g, turn, c, signal, denied = [], t = english) {
     const preps = await Promise.all(active(plugins, g)
         .filter((p) => !denied.includes(p.id))
         .map((p) => p.prepare(turn, c, signal).catch((e) => {
         if (signal.aborted)
             throw e;
-        throw new Error(`${p.name}: ${say(e)}`);
+        throw new Error(t('{plugin}: {reason}', { plugin: t(p.name), reason: say(e) }));
     })));
     return merge(preps);
 }

package/lib/plugins/pdf.js

@@ -7,6 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * `document` template writes the ask up and renders it as a PDF, and the answer
  * is the file.
  */
+import { phrase } from '@hanzo/i18n';
 import { FileText } from '@hanzogui/lucide-icons-2';
 import { json } from '../api/chat.js';
 import { make } from '../api/studio.js';
@@ -75,7 +76,7 @@ export function pdf(makes) {
     return {
         id: 'pdf',
         name: 'PDF',
-        note: makes ? 'Read, create and verify PDFs' : 'Read and verify PDFs',
+        note: makes ? phrase('Read, create and verify PDFs') : phrase('Read and verify PDFs'),
         icon: _jsx(FileText, { size: 16 }),
         prepare: (turn, c, signal) => (turn.files.some(isPdf) || !makes ? study(turn.files) : create(turn, c.target, signal)),
     };

package/lib/plugins/project.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Work in a project: pick one of the org's projects (GET /v1/projects). A
+ * Work in a project: pick one of the org's projects (GET /v1/project). A
  * conversation does not belong to a project — work in one is a Dev run tagged
  * with it — so a message in the composer starts a Dev run on the picked project
  * (POST /v1/agent/coding, the person's saved model) and opens it; with nothing
  * written, the project's workspace opens to start one there.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Folder } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogDescription, DialogTitle, Input } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
@@ -22,6 +24,7 @@ export function find(list, q) {
     });
 }
 function Picker({ c }) {
+    const { t } = useI18n();
     const [list, setList] = useState(null);
     const [q, setQ] = useState('');
     const [note, setNote] = useState('');
@@ -54,12 +57,12 @@ function Picker({ c }) {
         }
     };
     const shown = list ? find(list, q) : [];
-    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && c.show(null), children: _jsxs(DialogContent, { maxW: 520, width: "100%", children: [_jsx(DialogTitle, { children: "Work in a project" }), _jsx(DialogDescription, { children: ask ? 'Your message starts a Dev run on the project you pick.' : 'Open a project to start working in it.' }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Search projects", "aria-label": "Search projects", autoFocus: true }), _jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", maxH: 360, style: { overflowY: 'auto' }, children: [!list && !note ? (_jsx(SizableText, { size: "$2", color: "$soft", p: "$3", children: "Reading your projects\u2026" })) : null, list && !shown.length ? (_jsx(SizableText, { size: "$2", color: "$soft", p: "$3", children: q ? 'Nothing matches' : 'No projects yet' })) : null, shown.map((p, i) => (_jsxs(XStack, { render: "button", "aria-label": ask ? `Start a run on ${p.name}` : `Open ${p.name}`, disabled: Boolean(busy), onPress: () => void pick(p), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", cursor: busy ? 'default' : 'pointer', hoverStyle: { bg: '$hover' }, style: { textAlign: 'left' }, children: [_jsx(Folder, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === p.slug ? 'Starting…' : p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: p.repo ? address(p.repo) : 'No repository yet' })] })] }, p.slug)))] }), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null, _jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => c.show(null), children: "Cancel" }) })] }) }));
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && c.show(null), children: _jsxs(DialogContent, { maxW: 520, width: "100%", children: [_jsx(DialogTitle, { children: t('Work in a project') }), _jsx(DialogDescription, { children: ask ? t('Your message starts a Dev run on the project you pick.') : t('Open a project to start working in it.') }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: t('Search projects'), "aria-label": t('Search projects'), autoFocus: true }), _jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", maxH: 360, style: { overflowY: 'auto' }, children: [!list && !note ? (_jsx(SizableText, { size: "$2", color: "$soft", p: "$3", children: t('Reading your projects…') })) : null, list && !shown.length ? (_jsx(SizableText, { size: "$2", color: "$soft", p: "$3", children: q ? t('Nothing matches') : t('No projects yet') })) : null, shown.map((p, i) => (_jsxs(XStack, { render: "button", "aria-label": ask ? t('Start a run on {name}', { name: p.name }) : t('Open {name}', { name: p.name }), disabled: Boolean(busy), onPress: () => void pick(p), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", cursor: busy ? 'default' : 'pointer', hoverStyle: { bg: '$hover' }, "$platform-web": { textAlign: 'start' }, children: [_jsx(Folder, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === p.slug ? t('Starting…') : p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: p.repo ? address(p.repo) : t('No repository yet') })] })] }, p.slug)))] }), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null, _jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => c.show(null), children: t('Cancel') }) })] }) }));
 }
 export const project = {
     id: 'project',
-    name: 'Work in a project',
-    note: 'Start a Dev run in a project',
+    name: phrase('Work in a project'),
+    note: phrase('Start a Dev run in a project'),
     icon: _jsx(Folder, { size: 16 }),
     open: (c) => c.show(_jsx(Picker, { c: c })),
 };

package/lib/plugins/research.js

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   POST /v1/websearch          {q} → {results: [{url, title, content}]}
  *   POST /v1/crawl              {url} → {success, data: {markdown}}; a page it could not read is success:false
  */
+import { phrase } from '@hanzo/i18n';
 import { Telescope } from '@hanzogui/lucide-icons-2';
 import { call } from '../api/call.js';
 import { ask, json } from '../api/chat.js';
@@ -139,8 +140,8 @@ export async function research(turn, t, signal, now = new Date()) {
 }
 export const deep = {
     id: 'research',
-    name: 'Deep research',
-    note: 'Get a detailed, cited report',
+    name: phrase('Deep research'),
+    note: phrase('Get a detailed, cited report'),
     icon: _jsx(Telescope, { size: 16 }),
     prepare: (turn, c, signal) => research(turn, c.target, signal),
 };

package/lib/plugins/sketch.js

@@ -4,6 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * paperclip attaches a file. Nothing leaves the page until the message goes.
  */
 import { XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Signature } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogDescription, DialogTitle } from '@hanzo/ui';
 import { useEffect, useRef, useState } from 'react';
@@ -33,6 +35,7 @@ export function paint(g, strokes) {
     }
 }
 function Pad({ c }) {
+    const { t } = useI18n();
     const canvas = useRef(null);
     const strokes = useRef([]);
     const drawing = useRef(false);
@@ -87,12 +90,12 @@ function Pad({ c }) {
             c.show(null);
         }, 'image/png');
     };
-    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && c.show(null), children: _jsxs(DialogContent, { maxW: 720, width: "100%", children: [_jsx(DialogTitle, { children: "Sketch" }), _jsx(DialogDescription, { children: "Draw, then attach it to your message." }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: 8, overflow: "hidden", children: _jsx("canvas", { ref: canvas, width: W, height: H, "aria-label": "Sketch pad", "data-slot": "sketch-pad", onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up, style: { display: 'block', width: '100%', aspectRatio: `${W} / ${H}`, touchAction: 'none', cursor: 'crosshair', background: PAPER } }) }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: !count, onPress: undo, children: "Undo" }), _jsx(Button, { size: "sm", variant: "ghost", disabled: !count, onPress: clear, children: "Clear" }), _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: () => c.show(null), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: !count || busy, onPress: attach, children: "Attach" })] })] }) }));
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && c.show(null), children: _jsxs(DialogContent, { maxW: 720, width: "100%", children: [_jsx(DialogTitle, { children: t('Sketch') }), _jsx(DialogDescription, { children: t('Draw, then attach it to your message.') }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: 8, overflow: "hidden", children: _jsx("canvas", { ref: canvas, width: W, height: H, "aria-label": t('Sketch pad'), "data-slot": "sketch-pad", onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up, style: { display: 'block', width: '100%', aspectRatio: `${W} / ${H}`, touchAction: 'none', cursor: 'crosshair', background: PAPER } }) }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: !count, onPress: undo, children: t('Undo') }), _jsx(Button, { size: "sm", variant: "ghost", disabled: !count, onPress: clear, children: t('Clear') }), _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: () => c.show(null), children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: !count || busy, onPress: attach, children: t('Attach') })] })] }) }));
 }
 export const sketch = {
     id: 'sketch',
-    name: 'Sketch',
-    note: 'Draw and attach an image',
+    name: phrase('Sketch'),
+    note: phrase('Draw and attach an image'),
     icon: _jsx(Signature, { size: 16 }),
     open: (c) => c.show(_jsx(Pad, { c: c })),
 };

package/lib/plugins/slides.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * the file, and the run in Studio, where it is edited. A later message in the
  * same conversation revises the last deck rather than starting over.
  */
+import { phrase } from '@hanzo/i18n';
 import { Presentation } from '@hanzogui/lucide-icons-2';
 import { json } from '../api/chat.js';
 import { make } from '../api/studio.js';
@@ -47,8 +48,8 @@ export async function deck(turn, t, signal) {
 }
 export const slides = {
     id: 'slides',
-    name: 'Presentations',
-    note: 'Create and edit decks',
+    name: phrase('Presentations'),
+    note: phrase('Create and edit decks'),
     icon: _jsx(Presentation, { size: 16 }),
     prepare: (turn, c, signal) => deck(turn, c.target, signal),
 };

package/lib/plugins/template.js

@@ -7,6 +7,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * it is saved. Writing a skill takes an org admin, so only an admin is offered it.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { LayoutTemplate } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogDescription, DialogTitle, Input, Textarea } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
@@ -44,6 +46,7 @@ export function document(d) {
     return `---\nname: ${d.name}\ndescription: ${JSON.stringify(d.description.replace(/\s+/g, ' ').trim())}\n---\n\n${d.body.trim()}\n`;
 }
 function Creator({ c }) {
+    const { t } = useI18n();
     const from = c.draft.trim();
     const [d, setD] = useState({ name: from ? slug(from.split(/\s+/).slice(0, 6).join(' ')) : '', description: first(from), body: from });
     const [drafting, setDrafting] = useState(Boolean(from));
@@ -81,12 +84,12 @@ function Creator({ c }) {
             setBusy(false);
         }
     };
-    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && c.show(null), children: _jsxs(DialogContent, { maxW: 640, width: "100%", children: [_jsx(DialogTitle, { children: "Template Creator" }), _jsx(DialogDescription, { children: saved ? `Saved as ${saved}. It is under + › Skills.` : drafting ? 'Hanzo is drafting the template from your message…' : 'A reusable template, saved as one of your skills.' }), saved ? null : (_jsxs(YStack, { gap: "$3", children: [_jsx(Input, { value: d.name, onChangeText: (name) => setD({ ...d, name }), placeholder: "weekly-update", "aria-label": "Name", autoCapitalize: "none" }), _jsx(Input, { value: d.description, onChangeText: (description) => setD({ ...d, description }), placeholder: "When to use it", "aria-label": "Description" }), _jsx(Textarea, { value: d.body, onChangeText: (body) => setD({ ...d, body }), placeholder: '# Weekly update\n\nInputs: {{team}}, {{week}}\n\n1. …', "aria-label": "Template", rows: 12, style: { maxHeight: '40vh', overflowY: 'auto' } })] })), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null, _jsx(XStack, { gap: "$2", justify: "flex-end", children: saved ? (_jsx(Button, { size: "sm", onPress: () => c.show(null), children: "Done" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => c.show(null), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || drafting || !d.name || !d.body.trim(), onPress: () => void save(), children: "Save" })] })) })] }) }));
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && c.show(null), children: _jsxs(DialogContent, { maxW: 640, width: "100%", children: [_jsx(DialogTitle, { children: t('Template Creator') }), _jsx(DialogDescription, { children: saved ? t('Saved as {name}. It is under + › Skills.', { name: saved }) : drafting ? t('Hanzo is drafting the template from your message…') : t('A reusable template, saved as one of your skills.') }), saved ? null : (_jsxs(YStack, { gap: "$3", children: [_jsx(Input, { value: d.name, onChangeText: (name) => setD({ ...d, name }), placeholder: "weekly-update", "aria-label": t('Name'), autoCapitalize: "none" }), _jsx(Input, { value: d.description, onChangeText: (description) => setD({ ...d, description }), placeholder: t('When to use it'), "aria-label": t('Description') }), _jsx(Textarea, { value: d.body, onChangeText: (body) => setD({ ...d, body }), placeholder: '# Weekly update\n\nInputs: {{team}}, {{week}}\n\n1. …', "aria-label": t('Template'), rows: 12, maxH: "40vh", overflowY: "auto" })] })), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null, _jsx(XStack, { gap: "$2", justify: "flex-end", children: saved ? (_jsx(Button, { size: "sm", onPress: () => c.show(null), children: t('Done') })) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => c.show(null), children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: busy || drafting || !d.name || !d.body.trim(), onPress: () => void save(), children: t('Save') })] })) })] }) }));
 }
 export const template = {
     id: 'template',
-    name: 'Template Creator',
-    note: 'Templates saved as skills',
+    name: phrase('Template Creator'),
+    note: phrase('Templates saved as skills'),
     icon: _jsx(LayoutTemplate, { size: 16 }),
     open: (c) => c.show(_jsx(Creator, { c: c })),
 };

package/lib/plus.js

@@ -8,39 +8,51 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *
  * On a laptop each shelf opens beside the menu; on a phone it is a page of the
  * same menu, with Back.
+ *
+ * The menu's own words are the reader's language (@hanzo/i18n `t`); what a
+ * shelf holds — its rows, its links, its search and empty words — is the
+ * surface's, drawn as given.
  */
 import { SizableText, useMedia, XStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Blocks, Bot, Briefcase, Brain, Monitor, Palette, Paperclip, Plug, Plus as PlusIcon, ScrollText, Telescope, } from '@hanzogui/lucide-icons-2';
 import { DropdownMenu, DropdownMenuBack, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuItem, DropdownMenuLoading, DropdownMenuPage, DropdownMenuSearch, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@hanzo/ui';
 import { Check } from '@hanzogui/lucide-icons-2';
 import { useMemo, useState } from 'react';
 const ICON = 16;
-/** The shelves, in the menu's order, with their names and marks. */
+/**
+ * The shelves, in the menu's order, with their names and marks, and the three
+ * sentences a shelf says of itself: its search's name, while it reads, and
+ * when it holds nothing. Whole sentences, so a language puts the noun where it goes.
+ */
 const SHELVES = [
-    { key: 'agents', label: 'Agents', icon: _jsx(Bot, { size: ICON }) },
-    { key: 'skills', label: 'Skills', icon: _jsx(ScrollText, { size: ICON }) },
-    { key: 'connectors', label: 'Connectors', icon: _jsx(Blocks, { size: ICON }) },
-    { key: 'design', label: 'Design system', icon: _jsx(Palette, { size: ICON }) },
-    { key: 'plugins', label: 'Plugins', icon: _jsx(Plug, { size: ICON }) },
-    { key: 'devices', label: 'Devices', icon: _jsx(Monitor, { size: ICON }) },
+    { key: 'agents', label: phrase('Agents'), search: phrase('Search agents'), reading: phrase('Reading agents'), none: phrase('No agents yet'), icon: _jsx(Bot, { size: ICON }) },
+    { key: 'skills', label: phrase('Skills'), search: phrase('Search skills'), reading: phrase('Reading skills'), none: phrase('No skills yet'), icon: _jsx(ScrollText, { size: ICON }) },
+    { key: 'connectors', label: phrase('Connectors'), search: phrase('Search connectors'), reading: phrase('Reading connectors'), none: phrase('No connectors yet'), icon: _jsx(Blocks, { size: ICON }) },
+    { key: 'design', label: phrase('Design system'), search: phrase('Search design system'), reading: phrase('Reading design system'), none: phrase('No design system yet'), icon: _jsx(Palette, { size: ICON }) },
+    { key: 'plugins', label: phrase('Plugins'), search: phrase('Search plugins'), reading: phrase('Reading plugins'), none: phrase('No plugins yet'), icon: _jsx(Plug, { size: ICON }) },
+    { key: 'devices', label: phrase('Devices'), search: phrase('Search devices'), reading: phrase('Reading devices'), none: phrase('No devices yet'), icon: _jsx(Monitor, { size: ICON }) },
 ];
 /** A row's anatomy: its mark, its label, a dim note, and a check when it is on. */
 function Line({ icon, label, note, on, tail }) {
     return (_jsxs(XStack, { flex: 1, minW: 0, items: "center", gap: 10, children: [icon ? (_jsx(XStack, { width: ICON, height: ICON, items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: icon })) : null, _jsx(SizableText, { fontSize: 14, color: "$ink", numberOfLines: 1, shrink: 0, children: label }), note ? (_jsx(SizableText, { fontSize: 13, color: "$hint", numberOfLines: 1, flex: 1, minW: 0, children: note })) : (_jsx(XStack, { flex: 1 })), tail, on ? _jsx(Check, { size: ICON, color: "var(--primary)", "aria-hidden": true }) : null] }));
 }
 /** A shelf's rows, its status, then its ways to more. */
-function Contents({ shelf, name, close }) {
+function Contents({ shelf, words, close }) {
+    const { t } = useI18n();
     const [q, setQ] = useState('');
     const needle = q.trim().toLowerCase();
     const rows = needle ? shelf.rows.filter((r) => `${r.label} ${r.note ?? ''}`.toLowerCase().includes(needle)) : shelf.rows;
     const links = [shelf.create, shelf.manage, shelf.browse].filter((l) => Boolean(l));
-    return (_jsxs(_Fragment, { children: [shelf.search ? _jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: shelf.search, "aria-label": `Search ${name.toLowerCase()}` }) : null, shelf.loading && !shelf.rows.length ? _jsxs(DropdownMenuLoading, { children: ["Reading ", name.toLowerCase()] }) : null, shelf.error ? _jsx(DropdownMenuEmpty, { children: shelf.error }) : null, !shelf.loading && !shelf.error && !rows.length ? _jsx(DropdownMenuEmpty, { children: needle ? 'Nothing matches' : (shelf.empty ?? `No ${name.toLowerCase()} yet`) }) : null, rows.map((r) => (_jsx(DropdownMenuItem, { preventCloseOnSelect: true, onSelect: () => shelf.pick(r.id), "aria-checked": r.on ?? false, "data-slot": "plus-row", children: _jsx(Line, { icon: r.icon, label: r.label, note: r.note, on: r.on }) }, r.id))), links.length ? _jsx(DropdownMenuSeparator, {}) : null, links.map((l, i) => (_jsx(DropdownMenuItem, { onSelect: () => {
+    return (_jsxs(_Fragment, { children: [shelf.search ? _jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: shelf.search, "aria-label": t(words.search) }) : null, shelf.loading && !shelf.rows.length ? _jsx(DropdownMenuLoading, { children: t(words.reading) }) : null, shelf.error ? _jsx(DropdownMenuEmpty, { children: shelf.error }) : null, !shelf.loading && !shelf.error && !rows.length ? _jsx(DropdownMenuEmpty, { children: needle ? t('Nothing matches') : (shelf.empty ?? t(words.none)) }) : null, rows.map((r) => (_jsx(DropdownMenuItem, { preventCloseOnSelect: true, onSelect: () => shelf.pick(r.id), "aria-checked": r.on ?? false, "data-slot": "plus-row", children: _jsx(Line, { icon: r.icon, label: r.label, note: r.note, on: r.on }) }, r.id))), links.length ? _jsx(DropdownMenuSeparator, {}) : null, links.map((l, i) => (_jsx(DropdownMenuItem, { onSelect: () => {
                     close();
                     l.onPress();
                 }, children: _jsx(Line, { icon: l === shelf.manage ? _jsx(Briefcase, { size: ICON }) : _jsx(PlusIcon, { size: ICON }), label: l.label }) }, l.label)))] }));
 }
 /** The `+` and its menu. */
 export function Plus(p) {
+    const { t } = useI18n();
     const media = useMedia();
     const wide = media.sm;
     const [open, setOpen] = useState(false);
@@ -49,12 +61,12 @@ export function Plus(p) {
     const close = () => setOpen(false);
     const shelves = useMemo(() => SHELVES.filter((s) => p[s.key]), [p]);
     const switches = [
-        p.research ? { key: 'research', label: 'Research', icon: _jsx(Telescope, { size: ICON }), s: p.research } : null,
-        p.memory ? { key: 'memory', label: 'Memory', icon: _jsx(Brain, { size: ICON }), s: p.memory } : null,
+        p.research ? { key: 'research', label: t('Research'), icon: _jsx(Telescope, { size: ICON }), s: p.research } : null,
+        p.memory ? { key: 'memory', label: t('Memory'), icon: _jsx(Brain, { size: ICON }), s: p.memory } : null,
     ].filter((x) => x !== null);
     const main = (_jsxs(_Fragment, { children: [p.upload ? (_jsx(DropdownMenuItem, { "data-slot": "plus-upload", onSelect: () => {
                     close();
                     p.upload?.();
-                }, children: _jsx(Line, { icon: _jsx(Paperclip, { size: ICON }), label: "Upload or add files", tail: _jsx(DropdownMenuShortcut, { children: "Ctrl+U" }) }) })) : null, p.upload && shelves.length ? _jsx(DropdownMenuSeparator, {}) : null, shelves.map((s) => wide ? (_jsxs(DropdownMenuSub, { open: sub === s.key, onOpenChange: (o) => setSub(o ? s.key : sub === s.key ? null : sub), children: [_jsx(DropdownMenuSubTrigger, { "data-slot": `plus-${s.key}`, onPress: () => setSub(s.key), children: _jsx(Line, { icon: s.icon, label: s.label }) }), sub === s.key ? (_jsx(DropdownMenuSubContent, { minW: 200, maxW: 340, maxH: 420, pointerEvents: "auto", style: { overflowY: "auto" }, children: _jsx(Contents, { shelf: p[s.key], name: s.label, close: close }) })) : null] }, s.key)) : (_jsx(DropdownMenuItem, { page: s.key, "data-slot": `plus-${s.key}`, children: _jsx(Line, { icon: s.icon, label: s.label }) }, s.key))), switches.length && (p.upload || shelves.length) ? _jsx(DropdownMenuSeparator, {}) : null, switches.map((w) => (_jsx(DropdownMenuItem, { preventCloseOnSelect: true, onSelect: () => w.s.set(!w.s.on), role: 'menuitemcheckbox', "aria-checked": w.s.on, "data-slot": `plus-${w.key}`, children: _jsx(Line, { icon: w.icon, label: w.label, on: w.s.on }) }, w.key)))] }));
-    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, ...(wide ? null : { defaultPage: 'main' }), children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: p.disabled, children: _jsx(XStack, { render: "button", "data-slot": "plus", "aria-label": "Add files, agents, skills and more", width: 32, height: 32, rounded: 8, items: "center", justify: "center", shrink: 0, cursor: p.disabled ? 'default' : 'pointer', opacity: p.disabled ? 0.4 : 1, bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { width: 44, height: 44, rounded: 22 }, children: _jsx(PlusIcon, { size: 18, color: "$ink" }) }) }), _jsx(DropdownMenuContent, { align: "start", minW: 240, "data-slot": "plus-menu", children: wide ? (main) : (_jsxs(_Fragment, { children: [_jsx(DropdownMenuPage, { id: "main", children: main }), shelves.map((s) => (_jsxs(DropdownMenuPage, { id: s.key, children: [_jsx(DropdownMenuBack, { children: s.label }), _jsx(Contents, { shelf: p[s.key], name: s.label, close: close })] }, s.key)))] })) })] }));
+                }, children: _jsx(Line, { icon: _jsx(Paperclip, { size: ICON }), label: t('Upload or add files'), tail: _jsx(DropdownMenuShortcut, { "data-i18n-ltr": true, children: "Ctrl+U" }) }) })) : null, p.upload && shelves.length ? _jsx(DropdownMenuSeparator, {}) : null, shelves.map((s) => wide ? (_jsxs(DropdownMenuSub, { open: sub === s.key, onOpenChange: (o) => setSub(o ? s.key : sub === s.key ? null : sub), children: [_jsx(DropdownMenuSubTrigger, { "data-slot": `plus-${s.key}`, onPress: () => setSub(s.key), children: _jsx(Line, { icon: s.icon, label: t(s.label) }) }), sub === s.key ? (_jsx(DropdownMenuSubContent, { minW: 200, maxW: 340, maxH: 420, pointerEvents: "auto", style: { overflowY: "auto" }, children: _jsx(Contents, { shelf: p[s.key], words: s, close: close }) })) : null] }, s.key)) : (_jsx(DropdownMenuItem, { page: s.key, "data-slot": `plus-${s.key}`, children: _jsx(Line, { icon: s.icon, label: t(s.label) }) }, s.key))), switches.length && (p.upload || shelves.length) ? _jsx(DropdownMenuSeparator, {}) : null, switches.map((w) => (_jsx(DropdownMenuItem, { preventCloseOnSelect: true, onSelect: () => w.s.set(!w.s.on), role: 'menuitemcheckbox', "aria-checked": w.s.on, "data-slot": `plus-${w.key}`, children: _jsx(Line, { icon: w.icon, label: w.label, on: w.s.on }) }, w.key)))] }));
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, ...(wide ? null : { defaultPage: 'main' }), children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: p.disabled, children: _jsx(XStack, { render: "button", "data-slot": "plus", "aria-label": t('Add files, agents, skills and more'), width: 32, height: 32, rounded: 8, items: "center", justify: "center", shrink: 0, cursor: p.disabled ? 'default' : 'pointer', opacity: p.disabled ? 0.4 : 1, bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { width: 44, height: 44, rounded: 22 }, children: _jsx(PlusIcon, { size: 18, color: "$ink" }) }) }), _jsx(DropdownMenuContent, { align: "start", minW: 240, "data-slot": "plus-menu", children: wide ? (main) : (_jsxs(_Fragment, { children: [_jsx(DropdownMenuPage, { id: "main", children: main }), shelves.map((s) => (_jsxs(DropdownMenuPage, { id: s.key, children: [_jsx(DropdownMenuBack, { children: t(s.label) }), _jsx(Contents, { shelf: p[s.key], words: s, close: close })] }, s.key)))] })) })] }));
 }

package/lib/prefs.d.ts

@@ -1,17 +1,3 @@
-/**
- * The person's own settings, read once for the whole builder and shared by
- * everything that follows them: Settings writes them, New starts from the
- * coding defaults and says the name, dictation listens in the chosen language,
- * and the page takes the theme, the text size and the motion.
- *
- * The last document read is kept in this browser, per org, so the page is
- * drawn the person's way before the platform answers. A save shows at once and
- * is taken back, key by key, if the platform refuses it.
- *
- * A host mounts it too, above the builder (the Hanzo app, for Chat's side
- * panel), and the builder's own then reads through that one: one document, one
- * read. The look (`Look`) is the builder's alone: a host has its own.
- */
 import { type ReactNode } from 'react';
 import { type Patch, type Prefs } from './api/pref.ts';
 export interface PrefState {

package/lib/prefs.js

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * panel), and the builder's own then reads through that one: one document, one
  * read. The look (`Look`) is the builder's alone: a host has its own.
  */
+import { phrase } from '@hanzo/i18n';
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { merge, read, save } from './api/pref.js';
 import { useKept, useRead } from './data.js';
@@ -36,7 +37,7 @@ function Keep({ children }) {
     }, [doc.value, keep]);
     const write = useCallback(async (patch) => {
         if (!signed)
-            throw new Error('Sign in to save your settings.');
+            throw new Error(phrase('Sign in to save your settings.'));
         const before = now.current;
         now.current = merge(before, patch);
         keep(now.current);