@hanzo/build 0.2.61 → 0.2.62

package/lib/gear.d.ts

@@ -49,3 +49,5 @@ export interface GearState {
  * writes the default until it has an id). Signed out, it lives for the page.
  */
 export declare function useGear(t: Target, key?: string): GearState;
+/** The dictation language the person keeps, null for Auto, and how to change it. */
+export declare function useLanguage(t: Target): readonly [string | null, (id: string | null) => void];

package/lib/gear.js

@@ -62,7 +62,7 @@ export function shelve(gears, key, g) {
     }
     return out;
 }
-let doc = { gear: BARE, gears: {} };
+let doc = { gear: BARE, gears: {}, language: null };
 let loaded = null;
 const listeners = new Set();
 const emit = () => listeners.forEach((f) => f());
@@ -80,7 +80,8 @@ function load(t) {
         const raw = r?.prefs ?? {};
         const gear = gearOf(raw.gear);
         const all = raw.gears && typeof raw.gears === 'object' ? raw.gears : {};
-        doc = { gear, gears: Object.fromEntries(Object.entries(all).map(([k, v]) => [k, gearOf(v, gear)])) };
+        const language = typeof raw.language === 'string' && raw.language ? raw.language : null;
+        doc = { gear, gears: Object.fromEntries(Object.entries(all).map(([k, v]) => [k, gearOf(v, gear)])), language };
         emit();
     })
         .catch(() => {
@@ -121,3 +122,20 @@ export function useGear(t, key = '') {
         },
     }), [gear, error, write, t]);
 }
+/** The dictation language the person keeps, null for Auto, and how to change it. */
+export function useLanguage(t) {
+    useEffect(() => load(t), [t]);
+    const now = useSyncExternalStore(subscribe, () => doc, () => doc);
+    const set = useCallback((id) => {
+        const was = doc.language;
+        doc = { ...doc, language: id };
+        emit();
+        // A refused save takes the choice back, so what is shown is what is kept.
+        if (t.token())
+            call(t, 'PATCH', '/v1/pref', { language: id }).catch(() => {
+                doc = { ...doc, language: was };
+                emit();
+            });
+    }, [t]);
+    return [now.language, set];
+}

package/lib/index.d.ts

@@ -51,7 +51,7 @@ export { href, parse, path, PLACES, route, SESSION, SLUG, type Route, type Scree
 export { catalog, EFFORTS, FIRST, FREE, grants, isFree, keep, kept, nameOf, reasons, useCatalog, useChoice, useMind, type Choice, type Effort, type Mind } from './mind.ts';
 export { ASK, cut, GAP, MEASURE, measure, Prompt, prompt, ROUND, trigger, Tune, useEar, useMention, useUpload, type Chip, type PromptOptions } from './prompt.tsx';
 export { Plus, type Link, type PlusProps, type Row as ShelfRow, type Shelf, type Switch } from './plus.tsx';
-export { BARE, gearOf, MODES, useGear, type Gear, type GearState, type Mode as GearMode } from './gear.ts';
+export { BARE, gearOf, MODES, useGear, useLanguage, type Gear, type GearState, type Mode as GearMode } from './gear.ts';
 export { useCarry, type Carry } from './carry.tsx';
 export { Dictation } from './mic.tsx';
 export type { Composer as PluginComposer, Plugin, Prep, Turn } from './plugin.ts';

package/lib/index.js

@@ -46,7 +46,7 @@ export { href, parse, path, PLACES, route, SESSION, SLUG } from './route.js';
 export { catalog, EFFORTS, FIRST, FREE, grants, isFree, keep, kept, nameOf, reasons, useCatalog, useChoice, useMind } from './mind.js';
 export { ASK, cut, GAP, MEASURE, measure, Prompt, prompt, ROUND, trigger, Tune, useEar, useMention, useUpload } from './prompt.js';
 export { Plus } from './plus.js';
-export { BARE, gearOf, MODES, useGear } from './gear.js';
+export { BARE, gearOf, MODES, useGear, useLanguage } from './gear.js';
 export { useCarry } from './carry.js';
 export { Dictation } from './mic.js';
 export { artifacts, blob, lead, renders, Reply, Served, speakable, speaker } from './reply.js';

package/lib/mic.js

@@ -91,5 +91,5 @@ export function Dictation({ voice, disabled = false, language = null, onLanguage
     const [open, setOpen] = useState(false);
     const { inputs, allowed, using } = useInputs(open);
     const spoken = LANGUAGES.find((l) => l.id === language);
-    return (_jsxs(XStack, { "data-slot": "dictation", items: "center", rounded: 8, borderWidth: 1, borderColor: open ? '$borderColor' : 'transparent', hoverStyle: { borderColor: '$borderColor' }, shrink: 0, children: [_jsx(Control, { asChild: true, size: 30, ...PLAIN, children: _jsx(Voice, { voice: voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(MicIcon, { size: 16, fill: state === 'idle' ? 'none' : 'currentColor' }) }) }), _jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: disabled, children: _jsx(XStack, { render: "button", "aria-label": "Dictation settings", "data-slot": "dictation-menu", width: 16, height: 30, items: "center", justify: "center", rounded: 6, cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, "$max-sm": { width: 28, height: 44 }, children: _jsx(ChevronDown, { size: 12, color: "$hint" }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 200, "data-slot": "dictation-panel", children: [_jsx(Meter, { on: open && allowed }), inputs.length === 0 ? (_jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 14, color: "$hint", children: "No devices found" }) })) : (inputs.map((d, i) => (_jsx(DropdownMenuLabel, { children: _jsxs(XStack, { items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", numberOfLines: 1, flex: 1, children: d.label || `Microphone ${i + 1}` }), d.groupId === using ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-label": "In use" }) : null] }) }, d.deviceId || i)))), onLanguage ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 13, color: "$hint", children: "Dictation settings" }) }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { "data-slot": "dictation-language", children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: "Language" }), _jsx(SizableText, { fontSize: 14, color: "$hint", children: spoken?.label ?? 'Auto' })] }) }), _jsx(DropdownMenuSubContent, { minW: 160, children: [{ id: '', label: 'Auto' }, ...LANGUAGES].map((l) => (_jsx(DropdownMenuItem, { onSelect: () => onLanguage(l.id || null), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: l.label }), (language ?? '') === l.id ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, l.id || 'auto'))) })] })] })) : null] })] })] }));
+    return (_jsxs(XStack, { "data-slot": "dictation", items: "center", rounded: 8, borderWidth: 1, borderColor: open ? '$borderColor' : 'transparent', hoverStyle: { borderColor: '$borderColor' }, shrink: 0, children: [_jsx(Control, { asChild: true, size: 30, ...PLAIN, children: _jsx(Voice, { voice: voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(MicIcon, { size: 16, color: "var(--foreground)", fill: state === 'idle' ? 'none' : 'var(--foreground)' }) }) }), _jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: disabled, children: _jsx(XStack, { render: "button", "aria-label": "Dictation settings", "data-slot": "dictation-menu", width: 16, height: 30, items: "center", justify: "center", rounded: 6, cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, "$max-sm": { width: 28, height: 44 }, children: _jsx(ChevronDown, { size: 14, color: "$aside" }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 200, "data-slot": "dictation-panel", children: [_jsx(Meter, { on: open && allowed }), inputs.length === 0 ? (_jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 14, color: "$hint", children: "No devices found" }) })) : (inputs.map((d, i) => (_jsx(DropdownMenuLabel, { children: _jsxs(XStack, { items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", numberOfLines: 1, flex: 1, children: d.label || `Microphone ${i + 1}` }), d.groupId === using ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-label": "In use" }) : null] }) }, d.deviceId || i)))), onLanguage ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 13, color: "$hint", children: "Dictation settings" }) }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { "data-slot": "dictation-language", children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: "Language" }), _jsx(SizableText, { fontSize: 14, color: "$hint", children: spoken?.label ?? 'Auto' })] }) }), _jsx(DropdownMenuSubContent, { minW: 160, children: [{ id: '', label: 'Auto' }, ...LANGUAGES].map((l) => (_jsx(DropdownMenuItem, { onSelect: () => onLanguage(l.id || null), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: l.label }), (language ?? '') === l.id ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, l.id || 'auto'))) })] })] })) : null] })] })] }));
 }

package/lib/prompt.js

@@ -42,6 +42,8 @@ export const ROUND = 32;
 /** The frame's corner, px: 12 on a laptop, 22 on a phone. */
 const CORNER = 12;
 const CORNER_PHONE = 22;
+/** The ink on a filled round: the accent's own foreground (gui's icons default to the theme's text). */
+const ON = 'var(--primary-foreground)';
 /** A round control with no ground of its own until it is pointed at. */
 const QUIET = { bg: 'transparent', color: 'var(--foreground)', hoverStyle: { bg: '$hover' } };
 /** What every Composer placeholder says, unless a surface names who is listening. */
@@ -127,7 +129,7 @@ export function prompt(o, state) {
     };
     const mention = listed && shelf && typed ? (_jsx(Mention, { shelf: shelf, rows: listed, index: index, onPick: choose, tag: typed.char === '/' ? 'Skill' : 'Plugin', name: typed.char === '/' ? 'Skills' : 'Plugins' })) : null;
     const head = o.head || o.note || mention || (narrow && o.below) ? (_jsxs(YStack, { ...measure, gap: "$1.5", "data-slot": "prompt-head", children: [narrow ? o.below : null, o.head, mention, o.note ? (_jsx(SizableText, { "data-slot": "prompt-note", fontSize: 12, color: "$soft", text: "center", self: "center", children: o.note })) : null] })) : undefined;
-    const foot = o.mind || o.mode || o.where || (!narrow && o.below) ? (_jsxs(YStack, { width: "100%", gap: 10, "data-slot": "prompt-foot", children: [_jsx(Tune, { mind: o.mind, mode: o.mode, where: o.where, onUpgrade: o.onUpgrade }), narrow ? null : o.below] })) : undefined;
+    const foot = o.mind || o.mode || o.where || (!narrow && o.below) ? (_jsxs(YStack, { ...measure, gap: 10, "data-slot": "prompt-foot", children: [_jsx(Tune, { mind: o.mind, mode: o.mode, where: o.where, onUpgrade: o.onUpgrade }), narrow ? null : o.below] })) : undefined;
     const round = (_jsx(Control, { type: "button", size: ROUND, fill: true, rounded: 999, "data-slot": "composer-send", "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
             if (!live)
                 return;
@@ -135,7 +137,7 @@ export function prompt(o, state) {
                 o.onStop?.();
             else
                 o.onSend();
-        }, children: busy ? _jsx(Square, { size: 13, fill: "currentColor" }) : _jsx(ArrowUp, { size: 16, strokeWidth: 2.5 }) }));
+        }, children: busy ? _jsx(Square, { size: 13, color: ON, fill: ON }) : _jsx(ArrowUp, { size: 16, strokeWidth: 2.5, color: ON }) }));
     return {
         value: o.value,
         onChange: o.onChange,
@@ -171,7 +173,7 @@ export function prompt(o, state) {
         '$max-sm': { rounded: CORNER_PHONE },
         ...(o.framed ? { boxShadow: 'var(--shadow-sheet-1)' } : null),
         children: (_jsxs(XStack, { items: "center", gap: 4, "data-slot": "prompt-start", flex: 1, minW: 0, flexWrap: "wrap", children: [o.plus ? _jsx(Plus, { ...o.plus, disabled: disabled || o.plus.disabled }) : null, (o.on ?? []).map((c) => (_jsxs(XStack, { "data-slot": "prompt-chip", items: "center", gap: 6, pl: 8, pr: 4, height: 28, rounded: 8, bg: "$hover", maxW: 180, children: [c.icon ? _jsx(XStack, { "aria-hidden": true, children: c.icon }) : null, _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, shrink: 1, children: c.label }), _jsx(XStack, { render: "button", "aria-label": `Remove ${c.label}`, onPress: c.onRemove, width: 20, height: 20, rounded: 6, items: "center", justify: "center", hoverStyle: { bg: '$raised' }, cursor: "pointer", children: _jsx(X, { size: 12, color: "$hint" }) })] }, c.id)))] })),
-        send: (_jsxs(XStack, { items: "center", gap: 6, "data-slot": "prompt-end", shrink: 0, children: [o.voice ? _jsx(Dictation, { voice: o.voice, disabled: disabled, language: o.language ?? null, ...(o.onLanguage ? { onLanguage: o.onLanguage } : {}) }) : null, !busy && !lit && o.talk ? (_jsx(Control, { asChild: true, size: ROUND, fill: narrow, rounded: 999, ...(narrow ? null : QUIET), children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Voice mode', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 16 }) }) })) : (round)] })),
+        send: (_jsxs(XStack, { items: "center", gap: 6, "data-slot": "prompt-end", shrink: 0, children: [o.voice ? _jsx(Dictation, { voice: o.voice, disabled: disabled, language: o.language ?? null, ...(o.onLanguage ? { onLanguage: o.onLanguage } : {}) }) : null, !busy && !lit && o.talk ? (_jsx(Control, { asChild: true, size: ROUND, fill: narrow, rounded: 999, ...(narrow ? null : QUIET), children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Voice mode', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 16, color: narrow ? ON : 'var(--foreground)' }) }) })) : (round)] })),
     };
 }
 /** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.61",
+  "version": "0.2.62",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",
@@ -72,7 +72,7 @@
   },
   "peerDependencies": {
     "@hanzo/gui": ">=8.3.5",
-    "@hanzo/ui": ">=8.27.67",
+    "@hanzo/ui": ">=8.29.0",
     "@hanzogui/lucide-icons-2": ">=8.3.5",
     "react": ">=19.2.8",
     "@hanzo/voice": ">=0.1.16",