@hanzo/build 0.2.76 → 0.2.78

package/lib/api/studio.d.ts

@@ -35,8 +35,9 @@ export interface Start {
 }
 /**
  * A design system: one of Studio's brands, the one store for them. Its tokens
- * are W3C design tokens (color, font, type, space, radius) and two groups of our
- * own, `components` and `voice`, each a line a model follows.
+ * are CSS custom properties (--background, --primary, --font-sans, --radius-md,
+ * …, the form Studio's renderer reads), with `--component-*` and `--voice-*` as
+ * quoted lines a model follows (design.ts `tokensOf`).
  *
  *   GET  /v1/studio/brands        {data: [brand]}   the ones you may read
  *   GET  /v1/studio/brands/{id}   one

package/lib/carry.js

@@ -110,8 +110,7 @@ export function useCarry(t, key, customize, lent, modes = DEV_MODES) {
     const named = kits.value.find((b) => b.id === design);
     const designs = {
         rows: kits.value.map((b) => {
-            const c = (b.tokens.color ?? {});
-            return { id: b.id, label: b.name, note: [c.primary?.$value, c.accent?.$value].filter(Boolean).join(' '), icon: _jsx(Palette, { size: 16 }), on: b.id === design };
+            return { id: b.id, label: b.name, note: [b.tokens['--primary'], b.tokens['--accent']].filter((x) => typeof x === 'string').join(' '), icon: _jsx(Palette, { size: 16 }), on: b.id === design };
         }),
         pick: (id) => gear.set({ design: design === id ? '' : id }),
         loading: kits.loading,

package/lib/design.d.ts

@@ -1,6 +1,6 @@
 /**
  * A design system as the composer handles it: drafted by a model, kept as a
- * Studio brand (W3C design tokens plus `components` and `voice`), said to the
+ * Studio brand (CSS custom properties, the form Studio's renderer reads), said to the
  * model on every message of a conversation it is attached to, and drawn as a
  * page to look at. Pure, so it is tested without a browser.
  */
@@ -126,8 +126,14 @@ export declare const SCHEMA: {
 };
 /** A model's answer as a Draft, or why it is not one. */
 export declare function drafted(raw: unknown): Draft | string;
-/** A Draft as W3C design tokens, with our two groups beside them. */
-export declare function tokensOf(d: Draft): Record<string, unknown>;
+/**
+ * A Draft as design tokens: CSS custom properties, the names @hanzo/design uses
+ * (--background, --foreground, --primary, --font-sans, …). That is the one form
+ * Studio's renderer takes (hanzo/render `tokens`: every key `--name`, every value
+ * one declaration), so a deck, a document and a page draw from the same map.
+ * The components and the voice ride along as quoted strings under their own names.
+ */
+export declare function tokensOf(d: Draft): Record<string, string>;
 /** What a model is told on every message of a conversation the system is attached to. */
 export declare function said(b: Brand): string;
 /** The system drawn as a page: its palette, type, a button, a card, an input, its voice. */

package/lib/design.js

@@ -54,40 +54,92 @@ export function drafted(raw) {
         voice: { tone: str(v.tone), do: lines(v.do), dont: lines(v.dont) },
     };
 }
-/** A Draft as W3C design tokens, with our two groups beside them. */
+/**
+ * A Draft as design tokens: CSS custom properties, the names @hanzo/design uses
+ * (--background, --foreground, --primary, --font-sans, …). That is the one form
+ * Studio's renderer takes (hanzo/render `tokens`: every key `--name`, every value
+ * one declaration), so a deck, a document and a page draw from the same map.
+ * The components and the voice ride along as quoted strings under their own names.
+ */
 export function tokensOf(d) {
-    const group = (rec, type, unit = '') => Object.fromEntries(Object.entries(rec).map(([k, v]) => [k, { $value: unit ? `${v}${unit}` : v, $type: type }]));
-    return {
-        color: group(d.colors, 'color'),
-        font: group({ heading: d.fonts.heading, body: d.fonts.body, mono: d.fonts.mono }, 'fontFamily'),
-        type: group(Object.fromEntries(d.scale.map((n, i) => [`step${i}`, n])), 'dimension', 'px'),
-        space: group(Object.fromEntries(d.spacing.map((n, i) => [`s${i}`, n])), 'dimension', 'px'),
-        radius: group(d.radius, 'dimension', 'px'),
-        components: Object.fromEntries(Object.entries(d.components).map(([k, v]) => [k, { $value: v, $type: 'string' }])),
-        voice: { tone: { $value: d.voice.tone, $type: 'string' }, do: { $value: d.voice.do, $type: 'string' }, dont: { $value: d.voice.dont, $type: 'string' } },
+    // Quoted, with nothing that would make JSON escape it or end the declaration.
+    const q = (v) => JSON.stringify(v.replace(/["\\;{}<>\u0000-\u001f]|\/\*/g, ' ').slice(0, 280));
+    const c = d.colors;
+    const out = {
+        '--background': c.background,
+        '--foreground': c.text,
+        '--primary': c.primary,
     };
+    const more = { '--secondary': c.secondary, '--accent': c.accent, '--card': c.surface, '--muted-foreground': c.muted, '--border': c.border };
+    for (const [k, v] of Object.entries(more))
+        if (v)
+            out[k] = v;
+    out['--font-display'] = d.fonts.heading;
+    out['--font-sans'] = d.fonts.body;
+    out['--font-mono'] = d.fonts.mono;
+    for (const [k, v] of Object.entries(d.radius))
+        out[`--radius-${k}`] = `${v}px`;
+    d.scale.forEach((n, i) => (out[`--text-${i}`] = `${n}px`));
+    d.spacing.forEach((n, i) => (out[`--space-${i}`] = `${n}px`));
+    for (const [k, v] of Object.entries(d.components))
+        out[`--component-${k.replace(/[^a-z0-9-]/gi, '-').toLowerCase()}`] = q(v);
+    if (d.voice.tone)
+        out['--voice-tone'] = q(d.voice.tone);
+    if (d.voice.do.length)
+        out['--voice-do'] = q(d.voice.do.join('; ').replace(/;/g, ','));
+    if (d.voice.dont.length)
+        out['--voice-dont'] = q(d.voice.dont.join('; ').replace(/;/g, ','));
+    return out;
 }
-/** One token group as `name value` pairs. */
-function pairs(tokens, group) {
-    return Object.entries(obj(tokens[group])).map(([k, v]) => {
-        const val = obj(v).$value;
-        return [k, Array.isArray(val) ? val.join('; ') : String(val ?? '')];
-    });
+/** A token's value as written, a quoted string unquoted. */
+const value = (v) => {
+    const s = typeof v === 'string' ? v : '';
+    try {
+        return s.startsWith('"') ? String(JSON.parse(s)) : s;
+    }
+    catch {
+        return s;
+    }
+};
+/** The tokens whose names start `prefix`, as `name value` pairs, the prefix dropped. */
+function pairs(tokens, prefix) {
+    return Object.entries(tokens)
+        .filter(([k]) => k.startsWith(prefix))
+        .map(([k, v]) => [k.slice(prefix.length), value(v)]);
 }
+/** The colours by the names a person reads them. */
+const COLOURS = [
+    ['primary', '--primary'],
+    ['secondary', '--secondary'],
+    ['accent', '--accent'],
+    ['background', '--background'],
+    ['surface', '--card'],
+    ['text', '--foreground'],
+    ['muted', '--muted-foreground'],
+    ['border', '--border'],
+];
+const colours = (t) => COLOURS.filter(([, k]) => t[k]).map(([n, k]) => [n, value(t[k])]);
 /** What a model is told on every message of a conversation the system is attached to. */
 export function said(b) {
     const t = b.tokens;
-    const row = (g) => pairs(t, g).map(([k, v]) => `${k} ${v}`).join(', ');
+    const row = (list) => list.map(([k, v]) => `${k} ${v}`).join(', ');
+    const fonts = [
+        ['heading', value(t['--font-display'])],
+        ['body', value(t['--font-sans'])],
+        ['mono', value(t['--font-mono'])],
+    ].filter(([, v]) => v);
+    const comps = pairs(t, '--component-');
+    const voice = [value(t['--voice-tone']), value(t['--voice-do']) && `do: ${value(t['--voice-do'])}`, value(t['--voice-dont']) && `don't: ${value(t['--voice-dont'])}`].filter(Boolean);
     const parts = [
         `Design system "${b.name}" is attached to this conversation. Everything you make — pages, apps, components, slides, images and copy — follows it exactly; never invent other colours, fonts or radii.`,
-        row('color') && `Colours: ${row('color')}.`,
-        row('font') && `Fonts: ${row('font')}.`,
-        row('type') && `Type scale: ${row('type')}.`,
-        row('space') && `Spacing: ${row('space')}.`,
-        row('radius') && `Radius: ${row('radius')}.`,
-        row('components') && `Components: ${pairs(t, 'components').map(([k, v]) => `${k} — ${v}`).join(' ')}`,
-        row('voice') && `Voice: ${pairs(t, 'voice').map(([k, v]) => `${k}: ${v}`).join(' | ')}`,
-        'In HTML, set these as CSS custom properties on :root and use them; load the fonts from Google Fonts when they are web fonts.',
+        colours(t).length && `Colours: ${row(colours(t))}.`,
+        fonts.length && `Fonts: ${row(fonts)}.`,
+        pairs(t, '--text-').length && `Type scale: ${row(pairs(t, '--text-'))}.`,
+        pairs(t, '--space-').length && `Spacing: ${row(pairs(t, '--space-'))}.`,
+        pairs(t, '--radius-').length && `Radius: ${row(pairs(t, '--radius-'))}.`,
+        comps.length && `Components: ${comps.map(([k, v]) => `${k} — ${v}`).join(' ')}`,
+        voice.length && `Voice: ${voice.join(' | ')}`,
+        `In HTML, declare these exact custom properties on :root and use them: ${Object.keys(t).filter((k) => !k.startsWith('--component-') && !k.startsWith('--voice-')).join(', ')}. Load the fonts from Google Fonts when they are web fonts.`,
     ];
     return parts.filter(Boolean).join('\n');
 }
@@ -95,29 +147,29 @@ const esc = (s) => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>'
 /** The system drawn as a page: its palette, type, a button, a card, an input, its voice. */
 export function preview(b) {
     const t = b.tokens;
-    const c = Object.fromEntries(pairs(t, 'color'));
-    const f = Object.fromEntries(pairs(t, 'font'));
-    const r = Object.fromEntries(pairs(t, 'radius'));
-    const sizes = pairs(t, 'type').map(([, v]) => v);
-    const voice = Object.fromEntries(pairs(t, 'voice'));
-    const comps = pairs(t, 'components');
-    const fonts = [f.heading, f.body].filter((x) => x && !/^ui-|system|sans-serif|serif$/i.test(x));
+    const v = (k, d) => value(t[k]) || d;
+    const sizes = pairs(t, '--text-').map(([, x]) => x);
+    const comps = pairs(t, '--component-');
+    const heading = v('--font-display', 'Inter');
+    const body = v('--font-sans', 'Inter');
+    const fonts = [heading, body].filter((x) => x && !/^ui-|system|sans-serif|serif$/i.test(x));
     const link = fonts.length ? `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?${fonts.map((x) => `family=${encodeURIComponent(x)}:wght@400;600;700`).join('&')}&display=swap">` : '';
-    const swatches = Object.entries(c).map(([k, v]) => `<div class="sw"><span style="background:${esc(v)}"></span><b>${esc(k)}</b><code>${esc(v)}</code></div>`).join('');
-    const scale = sizes.map((s) => `<div style="font-size:${esc(s)}">${esc(b.name)} — ${esc(s)}</div>`).join('');
+    const swatches = colours(t).map(([k, c]) => `<div class="sw"><span style="background:${esc(c)}"></span><b>${esc(k)}</b><code>${esc(c)}</code></div>`).join('');
+    const scale = sizes.map((x) => `<div style="font-size:${esc(x)}">${esc(b.name)} — ${esc(x)}</div>`).join('');
+    const root = Object.entries(t).filter(([k]) => !k.startsWith('--component-') && !k.startsWith('--voice-')).map(([k, x]) => `${k}:${value(x)}`).join(';');
     return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${esc(b.name)}</title>${link}
-<style>:root{--primary:${c.primary};--secondary:${c.secondary ?? c.primary};--accent:${c.accent ?? c.primary};--bg:${c.background};--surface:${c.surface ?? c.background};--text:${c.text};--muted:${c.muted ?? c.text};--border:${c.border ?? c.muted ?? c.text};--r-sm:${r.sm ?? '4px'};--r-md:${r.md ?? '8px'};--r-lg:${r.lg ?? '16px'}}
-body{margin:0;background:var(--bg);color:var(--text);font-family:'${esc(f.body ?? 'Inter')}',system-ui,sans-serif;padding:40px;line-height:1.5}
-h1,h2{font-family:'${esc(f.heading ?? 'Inter')}',system-ui,sans-serif;margin:0 0 12px}h2{margin-top:40px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
-.row{display:flex;flex-wrap:wrap;gap:16px}.sw{display:flex;flex-direction:column;gap:4px;width:120px}.sw span{height:64px;border-radius:var(--r-md);border:1px solid var(--border)}.sw code{color:var(--muted);font-size:12px}
-.btn{background:var(--primary);color:var(--bg);border:0;border-radius:var(--r-md);padding:12px 20px;font:inherit;font-weight:600}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
-.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;max-width:320px}input{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;font:inherit;width:260px}
-li{color:var(--muted)}</style></head><body>
-<h1 style="font-size:40px">${esc(b.name)}</h1><p style="color:var(--muted)">${esc(voice.tone ?? '')}</p>
+<style>:root{${root}}
+body{margin:0;background:var(--background);color:var(--foreground);font-family:'${esc(body)}',system-ui,sans-serif;padding:40px;line-height:1.5}
+h1,h2{font-family:'${esc(heading)}',system-ui,sans-serif;margin:0 0 12px}h2{margin-top:40px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground,var(--foreground))}
+.row{display:flex;flex-wrap:wrap;gap:16px}.sw{display:flex;flex-direction:column;gap:4px;width:120px}.sw span{height:64px;border-radius:var(--radius-md,8px);border:1px solid var(--border,var(--foreground))}.sw code{color:var(--muted-foreground);font-size:12px}
+.btn{background:var(--primary);color:var(--background);border:0;border-radius:var(--radius-md,8px);padding:12px 20px;font:inherit;font-weight:600}.btn.ghost{background:transparent;color:var(--foreground);border:1px solid var(--border,var(--foreground))}
+.card{background:var(--card,var(--background));border:1px solid var(--border,var(--foreground));border-radius:var(--radius-lg,16px);padding:20px;max-width:320px}input{background:var(--card,var(--background));color:var(--foreground);border:1px solid var(--border,var(--foreground));border-radius:var(--radius-sm,4px);padding:10px 12px;font:inherit;width:260px}
+li{color:var(--muted-foreground)}</style></head><body>
+<h1 style="font-size:40px">${esc(b.name)}</h1><p style="color:var(--muted-foreground)">${esc(value(t['--voice-tone']))}</p>
 <h2>Colour</h2><div class="row">${swatches}</div>
 <h2>Type</h2>${scale}
-<h2>Components</h2><div class="row" style="align-items:flex-start"><button class="btn">Primary action</button><button class="btn ghost">Secondary</button><input placeholder="An input"><div class="card"><b>A card</b><p style="color:var(--muted);margin:8px 0 0">${esc(comps.find(([k]) => k === 'card')?.[1] ?? '')}</p></div></div>
-<ul>${comps.map(([k, v]) => `<li><b style="color:var(--text)">${esc(k)}</b> — ${esc(v)}</li>`).join('')}</ul>
-<h2>Voice</h2><p><b>Do</b>: ${esc(voice.do ?? '')}</p><p><b>Don't</b>: ${esc(voice.dont ?? '')}</p>
+<h2>Components</h2><div class="row" style="align-items:flex-start"><button class="btn">Primary action</button><button class="btn ghost">Secondary</button><input placeholder="An input"><div class="card"><b>A card</b><p style="color:var(--muted-foreground);margin:8px 0 0">${esc(comps.find(([k]) => k === 'card')?.[1] ?? '')}</p></div></div>
+<ul>${comps.map(([k, x]) => `<li><b style="color:var(--foreground)">${esc(k)}</b> — ${esc(x)}</li>`).join('')}</ul>
+<h2>Voice</h2><p><b>Do</b>: ${esc(value(t['--voice-do']))}</p><p><b>Don't</b>: ${esc(value(t['--voice-dont']))}</p>
 </body></html>`;
 }

package/lib/prompt.d.ts

@@ -94,11 +94,12 @@ export interface PromptOptions {
     narrow?: boolean;
 }
 /** The row under the frame: where (Dev), then the model, the effort and the mode. */
-export declare function Tune({ mind, mode, where, onUpgrade }: {
+export declare function Tune({ mind, mode, where, onUpgrade, limits }: {
     mind?: Mind | null;
     mode?: PromptOptions['mode'];
     where?: ReactNode;
     onUpgrade?: (model: string) => void;
+    limits?: PauseSource | null;
 }): import("react").JSX.Element;
 /** The `/` or `@` the caret ends on, and the words typed after it. */
 export declare function trigger(value: string): {

package/lib/prompt.js

@@ -23,7 +23,7 @@ import { ArrowUp, AudioLines, Check, Square, X } from '@hanzogui/lucide-icons-2'
 import { Control } from '@hanzo/composer';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSearch, DropdownMenuTrigger, Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui';
 import { Composer } from '@hanzo/ui/chat';
-import { groupModels, matchesModel } from '@hanzo/ui/models';
+import { groupModels, isPaused, matchesModel } from '@hanzo/ui/models';
 import { speech, Voice } from '@hanzo/voice';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ENSO } from './api/models.js';
@@ -81,7 +81,7 @@ function Opens({ label, word, dim, children }) {
     return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { children: _jsx(Word, { label: label, dim: dim, open: open, children: word }) }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: children(() => setOpen(false)) })] }));
 }
 /** The model's name, and the catalog behind it: Free's lane to pick from, the rest an upgrade. */
-function Model({ mind, onUpgrade }) {
+function Model({ mind, onUpgrade, limits }) {
     const [open, setOpen] = useState(false);
     const [q, setQ] = useState('');
     // The catalog is hundreds long, and drawing all of it is what made the menu slow
@@ -103,14 +103,16 @@ function Model({ mind, onUpgrade }) {
     const routed = mind.model === ENSO;
     return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, placement: "top-end", children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { "data-slot": "mind", children: _jsx(Word, { label: `Model: ${nameOf(mind.model, mind.models)}`, open: open, children: nameOf(mind.model, mind.models) }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 280, "data-slot": "model-menu", children: [_jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: "Search models" }), _jsxs(YStack, { maxH: "min(420px, 60vh)", overflowY: "auto", overflowX: "hidden", "data-slot": "model-rows", children: [!mind.free && !q.trim() ? (_jsx(DropdownMenuItem, { onSelect: () => mind.pick(ENSO), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsxs(YStack, { flex: 1, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", children: "Enso" }), _jsx(SizableText, { fontSize: 12, color: "$hint", children: "Picks the model for each message and step" })] }), routed ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) })) : null, groups.map((g) => (_jsxs(YStack, { role: "group", "aria-label": g.label, children: [_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, pt: 8, pb: 2, children: g.label }), g.models.map((m) => {
                                         const ok = grants(mind.free, m.id, mind.models);
-                                        return (_jsx(DropdownMenuItem, { "data-slot": "model-row", onSelect: () => (ok ? mind.pick(m.id) : onUpgrade?.(m.id)), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: ok ? '$ink' : '$hint', numberOfLines: 1, flex: 1, children: nameOf(m.id, mind.models) }), ok ? null : (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 6, py: 1, rounded: 6, borderWidth: 1, borderColor: "$borderColor", children: "Upgrade" })), m.id === mind.model ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, m.id));
+                                        // Paused by the plan's usage: still listed and still picked; the gateway answers from Enso.
+                                        const paused = isPaused(m, limits);
+                                        return (_jsx(DropdownMenuItem, { "data-slot": "model-row", "data-model": m.id, "data-paused": paused ? 'true' : undefined, onSelect: () => (ok ? mind.pick(m.id) : onUpgrade?.(m.id)), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: ok ? '$ink' : '$hint', numberOfLines: 1, flex: 1, children: nameOf(m.id, mind.models) }), ok ? null : (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 6, py: 1, rounded: 6, borderWidth: 1, borderColor: "$borderColor", children: "Upgrade" })), ok && paused ? (_jsx(SizableText, { fontSize: 12, color: "$hint", children: "Paused" })) : null, m.id === mind.model ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, m.id));
                                     })] }, g.key))), more > 0 ? (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, py: 8, children: `Type to search ${more} more models` })) : null] })] })] }));
 }
 /** The row under the frame: where (Dev), then the model, the effort and the mode. */
-export function Tune({ mind, mode, where, onUpgrade }) {
+export function Tune({ mind, mode, where, onUpgrade, limits }) {
     const thinks = mind ? reasons(mind.model, mind.models) : false;
     const pace = mind ? EFFORTS.find((e) => e.id === mind.effort) : null;
-    return (_jsxs(XStack, { "data-slot": "tune", width: "100%", items: "center", gap: 2, flexWrap: "wrap", rowGap: 4, children: [where ? (_jsx(XStack, { items: "center", gap: 2, flexWrap: "wrap", minW: 0, "$max-sm": { width: '100%' }, children: where })) : null, _jsx(XStack, { flex: 1, "$max-sm": { display: 'none' } }), _jsxs(XStack, { items: "center", gap: 2, ml: "auto", shrink: 0, children: [mind ? _jsx(Model, { mind: mind, onUpgrade: onUpgrade }) : null, mind && thinks && pace ? (_jsx(Opens, { label: `Effort: ${pace.label}`, word: pace.label, dim: true, children: (close) => (_jsx(Choices, { title: "Effort", items: EFFORTS, value: mind.effort, onPick: (e) => {
+    return (_jsxs(XStack, { "data-slot": "tune", width: "100%", items: "center", gap: 2, flexWrap: "wrap", rowGap: 4, children: [where ? (_jsx(XStack, { items: "center", gap: 2, flexWrap: "wrap", minW: 0, "$max-sm": { width: '100%' }, children: where })) : null, _jsx(XStack, { flex: 1, "$max-sm": { display: 'none' } }), _jsxs(XStack, { items: "center", gap: 2, ml: "auto", shrink: 0, children: [mind ? _jsx(Model, { mind: mind, onUpgrade: onUpgrade, limits: limits }) : null, mind && thinks && pace ? (_jsx(Opens, { label: `Effort: ${pace.label}`, word: pace.label, dim: true, children: (close) => (_jsx(Choices, { title: "Effort", items: EFFORTS, value: mind.effort, onPick: (e) => {
                                 mind.pace(e);
                                 close();
                             } })) })) : null, mode ? (_jsxs(Popover, { allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "data-slot": "mode", "aria-label": `Mode: ${MODES.find((m) => m.id === mode.value)?.label}`, items: "center", height: 24, px: 8, ml: 4, rounded: 6, bg: "$hover", cursor: "pointer", hoverStyle: { bg: '$raised' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { height: 44, px: 12 }, children: _jsx(SizableText, { fontSize: 14, color: "$ink", children: MODES.find((m) => m.id === mode.value)?.label }) }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: _jsx(Choices, { title: "Mode", items: mode.items ? MODES.filter((m) => mode.items.includes(m.id)) : MODES, value: mode.value, onPick: mode.set }) })] })) : null] })] }));
@@ -144,7 +146,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, { ...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 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, limits: o.limits }), narrow ? null : o.below] })) : undefined;
     const round = (_jsx(Control, { type: "button", size: narrow ? TAP : 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;

package/package.json

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