@hanzo/build 0.2.80 → 0.2.82

package/lib/landing.js

@@ -12,8 +12,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * names one, and an ask with none chosen opens the picker rather than making a
  * project up from its words. The choices a person made here are kept in this
  * browser, per org, so the next New starts where the last one did.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`, the target is
+ * `target`); a codebase's, a machine's and a branch's names are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Cloud, Monitor } from '@hanzogui/lucide-icons-2';
 import { Button } from '@hanzo/ui';
 import { BranchSelect, ChipSelect, FooterLink, RepoSelect } from '@hanzo/ui/product';
@@ -43,10 +48,10 @@ import { MEASURE, Prompt, useEar } from './prompt.js';
 import { Monitor as Device } from '@hanzogui/lucide-icons-2';
 import { compose, Files, pick, read as readFiles } from './tools.js';
 import { useSpoken } from './voice.js';
-/** One vocabulary for the mode, on New and in a workspace. */
+/** One vocabulary for the mode, on New and in a workspace: English, marked (`phrase`), drawn through `t`. */
 export const MODES = [
-    { id: 'build', label: 'Build', hint: 'Edits, commits and pushes a branch' },
-    { id: 'plan', label: 'Plan', hint: 'Plans the change and writes nothing' },
+    { id: 'build', label: phrase('Build'), hint: phrase('Edits, commits and pushes a branch') },
+    { id: 'plan', label: phrase('Plan'), hint: phrase('Plans the change and writes nothing') },
 ];
 /** The org's repositories before they have been read: no answer, so nothing is judged from it. */
 const NOHOMES = { homes: [], whole: false };
@@ -79,7 +84,8 @@ export function hold(u) {
 }
 export function Landing({ onStarted }) {
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
+    const { t } = useI18n();
     const signed = Boolean(host.person);
     const { prefs, save: savePrefs } = usePrefs();
     const [stored, keep] = useKept(`hanzo.build.new.${host.org ?? 'none'}`, null);
@@ -109,21 +115,21 @@ export function Landing({ onStarted }) {
         // The handover is read on this mount only.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const places = usePlaces(t, signed);
+    const places = usePlaces(target, signed);
     // The model and effort Chat shares, and dictation into the ask.
-    const { limits } = useLimits(signed ? (signal) => readLimits(t, signal) : null, t);
-    const mind = useMind(t, limits?.plan);
-    const voice = useVoice({ speech: useEar(t), language: useSpoken(), ...useDictation(draft, setDraft) });
-    const talk = useTalk({ baseUrl: t.api, token: () => t.token(), ...(t.org ? { org: t.org } : {}) });
+    const { limits } = useLimits(signed ? (signal) => readLimits(target, signal) : null, target);
+    const mind = useMind(target, limits?.plan);
+    const voice = useVoice({ speech: useEar(target), language: useSpoken(), ...useDictation(draft, setDraft) });
+    const talk = useTalk({ baseUrl: target.api, token: () => target.token(), ...(target.org ? { org: target.org } : {}) });
     // What the run carries beside the ask: skills, memory and the mode, as Chat's turns do.
-    const carry = useCarry(t, '', (tab) => host.go(path({ kind: 'customize', tab })), {
+    const carry = useCarry(target, '', (tab) => host.go(path({ kind: 'customize', tab })), {
         draft,
         setDraft,
         // A run reads text: a file that is one rides the ask, a picture goes with a chat.
         attach: (list) => {
             const text = list.filter((f) => !f.type.startsWith('image/'));
             if (text.length < list.length)
-                setNote('A run reads text files; send a picture in Chat.');
+                setNote(t('A run reads text files; send a picture in Chat.'));
             if (text.length) {
                 const dt = new DataTransfer();
                 for (const f of text)
@@ -138,16 +144,16 @@ export function Landing({ onStarted }) {
         go: (href) => (href.startsWith('http') ? host.open(href) : host.go(href)),
     }, DEV_MODES);
     const mode = carry.mode.value === 'plan' ? 'plan' : 'build';
-    const hints = useSuggestions(t);
+    const hints = useSuggestions(target);
     // The chosen codebase's environment, so New can say when it has none yet.
     const codebase = isForge(kept.repo) ? kept.repo.name : '';
     // The org's repositories on the forge: what a run and an environment can name.
-    const homes = useCached(signed ? `${host.org}:homes` : null, (signal) => readHomes(t, signal), NOHOMES);
+    const homes = useCached(signed ? `${host.org}:homes` : null, (signal) => readHomes(target, signal), NOHOMES);
     // A kept codebase the org's whole list does not hold — a board's key once handed over as one — is not offered as one.
     const stranger = codebase !== '' && homes.value.whole && !homes.value.homes.some((h) => h.name.toLowerCase() === codebase.toLowerCase());
     // Read once the list has answered (or failed), so a name that is not the org's is never asked for.
     const settled = homes.value !== NOHOMES || homes.error !== null;
-    const found = useRead(signed && codebase && settled && !stranger ? () => read(t, codebase) : null, null, [t, signed, codebase, settled, stranger]);
+    const found = useRead(signed && codebase && settled && !stranger ? () => read(target, codebase) : null, null, [target, signed, codebase, settled, stranger]);
     // A read kept from the codebase before is not this one's.
     const env = { ...found, value: found.value && found.value.repo === codebase && !stranger ? found.value : null };
     const place = places.value.find((p) => p.id === kept.place) ?? SANDBOX;
@@ -158,7 +164,7 @@ export function Landing({ onStarted }) {
     // pushes and proposes on GitHub, where its people work. A GitHub read that
     // fails leaves the forge's list standing.
     const loadRepos = useCallback(async (q) => {
-        const [page, hub] = await Promise.all([codebases(t, q), githubRepos(t, { q }).catch(() => null)]);
+        const [page, hub] = await Promise.all([codebases(target, q), githubRepos(target, { q }).catch(() => null)]);
         const repos = page.map(asRepo);
         for (const r of repos)
             known.current.set(r.name, r);
@@ -166,15 +172,15 @@ export function Landing({ onStarted }) {
         for (const r of github)
             hubs.current.set(r.full_name.toLowerCase(), r);
         return { repos: [...repos, ...github], next: null };
-    }, [t]);
+    }, [target]);
     // Drawn only once a forge codebase is chosen; one the forge no longer lists offers its default branch.
     const home = kept.repo?.default_branch || 'main';
     const loadBranches = useCallback(async (q) => {
-        const got = await one(t, codebase);
+        const got = await one(target, codebase);
         const needle = q.trim().toLowerCase();
         const names = (got?.branches ?? [home]).filter((b) => !needle || b.toLowerCase().includes(needle));
         return { branches: names.map((name) => ({ name })), next: null };
-    }, [t, codebase, home]);
+    }, [target, codebase, home]);
     // The composer sends only a draft with words in it, and not while a send is out.
     const send = async (said = draft) => {
         if (!signed) {
@@ -185,18 +191,18 @@ export function Landing({ onStarted }) {
         const repo = isForge(kept.repo) ? kept.repo : null;
         const hub = isHub(kept.repo) ? kept.repo : null;
         if (!repo && !hub) {
-            setNote('Choose the project this run works on: a repository of this organization, or one on its GitHub.');
+            setNote(t('Choose the project this run works on: a repository of this organization, or one on its GitHub.'));
             setPicking(true);
             return;
         }
         // A plan or a setup routed to a machine is refused here, in its own words, before it leaves the page.
-        const why = unhonoured(mode, place.id);
+        const why = unhonoured(mode, place.id, t);
         if (why) {
             setNote(why);
             return;
         }
         if (stranger) {
-            setNote(`${codebase} is not one of this organization’s repositories. Choose one, or leave it empty to start a new project.`);
+            setNote(t('{repo} is not one of this organization’s repositories. Choose one, or leave it empty to start a new project.', { repo: codebase }));
             setPicking(true);
             return;
         }
@@ -212,11 +218,11 @@ export function Landing({ onStarted }) {
                 return;
             }
             // Manual: the run is asked for before it starts; it edits, commits and pushes on its own once it has.
-            if (!(await carry.allow({ id: 'run', name: 'Dev to start this run', note: 'It edits, tests, commits and pushes its own branch' }))) {
-                setNote('Not started.');
+            if (!(await carry.allow({ id: 'run', name: t('Dev to start this run'), note: t('It edits, tests, commits and pushes its own branch') }))) {
+                setNote(t('Not started.'));
                 return;
             }
-            const run = await start(t, {
+            const run = await start(target, {
                 prompt: compose([said.trim(), carry.text, prepped.system ?? ''].filter(Boolean).join('\n\n---\n'), files),
                 // The name alone. The org rides the request, and a slash is not a repo name.
                 // An empty base or place is not sent: the default branch, and the sandbox.
@@ -234,7 +240,7 @@ export function Landing({ onStarted }) {
             onStarted(run.session);
         }
         catch (e) {
-            setNote(plain(e, repo?.name ?? hub?.full_name ?? 'a new project', 'run'));
+            setNote(plain(e, repo?.name ?? hub?.full_name ?? t('a new project'), 'run', t));
         }
         finally {
             setBusy(false);
@@ -285,13 +291,13 @@ export function Landing({ onStarted }) {
                 return;
             case 'schedule':
                 setNote('');
-                void book(t, a, 'dev').then((made) => host.go(path({ kind: 'automation', id: made.id })), (e) => setNote(e instanceof Error && e.message ? e.message : 'The scheduled task could not be made.'));
+                void book(target, a, 'dev').then((made) => host.go(path({ kind: 'automation', id: made.id })), (e) => setNote(e instanceof Error && e.message ? e.message : t('The scheduled task could not be made.')));
                 return;
         }
     };
     /** Start the agent that finds a codebase's environment, and open it: its run is the progress. A refusal is the dialog's to say. */
     const setup = async (repo) => {
-        const run = await start(t, { prompt: SETUP, repo, mode: 'setup', model: mind.model, effort: mind.effort });
+        const run = await start(target, { prompt: SETUP, repo, mode: 'setup', model: mind.model, effort: mind.effort });
         onStarted(run.session);
     };
     /** The codebase a dialog chose, chosen here too. */
@@ -303,22 +309,24 @@ export function Landing({ onStarted }) {
     // Cloud is the sandbox, set up by the chosen codebase's environment.
     const setUp = codebase && env.value
         ? env.value.state === 'ready'
-            ? `${codebase} environment`
+            ? t('{repo} environment', { repo: codebase })
             : env.value.state === 'proposed'
-                ? `${codebase} environment proposed`
+                ? t('{repo} environment proposed', { repo: codebase })
                 : unset(env.value)
-                    ? `no ${codebase} environment yet`
-                    : `${codebase} environment, empty`
+                    ? t('no {repo} environment yet', { repo: codebase })
+                    : t('{repo} environment, empty', { repo: codebase })
         : '';
     const placeItems = useMemo(() => (places.value.length ? places.value : [SANDBOX]).map((p) => ({
         id: p.id || 'sandbox',
-        label: p.id ? p.label : 'Cloud',
-        hint: p.id ? ['Remote control', p.status, p.capacity].filter(Boolean).join(' · ') : ['Hanzo sandbox', setUp].filter(Boolean).join(' · '),
+        label: p.id ? p.label : t('Cloud'),
+        hint: p.id ? [t('Remote control'), p.status, p.capacity].filter(Boolean).join(' · ') : [t('Hanzo sandbox'), setUp].filter(Boolean).join(' · '),
         disabled: !ready(p),
         place: p,
-    })), [places.value, setUp]);
+    })), [places.value, setUp, t]);
     const branch = kept.branch || kept.repo?.default_branch || 'main';
-    const where = (_jsxs(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: [_jsx(ChipSelect, { name: "Where the run runs", icon: place.id ? _jsx(Monitor, { size: 13 }) : _jsx(Cloud, { size: 13 }), label: place.id ? place.label : 'Cloud', chosen: placeItems.find((i) => i.place.id === place.id), items: placeItems, onChange: (i) => set({ place: i.place.id }), placeholder: "Search machines\u2026", loading: places.loading, error: places.error?.message ?? null, footer: _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$ink", children: "Set up remote control" }), _jsxs(SizableText, { size: "$1", color: "$soft", children: ["Run", ' ', _jsx(SizableText, { size: "$1", color: "$ink", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: "hanzo link" }), ' ', "on a machine: it joins this list, and a run there uses its checkout and credentials."] })] }) }), _jsx(RepoSelect, { open: picking, onOpenChange: setPicking, value: isForge(kept.repo) || isHub(kept.repo) ? kept.repo : null, onChange: (r) => {
+    const where = (_jsxs(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: [_jsx(ChipSelect, { name: t('Where the run runs'), icon: place.id ? _jsx(Monitor, { size: 13 }) : _jsx(Cloud, { size: 13 }), label: place.id ? place.label : t('Cloud'), chosen: placeItems.find((i) => i.place.id === place.id), items: placeItems, onChange: (i) => set({ place: i.place.id }), placeholder: t('Search machines…'), loading: places.loading, error: places.error?.message ?? null, footer: _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$ink", children: t('Set up remote control') }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Run {command} on a machine: it joins this list, and a run there uses its checkout and credentials.', {
+                                command: (_jsx(SizableText, { size: "$1", color: "$ink", fontFamily: "$mono", 'data-i18n-ltr': '', children: "hanzo link" })),
+                            }) })] }) }), _jsx(RepoSelect, { open: picking, onOpenChange: setPicking, value: isForge(kept.repo) || isHub(kept.repo) ? kept.repo : null, onChange: (r) => {
                     const hub = r.github ? hubs.current.get((r.full_name ?? "").toLowerCase()) : undefined;
                     setIssue(0);
                     if (hub) {
@@ -328,20 +336,20 @@ export function Landing({ onStarted }) {
                     const row = known.current.get(r.name) ?? chosen(r);
                     set({ repo: row, branch: row.default_branch });
                 }, load: loadRepos, troubleshoot: {
-                    label: 'Missing a GitHub repository? Bring it onto the forge',
+                    label: t('Missing a GitHub repository? Bring it onto the forge'),
                     onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })),
-                }, connect: _jsx(XStack, { justify: "flex-end", children: _jsx(FooterLink, { label: "Refresh list", onPress: () => setRound((n) => n + 1) }) }), note: "Repositories on the forge and on your organization's GitHub. Type to search.", action: {
-                    label: 'Add to project',
+                }, connect: _jsx(XStack, { justify: "flex-end", children: _jsx(FooterLink, { label: t('Refresh list'), onPress: () => setRound((n) => n + 1) }) }), note: t("Repositories on the forge and on your organization's GitHub. Type to search."), action: {
+                    label: t('Add to project'),
                     onPress: (r) => {
                         const row = known.current.get(r.name);
                         setAdding({
-                            repo: row?.clone || `${t.api}/v1/git/${r.owner}/${r.name}.git`,
+                            repo: row?.clone || `${target.api}/v1/git/${r.owner}/${r.name}.git`,
                             title: row?.full_name || `${r.owner}/${r.name}`,
                             ref: r.default_branch || 'main',
                             name: r.name,
                         });
                     },
-                }, placeholder: "Choose a project", disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null] }));
+                }, placeholder: t('Choose a project'), disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null] }));
     const head = files.length ? (_jsx(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: _jsx(Files, { files: files, onFiles: setFiles }) })) : undefined;
     // The machines a run can go to, as the `+` menu's Devices: the same choice as `where`'s.
     const devices = {
@@ -350,10 +358,10 @@ export function Landing({ onStarted }) {
         loading: places.loading,
         error: places.error?.message ?? null,
     };
-    return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", justify: "center", pb: "$10", overflowY: "auto", overflowX: "hidden", children: [_jsxs(YStack, { width: "100%", maxW: MEASURE, gap: "$3", children: [_jsx(SizableText, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", style: { textAlign: 'center' }, children: "Build what\u2019s next." }), _jsxs(YStack, { gap: "$2", children: [stranger ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", role: "alert", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: `${codebase} is not one of this organization’s repositories.` }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setPicking(true), children: "Choose a repository" })] })) : env.value && (env.value.state === 'proposed' || unset(env.value)) && !place.id ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: env.value.state === 'proposed'
-                                            ? `A proposed environment for ${codebase} is waiting for review.`
-                                            : `${codebase} has no environment yet, so every run starts it bare.` }), env.value.state === 'proposed' && env.value.session ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(env.value.session), children: "Review" })) : (_jsx(Button, { size: "sm", onPress: () => setOffering(true), children: "Set up environment" }))] })) : null, note || unhonoured(mode, place.id) || mind.note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(mode, place.id) || mind.note })) : null, _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, label: "Describe a task or ask a question", head: head, plus: {
-                                    upload: () => pick(files, setFiles, setNote),
+    return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", justify: "center", pb: "$10", overflowY: "auto", overflowX: "hidden", children: [_jsxs(YStack, { width: "100%", maxW: MEASURE, gap: "$3", children: [_jsx(SizableText, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", style: { textAlign: 'center' }, children: t('Build what’s next.') }), _jsxs(YStack, { gap: "$2", children: [stranger ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", role: "alert", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: t('{repo} is not one of this organization’s repositories.', { repo: codebase }) }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setPicking(true), children: t('Choose a repository') })] })) : env.value && (env.value.state === 'proposed' || unset(env.value)) && !place.id ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: env.value.state === 'proposed'
+                                            ? t('A proposed environment for {repo} is waiting for review.', { repo: codebase })
+                                            : t('{repo} has no environment yet, so every run starts it bare.', { repo: codebase }) }), env.value.state === 'proposed' && env.value.session ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(env.value.session), children: t('Review') })) : (_jsx(Button, { size: "sm", onPress: () => setOffering(true), children: t('Set up environment') }))] })) : null, note || unhonoured(mode, place.id, t) || mind.note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(mode, place.id, t) || mind.note })) : null, _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, label: t('Describe a task or ask a question'), head: head, plus: {
+                                    upload: () => pick(files, setFiles, setNote, t),
                                     skills: carry.skills,
                                     design: carry.design,
                                     plugins: carry.plugins,

package/lib/library.js

@@ -11,13 +11,19 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * with the org, copy its link, rename, move to a project, use in Studio or in
  * Chat, and delete. What a colleague shared is drawn with their name and offers
  * only what a reader may do with it.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); an item's name, a
+ * colleague's, a project's and what an item holds are drawn as given.
  */
 import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
 import { AudioLines, Box, Code2, Copy, Download, ExternalLink, FileText, FolderInput, Image as Picture, LayoutGrid, List, MessageSquare, MoreHorizontal, Pencil, Presentation, Search, Share2, Sparkles, Trash2, Type, Video, } from '@hanzogui/lucide-icons-2';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from '@hanzo/ui';
 import { ChipSelect } from '@hanzo/ui/product';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ago } from './ago.js';
+import { told } from './api/call.js';
 import { change, days, get, items as list, KINDS, remove, size, SOURCE } from './api/library.js';
 import { Confirm, Rename } from './ask.js';
 import { useKept, useProjects, useRead } from './data.js';
@@ -28,18 +34,22 @@ import { Panel } from './panel.js';
 import { gap, pane } from './pane.js';
 import { Sites } from './shelf.js';
 import { useDeck } from './tabs.js';
+/** Where an item was made: Chat, Dev and Studio by their names, the rest in words, marked (`phrase`) and drawn through `t`. */
 const FROM = [
-    { id: '', label: 'Anywhere' },
+    { id: '', label: phrase('Anywhere') },
     { id: 'chat', label: 'Chat' },
     { id: 'dev', label: 'Dev' },
     { id: 'studio', label: 'Studio' },
-    { id: 'workflow', label: 'Workflows' },
+    { id: 'workflow', label: phrase('Workflows') },
 ];
 const WHOSE = [
-    { id: 'all', label: 'Mine and shared' },
-    { id: 'mine', label: 'Mine' },
-    { id: 'shared', label: 'Shared with me' },
+    { id: 'all', label: phrase('Mine and shared') },
+    { id: 'mine', label: phrase('Mine') },
+    { id: 'shared', label: phrase('Shared with me') },
 ];
+/** A day's list, named: the days the Library says in words each a sentence, a month as given. */
+const MADE = { Today: phrase('Made today'), Yesterday: phrase('Made yesterday'), Earlier: phrase('Made earlier') };
+const made = (label, t) => (MADE[label] ? t(MADE[label]) : t('Made {month}', { month: label.toLowerCase() }));
 /** How many items a page reads. */
 const PAGE = 60;
 /** The side panel's scope: the items a reader opened, kept as they left them. */
@@ -77,8 +87,8 @@ export function Thumb({ x, size: n }) {
     return (_jsx(YStack, { width: n ?? '100%', height: n, style: n ? undefined : { aspectRatio: '1 / 1' }, rounded: "$3", overflow: "hidden", bg: "$raised", items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: src && !broken ? (_jsx("img", { src: src, alt: "", loading: "lazy", onError: () => setBroken(true), style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } })) : (_jsx(YStack, { opacity: 0.7, children: glyph(x.kind, n ? Math.max(14, Math.round(n / 2.6)) : 28) })) }));
 }
 /** What a tile says under its name: where it came from, whose, and when. */
-function meta(x) {
-    return [SOURCE[x.source], x.mine ? '' : `shared by ${x.owner}`, ago(x.created)].filter(Boolean).join(' · ');
+function meta(x, t) {
+    return [t(SOURCE[x.source]), x.mine ? '' : t('shared by {owner}', { owner: x.owner }), ago(x.created)].filter(Boolean).join(' · ');
 }
 /** An item's link, to paste: this page with the item named. */
 function linkTo(x) {
@@ -117,8 +127,9 @@ function named() {
 }
 /** What can be done with one item, as menu rows. */
 function useActs(onChanged, onGone) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const [renaming, setRenaming] = useState(null);
     const [deleting, setDeleting] = useState(null);
     const [moving, setMoving] = useState(null);
@@ -129,7 +140,7 @@ function useActs(onChanged, onGone) {
             await work();
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
     };
     const copy = (text, said) => act(async () => {
@@ -137,51 +148,52 @@ function useActs(onChanged, onGone) {
         setNote(said);
     });
     const rows = (x) => [
-        ...(x.origin ? [{ key: 'open', label: 'Open where it was made', icon: _jsx(ExternalLink, { size: 16 }), onSelect: () => host.open(x.origin) }] : []),
-        ...(x.download ? [{ key: 'download', label: 'Download', icon: _jsx(Download, { size: 16 }), onSelect: () => window.open(x.download, '_blank', 'noopener,noreferrer') }] : []),
+        ...(x.origin ? [{ key: 'open', label: t('Open where it was made'), icon: _jsx(ExternalLink, { size: 16 }), onSelect: () => host.open(x.origin) }] : []),
+        ...(x.download ? [{ key: 'download', label: t('Download'), icon: _jsx(Download, { size: 16 }), onSelect: () => window.open(x.download, '_blank', 'noopener,noreferrer') }] : []),
         ...(x.mine
             ? [
                 {
                     key: 'share',
-                    label: x.shared ? 'Stop sharing' : 'Share with organization',
+                    label: x.shared ? t('Stop sharing') : t('Share with organization'),
                     icon: _jsx(Share2, { size: 16 }),
-                    description: x.shared ? 'Only you see it' : 'Everyone in it can open it',
+                    description: x.shared ? t('Only you see it') : t('Everyone in it can open it'),
                     onSelect: () => void act(async () => {
-                        const next = await change(t, x.id, { shared: !x.shared });
+                        const next = await change(target, x.id, { shared: !x.shared });
                         onChanged(next);
-                        setNote(next.shared ? `${next.name} is shared with the organization` : `${next.name} is yours alone`);
+                        setNote(next.shared ? t('{name} is shared with the organization', { name: next.name }) : t('{name} is yours alone', { name: next.name }));
                     }),
                 },
             ]
             : []),
-        { key: 'link', label: 'Copy link', icon: _jsx(Copy, { size: 16 }), onSelect: () => void copy(linkTo(x), 'Link copied') },
+        { key: 'link', label: t('Copy link'), icon: _jsx(Copy, { size: 16 }), onSelect: () => void copy(linkTo(x), t('Link copied')) },
         ...(x.mine
             ? [
-                { key: 'rename', label: 'Rename', icon: _jsx(Pencil, { size: 16 }), onSelect: () => setRenaming(x) },
-                { key: 'move', label: 'Move to project', icon: _jsx(FolderInput, { size: 16 }), onSelect: () => setMoving(x) },
+                { key: 'rename', label: t('Rename'), icon: _jsx(Pencil, { size: 16 }), onSelect: () => setRenaming(x) },
+                { key: 'move', label: t('Move to project'), icon: _jsx(FolderInput, { size: 16 }), onSelect: () => setMoving(x) },
             ]
             : []),
-        { key: 'studio', label: 'Use in Studio', icon: _jsx(Sparkles, { size: 16 }), onSelect: () => host.open(`/studio?asset=${encodeURIComponent(x.id)}`) },
-        { key: 'chat', label: 'Use in Chat', icon: _jsx(MessageSquare, { size: 16 }), onSelect: () => host.open(`/chat?attach=${encodeURIComponent(x.id)}`) },
-        ...(x.mine ? [{ key: 'delete', label: 'Delete', icon: _jsx(Trash2, { size: 16 }), onSelect: () => setDeleting(x) }] : []),
+        { key: 'studio', label: t('Use in Studio'), icon: _jsx(Sparkles, { size: 16 }), onSelect: () => host.open(`/studio?asset=${encodeURIComponent(x.id)}`) },
+        { key: 'chat', label: t('Use in Chat'), icon: _jsx(MessageSquare, { size: 16 }), onSelect: () => host.open(`/chat?attach=${encodeURIComponent(x.id)}`) },
+        ...(x.mine ? [{ key: 'delete', label: t('Delete'), icon: _jsx(Trash2, { size: 16 }), onSelect: () => setDeleting(x) }] : []),
     ];
-    const dialogs = (_jsxs(_Fragment, { children: [_jsx(Rename, { open: Boolean(renaming), onOpenChange: (o) => !o && setRenaming(null), title: "Rename", name: renaming?.name ?? '', run: async (name) => {
-                    const next = await change(t, renaming.id, { name });
+    const dialogs = (_jsxs(_Fragment, { children: [_jsx(Rename, { open: Boolean(renaming), onOpenChange: (o) => !o && setRenaming(null), title: t('Rename'), name: renaming?.name ?? '', run: async (name) => {
+                    const next = await change(target, renaming.id, { name });
                     onChanged(next);
-                } }), _jsx(Confirm, { open: Boolean(deleting), onOpenChange: (o) => !o && setDeleting(null), title: `Delete ${deleting?.name ?? ''}?`, says: "It leaves the Library and its file is deleted. Anyone it was shared with loses it too.", act: "Delete", run: async () => {
-                    await remove(t, deleting.id);
+                } }), _jsx(Confirm, { open: Boolean(deleting), onOpenChange: (o) => !o && setDeleting(null), title: t('Delete {name}?', { name: deleting?.name ?? '' }), says: t('It leaves the Library and its file is deleted. Anyone it was shared with loses it too.'), act: t('Delete'), run: async () => {
+                    await remove(target, deleting.id);
                     onGone(deleting.id);
                 } }), _jsx(Move, { item: moving, onClose: () => setMoving(null), onMoved: (next) => {
                     onChanged(next);
-                    setNote(next.project ? `${next.name} is in ${next.project}` : `${next.name} is in no project`);
+                    setNote(next.project ? t('{name} is in {project}', { name: next.name, project: next.project }) : t('{name} is in no project', { name: next.name }));
                 } })] }));
     return { rows, dialogs, note };
 }
 /** Choosing the project an item belongs to, or none. */
 function Move({ item: x, onClose, onMoved }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
-    const projects = useProjects(t, Boolean(host.person) && Boolean(x));
+    const target = useTarget();
+    const projects = useProjects(target, Boolean(host.person) && Boolean(x));
     const [busy, setBusy] = useState(false);
     const [note, setNote] = useState('');
     const pick = async (project) => {
@@ -190,29 +202,32 @@ function Move({ item: x, onClose, onMoved }) {
         setBusy(true);
         setNote('');
         try {
-            onMoved(await change(t, x.id, { project }));
+            onMoved(await change(target, x.id, { project }));
             onClose();
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setBusy(false);
         }
     };
-    return (_jsx(Dialog, { open: Boolean(x), onOpenChange: (o) => !o && !busy && onClose(), children: _jsxs(DialogContent, { maxW: 420, children: [_jsx(DialogTitle, { children: "Move to project" }), _jsx(YStack, { gap: "$1", maxH: 320, overflow: "scroll", children: projects.loading && !projects.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading projects\u2026" })) : projects.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: projects.error.message })) : ([{ slug: '', name: 'No project' }, ...projects.value].map((p) => (_jsx(XStack, { render: "button", "aria-label": p.slug ? `Move to ${p.name || p.slug}` : 'Move to no project', "aria-current": x?.project === p.slug ? 'true' : undefined, disabled: busy, onPress: () => void pick(p.slug), px: "$3", py: "$2", rounded: "$3", bg: x?.project === p.slug ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(SizableText, { size: "$2", color: "$ink", children: p.name || p.slug }) }, p.slug || 'none')))) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null] }) }));
+    return (_jsx(Dialog, { open: Boolean(x), onOpenChange: (o) => !o && !busy && onClose(), children: _jsxs(DialogContent, { maxW: 420, children: [_jsx(DialogTitle, { children: t('Move to project') }), _jsx(YStack, { gap: "$1", maxH: 320, overflow: "scroll", children: projects.loading && !projects.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: t('Reading projects…') })) : projects.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: told(projects.error, t) })) : ([{ slug: '', name: t('No project') }, ...projects.value].map((p) => (_jsx(XStack, { render: "button", "aria-label": p.slug ? t('Move to {project}', { project: p.name || p.slug }) : t('Move to no project'), "aria-current": x?.project === p.slug ? 'true' : undefined, disabled: busy, onPress: () => void pick(p.slug), px: "$3", py: "$2", rounded: "$3", bg: x?.project === p.slug ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(SizableText, { size: "$2", color: "$ink", children: p.name || p.slug }) }, p.slug || 'none')))) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null] }) }));
 }
 /** One item's menu, as a quiet control. */
 function Acts({ x, rows }) {
-    return (_jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${x.name}`, width: 30, height: 30, items: "center", justify: "center", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", shrink: 0, children: _jsx(MoreHorizontal, { size: 16 }) }), items: rows }));
+    const { t } = useI18n();
+    return (_jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": t('Actions for {name}', { name: x.name }), width: 30, height: 30, items: "center", justify: "center", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", shrink: 0, children: _jsx(MoreHorizontal, { size: 16 }) }), items: rows }));
 }
 /** One tile of the grid: the still, then its name and where it came from; its menu beside the name. */
 function Tile({ x, onOpen, rows }) {
-    return (_jsxs(YStack, { role: "listitem", gap: "$2", minW: 0, children: [_jsx(YStack, { render: "button", "aria-label": `Open ${x.name}`, onPress: onOpen, rounded: "$4", overflow: "hidden", cursor: "pointer", hoverStyle: { opacity: 0.88 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(Thumb, { x: x }) }), _jsxs(XStack, { items: "flex-start", gap: "$1", minW: 0, children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: meta(x) })] }), _jsx(Acts, { x: x, rows: rows })] })] }));
+    const { t } = useI18n();
+    return (_jsxs(YStack, { role: "listitem", gap: "$2", minW: 0, children: [_jsx(YStack, { render: "button", "aria-label": t('Open {name}', { name: x.name }), onPress: onOpen, rounded: "$4", overflow: "hidden", cursor: "pointer", hoverStyle: { opacity: 0.88 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(Thumb, { x: x }) }), _jsxs(XStack, { items: "flex-start", gap: "$1", minW: 0, children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: meta(x, t) })] }), _jsx(Acts, { x: x, rows: rows })] })] }));
 }
 /** One row of the list: a small still, its name, where it came from, how large, and its menu. */
 function Row({ x, onOpen, rows }) {
-    return (_jsxs(XStack, { role: "listitem", items: "center", gap: "$3", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$hover' }, minW: 0, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${x.name}`, onPress: onOpen, flex: 1, minW: 0, items: "center", gap: "$3", cursor: "pointer", style: { textAlign: 'left' }, children: [_jsx(Thumb, { x: x, size: 40 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: meta(x) })] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 72, style: { textAlign: 'right' }, "$max-md": { display: 'none' }, children: size(x.bytes) })] }), _jsx(Acts, { x: x, rows: rows })] }));
+    const { t } = useI18n();
+    return (_jsxs(XStack, { role: "listitem", items: "center", gap: "$3", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: '$hover' }, minW: 0, children: [_jsxs(XStack, { render: "button", "aria-label": t('Open {name}', { name: x.name }), onPress: onOpen, flex: 1, minW: 0, items: "center", gap: "$3", cursor: "pointer", "$platform-web": { textAlign: 'start' }, children: [_jsx(Thumb, { x: x, size: 40 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: meta(x, t) })] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 72, text: "end", "$max-md": { display: 'none' }, children: size(x.bytes) })] }), _jsx(Acts, { x: x, rows: rows })] }));
 }
 /** A chip: one choice among a few, lit when chosen. */
 function Chip({ label, on, onPress }) {
@@ -220,16 +235,17 @@ function Chip({ label, on, onPress }) {
 }
 /** One item, read fresh so its signed URLs are live: the thing itself, then what it is. */
 export function Preview({ id, rows }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const host = useHost();
-    const one = useRead(host.person ? () => get(t, id) : null, null, [t, id, host.person]);
+    const one = useRead(host.person ? () => get(target, id) : null, null, [target, id, host.person]);
     const x = one.value;
     if (!x) {
-        return (_jsx(SizableText, { size: "$2", color: "$soft", children: !host.person ? 'Sign in to open it.' : one.error ? one.error.message : 'Reading…' }));
+        return (_jsx(SizableText, { size: "$2", color: "$soft", children: !host.person ? t('Sign in to open it.') : one.error ? told(one.error, t) : t('Reading…') }));
     }
-    return (_jsxs(YStack, { gap: "$3", minH: 0, children: [_jsx(Shown, { x: x }), _jsxs(XStack, { items: "flex-start", gap: "$2", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", children: [meta(x), size(x.bytes), x.width && x.height ? `${x.width}×${x.height}` : '', x.project ? `in ${x.project}` : '', x.shared ? 'shared with the organization' : '']
+    return (_jsxs(YStack, { gap: "$3", minH: 0, children: [_jsx(Shown, { x: x }), _jsxs(XStack, { items: "flex-start", gap: "$2", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", children: [meta(x, t), size(x.bytes), x.width && x.height ? `${x.width}×${x.height}` : '', x.project ? t('in {project}', { project: x.project }) : '', x.shared ? t('shared with the organization') : '']
                                     .filter(Boolean)
-                                    .join(' · ') })] }), rows ? _jsx(Acts, { x: x, rows: rows(x) }) : null] }), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [x.origin ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => host.open(x.origin), children: [_jsx(ExternalLink, { size: 14 }), "Open where it was made"] })) : null, x.download ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => window.open(x.download, '_blank', 'noopener,noreferrer'), children: [_jsx(Download, { size: 14 }), "Download"] })) : null] })] }));
+                                    .join(' · ') })] }), rows ? _jsx(Acts, { x: x, rows: rows(x) }) : null] }), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [x.origin ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => host.open(x.origin), children: [_jsx(ExternalLink, { size: 14 }), t('Open where it was made')] })) : null, x.download ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => window.open(x.download, '_blank', 'noopener,noreferrer'), children: [_jsx(Download, { size: 14 }), t('Download')] })) : null] })] }));
 }
 /** The thing itself, drawn the way its kind is read. */
 function Shown({ x }) {
@@ -250,6 +266,7 @@ function Shown({ x }) {
 }
 /** A text item's first 200 KB, as written; in a frame where the store does not answer this page's read. */
 function Text({ x }) {
+    const { t } = useI18n();
     const read = useRead(async () => {
         const res = await fetch(x.url, { cache: 'no-store' });
         if (!res.ok)
@@ -258,21 +275,22 @@ function Text({ x }) {
     }, '', [x.url]);
     if (read.error)
         return _jsx("iframe", { src: x.url, title: x.name, style: { width: '100%', height: '60vh', border: 0, borderRadius: 12, background: 'white' } });
-    return (_jsx(YStack, { rounded: "$3", bg: "$raised", p: "$3", maxH: "60vh", overflow: "scroll", children: _jsx(SizableText, { size: "$1", color: "$ink", style: { whiteSpace: 'pre-wrap', fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: read.loading && !read.value ? 'Reading…' : read.value }) }));
+    return (_jsx(YStack, { rounded: "$3", bg: "$raised", p: "$3", maxH: "60vh", overflow: "scroll", children: _jsx(SizableText, { size: "$1", color: "$ink", style: { whiteSpace: 'pre-wrap', fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: read.loading && !read.value ? t('Reading…') : read.value }) }));
 }
 /** A run's outputs as small tiles: each opens in the Library. */
 export function Outputs({ ids }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const key = ids.join(',');
-    const got = useRead(host.person && ids.length ? () => Promise.all(ids.slice(0, 12).map((id) => get(t, id).catch(() => null))) : null, [], [t, key, host.person]);
+    const got = useRead(host.person && ids.length ? () => Promise.all(ids.slice(0, 12).map((id) => get(target, id).catch(() => null))) : null, [], [target, key, host.person]);
     const shown = got.value.filter((x) => x !== null);
     if (!ids.length)
         return null;
-    return (_jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", pt: "$1.5", role: "list", "aria-label": "What it made", children: [shown.map((x) => (_jsx(XStack, { role: "listitem", children: _jsxs(XStack, { render: "button", "aria-label": `Open ${x.name} in the Library`, onPress: () => {
+    return (_jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", pt: "$1.5", role: "list", "aria-label": t('What it made'), children: [shown.map((x) => (_jsx(XStack, { role: "listitem", children: _jsxs(XStack, { render: "button", "aria-label": t('Open {name} in the Library', { name: x.name }), onPress: () => {
                         want(x.id);
                         host.go('-/artifacts');
-                    }, items: "center", gap: "$2", pr: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", overflow: "hidden", hoverStyle: { bg: '$hover' }, cursor: "pointer", maxW: 240, children: [_jsx(Thumb, { x: x, size: 36 }), _jsx(SizableText, { size: "$1", color: "$ink", numberOfLines: 1, children: x.name })] }) }, x.id))), got.loading && !shown.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: `Reading ${ids.length === 1 ? 'what it made' : `the ${ids.length} things it made`}…` })) : null] }));
+                    }, items: "center", gap: "$2", paddingInlineEnd: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", overflow: "hidden", hoverStyle: { bg: '$hover' }, cursor: "pointer", maxW: 240, children: [_jsx(Thumb, { x: x, size: 36 }), _jsx(SizableText, { size: "$1", color: "$ink", numberOfLines: 1, children: x.name })] }) }, x.id))), got.loading && !shown.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: ids.length === 1 ? t('Reading what it made…') : t('Reading the {n} things it made…', { n: ids.length }) })) : null] }));
 }
 /** A list read page by page: the first on every change of filter, the next on reaching its end. */
 function usePages(load, key) {
@@ -337,8 +355,9 @@ function useEnd(on) {
     return (node) => setEl(node instanceof Element ? node : null);
 }
 export function Library() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
     const wide = useMedia().md;
     // The kind is the address's (-/artifacts/<kind>), so the sidebar, a link and Back all name it.
@@ -358,8 +377,8 @@ export function Library() {
         const id = setTimeout(() => setQ(typed.trim()), 250);
         return () => clearTimeout(id);
     }, [typed]);
-    const load = useMemo(() => (signed ? (cursor, signal) => list(t, { kind, source, scope, q, limit: PAGE, cursor }, { signal }) : null), [signed, t, kind, source, scope, q]);
-    const pages = usePages(load, `${kind}|${source}|${scope}|${q}|${t.org}`);
+    const load = useMemo(() => (signed ? (cursor, signal) => list(target, { kind, source, scope, q, limit: PAGE, cursor }, { signal }) : null), [signed, target, kind, source, scope, q]);
+    const pages = usePages(load, `${kind}|${source}|${scope}|${q}|${target.org}`);
     const end = useEnd(pages.more);
     const reload = pages.reload;
     useEffect(() => {
@@ -378,8 +397,8 @@ export function Library() {
         arrived.current = true;
         const id = named();
         if (id)
-            get(t, id).then(look, () => look({ id, name: 'Item' }));
-    }, [signed, t, look]);
+            get(target, id).then(look, () => look({ id, name: t('Item') }));
+    }, [signed, target, look, t]);
     const acts = useActs((x) => {
         pages.patch(x);
         if (side.tabs.some((tab) => tab.kind === `${TAB}${x.id}`))
@@ -391,11 +410,14 @@ export function Library() {
     const kinds = side.tabs
         .filter((tab) => tab.kind.startsWith(TAB))
         .map((tab) => ({ id: tab.kind, label: tab.title, render: () => _jsx(Preview, { id: tab.kind.slice(TAB.length), rows: acts.rows }, tab.kind) }));
-    const panel = (sheet) => _jsx(Panel, { side: side, kinds: kinds, sheet: sheet, onHide: () => setShown(false), label: "Item preview" });
+    const panel = (sheet) => _jsx(Panel, { side: side, kinds: kinds, sheet: sheet, onHide: () => setShown(false), label: t('Item preview') });
     const open = shown && side.tabs.length > 0;
     const groups = days(pages.rows);
     const narrowed = Boolean(kind || source || q || scope !== 'all');
-    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsx(YStack, { flex: 1, minH: 0, minW: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1120, mx: "auto", gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(SizableText, { render: "h1", size: "$7", fontWeight: "600", color: "$ink", flex: 1, children: KINDS.find((k) => k.id === kind)?.id ? KINDS.find((k) => k.id === kind).label : 'Library' }), _jsxs(XStack, { role: "radiogroup", "aria-label": "View", gap: "$1", children: [_jsx(ViewMark, { label: "Grid", on: view === 'grid', onPress: () => setView('grid'), children: _jsx(LayoutGrid, { size: 16 }) }), _jsx(ViewMark, { label: "List", on: view === 'list', onPress: () => setView('list'), children: _jsx(List, { size: 16 }) })] })] }), _jsxs(XStack, { items: "center", gap: "$2", maxW: 480, children: [_jsx(Search, { size: 16, opacity: 0.6 }), _jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: typed, onChangeText: setTyped, placeholder: "Search your library", "aria-label": "Search your library", disabled: !signed }) })] }), _jsxs(YStack, { gap: "$2", children: [host.sections ? null : (_jsx(XStack, { role: "radiogroup", "aria-label": "Kind", gap: "$2", overflowX: "auto", pb: "$1", "$platform-web": { scrollbarWidth: 'none' }, children: KINDS.map((k) => (_jsx(Chip, { label: k.label, on: kind === k.id, onPress: () => setKind(k.id) }, k.id || 'all'))) })), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [_jsx(ChipSelect, { name: "From", label: FROM.find((f) => f.id === source).label, chosen: FROM.find((f) => f.id === source), items: FROM, onChange: (f) => setSource(f.id), placement: "bottom-start", width: 200 }), _jsx(ChipSelect, { name: "Whose", label: WHOSE.find((w) => w.id === scope).label, chosen: WHOSE.find((w) => w.id === scope), items: WHOSE, onChange: (w) => setScope(w.id), placement: "bottom-start", width: 220 })] })] }), acts.note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: acts.note })) : null, !signed ? (_jsx(Said, { says: "Sign in to see your library.", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : pages.error && !pages.rows.length ? (_jsx(Said, { says: pages.error.message, children: _jsx(Button, { size: "sm", variant: "outline", onPress: pages.reload, children: "Try again" }) })) : pages.loading && !pages.rows.length ? (_jsx(Said, { says: "Reading\u2026" })) : !pages.rows.length ? (_jsx(Said, { says: narrowed ? 'Nothing matches.' : 'Nothing here yet. What you make in Chat, Dev and Studio lands here.' })) : (_jsxs(YStack, { gap: "$5", children: [groups.map((g) => (_jsxs(YStack, { gap: "$3", role: "group", "aria-label": g.label, children: [_jsx(SizableText, { size: "$2", color: "$soft", fontWeight: "500", children: g.label }), view === 'grid' ? (_jsx("div", { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(46%, 168px), 1fr))', gap: 16 }, children: g.rows.map((x) => (_jsx(Tile, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) })) : (_jsx(YStack, { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, gap: "$0.5", children: g.rows.map((x) => (_jsx(Row, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) }))] }, g.label))), _jsx(YStack, { ref: end, height: 1 }), pages.loading ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Reading more\u2026" })) : pages.error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: pages.error.message })) : null] })), signed && !q && !kind && (source === '' || source === 'dev') && scope !== 'shared' ? (_jsx(YStack, { pt: "$6", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Sites, {}) })) : null] }) }), open && !wide ? panel(true) : null, open && wide ? (_jsx(YStack, { "data-slot": "library-side", ...pane, ml: gap, shrink: 0, minH: 0, width: 440, maxW: "45%", children: panel(false) })) : null, acts.dialogs] }));
+    // The choices in the reader's words; Chat, Dev and Studio stay their names.
+    const from = FROM.map((f) => ({ ...f, label: t(f.label) }));
+    const whose = WHOSE.map((w) => ({ ...w, label: t(w.label) }));
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsx(YStack, { flex: 1, minH: 0, minW: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1120, mx: "auto", gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(SizableText, { render: "h1", size: "$7", fontWeight: "600", color: "$ink", flex: 1, children: KINDS.find((k) => k.id === kind)?.id ? t(KINDS.find((k) => k.id === kind).label) : t('Library') }), _jsxs(XStack, { role: "radiogroup", "aria-label": t('View'), gap: "$1", children: [_jsx(ViewMark, { label: t('Grid'), on: view === 'grid', onPress: () => setView('grid'), children: _jsx(LayoutGrid, { size: 16 }) }), _jsx(ViewMark, { label: t('List'), on: view === 'list', onPress: () => setView('list'), children: _jsx(List, { size: 16 }) })] })] }), _jsxs(XStack, { items: "center", gap: "$2", maxW: 480, children: [_jsx(Search, { size: 16, opacity: 0.6 }), _jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: typed, onChangeText: setTyped, placeholder: t('Search your library'), "aria-label": t('Search your library'), disabled: !signed }) })] }), _jsxs(YStack, { gap: "$2", children: [host.sections ? null : (_jsx(XStack, { role: "radiogroup", "aria-label": t('Kind'), gap: "$2", overflowX: "auto", pb: "$1", "$platform-web": { scrollbarWidth: 'none' }, children: KINDS.map((k) => (_jsx(Chip, { label: t(k.label), on: kind === k.id, onPress: () => setKind(k.id) }, k.id || 'all'))) })), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [_jsx(ChipSelect, { name: t('From'), label: from.find((f) => f.id === source).label, chosen: from.find((f) => f.id === source), items: from, onChange: (f) => setSource(f.id), placement: "bottom-start", width: 200 }), _jsx(ChipSelect, { name: t('Whose'), label: whose.find((w) => w.id === scope).label, chosen: whose.find((w) => w.id === scope), items: whose, onChange: (w) => setScope(w.id), placement: "bottom-start", width: 220 })] })] }), acts.note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: acts.note })) : null, !signed ? (_jsx(Said, { says: t('Sign in to see your library.'), children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: t('Sign in') }) })) : pages.error && !pages.rows.length ? (_jsx(Said, { says: told(pages.error, t), children: _jsx(Button, { size: "sm", variant: "outline", onPress: pages.reload, children: t('Try again') }) })) : pages.loading && !pages.rows.length ? (_jsx(Said, { says: t('Reading…') })) : !pages.rows.length ? (_jsx(Said, { says: narrowed ? t('Nothing matches.') : t('Nothing here yet. What you make in Chat, Dev and Studio lands here.') })) : (_jsxs(YStack, { gap: "$5", children: [groups.map((g) => (_jsxs(YStack, { gap: "$3", role: "group", "aria-label": t(g.label), children: [_jsx(SizableText, { size: "$2", color: "$soft", fontWeight: "500", children: t(g.label) }), view === 'grid' ? (_jsx(YStack, { role: "list", "aria-label": made(g.label, t), gap: 16, "$platform-web": { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(46%, 168px), 1fr))' }, children: g.rows.map((x) => (_jsx(Tile, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) })) : (_jsx(YStack, { role: "list", "aria-label": made(g.label, t), gap: "$0.5", children: g.rows.map((x) => (_jsx(Row, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) }))] }, g.label))), _jsx(YStack, { ref: end, height: 1 }), pages.loading ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('Reading more…') })) : pages.error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: told(pages.error, t) })) : null] })), signed && !q && !kind && (source === '' || source === 'dev') && scope !== 'shared' ? (_jsx(YStack, { pt: "$6", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Sites, {}) })) : null] }) }), open && !wide ? panel(true) : null, open && wide ? (_jsx(YStack, { "data-slot": "library-side", ...pane, ml: gap, shrink: 0, minH: 0, width: 440, maxW: "45%", children: panel(false) })) : null, acts.dialogs] }));
 }
 function ViewMark({ label, on, onPress, children }) {
     return (_jsx(XStack, { render: "button", role: "radio", "aria-checked": on, "aria-label": label, onPress: onPress, width: 32, height: 32, items: "center", justify: "center", rounded: "$3", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", opacity: on ? 1 : 0.6, children: children }));