@hanzo/build 0.2.68 → 0.2.69

package/lib/api/studio.d.ts

@@ -30,7 +30,34 @@ export interface Start {
     input: Record<string, unknown>;
     title?: string;
     parent?: string;
+    /** A brand (design system) the run reads as brand.* — its palette, type and voice. */
+    brand?: string;
 }
+/**
+ * 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.
+ *
+ *   GET  /v1/studio/brands        {data: [brand]}   the ones you may read
+ *   GET  /v1/studio/brands/{id}   one
+ *   POST /v1/studio/brands        {name, tokens, shared?} → brand
+ */
+export interface Brand {
+    id: string;
+    name: string;
+    tokens: Record<string, unknown>;
+}
+export declare function brandOf(raw: unknown): Brand;
+export declare function brands(t: Target, init?: {
+    signal?: AbortSignal;
+}): Promise<Brand[]>;
+export declare function brand(t: Target, id: string, init?: {
+    signal?: AbortSignal;
+}): Promise<Brand>;
+export declare function keepBrand(t: Target, b: {
+    name: string;
+    tokens: Record<string, unknown>;
+}, signal?: AbortSignal): Promise<Brand>;
 export declare function run(raw: unknown): Run;
 /** A run that has ended, one way or the other. */
 export declare const ended: (r: Run) => boolean;

package/lib/api/studio.js

@@ -14,6 +14,20 @@
  */
 import { call, Refusal, seg } from './call.js';
 import { item } from './library.js';
+export function brandOf(raw) {
+    const o = obj(raw);
+    return { id: str(o.id), name: str(o.name), tokens: obj(o.tokens) };
+}
+export async function brands(t, init) {
+    const raw = obj(await call(t, 'GET', '/v1/studio/brands', undefined, init));
+    return (Array.isArray(raw.data) ? raw.data : []).map(brandOf).filter((b) => b.id);
+}
+export async function brand(t, id, init) {
+    return brandOf(await call(t, 'GET', `/v1/studio/brands/${seg(id)}`, undefined, init));
+}
+export async function keepBrand(t, b, signal) {
+    return brandOf(await call(t, 'POST', '/v1/studio/brands', { name: b.name, tokens: b.tokens }, { signal }));
+}
 const str = (v) => (typeof v === 'string' ? v : '');
 const obj = (v) => (v && typeof v === 'object' ? v : {});
 export function run(raw) {

package/lib/carry.d.ts

@@ -9,6 +9,8 @@ export type Lent = Omit<Composer, 'target' | 'show'>;
 export interface Carry {
     gear: GearState;
     skills: Shelf;
+    /** The design systems (Studio brands): attach one, or make one by chat. */
+    design: Shelf;
     /** The plugins that run for this person (`@` lists the same). */
     plugins: Shelf;
     /** A dialog a plugin opened, for the surface to draw; null when none is. */
@@ -16,7 +18,7 @@ export interface Carry {
     /** Whether a plugin that prepares a message is on. */
     preparing: boolean;
     /** What the plugins that are on add to the message about to go. */
-    prep: (turn: Turn, signal: AbortSignal) => Promise<Prep>;
+    prep: (turn: Omit<Turn, 'design'>, signal: AbortSignal) => Promise<Prep>;
     /** The chips after `+`: the skills on, Research, and Plan. */
     on: Chip[];
     /** The words the gear adds to every message, '' when none. */

package/lib/carry.js

@@ -15,11 +15,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * A shelf is offered only where its service answers; a surface adds its own
  * (Chat its agents, Dev its devices) beside these.
  */
-import { BookOpen, ListChecks, ScrollText } from '@hanzogui/lucide-icons-2';
+import { BookOpen, ListChecks, Palette, ScrollText } from '@hanzogui/lucide-icons-2';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { call, query, unwrap } from './api/call.js';
 import { active, authored, document, nameOf as skillOf } from './api/skills.js';
+import { brand, brands } from './api/studio.js';
 import { useRead } from './data.js';
+import { said as designSaid } from './design.js';
 import { useGear } from './gear.js';
 import { active as lighted, prep, shelf as pluginShelf, usePlugins } from './plugins/index.js';
 /** The most of each skill a message carries. */
@@ -34,8 +36,13 @@ async function remembered(t) {
         .filter(Boolean);
 }
 /** The words `skills`, `memory` and `mode` add to a message. */
-async function said(t, skills, memory, mode) {
+async function said(t, skills, memory, mode, design) {
     const parts = [];
+    if (design) {
+        const b = await brand(t, design).catch(() => null);
+        if (b?.name)
+            parts.push(designSaid(b));
+    }
     if (skills.length) {
         const own = await authored(t).catch(() => []);
         for (const n of skills) {
@@ -77,7 +84,7 @@ export function useCarry(t, key, customize, lent) {
     const signed = Boolean(t.token());
     const list = useRead(signed ? () => active(t) : null, [], [t, signed]);
     const names = useMemo(() => list.value.map((s) => skillOf(s.name)).filter(Boolean), [list.value]);
-    const { skills, research, memory, mode } = gear.gear;
+    const { skills, research, memory, mode, design } = gear.gear;
     const shelf = {
         rows: names.map((n) => ({ id: n, label: n, icon: _jsx(ScrollText, { size: 16 }), on: skills.includes(n) })),
         pick: (id) => gear.toggle('skills', id),
@@ -89,11 +96,33 @@ export function useCarry(t, key, customize, lent) {
         browse: { label: 'Browse skills', onPress: () => customize('skills') },
     };
     const plugins = pluginShelf(found, gear, composer);
+    // The design systems: Studio's brands, the one store for them.
+    const kits = useRead(signed ? () => brands(t) : null, [], [t, signed, design]);
+    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 };
+        }),
+        pick: (id) => gear.set({ design: design === id ? '' : id }),
+        loading: kits.loading,
+        error: kits.error ? 'The design systems could not be read.' : null,
+        empty: 'No design systems yet',
+        create: {
+            label: 'Create design system',
+            onPress: () => {
+                if (!gear.gear.plugins.includes('design'))
+                    gear.toggle('plugins', 'design');
+                lentNow.current.setDraft('Make me a design system for ');
+            },
+        },
+    };
     const lit = lighted(found.plugins, gear.gear);
     const on = [
         ...skills.map((n) => ({ id: `skill:${n}`, label: n, icon: _jsx(ScrollText, { size: 14 }), onRemove: () => gear.toggle('skills', n) })),
         ...(research ? [{ id: 'research', label: 'Research', icon: _jsx(BookOpen, { size: 14 }), onRemove: () => gear.set({ research: false }) }] : []),
         ...(mode === 'plan' ? [{ id: 'plan', label: 'Plan', icon: _jsx(ListChecks, { size: 14 }), onRemove: () => gear.set({ mode: 'auto' }) }] : []),
+        ...(design ? [{ id: 'design', label: named?.name ?? 'Design system', icon: _jsx(Palette, { size: 14 }), onRemove: () => gear.set({ design: '' }) }] : []),
         ...lit
             .filter((p) => p.id !== 'research')
             .map((p) => ({ id: `plugin:${p.id}`, label: p.name, icon: p.icon, onRemove: () => gear.toggle('plugins', p.id) })),
@@ -105,13 +134,13 @@ export function useCarry(t, key, customize, lent) {
         if (!signedIn)
             return setText(mode === 'plan' ? 'Plan mode: lay out the plan and stop until the person says go.' : '');
         let live = true;
-        void said(t, skills, memory, mode).then((x) => live && setText(x));
+        void said(t, skills, memory, mode, design).then((x) => live && setText(x));
         return () => {
             live = false;
         };
         // `skills` is read through `asked`, its contents.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [t, signedIn, asked, memory, mode]);
+    }, [t, signedIn, asked, memory, mode, design]);
     return {
         gear,
         skills: shelf,
@@ -120,6 +149,12 @@ export function useCarry(t, key, customize, lent) {
         on,
         text,
         preparing: lit.length > 0,
-        prep: (turn, signal) => prep(found.plugins, gear.gear, turn, composer, signal),
+        design: designs,
+        // A design system a plugin made is attached at once, and the maker turns off: it made one.
+        prep: (turn, signal) => prep(found.plugins, gear.gear, { ...turn, design }, composer, signal).then((p) => {
+            if (p.design)
+                gear.set({ design: p.design, plugins: gear.gear.plugins.filter((x) => x !== 'design') });
+            return p;
+        }),
     };
 }

package/lib/design.d.ts

@@ -0,0 +1,134 @@
+/**
+ * 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
+ * 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.
+ */
+import type { Brand } from './api/studio.ts';
+/** What a model is asked to answer: the system in plain fields. */
+export interface Draft {
+    name: string;
+    colors: Record<string, string>;
+    fonts: {
+        heading: string;
+        body: string;
+        mono: string;
+    };
+    /** Type sizes, px, smallest first. */
+    scale: number[];
+    /** Spacing steps, px. */
+    spacing: number[];
+    radius: Record<string, number>;
+    /** One line each: how a button, card, input, nav… looks and behaves. */
+    components: Record<string, string>;
+    voice: {
+        tone: string;
+        do: string[];
+        dont: string[];
+    };
+}
+/** The schema the drafting call decodes under. */
+export declare const SCHEMA: {
+    readonly type: 'object';
+    readonly additionalProperties: false;
+    readonly required: readonly ['name', 'colors', 'fonts', 'scale', 'spacing', 'radius', 'components', 'voice'];
+    readonly properties: {
+        readonly name: {
+            readonly type: 'string';
+        };
+        readonly colors: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['primary', 'secondary', 'accent', 'background', 'surface', 'text', 'muted', 'border'];
+            readonly properties: {
+                [k: string]: {
+                    type: string;
+                };
+            };
+        };
+        readonly fonts: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['heading', 'body', 'mono'];
+            readonly properties: {
+                readonly heading: {
+                    readonly type: 'string';
+                };
+                readonly body: {
+                    readonly type: 'string';
+                };
+                readonly mono: {
+                    readonly type: 'string';
+                };
+            };
+        };
+        readonly scale: {
+            readonly type: 'array';
+            readonly items: {
+                readonly type: 'number';
+            };
+        };
+        readonly spacing: {
+            readonly type: 'array';
+            readonly items: {
+                readonly type: 'number';
+            };
+        };
+        readonly radius: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['sm', 'md', 'lg'];
+            readonly properties: {
+                readonly sm: {
+                    readonly type: 'number';
+                };
+                readonly md: {
+                    readonly type: 'number';
+                };
+                readonly lg: {
+                    readonly type: 'number';
+                };
+            };
+        };
+        readonly components: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['button', 'card', 'input', 'nav', 'hero'];
+            readonly properties: {
+                [k: string]: {
+                    type: string;
+                };
+            };
+        };
+        readonly voice: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['tone', 'do', 'dont'];
+            readonly properties: {
+                readonly tone: {
+                    readonly type: 'string';
+                };
+                readonly do: {
+                    readonly type: 'array';
+                    readonly items: {
+                        readonly type: 'string';
+                    };
+                };
+                readonly dont: {
+                    readonly type: 'array';
+                    readonly items: {
+                        readonly type: 'string';
+                    };
+                };
+            };
+        };
+    };
+};
+/** 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>;
+/** 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. */
+export declare function preview(b: Brand): string;

package/lib/design.js

@@ -0,0 +1,123 @@
+/** The schema the drafting call decodes under. */
+export const SCHEMA = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['name', 'colors', 'fonts', 'scale', 'spacing', 'radius', 'components', 'voice'],
+    properties: {
+        name: { type: 'string' },
+        colors: {
+            type: 'object',
+            additionalProperties: false,
+            required: ['primary', 'secondary', 'accent', 'background', 'surface', 'text', 'muted', 'border'],
+            properties: Object.fromEntries(['primary', 'secondary', 'accent', 'background', 'surface', 'text', 'muted', 'border'].map((k) => [k, { type: 'string' }])),
+        },
+        fonts: { type: 'object', additionalProperties: false, required: ['heading', 'body', 'mono'], properties: { heading: { type: 'string' }, body: { type: 'string' }, mono: { type: 'string' } } },
+        scale: { type: 'array', items: { type: 'number' } },
+        spacing: { type: 'array', items: { type: 'number' } },
+        radius: { type: 'object', additionalProperties: false, required: ['sm', 'md', 'lg'], properties: { sm: { type: 'number' }, md: { type: 'number' }, lg: { type: 'number' } } },
+        components: {
+            type: 'object',
+            additionalProperties: false,
+            required: ['button', 'card', 'input', 'nav', 'hero'],
+            properties: Object.fromEntries(['button', 'card', 'input', 'nav', 'hero'].map((k) => [k, { type: 'string' }])),
+        },
+        voice: { type: 'object', additionalProperties: false, required: ['tone', 'do', 'dont'], properties: { tone: { type: 'string' }, do: { type: 'array', items: { type: 'string' } }, dont: { type: 'array', items: { type: 'string' } } } },
+    },
+};
+const HEX = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i;
+const str = (v) => (typeof v === 'string' ? v.trim() : '');
+const obj = (v) => (v && typeof v === 'object' && !Array.isArray(v) ? v : {});
+const nums = (v, lo, hi) => (Array.isArray(v) ? v.filter((n) => typeof n === 'number' && n >= lo && n <= hi) : []);
+const lines = (v) => (Array.isArray(v) ? v.map(str).filter(Boolean).slice(0, 8) : []);
+/** A model's answer as a Draft, or why it is not one. */
+export function drafted(raw) {
+    const o = obj(raw);
+    const name = str(o.name).slice(0, 80);
+    if (!name)
+        return 'The design system has no name.';
+    const colors = Object.fromEntries(Object.entries(obj(o.colors)).filter(([, v]) => HEX.test(str(v))).map(([k, v]) => [k, str(v)]));
+    if (!colors.primary || !colors.background || !colors.text)
+        return 'The design system needs at least a primary, a background and a text colour.';
+    const f = obj(o.fonts);
+    const fonts = { heading: str(f.heading) || 'Inter', body: str(f.body) || 'Inter', mono: str(f.mono) || 'ui-monospace' };
+    const r = obj(o.radius);
+    const radius = Object.fromEntries(Object.entries(r).filter(([, v]) => typeof v === 'number' && v >= 0 && v <= 64));
+    const v = obj(o.voice);
+    return {
+        name,
+        colors,
+        fonts,
+        scale: nums(o.scale, 8, 160).slice(0, 10),
+        spacing: nums(o.spacing, 0, 256).slice(0, 12),
+        radius,
+        components: Object.fromEntries(Object.entries(obj(o.components)).map(([k, d]) => [k, str(d)]).filter(([, d]) => d)),
+        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. */
+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' } },
+    };
+}
+/** 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 ?? '')];
+    });
+}
+/** 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 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.',
+    ];
+    return parts.filter(Boolean).join('\n');
+}
+const esc = (s) => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+/** 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 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('');
+    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>
+<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>
+</body></html>`;
+}

package/lib/landing.js

@@ -205,7 +205,8 @@ export function Landing({ onStarted }) {
             const prepped = carry.preparing ? await carry.prep({ text: draft.trim(), files: [], thread: '' }, new AbortController().signal) : {};
             // An answer of a plugin's own (a deck) is the answer: no run is started for it.
             if (prepped.reply) {
-                setNote(prepped.reply);
+                // Its words, without the page it drew (Chat shows that in the side panel).
+                setNote(prepped.reply.split('```')[0].trim());
                 return;
             }
             const run = await start(t, {
@@ -308,6 +309,7 @@ export function Landing({ onStarted }) {
                                             : `${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),
                                     skills: carry.skills,
+                                    design: carry.design,
                                     plugins: carry.plugins,
                                     devices,
                                     memory: { on: carry.gear.gear.memory, set: (on) => carry.gear.set({ memory: on }) },

package/lib/plugin.d.ts

@@ -35,6 +35,8 @@ export interface Turn {
     files: File[];
     /** The conversation's id, or '' for one not begun. */
     thread: string;
+    /** The design system attached to the conversation (a Studio brand id), or ''. */
+    design: string;
 }
 /** What a plugin adds to the message. */
 export interface Prep {
@@ -44,6 +46,8 @@ export interface Prep {
     files?: File[];
     /** An answer of the plugin's own, in markdown; the model is not asked. */
     reply?: string;
+    /** A design system the plugin made: attached to the conversation from then on. */
+    design?: string;
 }
 export interface Plugin {
     id: string;

package/lib/plugins/design.d.ts

@@ -0,0 +1,8 @@
+import { type Target } from '../api/call.ts';
+import type { Plugin, Prep, Turn } from '../plugin.ts';
+/** Hanzo's model that decodes under a strict schema. */
+export declare const DRAFTER = "zen5-flash";
+/** The site a brief points at, if it names one. */
+export declare const siteOf: (text: string) => string;
+export declare function make(turn: Turn, t: Target, signal: AbortSignal): Promise<Prep>;
+export declare const designer: Plugin;

package/lib/plugins/design.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Design system: while it is on, a message is a brief for one — "make me a
+ * design system for X", or a site to take it from — and the answer is the
+ * system: drafted by a Hanzo model under a strict schema (palette, type,
+ * spacing, radii, components, voice), kept as a Studio brand (the one store for
+ * them), drawn as a page in the side panel, and attached to the conversation, so
+ * everything made after it follows it. From `+` › Design system it attaches to
+ * any later conversation, in Chat or in Dev.
+ */
+import { Palette } from '@hanzogui/lucide-icons-2';
+import { call } from '../api/call.js';
+import { keepBrand } from '../api/studio.js';
+import { drafted, preview, SCHEMA, tokensOf } from '../design.js';
+/** Hanzo's model that decodes under a strict schema. */
+export const DRAFTER = 'zen5-flash';
+/** The site a brief points at, if it names one. */
+export const siteOf = (text) => text.match(/https?:\/\/[^\s)]+/)?.[0] ?? '';
+const BRIEF = 'You design design systems. From the brief (and the site text, when given), answer one complete, coherent system: ' +
+    'a name; eight hex colours with enough contrast for text on background and on primary; heading, body and mono fonts (Google Fonts names where you can); ' +
+    'a type scale of 6-8 px sizes; a spacing scale of 6-10 px steps; sm, md and lg radii; one line each for button, card, input, nav and hero; ' +
+    'and a voice: its tone in a sentence, 3-5 do and 3-5 dont lines. Take colours, fonts and tone from the site when one is given.';
+async function site(t, url, signal) {
+    if (!url)
+        return '';
+    const d = await call(t, 'POST', '/v1/crawl', { url }, { signal }).catch(() => null);
+    return d?.success ? (d.data?.markdown ?? '').slice(0, 6000) : '';
+}
+export async function make(turn, t, signal) {
+    const brief = turn.text.trim();
+    if (!brief)
+        return {};
+    const page = await site(t, siteOf(brief), signal);
+    const raw = await call(t, 'POST', '/v1/chat/completions', {
+        model: DRAFTER,
+        max_tokens: 2000,
+        messages: [
+            { role: 'system', content: BRIEF },
+            { role: 'user', content: page ? `${brief}\n\nThe site, as text:\n${page}` : brief },
+        ],
+        response_format: { type: 'json_schema', json_schema: { name: 'design_system', strict: true, schema: SCHEMA } },
+    }, { signal });
+    const text = raw?.choices?.[0]?.message?.content;
+    let parsed = null;
+    try {
+        parsed = JSON.parse(typeof text === 'string' ? text : '');
+    }
+    catch {
+        throw new Error('The model did not answer a design system. Try the brief again.');
+    }
+    const d = drafted(parsed);
+    if (typeof d === 'string')
+        throw new Error(d);
+    const b = await keepBrand(t, { name: d.name, tokens: tokensOf(d) }, signal);
+    const file = `${d.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'design-system'}.html`;
+    const reply = [
+        `**${d.name}** is saved and attached to this conversation: what you build here follows it, and \`+\` › Design system attaches it anywhere else.`,
+        `Colours ${Object.values(d.colors).join(' ')} · ${d.fonts.heading} / ${d.fonts.body} · radius ${Object.values(d.radius).join('/')}px`,
+        d.voice.tone ? `Voice: ${d.voice.tone}` : '',
+        '```html ' + file + '\n' + preview(b) + '\n```',
+    ];
+    return { reply: reply.filter(Boolean).join('\n\n'), design: b.id };
+}
+export const designer = {
+    id: 'design',
+    name: 'Design system',
+    note: 'Make one from a brief or a site',
+    icon: _jsx(Palette, { size: 16 }),
+    prepare: (turn, c, signal) => make(turn, c.target, signal),
+};

package/lib/plugins/index.js

@@ -23,6 +23,7 @@ import { say } from '../customize/say.js';
 import { path } from '../route.js';
 import { pdf } from './pdf.js';
 import { project } from './project.js';
+import { designer } from './design.js';
 import { deep } from './research.js';
 import { sketch } from './sketch.js';
 import { slides } from './slides.js';
@@ -46,6 +47,7 @@ export async function probe(t) {
         sketch,
         administers(t.token(), t.org) ? template : null,
         runs.includes('slides') ? slides : null,
+        studio.status === 'fulfilled' ? designer : null,
         pdf(runs.includes('document')),
     ].filter((p) => p !== null);
 }

package/lib/plugins/slides.js

@@ -40,7 +40,7 @@ export async function deck(turn, t, signal) {
     if (!ask)
         return {};
     const last = turn.thread ? decks.get(turn.thread) : undefined;
-    const r = await make(t, { template: 'slides', title: ask.slice(0, 80), input: { brief: last ? revision(last, ask) : ask, format: 'pptx' } }, signal);
+    const r = await make(t, { template: 'slides', title: ask.slice(0, 80), input: { brief: last ? revision(last, ask) : ask, format: 'pptx' }, ...(turn.design ? { brand: turn.design } : {}) }, signal);
     if (turn.thread)
         decks.set(turn.thread, r);
     return { reply: told(r) };

package/package.json

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