bigpowers 2.42.0 → 2.43.0

package/extract-design/scripts/lib/browser.js

@@ -0,0 +1,206 @@
+// BrowserExtractor — wraps Puppeteer behind a project-owned interface.
+// Uses collect-styles.js for the browser-side sensor logic.
+
+import { log } from './logging.js';
+import { withRetry, withTimeout } from './retry.js';
+import { collect, collectPseudoStates } from '../collect-styles.js';
+import { CHROME_CI_FLAGS, TIMEOUTS } from './constants.js';
+
+export class BrowserExtractor {
+  constructor({ puppeteer, chromePath, chromeFlags = [] }) {
+    this._puppeteer = puppeteer;
+    this._chromePath = chromePath;
+    this._chromeFlags = [...CHROME_CI_FLAGS, ...chromeFlags];
+    this._browser = null;
+    this._page = null;
+  }
+
+  /**
+   * Launch Chrome and extract styles with dual-pass (light + dark).
+   * Also collects pseudo-state variants and font declarations.
+   * @param {string} source — file path or URL
+   * @returns {Promise<Object>} — { light, dark (nullable), pseudoVariants, fontWarnings }
+   */
+  async extract(source) {
+    log.info('extraction-start', { source, timestamp: new Date().toISOString() });
+
+    try {
+      await this._launch();
+      const page = await this._openPage(source);
+      this._page = page;
+
+      // Light mode pass
+      const light = await collect(page);
+      log.info('page-loaded', {
+        colorCount: Object.keys(light.colors || {}).length,
+        styleCount: (light.styles || []).length,
+        declaredFonts: light.declaredFonts?.length || 0,
+        fontFaceFamilies: light.fontFaceFamilies?.length || 0,
+      });
+
+      // Font declared-vs-computed check
+      const fontWarnings = this._checkFontDeclarations(light);
+
+      // Dark mode pass
+      await this._setColorScheme(page, 'dark');
+      const dark = await collect(page);
+      const darkDiffers = this._colorsDiffer(light.styles, dark.styles);
+      log.info('dark-mode-check', { darkDiffers, darkStyleCount: (dark.styles || []).length });
+
+      return {
+        light,
+        dark: darkDiffers ? dark : null,
+        fontWarnings,
+      };
+    } finally {
+      await this.close();
+    }
+  }
+
+  /**
+   * Detect pseudo-state variants (:hover) for detected components.
+   * Must be called while the page is still open (before close()).
+   * @param {Array<Object>} components — component objects with backgroundColor, textColor, width, height, componentName
+   * @returns {Promise<Record<string, Object>>}
+   */
+  async detectPseudoStates(components) {
+    if (!this._page) return {};
+    log.info('pseudo-states', { componentCount: components.length });
+    return collectPseudoStates(this._page, components);
+  }
+
+  async _launch() {
+    const opts = { headless: true, args: this._chromeFlags };
+    if (this._chromePath) opts.executablePath = this._chromePath;
+
+    try {
+      this._browser = await this._puppeteer.launch(opts);
+      log.info('browser-launched');
+    } catch (err) {
+      if (err.message.includes('chrome') || err.message.includes('Chromium') || err.message.includes('executable')) {
+        throw new Error(
+          `Chrome/Chromium not found. Install Puppeteer with: npm install puppeteer\n` +
+          `Or set CHROME_PATH env var to your Chrome binary. Error: ${err.message}`
+        );
+      }
+      throw err;
+    }
+  }
+
+  async _openPage(source) {
+    const page = await this._browser.newPage();
+    await page.setViewport({ width: 1440, height: 900 });
+
+    const goto = () => {
+      // Determine if source is a URL or file path
+      const isUrl = source.startsWith('http://') || source.startsWith('https://');
+      const target = isUrl ? source : `file://${source}`;
+      return page.goto(target, {
+        waitUntil: 'networkidle0',
+        timeout: TIMEOUTS.PAGE_LOAD_MS,
+      });
+    };
+
+    try {
+      await withTimeout(() => withRetry(goto), TIMEOUTS.PAGE_LOAD_MS + 5000);
+    } catch (err) {
+      if (err.message.includes('Timeout') || err.message.includes('timed out')) {
+        throw new Error(
+          `Page load timed out after ${TIMEOUTS.PAGE_LOAD_MS}ms.\n` +
+          `The prototype may be a SPA or have slow network requests. Error: ${err.message}`
+        );
+      }
+      throw err;
+    }
+
+    return page;
+  }
+
+  async _setColorScheme(page, mode) {
+    await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: mode }]);
+    await page.evaluate(() => new Promise(r => requestAnimationFrame(r)));
+  }
+
+  /**
+   * Compare declared fonts (from <link> + @font-face) against computed fontFamily.
+   * Returns warnings for fonts that were declared but not rendered.
+   */
+  _checkFontDeclarations(extraction) {
+    const warnings = [];
+    const declared = new Set();
+
+    // Parse font names from Google Fonts URLs
+    for (const url of (extraction.declaredFonts || [])) {
+      const match = url.match(/family=([^:&]+)/);
+      if (match) {
+        for (const fam of decodeURIComponent(match[1]).split('|')) {
+          declared.add(fam.trim());
+        }
+      }
+    }
+
+    // Add @font-face families
+    for (const fam of (extraction.fontFaceFamilies || [])) {
+      declared.add(fam);
+    }
+
+    if (declared.size === 0) return warnings;
+
+    // Get all computed font families
+    const computedFamilies = new Set();
+    for (const style of (extraction.styles || [])) {
+      if (style.fontFamily) {
+        // fontFamily may be a stack like "Inter, sans-serif" — take first
+        computedFamilies.add(style.fontFamily.split(',')[0].replace(/['"]/g, '').trim());
+      }
+    }
+
+    // Check each declared font
+    for (const font of declared) {
+      const found = [...computedFamilies].some(cf =>
+        cf.toLowerCase() === font.toLowerCase() ||
+        cf.toLowerCase().includes(font.toLowerCase())
+      );
+      if (!found) {
+        warnings.push(
+          `Font "${font}" was declared in <link>/@font-face but not rendered. ` +
+          `Check font loading (CDN may be blocked, or font name mismatch). ` +
+          `Computed fonts: ${[...computedFamilies].join(', ')}`
+        );
+      }
+    }
+
+    if (warnings.length > 0) {
+      log.warn('font-mismatch', { declaredCount: declared.size, computedCount: computedFamilies.size, warnings });
+    }
+
+    return warnings;
+  }
+
+  _colorsDiffer(lightStyles, darkStyles) {
+    const lightColors = new Set();
+    const darkColors = new Set();
+
+    for (const s of (lightStyles || [])) {
+      if (s.backgroundColor && s.backgroundColor !== 'rgba(0, 0, 0, 0)') lightColors.add(s.backgroundColor);
+      if (s.color && s.color !== 'rgba(0, 0, 0, 0)') lightColors.add(s.color);
+    }
+    for (const s of (darkStyles || [])) {
+      if (s.backgroundColor && s.backgroundColor !== 'rgba(0, 0, 0, 0)') darkColors.add(s.backgroundColor);
+      if (s.color && s.color !== 'rgba(0, 0, 0, 0)') darkColors.add(s.color);
+    }
+
+    return JSON.stringify([...lightColors].sort()) !== JSON.stringify([...darkColors].sort());
+  }
+
+  async close() {
+    if (this._page) {
+      this._page = null;
+    }
+    if (this._browser) {
+      await this._browser.close();
+      this._browser = null;
+      log.info('browser-closed');
+    }
+  }
+}

package/extract-design/scripts/lib/constants.js

@@ -0,0 +1,9 @@
+export const SURFACE_LEVELS = ['surface','surface-dim','surface-bright','surface-container-lowest','surface-container-low','surface-container','surface-container-high','surface-container-highest'];
+export const COLOR_ROLES = ['primary','on-primary','primary-container','on-primary-container','secondary','on-secondary','secondary-container','on-secondary-container','tertiary','on-tertiary','tertiary-container','on-tertiary-container','error','on-error','error-container','on-error-container','surface','on-surface','surface-variant','on-surface-variant','outline','outline-variant','inverse-surface','inverse-on-surface','inverse-primary','background','on-background'];
+export const TYPOGRAPHY_LEVELS = ['display-lg','display-md','display-sm','headline-lg','headline-md','headline-sm','title-lg','title-md','title-sm','body-lg','body-md','body-sm','label-lg','label-md','label-sm'];
+export const CHROME_CI_FLAGS = ['--headless=new','--no-sandbox','--disable-gpu','--disable-dbus','--use-gl=angle','--use-angle=swiftshader'];
+export const TIMEOUTS = { PAGE_LOAD_MS: 30_000, PSEUDO_STATE_MS: 10_000 };
+export const RETRY_CONFIG = { MAX_ATTEMPTS: 3, BASE_DELAY_MS: 1_000 };
+export const COVERAGE_MINIMUMS = { MIN_COLORS: 2, MIN_TYPOGRAPHY_LEVELS: 1 };
+export const OUTPUT_PATH = 'specs/tech-architecture/DESIGN_LATEST.md';
+export const AGENT_NOTE_LOW_CONFIDENCE = '<!-- AGENT NOTE: Generated from visual analysis. Grill-me should validate. -->';

package/extract-design/scripts/lib/logging.js

@@ -0,0 +1,8 @@
+import { writeSync } from 'node:fs';
+function fmt(l,e,d={}){return JSON.stringify({level:l,event:e,timestamp:new Date().toISOString(),...d})+'\n'}
+export const log = {
+  info(e,d={}){writeSync(2,fmt('info',e,d))},
+  warn(e,d={}){writeSync(2,fmt('warn',e,d))},
+  error(e,d={}){writeSync(2,fmt('error',e,d))},
+  user(m){writeSync(1,m+'\n')},
+};

package/extract-design/scripts/lib/retry.js

@@ -0,0 +1,13 @@
+import { log } from './logging.js';
+import { RETRY_CONFIG } from './constants.js';
+export async function withRetry(fn, opts = {}) {
+  const max = opts.maxAttempts ?? RETRY_CONFIG.MAX_ATTEMPTS;
+  const base = opts.baseDelayMs ?? RETRY_CONFIG.BASE_DELAY_MS;
+  for (let a = 1; a <= max; a++) {
+    try { return await fn(); }
+    catch (e) { if (a === max) throw e; const d = base * Math.pow(2, a - 1); log.warn('retry', { attempt: a, max, delayMs: d, error: e.message }); await new Promise(r => setTimeout(r, d)); }
+  }
+}
+export async function withTimeout(fn, ms) {
+  return Promise.race([fn(), new Promise((_, r) => setTimeout(() => r(new Error(`Timed out after ${ms}ms`)), ms))]);
+}

package/extract-design/scripts/lib/state.js

@@ -0,0 +1,15 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'node:fs';
+import { dirname } from 'node:path';
+import { log } from './logging.js';
+const STATE_PATH = 'specs/state.yaml';
+
+export function writeGrillMeHandoff(ctx = {}) {
+  const ul = (ctx.uncertainDecisions || []).map(d => `  - ${d}`).join('\n');
+  const hb = ['handoff:','  last_step_completed: >',`    extract-design completed. DESIGN_LATEST.md written with ${ctx.tokenCount || '?'} tokens, ${ctx.componentCount || '?'} components.`,`    ${ctx.uncertainCount || 0} uncertain decisions flagged.`,'  required_reading:','    - specs/tech-architecture/DESIGN_LATEST.md','  next_skill: grill-me'];
+  if (ul) { hb.push('  uncertain_decisions:'); hb.push(ul); }
+  try {
+    const d = dirname(STATE_PATH); if (!existsSync(d)) mkdirSync(d, { recursive: true });
+    let c = existsSync(STATE_PATH) ? readFileSync(STATE_PATH, 'utf8') : '';
+    if (!c.includes('next_skill:')) { c = c.trimEnd() + '\n' + hb.join('\n') + '\n'; writeFileSync(STATE_PATH, c, 'utf8'); log.info('handoff-written', { nextSkill: 'grill-me' }); }
+  } catch (e) { log.warn('handoff-failed', { error: e.message }); }
+}

package/extract-design/scripts/lib/validator.js

@@ -0,0 +1,11 @@
+import { execSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { log } from './logging.js';
+const BIN = 'npx @google/design.md';
+
+export class DesignValidator {
+  constructor({ runCommand } = {}) { this._run = runCommand || ((c) => execSync(c, { encoding: 'utf8', timeout: 30_000 })); this._avail = null; }
+  isAvailable() { if (this._avail !== null) return this._avail; try { this._run('npx -y @google/design.md --help'); this._avail = true; } catch { this._avail = false; } return this._avail; }
+  lint(fp) { if (!this.isAvailable()) return { summary: { errors: 0, warnings: 0, info: 0 }, findings: [], skipped: true }; try { return JSON.parse(this._run(`${BIN} lint --format json ${fp}`)); } catch(e) { if (e.stdout) try { return JSON.parse(e.stdout); } catch {} throw e; } }
+  diff(a, b) { if (!this.isAvailable()) return { skipped: true }; return JSON.parse(this._run(`${BIN} diff --format json ${a} ${b}`)); }
+}

package/extract-design/scripts/write-designd.js

@@ -0,0 +1,16 @@
+import { writeFileSync, mkdirSync, existsSync } from 'node:fs';
+import { dirname } from 'node:path';
+import { OUTPUT_PATH } from './lib/constants.js';
+
+export function writeDESIGNmd({ name, version = 'alpha', colors, typography, spacing, rounded, components, prose, colorsDark, outputPath = OUTPUT_PATH }) {
+  const y = []; y.push(`version: ${version}`, `name: ${name}`);
+  if (colors && Object.keys(colors).length) { y.push('colors:'); for (const [k,v] of Object.entries(colors)) y.push(`  ${k}: "${v}"`); }
+  if (colorsDark && Object.keys(colorsDark).length) { y.push('colors-dark:'); for (const [k,v] of Object.entries(colorsDark)) y.push(`  ${k}: "${v}"`); }
+  if (typography && Object.keys(typography).length) { y.push('typography:'); for (const [k,v] of Object.entries(typography)) { y.push(`  ${k}:`); for (const [p,val] of Object.entries(v)) { if (val !== undefined && val !== null && val !== '') { const q = String(val).startsWith('#')||String(val).startsWith('rgba')?`"${val}"`:val; y.push(`    ${p}: ${q}`); } } } }
+  if (spacing && Object.keys(spacing).length) { y.push('spacing:'); for (const [k,v] of Object.entries(spacing)) y.push(`  ${k}: "${v}"`); }
+  if (rounded && Object.keys(rounded).length) { y.push('rounded:'); for (const [k,v] of Object.entries(rounded)) y.push(`  ${k}: "${v}"`); }
+  if (components && Object.keys(components).length) { y.push('components:'); for (const [k,v] of Object.entries(components)) { y.push(`  ${k}:`); for (const [p,val] of Object.entries(v)) { if (val !== undefined && val !== null && val !== '') { const q = String(val).startsWith('#')||String(val).startsWith('rgba')?`"${val}"`:val; y.push(`    ${p}: ${q}`); } } } }
+  const content = `---\n${y.join('\n')}\n---\n\n${prose}\n`;
+  const d = dirname(outputPath); if (!existsSync(d)) mkdirSync(d, { recursive: true });
+  writeFileSync(outputPath, content, 'utf8'); return outputPath;
+}

package/extract-design/tests/fixtures/glassmorphism-dark/expected-tokens.json

@@ -0,0 +1 @@
+{"name":"Atmospheric Glass","colors":["rgba(255, 255, 255, 0.1)","rgba(255, 255, 255, 0.2)","#FFFFFF","#DAE2FD","#2F3131"],"typography":["Inter"],"minSpacingValues":3,"hasComponents":true}

package/extract-design/tests/fixtures/glassmorphism-dark/prototype.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Atmospheric Glass</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700" rel="stylesheet">
+<style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter',sans-serif;background:linear-gradient(135deg,#1E3A8A,#7E22CE,#DB2777);color:#DAE2FD;min-height:100vh;padding:40px}.card{background:rgba(255,255,255,0.1);backdrop-filter:blur(20px);border-radius:16px;padding:24px;margin-bottom:16px;border:1px solid rgba(255,255,255,0.2)}.card-elevated{background:rgba(255,255,255,0.2);backdrop-filter:blur(40px);border-radius:24px;padding:24px}.btn-primary{background:#FFF;color:#2F3131;border:none;border-radius:24px;padding:0 24px;height:48px;font-family:Inter,sans-serif;cursor:pointer}input{background:rgba(255,255,255,0.1);color:#FFF;border-radius:24px;padding:20px;height:48px;font-family:Inter,sans-serif}</style></head><body>
+<div class="card"><span>Temperature</span><div style="font-size:84px;font-weight:700;color:#FFF">24°</div><p>Partly cloudy</p></div>
+<div class="card-elevated"><h2>Forecast</h2><p>Clear skies</p><button class="btn-primary">View</button></div>
+<div class="card"><h2>Search</h2><input placeholder="Search..." /></div>
+</body></html>

package/extract-design/tests/fixtures/minimal-no-styles/expected-tokens.json

@@ -0,0 +1 @@
+{"name":"Untitled Design System","degraded":true}

package/extract-design/tests/fixtures/minimal-no-styles/prototype.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Unstyled</title></head>
+<body><div><header><h1>Hello</h1></header><main><p>No styles</p><button>Click</button></main></div></body></html>

package/extract-design/tests/fixtures/swiss-grid/expected-tokens.json

@@ -0,0 +1 @@
+{"name":"Swiss Grid","colors":["#FFFFFF","#111111","#E4002B","#F7F5F2","#6C7278"],"typography":["Inter","Space Mono"],"hasComponents":true}

package/extract-design/tests/fixtures/swiss-grid/prototype.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Swiss Grid</title>
+<style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter','Helvetica Neue',sans-serif;background:#FFF;color:#111;max-width:1200px;margin:0 auto;padding:48px}h1{font-size:48px;font-weight:700;line-height:1.1;letter-spacing:-0.02em;color:#111;margin-bottom:24px}h2{font-size:32px;font-weight:600;color:#111;margin-bottom:16px}p{font-size:16px;font-weight:400;line-height:1.5;color:#333}.caption{font-size:12px;font-family:'Space Mono',monospace;color:#6C7278;letter-spacing:0.05em}.btn{display:inline-block;background:#E4002B;color:#FFF;border:none;border-radius:4px;padding:8px 24px;font-size:14px;font-weight:600;cursor:pointer}.card{background:#F7F5F2;padding:32px;margin-bottom:24px}</style></head><body>
+<h1>Swiss Design Principles</h1><p>The grid system is an aid, not a guarantee.</p>
+<div class="card"><h2>Typography</h2><p>Flush-left, ragged-right.</p><span class="caption">Brockmann, 1981</span></div>
+<div class="card"><h2>Palette</h2><p>White paper, near-black ink, one accent.</p><button class="btn">Learn</button></div>
+</body></html>

package/extract-design/tests/test-extraction.js

@@ -0,0 +1,315 @@
+#!/usr/bin/env node
+// test-extraction.js — verify command for extract-design
+// Unit tests (all classifiers) + integration tests (Puppeteer, if available)
+
+import { readFileSync, existsSync, unlinkSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const FIXTURES = resolve(__dirname, 'fixtures');
+
+let p = 0, f = 0, s = 0;
+
+function t(name, fn) { try { fn(); p++; console.log(`  ✓ ${name}`); } catch (e) { f++; console.log(`  ✗ ${name}: ${e.message}`); } }
+function skip(name, reason) { s++; console.log(`  - ${name} (skipped: ${reason})`); }
+function assert(c, m) { if (!c) throw new Error(m || 'Assertion failed'); }
+function includes(text, sub, m) { assert(text.includes(sub), m || `Expected "${sub}" in text`); }
+
+// --- Check Puppeteer availability ---
+function checkPuppeteer() {
+  try { import.meta.resolve('puppeteer'); return 'puppeteer'; }
+  catch { try { import.meta.resolve('puppeteer-core'); return 'puppeteer-core'; } catch { return null; } }
+}
+const puppeteerPkg = checkPuppeteer();
+
+// ================================================================
+// Unit tests
+// ================================================================
+console.log('\nUnit tests\n');
+
+t('classifyColors returns valid structure', async () => {
+  const { classifyColors } = await import('../scripts/classify-colors.js');
+  const r = classifyColors([], 'light');
+  assert(r.colors && typeof r.colors === 'object');
+  assert(Array.isArray(r.uncertain));
+});
+
+t('classifyTypography returns valid structure', async () => {
+  const { classifyTypography } = await import('../scripts/classify-typography.js');
+  const r = classifyTypography([]);
+  assert(r.typography && typeof r.typography === 'object');
+  assert(Array.isArray(r.uncertain));
+});
+
+t('classifySpacing returns valid structure', async () => {
+  const { classifySpacing } = await import('../scripts/classify-spacing.js');
+  assert((classifySpacing([])).spacing);
+});
+
+t('classifyRounded returns valid structure', async () => {
+  const { classifyRounded } = await import('../scripts/classify-rounded.js');
+  assert((classifyRounded([])).rounded);
+});
+
+t('colors cluster neutrals vs accents', async () => {
+  const { classifyColors } = await import('../scripts/classify-colors.js');
+  const m = [
+    { backgroundColor: 'rgba(255,255,255,1)', color: 'rgba(0,0,0,1)', borderColor: 'rgba(0,0,0,0)', width: 1440, height: 900, text: '' },
+    { backgroundColor: 'rgba(255,0,0,1)', color: 'rgba(255,255,255,1)', borderColor: 'rgba(0,0,0,0)', width: 100, height: 48, text: 'Click' },
+  ];
+  const r = classifyColors(m, 'light');
+  assert(Object.keys(r.colors).length >= 2, `Expected >=2 colors, got ${Object.keys(r.colors).length}`);
+  assert(r.colors.surface, 'Expected surface color');
+  assert(r.colors.tertiary, 'Expected accent color (tertiary)');
+});
+
+t('dark mode classification differs from light', async () => {
+  const { classifyColors } = await import('../scripts/classify-colors.js');
+  // Dark mode: dark bg = surface, light text = on-surface, bright accent
+  const m = [
+    { backgroundColor: 'rgba(10,10,30,1)', color: 'rgba(220,220,240,1)', borderColor: 'rgba(0,0,0,0)', width: 1440, height: 900, text: '' },
+    { backgroundColor: 'rgba(200,200,210,1)', color: 'rgba(10,10,30,1)', borderColor: 'rgba(0,0,0,0)', width: 300, height: 200, text: 'Card' },
+    { backgroundColor: 'rgba(100,150,255,1)', color: 'rgba(255,255,255,1)', borderColor: 'rgba(0,0,0,0)', width: 120, height: 48, text: 'Click' },
+  ];
+  const light = classifyColors(m, 'light');
+  const dark = classifyColors(m, 'dark');
+  assert(light.colors.surface !== dark.colors.surface || Object.keys(light.colors).length > 1,
+    'Dark mode should produce different or equivalent color assignments');
+});
+
+t('typography detects Inter from mock styles', async () => {
+  const { classifyTypography } = await import('../scripts/classify-typography.js');
+  const m = [
+    { text: 'Heading', fontFamily: 'Inter', fontSize: '48px', fontWeight: '700', lineHeight: '1.1', letterSpacing: '-0.02em', tag: 'h1' },
+    { text: 'Body', fontFamily: 'Inter', fontSize: '16px', fontWeight: '400', lineHeight: '1.5', letterSpacing: 'normal', tag: 'p' },
+    { text: 'Caption', fontFamily: 'Inter', fontSize: '12px', fontWeight: '600', lineHeight: '1.33', letterSpacing: '0.05em', tag: 'span' },
+  ];
+  const r = classifyTypography(m);
+  assert(Object.keys(r.typography).length >= 2, `Expected >=2 levels, got ${Object.keys(r.typography).length}`);
+});
+
+t('spacing computes GCD correctly', async () => {
+  const { classifySpacing } = await import('../scripts/classify-spacing.js');
+  const m = [];
+  for (let i = 0; i < 4; i++) m.push({ padding: '16px', margin: '8px', gap: '8px' });
+  const r = classifySpacing(m);
+  assert(r.spacing.unit === '8px', `Expected 8px, got ${r.spacing.unit}`);
+  assert(r.spacing.sm === '16px', `Expected 16px sm, got ${r.spacing.sm}`);
+});
+
+t('spacing detects half-step', async () => {
+  const { classifySpacing } = await import('../scripts/classify-spacing.js');
+  const m = [];
+  for (let i = 0; i < 4; i++) m.push({ padding: '16px', margin: '4px', gap: '4px' });
+  const r = classifySpacing(m);
+  assert(r.spacing.half || r.spacing.unit, 'Should detect unit or half-step');
+});
+
+t('rounded detects full pill value', async () => {
+  const { classifyRounded } = await import('../scripts/classify-rounded.js');
+  const m = [{ borderRadius: '16px' },{ borderRadius: '16px' },{ borderRadius: '9999px' },{ borderRadius: '9999px' }];
+  assert(classifyRounded(m).rounded.full);
+});
+
+t('rounded detects none for zero-radius', async () => {
+  const { classifyRounded } = await import('../scripts/classify-rounded.js');
+  assert(classifyRounded([{ borderRadius: '0px' },{ borderRadius: '0px' }]).rounded.none);
+});
+
+t('detectComponents finds buttons and cards', async () => {
+  const { detectComponents } = await import('../scripts/detect-components.js');
+  const m = [
+    { isButton: true, width: 120, height: 48, backgroundColor: 'rgba(255,255,255,1)', color: 'rgba(0,0,0,1)', borderRadius: '24px', padding: '0 24px', text: 'Click' },
+    { isButton: false, width: 400, height: 200, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: '16px', padding: '24px', text: '' },
+    { isInput: true, width: 300, height: 48, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: '24px', padding: '20px', text: '' },
+  ];
+  const r = await detectComponents(m);
+  assert(Object.keys(r.components).length >= 2, `Expected >=2 components, got ${Object.keys(r.components).length}`);
+  assert(r.detectedPatterns.includes('button-primary') || r.detectedPatterns.includes('input-field'));
+});
+
+t('detectComponents returns empty on unstyleable input', async () => {
+  const { detectComponents } = await import('../scripts/detect-components.js');
+  const r = await detectComponents([]);
+  assert(Object.keys(r.components).length === 0);
+  assert(r.uncertain.length > 0, 'Should flag no components detected');
+});
+
+t('generateProse produces all 8 sections', async () => {
+  const { generateProse } = await import('../scripts/generate-prose.js');
+  const prose = generateProse({
+    name: 'Test', colors: { surface: '#FFF', 'on-surface': '#000', tertiary: '#E4002B' },
+    typography: { 'body-md': { fontFamily: 'Inter', fontSize: '16px', fontWeight: '400' } },
+    spacing: { unit: '8px' }, rounded: { sm: '4px' }, components: {},
+    hints: { dominantColorFamily: 'light', styleSignals: ['swiss'], fontCount: 1, glassDetected: false },
+    detectedPatterns: [],
+  });
+  ['## Overview','## Colors','## Typography','## Layout','## Elevation','## Shapes','## Components',"## Do's and Don'ts"]
+    .forEach(sec => assert(prose.includes(sec), `Missing: ${sec}`));
+});
+
+t('generateProse handles glassmorphism style', async () => {
+  const { generateProse } = await import('../scripts/generate-prose.js');
+  const prose = generateProse({
+    name: 'Glass', colors: { surface: '#0B1326' },
+    typography: {}, spacing: {}, rounded: {}, components: {},
+    hints: { dominantColorFamily: 'dark', styleSignals: ['glassmorphism'], fontCount: 1, glassDetected: true },
+    detectedPatterns: [],
+  });
+  assert(prose.includes('glassmorphism') || prose.includes('frosted'), 'Should mention glass/glassmorphism');
+});
+
+t('writeDESIGNmd produces valid DESIGN.md file', async () => {
+  const { writeDESIGNmd } = await import('../scripts/write-designd.js');
+  const tmp = '/tmp/ed-test-output.md';
+  writeDESIGNmd({
+    name: 'Test System', version: 'alpha',
+    colors: { primary: '#111', surface: '#FFF' },
+    typography: { 'body-md': { fontFamily: 'Inter', fontSize: '16px', fontWeight: '400' } },
+    spacing: { unit: '8px' }, rounded: { sm: '4px' },
+    components: { 'button-primary': { backgroundColor: '#E4002B', textColor: '#FFF', rounded: '4px' } },
+    prose: '## Overview\n\nTest.\n',
+    outputPath: tmp,
+  });
+  const c = readFileSync(tmp, 'utf8');
+  assert(c.startsWith('---\n'), 'Should start with YAML');
+  assert(c.includes('name: Test System'));
+  assert(c.includes('version: alpha'));
+  assert(c.includes('primary: "#111"'));
+  assert(c.includes('## Overview'));
+  assert(c.includes('button-primary:'));
+  unlinkSync(tmp);
+});
+
+t('writeDESIGNmd handles dark mode colors', async () => {
+  const { writeDESIGNmd } = await import('../scripts/write-designd.js');
+  const tmp = '/tmp/ed-test-dark.md';
+  writeDESIGNmd({
+    name: 'Dark', colors: { surface: '#111' }, typography: {}, spacing: {}, rounded: {}, components: {},
+    colorsDark: { surface: '#222', 'on-surface': '#EEE' },
+    prose: '## Overview\n\nDark.\n', outputPath: tmp,
+  });
+  const c = readFileSync(tmp, 'utf8');
+  assert(c.includes('colors-dark:'));
+  assert(c.includes('surface: "#222"'));
+  unlinkSync(tmp);
+});
+
+// ================================================================
+// Integration tests (requires Puppeteer)
+// ================================================================
+if (puppeteerPkg) {
+  console.log('\nIntegration tests (Puppeteer)\n');
+
+  t('BrowserExtractor launches and extracts', async () => {
+    const pm = await import(puppeteerPkg);
+    const { BrowserExtractor } = await import('../scripts/lib/browser.js');
+    const ex = new BrowserExtractor({ puppeteer: pm.default || pm });
+    const fixture = resolve(FIXTURES, 'swiss-grid/prototype.html');
+    const result = await ex.extract(fixture);
+    assert(result.light, 'Should have light mode extraction');
+    assert(result.light.styles && result.light.styles.length > 0, 'Should have styled elements');
+    assert(result.light.declaredFonts !== undefined, 'Should have declaredFonts');
+  });
+
+  t('BrowserExtractor extracts glassmorphism fixture', async () => {
+    const pm = await import(puppeteerPkg);
+    const { BrowserExtractor } = await import('../scripts/lib/browser.js');
+    const ex = new BrowserExtractor({ puppeteer: pm.default || pm });
+    const fixture = resolve(FIXTURES, 'glassmorphism-dark/prototype.html');
+    const result = await ex.extract(fixture);
+    const styles = result.light.styles;
+    assert(styles.length > 0);
+    const hasGlass = styles.some(s => s.backdropFilter && s.backdropFilter !== 'none');
+    // Note: file:// may not load Google Fonts CDN — expected
+    assert(result.light.declaredFonts !== undefined, 'Should collect <link> declarations even if unloaded');
+  });
+
+  t('BrowserExtractor handles minimal-no-styles fixture (degraded)', async () => {
+    const pm = await import(puppeteerPkg);
+    const { BrowserExtractor } = await import('../scripts/lib/browser.js');
+    const ex = new BrowserExtractor({ puppeteer: pm.default || pm });
+    const fixture = resolve(FIXTURES, 'minimal-no-styles/prototype.html');
+    const result = await ex.extract(fixture);
+    const styles = result.light.styles;
+    // Browser still computes defaults (transparent bg, inherit fonts)
+    assert(styles.length > 0, 'Should have DOM elements even without explicit styles');
+  });
+
+  t('Dark mode pass runs without error', async () => {
+    const pm = await import(puppeteerPkg);
+    const { BrowserExtractor } = await import('../scripts/lib/browser.js');
+    const ex = new BrowserExtractor({ puppeteer: pm.default || pm });
+    const fixture = resolve(FIXTURES, 'swiss-grid/prototype.html');
+    const result = await ex.extract(fixture);
+    // Swiss grid is light-only — dark should be null or have styles
+    assert(result.dark === null || result.dark.styles !== undefined, 'Dark pass should complete');
+  });
+} else {
+  console.log('\nIntegration tests (Puppeteer)\n');
+  skip('Puppeteer tests', 'Puppeteer not installed. Install with: npm install puppeteer');
+}
+
+// ================================================================
+// Hardening tests
+// ================================================================
+console.log('\nHardening tests\n');
+
+t('all 15 script modules resolve imports correctly', async () => {
+  const scripts = [
+    '../scripts/lib/constants.js',
+    '../scripts/lib/logging.js',
+    '../scripts/lib/retry.js',
+    '../scripts/lib/state.js',
+    '../scripts/lib/browser.js',
+    '../scripts/lib/validator.js',
+    '../scripts/collect-styles.js',
+    '../scripts/classify-colors.js',
+    '../scripts/classify-typography.js',
+    '../scripts/classify-spacing.js',
+    '../scripts/classify-rounded.js',
+    '../scripts/detect-components.js',
+    '../scripts/generate-prose.js',
+    '../scripts/write-designd.js',
+    '../scripts/extract.js',
+  ];
+  for (const script of scripts) {
+    try { await import(script); }
+    catch (e) {
+      if (e.code === 'ERR_MODULE_NOT_FOUND') throw new Error(`Broken import in ${script}: ${e.message}`);
+      if (!e.message.includes('puppeteer') && !e.message.includes('Cannot find package')) throw e;
+    }
+  }
+});
+
+t('classifyColors handles empty styles gracefully', async () => {
+  const { classifyColors } = await import('../scripts/classify-colors.js');
+  const r = classifyColors([], 'light');
+  assert(Object.keys(r.colors).length === 0);
+  assert(r.uncertain.length > 0 || typeof r.uncertain === 'object');
+});
+
+t('classifySpacing handles all-zero values', async () => {
+  const { classifySpacing } = await import('../scripts/classify-spacing.js');
+  const m = [];
+  for (let i = 0; i < 4; i++) m.push({ padding: '0px', margin: '0px', gap: '0px' });
+  assert(classifySpacing(m).spacing.unit);
+});
+
+t('classifyRounded handles mixed px+rem units', async () => {
+  const { classifyRounded } = await import('../scripts/classify-rounded.js');
+  const m = [{ borderRadius: '16px' },{ borderRadius: '1rem' },{ borderRadius: '16px' },{ borderRadius: '1rem' }];
+  assert(classifyRounded(m).rounded.sm || classifyRounded(m).rounded.md);
+});
+
+// ================================================================
+// Summary
+// ================================================================
+console.log(`\n${'='.repeat(40)}`);
+console.log(`${p} passed, ${f} failed, ${s} skipped`);
+if (p === 0 && f === 0 && s > 0) {
+  console.log('All tests skipped. Install Puppeteer for full coverage.');
+  process.exit(0);
+}
+process.exit(f > 0 ? 1 : 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigpowers",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "description": "70 agent skills for spec-driven, test-first software development by solo developers",
   "main": "index.js",
   "scripts": {