@hanzo/build 0.2.64 → 0.2.65

package/lib/mic.js

@@ -114,6 +114,8 @@ function Meter({ device, on }) {
 /** The mic and its chevron, one control on the composer's row. */
 export function Dictation({ voice, disabled = false, narrow = false, language = null, onLanguage }) {
     const [open, setOpen] = useState(false);
+    // The Language list, drawn only while open (see plus.tsx).
+    const [lang, setLang] = useState(false);
     const { inputs, allowed, using } = useInputs(open);
     const [device, setDevice] = useState(() => (typeof window === 'undefined' ? null : kept()));
     const spoken = LANGUAGES.find((l) => l.id === language);
@@ -123,5 +125,5 @@ export function Dictation({ voice, disabled = false, narrow = false, language =
                                         setDevice(d.deviceId);
                                         keep(d.deviceId);
                                     }, children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", numberOfLines: 1, flex: 1, children: d.label || `Microphone ${i + 1}` }), on ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : 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] })] })] }));
+                            })), onLanguage ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 13, color: "$hint", children: "Dictation settings" }) }), _jsxs(DropdownMenuSub, { open: lang, onOpenChange: setLang, 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' })] }) }), lang ? (_jsx(DropdownMenuSubContent, { minW: 160, pointerEvents: "auto", 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] })] })) : null] })] })] }));
 }

package/lib/plus.js

@@ -44,6 +44,8 @@ export function Plus(p) {
     const media = useMedia();
     const wide = media.sm;
     const [open, setOpen] = useState(false);
+    // The shelf open beside the menu.
+    const [sub, setSub] = useState(null);
     const close = () => setOpen(false);
     const shelves = useMemo(() => SHELVES.filter((s) => p[s.key]), [p]);
     const switches = [
@@ -53,6 +55,6 @@ export function Plus(p) {
     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, { children: [_jsx(DropdownMenuSubTrigger, { "data-slot": `plus-${s.key}`, children: _jsx(Line, { icon: s.icon, label: s.label }) }), _jsx(DropdownMenuSubContent, { minW: 200, maxW: 340, maxH: 420, style: { overflowY: 'auto' }, children: _jsx(Contents, { shelf: p[s.key], name: s.label, close: close }) })] }, 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)))] }));
+                }, 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}`, 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)))] })) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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.",