synabun 2.0.0-beta → 2.0.5

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

@@ -38,6 +38,7 @@ export function render(host, s) {
     host.append(card('palettes', palettes, row(name, add, fromLogo)));
     const semantic = el('div', 'sg-table-wrap');
     semantic.tabIndex = 0;
+    semantic.setAttribute('role', 'region');
     semantic.setAttribute('aria-label', label('semantic'));
     const table = el('table', 'sg-table');
     const head = el('tr');
@@ -86,10 +87,12 @@ export function render(host, s) {
         return box;
     }
     const matrix = el('section', 'sg-card');
-    matrix.append(el('h3', '', t('styleguide.contrast')), el('p', 'sg-purpose', t('styleguide.contrastHelp')));
+    const matrixBody = el('div', 'sg-card-body');
+    matrix.append(el('h3', '', t('styleguide.contrast')), el('p', 'sg-purpose', t('styleguide.contrastHelp')), matrixBody);
     for (const theme of ['light', 'dark']) {
         const wrap = el('div', 'sg-table-wrap');
         wrap.tabIndex = 0;
+        wrap.setAttribute('role', 'region');
         wrap.setAttribute('aria-label', `${t('styleguide.contrast')} · ${t(`styleguide.${theme}`)}`);
         const tab = el('table', 'sg-table sg-contrast-matrix');
         tab.dataset.theme = theme;
@@ -110,7 +113,7 @@ export function render(host, s) {
             tab.append(tr);
         }
         wrap.append(tab);
-        matrix.append(wrap);
+        matrixBody.append(wrap);
     }
     host.append(matrix);
     const update = () => {

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

@@ -20,15 +20,16 @@ export async function render(host, s) {
         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);
+    const presetCard = el('section', 'sg-card'), presetBody = el('div', 'sg-card-body');
+    presetBody.append(gallery);
+    presetCard.append(el('h3', '', t('styleguide.presets')), el('p', 'sg-purpose', t('styleguide.presetsHelp')), presetBody);
     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);
+    exports.querySelector('.sg-card-body').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)))); }

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

@@ -11,7 +11,9 @@ export const grid = (...children) => { const n = el('div', 'sg-grid'); n.append(
 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);
+    const body = el('div', 'sg-card-body');
+    body.append(...children);
+    n.append(el('h3', '', t(`styleguide.cards.${key}.title`)), el('p', 'sg-purpose', t(`styleguide.cards.${key}.purpose`)), body);
     return n;
 }
 export function button(text, handler, cls = '') {
@@ -223,6 +225,7 @@ export function colorField(s, path, name, onValue, { eyedropper = true } = {}) {
 export function diffView(diff = []) {
     const host = el('div', 'sg-table-wrap');
     host.tabIndex = 0;
+    host.setAttribute('role', 'region');
     host.setAttribute('aria-label', t('styleguide.previewDiff'));
     if (!diff.length) {
         host.append(el('p', 'sg-hint', t('styleguide.noDiff')));

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

@@ -46,7 +46,14 @@ export function createPanel({ onClosed, projectPath } = {}) {
     proposalButton.append(badge);
     const closeBtn = button(t('styleguide.close'), () => close());
     closeBtn.id = 'sg-close';
-    header.append(row(title, project, status), row(button(t('styleguide.designMd'), () => show('preview', { source: true })), button(t('styleguide.export'), () => show('import-export')), button(t('styleguide.history'), () => show('history')), proposalButton, closeBtn));
+    closeBtn.classList.add('sg-close');
+    closeBtn.setAttribute('aria-label', t('styleguide.close'));
+    closeBtn.title = t('styleguide.close');
+    closeBtn.textContent = '×';
+    const context = row(title, project, status), actions = row(button(t('styleguide.designMd'), () => show('preview', { source: true })), button(t('styleguide.export'), () => show('import-export')), button(t('styleguide.history'), () => show('history')), proposalButton);
+    context.classList.add('sg-header-context');
+    actions.classList.add('sg-header-actions');
+    header.append(context, actions, closeBtn);
     panel.append(header);
     const shell = el('div', 'sg-shell'), rail = el('nav', 'sg-rail');
     rail.setAttribute('aria-label', t('styleguide.sections'));
@@ -137,6 +144,7 @@ export function createPanel({ onClosed, projectPath } = {}) {
     async function load(path) { if (!path)
         return; try {
         await state.load(path);
+        project.title = state.projectPath;
         storage.setItem('styleguide.lastProject', path);
     }
     catch (e) {

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

@@ -58,6 +58,7 @@ export async function render(host, s) {
     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'])