@hanzo/build 0.2.75 → 0.2.77

package/lib/api/library.d.ts

@@ -13,8 +13,13 @@
  * signed and stop working at `expires`: read the item again for fresh ones.
  */
 import { type Target } from './call.ts';
-export declare const KINDS: readonly ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
-export type Kind = (typeof KINDS)[number];
+export declare const KIND_IDS: readonly ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
+export type Kind = (typeof KIND_IDS)[number];
+/** The kinds a reader narrows to, in the order the Library lists them, '' being all. */
+export declare const KINDS: readonly {
+    id: Kind | '';
+    label: string;
+}[];
 export declare const SOURCES: readonly ['chat', 'dev', 'studio', 'workflow'];
 export type Source = (typeof SOURCES)[number];
 export type Scope = 'all' | 'mine' | 'shared';

package/lib/api/library.js

@@ -13,7 +13,19 @@
  * signed and stop working at `expires`: read the item again for fresh ones.
  */
 import { call, query, seg } from './call.js';
-export const KINDS = ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
+export const KIND_IDS = ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
+/** The kinds a reader narrows to, in the order the Library lists them, '' being all. */
+export const KINDS = [
+    { id: '', label: 'All' },
+    { id: 'image', label: 'Images' },
+    { id: 'video', label: 'Videos' },
+    { id: 'audio', label: 'Audio' },
+    { id: 'document', label: 'Documents' },
+    { id: 'slides', label: 'Slides' },
+    { id: 'model', label: '3D' },
+    { id: 'code', label: 'Code' },
+    { id: 'file', label: 'Files' },
+];
 export const SOURCES = ['chat', 'dev', 'studio', 'workflow'];
 /** A product, as a person names it. */
 export const SOURCE = { chat: 'Chat', dev: 'Dev', studio: 'Studio', workflow: 'Workflow' };
@@ -33,7 +45,7 @@ export function item(raw) {
     const id = str(o.id);
     if (!id)
         return null;
-    const kind = KINDS.includes(str(o.kind)) ? o.kind : 'file';
+    const kind = KIND_IDS.includes(str(o.kind)) ? o.kind : 'file';
     const source = SOURCES.includes(str(o.source)) ? o.source : 'dev';
     return {
         id,

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/index.d.ts

@@ -25,7 +25,7 @@ export { Library, Outputs, Preview, Thumb, want } from './library.tsx';
 export { SOURCE, type Item, type Kind as ItemKind, type Source } from './api/library.ts';
 export { Scheduled, schedule } from './scheduled.tsx';
 export { Editor } from './automations.tsx';
-export { nav, NEW, own, sections, tabs, type Group } from './nav.tsx';
+export { library, nav, NEW, own, sections, tabs, useScheduled, type Group } from './nav.tsx';
 export { DevSection, DOTS, useSessions } from './section.tsx';
 export { HostProvider } from './host.tsx';
 export { Slack, useWho, Who } from './foot.tsx';

package/lib/index.js

@@ -25,7 +25,7 @@ export { Library, Outputs, Preview, Thumb, want } from './library.js';
 export { SOURCE } from './api/library.js';
 export { Scheduled, schedule } from './scheduled.js';
 export { Editor } from './automations.js';
-export { nav, NEW, own, sections, tabs } from './nav.js';
+export { library, nav, NEW, own, sections, tabs, useScheduled } from './nav.js';
 export { DevSection, DOTS, useSessions } from './section.js';
 export { HostProvider } from './host.js';
 export { Slack, useWho, Who } from './foot.js';

package/lib/library.js

@@ -18,26 +18,16 @@ import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from
 import { ChipSelect } from '@hanzo/ui/product';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ago } from './ago.js';
-import { change, days, get, items as list, remove, size, SOURCE } from './api/library.js';
+import { change, days, get, items as list, KINDS, remove, size, SOURCE } from './api/library.js';
 import { Confirm, Rename } from './ask.js';
 import { useKept, useProjects, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
+import { KEPT } from './nav.js';
+import { path, route } from './route.js';
 import { Panel } from './panel.js';
 import { gap, pane } from './pane.js';
 import { Sites } from './shelf.js';
 import { useDeck } from './tabs.js';
-/** The kinds a reader narrows to, in the order the chips draw them. */
-const KINDS = [
-    { id: '', label: 'All' },
-    { id: 'image', label: 'Images' },
-    { id: 'video', label: 'Videos' },
-    { id: 'audio', label: 'Audio' },
-    { id: 'document', label: 'Documents' },
-    { id: 'slides', label: 'Slides' },
-    { id: 'model', label: '3D' },
-    { id: 'code', label: 'Code' },
-    { id: 'file', label: 'Files' },
-];
 const FROM = [
     { id: '', label: 'Anywhere' },
     { id: 'chat', label: 'Chat' },
@@ -351,7 +341,10 @@ export function Library() {
     const t = useTarget();
     const signed = Boolean(host.person);
     const wide = useMedia().md;
-    const [kind, setKind] = useState('');
+    // The kind is the address's (-/artifacts/<kind>), so the sidebar, a link and Back all name it.
+    const at = route(host.path);
+    const kind = at.kind === 'screen' && at.of ? at.of : '';
+    const setKind = (k) => host.go(path({ kind: 'screen', screen: 'artifacts', ...(k ? { of: k } : {}) }));
     const [source, setSource] = useState('');
     const [scope, setScope] = useState('all');
     const [typed, setTyped] = useState('');
@@ -368,6 +361,11 @@ export function Library() {
     const load = useMemo(() => (signed ? (cursor, signal) => list(t, { kind, source, scope, q, limit: PAGE, cursor }, { signal }) : null), [signed, t, kind, source, scope, q]);
     const pages = usePages(load, `${kind}|${source}|${scope}|${q}|${t.org}`);
     const end = useEnd(pages.more);
+    const reload = pages.reload;
+    useEffect(() => {
+        window.addEventListener(KEPT, reload);
+        return () => window.removeEventListener(KEPT, reload);
+    }, [reload]);
     const look = useCallback((x) => {
         side.open({ id: `${TAB}${x.id}`, kind: `${TAB}${x.id}`, title: x.name });
         setShown(true);
@@ -397,7 +395,7 @@ export function Library() {
     const open = shown && side.tabs.length > 0;
     const groups = days(pages.rows);
     const narrowed = Boolean(kind || source || q || scope !== 'all');
-    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsx(YStack, { flex: 1, minH: 0, minW: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1120, mx: "auto", gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(SizableText, { render: "h1", size: "$7", fontWeight: "600", color: "$ink", flex: 1, children: "Library" }), _jsxs(XStack, { role: "radiogroup", "aria-label": "View", gap: "$1", children: [_jsx(ViewMark, { label: "Grid", on: view === 'grid', onPress: () => setView('grid'), children: _jsx(LayoutGrid, { size: 16 }) }), _jsx(ViewMark, { label: "List", on: view === 'list', onPress: () => setView('list'), children: _jsx(List, { size: 16 }) })] })] }), _jsxs(XStack, { items: "center", gap: "$2", maxW: 480, children: [_jsx(Search, { size: 16, opacity: 0.6 }), _jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: typed, onChangeText: setTyped, placeholder: "Search your library", "aria-label": "Search your library", disabled: !signed }) })] }), _jsxs(YStack, { gap: "$2", children: [_jsx(XStack, { role: "radiogroup", "aria-label": "Kind", gap: "$2", overflowX: "auto", pb: "$1", "$platform-web": { scrollbarWidth: 'none' }, children: KINDS.map((k) => (_jsx(Chip, { label: k.label, on: kind === k.id, onPress: () => setKind(k.id) }, k.id || 'all'))) }), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [_jsx(ChipSelect, { name: "From", label: FROM.find((f) => f.id === source).label, chosen: FROM.find((f) => f.id === source), items: FROM, onChange: (f) => setSource(f.id), placement: "bottom-start", width: 200 }), _jsx(ChipSelect, { name: "Whose", label: WHOSE.find((w) => w.id === scope).label, chosen: WHOSE.find((w) => w.id === scope), items: WHOSE, onChange: (w) => setScope(w.id), placement: "bottom-start", width: 220 })] })] }), acts.note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: acts.note })) : null, !signed ? (_jsx(Said, { says: "Sign in to see your library.", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : pages.error && !pages.rows.length ? (_jsx(Said, { says: pages.error.message, children: _jsx(Button, { size: "sm", variant: "outline", onPress: pages.reload, children: "Try again" }) })) : pages.loading && !pages.rows.length ? (_jsx(Said, { says: "Reading\u2026" })) : !pages.rows.length ? (_jsx(Said, { says: narrowed ? 'Nothing matches.' : 'Nothing here yet. What you make in Chat, Dev and Studio lands here.' })) : (_jsxs(YStack, { gap: "$5", children: [groups.map((g) => (_jsxs(YStack, { gap: "$3", role: "group", "aria-label": g.label, children: [_jsx(SizableText, { size: "$2", color: "$soft", fontWeight: "500", children: g.label }), view === 'grid' ? (_jsx("div", { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(46%, 168px), 1fr))', gap: 16 }, children: g.rows.map((x) => (_jsx(Tile, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) })) : (_jsx(YStack, { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, gap: "$0.5", children: g.rows.map((x) => (_jsx(Row, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) }))] }, g.label))), _jsx(YStack, { ref: end, height: 1 }), pages.loading ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Reading more\u2026" })) : pages.error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: pages.error.message })) : null] })), signed && !q && !kind && (source === '' || source === 'dev') && scope !== 'shared' ? (_jsx(YStack, { pt: "$6", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Sites, {}) })) : null] }) }), open && !wide ? panel(true) : null, open && wide ? (_jsx(YStack, { "data-slot": "library-side", ...pane, ml: gap, shrink: 0, minH: 0, width: 440, maxW: "45%", children: panel(false) })) : null, acts.dialogs] }));
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsx(YStack, { flex: 1, minH: 0, minW: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1120, mx: "auto", gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(SizableText, { render: "h1", size: "$7", fontWeight: "600", color: "$ink", flex: 1, children: KINDS.find((k) => k.id === kind)?.id ? KINDS.find((k) => k.id === kind).label : 'Library' }), _jsxs(XStack, { role: "radiogroup", "aria-label": "View", gap: "$1", children: [_jsx(ViewMark, { label: "Grid", on: view === 'grid', onPress: () => setView('grid'), children: _jsx(LayoutGrid, { size: 16 }) }), _jsx(ViewMark, { label: "List", on: view === 'list', onPress: () => setView('list'), children: _jsx(List, { size: 16 }) })] })] }), _jsxs(XStack, { items: "center", gap: "$2", maxW: 480, children: [_jsx(Search, { size: 16, opacity: 0.6 }), _jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: typed, onChangeText: setTyped, placeholder: "Search your library", "aria-label": "Search your library", disabled: !signed }) })] }), _jsxs(YStack, { gap: "$2", children: [host.sections ? null : (_jsx(XStack, { role: "radiogroup", "aria-label": "Kind", gap: "$2", overflowX: "auto", pb: "$1", "$platform-web": { scrollbarWidth: 'none' }, children: KINDS.map((k) => (_jsx(Chip, { label: k.label, on: kind === k.id, onPress: () => setKind(k.id) }, k.id || 'all'))) })), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [_jsx(ChipSelect, { name: "From", label: FROM.find((f) => f.id === source).label, chosen: FROM.find((f) => f.id === source), items: FROM, onChange: (f) => setSource(f.id), placement: "bottom-start", width: 200 }), _jsx(ChipSelect, { name: "Whose", label: WHOSE.find((w) => w.id === scope).label, chosen: WHOSE.find((w) => w.id === scope), items: WHOSE, onChange: (w) => setScope(w.id), placement: "bottom-start", width: 220 })] })] }), acts.note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: acts.note })) : null, !signed ? (_jsx(Said, { says: "Sign in to see your library.", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : pages.error && !pages.rows.length ? (_jsx(Said, { says: pages.error.message, children: _jsx(Button, { size: "sm", variant: "outline", onPress: pages.reload, children: "Try again" }) })) : pages.loading && !pages.rows.length ? (_jsx(Said, { says: "Reading\u2026" })) : !pages.rows.length ? (_jsx(Said, { says: narrowed ? 'Nothing matches.' : 'Nothing here yet. What you make in Chat, Dev and Studio lands here.' })) : (_jsxs(YStack, { gap: "$5", children: [groups.map((g) => (_jsxs(YStack, { gap: "$3", role: "group", "aria-label": g.label, children: [_jsx(SizableText, { size: "$2", color: "$soft", fontWeight: "500", children: g.label }), view === 'grid' ? (_jsx("div", { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(46%, 168px), 1fr))', gap: 16 }, children: g.rows.map((x) => (_jsx(Tile, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) })) : (_jsx(YStack, { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, gap: "$0.5", children: g.rows.map((x) => (_jsx(Row, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) }))] }, g.label))), _jsx(YStack, { ref: end, height: 1 }), pages.loading ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Reading more\u2026" })) : pages.error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: pages.error.message })) : null] })), signed && !q && !kind && (source === '' || source === 'dev') && scope !== 'shared' ? (_jsx(YStack, { pt: "$6", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Sites, {}) })) : null] }) }), open && !wide ? panel(true) : null, open && wide ? (_jsx(YStack, { "data-slot": "library-side", ...pane, ml: gap, shrink: 0, minH: 0, width: 440, maxW: "45%", children: panel(false) })) : null, acts.dialogs] }));
 }
 function ViewMark({ label, on, onPress, children }) {
     return (_jsx(XStack, { render: "button", role: "radio", "aria-checked": on, "aria-label": label, onPress: onPress, width: 32, height: 32, items: "center", justify: "center", rounded: "$3", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", opacity: on ? 1 : 0.6, children: children }));

package/lib/nav.d.ts

@@ -19,3 +19,9 @@ export declare const own: (host: Host, go: (path: string) => void) => Group[];
 export declare function sections(host: Host, go: (path: string) => void): Group[];
 /** Customize's tabs as a host's sidebar lists them, Agents first; an agent's profile lights Agents. */
 export declare function tabs(host: Host, go: (path: string) => void): Group[];
+/** Fired on `window` once the sidebar's Upload has kept its files, for the Library to read again. */
+export declare const KEPT = "hanzo:library:kept";
+/** The Library's sidebar: Upload, then every kind it narrows to, the one in the address lit. */
+export declare function library(host: Host, go: (path: string) => void): Group[];
+/** Scheduled tasks' sidebar: New task, then each of the person's tasks, the one open lit. Read only while `on`. */
+export declare function useScheduled(host: Host, go: (path: string) => void, on: boolean): Group[];

package/lib/nav.js

@@ -9,8 +9,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Every row moves the builder through `go` with the address `path` writes, so
  * where a place lives is said here and in route.ts and nowhere else.
  */
-import { Bell, BookOpen, Bot, Brain, CircleDot, Clock, Code, Container, Cpu, CreditCard, FolderGit2, Gauge, Key, LayoutTemplate, Library, Plug, Puzzle, Settings, Shield, SlidersHorizontal, Sparkles, SquarePen, User, Users } from '@hanzogui/lucide-icons-2';
+import { AudioLines, Bell, BookOpen, Bot, Box, Brain, CircleDot, Clock, Code, Container, Cpu, CreditCard, File, FileText, FolderGit2, Gauge, Image, Key, LayoutTemplate, Library, Plug, Plus, Presentation, Puzzle, Settings, Shield, SlidersHorizontal, Sparkles, SquarePen, Upload, User, Users, Video } from '@hanzogui/lucide-icons-2';
+import { useMemo } from 'react';
+import { automations } from './api/auto.js';
+import { KINDS, upload } from './api/library.js';
 import { pinBoard } from './choice.js';
+import { useRead } from './data.js';
 import { DOCS } from './foot.js';
 import { path, route, TABS } from './route.js';
 import { GROUPS, heading, LIST } from './settings/list.js';
@@ -117,3 +121,73 @@ const SECTION_ICON = {
     integrations: _jsx(Plug, { size: 16 }),
     notifications: _jsx(Bell, { size: 16 }),
 };
+const KIND_ICON = {
+    '': _jsx(Library, { size: 16 }),
+    image: _jsx(Image, { size: 16 }),
+    video: _jsx(Video, { size: 16 }),
+    audio: _jsx(AudioLines, { size: 16 }),
+    document: _jsx(FileText, { size: 16 }),
+    slides: _jsx(Presentation, { size: 16 }),
+    model: _jsx(Box, { size: 16 }),
+    code: _jsx(Code, { size: 16 }),
+    file: _jsx(File, { size: 16 }),
+};
+/** Fired on `window` once the sidebar's Upload has kept its files, for the Library to read again. */
+export const KEPT = 'hanzo:library:kept';
+/** Asks for files and keeps each in the Library; a refusal is said in the page's own words. */
+function keep(host) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.onchange = async () => {
+        const t = { api: host.api, token: host.token, org: host.org };
+        for (const f of Array.from(input.files ?? [])) {
+            try {
+                await upload(t, { name: f.name, type: f.type, bytes: new Uint8Array(await f.arrayBuffer()) }, { source: 'chat' });
+            }
+            catch (e) {
+                window.alert(e instanceof Error ? e.message : `${f.name} was not kept`);
+            }
+        }
+        window.dispatchEvent(new Event(KEPT));
+    };
+    input.click();
+}
+/** The Library's sidebar: Upload, then every kind it narrows to, the one in the address lit. */
+export function library(host, go) {
+    const r = route(host.path);
+    const at = r.kind === 'screen' && r.screen === 'artifacts' ? (r.of ?? '') : null;
+    return [
+        { id: 'library-do', label: '', links: [{ id: 'upload', label: 'Upload', icon: _jsx(Upload, { size: 16 }), onPress: () => keep(host) }] },
+        {
+            id: 'library-kinds',
+            label: '',
+            links: KINDS.map((k) => ({
+                id: `kind-${k.id || 'all'}`,
+                label: k.label,
+                icon: KIND_ICON[k.id],
+                onPress: () => go(path({ kind: 'screen', screen: 'artifacts', ...(k.id ? { of: k.id } : {}) })),
+                active: at === k.id,
+            })),
+        },
+    ];
+}
+/** Scheduled tasks' sidebar: New task, then each of the person's tasks, the one open lit. Read only while `on`. */
+export function useScheduled(host, go, on) {
+    const t = useMemo(() => ({ api: host.api, token: host.token, org: host.org }), [host.api, host.token, host.org]);
+    const list = useRead(on && host.person ? () => automations(t) : null, [], [t, on, host.path]);
+    const r = route(host.path);
+    const at = r.kind === 'automation' ? r.id : '';
+    return [
+        {
+            id: 'scheduled-do',
+            label: '',
+            links: [{ id: 'new-task', label: 'New task', icon: _jsx(Plus, { size: 16 }), onPress: () => go(path({ kind: 'automation', id: 'new' })), active: at === 'new' }],
+        },
+        {
+            id: 'scheduled-tasks',
+            label: list.value.length ? 'Tasks' : '',
+            links: list.value.map((a) => ({ id: a.id, label: a.name || 'Untitled task', icon: _jsx(Clock, { size: 16 }), onPress: () => go(path({ kind: 'automation', id: a.id })), active: at === a.id })),
+        },
+    ];
+}

package/lib/route.d.ts

@@ -4,6 +4,7 @@
  *   ''              the empty state: a new run
  *   sess_<32 hex>   one run
  *   -/<screen>      a builder screen
+ *   -/artifacts/<kind>      the Library narrowed to one kind (image, video, document, …)
  *   -/automations/<id>      one automation's editor and runs; `new` writes one
  *   -/settings[/<section>]  a section of Settings
  *   -/customize[/<tab>]     agents, skills, connectors and plugins: what the agent brings to a run
@@ -42,6 +43,7 @@ export type Route = {
 } | {
     kind: 'screen';
     screen: Screen;
+    of?: Of;
 } | {
     kind: 'settings';
     section: Section;
@@ -62,6 +64,9 @@ export type Route = {
     kind: 'automation';
     id: string;
 };
+/** The kinds the Library narrows to by address (api/library.ts KIND_IDS). */
+export declare const OF: readonly ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
+export type Of = (typeof OF)[number];
 export declare const SESSION: RegExp;
 export declare const SLUG: RegExp;
 /** An organization or a repository name on the forge (api/codebases.ts `NAME`). */

package/lib/route.js

@@ -17,6 +17,8 @@ export const SECTIONS = [
 ];
 /** Customize, one tab each: what the agent brings to a run, yours and to discover. Agents first. */
 export const TABS = ['agents', 'skills', 'connectors', 'plugins'];
+/** The kinds the Library narrows to by address (api/library.ts KIND_IDS). */
+export const OF = ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
 export const SESSION = /^sess_[0-9a-f]{32}$/;
 export const SLUG = /^[a-z0-9]([a-z0-9-]{0,38}[a-z0-9])?$/;
 /** An organization or a repository name on the forge (api/codebases.ts `NAME`). */
@@ -44,6 +46,10 @@ export function route(path) {
         const id = p.slice('-/automations/'.length);
         return AUTOMATION.test(id) ? { kind: 'automation', id } : { kind: 'new' };
     }
+    if (p.startsWith('-/artifacts/')) {
+        const of = p.slice('-/artifacts/'.length);
+        return OF.includes(of) ? { kind: 'screen', screen: 'artifacts', of } : { kind: 'new' };
+    }
     if (p.startsWith('-/')) {
         const s = p.slice(2);
         return SCREENS.includes(s) ? { kind: 'screen', screen: s } : { kind: 'new' };
@@ -103,7 +109,7 @@ export function path(r) {
         case 'run':
             return r.id;
         case 'screen':
-            return `-/${r.screen}`;
+            return r.of ? `-/${r.screen}/${r.of}` : `-/${r.screen}`;
         case 'settings':
             return r.section === 'general' ? '-/settings' : `-/settings/${r.section}`;
         case 'customize':

package/package.json

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