npm - @codeyam/codeyam-cli - Versions diffs - 0.1.0-staging.e2d4438 → 0.1.0-staging.e3d0ba6 - Mend

@codeyam/codeyam-cli 0.1.0-staging.e2d4438 → 0.1.0-staging.e3d0ba6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (858) hide show

package/codeyam-cli/src/utils/designSystemShowcase.js ADDED Viewed

@@ -0,0 +1,810 @@
+/**
+ * Generates a self-contained HTML page that showcases standard UI components
+ * styled with CSS custom properties extracted from a design system markdown file.
+ */
+import fs from 'fs';
+import path from 'path';
+/**
+ * Extract all CSS code blocks from the design system markdown,
+ * preserving their selectors (or using :root as default).
+ */
+function extractCssFromMarkdown(markdown) {
+    const blocks = [];
+    const regex = /```css\n([\s\S]*?)```/g;
+    let match;
+    while ((match = regex.exec(markdown)) !== null) {
+        const raw = match[1].trim();
+        // Check if the block has a selector wrapper like [data-theme='light'] { ... }
+        const selectorMatch = raw.match(/^([^\n{]+?)\s*\{([\s\S]*)\}\s*$/);
+        if (selectorMatch) {
+            blocks.push({
+                selector: selectorMatch[1].trim(),
+                content: selectorMatch[2].trim(),
+            });
+        }
+        else {
+            // No selector wrapper — treat as :root declarations
+            // Only include lines that look like CSS variable declarations or comments
+            const cssLines = raw
+                .split('\n')
+                .filter((line) => line.trim().startsWith('--') ||
+                line.trim().startsWith('/*') ||
+                line.trim().startsWith('*'))
+                .join('\n');
+            if (cssLines.trim()) {
+                blocks.push({ selector: ':root', content: cssLines });
+            }
+        }
+    }
+    return blocks;
+}
+/**
+ * Extract the font stack from the markdown Typography section.
+ */
+function extractFontInfo(markdown) {
+    const fontMatch = markdown.match(/\*\*Font stack:\*\*\s*`([^`]+)`(?:[^`]*`([^`]+)`)?(?:[^`]*`([^`]+)`)?/);
+    if (!fontMatch)
+        return { fontFamilies: [], googleFontsUrl: null };
+    const allFamilies = [];
+    for (let i = 1; i <= 3; i++) {
+        if (fontMatch[i]) {
+            const name = fontMatch[i].split(',')[0].trim().replace(/'/g, '');
+            if (name && !isSystemFont(name)) {
+                allFamilies.push(name);
+            }
+        }
+    }
+    // Build Google Fonts URL for non-system fonts
+    const googleFonts = allFamilies.filter((f) => !isSystemFont(f));
+    const googleFontsUrl = googleFonts.length > 0
+        ? `https://fonts.googleapis.com/css2?${googleFonts.map((f) => `family=${f.replace(/ /g, '+')}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400`).join('&')}&display=swap`
+        : null;
+    return { fontFamilies: allFamilies, googleFontsUrl };
+}
+function isSystemFont(name) {
+    const systemFonts = [
+        'sans-serif',
+        'serif',
+        'monospace',
+        'system-ui',
+        '-apple-system',
+        'Georgia',
+        'Courier',
+        'Courier New',
+        'Arial',
+        'Helvetica',
+    ];
+    return systemFonts.includes(name);
+}
+/**
+ * Check if the design system has dark mode support.
+ */
+function hasDarkMode(markdown) {
+    return (markdown.includes("[data-theme='dark']") ||
+        markdown.includes('[data-theme="dark"]'));
+}
+/**
+ * Extract the design system name from the markdown.
+ */
+function extractName(markdown) {
+    const match = markdown.match(/^# (.+)$/m);
+    return match ? match[1].trim() : 'Design System';
+}
+// ── HTML Generation ────────────────────────────────────────────────────
+/**
+ * Build the complete showcase HTML page from a design system markdown file.
+ */
+export function buildShowcaseHtml(markdown) {
+    const cssBlocks = extractCssFromMarkdown(markdown);
+    const { googleFontsUrl } = extractFontInfo(markdown);
+    const supportsDarkMode = hasDarkMode(markdown);
+    const name = extractName(markdown);
+    // Build CSS variable declarations
+    const cssVars = cssBlocks
+        .map((block) => `${block.selector} {\n  ${block.content}\n}`)
+        .join('\n\n');
+    return `<!DOCTYPE html>
+<html data-theme="light" lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${name} — Component Showcase</title>
+  ${googleFontsUrl ? `<link rel="stylesheet" href="${googleFontsUrl}">` : ''}
+  <style>
+    /* Design System Tokens */
+    ${cssVars}
+    /* Showcase Base Styles */
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      background: var(--bg-base, #f7f8fa);
+      color: var(--text-primary, #1a1b25);
+      font-family: var(--font-body, system-ui, -apple-system, sans-serif);
+      font-size: 14px;
+      line-height: 1.6;
+      padding: 32px;
+      transition: background 0.2s, color 0.2s;
+    }
+    .showcase-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 40px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--border, #e8e9ed);
+    }
+    .showcase-title {
+      font-size: 24px;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+    }
+    .theme-toggle {
+      display: flex;
+      gap: 4px;
+      background: var(--bg-muted, #f2f3f7);
+      border-radius: 8px;
+      padding: 3px;
+      border: 1px solid var(--border, #e8e9ed);
+    }
+    .theme-toggle button {
+      padding: 6px 14px;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      color: var(--text-secondary, #6b7280);
+      transition: all 0.15s ease;
+    }
+    .theme-toggle button.active {
+      background: var(--bg-surface, #ffffff);
+      color: var(--text-primary, #1a1b25);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+    }
+    .showcase-section {
+      margin-bottom: 48px;
+    }
+    .section-label {
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: var(--text-muted, var(--text-tertiary, #9ca3af));
+      margin-bottom: 16px;
+    }
+    /* Color Palette */
+    .color-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+      gap: 12px;
+    }
+    .color-swatch {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .color-swatch .swatch {
+      width: 100%;
+      height: 48px;
+      border-radius: var(--radius-md, 8px);
+      border: 1px solid var(--border, #e8e9ed);
+    }
+    .color-swatch .swatch-name {
+      font-size: 10px;
+      font-family: monospace;
+      color: var(--text-secondary, #6b7280);
+      word-break: break-all;
+    }
+    .color-swatch .swatch-value {
+      font-size: 10px;
+      font-family: monospace;
+      color: var(--text-muted, var(--text-tertiary, #9ca3af));
+    }
+    /* Typography */
+    .type-scale {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .type-sample {
+      padding: 12px 0;
+      border-bottom: 1px solid var(--border, #e8e9ed);
+    }
+    .type-sample .sample-text {
+      margin-bottom: 4px;
+    }
+    .type-sample .sample-meta {
+      font-size: 11px;
+      font-family: monospace;
+      color: var(--text-muted, var(--text-tertiary, #9ca3af));
+    }
+    /* Cards */
+    .card-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      gap: 16px;
+    }
+    .showcase-card {
+      background: var(--bg-surface, #ffffff);
+      border: 1px solid var(--border, #e8e9ed);
+      border-radius: var(--radius-lg, 12px);
+      padding: 20px 24px;
+      box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
+    }
+    .showcase-card h3 {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .showcase-card p {
+      font-size: 14px;
+      color: var(--text-secondary, #6b7280);
+      line-height: 1.5;
+    }
+    /* Value Cards */
+    .value-card {
+      background: var(--bg-surface, #ffffff);
+      border: 1px solid var(--border, #e8e9ed);
+      border-radius: var(--radius-lg, 12px);
+      padding: 20px 24px;
+      box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
+    }
+    .value-card .value-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-secondary, #6b7280);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      margin-bottom: 8px;
+    }
+    .value-card .value-number {
+      font-size: 36px;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      line-height: 1;
+      margin-bottom: 8px;
+    }
+    .value-card .value-trend {
+      font-size: 13px;
+      font-weight: 500;
+    }
+    .value-card .value-trend.positive {
+      color: var(--green-a, var(--sage, var(--teal, var(--accent, #34d399))));
+    }
+    .value-card .value-trend.negative {
+      color: var(--red, var(--burgundy, var(--danger-text, #f87171)));
+    }
+    /* Buttons */
+    .button-row {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .btn {
+      padding: 8px 16px;
+      border-radius: var(--radius-md, 8px);
+      font-weight: 500;
+      font-size: 14px;
+      border: none;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .btn-primary {
+      background: var(--text-primary, #1a1b25);
+      color: var(--bg-base, #f7f8fa);
+    }
+    .btn-secondary {
+      background: var(--bg-muted, #f2f3f7);
+      color: var(--text-primary, #1a1b25);
+    }
+    .btn-outline {
+      background: transparent;
+      color: var(--text-primary, #1a1b25);
+      border: 1px solid var(--border-strong, var(--border, #d1d3db));
+    }
+    .btn-ghost {
+      background: transparent;
+      color: var(--text-secondary, #6b7280);
+    }
+    .btn-sm { padding: 6px 12px; font-size: 12px; }
+    .btn-lg { padding: 12px 24px; font-size: 16px; }
+    /* Badges */
+    .badge-row {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .badge {
+      padding: 3px 10px;
+      border-radius: var(--radius-sm, 6px);
+      font-size: 12px;
+      font-weight: 500;
+    }
+    .badge-default {
+      background: var(--bg-muted, #f2f3f7);
+      color: var(--text-secondary, #6b7280);
+    }
+    .badge-success {
+      background: var(--success-bg, var(--green-b, #d1fae5));
+      color: var(--success-text, #065f46);
+    }
+    .badge-danger {
+      background: var(--danger-bg, #fee2e2);
+      color: var(--danger-text, #991b1b);
+    }
+    .badge-warning {
+      background: var(--warning-bg, #fef9c3);
+      color: var(--warning-text, #854d0e);
+    }
+    .badge-pill {
+      border-radius: 999px;
+    }
+    /* Inputs */
+    .input-group {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      max-width: 400px;
+    }
+    .input-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .input-field label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--text-secondary, #6b7280);
+    }
+    .input-field input,
+    .input-field textarea {
+      padding: 10px 14px;
+      border: 1px solid var(--border, #e8e9ed);
+      border-radius: var(--radius-md, 8px);
+      font-size: 14px;
+      background: var(--bg-surface, #ffffff);
+      color: var(--text-primary, #1a1b25);
+      outline: none;
+      transition: border-color 0.15s ease;
+    }
+    .input-field input:focus,
+    .input-field textarea:focus {
+      border-color: var(--border-strong, var(--border, #d1d3db));
+    }
+    .input-field input::placeholder {
+      color: var(--text-muted, var(--text-tertiary, #9ca3af));
+    }
+    /* Table */
+    .showcase-table {
+      width: 100%;
+      border-collapse: collapse;
+      background: var(--bg-surface, #ffffff);
+      border: 1px solid var(--border, #e8e9ed);
+      border-radius: var(--radius-lg, 12px);
+      overflow: hidden;
+    }
+    .showcase-table th {
+      text-align: left;
+      padding: 12px 16px;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--text-secondary, #6b7280);
+      background: var(--bg-muted, #f2f3f7);
+      border-bottom: 1px solid var(--border, #e8e9ed);
+    }
+    .showcase-table td {
+      padding: 12px 16px;
+      font-size: 14px;
+      border-bottom: 1px solid var(--border, #e8e9ed);
+      color: var(--text-secondary, #6b7280);
+    }
+    .showcase-table tr:last-child td {
+      border-bottom: none;
+    }
+    .showcase-table td:first-child {
+      color: var(--text-primary, #1a1b25);
+      font-weight: 500;
+    }
+    /* Header / Nav Bar */
+    .showcase-navbar {
+      background: var(--bg-surface, #ffffff);
+      border: 1px solid var(--border, #e8e9ed);
+      border-radius: var(--radius-lg, 12px);
+      padding: 12px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
+    }
+    .navbar-brand {
+      font-size: 16px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .navbar-brand .brand-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--green-a, var(--accent, var(--pink, var(--burgundy, #34d399))));
+    }
+    .navbar-links {
+      display: flex;
+      gap: 4px;
+    }
+    .navbar-links a {
+      padding: 6px 14px;
+      border-radius: var(--radius-md, 8px);
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--text-secondary, #6b7280);
+      text-decoration: none;
+      transition: all 0.15s ease;
+    }
+    .navbar-links a.active {
+      background: var(--bg-active, var(--bg-muted, #eef2ff));
+      color: var(--text-primary, #1a1b25);
+    }
+    /* Progress Bar */
+    .progress-track {
+      height: 8px;
+      background: var(--bg-muted, #f2f3f7);
+      border-radius: 999px;
+      overflow: hidden;
+      max-width: 300px;
+    }
+    .progress-fill {
+      height: 100%;
+      border-radius: 999px;
+      background: var(--green-a, var(--accent, var(--pink, #34d399)));
+      transition: width 0.6s ease;
+    }
+  </style>
+</head>
+<body>
+  <div class="showcase-header">
+    <div class="showcase-title">${name}</div>
+    ${supportsDarkMode
+        ? `<div class="theme-toggle">
+      <button class="active" onclick="setTheme('light')">Light</button>
+      <button onclick="setTheme('dark')">Dark</button>
+    </div>`
+        : ''}
+  </div>
+  <!-- Navigation Bar -->
+  <div class="showcase-section">
+    <div class="section-label">Navigation</div>
+    <div class="showcase-navbar">
+      <div class="navbar-brand">
+        <span class="brand-dot"></span>
+        Acme App
+      </div>
+      <div class="navbar-links">
+        <a href="#" class="active">Dashboard</a>
+        <a href="#">Projects</a>
+        <a href="#">Settings</a>
+      </div>
+    </div>
+  </div>
+  <!-- Value Cards -->
+  <div class="showcase-section">
+    <div class="section-label">Value Cards</div>
+    <div class="card-grid">
+      <div class="value-card">
+        <div class="value-label">Total Revenue</div>
+        <div class="value-number">$48,290</div>
+        <div class="value-trend positive">&#8599; +12.5% from last month</div>
+      </div>
+      <div class="value-card">
+        <div class="value-label">Active Users</div>
+        <div class="value-number">2,847</div>
+        <div class="value-trend positive">&#8599; +8.2% from last week</div>
+      </div>
+      <div class="value-card">
+        <div class="value-label">Bounce Rate</div>
+        <div class="value-number">24.3%</div>
+        <div class="value-trend negative">&#8600; -3.1% from yesterday</div>
+      </div>
+    </div>
+  </div>
+  <!-- Cards -->
+  <div class="showcase-section">
+    <div class="section-label">Cards</div>
+    <div class="card-grid">
+      <div class="showcase-card">
+        <h3>Project Alpha</h3>
+        <p>A dashboard for monitoring real-time analytics and performance metrics across distributed systems.</p>
+      </div>
+      <div class="showcase-card">
+        <h3>Design Tokens</h3>
+        <p>Centralized design token management with automatic code generation for multiple platforms.</p>
+      </div>
+      <div class="showcase-card">
+        <h3>API Gateway</h3>
+        <p>Unified API gateway with rate limiting, authentication, and request transformation.</p>
+      </div>
+    </div>
+  </div>
+  <!-- Buttons -->
+  <div class="showcase-section">
+    <div class="section-label">Buttons</div>
+    <div class="button-row" style="margin-bottom: 12px;">
+      <button class="btn btn-primary">Primary</button>
+      <button class="btn btn-secondary">Secondary</button>
+      <button class="btn btn-outline">Outline</button>
+      <button class="btn btn-ghost">Ghost</button>
+    </div>
+    <div class="button-row">
+      <button class="btn btn-primary btn-sm">Small</button>
+      <button class="btn btn-primary">Medium</button>
+      <button class="btn btn-primary btn-lg">Large</button>
+    </div>
+  </div>
+  <!-- Badges -->
+  <div class="showcase-section">
+    <div class="section-label">Badges</div>
+    <div class="badge-row" style="margin-bottom: 12px;">
+      <span class="badge badge-default">Default</span>
+      <span class="badge badge-success">Success</span>
+      <span class="badge badge-danger">Error</span>
+      <span class="badge badge-warning">Warning</span>
+    </div>
+    <div class="badge-row">
+      <span class="badge badge-default badge-pill">Default</span>
+      <span class="badge badge-success badge-pill">Active</span>
+      <span class="badge badge-danger badge-pill">Critical</span>
+      <span class="badge badge-warning badge-pill">Pending</span>
+    </div>
+  </div>
+  <!-- Form Inputs -->
+  <div class="showcase-section">
+    <div class="section-label">Form Inputs</div>
+    <div class="input-group">
+      <div class="input-field">
+        <label>Project Name</label>
+        <input type="text" placeholder="Enter project name..." value="Acme Dashboard">
+      </div>
+      <div class="input-field">
+        <label>Description</label>
+        <textarea rows="3" placeholder="Describe your project...">A modern analytics dashboard for tracking key metrics and user engagement.</textarea>
+      </div>
+    </div>
+  </div>
+  <!-- Table -->
+  <div class="showcase-section">
+    <div class="section-label">Data Table</div>
+    <table class="showcase-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Role</th>
+          <th>Last Active</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Alice Chen</td>
+          <td><span class="badge badge-success">Active</span></td>
+          <td>Engineer</td>
+          <td>2 min ago</td>
+        </tr>
+        <tr>
+          <td>Bob Martinez</td>
+          <td><span class="badge badge-warning">Away</span></td>
+          <td>Designer</td>
+          <td>1 hour ago</td>
+        </tr>
+        <tr>
+          <td>Carol Davis</td>
+          <td><span class="badge badge-default">Offline</span></td>
+          <td>Product</td>
+          <td>Yesterday</td>
+        </tr>
+        <tr>
+          <td>Dave Kim</td>
+          <td><span class="badge badge-success">Active</span></td>
+          <td>Engineer</td>
+          <td>Just now</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <!-- Typography Scale -->
+  <div class="showcase-section">
+    <div class="section-label">Typography</div>
+    <div class="type-scale">
+      <div class="type-sample">
+        <div class="sample-text" style="font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;">Display Heading</div>
+        <div class="sample-meta">Display — 36px / 600</div>
+      </div>
+      <div class="type-sample">
+        <div class="sample-text" style="font-size: 24px; font-weight: 600;">Section Heading</div>
+        <div class="sample-meta">2XL — 24px / 600</div>
+      </div>
+      <div class="type-sample">
+        <div class="sample-text" style="font-size: 18px; font-weight: 600;">Card Title</div>
+        <div class="sample-meta">LG — 18px / 600</div>
+      </div>
+      <div class="type-sample">
+        <div class="sample-text" style="font-size: 14px; font-weight: 400;">Body text for paragraphs and general content. This demonstrates the default reading experience with adequate line height.</div>
+        <div class="sample-meta">SM — 14px / 400</div>
+      </div>
+      <div class="type-sample">
+        <div class="sample-text" style="font-size: 12px; font-weight: 400; color: var(--text-secondary, #6b7280);">Caption text, timestamps, and secondary information</div>
+        <div class="sample-meta">XS — 12px / 400</div>
+      </div>
+    </div>
+  </div>
+  <!-- Progress -->
+  <div class="showcase-section">
+    <div class="section-label">Progress</div>
+    <div style="display: flex; flex-direction: column; gap: 12px;">
+      <div>
+        <div style="font-size: 13px; margin-bottom: 6px; color: var(--text-secondary, #6b7280);">Complete — 100%</div>
+        <div class="progress-track"><div class="progress-fill" style="width: 100%"></div></div>
+      </div>
+      <div>
+        <div style="font-size: 13px; margin-bottom: 6px; color: var(--text-secondary, #6b7280);">In Progress — 65%</div>
+        <div class="progress-track"><div class="progress-fill" style="width: 65%"></div></div>
+      </div>
+      <div>
+        <div style="font-size: 13px; margin-bottom: 6px; color: var(--text-secondary, #6b7280);">Starting — 15%</div>
+        <div class="progress-track"><div class="progress-fill" style="width: 15%"></div></div>
+      </div>
+    </div>
+  </div>
+  <!-- Color Palette -->
+  <div class="showcase-section">
+    <div class="section-label">Color Palette</div>
+    <div class="color-grid" id="colorPalette"></div>
+  </div>
+  <script>
+    // Theme toggle
+    function setTheme(theme) {
+      document.documentElement.setAttribute('data-theme', theme);
+      document.querySelectorAll('.theme-toggle button').forEach(btn => {
+        btn.classList.toggle('active', btn.textContent.trim().toLowerCase() === theme);
+      });
+      // Re-render palette with resolved colors
+      renderColorPalette();
+    }
+    // Render color palette by reading computed CSS variable values
+    function renderColorPalette() {
+      const grid = document.getElementById('colorPalette');
+      if (!grid) return;
+      grid.innerHTML = '';
+      const style = getComputedStyle(document.documentElement);
+      const vars = [
+        'bg-base', 'bg-surface', 'bg-muted', 'bg-overlay', 'bg-active', 'bg-inverse',
+        'text-primary', 'text-secondary', 'text-muted', 'text-tertiary', 'text-disabled', 'text-faint',
+        'border', 'border-strong', 'border-light', 'border-dashed',
+      ];
+      // Also grab accent and palette colors
+      const accentVars = [
+        'green-a', 'green-b', 'red', 'purple-a', 'purple-b', 'blue-a', 'blue-b', 'yellow',
+        'pink', 'pink-light', 'teal', 'teal-light', 'teal-dark', 'orange',
+        'burgundy', 'burgundy-lt', 'sage', 'gold',
+        'accent', 'accent-soft', 'accent-dark',
+        'palette-1', 'palette-2', 'palette-3', 'palette-4', 'palette-5', 'palette-6',
+      ];
+      const allVars = [...vars, ...accentVars];
+      for (const v of allVars) {
+        const value = style.getPropertyValue('--' + v).trim();
+        if (!value || value === 'none') continue;
+        // Skip non-color values (shadows, etc.)
+        if (value.includes('px') && !value.startsWith('#') && !value.startsWith('rgb')) continue;
+        const swatch = document.createElement('div');
+        swatch.className = 'color-swatch';
+        swatch.innerHTML =
+          '<div class="swatch" style="background:' + value + '"></div>' +
+          '<div class="swatch-name">--' + v + '</div>' +
+          '<div class="swatch-value">' + value + '</div>';
+        grid.appendChild(swatch);
+      }
+    }
+    // Initial render
+    renderColorPalette();
+  </script>
+</body>
+</html>`;
+}
+/**
+ * Read the design system file and generate the showcase HTML.
+ * Returns null if the design system file doesn't exist.
+ */
+export function generateShowcase(projectRoot) {
+    const dsPath = path.join(projectRoot, '.codeyam', 'design-system.md');
+    if (!fs.existsSync(dsPath))
+        return null;
+    const markdown = fs.readFileSync(dsPath, 'utf8');
+    return buildShowcaseHtml(markdown);
+}
+//# sourceMappingURL=designSystemShowcase.js.map