synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/styleguide/sg-preview.js

@@ -0,0 +1,138 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch } from './sg-kit.js';
+import { esc, field } from './sg-kit.js';
+import { fetchStyleGuideExport, fetchStyleGuidePreviewMd, styleGuideAssetUrl } from '../api.js';
+import { resolveColor } from './sg-color-client.js';
+// GET /export supplies the canonical stylesheet. A complete, escaped local override
+// gives unsaved edits instant feedback; server tokens replace it on the next save.
+export function previewTokens(c, theme) {
+    const vars = {};
+    const css = value => String(value).replace(/[<>{};]/g, '');
+    for (const [key, p] of Object.entries(c.colors.palettes))
+        for (const [step, hex] of Object.entries(p.steps))
+            vars[`color-${key}-${step}`] = hex;
+    for (const [key, hex] of Object.entries(c.colors.status))
+        vars[`color-${key}`] = hex;
+    for (const [role, ref] of Object.entries(c.colors.semantic[theme]))
+        vars[`color-${role.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`] = resolveColor(c, ref, theme) || 'transparent';
+    for (const [key, font] of Object.entries(c.typography.fonts))
+        if (font)
+            vars[`font-${key}`] = `"${font.family.replace(/["\\]/g, '')}", ${font.fallback}`;
+    for (const [id, s] of Object.entries(c.typography.styles)) {
+        vars[`text-${id}-font`] = `var(--font-${s.font})`;
+        vars[`text-${id}-size`] = s.size / 16 + 'rem';
+        vars[`text-${id}-size-mobile`] = s.mobileSize / 16 + 'rem';
+        vars[`text-${id}-weight`] = s.weight;
+        vars[`text-${id}-line-height`] = s.lineHeight;
+        vars[`text-${id}-letter-spacing`] = s.letterSpacing + 'em';
+    }
+    for (const [key, n] of Object.entries(c.layout.spacing.scale))
+        vars[`space-${key}`] = n / 16 + 'rem';
+    for (const [key, n] of Object.entries(c.shape.radius))
+        vars[`radius-${key}`] = n / 16 + 'rem';
+    for (const [key, step] of Object.entries(c.shape.radiusRoles))
+        if (!(key in c.shape.radius))
+            vars[`radius-${key}`] = `var(--radius-${step})`;
+    for (const [key, e] of Object.entries(c.shape.elevation))
+        vars[`shadow-${key}`] = e.shadow;
+    for (const [key, n] of Object.entries(c.shape.borders))
+        vars[`border-${key}`] = n + 'px';
+    for (const [key, n] of Object.entries(c.motion.durations))
+        vars[`duration-${key}`] = n + 'ms';
+    for (const [key, n] of Object.entries(c.motion.easings))
+        vars[`ease-${key}`] = n;
+    for (const [key, n] of Object.entries(c.layout.breakpoints))
+        vars[`breakpoint-${key}`] = n + 'px';
+    for (const [key, n] of Object.entries(c.layout.zIndex))
+        vars[`z-${key}`] = n;
+    vars['grid-columns'] = c.layout.grid.columns;
+    vars['grid-gutter'] = c.layout.grid.gutter + 'px';
+    vars['container-max'] = c.layout.container.maxWidth / 16 + 'rem';
+    vars['container-padding'] = c.layout.container.padding / 16 + 'rem';
+    for (const g of c.colors.gradients)
+        vars[`gradient-${g.name}`] = g.css.replace(/\{([A-Za-z0-9-]+)\.([A-Za-z0-9-]+)\}/g, ref => resolveColor(c, ref, theme) || 'transparent');
+    return `:root{${Object.entries(vars).map(([key, value]) => `--${key}:${css(value)};`).join('')}color-scheme:${theme};}`;
+}
+function componentCss(c) {
+    const resolve = value => String(value ?? '').replace(/\{([A-Za-z0-9-]+)\.([A-Za-z0-9-]+)\}/g, (_, group, key) => {
+        const prefix = { semantic: 'color', status: 'color', spacing: 'space', radius: 'radius', radiusRoles: 'radius', elevation: 'shadow', duration: 'duration', easing: 'ease' }[group];
+        return prefix ? `var(--${prefix}-${key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()})` : group === 'typography' ? '' : `var(--color-${group}-${key})`;
+    }).replace(/[<>{};]/g, '');
+    const property = { background: 'background', text: 'color', radius: 'border-radius', padding: 'padding', shadow: 'box-shadow', border: 'border' };
+    return c.components.map(spec => {
+        const selector = `[data-component="${String(spec.id).replace(/[^a-z0-9-]/g, '')}"]`;
+        let base = Object.entries(spec.tokens).filter(([key]) => property[key]).map(([key, value]) => `${property[key]}:${resolve(value)};`).join('');
+        const typo = /^\{typography\.([a-z0-9-]+)\}$/.exec(spec.tokens.typography || '');
+        if (typo)
+            base += `font-family:var(--text-${typo[1]}-font);font-size:var(--text-${typo[1]}-size);font-weight:var(--text-${typo[1]}-weight);`;
+        let states = '';
+        for (const [state, raw] of Object.entries(spec.states)) {
+            if (!['hover', 'active', 'focus', 'disabled'].includes(state))
+                continue;
+            const parsed = String(raw).split(/[,;]+/).map(part => /^\s*(background|color|opacity|border|box-shadow|transform)\s*:?\s+(.+)$/.exec(part)).filter(Boolean).map(m => `${m[1]}:${resolve(m[2])};`).join('');
+            if (parsed)
+                states += `${selector}[data-state="${state}"],${selector}:${state === 'disabled' ? 'disabled' : state}{${parsed}}`;
+        }
+        return `${selector}{${base}}${states}`;
+    }).join('\n');
+}
+export function buildPreviewDocument(c, css, theme, assetsHash) {
+    const tr = key => esc(t(`styleguide.${key}`));
+    const variant = c.logo.variants.find(v => v.kind === 'primary') || c.logo.variants[0];
+    const logo = variant ? `<img class="logo" alt="${esc(variant.name)}" src="${esc(styleGuideAssetUrl(assetsHash, variant.file))}">` : esc(c.brand.name || t('styleguide.title'));
+    const buttons = () => ['primary', 'secondary', 'ghost', 'danger'].map(kind => `<button class="btn ${kind}" data-component="button-${kind}">${tr('button-' + kind)}</button>`).join('');
+    const states = ['default', 'hover', 'active', 'focus', 'disabled'].map(state => `<div class="button-row"><span>${tr(state)}</span>${['primary', 'secondary', 'ghost', 'danger'].map(kind => `<button class="btn ${kind} ${state}" data-component="button-${kind}" data-state="${state}" ${state === 'disabled' ? 'disabled' : ''}>${tr('button-' + kind)}</button>`).join('')}</div>`).join('');
+    const attr = c.exports.darkMode === 'class' ? `class="${theme}"` : `data-theme="${theme}"`;
+    return `<!doctype html><html lang="${document.documentElement.lang || 'en'}" ${attr}><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+ <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'none'">
+ ${Object.values(c.typography.fonts).filter(f => f?.source === 'google').map(f => `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(f.family)}:wght@${[...new Set(f.weights)].sort((a, b) => a - b).join(';')}&amp;display=swap">`).join('')}
+ <style>${String(css).replace(/<\/style/gi, '&lt;/style')}
+ ${previewTokens(c, theme)}
+ *{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-text);font-family:var(--font-body);font-size:max(12px,var(--text-body-size));line-height:var(--text-body-line-height)}
+ nav,footer{padding:var(--space-xl);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{max-width:160px;max-height:40px}main{max-width:var(--container-max);padding:var(--container-padding);margin:auto}section{margin-bottom:var(--space-3xl)}h1{font-family:var(--text-display-font);font-size:var(--text-display-size);line-height:var(--text-display-line-height);font-weight:var(--text-display-weight);letter-spacing:var(--text-display-letter-spacing);max-width:14ch}h2{font-family:var(--text-h2-font);font-size:var(--text-h2-size)}.lead{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line-height);color:var(--color-text-muted)}.hero{padding-block:var(--space-3xl)}
+ .btn{min-height:${c.accessibility.minTouchTarget}px;font-family:var(--text-button-font);font-size:max(12px,var(--text-button-size));font-weight:var(--text-button-weight);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-button);border:1px solid var(--color-border);cursor:pointer;transition:filter var(--duration-fast) var(--ease-standard)}.primary{background:var(--color-primary);color:var(--color-on-primary)}.secondary{background:var(--color-secondary);color:var(--color-on-secondary)}.ghost{background:transparent;color:var(--color-text)}.danger{background:var(--color-danger);color:var(--color-on-primary)}.hover{filter:brightness(.92)}.active{filter:brightness(.8);transform:translateY(1px)}.focus,:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.btn:disabled{opacity:.45;cursor:default}
+ .button-row,.actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;margin-block:var(--space-md)}.button-row>span{width:80px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-xl)}label{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}input,select{padding:12px;border-radius:var(--radius-input);border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text);font:inherit}.check{flex-direction:row;align-items:center}.error{border-color:var(--color-danger)}.error-text{color:var(--color-danger)}.card{background:var(--color-surface);padding:var(--space-xl);border-radius:var(--radius-card);border:1px solid var(--color-border)}.alert{padding:var(--space-lg);border-radius:var(--radius-md);border-inline-start:4px solid var(--status);background:var(--color-surface);margin-bottom:12px}.badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-badge);background:var(--color-accent);color:var(--color-on-accent)}table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}th,td{text-align:start;padding:12px;border-bottom:1px solid var(--color-border)}footer{color:var(--color-text-muted)}
+ ${componentCss(c)}
+ @media(max-width:600px){h1{font-size:var(--text-display-size-mobile)}.button-row>span{width:100%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
+ </style></head><body><nav data-component="nav-bar">${logo}<span>${tr('previewNav')}</span></nav><main>
+ <section class="hero"><span class="badge">${esc(c.brand.tagline || t('styleguide.title'))}</span><h1>${esc(c.brand.name || t('styleguide.previewHero'))}</h1><p class="lead">${esc(c.brand.description || t('styleguide.previewLead'))}</p><div class="actions"><button class="btn primary" data-component="button-primary">${tr('previewAction')}</button><button class="btn secondary" data-component="button-secondary">${tr('previewSecondary')}</button></div></section>
+ <section><h2>${tr('previewButtons')}</h2>${states}</section>
+ <section><h2>${tr('previewForm')}</h2><div class="grid"><div><label>${tr('previewName')}<input data-component="input-text" value="${esc(c.brand.name)}"></label><label>${tr('previewSelect')}<select><option>${tr('previewSelect')}</option></select></label><label>${tr('previewName')}<input class="error" aria-invalid="true"></label><p class="error-text">${tr('previewError')}</p></div><div><label class="check"><input type="checkbox">${tr('previewCheckbox')}</label><label class="check"><input type="radio" name="plan">${tr('previewRadio')}</label><label class="check"><input type="checkbox" role="switch">${tr('previewSwitch')}</label></div></div></section>
+ <section><h2>${tr('previewCards')}</h2><div class="grid">${['sm', 'md', 'lg'].map(level => `<article class="card" data-component="card" style="box-shadow:var(--shadow-${level})"><h3>${tr('card')} · ${level}</h3><p>${tr('previewLead')}</p></article>`).join('')}</div></section>
+ <section><h2>${tr('previewAlerts')}</h2>${['success', 'warning', 'danger', 'info'].map(status => `<div class="alert" data-component="alert" style="--status:var(--color-${status})">${tr(status)} · ${tr('previewLead')}</div>`).join('')}</section>
+ <section><h2>${tr('previewBadges')}</h2><span class="badge" data-component="badge">${tr('active')}</span></section>
+ <section><h2>${tr('previewTable')}</h2><table data-component="table"><thead><tr><th>${tr('previewColumn')}</th><th>${tr('previewAmount')}</th></tr></thead><tbody>${[1, 2, 3].map(n => `<tr><td>${tr('previewColumn')} ${n}</td><td>${(n * 124.5).toFixed(2)}</td></tr>`).join('')}</tbody></table><div class="actions" aria-label="${tr('previewPagination')}"><button class="btn ghost">${tr('previewPrevious')}</button><button class="btn primary">1</button><button class="btn ghost">2</button><button class="btn ghost">${tr('previewNext')}</button></div></section>
+ </main><footer>${tr('previewFooter')}</footer></body></html>`;
+}
+export async function render(host, s, { source = false } = {}) {
+    let disposed = false, timer = null, seq = 0, theme = s.config.colors.themes.default, width = 768, css = '', view = source ? 'design-md' : 'sheet';
+    const stage = el('div', 'sg-preview-stage'), iframe = el('iframe', 'sg-preview-frame');
+    iframe.setAttribute('sandbox', 'allow-same-origin');
+    iframe.title = t('styleguide.componentSheet');
+    iframe.style.width = width + 'px';
+    stage.append(iframe);
+    const pre = el('pre', 'sg-code');
+    pre.hidden = view !== 'design-md';
+    stage.hidden = view !== 'sheet';
+    const md = async () => { await s.flush(); const at = ++seq, value = await fetchStyleGuidePreviewMd(s.projectPath); if (!disposed && at === seq)
+        pre.textContent = value; };
+    const refresh = () => { if (disposed)
+        return; iframe.srcdoc = buildPreviewDocument(s.config, css, theme, s.meta.assetsHash); };
+    const themePicker = field(t('styleguide.theme'), theme, v => { theme = v; refresh(); }, { type: 'select', options: ['light', 'dark'] });
+    themePicker.querySelector('select').id = 'sg-preview-theme';
+    const widthPicker = field(t('styleguide.width'), width, v => { width = Number(v); iframe.style.width = width + 'px'; }, { type: 'select', options: [375, 768, 1440].map(n => [n, n + ' px']) });
+    widthPicker.querySelector('select').id = 'sg-preview-width';
+    host.append(row(button(t('styleguide.componentSheet'), () => { view = 'sheet'; stage.hidden = false; pre.hidden = true; refresh(); }), button(t('styleguide.designMd'), () => { view = 'design-md'; stage.hidden = true; pre.hidden = false; return md(); }), themePicker, widthPicker, button(t('styleguide.copy'), async () => { if (!pre.textContent)
+        await md(); await navigator.clipboard.writeText(pre.textContent); })), stage, pre);
+    css = await fetchStyleGuideExport(s.projectPath, 'css');
+    if (disposed)
+        return;
+    refresh();
+    if (source)
+        await md();
+    const unsub = s.subscribe(type => { if (type === 'edit' || type === 'saved') {
+        clearTimeout(timer);
+        timer = setTimeout(() => { refresh(); if (view === 'design-md')
+            md().catch(() => { }); }, 250);
+    } });
+    return () => { disposed = true; seq++; clearTimeout(timer); unsub(); };
+}

package/neural-interface/public/shared/styleguide/sg-rules.js

@@ -0,0 +1,9 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch } from './sg-kit.js';
+import { markdownPreview } from './sg-kit.js';
+export function render(host, s) {
+    const preview = el('div');
+    preview.append(markdownPreview(s.config.rules.custom));
+    preview.setAttribute('aria-label', t('styleguide.renderedMarkdown'));
+    host.append(card('accessibility', select(s, 'accessibility.level', ['A', 'AA', 'AAA']), grid(number(s, 'accessibility.minContrastText', ':1', { min: 1, max: 21 }), number(s, 'accessibility.minContrastLarge', ':1', { min: 1, max: 21 }), number(s, 'accessibility.minTouchTarget', 'px', { min: 16, max: 96 })), aliasPicker(s, 'accessibility.focusRing'), el('p', 'sg-hint', t('styleguide.alias')), listEditor(s, 'accessibility.notes')), card('rules', grid(listEditor(s, 'rules.dos'), listEditor(s, 'rules.donts')), textarea(s, 'rules.custom'), preview));
+    return watch(s, () => preview.replaceChildren(markdownPreview(s.config.rules.custom)));
+}

package/neural-interface/public/shared/styleguide/sg-shape.js

@@ -0,0 +1,24 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch } from './sg-kit.js';
+export function render(host, s) {
+    const previews = new Map();
+    const radii = mapEditor(s, 'shape.radius', { unit: 'px', render: (key, value) => { const sample = el('span', 'sg-radius-sample'); sample.style.borderRadius = value + 'px'; previews.set(key, sample); if (!(value <= 64))
+        return sample; const slider = text(s, `shape.radius.${key}`, key, { type: 'range', min: 0, max: 64, step: 1 }); slider.classList.add('sg-hide-label'); return row(slider, sample); } });
+    const roles = grid(...Object.keys(s.config.shape.radiusRoles).map(key => select(s, `shape.radiusRoles.${key}`, Object.keys(s.config.shape.radius).map(k => [k, k]), label(key))));
+    const elevations = el('div', 'sg-stack');
+    const draw = () => {
+        elevations.replaceChildren();
+        for (const key of Object.keys(s.config.shape.elevation)) {
+            const sample = el('div', 'sg-shadow-sample', key);
+            sample.style.boxShadow = s.get(`shape.elevation.${key}.shadow`);
+            elevations.append(row(grid(text(s, `shape.elevation.${key}.shadow`, key), text(s, `shape.elevation.${key}.usage`)), sample, button(t('styleguide.remove'), () => { const next = { ...s.config.shape.elevation }; delete next[key]; s.set('shape.elevation', next); draw(); })));
+        }
+        const name = textBox();
+        elevations.append(row(name, button(t('styleguide.addElevation'), () => { const key = name.querySelector('input').value.trim().replace(/[{}.\s]+/g, '-'); if (!key || ['__proto__', 'constructor', 'prototype'].includes(key))
+            return; s.set('shape.elevation', { ...s.config.shape.elevation, [key]: { shadow: 'none', usage: '' } }); draw(); })));
+    };
+    function textBox() { const n = el('label', 'sg-field', t('styleguide.tokenName')); const i = el('input', 'sg-input'); n.append(i); return n; }
+    draw();
+    host.append(card('radius', radii, roles), card('borders', mapEditor(s, 'shape.borders', { unit: 'px' })), card('elevation', elevations));
+    return watch(s, () => { for (const [key, node] of previews)
+        node.style.borderRadius = s.get(`shape.radius.${key}`) + 'px'; });
+}

package/neural-interface/public/shared/styleguide/sg-state.js

@@ -0,0 +1,132 @@
+import { fetchStyleGuide, saveStyleGuide } from '../api.js';
+const clone = value => structuredClone(value);
+export function createGuideState({ fetchGuide = fetchStyleGuide, saveGuide = saveStyleGuide, debounce = 800 } = {}) {
+    const listeners = new Set();
+    let config = null, meta = {}, path = null, status = 'loading', error = null;
+    let version = 0, savedVersion = 0, timer = null, pending = null, generation = 0, busy = false;
+    const notify = type => listeners.forEach(fn => fn(type));
+    const cancel = () => { clearTimeout(timer); timer = null; };
+    const state = {
+        get config() { return config; }, get meta() { return meta; }, get projectPath() { return path; },
+        get status() { return status; }, get error() { return error; }, get dirty() { return version !== savedVersion; }, get busy() { return busy; },
+        subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); },
+        get(keys) { return keys.split('.').reduce((v, k) => v?.[k], config); },
+        set(keys, value) { if (!config || busy)
+            return; const parts = keys.split('.'); const last = parts.pop(); let target = config; for (const key of parts)
+            target = target[key]; target[last] = value; state.touch(); },
+        touch() { if (!config || busy)
+            return; version++; status = 'dirty'; error = null; notify('edit'); cancel(); timer = setTimeout(() => state.flush().catch(() => { }), debounce); },
+        async load(projectPath) {
+            await state.flush();
+            const seq = ++generation;
+            busy = true;
+            status = 'loading';
+            notify('status');
+            try {
+                const data = await fetchGuide(projectPath);
+                if (seq !== generation)
+                    return;
+                path = projectPath;
+                config = clone(data.config);
+                meta = data;
+                version = savedVersion = 0;
+                error = null;
+                status = data.saved ? 'saved' : 'defaults';
+                notify('load');
+            }
+            catch (e) {
+                error = e;
+                status = 'error';
+                notify('status');
+                throw e;
+            }
+            finally {
+                if (seq === generation) {
+                    busy = false;
+                    notify('status');
+                }
+            }
+        },
+        async flush({ force = false, source = 'ui' } = {}) {
+            cancel();
+            if (pending) {
+                await pending;
+                if (state.dirty)
+                    return state.flush({ source });
+                return;
+            }
+            if (!config || (!state.dirty && !force))
+                return;
+            const seq = generation, projectPath = path, snapshot = clone(config), at = version;
+            status = 'saving';
+            error = null;
+            notify('status');
+            pending = (async () => {
+                try {
+                    const data = await saveGuide(projectPath, snapshot, { source });
+                    if (seq !== generation)
+                        return;
+                    meta = data;
+                    savedVersion = at;
+                    // Never replace fields typed while a request was in flight.
+                    if (version === at)
+                        config = clone(data.config);
+                    else {
+                        config.revision = data.revision;
+                        config.updatedAt = data.config.updatedAt;
+                    }
+                    status = state.dirty ? 'dirty' : 'saved';
+                    notify('saved');
+                }
+                catch (e) {
+                    if (seq === generation) {
+                        status = 'error';
+                        error = e;
+                        notify('status');
+                    }
+                    throw e;
+                }
+                finally {
+                    pending = null;
+                }
+            })();
+            await pending;
+            if (state.dirty && seq === generation)
+                await state.flush({ source });
+        },
+        // Serialize server-side actions after autosave and freeze fields while they replace config.
+        async action(fn) {
+            await state.flush();
+            busy = true;
+            notify('status');
+            try {
+                const data = await fn(path);
+                if (data?.config) {
+                    config = clone(data.config);
+                    meta = { ...meta, ...data };
+                    version = savedVersion = 0;
+                    status = 'saved';
+                    notify('load');
+                }
+                else if (data) {
+                    meta = { ...meta, ...data };
+                    notify('saved');
+                }
+                return data;
+            }
+            catch (e) {
+                error = e;
+                status = 'error';
+                notify('status');
+                throw e;
+            }
+            finally {
+                busy = false;
+                notify('status');
+            }
+        },
+        async apply(configToApply, source = 'ui') { await state.flush(); config = clone(configToApply); state.touch(); await state.flush({ source }); notify('load'); },
+        destroy() { cancel(); generation++; listeners.clear(); },
+    };
+    return state;
+}

package/neural-interface/public/shared/styleguide/sg-typography.js

@@ -0,0 +1,125 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch } from './sg-kit.js';
+import { fetchStyleGuideFonts } from '../api.js';
+import { field } from './sg-kit.js';
+const loaded = new Set();
+export function loadGoogleFont(font) {
+    if (!font || font.source !== 'google')
+        return;
+    const weights = [...new Set(font.weights)].sort((a, b) => a - b).filter(n => Number.isInteger(n) && n > 0 && n <= 1000);
+    const key = font.family + ':' + weights.join(';');
+    if (loaded.has(key))
+        return;
+    loaded.add(key);
+    const link = el('link');
+    link.rel = 'stylesheet';
+    link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(font.family)}:wght@${weights.join(';') || 400}&display=swap`;
+    document.head.append(link);
+}
+export const FONT_PAIRINGS = [['Space Grotesk', 'Inter'], ['Manrope', 'DM Sans'], ['Playfair Display', 'Source Sans 3'], ['Poppins', 'Nunito'], ['IBM Plex Sans', 'IBM Plex Sans'], ['Montserrat', 'Open Sans'], ['Lora', 'Lato'], ['Outfit', 'Work Sans']];
+export function generateTypeScale(base, ratio) {
+    const b = Math.min(40, Math.max(8, Number(base) || 16)), r = Math.min(2, Math.max(1.05, Number(ratio) || 1.25)), at = p => Math.round(b * r ** p);
+    return { caption: Math.round(b * .75), 'body-sm': Math.round(b * .875), body: b, 'body-lg': Math.round(b * 1.125), h4: at(1), h3: at(2), h2: at(3), h1: at(4), display: at(5) };
+}
+export async function render(host, s) {
+    let disposed = false, searchSeq = 0, fontTimer = null;
+    const specimens = [];
+    const fonts = el('div', 'sg-grid');
+    for (const key of ['heading', 'body', 'mono', 'display']) {
+        const font = s.config.typography.fonts[key], tile = el('div', 'sg-font-card');
+        tile.append(el('h4', '', label(key)));
+        if (!font) {
+            tile.append(button(t('styleguide.add'), () => { s.set(`typography.fonts.${key}`, structuredClone(s.config.typography.fonts.heading)); rerender(); }));
+            fonts.append(tile);
+            continue;
+        }
+        const list = el('datalist');
+        list.id = `sg-font-list-${key}`;
+        const family = text(s, `typography.fonts.${key}.family`, label('family'), { list: list.id }), input = family.querySelector('input');
+        input.setAttribute('aria-label', `${label(key)} · ${t('styleguide.fontSearch')}`);
+        input.addEventListener('input', async () => { const seq = ++searchSeq; try {
+            const data = await fetchStyleGuideFonts(input.value);
+            if (disposed || seq !== searchSeq)
+                return;
+            list.replaceChildren(...data.map(f => { const o = el('option'); o.value = f.family; return o; }));
+        }
+        catch (e) {
+            if (!disposed)
+                shellError(e);
+        } });
+        const specimen = el('p', 'sg-font-specimen', t('styleguide.specimen'));
+        specimens.push({ node: specimen, key });
+        tile.append(family, list, select(s, `typography.fonts.${key}.source`, [['google', t('styleguide.fontGoogle')], ['system', t('styleguide.fontSystem')], ['self-hosted', t('styleguide.fontSelf')], ['adobe', t('styleguide.fontAdobe')], ['other', t('styleguide.fontOther')]]), text(s, `typography.fonts.${key}.fallback`), listEditor(s, `typography.fonts.${key}.weights`, label('weights'), { numeric: true, chips: true, max: 10 }), text(s, `typography.fonts.${key}.features`), specimen);
+        if (key === 'display')
+            tile.append(button(t('styleguide.remove'), () => { s.set('typography.fonts.display', null); rerender(); }));
+        fonts.append(tile);
+    }
+    const pairings = grid(...FONT_PAIRINGS.map(([heading, body]) => button(`${heading} / ${body}`, () => { s.set('typography.fonts.heading', { ...s.config.typography.fonts.heading, family: heading, source: 'google' }); s.set('typography.fonts.body', { ...s.config.typography.fonts.body, family: body, source: 'google' }); rerender(); })));
+    const ratios = [['minor-second', 1.067], ['major-second', 1.125], ['minor-third', 1.2], ['major-third', 1.25], ['perfect-fourth', 1.333], ['perfect-fifth', 1.5], ['golden-ratio', 1.618]];
+    const ratio = field(label('preset'), s.config.typography.scale.preset, v => { const found = ratios.find(([key]) => key === v); s.set('typography.scale', { ...s.config.typography.scale, preset: v, ratio: found[1] }); rerender(); }, { type: 'select', options: ratios.map(([id, n]) => [id, `${label(id)} · ${n}`]) });
+    const styles = el('div', 'sg-table-wrap');
+    styles.tabIndex = 0;
+    styles.setAttribute('role', 'region');
+    styles.setAttribute('aria-label', label('style'));
+    const table = el('table', 'sg-table sg-type-table'), head = el('tr');
+    for (const k of ['id', 'font', 'size', 'mobileSize', 'weight', 'lineHeight', 'letterSpacing', 'transform', 'usage'])
+        head.append(el('th', '', label(k)));
+    table.append(head);
+    for (const [id, style] of Object.entries(s.config.typography.styles)) {
+        const tr = el('tr');
+        tr.append(el('th', '', id));
+        const fields = [select(s, `typography.styles.${id}.font`, Object.keys(s.config.typography.fonts).filter(k => s.config.typography.fonts[k])), ...['size', 'mobileSize', 'weight', 'lineHeight', 'letterSpacing'].map(k => number(s, `typography.styles.${id}.${k}`, k === 'letterSpacing' ? 'em' : k === 'size' || k === 'mobileSize' ? 'px' : '', { min: k === 'letterSpacing' ? -.5 : k === 'lineHeight' ? .5 : 1, max: k === 'weight' ? 1000 : k === 'letterSpacing' ? 2 : k === 'lineHeight' ? 4 : 400 })), select(s, `typography.styles.${id}.transform`, ['none', 'uppercase', 'lowercase', 'capitalize']), text(s, `typography.styles.${id}.usage`)];
+        for (const field of fields) {
+            const td = el('td');
+            td.append(field);
+            tr.append(td);
+        }
+        table.append(tr);
+        const specimen = el('div', 'sg-style-specimen', t('styleguide.specimen')), sr = el('tr'), td = el('td');
+        td.colSpan = 9;
+        td.append(specimen, button(t('styleguide.remove'), () => { if (id === 'body')
+            return; const next = { ...s.config.typography.styles }; delete next[id]; s.set('typography.styles', next); rerender(); }));
+        sr.append(td);
+        table.append(sr);
+        specimens.push({ node: specimen, id });
+    }
+    styles.append(table);
+    const styleName = field(t('styleguide.styleName'), '', () => { });
+    const addStyle = button(t('styleguide.addStyle'), () => { const id = styleName.querySelector('input').value.trim().toLowerCase().replace(/[^a-z0-9-]+/g, '-'); if (!id || id in s.config.typography.styles || ['__proto__', 'constructor', 'prototype'].includes(id))
+        return; if (Object.keys(s.config.typography.styles).length >= 40)
+        throw new Error(t('styleguide.limit')); s.set('typography.styles', { ...s.config.typography.styles, [id]: { ...s.config.typography.styles.body, usage: '' } }); rerender(); });
+    host.append(card('fonts', fonts, el('p', 'sg-hint', t('styleguide.googleHelp'))), card('pairings', pairings), card('typeScale', row(number(s, 'typography.scale.base', 'px', { min: 8, max: 40 }), number(s, 'typography.scale.ratio', '', { min: 1.05, max: 2 }), ratio, button(t('styleguide.generateScale'), () => { const sizes = generateTypeScale(s.config.typography.scale.base, s.config.typography.scale.ratio), next = structuredClone(s.config.typography.styles); for (const [id, size] of Object.entries(sizes))
+        if (next[id]) {
+            next[id].size = size;
+            next[id].mobileSize = Math.min(next[id].mobileSize, size);
+        } s.set('typography.styles', next); rerender(); }))), card('textStyles', styles, row(styleName, addStyle)), card('principles', listEditor(s, 'typography.principles')));
+    const update = () => { clearTimeout(fontTimer); fontTimer = setTimeout(() => { if (!disposed)
+        Object.values(s.config.typography.fonts).forEach(loadGoogleFont); }, 300); for (const { node, key, id } of specimens) {
+        const style = id ? s.config.typography.styles[id] : null, font = s.config.typography.fonts[key || style?.font];
+        if (!font)
+            continue;
+        node.style.fontFamily = `"${font.family.replace(/["\\]/g, '')}", ${font.fallback}`;
+        if (style) {
+            node.style.fontSize = Math.max(12, style.size) + 'px';
+            node.style.fontWeight = style.weight;
+            node.style.lineHeight = style.lineHeight;
+            node.style.letterSpacing = style.letterSpacing + 'em';
+            node.style.textTransform = style.transform;
+        }
+    } };
+    function shellError(e) { const n = host.closest('.styleguide-panel')?.querySelector('.sg-error'); if (n) {
+        n.hidden = false;
+        n.textContent = e.message;
+    } }
+    let unwatch = watch(s, update);
+    update();
+    function rerender() { unwatch(); disposed = true; host.replaceChildren(); render(host, s).then(fn => unwatch = fn); }
+    try {
+        const data = await fetchStyleGuideFonts();
+        if (!disposed)
+            host.querySelectorAll('datalist').forEach(list => list.replaceChildren(...data.map(f => { const o = el('option'); o.value = f.family; return o; })));
+    }
+    catch (e) {
+        shellError(e);
+    }
+    return () => { disposed = true; clearTimeout(fontTimer); unwatch?.(); };
+}