@fragments-sdk/cli 0.5.2 → 0.7.0

package/dist/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { createRequire } from 'module'; const require = createRequire(import.meta.url);
+import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
 import {
   buildFragmentsDir,
   buildSegments,
@@ -9,10 +9,10 @@ import {
   validateAll,
   validateCoverage,
   validateSchema
-} from "./chunk-U4GQ2JTD.js";
+} from "./chunk-7OPWMLOE.js";
 import {
   scan
-} from "./chunk-XNWDI6UT.js";
+} from "./chunk-XHUDJNN3.js";
 import {
   FigmaClient,
   StorageManager,
@@ -28,22 +28,22 @@ import {
   renderAllComponentVariants,
   scanCodebase,
   shutdownSharedPool
-} from "./chunk-IOJE35DZ.js";
+} from "./chunk-NWQ4CJOQ.js";
 import {
   discoverSegmentFiles,
   loadConfig,
   loadSegmentFile
-} from "./chunk-2H2JAA3U.js";
+} from "./chunk-CVXKXVOY.js";
 import {
   generateContext
-} from "./chunk-V7YLRR4C.js";
+} from "./chunk-TJ34N7C7.js";
 import {
   BRAND
-} from "./chunk-ICAIQ57V.js";
+} from "./chunk-6JBGU74P.js";
 
 // src/bin.ts
 import { Command } from "commander";
-import pc20 from "picocolors";
+import pc21 from "picocolors";
 import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
 import { dirname as dirname4, join as join10 } from "path";
@@ -145,6 +145,13 @@ ${BRAND.name} Build
       }
       console.log();
     }
+    if (result.warnings.length > 0) {
+      console.log(pc2.yellow("Build warnings:\n"));
+      for (const warning of result.warnings) {
+        console.log(`  ${pc2.yellow("\u26A0")} ${warning.file}: ${warning.warning}`);
+      }
+      console.log();
+    }
     segmentCount = result.segmentCount;
     outputPath = result.outputPath;
     console.log(pc2.green(`\u2713 Built ${result.segmentCount} fragment(s)`));
@@ -162,6 +169,13 @@ ${BRAND.name} Build
       }
       console.log();
     }
+    if (fragmentsResult.warnings.length > 0) {
+      console.log(pc2.yellow("Registry warnings:\n"));
+      for (const warning of fragmentsResult.warnings) {
+        console.log(`  ${pc2.yellow("\u26A0")} ${warning.file}: ${warning.warning}`);
+      }
+      console.log();
+    }
     componentCount = fragmentsResult.componentCount;
     registryPath = fragmentsResult.registryPath;
     contextPath = fragmentsResult.contextPath;
@@ -1614,19 +1628,19 @@ async function discoverStoryFiles(projectRoot, patterns) {
 
 // src/setup.ts
 async function isSegmentsJsonStale(configDir, outFile) {
-  const fs = await import("fs/promises");
+  const fs2 = await import("fs/promises");
   const path = await import("path");
   const fg4 = await import("fast-glob");
   const segmentsJsonPath = path.join(configDir, outFile);
   try {
-    const segmentsJsonStat = await fs.stat(segmentsJsonPath);
+    const segmentsJsonStat = await fs2.stat(segmentsJsonPath);
     const segmentFiles = await fg4.default(`**/*${BRAND.fileExtension}`, {
       cwd: configDir,
       ignore: ["**/node_modules/**"],
       absolute: true
     });
     for (const file of segmentFiles) {
-      const stat3 = await fs.stat(file);
+      const stat3 = await fs2.stat(file);
       if (stat3.mtimeMs > segmentsJsonStat.mtimeMs) {
         return { stale: true, missing: false };
       }
@@ -1637,11 +1651,11 @@ async function isSegmentsJsonStale(configDir, outFile) {
   }
 }
 async function loadSegmentInfo(segmentFiles) {
-  const fs = await import("fs/promises");
+  const fs2 = await import("fs/promises");
   const segments = [];
   for (const file of segmentFiles) {
     try {
-      const content = await fs.readFile(file.absolutePath, "utf-8");
+      const content = await fs2.readFile(file.absolutePath, "utf-8");
       const nameMatch = content.match(/name:\s*['"]([^'"]+)['"]/);
       const hasFigma = /meta:\s*\{[^}]*figma:\s*['"]https?:/.test(content);
       if (nameMatch) {
@@ -1657,7 +1671,7 @@ async function loadSegmentInfo(segmentFiles) {
   return segments;
 }
 async function runSetup(options = {}) {
-  const fs = await import("fs/promises");
+  const fs2 = await import("fs/promises");
   const path = await import("path");
   const result = {
     segmentFilesCreated: 0,
@@ -1685,8 +1699,8 @@ async function runSetup(options = {}) {
             try {
               const parsed = await parseStoryFile(storyFile);
               const segmentResult = convertToSegment(parsed);
-              await fs.mkdir(path.dirname(segmentResult.outputFile), { recursive: true });
-              await fs.writeFile(segmentResult.outputFile, segmentResult.code);
+              await fs2.mkdir(path.dirname(segmentResult.outputFile), { recursive: true });
+              await fs2.writeFile(segmentResult.outputFile, segmentResult.code);
               converted++;
             } catch {
             }
@@ -1771,7 +1785,7 @@ ${BRAND.name} Dev Server
       }
     }
   }
-  const { createDevServer } = await import("./viewer-YDGFDTK5.js");
+  const { createDevServer } = await import("./viewer-SUFOISZM.js");
   console.log(pc7.dim("\nStarting dev server..."));
   const parsedPort = typeof port === "string" ? parseInt(port, 10) : port;
   try {
@@ -2402,13 +2416,636 @@ ${BRAND.name} Design System Audit
 }
 
 // src/commands/a11y.ts
+import fs from "fs";
 import pc12 from "picocolors";
+
+// src/commands/a11y-report.ts
+function generateA11yReport(summary) {
+  const score = summary.score ?? calculateA11yScore(summary);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${BRAND.name} Accessibility Report</title>
+  <style>
+    ${getStyles()}
+  </style>
+</head>
+<body>
+  <div class="container">
+    ${renderHeader(score)}
+    ${renderSummaryCards(summary, score)}
+    ${renderComponentGrid(summary.components)}
+    ${renderFooter()}
+  </div>
+  <script>
+    ${getScripts()}
+  </script>
+</body>
+</html>`;
+}
+function getStyles() {
+  return `
+    :root {
+      --bg: #0a0a0a;
+      --bg-card: #141414;
+      --bg-hover: #1a1a1a;
+      --border: #262626;
+      --text: #f2f2f2;
+      --text-secondary: #a1a1aa;
+      --text-muted: #71717a;
+      --accent: #10b981;
+      --accent-light: #34d399;
+      --danger: #ef4444;
+      --warning: #eab308;
+      --success: #22c55e;
+      --radius: 12px;
+    }
+
+    @media (prefers-color-scheme: light) {
+      :root:not(.dark) {
+        --bg: #f8f8f8;
+        --bg-card: #ffffff;
+        --bg-hover: #f0f0f0;
+        --border: #e0e0e0;
+        --text: #171717;
+        --text-secondary: #525252;
+        --text-muted: #737373;
+      }
+    }
+
+    .dark {
+      --bg: #0a0a0a;
+      --bg-card: #141414;
+      --bg-hover: #1a1a1a;
+      --border: #262626;
+      --text: #f2f2f2;
+      --text-secondary: #a1a1aa;
+      --text-muted: #71717a;
+    }
+
+    .light {
+      --bg: #f8f8f8;
+      --bg-card: #ffffff;
+      --bg-hover: #f0f0f0;
+      --border: #e0e0e0;
+      --text: #171717;
+      --text-secondary: #525252;
+      --text-muted: #737373;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 48px 24px;
+    }
+
+    /* Header */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 48px;
+      padding-bottom: 32px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .header-left h1 {
+      font-size: 32px;
+      font-weight: 700;
+      margin-bottom: 8px;
+      background: linear-gradient(135deg, var(--text), var(--accent));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .header-left p {
+      color: var(--text-secondary);
+      font-size: 14px;
+    }
+
+    .header-right {
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+    }
+
+    .theme-toggle {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      padding: 8px 12px;
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .theme-toggle:hover {
+      border-color: var(--accent);
+      color: var(--text);
+    }
+
+    .grade-badge {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 24px 32px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+    }
+
+    .grade-score-large {
+      font-size: 56px;
+      font-weight: 800;
+      line-height: 1;
+    }
+
+    .grade-label {
+      font-size: 14px;
+      color: var(--text-secondary);
+      margin-top: 8px;
+    }
+
+    /* Summary Cards */
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+      margin-bottom: 48px;
+    }
+
+    .summary-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 24px;
+    }
+
+    .summary-card-label {
+      font-size: 13px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 8px;
+    }
+
+    .summary-card-value {
+      font-size: 36px;
+      font-weight: 700;
+    }
+
+    .summary-card-sub {
+      font-size: 13px;
+      color: var(--text-secondary);
+      margin-top: 4px;
+    }
+
+    /* Section */
+    .section {
+      margin-bottom: 48px;
+    }
+
+    .section-title {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 24px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .section-title::before {
+      content: '';
+      width: 4px;
+      height: 24px;
+      background: var(--accent);
+      border-radius: 2px;
+    }
+
+    /* Component Grid */
+    .component-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+      gap: 16px;
+    }
+
+    .component-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 20px;
+      transition: border-color 0.2s;
+    }
+
+    .component-card:hover {
+      border-color: var(--accent);
+    }
+
+    .component-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .component-name {
+      font-weight: 600;
+      font-size: 16px;
+    }
+
+    .status-badge {
+      font-size: 12px;
+      font-weight: 700;
+      padding: 3px 10px;
+      border-radius: 6px;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+
+    .status-pass { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
+    .status-warn { background: rgba(234, 179, 8, 0.15); color: #eab308; }
+    .status-fail { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
+
+    .component-stats {
+      display: flex;
+      gap: 16px;
+      font-size: 13px;
+      color: var(--text-secondary);
+      margin-bottom: 8px;
+    }
+
+    .severity-bar {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 12px;
+    }
+
+    .severity-chip {
+      font-size: 12px;
+      padding: 3px 10px;
+      border-radius: 6px;
+    }
+
+    .severity-critical { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
+    .severity-serious  { background: rgba(239, 68, 68, 0.10); color: #f87171; }
+    .severity-moderate  { background: rgba(234, 179, 8, 0.15); color: #eab308; }
+    .severity-minor     { background: rgba(113, 113, 122, 0.15); color: var(--text-muted); }
+
+    /* Expandable violation details */
+    .violation-details {
+      margin-top: 8px;
+    }
+
+    .violation-details summary {
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text-secondary);
+      padding: 4px 0;
+      user-select: none;
+    }
+
+    .violation-details summary:hover {
+      color: var(--text);
+    }
+
+    .violation-details[open] summary {
+      margin-bottom: 8px;
+    }
+
+    .violation-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .violation-item {
+      background: var(--bg);
+      border-radius: 8px;
+      padding: 12px;
+      font-size: 13px;
+    }
+
+    .violation-item-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+
+    .violation-rule {
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    .violation-impact {
+      font-size: 11px;
+      font-weight: 600;
+      padding: 1px 6px;
+      border-radius: 4px;
+      text-transform: uppercase;
+    }
+
+    .violation-description {
+      color: var(--text-secondary);
+      line-height: 1.5;
+    }
+
+    .violation-help {
+      color: var(--accent);
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    /* Footer */
+    .footer {
+      margin-top: 64px;
+      padding-top: 32px;
+      border-top: 1px solid var(--border);
+      text-align: center;
+      color: var(--text-muted);
+      font-size: 13px;
+    }
+
+    .footer a {
+      color: var(--accent);
+      text-decoration: none;
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      .header {
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .header-right {
+        align-self: flex-start;
+      }
+
+      .component-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  `;
+}
+function getScoreColor(score) {
+  if (score >= 90) return "#22c55e";
+  if (score >= 70) return "#eab308";
+  return "#ef4444";
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function renderHeader(score) {
+  const color = getScoreColor(score.score);
+  const now = /* @__PURE__ */ new Date();
+  const timestamp = now.toLocaleDateString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  return `
+    <header class="header">
+      <div class="header-left">
+        <h1>${BRAND.name} Accessibility Report</h1>
+        <p>Generated ${escapeHtml(timestamp)}</p>
+      </div>
+      <div class="header-right">
+        <button class="theme-toggle" id="theme-toggle" aria-label="Toggle light/dark theme">Toggle theme</button>
+        <div class="grade-badge">
+          <div class="grade-score-large" style="color: ${color}">${score.score}</div>
+          <div class="grade-label">/ 100</div>
+        </div>
+      </div>
+    </header>
+  `;
+}
+function renderSummaryCards(summary, score) {
+  return `
+    <div class="summary-grid">
+      <div class="summary-card">
+        <div class="summary-card-label">Components</div>
+        <div class="summary-card-value">${summary.totalComponents}</div>
+        <div class="summary-card-sub">${summary.accessibleComponents} accessible (${summary.accessiblePercent}%)</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-card-label">AA Compliance</div>
+        <div class="summary-card-value" style="color: ${getScoreColor(score.aaPercent)}">${score.aaPercent}%</div>
+        <div class="summary-card-sub">No critical/serious violations</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-card-label">AAA Compliance</div>
+        <div class="summary-card-value" style="color: ${getScoreColor(score.aaaPercent)}">${score.aaaPercent}%</div>
+        <div class="summary-card-sub">Zero violations</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-card-label">Total Violations</div>
+        <div class="summary-card-value" style="color: ${summary.totalViolations === 0 ? "#22c55e" : "#ef4444"}">${summary.totalViolations}</div>
+        <div class="summary-card-sub">${summary.totalCritical} critical, ${summary.totalSerious} serious, ${summary.totalModerate} moderate, ${summary.totalMinor} minor</div>
+      </div>
+    </div>
+  `;
+}
+function renderComponentCard(comp) {
+  const statusClass = comp.status === "PASS" ? "status-pass" : comp.status === "WARN" ? "status-warn" : "status-fail";
+  const variantCount = comp.results.length || 1;
+  let critical = 0;
+  let serious = 0;
+  let moderate = 0;
+  let minor = 0;
+  for (const r of comp.results) {
+    critical += r.summary.critical;
+    serious += r.summary.serious;
+    moderate += r.summary.moderate;
+    minor += r.summary.minor;
+  }
+  const severityChips = [];
+  if (critical > 0) severityChips.push(`<span class="severity-chip severity-critical">${critical} critical</span>`);
+  if (serious > 0) severityChips.push(`<span class="severity-chip severity-serious">${serious} serious</span>`);
+  if (moderate > 0) severityChips.push(`<span class="severity-chip severity-moderate">${moderate} moderate</span>`);
+  if (minor > 0) severityChips.push(`<span class="severity-chip severity-minor">${minor} minor</span>`);
+  let violationDetailsHtml = "";
+  const variantsWithViolations = comp.results.filter((r) => r.summary.total > 0);
+  if (variantsWithViolations.length > 0) {
+    const variantItems = variantsWithViolations.map((r) => {
+      const counts = [];
+      if (r.summary.critical > 0) counts.push(`${r.summary.critical} critical`);
+      if (r.summary.serious > 0) counts.push(`${r.summary.serious} serious`);
+      if (r.summary.moderate > 0) counts.push(`${r.summary.moderate} moderate`);
+      if (r.summary.minor > 0) counts.push(`${r.summary.minor} minor`);
+      return `
+        <div class="violation-item">
+          <div class="violation-item-header">
+            <span class="violation-rule">${escapeHtml(r.variant)}</span>
+          </div>
+          <div class="violation-description">${counts.join(", ")}</div>
+        </div>
+      `;
+    }).join("");
+    violationDetailsHtml = `
+      <details class="violation-details">
+        <summary>View variant breakdown (${variantsWithViolations.length} variant${variantsWithViolations.length === 1 ? "" : "s"} with issues)</summary>
+        <div class="violation-list">
+          ${variantItems}
+        </div>
+      </details>
+    `;
+  }
+  return `
+    <div class="component-card">
+      <div class="component-card-header">
+        <span class="component-name">${escapeHtml(comp.component)}</span>
+        <span class="status-badge ${statusClass}">${comp.status}</span>
+      </div>
+      <div class="component-stats">
+        <span>${variantCount} variant${variantCount === 1 ? "" : "s"}</span>
+        <span>${comp.totalViolations} violation${comp.totalViolations === 1 ? "" : "s"}</span>
+      </div>
+      ${severityChips.length > 0 ? `<div class="severity-bar">${severityChips.join("")}</div>` : ""}
+      ${violationDetailsHtml}
+    </div>
+  `;
+}
+function renderComponentGrid(components) {
+  if (components.length === 0) {
+    return `
+      <section class="section">
+        <h2 class="section-title">Components</h2>
+        <p style="color: var(--text-secondary)">No components found.</p>
+      </section>
+    `;
+  }
+  const order = { FAIL: 0, WARN: 1, PASS: 2 };
+  const sorted = [...components].sort((a, b) => order[a.status] - order[b.status]);
+  return `
+    <section class="section">
+      <h2 class="section-title">Components</h2>
+      <div class="component-grid">
+        ${sorted.map(renderComponentCard).join("")}
+      </div>
+    </section>
+  `;
+}
+function renderFooter() {
+  return `
+    <footer class="footer">
+      <p>Generated by <a href="#">${BRAND.name}</a> &mdash; AI-first design system documentation</p>
+    </footer>
+  `;
+}
+function getScripts() {
+  return `
+    // Theme toggle
+    (function() {
+      var toggle = document.getElementById('theme-toggle');
+      var root = document.documentElement;
+
+      function setTheme(theme) {
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+        toggle.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
+      }
+
+      // Default to dark
+      var preferred = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+      setTheme(preferred);
+
+      toggle.addEventListener('click', function() {
+        var current = root.classList.contains('dark') ? 'dark' : 'light';
+        setTheme(current === 'dark' ? 'light' : 'dark');
+      });
+    })();
+
+    // Animate bars on load
+    document.querySelectorAll('.bar-fill, .coverage-bar-fill').forEach(function(el) {
+      var width = el.style.width;
+      el.style.width = '0';
+      setTimeout(function() {
+        el.style.width = width;
+      }, 100);
+    });
+  `;
+}
+
+// src/commands/a11y.ts
+function calculateA11yScore(summary) {
+  const deductions = summary.totalCritical * 10 + summary.totalSerious * 5 + summary.totalModerate * 2 + summary.totalMinor * 1;
+  const score = Math.max(0, 100 - deductions);
+  const aaComponents = summary.components.filter(
+    (c) => c.totalCritical === 0 && c.totalSerious === 0
+  ).length;
+  const aaPercent = summary.totalComponents > 0 ? Math.round(aaComponents / summary.totalComponents * 100) : 100;
+  const aaaComponents = summary.components.filter(
+    (c) => c.totalViolations === 0
+  ).length;
+  const aaaPercent = summary.totalComponents > 0 ? Math.round(aaaComponents / summary.totalComponents * 100) : 100;
+  return { score, aaPercent, aaaPercent };
+}
+function formatGitHub(summary) {
+  const score = summary.score ?? calculateA11yScore(summary);
+  const badge = summary.passed ? "passing" : "failing";
+  const badgeColor = summary.passed ? "brightgreen" : "red";
+  const lines = [];
+  lines.push(`## ${BRAND.name} Accessibility Report`);
+  lines.push("");
+  lines.push(`![a11y](https://img.shields.io/badge/a11y-${badge}-${badgeColor})`);
+  lines.push(`**Score:** ${score.score}/100 | **AA:** ${score.aaPercent}% | **AAA:** ${score.aaaPercent}%`);
+  lines.push("");
+  lines.push("| Component | Variants | Violations | Critical | Serious | Status |");
+  lines.push("|-----------|----------|------------|----------|---------|--------|");
+  for (const result of summary.components) {
+    const statusIcon = result.status === "PASS" ? "PASS" : result.status === "WARN" ? "WARN" : "FAIL";
+    const variantCount = result.results.length || 1;
+    lines.push(
+      `| ${result.component} | ${variantCount} | ${result.totalViolations} | ${result.totalCritical} | ${result.totalSerious} | ${statusIcon} |`
+    );
+  }
+  lines.push("");
+  lines.push(`**Summary:** ${summary.accessibleComponents}/${summary.totalComponents} components accessible (${summary.accessiblePercent}%)`);
+  lines.push(`**Violations:** ${summary.totalViolations} total (${summary.totalCritical} critical, ${summary.totalSerious} serious, ${summary.totalModerate} moderate, ${summary.totalMinor} minor)`);
+  if (summary.totalCritical + summary.totalSerious > 0) {
+    lines.push("");
+    lines.push(`**Blocking:** ${summary.totalCritical + summary.totalSerious} critical/serious issues must be fixed`);
+  }
+  lines.push("");
+  return lines.join("\n");
+}
 async function a11y(options = {}) {
-  const { config: configPath, json = false, ci = false, component, port = 6006 } = options;
+  const {
+    config: configPath,
+    json = false,
+    ci = false,
+    component,
+    port = 6006,
+    format = json ? "json" : "table",
+    standard = "AA"
+  } = options;
   await loadConfig(configPath);
   const client = createDevServerClient(port);
   const componentResults = [];
-  if (!json) {
+  const isJsonOutput = format === "json" || json;
+  if (!isJsonOutput && format !== "github") {
     console.log(pc12.cyan(`
 ${BRAND.name} Accessibility Report
 `));
@@ -2422,7 +3059,7 @@ ${BRAND.name} Accessibility Report
   }
   const segments = await client.getSegments();
   if (segments.length === 0) {
-    if (json) {
+    if (isJsonOutput) {
       console.log(JSON.stringify({ error: "No fragments found", components: [] }));
     } else {
       console.log(pc12.yellow("No fragments found.\n"));
@@ -2443,14 +3080,14 @@ ${BRAND.name} Accessibility Report
   const componentsToCheck = component ? segments.filter((s) => s.name.toLowerCase() === component.toLowerCase()) : segments;
   if (component && componentsToCheck.length === 0) {
     const error = `Component '${component}' not found. Available: ${segments.map((s) => s.name).join(", ")}`;
-    if (json) {
+    if (isJsonOutput) {
       console.log(JSON.stringify({ error }));
     } else {
       console.log(pc12.red(error));
     }
     throw new Error(error);
   }
-  if (!json) {
+  if (!isJsonOutput && format !== "github") {
     console.log(pc12.dim(`Checking ${componentsToCheck.length} component(s) for accessibility issues...
 `));
   }
@@ -2471,6 +3108,9 @@ ${BRAND.name} Accessibility Report
       } else if (totalViolations2 > 0) {
         status = "WARN";
       }
+      if (standard === "AAA" && totalViolations2 > 0) {
+        status = "FAIL";
+      }
       componentResults.push({
         component: seg.name,
         results: a11yResult.results,
@@ -2479,7 +3119,7 @@ ${BRAND.name} Accessibility Report
         totalCritical: totalCritical2,
         totalSerious: totalSerious2
       });
-    } catch (error) {
+    } catch {
       componentResults.push({
         component: seg.name,
         results: [],
@@ -2502,6 +3142,7 @@ ${BRAND.name} Accessibility Report
       totalMinor += result.summary.minor;
     }
   }
+  const passed = standard === "AAA" ? totalViolations === 0 : totalCritical === 0 && totalSerious === 0;
   const summary = {
     totalComponents: componentResults.length,
     accessibleComponents,
@@ -2512,9 +3153,12 @@ ${BRAND.name} Accessibility Report
     totalSerious,
     totalModerate,
     totalMinor,
-    passed: totalCritical === 0 && totalSerious === 0
+    passed
   };
-  if (json) {
+  summary.score = calculateA11yScore(summary);
+  if (format === "github") {
+    console.log(formatGitHub(summary));
+  } else if (isJsonOutput) {
     console.log(JSON.stringify(summary, null, 2));
   } else {
     console.log(pc12.bold(
@@ -2530,21 +3174,46 @@ ${BRAND.name} Accessibility Report
     }
     console.log(pc12.dim("\u2500".repeat(72)));
     console.log();
+    const categories = [
+      { label: "Critical", count: totalCritical, color: pc12.red },
+      { label: "Serious", count: totalSerious, color: pc12.red },
+      { label: "Moderate", count: totalModerate, color: pc12.yellow },
+      { label: "Minor", count: totalMinor, color: pc12.dim }
+    ];
+    for (const cat of categories) {
+      if (cat.count > 0) {
+        const dots = ".".repeat(Math.max(1, 30 - cat.label.length));
+        console.log(`  ${cat.label} ${pc12.dim(dots)} ${cat.color(String(cat.count))}`);
+      }
+    }
+    const { score, aaPercent, aaaPercent } = summary.score;
+    console.log();
+    console.log(pc12.bold(`  Score: ${score}/100`));
+    console.log(`  AA compliance .... ${aaPercent}%`);
+    console.log(`  AAA compliance ... ${aaaPercent}%`);
+    console.log(`  Standard ......... WCAG ${standard}`);
+    console.log();
     console.log(pc12.bold("Summary:"));
     console.log(`  ${accessibleComponents}/${componentResults.length} components accessible (${summary.accessiblePercent}%)`);
     console.log(`  Total violations: ${totalViolations} (${totalCritical} critical, ${totalSerious} serious, ${totalModerate} moderate, ${totalMinor} minor)`);
     if (!summary.passed) {
       console.log();
-      console.log(pc12.red("\u2717 Accessibility check failed - critical/serious violations found"));
+      console.log(pc12.red("x Accessibility check failed - critical/serious violations found"));
     } else if (totalViolations > 0) {
       console.log();
-      console.log(pc12.yellow("\u26A0 Minor/moderate violations found - consider fixing for better accessibility"));
+      console.log(pc12.yellow("! Minor/moderate violations found - consider fixing for better accessibility"));
     } else {
       console.log();
-      console.log(pc12.green("\u2713 All components pass accessibility checks"));
+      console.log(pc12.green("v All components pass accessibility checks"));
     }
     console.log();
   }
+  if (options.report) {
+    const outputPath = options.output ?? "a11y-report.html";
+    const html = generateA11yReport(summary);
+    fs.writeFileSync(outputPath, html, "utf-8");
+    console.log(pc12.green("v Report generated: " + outputPath));
+  }
   if (ci && !summary.passed) {
     throw new Error(`Accessibility check failed: ${totalCritical} critical, ${totalSerious} serious violations found`);
   }
@@ -3825,8 +4494,8 @@ ${BRAND.name} AI Enhancement
     ];
     for (const srcPath of possiblePaths) {
       try {
-        const fs = await import("fs");
-        if (fs.existsSync(srcPath)) {
+        const fs2 = await import("fs");
+        if (fs2.existsSync(srcPath)) {
           const extraction = await extractPropsFromFile(srcPath, {
             propsTypeName: `${compName}Props`
           });
@@ -4275,6 +4944,242 @@ ${whenNotItems}
   }
 }
 
+// src/commands/graph.ts
+import pc20 from "picocolors";
+import { readFile as readFile6 } from "fs/promises";
+import { resolve as resolve6 } from "path";
+import {
+  ComponentGraphEngine,
+  deserializeGraph
+} from "@fragments-sdk/context/graph";
+async function graph(component, options) {
+  const { config, configDir } = await loadConfig(options.config);
+  const outputPath = resolve6(configDir, config.outFile ?? BRAND.outFile);
+  let data;
+  try {
+    const content = await readFile6(outputPath, "utf-8");
+    data = JSON.parse(content);
+  } catch {
+    console.error(
+      pc20.red(`Error: Could not load ${BRAND.outFile}. Run \`${BRAND.cliCommand} build\` first.`)
+    );
+    process.exit(1);
+  }
+  if (!data.graph) {
+    console.error(
+      pc20.red(`Error: No graph data in ${BRAND.outFile}. Rebuild with the latest CLI.`)
+    );
+    process.exit(1);
+  }
+  const graph2 = deserializeGraph(data.graph);
+  const blocks = data.blocks ? Object.fromEntries(
+    Object.entries(data.blocks).map(([k, v]) => [k, { components: v.components }])
+  ) : void 0;
+  const engine = new ComponentGraphEngine(graph2, blocks);
+  const mode = options.mode ?? (component ? "dependencies" : "health");
+  const format = options.format ?? "table";
+  const edgeTypes = options.edgeTypes ? options.edgeTypes.split(",") : void 0;
+  const needsComponent = ["dependencies", "dependents", "impact", "path", "composition", "alternatives"];
+  if (needsComponent.includes(mode) && !component) {
+    console.error(pc20.red(`Error: "${mode}" mode requires a component name.`));
+    process.exit(1);
+  }
+  if (component && !engine.hasNode(component)) {
+    console.error(pc20.red(`Error: Component "${component}" not found in graph.`));
+    process.exit(1);
+  }
+  switch (mode) {
+    case "health": {
+      const health = engine.getHealth();
+      if (format === "json") {
+        console.log(JSON.stringify(health, null, 2));
+        return;
+      }
+      console.log(pc20.bold("\nComponent Graph Health\n"));
+      console.log(`  ${pc20.cyan("Nodes:")}     ${health.nodeCount}`);
+      console.log(`  ${pc20.cyan("Edges:")}     ${health.edgeCount}`);
+      console.log(`  ${pc20.cyan("Avg degree:")} ${health.averageDegree}`);
+      console.log(`  ${pc20.cyan("Islands:")}   ${health.connectedComponents.length}`);
+      console.log(`  ${pc20.cyan("Coverage:")}  ${health.compositionCoverage}% in blocks`);
+      console.log(`  ${pc20.cyan("Orphans:")}   ${health.orphans.length > 0 ? health.orphans.join(", ") : pc20.green("none")}`);
+      if (health.hubs.length > 0) {
+        console.log(`
+  ${pc20.bold("Top hubs:")}`);
+        for (const hub of health.hubs.slice(0, 5)) {
+          console.log(`    ${pc20.yellow(hub.name)} \u2014 ${hub.degree} connections`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "dependencies": {
+      const deps = engine.dependencies(component, edgeTypes);
+      if (format === "json") {
+        console.log(JSON.stringify({ component, dependencies: deps }, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Dependencies of ${component}
+`));
+      if (deps.length === 0) {
+        console.log("  No outgoing dependencies.");
+      } else {
+        for (const dep of deps) {
+          console.log(`  ${pc20.yellow(dep.target)} ${pc20.dim(`(${dep.type})`)}${dep.note ? ` \u2014 ${dep.note}` : ""}`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "dependents": {
+      const deps = engine.dependents(component, edgeTypes);
+      if (format === "json") {
+        console.log(JSON.stringify({ component, dependents: deps }, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Dependents of ${component}
+`));
+      if (deps.length === 0) {
+        console.log("  No incoming dependents.");
+      } else {
+        for (const dep of deps) {
+          console.log(`  ${pc20.yellow(dep.source)} ${pc20.dim(`(${dep.type})`)}${dep.note ? ` \u2014 ${dep.note}` : ""}`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "impact": {
+      const result = engine.impact(component, options.depth ?? 3);
+      if (format === "json") {
+        console.log(JSON.stringify(result, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Impact analysis: ${component}
+`));
+      console.log(`  ${pc20.red(`${result.totalAffected}`)} affected components, ${pc20.red(`${result.affectedBlocks.length}`)} affected blocks
+`);
+      if (result.affected.length > 0) {
+        console.log(`  ${pc20.bold("Affected components:")}`);
+        for (const entry of result.affected) {
+          const indent = "  ".repeat(entry.depth + 1);
+          console.log(`${indent}${pc20.yellow(entry.component)} ${pc20.dim(`(depth ${entry.depth}, via ${entry.edgeType})`)}`);
+        }
+      }
+      if (result.affectedBlocks.length > 0) {
+        console.log(`
+  ${pc20.bold("Affected blocks:")} ${result.affectedBlocks.join(", ")}`);
+      }
+      console.log();
+      break;
+    }
+    case "path": {
+      if (!options.target) {
+        console.error(pc20.red("Error: --target is required for path mode."));
+        process.exit(1);
+      }
+      const result = engine.path(component, options.target);
+      if (format === "json") {
+        console.log(JSON.stringify(result, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Path: ${component} \u2192 ${options.target}
+`));
+      if (!result.found) {
+        console.log(`  ${pc20.red("No path found.")}`);
+      } else {
+        console.log(`  ${result.path.map((n) => pc20.yellow(n)).join(pc20.dim(" \u2192 "))}`);
+        if (result.edges.length > 0) {
+          console.log(`  ${pc20.dim(`(${result.edges.map((e) => e.type).join(" \u2192 ")})`)}`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "composition": {
+      const tree = engine.composition(component);
+      if (format === "json") {
+        console.log(JSON.stringify(tree, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Composition: ${component}
+`));
+      console.log(`  ${pc20.cyan("Pattern:")}    ${tree.compositionPattern ?? "unknown"}`);
+      if (tree.parent) {
+        console.log(`  ${pc20.cyan("Parent:")}     ${tree.parent}`);
+      }
+      if (tree.subComponents.length > 0) {
+        console.log(`  ${pc20.cyan("Sub-components:")}`);
+        for (const sub of tree.subComponents) {
+          const isRequired = tree.requiredChildren.includes(sub);
+          console.log(`    ${pc20.yellow(sub)}${isRequired ? pc20.red(" (required)") : ""}`);
+        }
+      }
+      if (tree.siblings.length > 0) {
+        console.log(`  ${pc20.cyan("Siblings:")}   ${tree.siblings.join(", ")}`);
+      }
+      if (tree.blocks.length > 0) {
+        console.log(`  ${pc20.cyan("In blocks:")}  ${tree.blocks.join(", ")}`);
+      }
+      console.log();
+      break;
+    }
+    case "alternatives": {
+      const alts = engine.alternatives(component);
+      if (format === "json") {
+        console.log(JSON.stringify({ component, alternatives: alts }, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Alternatives for ${component}
+`));
+      if (alts.length === 0) {
+        console.log("  No known alternatives.");
+      } else {
+        for (const alt of alts) {
+          console.log(`  ${pc20.yellow(alt.component)}${alt.note ? ` \u2014 ${alt.note}` : ""}`);
+        }
+      }
+      console.log();
+      break;
+    }
+    case "islands": {
+      const islands = engine.islands();
+      if (format === "json") {
+        console.log(JSON.stringify({ islands }, null, 2));
+        return;
+      }
+      console.log(pc20.bold(`
+Connected Islands (${islands.length})
+`));
+      for (let i = 0; i < islands.length; i++) {
+        console.log(`  ${pc20.cyan(`Island ${i + 1}`)} (${islands[i].length} components): ${islands[i].join(", ")}`);
+      }
+      console.log();
+      break;
+    }
+    default:
+      console.error(pc20.red(`Unknown mode: "${mode}". Valid: health, dependencies, dependents, impact, path, composition, alternatives, islands`));
+      process.exit(1);
+  }
+  if (format === "dot") {
+    const lines = ["digraph ComponentGraph {", "  rankdir=LR;", "  node [shape=box, style=rounded];"];
+    for (const node of graph2.nodes) {
+      lines.push(`  "${node.name}" [label="${node.name}\\n(${node.category})"];`);
+    }
+    for (const edge of graph2.edges) {
+      const style = edge.type === "alternative-to" ? "dashed" : "solid";
+      lines.push(`  "${edge.source}" -> "${edge.target}" [label="${edge.type}", style=${style}];`);
+    }
+    lines.push("}");
+    console.log(lines.join("\n"));
+  }
+}
+
 // src/bin.ts
 var __dirname = dirname4(fileURLToPath(import.meta.url));
 var pkg = JSON.parse(readFileSync(join10(__dirname, "../package.json"), "utf-8"));
@@ -4287,7 +5192,7 @@ program.command("validate").description("Validate fragment files").option("-c, -
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4307,7 +5212,7 @@ program.command("build").description(`Build compiled ${BRAND.outFile} and ${BRAN
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4326,7 +5231,7 @@ program.command("context").description("Generate AI-ready context for your desig
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4353,7 +5258,7 @@ program.command("ai").description("Generate context optimized for AI assistants
       }
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4361,7 +5266,7 @@ program.command("list").description("List all discovered fragment files").option
   try {
     await list(options);
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4369,7 +5274,7 @@ program.command("reset").description("Reset to initial state (delete all generat
   try {
     await reset(options);
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4383,7 +5288,7 @@ linkCommand.command("figma").argument("[figma-url]", "Figma file URL to link com
       variants: options.variants
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4398,7 +5303,7 @@ linkCommand.command("storybook").description("Bootstrap fragments from existing
       exclude: options.exclude
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4413,9 +5318,9 @@ program.command("dev").description("Start the development server with live compo
       skipBuild: options.skipBuild
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     if (error instanceof Error && error.stack) {
-      console.error(pc20.dim(error.stack));
+      console.error(pc21.dim(error.stack));
     }
     process.exit(1);
   }
@@ -4436,7 +5341,7 @@ program.command("screenshot").description("Capture screenshots of component vari
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4455,7 +5360,7 @@ program.command("diff").argument("[component]", "Component name to diff (optiona
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4474,8 +5379,8 @@ program.command("compare").argument("[component]", "Component name to compare").
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
-    console.log(pc20.dim(`
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
+    console.log(pc21.dim(`
 Make sure the dev server is running: ${BRAND.cliCommand} dev`));
     process.exit(1);
   }
@@ -4494,7 +5399,7 @@ program.command("analyze").description("Analyze design system and generate repor
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4513,7 +5418,7 @@ program.command("verify").argument("[component]", "Component name to verify (opt
     if (options.ci) {
       console.log(JSON.stringify({ error: error instanceof Error ? error.message : "Verification failed" }));
     } else {
-      console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+      console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     }
     process.exit(1);
   }
@@ -4530,25 +5435,29 @@ program.command("audit").description("Scan all fragments and show compliance met
     if (options.json) {
       console.log(JSON.stringify({ error: error instanceof Error ? error.message : "Audit failed" }));
     } else {
-      console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+      console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     }
     process.exit(1);
   }
 });
-program.command("a11y").description("Run accessibility checks on all component variants").option("-c, --config <path>", "Path to config file").option("--json", "Output results as JSON").option("--ci", "CI mode (exit code 1 if any critical/serious violations)").option("--component <name>", "Check specific component only").option("-p, --port <port>", "Dev server port", "6006").action(async (options) => {
+program.command("a11y").description("Run accessibility checks on all component variants").option("-c, --config <path>", "Path to config file").option("--json", "Output results as JSON").option("--ci", "CI mode (exit code 1 if any critical/serious violations)").option("--component <name>", "Check specific component only").option("-p, --port <port>", "Dev server port", "6006").option("--format <format>", "Output format (table, json, github)", "table").option("--standard <level>", "WCAG level (AA or AAA)", "AA").option("--report", "Generate standalone HTML compliance report").option("-o, --output <path>", "Output path for report", "a11y-report.html").action(async (options) => {
   try {
     await a11y({
       config: options.config,
       json: options.json,
       ci: options.ci,
       component: options.component,
-      port: options.port
+      port: options.port,
+      format: options.format,
+      standard: options.standard,
+      report: options.report,
+      output: options.output
     });
   } catch (error) {
     if (options.json) {
       console.log(JSON.stringify({ error: error instanceof Error ? error.message : "A11y check failed" }));
     } else {
-      console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+      console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     }
     process.exit(1);
   }
@@ -4571,7 +5480,7 @@ program.command("enhance").description("AI-powered documentation generation from
     if (options.format === "json") {
       console.log(JSON.stringify({ success: false, error: error instanceof Error ? error.message : "Enhance failed" }));
     } else {
-      console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+      console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     }
     process.exit(1);
   }
@@ -4592,7 +5501,7 @@ program.command("scan").description(`Zero-config ${BRAND.outFile} generation fro
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4605,7 +5514,7 @@ program.command("storygen").description("Generate Storybook stories from fragmen
       format: options.format
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4617,7 +5526,7 @@ program.command("metrics").argument("[component]", "Component name (optional, sh
       json: options.json
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4631,9 +5540,9 @@ program.command("baseline").description("Manage visual regression baselines").ar
       port: options.port
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     if (action === "update") {
-      console.log(pc20.dim(`
+      console.log(pc21.dim(`
 Make sure the dev server is running: ${BRAND.cliCommand} dev`));
     }
     process.exit(1);
@@ -4641,27 +5550,27 @@ Make sure the dev server is running: ${BRAND.cliCommand} dev`));
 });
 program.command("view").description(`Generate a static HTML viewer for ${BRAND.outFile}`).option("-i, --input <path>", `Path to ${BRAND.outFile}`, BRAND.outFile).option("-o, --output <path>", "Output HTML file path", BRAND.viewerHtmlFile).option("--open", "Open in browser after generation").action(async (options) => {
   try {
-    const { generateViewerFromJson } = await import("./static-viewer-O37MJ5B6.js");
-    const fs = await import("fs/promises");
+    const { generateViewerFromJson } = await import("./static-viewer-GBR7YNF3.js");
+    const fs2 = await import("fs/promises");
     const path = await import("path");
     const inputPath = path.resolve(process.cwd(), options.input);
     const outputPath = path.resolve(process.cwd(), options.output);
-    console.log(pc20.cyan(`
+    console.log(pc21.cyan(`
 ${BRAND.name} Viewer Generator
 `));
     try {
-      await fs.access(inputPath);
+      await fs2.access(inputPath);
     } catch {
-      console.log(pc20.red(`Error: ${options.input} not found.`));
-      console.log(pc20.dim(`
-Run ${pc20.cyan(`${BRAND.cliCommand} build`)} first to generate ${BRAND.outFile}
+      console.log(pc21.red(`Error: ${options.input} not found.`));
+      console.log(pc21.dim(`
+Run ${pc21.cyan(`${BRAND.cliCommand} build`)} first to generate ${BRAND.outFile}
 `));
       process.exit(1);
     }
-    console.log(pc20.dim(`Reading: ${options.input}`));
+    console.log(pc21.dim(`Reading: ${options.input}`));
     const html = await generateViewerFromJson(inputPath);
-    await fs.writeFile(outputPath, html);
-    console.log(pc20.green(`
+    await fs2.writeFile(outputPath, html);
+    console.log(pc21.green(`
 \u2713 Generated: ${options.output}
 `));
     if (options.open) {
@@ -4670,7 +5579,7 @@ Run ${pc20.cyan(`${BRAND.cliCommand} build`)} first to generate ${BRAND.outFile}
       exec(`${openCmd} "${outputPath}"`);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
@@ -4683,33 +5592,33 @@ program.command("add").argument("[name]", 'Component name (e.g., "Button", "Text
       component: options.component
     });
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
 program.command("init").description("Initialize fragments in a project (interactive by default)").option("--force", "Overwrite existing config").option("-y, --yes", "Non-interactive mode - auto-detect and use defaults").action(async (options) => {
   try {
-    const { init } = await import("./init-NION5S3M.js");
+    const { init } = await import("./init-7CHRKQ7P.js");
     const result = await init({
       projectRoot: process.cwd(),
       force: options.force,
       yes: options.yes
     });
     if (!result.success) {
-      console.error(pc20.red("\nInit failed with errors:"));
+      console.error(pc21.red("\nInit failed with errors:"));
       for (const error of result.errors) {
-        console.error(pc20.red(`  - ${error}`));
+        console.error(pc21.red(`  - ${error}`));
       }
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
 program.command("tokens").description("Discover and list design tokens from CSS/SCSS files").option("-c, --config <path>", "Path to config file").option("--json", "Output as JSON").option("--categories", "Group tokens by category").option("--theme <theme>", "Filter by theme name").option("--category <category>", "Filter by category (color, spacing, typography, etc.)").option("--verbose", "Show all tokens (no truncation)").action(async (options) => {
   try {
-    const { tokens } = await import("./tokens-ITADYVPF.js");
+    const { tokens } = await import("./tokens-3BWDESVM.js");
     const result = await tokens({
       config: options.config,
       json: options.json,
@@ -4722,13 +5631,13 @@ program.command("tokens").description("Discover and list design tokens from CSS/
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
 program.command("generate").description("Generate fragment files from component source code").argument("[component]", "Specific component name to generate (optional)").option("--force", "Overwrite existing fragment files").option("--pattern <glob>", "Pattern for component files", "src/components/**/*.tsx").action(async (component, options) => {
   try {
-    const { generate } = await import("./generate-KL24VZVD.js");
+    const { generate } = await import("./generate-LMTISDIJ.js");
     const result = await generate({
       projectRoot: process.cwd(),
       component,
@@ -4736,18 +5645,26 @@ program.command("generate").description("Generate fragment files from component
       componentPattern: options.pattern
     });
     if (!result.success) {
-      console.error(pc20.red("\nGenerate completed with errors"));
+      console.error(pc21.red("\nGenerate completed with errors"));
       process.exit(1);
     }
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
+program.command("graph").description("Query the component relationship graph").argument("[component]", "Component name (optional)").option("-c, --config <path>", "Path to config file").option("-m, --mode <mode>", "Query mode: health, dependencies, dependents, impact, path, composition, alternatives, islands").option("-t, --target <component>", "Target component for path mode").option("--edge-types <types>", "Comma-separated edge types to filter by").option("--depth <number>", "Max traversal depth for impact mode", parseInt).option("--format <format>", "Output format: table, json, dot", "table").action(async (component, options) => {
+  try {
+    await graph(component, options);
+  } catch (error) {
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });
 program.command("test").description("Run interaction tests for fragments with play functions").option("-c, --config <path>", "Path to config file").option("--component <name>", "Filter by component name").option("--tags <tags>", "Filter by tags (comma-separated)").option("--grep <pattern>", "Filter by variant name pattern").option("--exclude <pattern>", "Exclude tests matching pattern").option("--parallel <count>", "Number of parallel browser contexts", parseInt, 4).option("--timeout <ms>", "Timeout per test in milliseconds", parseInt, 3e4).option("--retries <count>", "Number of retries for failed tests", parseInt, 0).option("--bail", "Stop on first failure").option("--browser <name>", "Browser to use (chromium, firefox, webkit)", "chromium").option("--headed", "Run in headed mode (show browser)").option("--a11y", "Run accessibility checks with axe-core").option("--visual", "Capture screenshots for visual regression").option("--update-snapshots", "Update visual snapshots").option("--watch", "Watch mode - re-run on file changes").option("--reporters <names>", "Reporters to use (console, junit, json)", "console").option("-o, --output <dir>", "Output directory for results", "./test-results").option("--server-url <url>", "URL of running dev server (skips starting server)").option("-p, --port <port>", "Port for dev server", parseInt, 6006).option("--ci", "CI mode - non-interactive, exit with code 1 on failure").option("--list", "List available tests without running them").action(async (options) => {
   try {
     const { config, configDir } = await loadConfig(options.config);
-    const { runTestCommand, listTests } = await import("./test-ECPEXFDN.js");
+    const { runTestCommand, listTests } = await import("./test-OJRXNDO2.js");
     if (options.list) {
       await listTests(config, configDir, {
         component: options.component,
@@ -4780,7 +5697,7 @@ program.command("test").description("Run interaction tests for fragments with pl
     });
     process.exit(exitCode);
   } catch (error) {
-    console.error(pc20.red("Error:"), error instanceof Error ? error.message : error);
+    console.error(pc21.red("Error:"), error instanceof Error ? error.message : error);
     process.exit(1);
   }
 });