@adia-ai/a2ui-mcp 0.0.1

package/scripts/eval-fix.mjs

@@ -0,0 +1,446 @@
+#!/usr/bin/env node
+
+/**
+ * eval-fix.mjs — Recursive improvement loop for A2UI generation quality.
+ *
+ * Runs evals, diagnoses failures, traces root causes upstream, and applies fixes.
+ *
+ * The loop:
+ *   1. Run eval suite → collect scores + failures
+ *   2. For each failure, diagnose: pattern issue? template issue? training gap? validator bug?
+ *   3. Generate a fix plan (which file, what change)
+ *   4. Apply fixes (patch pattern JSON, update training manifest, etc.)
+ *   5. Re-run evals to verify the fix worked
+ *   6. Repeat until all pass or max iterations reached
+ *
+ * Diagnosis categories (in priority order):
+ *   ANTI_PATTERN → pattern template has bare Text (no variant), unslotted header children,
+ *                  or buttons without text. Fix: patch the pattern JSON.
+ *   INTENT_MISS  → generated output missing required components. Fix: check if the
+ *                  matched pattern has those components; if not, update the pattern or
+ *                  add the component to the template.
+ *   CARD_MODEL   → Card children don't follow Header/Section/Footer structure.
+ *                  Fix: restructure the pattern template.
+ *   STRUCTURAL   → validation score below threshold. Fix: usually a template syntax
+ *                  issue (missing root, dangling children, duplicate IDs).
+ *   COVERAGE     → uses forbidden component types. Fix: swap components in template.
+ *
+ * Usage:
+ *   node packages/a2ui/mcp/scripts/eval-fix.mjs              # diagnose + report (dry run)
+ *   node packages/a2ui/mcp/scripts/eval-fix.mjs --apply      # diagnose + apply fixes + re-verify
+ *   node packages/a2ui/mcp/scripts/eval-fix.mjs --max-iter=3 # limit fix iterations (default: 3)
+ *   node packages/a2ui/mcp/scripts/eval-fix.mjs --verbose    # show detailed diagnosis
+ */
+
+import '../../../../scripts/load-env.mjs';
+import { readFile, writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = join(__dirname, '..', '..', '..', '..');
+const EVALS_PATH = join(REPO_ROOT, '.claude', 'skills', 'adia-ui-kit', 'evals', 'evals.json');
+const PATTERNS_DIR = join(REPO_ROOT, 'packages', 'web-components', 'catalog', 'patterns');
+
+const args = new Set(process.argv.slice(2));
+const APPLY = args.has('--apply');
+const VERBOSE = args.has('--verbose');
+const TICKETS = args.has('--tickets');
+const MAX_ITER = parseInt([...args].find(a => a.startsWith('--max-iter='))?.split('=')[1] || '3');
+
+// ── Load modules ──
+
+const { generateUI } = await import('../../compose/engine/generator.js');
+const { validateSchema } = await import('../../validator/validator.js');
+const { getPattern, searchPatterns } = await import('../../retrieval/pattern-library.js');
+const { createTicket, formatTicket, formatTicketList } = await import('../../../../.tickets/tickets.js');
+
+// ── Scoring (same as test-evals.mjs) ──
+
+function scoreAntiPatterns(components) {
+  const violations = [];
+  for (const c of components) {
+    if (c.component === 'Text' && !c.variant) {
+      violations.push({ id: c.id, issue: 'text-no-variant', message: `Text "${c.id}" has no variant attribute` });
+    }
+    const parent = components.find(p => p.children?.includes(c.id));
+    if (parent?.component === 'Header' && !c.slot && c.component === 'Text') {
+      violations.push({ id: c.id, issue: 'header-child-no-slot', message: `Text "${c.id}" in Header without slot attribute` });
+    }
+    if (c.component === 'Button' && !c.text && !c.icon) {
+      violations.push({ id: c.id, issue: 'button-no-label', message: `Button "${c.id}" has no text or icon` });
+    }
+    // Text used for clickable actions (should be Button)
+    if (c.component === 'Text' && c.textContent) {
+      const actionWords = /\b(view|contact|learn more|retry|download|sign|log ?in|log ?out|submit|cancel|delete|remove|edit|save|close|open|click|tap|go to|visit)\b/i;
+      if (actionWords.test(c.textContent) && !c.slot) {
+        violations.push({ id: c.id, issue: 'text-as-action', message: `Text "${c.id}" looks like an action ("${c.textContent.slice(0, 30)}") — should be a Button` });
+      }
+    }
+  }
+  return violations;
+}
+
+function scoreIntent(components, evalCase) {
+  const required = evalCase.required_components || [];
+  const present = new Set(components.map(c => c.component));
+  const missing = required.filter(r => !present.has(r));
+  return { required, present: [...present], missing };
+}
+
+function scoreCardModel(components) {
+  const issues = [];
+  const cards = components.filter(c => c.component === 'Card');
+  for (const card of cards) {
+    const childIds = card.children || [];
+    const children = childIds.map(id => components.find(c => c.id === id)).filter(Boolean);
+    const types = children.map(c => c.component);
+    if (!types.includes('Header') && !types.includes('Section')) {
+      issues.push({ cardId: card.id, issue: 'no-header-or-section', children: types });
+    }
+  }
+  return issues;
+}
+
+// ── Diagnosis ──
+
+function diagnose(evalCase, result) {
+  const components = result.messages?.[0]?.components || [];
+  // Find matched pattern by running the same search the generator uses
+  const searchResults = searchPatterns(evalCase.prompt);
+  const matched = searchResults[0]?.name || null;
+  const findings = [];
+
+  // 1. Anti-pattern violations
+  const antiViolations = scoreAntiPatterns(components);
+  if (antiViolations.length > 0) {
+    findings.push({
+      category: 'ANTI_PATTERN',
+      severity: 'high',
+      matched_pattern: matched,
+      violations: antiViolations,
+      fix: matched
+        ? `Patch pattern "${matched}": add variant to Text nodes, add slot to Header children`
+        : 'No pattern matched — anti-patterns come from fallback generation',
+    });
+  }
+
+  // 2. Intent alignment
+  const intent = scoreIntent(components, evalCase);
+  if (intent.missing.length > 0) {
+    findings.push({
+      category: 'INTENT_MISS',
+      severity: 'medium',
+      matched_pattern: matched,
+      missing_components: intent.missing,
+      present_components: intent.present,
+      fix: matched
+        ? `Pattern "${matched}" is missing: ${intent.missing.join(', ')}. Add these components to the pattern template.`
+        : `No pattern matched. Consider creating a pattern for intent: "${evalCase.prompt.slice(0, 60)}"`,
+    });
+  }
+
+  // 3. Card model
+  const cardIssues = scoreCardModel(components);
+  if (cardIssues.length > 0) {
+    findings.push({
+      category: 'CARD_MODEL',
+      severity: 'medium',
+      matched_pattern: matched,
+      issues: cardIssues,
+      fix: matched
+        ? `Pattern "${matched}" has Card nodes without Header/Section children`
+        : 'Card model violation in generated output',
+    });
+  }
+
+  // 4. Structural
+  const validation = validateSchema(result.messages);
+  const failedChecks = (validation.checks || []).filter(c => !c.passed);
+  if (failedChecks.length > 0) {
+    findings.push({
+      category: 'STRUCTURAL',
+      severity: failedChecks.some(c => c.hardFail) ? 'critical' : 'low',
+      matched_pattern: matched,
+      failed_checks: failedChecks.map(c => ({ name: c.name, message: c.message })),
+      fix: matched
+        ? `Pattern "${matched}" fails validation: ${failedChecks.map(c => c.name).join(', ')}`
+        : 'Structural issues in generated output',
+    });
+  }
+
+  return { evalId: evalCase.id, prompt: evalCase.prompt, matched_pattern: matched, findings };
+}
+
+// ── Fix application ──
+
+async function applyFix(diagnosis) {
+  const fixes = [];
+
+  for (const finding of diagnosis.findings) {
+    const patternName = finding.matched_pattern;
+    if (!patternName) continue; // Can't fix if no pattern matched
+
+    // Find the pattern JSON file
+    const pattern = getPattern(patternName);
+    if (!pattern) continue;
+
+    const domain = pattern.domain || 'layout';
+    const filePath = join(PATTERNS_DIR, domain, `${patternName}.json`);
+
+    let patternJson;
+    try {
+      patternJson = JSON.parse(await readFile(filePath, 'utf8'));
+    } catch {
+      console.log(`  ⚠ Cannot read ${filePath} — skipping fix`);
+      continue;
+    }
+
+    let modified = false;
+
+    if (finding.category === 'ANTI_PATTERN') {
+      for (const v of finding.violations) {
+        const node = patternJson.template.find(c => c.id === v.id);
+        if (!node) continue;
+
+        if (v.issue === 'text-no-variant' && node.component === 'Text') {
+          node.variant = node.variant || 'body';
+          modified = true;
+          fixes.push(`  + Added variant="body" to ${node.id} in ${patternName}`);
+        }
+        if (v.issue === 'header-child-no-slot' && node.component === 'Text') {
+          // First text child = heading, second = description
+          const headerNode = patternJson.template.find(c => c.children?.includes(node.id) && c.component === 'Header');
+          if (headerNode) {
+            const childTexts = headerNode.children
+              .map(id => patternJson.template.find(c => c.id === id))
+              .filter(c => c?.component === 'Text');
+            const idx = childTexts.indexOf(node);
+            node.slot = idx === 0 ? 'heading' : 'description';
+            modified = true;
+            fixes.push(`  + Added slot="${node.slot}" to ${node.id} in ${patternName}`);
+          }
+        }
+        if (v.issue === 'button-no-label' && node.component === 'Button') {
+          node.text = node.text || 'Action';
+          modified = true;
+          fixes.push(`  + Added text="Action" to ${node.id} in ${patternName}`);
+        }
+      }
+    }
+
+    if (finding.category === 'INTENT_MISS' && finding.missing_components.length > 0) {
+      const template = patternJson.template;
+      const root = template.find(c => c.id === 'root');
+
+      for (const comp of finding.missing_components) {
+        // Auto-fix: add Footer with Button if pattern is missing both
+        if (comp === 'Footer' && finding.missing_components.includes('Button')) {
+          if (root && !template.some(c => c.component === 'Footer')) {
+            const ftrId = 'ftr';
+            const btnId = 'action-btn';
+            template.push({ id: ftrId, component: 'Footer', children: [btnId] });
+            template.push({ id: btnId, component: 'Button', text: 'Save', variant: 'primary', slot: 'action' });
+            if (root.children && !root.children.includes(ftrId)) {
+              root.children.push(ftrId);
+            }
+            // Also add to components list
+            if (!patternJson.components.includes('Footer')) patternJson.components.push('Footer');
+            if (!patternJson.components.includes('Button')) patternJson.components.push('Button');
+            modified = true;
+            fixes.push(`  + Added Footer with Button to ${patternName}`);
+          }
+          continue; // Skip individual Button fix since Footer handled it
+        }
+
+        // Auto-fix: add Button to Footer if Footer exists but Button doesn't
+        if (comp === 'Button' && !finding.missing_components.includes('Footer')) {
+          const footer = template.find(c => c.component === 'Footer');
+          if (footer) {
+            const btnId = 'save-btn';
+            template.push({ id: btnId, component: 'Button', text: 'Save', variant: 'primary', slot: 'action' });
+            if (footer.children) footer.children.push(btnId);
+            else footer.children = [btnId];
+            if (!patternJson.components.includes('Button')) patternJson.components.push('Button');
+            modified = true;
+            fixes.push(`  + Added Button to existing Footer in ${patternName}`);
+          } else {
+            // No footer — add one
+            const ftrId = 'ftr';
+            const btnId = 'save-btn';
+            template.push({ id: ftrId, component: 'Footer', children: [btnId] });
+            template.push({ id: btnId, component: 'Button', text: 'Save', variant: 'primary', slot: 'action' });
+            if (root?.children) root.children.push(ftrId);
+            if (!patternJson.components.includes('Footer')) patternJson.components.push('Footer');
+            if (!patternJson.components.includes('Button')) patternJson.components.push('Button');
+            modified = true;
+            fixes.push(`  + Added Footer + Button to ${patternName}`);
+          }
+          continue;
+        }
+
+        // Auto-fix: wrap root in Column if Column is missing
+        if (comp === 'Column' && root && root.component !== 'Column') {
+          // If root is Card, check if Section children could be wrapped
+          const section = template.find(c => c.component === 'Section' && root.children?.includes(c.id));
+          if (section && section.children?.length > 0) {
+            // Wrap section children in a Column
+            const colId = 'col-wrap';
+            const originalChildren = [...section.children];
+            template.push({ id: colId, component: 'Column', children: originalChildren, gap: '4' });
+            section.children = [colId];
+            if (!patternJson.components.includes('Column')) patternJson.components.push('Column');
+            modified = true;
+            fixes.push(`  + Wrapped Section children in Column for ${patternName}`);
+          } else {
+            fixes.push(`  ⚠ Pattern "${patternName}" needs ${comp} — manual review required`);
+          }
+          continue;
+        }
+
+        fixes.push(`  ⚠ Pattern "${patternName}" needs ${comp} — manual review required`);
+      }
+    }
+
+    if (modified) {
+      patternJson.version = (patternJson.version || 1) + 1;
+      await writeFile(filePath, JSON.stringify(patternJson, null, 2) + '\n');
+      fixes.push(`  ✓ Wrote ${filePath}`);
+    }
+  }
+
+  return fixes;
+}
+
+// ── Main loop ──
+
+async function runEvalLoop() {
+  const evalsData = JSON.parse(await readFile(EVALS_PATH, 'utf8'));
+  const evalCases = evalsData.evals;
+
+  for (let iter = 0; iter < MAX_ITER; iter++) {
+    console.log(`\n${'═'.repeat(60)}`);
+    console.log(`  Iteration ${iter + 1}/${MAX_ITER}`);
+    console.log('═'.repeat(60));
+
+    // Run all evals
+    const diagnoses = [];
+    let allClean = true;
+
+    for (const evalCase of evalCases) {
+      const result = await generateUI({ intent: evalCase.prompt, mode: evalCase.mode || 'instant' });
+      const diag = diagnose(evalCase, result);
+
+      if (diag.findings.length > 0) {
+        allClean = false;
+        diagnoses.push(diag);
+
+        const validation = validateSchema(result.messages);
+        console.log(`\n  ✗ #${evalCase.id} [${validation.score}] ${evalCase.prompt.slice(0, 55)}...`);
+        if (diag.matched_pattern) console.log(`    Matched: ${diag.matched_pattern}`);
+        for (const f of diag.findings) {
+          console.log(`    ${f.category} (${f.severity}): ${f.fix}`);
+          if (VERBOSE && f.violations) {
+            for (const v of f.violations) console.log(`      - ${v.message}`);
+          }
+          if (VERBOSE && f.missing_components) {
+            console.log(`      Missing: ${f.missing_components.join(', ')}`);
+          }
+        }
+      } else {
+        const validation = validateSchema(result.messages);
+        console.log(`  ✓ #${evalCase.id} [${validation.score}] ${evalCase.prompt.slice(0, 55)}...`);
+      }
+    }
+
+    if (allClean) {
+      console.log('\n  ✓ All evals clean — no issues found.');
+      break;
+    }
+
+    if (!APPLY && !TICKETS) {
+      console.log(`\n  ${diagnoses.length} eval(s) with issues. Run with --apply to fix or --tickets to create tickets.`);
+      break;
+    }
+
+    // Create tickets for all findings (when --tickets flag is set, or for unfixable issues during --apply)
+    if (TICKETS) {
+      console.log('\n── Creating tickets ──');
+      for (const diag of diagnoses) {
+        for (const f of diag.findings) {
+          const ticket = await createTicket({
+            type: f.category === 'INTENT_MISS' ? 'improvement' : 'bug',
+            title: `Eval #${diag.evalId}: ${f.category} in ${f.matched_pattern || 'generated output'}`,
+            source: 'eval-fix',
+            severity: f.severity,
+            category: f.category === 'ANTI_PATTERN' || f.category === 'INTENT_MISS' ? 'pattern'
+              : f.category === 'CARD_MODEL' ? 'pattern'
+              : f.category === 'STRUCTURAL' ? 'validator' : 'generator',
+            target: f.matched_pattern ? `patterns/${getPattern(f.matched_pattern)?.domain || 'layout'}/${f.matched_pattern}.json` : null,
+            description: f.fix,
+            evidence: {
+              evalId: diag.evalId,
+              prompt: diag.prompt.slice(0, 100),
+              matched_pattern: f.matched_pattern,
+              ...(f.violations ? { violations: f.violations.map(v => v.message) } : {}),
+              ...(f.missing_components ? { missing_components: f.missing_components } : {}),
+              ...(f.issues ? { card_issues: f.issues } : {}),
+              ...(f.failed_checks ? { failed_checks: f.failed_checks.map(c => c.name) } : {}),
+            },
+            suggested_fix: f.fix,
+          });
+          console.log(`  📋 ${ticket.id}`);
+          console.log(`     ${ticket.title}`);
+        }
+      }
+      if (!APPLY) break;
+    }
+
+    if (!APPLY) break;
+
+    // Apply fixes
+    console.log('\n── Applying fixes ──');
+    let totalFixes = 0;
+    for (const diag of diagnoses) {
+      const fixes = await applyFix(diag);
+      for (const f of fixes) {
+        console.log(f);
+        totalFixes++;
+      }
+    }
+
+    if (totalFixes === 0) {
+      console.log('  No auto-fixable issues found. Remaining issues need manual review.');
+      break;
+    }
+
+    console.log(`\n  Applied ${totalFixes} fixes. Re-running evals...`);
+
+    // Reload pattern library to pick up changes
+    const { loadCorpus } = await import('../../retrieval/pattern-library.js');
+    // Force reload by resetting the loaded state
+    // (The pattern files were rewritten, but the in-memory Map still has old data)
+    // We need to re-import fresh — but ESM caching prevents that.
+    // Instead, directly re-read the patched files and update the Map.
+    for (const diag of diagnoses) {
+      if (!diag.matched_pattern) continue;
+      const pattern = getPattern(diag.matched_pattern);
+      if (!pattern) continue;
+      const domain = pattern.domain || 'layout';
+      const filePath = join(PATTERNS_DIR, domain, `${diag.matched_pattern}.json`);
+      try {
+        const fresh = JSON.parse(await readFile(filePath, 'utf8'));
+        // Normalize tags
+        if (fresh.tags && !Array.isArray(fresh.tags)) {
+          fresh.tagsMeta = fresh.tags;
+          fresh.tags = fresh.keywords || [];
+        }
+        // Update in-memory
+        const { registerPattern } = await import('../../retrieval/pattern-library.js');
+        registerPattern(fresh, { replace: true });
+      } catch {}
+    }
+  }
+}
+
+runEvalLoop().catch(console.error);

package/scripts/generate.mjs

@@ -0,0 +1,189 @@
+#!/usr/bin/env node
+
+/**
+ * generate.mjs — Generate A2UI components from the command line.
+ *
+ * Quick way to test generation without MCP or browser.
+ *
+ * Usage:
+ *   node packages/a2ui/mcp/scripts/generate.mjs "login form"                    # instant mode
+ *   node packages/a2ui/mcp/scripts/generate.mjs --thinking "settings page"      # thinking mode (LLM)
+ *   node packages/a2ui/mcp/scripts/generate.mjs --stream "dashboard"            # streaming mode
+ *   node packages/a2ui/mcp/scripts/generate.mjs --json "pricing table"          # output raw JSON
+ *   node packages/a2ui/mcp/scripts/generate.mjs --html "user profile"           # output as HTML
+ */
+
+import '../../../../scripts/load-env.mjs';
+
+const argv = process.argv.slice(2);
+const flags = new Set();
+const positional = [];
+
+for (const arg of argv) {
+  if (arg.startsWith('--')) flags.add(arg);
+  else positional.push(arg);
+}
+
+const intent = positional.join(' ');
+if (!intent) {
+  console.error('Usage: node packages/a2ui/mcp/scripts/generate.mjs [--thinking|--stream|--json|--html] "intent"');
+  process.exit(1);
+}
+
+const mode = flags.has('--thinking') ? 'thinking' : flags.has('--pro') ? 'pro' : flags.has('--stream') ? 'stream' : 'instant';
+const JSON_OUT = flags.has('--json');
+const HTML_OUT = flags.has('--html');
+
+const { generateUI, generateUIStream } = await import('../../compose/engine/generator.js');
+
+console.error(`Mode: ${mode} | Intent: "${intent}"`);
+console.error('─'.repeat(50));
+
+if (mode === 'stream') {
+  // Stream mode — show progressive updates
+  let finalResult;
+  for await (const event of generateUIStream({ intent })) {
+    if (event.type === 'status') {
+      console.error(`  [${event.stage}] ${event.message}`);
+    } else if (event.type === 'clarify') {
+      console.error(`  [clarify] ${event.questions.join('; ')}`);
+    } else if (event.type === 'partial') {
+      const count = event.messages?.[0]?.components?.length || 0;
+      console.error(`  [partial] ${count} components so far...`);
+    } else if (event.type === 'complete') {
+      finalResult = event;
+    } else if (event.type === 'error') {
+      console.error(`  [error] ${event.error}`);
+      process.exit(1);
+    }
+  }
+  if (finalResult) printResult(finalResult);
+} else {
+  const start = Date.now();
+  const result = await generateUI({ intent, mode });
+  const elapsed = ((Date.now() - start) / 1000).toFixed(1);
+  console.error(`  Generated in ${elapsed}s`);
+  printResult(result);
+}
+
+function printResult(result) {
+  const comps = result.messages?.[0]?.components || [];
+
+  if (JSON_OUT) {
+    console.log(JSON.stringify(result.messages, null, 2));
+    return;
+  }
+
+  if (HTML_OUT) {
+    console.log(componentsToHTML(comps));
+    return;
+  }
+
+  // Default: summary view
+  console.error(`  Components: ${comps.length}`);
+  console.error(`  Source: ${result.source || (result.messages?.[0]?.components ? 'pattern' : 'fallback')}`);
+  if (result.suggestions?.length) {
+    console.error(`  Suggestions: ${result.suggestions.join('; ')}`);
+  }
+  console.error('');
+  console.log('Component tree:');
+  printTree(comps);
+}
+
+function printTree(comps) {
+  const map = new Map(comps.map(c => [c.id, c]));
+  const roots = comps.filter(c => !comps.some(p => p.children?.includes(c.id)));
+
+  function walk(id, depth = 0) {
+    const c = map.get(id);
+    if (!c) return;
+    const indent = '  '.repeat(depth);
+    const props = [];
+    if (c.variant) props.push(`variant="${c.variant}"`);
+    if (c.textContent) props.push(`"${c.textContent.slice(0, 40)}${c.textContent.length > 40 ? '...' : ''}"`);
+    if (c.slot) props.push(`slot="${c.slot}"`);
+    if (c.text) props.push(`text="${c.text}"`);
+    if (c.label) props.push(`label="${c.label}"`);
+    if (c.icon) props.push(`icon="${c.icon}"`);
+    if (c.name) props.push(`name="${c.name}"`);
+    console.log(`${indent}${c.component} (${c.id})${props.length ? ' ' + props.join(' ') : ''}`);
+    if (c.children) {
+      for (const childId of c.children) walk(childId, depth + 1);
+    }
+  }
+
+  for (const root of roots) walk(root.id);
+}
+
+function componentsToHTML(comps) {
+  const TAG_MAP = {
+    // Layout
+    Card: 'card-ui', Column: 'col-ui', Row: 'row-ui', Grid: 'grid-ui', Stack: 'stack-ui',
+    Header: 'header', Footer: 'footer', Section: 'section',
+    Pane: 'pane-ui', Block: 'block-ui',
+    // Controls
+    Button: 'button-ui', Input: 'input-ui', Select: 'select-ui',
+    CheckBox: 'check-ui', Switch: 'switch-ui', Toggle: 'switch-ui',
+    Slider: 'slider-ui', Radio: 'radio-ui', Range: 'range-ui',
+    TextArea: 'textarea-ui', Upload: 'upload-ui',
+    OtpInput: 'otp-input-ui', ColorPicker: 'color-picker-ui',
+    CalendarPicker: 'calendar-picker-ui',
+    // Display
+    Text: null, Icon: 'icon-ui', Badge: 'badge-ui', Avatar: 'avatar-ui',
+    AvatarGroup: 'avatar-group-ui', Tag: 'tag-ui', Kbd: 'kbd-ui',
+    Image: 'image-ui', Code: 'code-ui', Embed: 'embed-ui',
+    // Feedback
+    Alert: 'alert-ui', Progress: 'progress-ui', Skeleton: 'skeleton-ui', Toast: 'toast-ui',
+    // Data
+    Stat: 'stat-ui', Table: 'table-ui', Chart: 'chart-ui',
+    List: 'list-ui', Pagination: 'pagination-ui',
+    // Navigation
+    Tabs: 'tabs-ui', Tab: 'tab-ui', Nav: 'nav-n',
+    Breadcrumb: 'breadcrumb-ui', SegmentedControl: 'segmented-ui', Segment: 'segment-ui',
+    // Overlay
+    Modal: 'modal-ui', Drawer: 'drawer-ui', Popover: 'popover-ui',
+    Tooltip: 'tooltip-ui', Menu: 'menu-ui', Command: 'command-ui',
+    // Structure
+    Toolbar: 'toolbar-ui', Divider: 'divider-ui', EmptyState: 'empty-state-ui',
+    Accordion: 'accordion-ui', AccordionItem: 'accordion-item-ui',
+    Timeline: 'timeline-ui', TimelineItem: 'timeline-item-ui',
+    Tree: 'tree-ui',
+  };
+  const map = new Map(comps.map(c => [c.id, c]));
+  const roots = comps.filter(c => !comps.some(p => p.children?.includes(c.id)));
+
+  function render(id, depth = 0) {
+    const c = map.get(id);
+    if (!c) return '';
+    const indent = '  '.repeat(depth);
+
+    // Text → native element based on variant
+    if (c.component === 'Text') {
+      const isHeading = c.variant?.match(/^h[1-6]$/);
+      const tag = isHeading ? c.variant : c.variant === 'body' ? 'p' : c.variant === 'caption' ? 'small' : 'span';
+      const attrs = [];
+      // variant is always required on headings; on span/small it provides visual style
+      if (c.variant && c.variant !== 'body') attrs.push(`variant="${c.variant}"`);
+      if (c.slot) attrs.push(`slot="${c.slot}"`);
+      if (c.color) attrs.push(`color="${c.color}"`);
+      const attrStr = attrs.length ? ' ' + attrs.join(' ') : '';
+      return `${indent}<${tag}${attrStr} nomargin>${c.textContent || ''}</${tag}>`;
+    }
+
+    const tag = TAG_MAP[c.component] || c.component.toLowerCase() + '-n';
+    const skip = new Set(['id', 'component', 'children', 'textContent']);
+    const attrs = Object.entries(c)
+      .filter(([k]) => !skip.has(k))
+      .map(([k, v]) => v === true ? k : `${k}="${v}"`)
+      .join(' ');
+    const attrStr = attrs ? ' ' + attrs : '';
+
+    if (!c.children?.length) {
+      return `${indent}<${tag}${attrStr}></${tag}>`;
+    }
+    const children = c.children.map(cid => render(cid, depth + 1)).join('\n');
+    return `${indent}<${tag}${attrStr}>\n${children}\n${indent}</${tag}>`;
+  }
+
+  return roots.map(r => render(r.id)).join('\n');
+}