synabun 1.3.0 → 2.0.0-beta

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

@@ -0,0 +1,318 @@
+import { t } from '../i18n.js';
+export const labels = {
+    typography: () => t('styleguide.section.typography.title'),
+    "minor-second": () => t('styleguide.minor-second'),
+    "major-second": () => t('styleguide.major-second'),
+    "minor-third": () => t('styleguide.minor-third'),
+    "major-third": () => t('styleguide.major-third'),
+    "perfect-fourth": () => t('styleguide.perfect-fourth'),
+    "perfect-fifth": () => t('styleguide.perfect-fifth'),
+    "golden-ratio": () => t('styleguide.golden-ratio'),
+    "v4": () => t('styleguide.v4'),
+    "v3": () => t('styleguide.v3'),
+    "revisionRow": () => t('styleguide.revisionRow'),
+    "previewMotion": () => t('styleguide.previewMotion'),
+    status: () => t('styleguide.status'),
+    semantic: () => t('styleguide.semantic'),
+    "title": () => t('styleguide.title'),
+    "project": () => t('styleguide.project'),
+    "close": () => t('styleguide.close'),
+    "sections": () => t('styleguide.sections'),
+    "empty": () => t('styleguide.empty'),
+    "noProjects": () => t('styleguide.noProjects'),
+    "loading": () => t('styleguide.loading'),
+    "saving": () => t('styleguide.saving'),
+    "dirty": () => t('styleguide.dirty'),
+    "saved": () => t('styleguide.saved'),
+    "defaults": () => t('styleguide.defaults'),
+    "error": () => t('styleguide.error'),
+    "retry": () => t('styleguide.retry'),
+    "add": () => t('styleguide.add'),
+    "remove": () => t('styleguide.remove'),
+    "up": () => t('styleguide.up'),
+    "down": () => t('styleguide.down'),
+    "copy": () => t('styleguide.copy'),
+    "copied": () => t('styleguide.copied'),
+    "apply": () => t('styleguide.apply'),
+    "previewDiff": () => t('styleguide.previewDiff'),
+    "writeNow": () => t('styleguide.writeNow'),
+    "restore": () => t('styleguide.restore'),
+    "restoreConfirm": () => t('styleguide.restoreConfirm'),
+    "accept": () => t('styleguide.accept'),
+    "reject": () => t('styleguide.reject'),
+    "all": () => t('styleguide.all'),
+    "pending": () => t('styleguide.pending'),
+    "accepted": () => t('styleguide.accepted'),
+    "rejected": () => t('styleguide.rejected'),
+    "historyEmpty": () => t('styleguide.historyEmpty'),
+    "proposalsEmpty": () => t('styleguide.proposalsEmpty'),
+    "auto": () => t('styleguide.auto'),
+    "hueShift": () => t('styleguide.hueShift'),
+    "chroma": () => t('styleguide.chroma'),
+    "paletteFromLogo": () => t('styleguide.paletteFromLogo'),
+    "addPalette": () => t('styleguide.addPalette'),
+    "paletteName": () => t('styleguide.paletteName'),
+    "locked": () => t('styleguide.locked'),
+    "deriveDark": () => t('styleguide.deriveDark'),
+    "contrast": () => t('styleguide.contrast'),
+    "contrastHelp": () => t('styleguide.contrastHelp'),
+    "contrastUnavailable": () => t('styleguide.contrastUnavailable'),
+    "pass": () => t('styleguide.pass'),
+    "fail": () => t('styleguide.fail'),
+    "aa": () => t('styleguide.aa'),
+    "aaa": () => t('styleguide.aaa'),
+    ratio: () => t('styleguide.scaleRatio'),
+    "eyedropper": () => t('styleguide.eyedropper'),
+    "invalidColor": () => t('styleguide.invalidColor'),
+    "invalidNumber": () => t('styleguide.invalidNumber'),
+    "listItem": () => t('styleguide.listItem'),
+    "alias": () => t('styleguide.alias'),
+    "before": () => t('styleguide.before'),
+    "after": () => t('styleguide.after'),
+    "path": () => t('styleguide.path'),
+    "noDiff": () => t('styleguide.noDiff'),
+    "specimen": () => t('styleguide.specimen'),
+    "fontSearch": () => t('styleguide.fontSearch'),
+    "pairing": () => t('styleguide.pairing'),
+    "generateScale": () => t('styleguide.generateScale'),
+    "addStyle": () => t('styleguide.addStyle'),
+    "styleName": () => t('styleguide.styleName'),
+    "addToken": () => t('styleguide.addToken'),
+    "tokenName": () => t('styleguide.tokenName'),
+    "addGradient": () => t('styleguide.addGradient'),
+    "addElevation": () => t('styleguide.addElevation'),
+    "addComponent": () => t('styleguide.addComponent'),
+    "template": () => t('styleguide.template'),
+    "upload": () => t('styleguide.upload'),
+    "uploadHint": () => t('styleguide.uploadHint'),
+    "logoEmpty": () => t('styleguide.logoEmpty'),
+    "logoMissing": () => t('styleguide.logoMissing'),
+    "file": () => t('styleguide.file'),
+    "favicon": () => t('styleguide.favicon'),
+    "none": () => t('styleguide.none'),
+    "summary": () => t('styleguide.summary'),
+    "tokensEstimate": () => t('styleguide.tokensEstimate'),
+    "refresh": () => t('styleguide.refresh'),
+    "pointers": () => t('styleguide.pointers'),
+    "pointersHelp": () => t('styleguide.pointersHelp'),
+    "pointerBlock": () => t('styleguide.pointerBlock'),
+    "componentSheet": () => t('styleguide.componentSheet'),
+    "designMd": () => t('styleguide.designMd'),
+    "export": () => t('styleguide.export'),
+    "history": () => t('styleguide.history'),
+    "proposals": () => t('styleguide.proposals'),
+    "theme": () => t('styleguide.theme'),
+    "light": () => t('styleguide.light'),
+    "dark": () => t('styleguide.dark'),
+    "width": () => t('styleguide.width'),
+    "importKind": () => t('styleguide.importKind'),
+    "importText": () => t('styleguide.importText'),
+    "importFile": () => t('styleguide.importFile'),
+    "scan": () => t('styleguide.scan'),
+    "slug": () => t('styleguide.slug'),
+    "attribution": () => t('styleguide.attribution'),
+    "merge": () => t('styleguide.merge'),
+    "replace": () => t('styleguide.replace'),
+    "importMode": () => t('styleguide.importMode'),
+    "presets": () => t('styleguide.presets'),
+    "presetsHelp": () => t('styleguide.presetsHelp'),
+    "exportHelp": () => t('styleguide.exportHelp'),
+    "written": () => t('styleguide.written'),
+    "writeEmpty": () => t('styleguide.writeEmpty'),
+    "fontGoogle": () => t('styleguide.fontGoogle'),
+    "fontSystem": () => t('styleguide.fontSystem'),
+    "fontSelf": () => t('styleguide.fontSelf'),
+    "fontAdobe": () => t('styleguide.fontAdobe'),
+    "fontOther": () => t('styleguide.fontOther'),
+    "respect": () => t('styleguide.respect'),
+    "ignore": () => t('styleguide.ignore'),
+    "attribute": () => t('styleguide.attribute'),
+    "media": () => t('styleguide.media'),
+    "class": () => t('styleguide.class'),
+    "googleHelp": () => t('styleguide.googleHelp'),
+    "button-primary": () => t('styleguide.button-primary'),
+    "button-secondary": () => t('styleguide.button-secondary'),
+    "button-ghost": () => t('styleguide.button-ghost'),
+    "button-danger": () => t('styleguide.button-danger'),
+    "input": () => t('styleguide.input'),
+    "button": () => t('styleguide.button'),
+    "card": () => t('styleguide.card'),
+    "badge": () => t('styleguide.badge'),
+    "alert": () => t('styleguide.alert'),
+    "modal": () => t('styleguide.modal'),
+    "nav-bar": () => t('styleguide.nav-bar'),
+    "table": () => t('styleguide.table'),
+    "previewHero": () => t('styleguide.previewHero'),
+    "previewLead": () => t('styleguide.previewLead'),
+    "previewAction": () => t('styleguide.previewAction'),
+    "previewSecondary": () => t('styleguide.previewSecondary'),
+    "previewForm": () => t('styleguide.previewForm'),
+    "previewName": () => t('styleguide.previewName'),
+    "previewSelect": () => t('styleguide.previewSelect'),
+    "previewCheckbox": () => t('styleguide.previewCheckbox'),
+    "previewRadio": () => t('styleguide.previewRadio'),
+    "previewSwitch": () => t('styleguide.previewSwitch'),
+    "previewError": () => t('styleguide.previewError'),
+    "previewCards": () => t('styleguide.previewCards'),
+    "previewAlerts": () => t('styleguide.previewAlerts'),
+    "previewBadges": () => t('styleguide.previewBadges'),
+    "previewTable": () => t('styleguide.previewTable'),
+    "previewColumn": () => t('styleguide.previewColumn'),
+    "previewAmount": () => t('styleguide.previewAmount'),
+    "previewFooter": () => t('styleguide.previewFooter'),
+    "previewPagination": () => t('styleguide.previewPagination'),
+    "previewPrevious": () => t('styleguide.previewPrevious'),
+    "previewNext": () => t('styleguide.previewNext'),
+    "previewNav": () => t('styleguide.previewNav'),
+    "previewButtons": () => t('styleguide.previewButtons'),
+    "default": () => t('styleguide.default'),
+    "hover": () => t('styleguide.hover'),
+    "active": () => t('styleguide.active'),
+    "focus": () => t('styleguide.focus'),
+    "disabled": () => t('styleguide.disabled'),
+    "automationToggle": () => t('styleguide.automationToggle'),
+    "automationProject": () => t('styleguide.automationProject'),
+    "automationHelp": () => t('styleguide.automationHelp'),
+    "automationBlock": () => t('styleguide.automationBlock'),
+    "automationError": () => t('styleguide.automationError'),
+    "renderedMarkdown": () => t('styleguide.renderedMarkdown'),
+    "limit": () => t('styleguide.limit'),
+    "name": () => t('styleguide.name'),
+    "tagline": () => t('styleguide.tagline'),
+    "description": () => t('styleguide.description'),
+    "audience": () => t('styleguide.audience'),
+    "personality": () => t('styleguide.personality'),
+    "vibe": () => t('styleguide.vibe'),
+    "keyCharacteristics": () => t('styleguide.keyCharacteristics'),
+    "tone": () => t('styleguide.tone'),
+    "dos": () => t('styleguide.dos'),
+    "donts": () => t('styleguide.donts'),
+    "label": () => t('styleguide.label'),
+    "usage": () => t('styleguide.usage'),
+    "base": () => t('styleguide.base'),
+    "background": () => t('styleguide.background'),
+    "surface": () => t('styleguide.surface'),
+    "surfaceRaised": () => t('styleguide.surfaceRaised'),
+    "text": () => t('styleguide.text'),
+    "textMuted": () => t('styleguide.textMuted'),
+    "border": () => t('styleguide.border'),
+    "primary": () => t('styleguide.primary'),
+    "onPrimary": () => t('styleguide.onPrimary'),
+    "secondary": () => t('styleguide.secondary'),
+    "onSecondary": () => t('styleguide.onSecondary'),
+    "accent": () => t('styleguide.accent'),
+    "onAccent": () => t('styleguide.onAccent'),
+    "link": () => t('styleguide.link'),
+    "success": () => t('styleguide.success'),
+    "warning": () => t('styleguide.warning'),
+    "danger": () => t('styleguide.danger'),
+    "info": () => t('styleguide.info'),
+    "css": () => t('styleguide.css'),
+    "supports": () => t('styleguide.supports'),
+    "heading": () => t('styleguide.heading'),
+    "body": () => t('styleguide.body'),
+    "mono": () => t('styleguide.mono'),
+    "display": () => t('styleguide.display'),
+    "family": () => t('styleguide.family'),
+    "fallback": () => t('styleguide.fallback'),
+    "source": () => t('styleguide.source'),
+    "weights": () => t('styleguide.weights'),
+    "features": () => t('styleguide.features'),
+    "preset": () => t('styleguide.preset'),
+    "font": () => t('styleguide.font'),
+    "size": () => t('styleguide.size'),
+    "mobileSize": () => t('styleguide.mobileSize'),
+    "weight": () => t('styleguide.weight'),
+    "lineHeight": () => t('styleguide.lineHeight'),
+    "letterSpacing": () => t('styleguide.letterSpacing'),
+    "transform": () => t('styleguide.transform'),
+    "principles": () => t('styleguide.principles'),
+    "spacing": () => t('styleguide.spacing'),
+    "scale": () => t('styleguide.scale'),
+    "breakpoints": () => t('styleguide.breakpoints'),
+    "maxWidth": () => t('styleguide.maxWidth'),
+    "padding": () => t('styleguide.padding'),
+    "columns": () => t('styleguide.columns'),
+    "gutter": () => t('styleguide.gutter'),
+    "zIndex": () => t('styleguide.zIndex'),
+    "radius": () => t('styleguide.radius'),
+    "radiusRoles": () => t('styleguide.radiusRoles'),
+    "borders": () => t('styleguide.borders'),
+    "elevation": () => t('styleguide.elevation'),
+    "shadow": () => t('styleguide.shadow'),
+    "durations": () => t('styleguide.durations'),
+    "easings": () => t('styleguide.easings'),
+    "reducedMotion": () => t('styleguide.reducedMotion'),
+    "library": () => t('styleguide.library'),
+    "style": () => t('styleguide.style'),
+    "strokeWidth": () => t('styleguide.strokeWidth'),
+    "sizes": () => t('styleguide.sizes'),
+    "notes": () => t('styleguide.notes'),
+    "kind": () => t('styleguide.kind'),
+    "bg": () => t('styleguide.bg'),
+    "clearSpace": () => t('styleguide.clearSpace'),
+    "minSize": () => t('styleguide.minSize'),
+    "mood": () => t('styleguide.mood'),
+    "promptPrefix": () => t('styleguide.promptPrefix'),
+    "negativePrompt": () => t('styleguide.negativePrompt'),
+    "aspectRatios": () => t('styleguide.aspectRatios'),
+    "styleReferences": () => t('styleguide.styleReferences'),
+    "id": () => t('styleguide.id'),
+    "category": () => t('styleguide.category'),
+    "tokens": () => t('styleguide.tokens'),
+    "states": () => t('styleguide.states'),
+    "level": () => t('styleguide.level'),
+    "minContrastText": () => t('styleguide.minContrastText'),
+    "minContrastLarge": () => t('styleguide.minContrastLarge'),
+    "minTouchTarget": () => t('styleguide.minTouchTarget'),
+    "focusRing": () => t('styleguide.focusRing'),
+    "custom": () => t('styleguide.custom'),
+    "responsive": () => t('styleguide.responsive'),
+    "inject": () => t('styleguide.inject'),
+    "instructions": () => t('styleguide.instructions'),
+    "allowProposals": () => t('styleguide.allowProposals'),
+    "tokensJson": () => t('styleguide.tokensJson'),
+    "cssVars": () => t('styleguide.cssVars'),
+    "tailwind": () => t('styleguide.tailwind'),
+    "outDir": () => t('styleguide.outDir'),
+    "cssSelector": () => t('styleguide.cssSelector'),
+    "darkMode": () => t('styleguide.darkMode'),
+    "code": () => t('styleguide.code'),
+    "complex": () => t('styleguide.complex'),
+    "design": () => t('styleguide.design'),
+    "image_gen": () => t('styleguide.image_gen'),
+    "video_gen": () => t('styleguide.video_gen'),
+    "chat": () => t('styleguide.chat'),
+    "quick": () => t('styleguide.quick'),
+    "review": () => t('styleguide.review'),
+    "research": () => t('styleguide.research'),
+    "browser": () => t('styleguide.browser'),
+    "computer": () => t('styleguide.computer'),
+    "automation": () => t('styleguide.automation'),
+    "navigation": () => t('styleguide.navigation'),
+    "feedback": () => t('styleguide.feedback'),
+    "data": () => t('styleguide.data'),
+    "overlay": () => t('styleguide.overlay'),
+    "other": () => t('styleguide.other'),
+    "photography": () => t('styleguide.photography'),
+    "illustration": () => t('styleguide.illustration'),
+    "3d": () => t('styleguide.3d'),
+    "abstract": () => t('styleguide.abstract'),
+    "mixed": () => t('styleguide.mixed'),
+    "outline": () => t('styleguide.outline'),
+    "filled": () => t('styleguide.filled'),
+    "duotone": () => t('styleguide.duotone'),
+    "wordmark": () => t('styleguide.wordmark'),
+    "inverted": () => t('styleguide.inverted'),
+    "icon": () => t('styleguide.icon'),
+    "white": () => t('styleguide.white'),
+    "normal": () => t('styleguide.normal'),
+    "large": () => t('styleguide.large'),
+    "sm": () => t('styleguide.sm'),
+    "md": () => t('styleguide.md'),
+    "lg": () => t('styleguide.lg'),
+    "uppercase": () => t('styleguide.uppercase'),
+    "lowercase": () => t('styleguide.lowercase'),
+    "capitalize": () => t('styleguide.capitalize'),
+};
+export const label = key => labels[key]?.() ?? String(key);

package/neural-interface/public/shared/styleguide/sg-layout.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('spacing', number(s, 'layout.spacing.base', 'px', { min: 1, max: 64 }), mapEditor(s, 'layout.spacing.scale', { unit: 'px' })), card('grid', grid(number(s, 'layout.container.maxWidth', 'px', { min: 200, max: 10000 }), number(s, 'layout.container.padding', 'px', { min: 0, max: 400 }), number(s, 'layout.grid.columns', '', { min: 1, max: 24, step: 1 }), number(s, 'layout.grid.gutter', 'px', { min: 0, max: 400 }))), card('breakpoints', el('h4', '', label('breakpoints')), mapEditor(s, 'layout.breakpoints', { unit: 'px' }), el('h4', '', label('zIndex')), mapEditor(s, 'layout.zIndex')), card('principles', listEditor(s, 'layout.principles'), listEditor(s, 'responsive.notes', label('responsive'))));
+}

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

@@ -0,0 +1,5 @@
+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();
+    host.append(card('timing', mapEditor(s, 'motion.durations', { unit: 'ms' }), mapEditor(s, 'motion.easings', { numeric: false, render: key => { const track = el('div', 'sg-motion-track'), dot = el('span', 'sg-motion-dot'); track.append(dot); previews.set(key, dot); return row(track, button(t('styleguide.previewMotion'), () => { dot.getAnimations().forEach(a => a.cancel()); dot.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }], { duration: s.config.motion.reducedMotion === 'respect' && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : (s.config.motion.durations.normal || 250), easing: s.get(`motion.easings.${key}`), iterations: 2, direction: 'alternate' }); })); } })), card('reduced', select(s, 'motion.reducedMotion', ['respect', 'ignore']), listEditor(s, 'motion.principles')));
+}

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

@@ -0,0 +1,229 @@
+import { t, el, row, button } from './sg-kit.js';
+import { storage } from '../storage.js';
+import { fetchStyleGuideProjects } from '../api.js';
+import { createGuideState } from './sg-state.js';
+import * as brand from './sg-brand.js';
+import * as colors from './sg-colors.js';
+import * as typography from './sg-typography.js';
+import * as layout from './sg-layout.js';
+import * as shape from './sg-shape.js';
+import * as motion from './sg-motion.js';
+import * as iconsLogo from './sg-icons-logo.js';
+import * as imagery from './sg-imagery.js';
+import * as components from './sg-components.js';
+import * as rules from './sg-rules.js';
+import * as agents from './sg-agents.js';
+import * as preview from './sg-preview.js';
+import * as importExport from './sg-import-export.js';
+import * as history from './sg-history.js';
+export const SECTIONS = [['brand', brand], ['colors', colors], ['typography', typography], ['layout', layout], ['shape', shape], ['motion', motion], ['icons-logo', iconsLogo], ['imagery', imagery], ['components', components], ['rules', rules], ['agents', agents], ['preview', preview], ['import-export', importExport], ['history', history]];
+const icons = ['◈', '◉', 'Aa', '▦', '▢', '↝', '◇', '▧', '⊞', '✓', '⌘', '▣', '⇄', '↶'];
+export function createPanel({ onClosed, projectPath } = {}) {
+    const state = createGuideState(), panel = el('div', 'styleguide-panel glass resizable open');
+    panel.id = 'styleguide-panel';
+    panel.tabIndex = -1;
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-modal', 'true');
+    panel.setAttribute('aria-labelledby', 'sg-panel-title');
+    for (const direction of ['t', 'r', 'b', 'l', 'tl', 'tr', 'bl', 'br']) {
+        const handle = el('div', `resize-handle resize-handle-${direction}`);
+        handle.dataset.resize = direction;
+        handle.setAttribute('aria-hidden', 'true');
+        panel.append(handle);
+    }
+    const header = el('header', 'sg-header drag-handle');
+    header.dataset.drag = 'styleguide-panel';
+    const title = el('h2', '', t('styleguide.title'));
+    title.id = 'sg-panel-title';
+    const project = el('select', 'sg-project-select');
+    project.id = 'sg-project-select';
+    project.setAttribute('aria-label', t('styleguide.project'));
+    const status = el('span', 'sg-status');
+    status.id = 'sg-status';
+    status.setAttribute('role', 'status');
+    status.setAttribute('aria-live', 'polite');
+    const badge = el('span', 'sg-chip'), proposalButton = button(t('styleguide.proposals'), () => show('history', { proposals: true }));
+    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));
+    panel.append(header);
+    const shell = el('div', 'sg-shell'), rail = el('nav', 'sg-rail');
+    rail.setAttribute('aria-label', t('styleguide.sections'));
+    const body = el('main', 'sg-body');
+    body.id = 'sg-body';
+    body.tabIndex = 0;
+    body.setAttribute('aria-label', t('styleguide.title'));
+    const error = el('div', 'sg-error');
+    error.hidden = true;
+    error.setAttribute('role', 'alert');
+    const retry = button(t('styleguide.retry'), async () => { if (state.config)
+        await state.flush({ force: true });
+    else
+        await load(project.value); });
+    retry.hidden = true;
+    let active = 'brand', sectionCleanup = null, renderSeq = 0, closed = false, closing = false;
+    const previousFocus = document.activeElement, previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    async function show(id, options = {}) {
+        if (closed)
+            return;
+        active = id;
+        const seq = ++renderSeq;
+        sectionCleanup?.();
+        sectionCleanup = null;
+        rail.querySelectorAll('button').forEach(n => { n.classList.toggle('active', n.dataset.section === id); n.setAttribute('aria-current', n.dataset.section === id ? 'page' : 'false'); });
+        body.replaceChildren(el('h2', 'sg-page-title', t(`styleguide.section.${id}.title`)), el('p', 'sg-purpose sg-page-purpose', t(`styleguide.section.${id}.purpose`)));
+        body.scrollTop = 0;
+        if (!state.config) {
+            body.append(el('p', 'sg-empty', t('styleguide.empty')));
+            return;
+        }
+        const fields = el('fieldset', 'sg-fields');
+        fields.disabled = state.busy;
+        body.append(fields);
+        const content = el('div', 'sg-content');
+        fields.append(content);
+        try {
+            const cleanup = await SECTIONS.find(([key]) => key === id)[1].render(content, state, options);
+            if (seq !== renderSeq || closed)
+                cleanup?.();
+            else
+                sectionCleanup = cleanup;
+            // A re-render (after restore, accept, import…) removes the focused control: keep focus in the dialog.
+            if (seq === renderSeq && !closed && !panel.contains(document.activeElement))
+                body.focus({ preventScroll: true });
+        }
+        catch (e) {
+            if (seq === renderSeq) {
+                error.hidden = false;
+                error.textContent = e.message;
+            }
+        }
+    }
+    SECTIONS.forEach(([id], i) => { const n = button('', () => show(id), 'sg-rail-button'); n.dataset.section = id; n.setAttribute('aria-label', t(`styleguide.section.${id}.title`)); n.title = t(`styleguide.section.${id}.title`); const icon = el('span', 'sg-rail-icon', icons[i]); icon.setAttribute('aria-hidden', 'true'); n.append(icon, el('span', 'sg-rail-label', t(`styleguide.section.${id}.title`))); rail.append(n); });
+    shell.append(rail, body);
+    panel.append(error, retry, shell);
+    function update(type) {
+        status.dataset.state = state.status;
+        status.textContent = ['saved', 'defaults'].includes(state.status) ? t(`styleguide.${state.status}`, { revision: state.meta.revision || 0, files: (state.meta.written || []).filter(f => f.exists !== false).length }) : state.status === 'error' ? t('styleguide.error', { message: state.error?.message || '' }) : t(`styleguide.${state.status}`);
+        badge.textContent = state.meta.proposalsPending || 0;
+        badge.hidden = !state.meta.proposalsPending;
+        proposalButton.setAttribute('aria-label', `${t('styleguide.proposals')} · ${state.meta.proposalsPending || 0}`);
+        const fields = body.querySelector('fieldset');
+        if (fields)
+            fields.disabled = state.busy;
+        project.disabled = state.busy || state.status === 'loading';
+        if (state.error) {
+            error.hidden = false;
+            error.textContent = state.error.message;
+            retry.hidden = false;
+        }
+        else {
+            error.hidden = true;
+            retry.hidden = true;
+        }
+        if (type === 'saved')
+            body.querySelectorAll('[data-sg-path]').forEach(input => { if (document.activeElement === input)
+                return; const value = state.get(input.dataset.sgPath); if (value === undefined)
+                return; if (input.type === 'checkbox')
+                input.checked = !!value;
+            else
+                input.value = input.type === 'color' ? String(value).slice(0, 7) : (value ?? ''); });
+        if (type === 'load')
+            show(active);
+    }
+    const unsubscribe = state.subscribe(update);
+    async function load(path) { if (!path)
+        return; try {
+        await state.load(path);
+        storage.setItem('styleguide.lastProject', path);
+    }
+    catch (e) {
+        project.value = state.projectPath || path;
+        error.hidden = false;
+        error.textContent = e.message;
+    } }
+    project.addEventListener('change', () => load(project.value));
+    const keydown = e => {
+        if (closed)
+            return;
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            close();
+            return;
+        }
+        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            state.flush().catch(() => { });
+            return;
+        }
+        if (e.key === 'Tab') {
+            const targets = [...panel.querySelectorAll('button,input,select,textarea,[tabindex="0"]')].filter(n => !n.disabled && !n.closest('[hidden]') && n.getClientRects().length);
+            const first = targets[0], last = targets.at(-1);
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last?.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first?.focus();
+            }
+        }
+    };
+    // Window capture runs before every document listener the app registered at boot, so a
+    // background feature (map, whiteboard, tutorial) cannot swallow Esc or Cmd/Ctrl+S.
+    window.addEventListener('keydown', keydown, true);
+    // CSS caps the panel at the viewport; this keeps its position on screen when the window shrinks.
+    const fit = () => {
+        if (closed)
+            return;
+        panel.style.maxHeight = '';
+        const r = panel.getBoundingClientRect();
+        panel.style.left = Math.max(8, Math.min(r.left, window.innerWidth - r.width - 8)) + 'px';
+        panel.style.top = Math.max(8, Math.min(r.top, window.innerHeight - r.height - 8)) + 'px';
+    };
+    window.addEventListener('resize', fit);
+    async function close() { if (closed || closing)
+        return; closing = true; try {
+        await state.flush();
+    }
+    catch {
+        closing = false;
+        return;
+    } closed = true; renderSeq++; sectionCleanup?.(); unsubscribe(); state.destroy(); window.removeEventListener('keydown', keydown, true); window.removeEventListener('resize', fit); document.body.style.overflow = previousOverflow; panel.remove(); previousFocus?.focus?.(); onClosed?.(); }
+    const ready = (async () => {
+        try {
+            const projects = await fetchStyleGuideProjects();
+            if (closed)
+                return;
+            for (const p of projects) {
+                const o = el('option', '', p.label || p.path);
+                o.value = p.path;
+                project.append(o);
+            }
+            if (!projects.length) {
+                const o = el('option', '', t('styleguide.noProjects'));
+                o.value = '';
+                project.append(o);
+                show('brand');
+                return;
+            }
+            const wanted = projectPath || storage.getItem('styleguide.lastProject'), initial = projects.some(p => p.path === wanted) ? wanted : projects[0].path;
+            project.value = initial;
+            await load(initial);
+        }
+        catch (e) {
+            error.hidden = false;
+            error.textContent = e.message;
+            retry.hidden = false;
+        }
+        finally {
+            if (!closed)
+                closeBtn.focus();
+        }
+    })();
+    return { panel, state, ready, close, show };
+}