designlang 1.0.0 → 3.0.0

package/src/extractors/interactions.js

@@ -0,0 +1,128 @@
+// Interaction state extraction — hover, focus, active styles
+
+import { chromium } from 'playwright';
+
+export async function captureInteractions(url, options = {}) {
+  const { width = 1280, height = 800, wait = 0 } = options;
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width, height } });
+  const page = await context.newPage();
+
+  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+  if (wait > 0) await page.waitForTimeout(wait);
+  await page.evaluate(() => document.fonts.ready);
+
+  const results = { buttons: [], links: [], inputs: [] };
+
+  // Extract button states
+  const buttons = await page.$$('button, [role="button"], a[class*="btn"]');
+  for (const btn of buttons.slice(0, 10)) {
+    try {
+      const base = await getStyles(page, btn);
+      if (!base || base.display === 'none') continue;
+
+      // Hover
+      await btn.hover();
+      await page.waitForTimeout(100);
+      const hover = await getStyles(page, btn);
+
+      // Focus
+      await btn.focus();
+      await page.waitForTimeout(100);
+      const focus = await getStyles(page, btn);
+
+      const diffs = diffStates(base, hover, focus);
+      if (diffs.hasChanges) {
+        results.buttons.push({ text: base.text, base: base.styles, ...diffs });
+      }
+    } catch { /* skip */ }
+  }
+
+  // Extract link states
+  const links = await page.$$('a:not([role="button"]):not([class*="btn"])');
+  for (const link of links.slice(0, 10)) {
+    try {
+      const base = await getStyles(page, link);
+      if (!base || base.display === 'none') continue;
+
+      await link.hover();
+      await page.waitForTimeout(100);
+      const hover = await getStyles(page, link);
+
+      const diffs = diffStates(base, hover, null);
+      if (diffs.hasChanges) {
+        results.links.push({ text: base.text, base: base.styles, ...diffs });
+        break; // One link pattern is enough
+      }
+    } catch { /* skip */ }
+  }
+
+  // Extract input states
+  const inputs = await page.$$('input[type="text"], input[type="email"], input[type="search"], textarea');
+  for (const input of inputs.slice(0, 5)) {
+    try {
+      const base = await getStyles(page, input);
+      if (!base || base.display === 'none') continue;
+
+      await input.focus();
+      await page.waitForTimeout(100);
+      const focus = await getStyles(page, input);
+
+      const diffs = diffStates(base, null, focus);
+      if (diffs.hasChanges) {
+        results.inputs.push({ base: base.styles, ...diffs });
+        break; // One input pattern is enough
+      }
+    } catch { /* skip */ }
+  }
+
+  await browser.close();
+
+  return results;
+}
+
+async function getStyles(page, element) {
+  return element.evaluate(el => {
+    const cs = getComputedStyle(el);
+    if (cs.display === 'none' || cs.visibility === 'hidden') return null;
+    return {
+      text: el.textContent?.trim().slice(0, 30) || '',
+      display: cs.display,
+      styles: {
+        color: cs.color,
+        backgroundColor: cs.backgroundColor,
+        borderColor: cs.borderColor,
+        boxShadow: cs.boxShadow,
+        transform: cs.transform,
+        opacity: cs.opacity,
+        outline: cs.outline,
+        textDecoration: cs.textDecoration,
+        scale: cs.scale,
+      },
+    };
+  });
+}
+
+function diffStates(base, hover, focus) {
+  const result = { hasChanges: false, hover: {}, focus: {} };
+
+  if (hover) {
+    for (const [prop, val] of Object.entries(hover.styles)) {
+      if (val !== base.styles[prop] && val !== 'none' && val !== 'auto') {
+        result.hover[prop] = { from: base.styles[prop], to: val };
+        result.hasChanges = true;
+      }
+    }
+  }
+
+  if (focus) {
+    for (const [prop, val] of Object.entries(focus.styles)) {
+      if (val !== base.styles[prop] && val !== 'none' && val !== 'auto') {
+        result.focus[prop] = { from: base.styles[prop], to: val };
+        result.hasChanges = true;
+      }
+    }
+  }
+
+  return result;
+}

package/src/extractors/layout.js

@@ -0,0 +1,114 @@
+// Layout extraction — grid, flexbox, container patterns, structural design language
+
+export function extractLayout(computedStyles) {
+  const containers = [];
+  const gridPatterns = [];
+  const flexPatterns = [];
+  const columnCounts = new Map();
+
+  for (const el of computedStyles) {
+    const isGrid = el.display === 'grid' || el.display === 'inline-grid';
+    const isFlex = el.display === 'flex' || el.display === 'inline-flex';
+
+    if (isGrid) {
+      gridPatterns.push({
+        tag: el.tag,
+        classList: el.classList,
+        gridTemplateColumns: el.gridTemplateColumns || 'none',
+        gridTemplateRows: el.gridTemplateRows || 'none',
+        gap: el.gap,
+        area: el.area,
+      });
+
+      // Count column patterns
+      const cols = el.gridTemplateColumns;
+      if (cols && cols !== 'none') {
+        const colCount = cols.split(/\s+/).filter(v => v && v !== 'none').length;
+        if (colCount > 0) columnCounts.set(colCount, (columnCounts.get(colCount) || 0) + 1);
+      }
+    }
+
+    if (isFlex) {
+      flexPatterns.push({
+        tag: el.tag,
+        classList: el.classList,
+        flexDirection: el.flexDirection || 'row',
+        flexWrap: el.flexWrap || 'nowrap',
+        justifyContent: el.justifyContent || 'normal',
+        alignItems: el.alignItems || 'normal',
+        gap: el.gap,
+        area: el.area,
+      });
+    }
+
+    // Detect containers (large centered elements)
+    if (el.area > 100000 && el.maxWidth && el.maxWidth !== 'none') {
+      containers.push({
+        tag: el.tag,
+        classList: el.classList,
+        maxWidth: el.maxWidth,
+        paddingLeft: el.paddingLeft,
+        paddingRight: el.paddingRight,
+      });
+    }
+  }
+
+  // Summarize flex direction usage
+  const flexDirections = {};
+  for (const f of flexPatterns) {
+    const key = `${f.flexDirection}/${f.flexWrap}`;
+    flexDirections[key] = (flexDirections[key] || 0) + 1;
+  }
+
+  // Summarize justify/align patterns
+  const justifyPatterns = {};
+  const alignPatterns = {};
+  for (const f of flexPatterns) {
+    justifyPatterns[f.justifyContent] = (justifyPatterns[f.justifyContent] || 0) + 1;
+    alignPatterns[f.alignItems] = (alignPatterns[f.alignItems] || 0) + 1;
+  }
+
+  // Grid column summary
+  const gridColumns = [...columnCounts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([cols, count]) => ({ columns: cols, count }));
+
+  // Container widths
+  const containerWidths = [];
+  const widthSet = new Set();
+  for (const c of containers) {
+    if (!widthSet.has(c.maxWidth)) {
+      widthSet.add(c.maxWidth);
+      containerWidths.push({ maxWidth: c.maxWidth, padding: c.paddingLeft });
+    }
+  }
+
+  // Gap values
+  const gaps = new Set();
+  for (const el of [...gridPatterns, ...flexPatterns]) {
+    if (el.gap && el.gap !== 'normal' && el.gap !== '0px') {
+      gaps.add(el.gap);
+    }
+  }
+
+  return {
+    gridCount: gridPatterns.length,
+    flexCount: flexPatterns.length,
+    gridColumns,
+    flexDirections,
+    justifyPatterns,
+    alignPatterns,
+    containerWidths,
+    gaps: [...gaps].sort(),
+    // Sample grid patterns (top 5 by area)
+    topGrids: gridPatterns
+      .sort((a, b) => b.area - a.area)
+      .slice(0, 5)
+      .map(g => ({ columns: g.gridTemplateColumns, rows: g.gridTemplateRows, gap: g.gap })),
+    // Sample flex patterns (top 5 by area)
+    topFlex: flexPatterns
+      .sort((a, b) => b.area - a.area)
+      .slice(0, 5)
+      .map(f => ({ direction: f.flexDirection, wrap: f.flexWrap, justify: f.justifyContent, align: f.alignItems, gap: f.gap })),
+  };
+}

package/src/extractors/responsive.js

@@ -0,0 +1,132 @@
+// Responsive multi-breakpoint capture — extract at multiple viewports and diff
+
+import { chromium } from 'playwright';
+
+const VIEWPORTS = [
+  { name: 'mobile', width: 375, height: 812 },
+  { name: 'tablet', width: 768, height: 1024 },
+  { name: 'desktop', width: 1280, height: 800 },
+  { name: 'wide', width: 1920, height: 1080 },
+];
+
+export async function captureResponsive(url, options = {}) {
+  const { wait = 0 } = options;
+  const browser = await chromium.launch({ headless: true });
+
+  const snapshots = [];
+
+  for (const vp of VIEWPORTS) {
+    const context = await browser.newContext({ viewport: { width: vp.width, height: vp.height } });
+    const page = await context.newPage();
+
+    try {
+      await page.goto(url, { waitUntil: 'networkidle', timeout: 20000 });
+      if (wait > 0) await page.waitForTimeout(wait);
+      await page.evaluate(() => document.fonts.ready);
+
+      const data = await page.evaluate(() => {
+        const body = document.body;
+        const cs = getComputedStyle(body);
+        const html = document.documentElement;
+        const htmlCs = getComputedStyle(html);
+
+        // Collect key metrics at this viewport
+        const headings = {};
+        for (let i = 1; i <= 3; i++) {
+          const h = document.querySelector(`h1, h2, h3`.split(',')[i - 1]);
+          if (h) {
+            const hcs = getComputedStyle(h);
+            headings[`h${i}`] = { fontSize: hcs.fontSize, lineHeight: hcs.lineHeight };
+          }
+        }
+
+        // Body font size
+        const bodyFontSize = cs.fontSize;
+
+        // Navigation visibility
+        const nav = document.querySelector('nav, [role="navigation"]');
+        const navVisible = nav ? getComputedStyle(nav).display !== 'none' : false;
+        const navHeight = nav ? nav.getBoundingClientRect().height : 0;
+
+        // Count visible grid/flex containers
+        let gridCount = 0, flexCount = 0;
+        const allEls = document.querySelectorAll('*');
+        const sample = Array.from(allEls).slice(0, 2000);
+        for (const el of sample) {
+          const d = getComputedStyle(el).display;
+          if (d === 'grid' || d === 'inline-grid') gridCount++;
+          if (d === 'flex' || d === 'inline-flex') flexCount++;
+        }
+
+        // Count columns in grids
+        const grids = document.querySelectorAll('*');
+        let maxColumns = 0;
+        for (const el of Array.from(grids).slice(0, 1000)) {
+          const gcs = getComputedStyle(el);
+          if (gcs.display === 'grid' && gcs.gridTemplateColumns && gcs.gridTemplateColumns !== 'none') {
+            const cols = gcs.gridTemplateColumns.split(/\s+/).length;
+            if (cols > maxColumns) maxColumns = cols;
+          }
+        }
+
+        // Check for hamburger menu
+        const hamburger = document.querySelector('[class*="hamburger"], [class*="menu-toggle"], [aria-label*="menu"], button[class*="mobile"]');
+        const hasHamburger = hamburger ? getComputedStyle(hamburger).display !== 'none' : false;
+
+        return {
+          bodyFontSize,
+          headings,
+          navVisible,
+          navHeight,
+          gridCount,
+          flexCount,
+          maxColumns,
+          hasHamburger,
+          scrollHeight: document.documentElement.scrollHeight,
+        };
+      });
+
+      snapshots.push({ ...vp, ...data });
+    } catch {
+      snapshots.push({ ...vp, error: true });
+    }
+
+    await context.close();
+  }
+
+  await browser.close();
+
+  // Build responsive map — what changes between breakpoints
+  const changes = [];
+  for (let i = 1; i < snapshots.length; i++) {
+    const prev = snapshots[i - 1];
+    const curr = snapshots[i];
+    if (prev.error || curr.error) continue;
+
+    const diffs = [];
+    if (prev.bodyFontSize !== curr.bodyFontSize) {
+      diffs.push({ property: 'Body font size', from: prev.bodyFontSize, to: curr.bodyFontSize });
+    }
+    if (prev.headings?.h1?.fontSize !== curr.headings?.h1?.fontSize) {
+      diffs.push({ property: 'H1 size', from: prev.headings?.h1?.fontSize || 'n/a', to: curr.headings?.h1?.fontSize || 'n/a' });
+    }
+    if (prev.navVisible !== curr.navVisible) {
+      diffs.push({ property: 'Nav visibility', from: prev.navVisible ? 'visible' : 'hidden', to: curr.navVisible ? 'visible' : 'hidden' });
+    }
+    if (prev.hasHamburger !== curr.hasHamburger) {
+      diffs.push({ property: 'Hamburger menu', from: prev.hasHamburger ? 'shown' : 'hidden', to: curr.hasHamburger ? 'shown' : 'hidden' });
+    }
+    if (prev.maxColumns !== curr.maxColumns) {
+      diffs.push({ property: 'Max grid columns', from: String(prev.maxColumns), to: String(curr.maxColumns) });
+    }
+    if (Math.abs(prev.scrollHeight - curr.scrollHeight) > 200) {
+      diffs.push({ property: 'Page height', from: `${prev.scrollHeight}px`, to: `${curr.scrollHeight}px` });
+    }
+
+    if (diffs.length > 0) {
+      changes.push({ from: prev.name, to: curr.name, breakpoint: `${prev.width}px → ${curr.width}px`, diffs });
+    }
+  }
+
+  return { viewports: snapshots.filter(s => !s.error), changes };
+}

package/src/formatters/figma.js

@@ -0,0 +1,83 @@
+// Figma Variables JSON format (compatible with Figma Variables import)
+export function formatFigma(design) {
+  const variables = [];
+
+  // Colors
+  if (design.colors.primary) {
+    variables.push(colorVar('color/primary', design.colors.primary.hex));
+  }
+  if (design.colors.secondary) {
+    variables.push(colorVar('color/secondary', design.colors.secondary.hex));
+  }
+  if (design.colors.accent) {
+    variables.push(colorVar('color/accent', design.colors.accent.hex));
+  }
+  for (let i = 0; i < design.colors.neutrals.length && i < 10; i++) {
+    variables.push(colorVar(`color/neutral/${i * 100 || 50}`, design.colors.neutrals[i].hex));
+  }
+  for (let i = 0; i < design.colors.backgrounds.length; i++) {
+    variables.push(colorVar(`color/background/${i === 0 ? 'default' : i}`, design.colors.backgrounds[i]));
+  }
+  for (let i = 0; i < design.colors.text.length && i < 5; i++) {
+    variables.push(colorVar(`color/text/${i === 0 ? 'default' : i}`, design.colors.text[i]));
+  }
+
+  // Spacing
+  for (const v of design.spacing.scale.slice(0, 20)) {
+    variables.push({ name: `spacing/${v}`, type: 'FLOAT', value: v, scopes: ['GAP', 'ALL_SCOPES'] });
+  }
+
+  // Border radius
+  for (const r of design.borders.radii) {
+    variables.push({ name: `radius/${r.label}`, type: 'FLOAT', value: r.value, scopes: ['CORNER_RADIUS'] });
+  }
+
+  // Font sizes
+  for (const s of design.typography.scale.slice(0, 12)) {
+    variables.push({ name: `fontSize/${s.size}`, type: 'FLOAT', value: s.size, scopes: ['FONT_SIZE'] });
+  }
+
+  const collection = {
+    name: `Design Language — ${design.meta.title || 'Extracted'}`,
+    modes: [{ name: 'Default', variables }],
+  };
+
+  // Add dark mode if available
+  if (design.darkMode) {
+    const darkVars = [];
+    const dc = design.darkMode.colors;
+    if (dc.primary) darkVars.push(colorVar('color/primary', dc.primary.hex));
+    if (dc.secondary) darkVars.push(colorVar('color/secondary', dc.secondary.hex));
+    for (let i = 0; i < dc.neutrals.length && i < 10; i++) {
+      darkVars.push(colorVar(`color/neutral/${i * 100 || 50}`, dc.neutrals[i].hex));
+    }
+    for (let i = 0; i < dc.backgrounds.length; i++) {
+      darkVars.push(colorVar(`color/background/${i === 0 ? 'default' : i}`, dc.backgrounds[i]));
+    }
+    for (let i = 0; i < dc.text.length && i < 5; i++) {
+      darkVars.push(colorVar(`color/text/${i === 0 ? 'default' : i}`, dc.text[i]));
+    }
+    collection.modes.push({ name: 'Dark', variables: darkVars });
+  }
+
+  return JSON.stringify(collection, null, 2);
+}
+
+function colorVar(name, hex) {
+  const rgb = hexToRgb(hex);
+  return {
+    name,
+    type: 'COLOR',
+    value: { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255, a: 1 },
+    scopes: ['ALL_SCOPES'],
+  };
+}
+
+function hexToRgb(hex) {
+  const h = hex.replace('#', '');
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16),
+  };
+}

package/src/formatters/markdown.js

@@ -7,7 +7,7 @@ export function formatMarkdown(design) {
   lines.push(`# Design Language: ${meta.title || 'Unknown Site'}`);
   lines.push('');
   lines.push(`> Extracted from \`${meta.url}\` on ${new Date(meta.timestamp).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}`);
-  lines.push(`> ${meta.elementCount} elements analyzed`);
+  lines.push(`> ${meta.elementCount} elements analyzed${meta.pagesAnalyzed > 1 ? ` across ${meta.pagesAnalyzed} pages` : ''}`);
   lines.push('');
   lines.push('This document describes the complete design language of the website. It is structured for AI/LLM consumption — use it to faithfully recreate the visual design in any framework.');
   lines.push('');
@@ -259,6 +259,188 @@ export function formatMarkdown(design) {
     }
   }
 
+  // ── Layout ──
+  if (design.layout) {
+    const l = design.layout;
+    lines.push('## Layout System');
+    lines.push('');
+    lines.push(`**${l.gridCount} grid containers** and **${l.flexCount} flex containers** detected.`);
+    lines.push('');
+
+    if (l.containerWidths.length > 0) {
+      lines.push('### Container Widths');
+      lines.push('');
+      lines.push('| Max Width | Padding |');
+      lines.push('|-----------|---------|');
+      for (const c of l.containerWidths) {
+        lines.push(`| ${c.maxWidth} | ${c.padding} |`);
+      }
+      lines.push('');
+    }
+
+    if (l.gridColumns.length > 0) {
+      lines.push('### Grid Column Patterns');
+      lines.push('');
+      lines.push('| Columns | Usage Count |');
+      lines.push('|---------|-------------|');
+      for (const g of l.gridColumns) {
+        lines.push(`| ${g.columns}-column | ${g.count}x |`);
+      }
+      lines.push('');
+    }
+
+    if (l.topGrids.length > 0) {
+      lines.push('### Grid Templates');
+      lines.push('');
+      lines.push('```css');
+      for (const g of l.topGrids) {
+        lines.push(`grid-template-columns: ${g.columns};`);
+        if (g.gap !== 'normal' && g.gap !== '0px') lines.push(`gap: ${g.gap};`);
+      }
+      lines.push('```');
+      lines.push('');
+    }
+
+    if (Object.keys(l.flexDirections).length > 0) {
+      lines.push('### Flex Patterns');
+      lines.push('');
+      lines.push('| Direction/Wrap | Count |');
+      lines.push('|----------------|-------|');
+      for (const [pattern, count] of Object.entries(l.flexDirections)) {
+        lines.push(`| ${pattern} | ${count}x |`);
+      }
+      lines.push('');
+    }
+
+    if (l.gaps.length > 0) {
+      lines.push(`**Gap values:** ${l.gaps.map(g => `\`${g}\``).join(', ')}`);
+      lines.push('');
+    }
+  }
+
+  // ── Responsive ──
+  if (design.responsive) {
+    const r = design.responsive;
+    lines.push('## Responsive Design');
+    lines.push('');
+
+    if (r.viewports.length > 0) {
+      lines.push('### Viewport Snapshots');
+      lines.push('');
+      lines.push('| Viewport | Body Font | Nav Visible | Max Columns | Hamburger | Page Height |');
+      lines.push('|----------|-----------|-------------|-------------|-----------|-------------|');
+      for (const vp of r.viewports) {
+        lines.push(`| ${vp.name} (${vp.width}px) | ${vp.bodyFontSize} | ${vp.navVisible ? 'Yes' : 'No'} | ${vp.maxColumns} | ${vp.hasHamburger ? 'Yes' : 'No'} | ${vp.scrollHeight}px |`);
+      }
+      lines.push('');
+    }
+
+    if (r.changes.length > 0) {
+      lines.push('### Breakpoint Changes');
+      lines.push('');
+      for (const change of r.changes) {
+        lines.push(`**${change.breakpoint}** (${change.from} → ${change.to}):`);
+        for (const d of change.diffs) {
+          lines.push(`- ${d.property}: \`${d.from}\` → \`${d.to}\``);
+        }
+        lines.push('');
+      }
+    }
+  }
+
+  // ── Interaction States ──
+  if (design.interactions) {
+    const hasContent = design.interactions.buttons.length > 0 || design.interactions.links.length > 0 || design.interactions.inputs.length > 0;
+    if (hasContent) {
+      lines.push('## Interaction States');
+      lines.push('');
+
+      if (design.interactions.buttons.length > 0) {
+        lines.push('### Button States');
+        lines.push('');
+        for (const btn of design.interactions.buttons.slice(0, 3)) {
+          lines.push(`**"${btn.text}"**`);
+          if (Object.keys(btn.hover).length > 0) {
+            lines.push('```css');
+            lines.push('/* Hover */');
+            for (const [prop, val] of Object.entries(btn.hover)) {
+              lines.push(`${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val.from} → ${val.to};`);
+            }
+            lines.push('```');
+          }
+          if (Object.keys(btn.focus).length > 0) {
+            lines.push('```css');
+            lines.push('/* Focus */');
+            for (const [prop, val] of Object.entries(btn.focus)) {
+              lines.push(`${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val.from} → ${val.to};`);
+            }
+            lines.push('```');
+          }
+          lines.push('');
+        }
+      }
+
+      if (design.interactions.links.length > 0) {
+        lines.push('### Link Hover');
+        lines.push('');
+        const link = design.interactions.links[0];
+        lines.push('```css');
+        for (const [prop, val] of Object.entries(link.hover)) {
+          lines.push(`${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val.from} → ${val.to};`);
+        }
+        lines.push('```');
+        lines.push('');
+      }
+
+      if (design.interactions.inputs.length > 0) {
+        lines.push('### Input Focus');
+        lines.push('');
+        const input = design.interactions.inputs[0];
+        lines.push('```css');
+        for (const [prop, val] of Object.entries(input.focus)) {
+          lines.push(`${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val.from} → ${val.to};`);
+        }
+        lines.push('```');
+        lines.push('');
+      }
+    }
+  }
+
+  // ── Accessibility ──
+  if (design.accessibility) {
+    const a = design.accessibility;
+    lines.push('## Accessibility (WCAG 2.1)');
+    lines.push('');
+    lines.push(`**Overall Score: ${a.score}%** — ${a.passCount} passing, ${a.failCount} failing color pairs`);
+    lines.push('');
+
+    if (a.pairs.length > 0) {
+      const failures = a.pairs.filter(p => p.level === 'FAIL');
+      if (failures.length > 0) {
+        lines.push('### Failing Color Pairs');
+        lines.push('');
+        lines.push('| Foreground | Background | Ratio | Level | Used On |');
+        lines.push('|------------|------------|-------|-------|---------|');
+        for (const p of failures.slice(0, 15)) {
+          lines.push(`| \`${p.foreground}\` | \`${p.background}\` | ${p.ratio}:1 | ${p.level} | ${p.elements.join(', ')} (${p.count}x) |`);
+        }
+        lines.push('');
+      }
+
+      const passes = a.pairs.filter(p => p.level !== 'FAIL');
+      if (passes.length > 0) {
+        lines.push('### Passing Color Pairs');
+        lines.push('');
+        lines.push('| Foreground | Background | Ratio | Level |');
+        lines.push('|------------|------------|-------|-------|');
+        for (const p of passes.slice(0, 10)) {
+          lines.push(`| \`${p.foreground}\` | \`${p.background}\` | ${p.ratio}:1 | ${p.level} |`);
+        }
+        lines.push('');
+      }
+    }
+  }
+
   // ── Dark Mode ──
   if (design.darkMode) {
     lines.push('## Dark Mode');