@hanzo/build 0.2.76 → 0.2.77

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/package.json

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