prism-design 2.13.0

package/bin/clone-architect.mjs

@@ -0,0 +1,476 @@
+#!/usr/bin/env node
+/**
+ * Clone Architect — CLI entrypoint.
+ *
+ * Dispatches subcommands to the underlying TS scripts via tsx.
+ * Usage:
+ *   clone-architect extract <url>      Full pipeline: extract + analyze + tokenize + DESIGN.md
+ *   clone-architect tokenize <domain>  Re-tokenize an existing extraction
+ *   clone-architect design <domain>    Re-generate DESIGN.md for an existing extraction
+ *   clone-architect compare <domain>   Pixelmatch comparison vs original screenshots
+ *   clone-architect bank <subcmd>      Component bank (register/query/stats)
+ *   clone-architect --help             Show this help
+ *   clone-architect --version          Print version
+ */
+
+import { spawnSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join, resolve } from 'path';
+import { readFileSync, existsSync, writeFileSync, copyFileSync, mkdirSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const pkgRoot = resolve(__dirname, '..');
+
+const pkg = JSON.parse(readFileSync(join(pkgRoot, 'package.json'), 'utf-8'));
+
+const SCRIPTS = {
+  extract: 'scripts/clone.ts',         // full pipeline (aliased)
+  clone: 'scripts/clone.ts',           // full pipeline
+  tokenize: 'scripts/tokenize.ts',
+  design: 'scripts/generate-design-md.ts',
+  'generate-design': 'scripts/generate-design-md.ts',
+  compare: 'scripts/compare.ts',
+  bank: 'scripts/bank.ts',
+  analyze: 'scripts/analyze.ts',
+  enrich: 'scripts/narrative-enricher.ts',
+};
+
+const HELP = `
+Clone Architect v${pkg.version}
+Extract real design (computed CSS + screenshots + DESIGN.md) from any URL.
+
+Usage:
+  clone-architect <command> [args]
+
+Commands:
+  add <brand>            Install a DESIGN.md + tokens.json into your project
+                         Example: clone-architect add linear.app
+                         Example: clone-architect add stripe.com
+
+  list                   List all available brands in the catalog
+                         Example: clone-architect list
+
+  extract <url>          Full pipeline: extract CSS + screenshots + tokens + DESIGN.md
+                         Example: clone-architect extract https://linear.app
+
+  update <domain>        Re-extract a domain and regenerate DESIGN.md + tokens
+                         Backs up the current extraction before overwriting
+                         Example: clone-architect update linear.app
+
+  diff <domain>          Compare current DESIGN.md with the previous backup
+                         Shows what changed in the last update
+                         Example: clone-architect diff linear.app
+
+  tokenize <domain>      Re-tokenize an existing extraction
+                         Example: clone-architect tokenize linear.app
+
+  design <domain>        Re-generate DESIGN.md for an existing extraction
+                         Example: clone-architect design linear.app
+
+  enrich <domain>        Enrich DESIGN.md narrative via Claude API (WHY-level prose)
+                         Requires: ANTHROPIC_API_KEY env var
+                         Output: DESIGN.enriched.md (~$0.003/brand)
+                         Example: clone-architect enrich linear.app
+
+  compare <domain>       Pixelmatch comparison vs original screenshots
+                         Example: clone-architect compare linear.app
+
+  bank <subcmd>          Component bank (register/query/stats/show)
+                         Example: clone-architect bank stats
+
+Options:
+  --help, -h             Show this help
+  --version, -v          Print version
+
+Output:
+  All extractions are saved to ./extractions/<domain>/ containing:
+    raw-css.json         Ground-truth getComputedStyle() dump
+    tokens.json          Normalized design tokens
+    layout-analysis.md   Structural analysis
+    DESIGN.md            Narrative LLM-optimized design doc (10+ sections)
+    screenshots/         Desktop 1440px + Mobile 390px screenshots
+
+Docs: ${pkg.homepage || 'https://github.com/' + (pkg.repository?.url || 'clone-architect/clone-architect').replace(/^git\\+|\\.git$/g, '')}
+`;
+
+const [cmd, ...args] = process.argv.slice(2);
+
+if (!cmd || cmd === '--help' || cmd === '-h' || cmd === 'help') {
+  console.log(HELP);
+  process.exit(0);
+}
+
+if (cmd === '--version' || cmd === '-v') {
+  console.log(pkg.version);
+  process.exit(0);
+}
+
+// ── `add <brand>` — install DESIGN.md + tokens.json into cwd ──
+if (cmd === 'add') {
+  const brand = args[0];
+  if (!brand) {
+    console.error('Usage: clone-architect add <brand>');
+    console.error('Example: clone-architect add linear.app');
+    process.exit(1);
+  }
+
+  const catalogIndex = join(pkgRoot, 'catalog', 'index.json');
+  if (!existsSync(catalogIndex)) {
+    console.error('Catalog not found. This may be a packaging issue.');
+    process.exit(1);
+  }
+
+  const catalog = JSON.parse(readFileSync(catalogIndex, 'utf-8'));
+  const brandLower = brand.toLowerCase().replace(/^https?:\/\//, '').replace(/\/$/, '');
+
+  // Find brand in catalog (fuzzy: match domain or domain without .com/.app)
+  let found = catalog.brands.find(b => b.domain === brandLower);
+  if (!found) {
+    found = catalog.brands.find(b =>
+      b.domain.replace(/\.(com|app|io|dev|so|ai|co|net|org)$/, '') === brandLower.replace(/\.(com|app|io|dev|so|ai|co|net|org)$/, '')
+    );
+  }
+
+  if (!found) {
+    console.error(`Brand "${brand}" not found in catalog.`);
+    console.error(`Run \`clone-architect list\` to see all available brands.`);
+    console.error(`To extract a new URL: \`clone-architect extract https://${brand}\``);
+    process.exit(1);
+  }
+
+  // Source files — from catalog symlink or extractions/
+  const extractionDir = join(pkgRoot, 'extractions', found.domain);
+  const designSrc = join(extractionDir, 'DESIGN.md');
+  const tokensSrc = join(extractionDir, 'tokens.json');
+
+  const cwd = process.cwd();
+  const designDst = join(cwd, 'DESIGN.md');
+  const tokensDst = join(cwd, 'design-tokens.json');
+
+  let installed = [];
+
+  if (existsSync(designSrc)) {
+    copyFileSync(designSrc, designDst);
+    installed.push('DESIGN.md');
+  }
+
+  if (existsSync(tokensSrc)) {
+    copyFileSync(tokensSrc, tokensDst);
+    installed.push('design-tokens.json');
+  }
+
+  if (installed.length === 0) {
+    console.error(`Files for "${found.domain}" not found in package.`);
+    process.exit(1);
+  }
+
+  console.log(`\n✅ Installed ${found.domain} design system:\n`);
+  for (const f of installed) console.log(`   📄 ${f}`);
+  if (found.accent) console.log(`\n   🎨 Accent: ${found.accent}`);
+  console.log(`\nTell your AI: "Use DESIGN.md as reference before writing any UI."`);
+  console.log(`\nExtract a new site: clone-architect extract <url>`);
+  console.log('');
+  process.exit(0);
+}
+
+// ── `list` — show all catalog brands ──
+if (cmd === 'list') {
+  const catalogIndex = join(pkgRoot, 'catalog', 'index.json');
+  if (!existsSync(catalogIndex)) {
+    console.error('Catalog not found.');
+    process.exit(1);
+  }
+  const catalog = JSON.parse(readFileSync(catalogIndex, 'utf-8'));
+  // Convert rgb(r,g,b) accent to #hex for readable terminal output
+  function rgbToHexCli(rgb) {
+    const m = rgb.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)/);
+    if (!m) return rgb;
+    return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
+  }
+  console.log(`\nClone Architect Catalog — ${catalog.count} brands\n`);
+  for (const b of catalog.brands) {
+    const rawAccent = b.accent || '';
+    const accentHex = rawAccent.startsWith('rgb') ? rgbToHexCli(rawAccent) : rawAccent;
+    const accentDisplay = accentHex ? ` ${accentHex}` : '';
+    console.log(`  ${b.domain}${accentDisplay}`);
+  }
+  console.log(`\nInstall: clone-architect add <brand>`);
+  console.log(`Extract new: clone-architect extract <url>\n`);
+  process.exit(0);
+}
+
+// ── `random` — pick a random brand from catalog (discovery / inspiration) ──
+if (cmd === 'random') {
+  const catalogIndex = join(pkgRoot, 'catalog', 'index.json');
+  if (!existsSync(catalogIndex)) {
+    console.error('Catalog not found.');
+    process.exit(1);
+  }
+  const catalog = JSON.parse(readFileSync(catalogIndex, 'utf-8'));
+  const brands = catalog.brands || [];
+  if (brands.length === 0) {
+    console.error('Catalog is empty.');
+    process.exit(1);
+  }
+  const pick = brands[Math.floor(Math.random() * brands.length)];
+  console.log(`\n🎲 ${pick.domain}`);
+  if (pick.description) console.log(`   ${pick.description.slice(0, 200)}${pick.description.length > 200 ? '…' : ''}`);
+  if (pick.category) console.log(`   Category: ${pick.category}`);
+  if (pick.completeness) console.log(`   Score: ${pick.completeness}/100`);
+  if (pick.accent) console.log(`   Accent: ${pick.accent}`);
+  console.log(`\nInstall: clone-architect add ${pick.domain}`);
+  console.log(`View live: https://clone-architect.ps-tools.dev/${pick.domain}\n`);
+  process.exit(0);
+}
+
+// ── `search <keyword>` — fuzzy search across catalog ──
+if (cmd === 'search') {
+  const keyword = args[0];
+  if (!keyword) {
+    console.error('Usage: clone-architect search <keyword>');
+    console.error('Examples:');
+    console.error('  clone-architect search dark        # find dark-mode brands');
+    console.error('  clone-architect search fintech     # find Fintech category');
+    console.error('  clone-architect search inter       # find brands using Inter font');
+    process.exit(1);
+  }
+  const catalogIndex = join(pkgRoot, 'catalog', 'index.json');
+  if (!existsSync(catalogIndex)) {
+    console.error('Catalog not found.');
+    process.exit(1);
+  }
+  const catalog = JSON.parse(readFileSync(catalogIndex, 'utf-8'));
+  const brands = catalog.brands || [];
+  const q = keyword.toLowerCase();
+  const matches = brands.filter(b => {
+    const haystack = [
+      b.domain || '',
+      b.category || '',
+      b.font || '',
+      b.description || '',
+      b.dark ? 'dark mode' : 'light mode',
+    ].join(' ').toLowerCase();
+    return haystack.includes(q);
+  });
+  if (matches.length === 0) {
+    console.log(`\nNo brands matching "${keyword}".\n`);
+    console.log(`Try: clone-architect list  # browse all ${brands.length} brands\n`);
+    process.exit(0);
+  }
+  console.log(`\nFound ${matches.length} brand(s) matching "${keyword}":\n`);
+  for (const b of matches) {
+    const tag = b.completeness ? ` (${b.completeness}/100)` : '';
+    console.log(`  ${b.domain}${tag}`);
+    if (b.description) console.log(`    ${b.description.slice(0, 120)}${b.description.length > 120 ? '…' : ''}`);
+  }
+  console.log(`\nInstall any: clone-architect add <brand>\n`);
+  process.exit(0);
+}
+
+// ── `update <domain>` — re-extract + backup previous extraction ──
+if (cmd === 'update') {
+  const domain = args[0];
+  if (!domain) {
+    console.error('Usage: clone-architect update <domain>');
+    console.error('Example: clone-architect update linear.app');
+    process.exit(1);
+  }
+
+  const extractionDir = join(pkgRoot, 'extractions', domain);
+  const backupDir = join(pkgRoot, 'extractions', domain + '.backup-' + new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19));
+
+  // Backup existing extraction before overwriting
+  if (existsSync(extractionDir)) {
+    // Use cp -r for backup
+    const cpResult = spawnSync('cp', ['-r', extractionDir, backupDir], { stdio: 'inherit' });
+    if (cpResult.status === 0) {
+      console.log(`📦 Backed up existing extraction to ${backupDir}`);
+    } else {
+      console.warn(`⚠️  Could not create backup — proceeding without backup`);
+    }
+  }
+
+  console.log(`\n🔄 Re-extracting ${domain}...`);
+  const url = domain.startsWith('http') ? domain : `https://${domain}`;
+
+  const localTsx2 = join(pkgRoot, 'node_modules', '.bin', 'tsx');
+  const tsxCmd2 = existsSync(localTsx2) ? localTsx2 : 'npx';
+  const tsxArgs2 = existsSync(localTsx2)
+    ? [join(pkgRoot, 'scripts/clone.ts'), url]
+    : ['tsx', join(pkgRoot, 'scripts/clone.ts'), url];
+
+  const result2 = spawnSync(tsxCmd2, tsxArgs2, { stdio: 'inherit', cwd: process.cwd() });
+  if (result2.error) {
+    console.error('Failed to run extraction:', result2.error.message);
+    process.exit(3);
+  }
+
+  console.log(`\n✅ Update complete. Backup at: ${backupDir}`);
+  console.log(`Run \`clone-architect diff ${domain}\` to see what changed.`);
+  process.exit(result2.status ?? 0);
+}
+
+// ── `diff <domain>` — compare current DESIGN.md with latest backup ──
+if (cmd === 'diff') {
+  const domain = args[0];
+  if (!domain) {
+    console.error('Usage: clone-architect diff <domain>');
+    console.error('Example: clone-architect diff linear.app');
+    process.exit(1);
+  }
+
+  const extractionDir = join(pkgRoot, 'extractions', domain);
+  const currentDesign = join(extractionDir, 'DESIGN.md');
+  const currentTokens = join(extractionDir, 'tokens.json');
+
+  if (!existsSync(currentDesign)) {
+    console.error(`No DESIGN.md found for ${domain}. Run: clone-architect extract https://${domain}`);
+    process.exit(1);
+  }
+
+  // Find most recent backup
+  const extractionsDir = join(pkgRoot, 'extractions');
+  const backupPrefix = domain + '.backup-';
+  let backups = [];
+  try {
+    const { readdirSync: rds } = await import('fs');
+    backups = rds(extractionsDir)
+      .filter(f => f.startsWith(backupPrefix))
+      .sort()
+      .reverse();
+  } catch { /* no backups */ }
+
+  if (backups.length === 0) {
+    console.log(`No backup found for ${domain}.`);
+    console.log(`Run \`clone-architect update ${domain}\` to create one.`);
+
+    // Still show metadata from current DESIGN.md
+    const content = readFileSync(currentDesign, 'utf-8');
+    const scoreMatch = content.match(/^completeness:\s*(\d+)/m);
+    const dateMatch = content.match(/^extracted_at:\s*"?([^"\n]+)"?/m);
+    if (scoreMatch || dateMatch) {
+      console.log(`\nCurrent extraction:`);
+      if (scoreMatch) console.log(`  Completeness: ${scoreMatch[1]}/100`);
+      if (dateMatch) console.log(`  Extracted: ${dateMatch[1]}`);
+    }
+    process.exit(0);
+  }
+
+  const latestBackup = join(extractionsDir, backups[0]);
+  const backupDesign = join(latestBackup, 'DESIGN.md');
+  const backupTokens = join(latestBackup, 'tokens.json');
+
+  console.log(`\n🔍 Diffing ${domain}:`);
+  console.log(`  Current: ${extractionDir}`);
+  console.log(`  Backup:  ${latestBackup}\n`);
+
+  // Token diff — compare accent, bg, font
+  if (existsSync(currentTokens) && existsSync(backupTokens)) {
+    try {
+      const curr = JSON.parse(readFileSync(currentTokens, 'utf-8'));
+      const prev = JSON.parse(readFileSync(backupTokens, 'utf-8'));
+
+      const diffs = [];
+      const COMPARE_PATHS = [
+        ['colors.background.primary', 'Background'],
+        ['colors.text.primary', 'Primary text'],
+        ['colors.accent.primary', 'Accent'],
+        ['colors.border', 'Border'],
+        ['typography.fontFamily.primary', 'Font'],
+      ];
+
+      for (const [path, label] of COMPARE_PATHS) {
+        const getPath = (obj, p) => p.split('.').reduce((o, k) => o?.[k], obj);
+        const currVal = getPath(curr, path);
+        const prevVal = getPath(prev, path);
+        if (currVal && prevVal && currVal !== prevVal) {
+          diffs.push(`  ${label}: ${prevVal} → ${currVal}`);
+        }
+      }
+
+      if (diffs.length > 0) {
+        console.log('Token changes:');
+        diffs.forEach(d => console.log(d));
+      } else {
+        console.log('No token changes detected.');
+      }
+    } catch { /* ignore parse errors */ }
+    console.log('');
+  }
+
+  // DESIGN.md diff — show line count change and completeness diff
+  if (existsSync(backupDesign)) {
+    const currContent = readFileSync(currentDesign, 'utf-8');
+    const prevContent = readFileSync(backupDesign, 'utf-8');
+    const currLines = currContent.split('\n').length;
+    const prevLines = prevContent.split('\n').length;
+    const currScore = currContent.match(/^completeness:\s*(\d+)/m)?.[1];
+    const prevScore = prevContent.match(/^completeness:\s*(\d+)/m)?.[1];
+    const currDate = currContent.match(/^extracted_at:\s*"?([^"\n]+)"?/m)?.[1];
+    const prevDate = prevContent.match(/^extracted_at:\s*"?([^"\n]+)"?/m)?.[1];
+
+    console.log('DESIGN.md diff:');
+    console.log(`  Lines: ${prevLines} → ${currLines} (${currLines >= prevLines ? '+' : ''}${currLines - prevLines})`);
+    if (currScore && prevScore) {
+      const diff = parseInt(currScore) - parseInt(prevScore);
+      console.log(`  Completeness: ${prevScore}/100 → ${currScore}/100 (${diff >= 0 ? '+' : ''}${diff})`);
+    }
+    if (currDate && prevDate && currDate !== prevDate) {
+      console.log(`  Extracted: ${prevDate.slice(0, 10)} → ${currDate.slice(0, 10)}`);
+    }
+
+    // Count section headers
+    const currSections = (currContent.match(/^## \d+\./gm) || []).length;
+    const prevSections = (prevContent.match(/^## \d+\./gm) || []).length;
+    if (currSections !== prevSections) {
+      console.log(`  Sections: ${prevSections} → ${currSections}`);
+    }
+
+    // Run word diff via system diff if available
+    const diffResult = spawnSync('diff', ['--unified=0', backupDesign, currentDesign], { encoding: 'utf-8' });
+    if (diffResult.status !== 0 && diffResult.stdout) {
+      const diffLines = diffResult.stdout.split('\n');
+      const addedLines = diffLines.filter(l => l.startsWith('+') && !l.startsWith('+++'));
+      const removedLines = diffLines.filter(l => l.startsWith('-') && !l.startsWith('---'));
+      if (addedLines.length + removedLines.length > 0) {
+        console.log(`\n  +${addedLines.length} lines added, -${removedLines.length} lines removed`);
+      }
+    }
+    console.log('');
+  }
+
+  process.exit(0);
+}
+
+const script = SCRIPTS[cmd];
+if (!script) {
+  console.error(`Unknown command: "${cmd}"`);
+  console.error(`Run \`clone-architect --help\` for available commands.`);
+  process.exit(1);
+}
+
+const scriptPath = join(pkgRoot, script);
+if (!existsSync(scriptPath)) {
+  console.error(`Internal error: script not found: ${scriptPath}`);
+  console.error(`This is a packaging bug — please report it.`);
+  process.exit(2);
+}
+
+// Resolve tsx binary — prefer local node_modules/.bin, fall back to npx tsx
+const localTsx = join(pkgRoot, 'node_modules', '.bin', 'tsx');
+const tsxCmd = existsSync(localTsx) ? localTsx : 'npx';
+const tsxArgs = existsSync(localTsx) ? [scriptPath, ...args] : ['tsx', scriptPath, ...args];
+
+const result = spawnSync(tsxCmd, tsxArgs, {
+  stdio: 'inherit',
+  cwd: process.cwd(),
+});
+
+if (result.error) {
+  console.error('Failed to invoke tsx:', result.error.message);
+  console.error('Make sure tsx is installed: npm install -g tsx');
+  process.exit(3);
+}
+
+process.exit(result.status ?? 0);