synabun 1.3.0 → 2.0.0-beta

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

@@ -0,0 +1,148 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch, refreshSwatches } from './sg-kit.js';
+import { PALETTE_STEPS, scaleFromBase, contrastReport, wcagContrast, resolveColor, paletteFromImage } from './sg-color-client.js';
+import { styleGuideDarkSemantic, styleGuideAssetUrl } from '../api.js';
+import { field } from './sg-kit.js';
+export function render(host, s) {
+    const swatches = new Map(), contrasts = [];
+    const palettes = el('div', 'sg-stack');
+    for (const [key, p] of Object.entries(s.config.colors.palettes)) {
+        const tile = el('div', 'sg-palette');
+        tile.dataset.palette = key;
+        let hueShift = 0, chroma = 1;
+        const generate = base => { if (s.get(`colors.palettes.${key}.locked`))
+            return; const steps = scaleFromBase(base, { hueShift, chroma }); if (steps)
+            s.set(`colors.palettes.${key}.steps`, steps); };
+        tile.append(row(el('h4', '', p.label), toggle(s, `colors.palettes.${key}.locked`, t('styleguide.locked')), button(t('styleguide.auto'), () => generate(s.get(`colors.palettes.${key}.base`)))));
+        tile.append(grid(text(s, `colors.palettes.${key}.label`), text(s, `colors.palettes.${key}.usage`)), row(colorField(s, `colors.palettes.${key}.base`, t('styleguide.base'), generate), field(t('styleguide.hueShift'), 0, v => hueShift = v, { type: 'number', unit: '°', min: -180, max: 180 }), field(t('styleguide.chroma'), 1, v => chroma = v, { type: 'number', min: 0, max: 3, step: .05 })));
+        const strip = el('div', 'sg-scale');
+        for (const step of PALETTE_STEPS) {
+            const field = colorField(s, `colors.palettes.${key}.steps.${step}`, step, undefined, { eyedropper: false });
+            strip.append(field);
+            swatches.set(`${key}.${step}`, field);
+        }
+        tile.append(strip);
+        if (!['primary', 'secondary', 'accent', 'neutral'].includes(key))
+            tile.append(button(t('styleguide.remove'), () => { const next = { ...s.config.colors.palettes }; delete next[key]; s.set('colors.palettes', next); renderAgain(); }));
+        palettes.append(tile);
+    }
+    function renderAgain() { cleanup(); host.replaceChildren(); cleanup = render(host, s) || (() => { }); }
+    const name = field(t('styleguide.paletteName'), '', () => { });
+    const add = button(t('styleguide.addPalette'), () => { const key = name.querySelector('input').value.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); if (!key || key in s.config.colors.palettes || ['__proto__', 'constructor', 'prototype', 'status', 'semantic', 'typography', 'spacing', 'radius', 'radiusroles', 'elevation', 'duration', 'easing', 'light', 'dark'].includes(key))
+        return; if (Object.keys(s.config.colors.palettes).length >= 24)
+        throw new Error(t('styleguide.limit')); s.set('colors.palettes', { ...s.config.colors.palettes, [key]: { label: key, usage: '', base: s.config.colors.palettes.primary.base, locked: false, steps: scaleFromBase(s.config.colors.palettes.primary.base) } }); renderAgain(); });
+    const fromLogo = button(t('styleguide.paletteFromLogo'), async () => { const v = s.config.logo.variants.find(v => v.kind === 'primary') || s.config.logo.variants[0]; if (!v)
+        throw new Error(t('styleguide.logoMissing')); const bases = await paletteFromImage(styleGuideAssetUrl(s.meta.assetsHash, v.file)); bases.forEach((base, i) => { const key = ['primary', 'secondary', 'accent', 'neutral'][i]; if (!s.config.colors.palettes[key].locked) {
+        s.set(`colors.palettes.${key}.base`, base);
+        s.set(`colors.palettes.${key}.steps`, scaleFromBase(base));
+    } }); renderAgain(); });
+    host.append(card('palettes', palettes, row(name, add, fromLogo)));
+    const semantic = el('div', 'sg-table-wrap');
+    semantic.tabIndex = 0;
+    semantic.setAttribute('aria-label', label('semantic'));
+    const table = el('table', 'sg-table');
+    const head = el('tr');
+    head.append(el('th', '', label('usage')), el('th', '', t('styleguide.light')), el('th', '', t('styleguide.dark')));
+    table.append(head);
+    const backgrounds = { text: 'background', textMuted: 'surface', link: 'background', onPrimary: 'primary', onSecondary: 'secondary', onAccent: 'accent' };
+    for (const role of Object.keys(s.config.colors.semantic.light)) {
+        const tr = el('tr');
+        tr.append(el('th', '', label(role)));
+        for (const theme of ['light', 'dark']) {
+            const td = el('td');
+            td.append(aliasPicker(s, `colors.semantic.${theme}.${role}`, `${label(role)} · ${t(`styleguide.${theme}`)}`, true));
+            if (backgrounds[role]) {
+                const badge = el('span', 'sg-contrast-badge');
+                td.append(badge);
+                contrasts.push({ node: badge, theme, fg: role, bg: backgrounds[role] });
+            }
+            tr.append(td);
+        }
+        table.append(tr);
+    }
+    semantic.append(table);
+    host.append(card('semantic', el('p', 'sg-hint', t('styleguide.alias')), semantic, button(t('styleguide.deriveDark'), async () => { const data = await styleGuideDarkSemantic(s.config.colors.semantic.light); s.set('colors.semantic.dark', data.dark); renderAgain(); })));
+    host.append(card('status', grid(...Object.keys(s.config.colors.status).map(k => colorField(s, `colors.status.${k}`, label(k))))));
+    const gradients = el('div', 'sg-stack');
+    for (const [i, g] of s.config.colors.gradients.entries())
+    {
+        const sample = el('span', 'sg-gradient-sample');
+        sample.dataset.gradient = i;
+        sample.setAttribute('aria-hidden', 'true');
+        gradients.append(row(grid(text(s, `colors.gradients.${i}.name`), text(s, `colors.gradients.${i}.css`), text(s, `colors.gradients.${i}.usage`)), sample, button(t('styleguide.remove'), () => { s.set('colors.gradients', s.config.colors.gradients.filter((_, j) => j !== i)); renderAgain(); })));
+    }
+    host.append(card('gradients', gradients, button(t('styleguide.addGradient'), () => { if (s.config.colors.gradients.length >= 12)
+        throw new Error(t('styleguide.limit')); s.set('colors.gradients', [...s.config.colors.gradients, { name: 'gradient-' + (s.config.colors.gradients.length + 1), css: 'linear-gradient(135deg, {primary.500}, {secondary.500})', usage: '' }]); renderAgain(); })), card('themes', select(s, 'colors.themes.default', ['light', 'dark']), themeSupport()));
+    function themeSupport() {
+        const box = el('fieldset', 'sg-inline-set');
+        box.append(el('legend', 'sg-label', label('supports')));
+        for (const theme of ['light', 'dark']) {
+            const wrap = el('label', 'sg-toggle'), input = el('input');
+            input.type = 'checkbox';
+            input.checked = s.config.colors.themes.supports.includes(theme);
+            input.addEventListener('change', () => { const next = ['light', 'dark'].filter(k => k === theme ? input.checked : s.config.colors.themes.supports.includes(k)); s.set('colors.themes.supports', next.length ? next : [s.config.colors.themes.default]); box.querySelectorAll('input').forEach((n, j) => { n.checked = s.config.colors.themes.supports.includes(['light', 'dark'][j]); }); });
+            wrap.append(input, el('span', '', t(`styleguide.${theme}`)));
+            box.append(wrap);
+        }
+        return box;
+    }
+    const matrix = el('section', 'sg-card');
+    matrix.append(el('h3', '', t('styleguide.contrast')), el('p', 'sg-purpose', t('styleguide.contrastHelp')));
+    for (const theme of ['light', 'dark']) {
+        const wrap = el('div', 'sg-table-wrap');
+        wrap.tabIndex = 0;
+        wrap.setAttribute('aria-label', `${t('styleguide.contrast')} · ${t(`styleguide.${theme}`)}`);
+        const tab = el('table', 'sg-table sg-contrast-matrix');
+        tab.dataset.theme = theme;
+        const header = el('tr');
+        header.append(el('th', '', t(`styleguide.${theme}`)));
+        const bgRoles = ['background', 'surface', 'surfaceRaised', 'primary', 'secondary', 'accent'];
+        bgRoles.forEach(k => header.append(el('th', '', label(k))));
+        tab.append(header);
+        for (const fg of ['text', 'textMuted', 'link', 'onPrimary', 'onSecondary', 'onAccent']) {
+            const tr = el('tr');
+            tr.append(el('th', '', label(fg)));
+            for (const bg of bgRoles) {
+                const td = el('td');
+                td.setAttribute('aria-label', `${label(fg)} / ${label(bg)}`);
+                contrasts.push({ node: td, theme, fg, bg });
+                tr.append(td);
+            }
+            tab.append(tr);
+        }
+        wrap.append(tab);
+        matrix.append(wrap);
+    }
+    host.append(matrix);
+    const update = () => {
+        refreshSwatches(host, s);
+        for (const n of host.querySelectorAll('[data-gradient]')) {
+            const g = s.config.colors.gradients[n.dataset.gradient];
+            n.style.background = g ? g.css.replace(/\{[A-Za-z0-9-]+\.[A-Za-z0-9-]+\}/g, ref => resolveColor(s.config, ref) || 'transparent') : 'none';
+        }
+        for (const [key, node] of swatches) {
+            const [palette, step] = key.split('.'), hex = s.config.colors.palettes[palette]?.steps[step];
+            if (hex) {
+                node.querySelector('input[type=color]').value = hex.slice(0, 7);
+                const input = node.querySelector('input[type=text]');
+                if (document.activeElement !== input)
+                    input.value = hex;
+            }
+        }
+        for (const { node, theme, fg, bg } of contrasts) {
+            const c = s.config, report = contrastReport(resolveColor(c, c.colors.semantic[theme][fg], theme), resolveColor(c, c.colors.semantic[theme][bg], theme));
+            node.replaceChildren();
+            if (!report) {
+                node.textContent = t('styleguide.contrastUnavailable');
+                continue;
+            }
+            const target = c.accessibility.level === 'AAA' ? Math.max(7, c.accessibility.minContrastText) : c.accessibility.level === 'AA' ? Math.max(4.5, c.accessibility.minContrastText) : c.accessibility.minContrastText;
+            node.dataset.pass = String(wcagContrast(resolveColor(c, c.colors.semantic[theme][fg], theme), resolveColor(c, c.colors.semantic[theme][bg], theme)) >= target);
+            node.append(el('div', 'sg-ratio', t('styleguide.ratio', report)), el('span', 'sg-chip', report.aa ? t('styleguide.aa') : t('styleguide.fail')));
+            if (report.aaa)
+                node.append(el('span', 'sg-chip', t('styleguide.aaa')));
+        }
+    };
+    update();
+    let cleanup = watch(s, update);
+    return () => cleanup();
+}

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

@@ -0,0 +1,35 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch, refreshSwatches } from './sg-kit.js';
+import { field } from './sg-kit.js';
+export const COMPONENT_TEMPLATES = ['button-primary', 'button-secondary', 'button-ghost', 'button-danger', 'input', 'card', 'badge', 'alert', 'modal', 'nav-bar', 'table'];
+export function componentTemplate(id) {
+    const category = id.startsWith('button') ? 'button' : id === 'nav-bar' ? 'navigation' : id === 'badge' || id === 'alert' ? 'feedback' : id === 'modal' ? 'overlay' : id === 'table' ? 'data' : id;
+    return { id, name: label(id), category, tokens: { background: id === 'button-danger' ? '{status.danger}' : id === 'button-primary' ? '{semantic.primary}' : id === 'button-ghost' ? 'transparent' : '{semantic.surface}', text: id === 'button-primary' ? '{semantic.onPrimary}' : '{semantic.text}', typography: '{typography.button}', radius: id.startsWith('button') ? '{radiusRoles.button}' : '{radiusRoles.card}', padding: '{spacing.md}', shadow: '{elevation.none}', border: '1px solid {semantic.border}' }, states: { hover: '', active: '', focus: '', disabled: '' }, notes: '' };
+}
+export function render(host, s) {
+    let template = 'button-primary', cleanup;
+    const picker = field(t('styleguide.template'), template, v => template = v, { type: 'select', options: COMPONENT_TEMPLATES });
+    const components = el('div', 'sg-stack');
+    const draw = () => {
+        components.replaceChildren();
+        for (const [i, c] of s.config.components.entries()) {
+            const tile = el('div', 'sg-component-card');
+            tile.append(grid(text(s, `components.${i}.name`), text(s, `components.${i}.id`), select(s, `components.${i}.category`, ['button', 'input', 'card', 'navigation', 'feedback', 'data', 'overlay', 'other'])));
+            const tokens = grid(...Object.keys(c.tokens).map(key => aliasPicker(s, `components.${i}.tokens.${key}`, label(key), key === 'background' || key === 'text')));
+            const states = grid(...Object.keys(c.states).map(key => text(s, `components.${i}.states.${key}`, label(key))));
+            tile.append(tokens, states, textarea(s, `components.${i}.notes`));
+            const move = dir => { const next = [...s.config.components]; [next[i], next[i + dir]] = [next[i + dir], next[i]]; s.set('components', next); draw(); };
+            const up = button(t('styleguide.up'), () => move(-1));
+            up.disabled = i === 0;
+            const down = button(t('styleguide.down'), () => move(1));
+            down.disabled = i === s.config.components.length - 1;
+            tile.append(row(up, down, button(t('styleguide.remove'), () => { s.set('components', s.config.components.filter((_, j) => j !== i)); draw(); })));
+            components.append(tile);
+        }
+        refreshSwatches(components, s, 'light');
+    };
+    draw();
+    host.append(card('specs', row(picker, button(t('styleguide.addComponent'), () => { if (s.config.components.length >= 60)
+        throw new Error(t('styleguide.limit')); const c = componentTemplate(template); let suffix = 2; while (s.config.components.some(x => x.id === c.id))
+        c.id = template + '-' + suffix++; s.set('components', [...s.config.components, c]); draw(); })), el('p', 'sg-hint', t('styleguide.alias')), components));
+    return watch(s, () => refreshSwatches(components, s, 'light'));
+}

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

@@ -0,0 +1,41 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch } from './sg-kit.js';
+import { field, diffView } from './sg-kit.js';
+import { fetchStyleGuideHistory, restoreStyleGuideRevision, fetchStyleGuideProposals, acceptStyleGuideProposal, rejectStyleGuideProposal } from '../api.js';
+export async function render(host, s, { proposals = false } = {}) {
+    let disposed = false, status = 'pending', seq = 0;
+    const revisions = el('div', 'sg-stack'), suggestions = el('div', 'sg-stack');
+    const refresh = async () => {
+        const at = ++seq;
+        const history = await fetchStyleGuideHistory(s.projectPath);
+        if (disposed || at !== seq)
+            return;
+        revisions.replaceChildren();
+        if (!history.length)
+            revisions.append(el('p', 'sg-hint', t('styleguide.historyEmpty')));
+        for (const r of history)
+            revisions.append(row(el('span', '', t('styleguide.revisionRow', { revision: r.revision, at: new Date(r.at).toLocaleString(), source: r.label || r.source })), button(t('styleguide.restore'), async () => { if (!window.confirm(t('styleguide.restoreConfirm', { revision: r.revision })))
+                return; await s.action(path => restoreStyleGuideRevision(path, r.revision)); })));
+        const list = await fetchStyleGuideProposals(s.projectPath, status === 'all' ? undefined : status);
+        if (disposed || at !== seq)
+            return;
+        suggestions.replaceChildren();
+        if (!list.length)
+            suggestions.append(el('p', 'sg-hint', t('styleguide.proposalsEmpty')));
+        for (const p of list) {
+            const tile = el('article', 'sg-proposal');
+            tile.dataset.proposal = p.id;
+            tile.append(row(el('strong', '', p.reason), el('span', 'sg-chip', label(p.status))), el('p', 'sg-hint', [p.provider, p.model, p.runId, new Date(p.at).toLocaleString()].filter(Boolean).join(' · ')), diffView(p.diff));
+            if (p.status === 'pending')
+                tile.append(row(button(t('styleguide.accept'), () => s.action(path => acceptStyleGuideProposal(path, p.id))), button(t('styleguide.reject'), async () => { await s.action(path => rejectStyleGuideProposal(path, p.id)); await refresh(); })));
+            suggestions.append(tile);
+        }
+    };
+    const filter = field(label('status'), status, v => { status = v; refresh().catch(() => { }); }, { type: 'select', options: ['all', 'pending', 'accepted', 'rejected'] });
+    const proposalCard = card('proposals', row(filter, button(t('styleguide.refresh'), refresh)), suggestions);
+    proposalCard.id = 'sg-proposals-card';
+    host.append(card('history', revisions), proposalCard);
+    await refresh();
+    if (proposals)
+        proposalCard.scrollIntoView({ block: 'start' });
+    return () => { disposed = true; seq++; };
+}

package/neural-interface/public/shared/styleguide/sg-icons-logo.js

@@ -0,0 +1,38 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch } from './sg-kit.js';
+import { uploadStyleGuideLogo, deleteStyleGuideLogo, styleGuideAssetUrl } from '../api.js';
+export function render(host, s) {
+    const variants = el('div', 'sg-grid'), previews = [];
+    for (const [i, v] of s.config.logo.variants.entries()) {
+        const tile = el('div', 'sg-logo-tile'), preview = el('div', 'sg-logo-preview'), img = el('img');
+        img.src = styleGuideAssetUrl(s.meta.assetsHash, v.file);
+        img.alt = v.name;
+        preview.style.background = v.bg === 'primary' ? s.config.colors.palettes.primary.base : v.bg === 'white' ? s.config.colors.semantic.light.background : s.config.colors.palettes.neutral.steps[950];
+        preview.append(img);
+        previews.push({ preview, i });
+        tile.append(preview, text(s, `logo.variants.${i}.name`), select(s, `logo.variants.${i}.kind`, ['primary', 'mono', 'inverted', 'icon', 'wordmark']), select(s, `logo.variants.${i}.bg`, ['primary', 'white', 'dark']), button(t('styleguide.remove'), () => s.action(path => deleteStyleGuideLogo(path, v.id))));
+        variants.append(tile);
+    }
+    if (!s.config.logo.variants.length)
+        variants.append(el('p', 'sg-hint', t('styleguide.logoEmpty')));
+    const upload = el('label', 'sg-field', t('styleguide.upload')), input = el('input', 'sg-input');
+    input.type = 'file';
+    input.accept = 'image/svg+xml,image/png,image/jpeg,image/webp';
+    upload.append(input);
+    input.addEventListener('change', async () => { const file = input.files[0]; if (!file)
+        return; try {
+        if (file.size > 4 * 1024 * 1024)
+            throw new Error(t('styleguide.uploadHint'));
+        await s.action(path => uploadStyleGuideLogo(path, file, { name: file.name.replace(/\.[^.]+$/, ''), kind: 'primary', bg: 'primary' }));
+    }
+    catch (e) {
+        const n = host.closest('.styleguide-panel').querySelector('.sg-error');
+        n.hidden = false;
+        n.textContent = e.message;
+    } });
+    host.append(card('icons', grid(text(s, 'iconography.library'), select(s, 'iconography.style', ['outline', 'filled', 'duotone']), number(s, 'iconography.strokeWidth', 'px', { min: 0, max: 8 })), listEditor(s, 'iconography.sizes', label('sizes'), { numeric: true, max: 12, chips: true }), textarea(s, 'iconography.notes')), card('logos', variants, upload, el('p', 'sg-hint', t('styleguide.uploadHint'))), card('logoRules', text(s, 'logo.clearSpace'), number(s, 'logo.minSize.px', 'px', { name: label('minSize'), min: 1, max: 2000 }), select(s, 'logo.favicon', [['', t('styleguide.none')], ...s.config.logo.variants.map(v => [v.file, v.name])], t('styleguide.favicon')), listEditor(s, 'logo.donts')));
+    return watch(s, () => { for (const { preview, i } of previews) {
+        const v = s.config.logo.variants[i];
+        if (v)
+            preview.style.background = v.bg === 'primary' ? s.config.colors.palettes.primary.base : v.bg === 'white' ? s.config.colors.semantic.light.background : s.config.colors.palettes.neutral.steps[950];
+    } });
+}

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

@@ -0,0 +1,4 @@
+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) {
+    host.append(card('direction', select(s, 'imagery.style', ['photography', 'illustration', '3d', 'abstract', 'mixed']), textarea(s, 'imagery.mood'), textarea(s, 'imagery.notes'), grid(listEditor(s, 'imagery.dos'), listEditor(s, 'imagery.donts'))), card('generation', textarea(s, 'imagery.generation.promptPrefix'), textarea(s, 'imagery.generation.negativePrompt'), grid(listEditor(s, 'imagery.generation.aspectRatios', label('aspectRatios'), { max: 8, chips: true }), listEditor(s, 'imagery.generation.styleReferences', label('styleReferences'), { max: 12 }))));
+}

package/neural-interface/public/shared/styleguide/sg-import-export.js

@@ -0,0 +1,47 @@
+import { t, label, el, card, row, grid, text, number, select, toggle, textarea, listEditor, mapEditor, aliasPicker, colorField, button, watch } from './sg-kit.js';
+import { field, diffView } from './sg-kit.js';
+import { importStyleGuide, fetchStyleGuidePresets, applyStyleGuidePreset, writeStyleGuideExports, fetchStyleGuideExport } from '../api.js';
+export async function render(host, s) {
+    let disposed = false, kind = 'design-md', merge = 'merge', content = '', slug = '', preview = null, seq = 0;
+    const diff = el('div', 'sg-import-diff'), warnings = el('div', 'sg-hint'), written = el('div', 'sg-written');
+    const apply = button(t('styleguide.apply'), async () => { if (!preview)
+        return; const expected = preview; await s.apply(expected.config, `import:${expected.kind}`); preview = null; });
+    apply.disabled = true;
+    const invalidate = () => { seq++; preview = null; apply.disabled = true; diff.replaceChildren(); warnings.textContent = ''; };
+    const format = field(t('styleguide.importKind'), kind, v => { kind = v; invalidate(); }, { type: 'select', options: [['design-md', 'DESIGN.md'], ['dtcg', 'tokens.json'], ['css', 'CSS'], ['tailwind-json', 'Tailwind JSON'], ['codebase', t('styleguide.scan')], ['community', t('styleguide.slug')]] });
+    const strategy = field(t('styleguide.importMode'), merge, v => { merge = v; invalidate(); }, { type: 'select', options: ['merge', 'replace'] });
+    const paste = field(t('styleguide.importText'), content, v => { content = v; invalidate(); }, { type: 'textarea' });
+    const community = field(t('styleguide.slug'), slug, v => { slug = v; invalidate(); });
+    const upload = field(t('styleguide.importFile'), '', () => { }, { type: 'file' });
+    upload.querySelector('input').accept = '.md,.json,.css,text/plain,text/markdown,application/json,text/css';
+    upload.querySelector('input').addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file)
+        return; content = await file.text(); kind = file.name.endsWith('.css') ? 'css' : file.name.endsWith('.json') ? 'dtcg' : 'design-md'; format.querySelector('select').value = kind; paste.querySelector('textarea').value = content; invalidate(); });
+    const makePreview = async () => { await s.flush(); const at = ++seq; const data = await importStyleGuide(s.projectPath, { kind, text: content, slug, merge, mode: 'preview' }); if (disposed || at !== seq)
+        return; preview = { ...data, kind }; diff.replaceChildren(diffView(data.diff)); warnings.replaceChildren(...(data.warnings || []).map(w => el('p', '', w))); apply.disabled = false; };
+    const gallery = el('div', 'sg-grid');
+    host.append(card('import', row(format, strategy), upload, paste, community, el('p', 'sg-hint', t('styleguide.attribution')), row(button(t('styleguide.scan'), () => { kind = 'codebase'; format.querySelector('select').value = kind; invalidate(); return makePreview(); }), button(t('styleguide.previewDiff'), makePreview), apply), warnings, diff));
+    const presetCard = el('section', 'sg-card');
+    presetCard.append(el('h3', '', t('styleguide.presets')), el('p', 'sg-purpose', t('styleguide.presetsHelp')), gallery);
+    host.append(presetCard);
+    const exports = card('exports', grid(toggle(s, 'exports.designMd'), toggle(s, 'exports.tokensJson'), toggle(s, 'exports.cssVars'), select(s, 'exports.tailwind', ['v4', 'v3', 'none']), select(s, 'exports.darkMode', ['attribute', 'media', 'class']), text(s, 'exports.cssSelector'), text(s, 'exports.outDir')), button(t('styleguide.writeNow'), async () => { await s.flush({ force: !s.meta.saved }); const data = await s.action(path => writeStyleGuideExports(path)); drawWritten(data.written); }), written);
+    host.append(exports);
+    const copies = row();
+    for (const [format, name] of [['design-md', 'DESIGN.md'], ['dtcg', 'tokens.json'], ['css', 'tokens.css'], ['tailwind-v4', 'Tailwind v4'], ['tailwind-v3', 'Tailwind v3'], ['summary', t('styleguide.summary')], ['json', 'JSON']])
+        copies.append(button(`${t('styleguide.copy')} · ${name}`, async () => { await s.flush(); await navigator.clipboard.writeText(await fetchStyleGuideExport(s.projectPath, format)); }));
+    exports.append(copies);
+    function drawWritten(files) { written.replaceChildren(el('h4', '', t('styleguide.written'))); if (!files?.length)
+        written.append(el('p', 'sg-hint', t('styleguide.writeEmpty'))); for (const f of files || [])
+        written.append(row(el('code', '', f.path), button(t('styleguide.copy'), () => navigator.clipboard.writeText(f.path)))); }
+    drawWritten(s.meta.written);
+    const presets = await fetchStyleGuidePresets();
+    if (!disposed)
+        for (const preset of presets) {
+            const tile = el('div', 'sg-preset');
+            const swatches = row(...preset.swatches.map(hex => { const n = el('span', 'sg-preset-swatch'); n.style.background = hex; n.title = hex; return n; }));
+            tile.append(el('h4', '', preset.name), el('p', 'sg-purpose', preset.description), swatches, el('p', '', `${preset.fonts.heading} / ${preset.fonts.body}`), button(t('styleguide.apply'), () => s.action(path => applyStyleGuidePreset(path, preset.id, merge))));
+            gallery.append(tile);
+        }
+    const unsubscribe = s.subscribe(type => { if (type === 'edit')
+        invalidate(); });
+    return () => { disposed = true; seq++; unsubscribe(); };
+}

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

@@ -0,0 +1,281 @@
+import { t } from '../i18n.js';
+import { label } from './sg-labels.js';
+import { cssColorToHex, resolveColor } from './sg-color-client.js';
+export { t, label };
+export const esc = value => String(value ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+export function el(tag, cls = '', text) { const n = document.createElement(tag); if (cls)
+    n.className = cls; if (text != null)
+    n.textContent = text; return n; }
+export const row = (...children) => { const n = el('div', 'sg-row'); n.append(...children); return n; };
+export const grid = (...children) => { const n = el('div', 'sg-grid'); n.append(...children); return n; };
+export function card(key, ...children) {
+    const n = el('section', 'sg-card');
+    n.dataset.card = key;
+    n.append(el('h3', '', t(`styleguide.cards.${key}.title`)), el('p', 'sg-purpose', t(`styleguide.cards.${key}.purpose`)), ...children);
+    return n;
+}
+export function button(text, handler, cls = '') {
+    const n = el('button', `sg-btn ${cls}`, text);
+    n.type = 'button';
+    n.addEventListener('click', async () => {
+        if (n.disabled)
+            return;
+        // Disabling a focused button drops focus to <body>; give it back when the work is done.
+        const hadFocus = document.activeElement === n;
+        n.disabled = true;
+        try {
+            await handler?.();
+        }
+        catch (e) {
+            const host = n.closest('.styleguide-panel');
+            const out = host?.querySelector('.sg-error');
+            if (out) {
+                out.hidden = false;
+                out.textContent = e.message;
+            }
+        }
+        finally {
+            n.disabled = false;
+            if (hadFocus && n.isConnected && (!document.activeElement || document.activeElement === document.body))
+                n.focus({ preventScroll: true });
+        }
+    });
+    return n;
+}
+let serial = 0;
+export function field(name, value, onChange, { type = 'text', unit = '', min, max, step, options, list, help } = {}) {
+    // A checkbox sits inside its <label>; every other control gets <label for>, so a wrapped
+    // select or textarea never adds its own value to the accessible name.
+    const box = type === 'checkbox', wrap = el(box ? 'label' : 'div', 'sg-field'), id = `sg-field-${++serial}`;
+    const caption = el(box ? 'span' : 'label', 'sg-label', name + (unit ? ` (${unit})` : ''));
+    if (!box)
+        caption.htmlFor = id;
+    wrap.append(caption);
+    const input = el(type === 'textarea' ? 'textarea' : type === 'select' ? 'select' : 'input', 'sg-input');
+    input.id = id;
+    if (box)
+        wrap.prepend(input);
+    if (type === 'select')
+        for (const option of options || []) {
+            const [v, text] = Array.isArray(option) ? option : [option, label(option)];
+            const n = el('option', '', text);
+            n.value = v;
+            input.append(n);
+        }
+    else if (type !== 'textarea')
+        input.type = type;
+    if (type === 'checkbox') {
+        input.checked = !!value;
+        wrap.classList.add('sg-toggle');
+    }
+    else
+        input.value = value ?? '';
+    for (const [key, val] of Object.entries({ min, max, step, list }))
+        if (val != null)
+            input.setAttribute(key, val);
+    if (help) {
+        const h = el('small', 'sg-hint', help);
+        h.id = id + '-help';
+        wrap.append(input, h);
+        input.setAttribute('aria-describedby', h.id);
+    }
+    else if (!box)
+        wrap.append(input);
+    const err = el('small', 'sg-validation');
+    err.hidden = true;
+    wrap.append(err);
+    const update = () => {
+        if (type === 'number' || type === 'range') {
+            if (!input.value.trim() || !input.checkValidity() || !Number.isFinite(Number(input.value))) {
+                input.setAttribute('aria-invalid', 'true');
+                err.hidden = false;
+                err.textContent = t('styleguide.invalidNumber');
+                return;
+            }
+        }
+        input.removeAttribute('aria-invalid');
+        err.hidden = true;
+        onChange(type === 'checkbox' ? input.checked : type === 'number' || type === 'range' ? Number(input.value) : input.value, input);
+    };
+    input.addEventListener(type === 'select' || type === 'checkbox' ? 'change' : 'input', update);
+    return wrap;
+}
+export const text = (s, path, name = label(path.split('.').at(-1)), options = {}) => { const host = field(name, s.get(path), v => s.set(path, v), options); host.querySelector('input,select,textarea').dataset.sgPath = path; return host; };
+export const number = (s, path, unit = '', options = {}) => text(s, path, options.name || label(path.split('.').at(-1)), { type: 'number', unit, step: 'any', ...options });
+export const select = (s, path, options, name) => text(s, path, name || label(path.split('.').at(-1)), { type: 'select', options });
+export const toggle = (s, path, name) => text(s, path, name || label(path.split('.').at(-1)), { type: 'checkbox' });
+export const textarea = (s, path, name) => text(s, path, name || label(path.split('.').at(-1)), { type: 'textarea' });
+export function listEditor(s, path, name = label(path.split('.').at(-1)), { numeric = false, max = 40, chips = false } = {}) {
+    const host = el('div', 'sg-list' + (chips ? ' sg-chips' : ''));
+    const draw = () => {
+        host.replaceChildren(el('h4', '', name));
+        const values = s.get(path) || [], items = el('div', chips ? 'sg-chip-row' : 'sg-stack sg-list-items');
+        values.forEach((v, i) => {
+            const item = field(t('styleguide.listItem', { label: name, index: i + 1 }), v, val => { const next = [...s.get(path)]; next[i] = val; s.set(path, next); }, { type: numeric ? 'number' : 'text', step: 'any' });
+            item.classList.add('sg-hide-label');
+            const r = row(item);
+            r.classList.add(chips ? 'sg-chip-item' : 'sg-list-item');
+            const remove = button(chips ? '×' : t('styleguide.remove'), () => { s.set(path, s.get(path).filter((_, j) => j !== i)); draw(); }, chips ? 'sg-icon-btn' : '');
+            remove.setAttribute('aria-label', `${t('styleguide.remove')} · ${t('styleguide.listItem', { label: name, index: i + 1 })}`);
+            if (!chips) {
+                const move = dir => { const next = [...s.get(path)]; [next[i], next[i + dir]] = [next[i + dir], next[i]]; s.set(path, next); draw(); };
+                const up = button(t('styleguide.up'), () => move(-1));
+                up.disabled = i === 0;
+                const down = button(t('styleguide.down'), () => move(1));
+                down.disabled = i === values.length - 1;
+                r.append(up, down);
+            }
+            r.append(remove);
+            items.append(r);
+        });
+        const add = button(t('styleguide.add'), () => { s.set(path, [...(s.get(path) || []), numeric ? 24 : '']); draw(); host.querySelectorAll('input').item((s.get(path) || []).length - 1)?.focus(); }, 'sg-add-btn');
+        add.setAttribute('aria-label', `${t('styleguide.add')} · ${name}`);
+        add.disabled = values.length >= max;
+        if (chips)
+            items.append(add);
+        host.append(items);
+        if (!chips)
+            host.append(add);
+    };
+    draw();
+    return host;
+}
+export function aliasOptions(c, { colorsOnly = false } = {}) {
+    const groups = { ...Object.fromEntries(Object.entries(c.colors.palettes).map(([k, p]) => [k, p.steps])), status: c.colors.status, semantic: c.colors.semantic.light };
+    if (!colorsOnly)
+        Object.assign(groups, { typography: c.typography.styles, spacing: c.layout.spacing.scale, radius: c.shape.radius, radiusRoles: c.shape.radiusRoles, elevation: c.shape.elevation, duration: c.motion.durations, easing: c.motion.easings });
+    return Object.entries(groups).flatMap(([group, map]) => Object.keys(map).map(key => `{${group}.${key}}`));
+}
+export function aliasPicker(s, path, name, colorsOnly = false) {
+    const id = `sg-alias-${++serial}`, host = text(s, path, name || label(path.split('.').at(-1)), { list: id });
+    host.classList.add('sg-alias');
+    const list = el('datalist');
+    list.id = id;
+    for (const ref of aliasOptions(s.config, { colorsOnly })) {
+        const o = el('option');
+        o.value = ref;
+        list.append(o);
+    }
+    host.append(list);
+    if (colorsOnly) {
+        // What the alias resolves to, so a typo or a wrong step is visible at once.
+        const swatch = el('span', 'sg-alias-swatch');
+        swatch.dataset.sgSwatch = path;
+        swatch.setAttribute('aria-hidden', 'true');
+        const input = host.querySelector('input'), line = el('span', 'sg-input-line');
+        input.before(line);
+        line.append(swatch, input);
+    }
+    return host;
+}
+// Repaint every alias swatch under root (called by the sections on edit and save).
+export function refreshSwatches(root, s, theme) {
+    for (const n of root.querySelectorAll('[data-sg-swatch]')) {
+        const path = n.dataset.sgSwatch, hex = resolveColor(s.config, s.get(path), theme || (path.includes('.dark.') ? 'dark' : 'light'));
+        n.style.background = hex || 'transparent';
+        n.classList.toggle('sg-unresolved', !hex);
+        n.title = hex || t('styleguide.contrastUnavailable');
+    }
+}
+export function colorField(s, path, name, onValue, { eyedropper = true } = {}) {
+    const host = el('div', 'sg-color-field');
+    const value = s.get(path);
+    const picker = el('input', 'sg-swatch');
+    picker.type = 'color';
+    picker.value = (resolveColor(s.config, value) || '#000000').slice(0, 7);
+    picker.setAttribute('aria-label', name || label(path.split('.').at(-1)));
+    const hex = field(name || label(path.split('.').at(-1)), value, () => { }, {}), input = hex.querySelector('input');
+    picker.dataset.sgPath = path;
+    input.dataset.sgPath = path;
+    const update = raw => {
+        const value = cssColorToHex(raw);
+        if (!value) {
+            input.setAttribute('aria-invalid', 'true');
+            hex.querySelector('.sg-validation').hidden = false;
+            hex.querySelector('.sg-validation').textContent = t('styleguide.invalidColor');
+            return;
+        }
+        input.removeAttribute('aria-invalid');
+        hex.querySelector('.sg-validation').hidden = true;
+        picker.value = value.slice(0, 7);
+        s.set(path, value);
+        onValue?.(value);
+    };
+    input.addEventListener('change', () => update(input.value));
+    picker.addEventListener('input', () => { input.value = picker.value; update(picker.value); });
+    host.append(picker, hex);
+    if (eyedropper && window.EyeDropper) {
+        const pick = button('◉', async () => { try {
+            const { sRGBHex } = await new window.EyeDropper().open();
+            input.value = sRGBHex;
+            update(sRGBHex);
+        }
+        catch (e) {
+            if (e.name !== 'AbortError')
+                throw e;
+        } }, 'sg-eyedropper');
+        pick.setAttribute('aria-label', t('styleguide.eyedropper'));
+        pick.title = t('styleguide.eyedropper');
+        host.append(pick);
+    }
+    return host;
+}
+export function diffView(diff = []) {
+    const host = el('div', 'sg-table-wrap');
+    host.tabIndex = 0;
+    host.setAttribute('aria-label', t('styleguide.previewDiff'));
+    if (!diff.length) {
+        host.append(el('p', 'sg-hint', t('styleguide.noDiff')));
+        return host;
+    }
+    const table = el('table', 'sg-table'), head = el('tr');
+    for (const key of ['path', 'before', 'after'])
+        head.append(el('th', '', t(`styleguide.${key}`)));
+    const thead = el('thead');
+    thead.append(head);
+    table.append(thead);
+    const body = el('tbody');
+    for (const d of diff) {
+        const tr = el('tr');
+        tr.append(el('th', '', d.path), el('td', '', JSON.stringify(d.from)), el('td', '', JSON.stringify(d.to)));
+        body.append(tr);
+    }
+    table.append(body);
+    host.append(table);
+    return host;
+}
+export function mapEditor(s, path, { unit = '', numeric = true, max = 30, render } = {}) {
+    const host = el('div', render ? 'sg-map sg-map-wide' : 'sg-map');
+    const draw = () => {
+        host.replaceChildren();
+        const map = s.get(path);
+        for (const [key, value] of Object.entries(map)) {
+            const r = row(numeric ? number(s, `${path}.${key}`, unit, { name: key, min: 0 }) : text(s, `${path}.${key}`, key));
+            if (render)
+                r.append(render(key, value));
+            r.append(button(t('styleguide.remove'), () => { const next = { ...s.get(path) }; delete next[key]; s.set(path, next); draw(); }));
+            host.append(r);
+        }
+        const name = field(t('styleguide.tokenName'), ' ', () => { });
+        name.querySelector('input').value = '';
+        const add = button(t('styleguide.addToken'), () => { const key = name.querySelector('input').value.trim().replace(/[{}.\s]+/g, '-'); if (!key || ['__proto__', 'constructor', 'prototype'].includes(key) || key in s.get(path))
+            return; if (Object.keys(s.get(path)).length >= max)
+            throw new Error(t('styleguide.limit')); s.set(path, { ...s.get(path), [key]: numeric ? 0 : '' }); draw(); });
+        host.append(row(name, add));
+    };
+    draw();
+    return host;
+}
+// Safe Markdown subset: text is always escaped; no raw HTML or executable links.
+export function markdownPreview(markdown) {
+    const host = el('div', 'sg-markdown');
+    for (const line of String(markdown || '').split('\n')) {
+        const h = /^(#{1,6})\s+(.+)$/.exec(line);
+        const n = el(h ? 'h' + h[1].length : /^[-*] /.test(line) ? 'li' : 'p');
+        n.innerHTML = esc(h ? h[2] : line.replace(/^[-*] /, '')).replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/`([^`]+)`/g, '<code>$1</code>');
+        host.append(n);
+    }
+    return host;
+}
+export function watch(s, fn) { return s.subscribe(type => { if (type === 'edit' || type === 'saved')
+    fn(); }); }