prism-design 2.13.0

package/scripts/deploy-site.ts

@@ -0,0 +1,181 @@
+/**
+ * Prism — Deploy Site to /opt/clone-architect-site
+ *
+ * 1. Génère public/index.html via generate-site.ts
+ * 2. Copie public/index.html → /opt/clone-architect-site/index.html
+ * 3. Copie chaque extractions/{domain}/showcase/index.html → /opt/clone-architect-site/brands/{domain}/index.html
+ * 4. Crée /opt/clone-architect-site/404.html
+ * 5. Affiche le résumé du déploiement
+ *
+ * Usage: npx tsx scripts/deploy-site.ts
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, existsSync, copyFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { execSync } from 'child_process';
+
+const ROOT = process.cwd();
+const DEPLOY_DIR = '/opt/clone-architect-site';
+const CATALOG_PATH = join(ROOT, 'catalog', 'index.json');
+const PUBLIC_INDEX = join(ROOT, 'public', 'index.html');
+
+function writeWithSudo(targetPath: string, content: string): void {
+  // Try direct write first (paul owns /opt/clone-architect-site)
+  try {
+    const dir = dirname(targetPath);
+    mkdirSync(dir, { recursive: true });
+    writeFileSync(targetPath, content);
+  } catch {
+    // Fallback: sudo node write
+    const escaped = content.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$');
+    execSync(`sudo /usr/bin/node -e "
+      require('fs').mkdirSync(require('path').dirname('${targetPath}'), {recursive:true});
+      require('fs').writeFileSync('${targetPath}', \\\`${escaped}\\\`);
+    "`, { stdio: 'ignore' });
+  }
+}
+
+function copyWithSudo(src: string, dest: string): void {
+  try {
+    const dir = dirname(dest);
+    mkdirSync(dir, { recursive: true });
+    copyFileSync(src, dest);
+  } catch {
+    const dir = dirname(dest);
+    execSync(`sudo /usr/bin/node -e "
+      require('fs').mkdirSync('${dir}', {recursive:true});
+      require('fs').copyFileSync('${src}', '${dest}');
+    "`, { stdio: 'ignore' });
+  }
+}
+
+async function main() {
+  console.log('🚀 Prism — Deploy Site\n');
+
+  // Step 1 — Regenerate public/index.html
+  console.log('📄 Génération public/index.html...');
+  execSync('npx tsx scripts/generate-site.ts', { cwd: ROOT, stdio: 'inherit' });
+
+  // Step 2 — Ensure deploy dir exists
+  try {
+    mkdirSync(DEPLOY_DIR, { recursive: true });
+  } catch {
+    execSync(`sudo /usr/bin/node -e "require('fs').mkdirSync('${DEPLOY_DIR}', {recursive:true})"`, { stdio: 'ignore' });
+  }
+
+  // Step 2b — Generate og-image.png (non-fatal: SEO/social-preview only, must NOT abort deploy).
+  // A transient Playwright screenshot failure here previously killed the whole deploy before
+  // showcases were copied. og-image regeneration is cosmetic — the existing one is reused on failure.
+  console.log('\n🎨 Génération og-image.png...');
+  try {
+    execSync('npx tsx scripts/generate-og-image.ts', { cwd: ROOT, stdio: 'inherit' });
+  } catch (e) {
+    console.warn(`   ⚠️  og-image generation failed (non-fatal, keeping existing): ${(e as Error).message.split('\n')[0]}`);
+  }
+
+  // Step 3 — Copy index.html + og-image.png
+  console.log('\n📋 Copie index.html + og-image.png → /opt/clone-architect-site/...');
+  const indexContent = readFileSync(PUBLIC_INDEX, 'utf-8');
+  writeWithSudo(join(DEPLOY_DIR, 'index.html'), indexContent);
+  const ogPng = join(ROOT, 'public', 'og-image.png');
+  if (existsSync(ogPng)) copyWithSudo(ogPng, join(DEPLOY_DIR, 'og-image.png'));
+  console.log('   ✅ index.html + og-image.png déployés');
+
+  // Step 4 — Copy showcase for each brand
+  console.log('\n🎨 Déploiement des showcases...');
+  const catalogRaw = readFileSync(CATALOG_PATH, 'utf-8');
+  const catalog = JSON.parse(catalogRaw);
+
+  let deployed = 0;
+  let skipped = 0;
+
+  for (const brand of catalog.brands) {
+    const domain = brand.domain;
+    const showcaseSrc = join(ROOT, 'extractions', domain, 'showcase', 'index.html');
+    const showcaseDest = join(DEPLOY_DIR, 'brands', domain, 'index.html');
+
+    if (existsSync(showcaseSrc)) {
+      copyWithSudo(showcaseSrc, showcaseDest);
+      deployed++;
+    } else {
+      skipped++;
+    }
+  }
+
+  console.log(`   ✅ ${deployed} showcases déployés → /opt/clone-architect-site/brands/`);
+  if (skipped > 0) console.log(`   ⏭  ${skipped} brands sans showcase (extraction incomplète)`);
+
+  // Step 4b — Generate sitemap.xml (SEO indexation)
+  console.log('\n🗺️  Génération sitemap.xml...');
+  const baseUrl = 'https://prism.ps-tools.dev';
+  const today = new Date().toISOString().slice(0, 10);
+  const sitemapUrls = [
+    `<url><loc>${baseUrl}/</loc><lastmod>${today}</lastmod><changefreq>weekly</changefreq><priority>1.0</priority></url>`,
+  ];
+  for (const brand of catalog.brands) {
+    const domain = brand.domain;
+    const showcaseSrc = join(ROOT, 'extractions', domain, 'showcase', 'index.html');
+    if (existsSync(showcaseSrc)) {
+      sitemapUrls.push(`<url><loc>${baseUrl}/brands/${domain}/</loc><lastmod>${brand.extractedAt?.slice(0, 10) || today}</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>`);
+    }
+  }
+  const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${sitemapUrls.join('\n')}
+</urlset>`;
+  writeWithSudo(join(DEPLOY_DIR, 'sitemap.xml'), sitemapXml);
+  writeWithSudo(join(ROOT, 'public', 'sitemap.xml'), sitemapXml);
+  console.log(`   ✅ sitemap.xml généré (${sitemapUrls.length} URLs)`);
+
+  // Step 4c — robots.txt
+  const robotsTxt = `User-agent: *
+Allow: /
+Disallow: /api/
+
+Sitemap: ${baseUrl}/sitemap.xml
+`;
+  writeWithSudo(join(DEPLOY_DIR, 'robots.txt'), robotsTxt);
+  writeWithSudo(join(ROOT, 'public', 'robots.txt'), robotsTxt);
+  console.log(`   ✅ robots.txt déployé`);
+
+  // Step 5 — Create 404.html
+  const notFoundHtml = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Not found — Prism</title>
+<style>
+  body { margin: 0; background: #0a0a0b; color: #e5e5e5; font-family: -apple-system, sans-serif;
+         display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+  .wrap { text-align: center; }
+  h1 { font-size: 4rem; margin: 0; color: #5e6ad2; }
+  p { color: #888; margin: 12px 0 32px; }
+  a { display: inline-block; padding: 10px 24px; background: #5e6ad2; color: #fff;
+      border-radius: 6px; text-decoration: none; font-size: 14px; }
+  a:hover { background: #4f5bbf; }
+</style>
+</head>
+<body>
+  <div class="wrap">
+    <h1>404</h1>
+    <p>This brand hasn't been extracted yet.</p>
+    <a href="/">Browse 82 extractions ↗</a>
+  </div>
+</body>
+</html>`;
+
+  writeWithSudo(join(DEPLOY_DIR, '404.html'), notFoundHtml);
+  writeWithSudo(join(ROOT, 'public', '404.html'), notFoundHtml);
+  console.log('\n📄 404.html créé');
+
+  // Step 6 — Summary
+  console.log('\n══════════════════════════════════════════');
+  console.log('✅ DEPLOY COMPLET');
+  console.log(`   Site   : https://prism.ps-tools.dev`);
+  console.log(`   Brands : https://prism.ps-tools.dev/brands/linear.app/`);
+  console.log(`   Total  : ${deployed} showcases + index.html + 404.html`);
+  console.log('══════════════════════════════════════════\n');
+}
+
+main().catch(err => { console.error('❌ Deploy error:', err); process.exit(1); });

package/scripts/diff-snapshots.ts

@@ -0,0 +1,340 @@
+/**
+ * Prism — Snapshot Diff Feature (unique moat vs getdesign.md)
+ *
+ * Compare two extractions of the same domain (at different dates) and report
+ * what changed in the design tokens: colors, typography, spacing, components.
+ *
+ * Use case: "What did Linear change in the last 3 months?"
+ *
+ * Usage:
+ *   npx tsx scripts/diff-snapshots.ts <domain>                  # latest vs previous in archive/
+ *   npx tsx scripts/diff-snapshots.ts <domain> <date1> <date2>  # specific snapshots
+ *   npx tsx scripts/diff-snapshots.ts --create <domain>         # snapshot current state
+ */
+
+import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, copyFileSync } from 'fs';
+import { join } from 'path';
+
+const ROOT = process.cwd();
+const ARCHIVE_DIR = join(ROOT, 'extractions', '_snapshots');
+
+interface DesignTokens {
+  meta?: { extractedAt?: string; domain?: string };
+  colors?: {
+    background?: { primary?: string; secondary?: string; tertiary?: string };
+    text?: { primary?: string; secondary?: string; muted?: string };
+    accent?: any;
+    border?: any;
+  };
+  typography?: {
+    fontFamily?: { primary?: string; secondary?: string; mono?: string };
+    fontSize?: Record<string, string>;
+    fontWeight?: Record<string, string | number>;
+  };
+  spacing?: Record<string, string>;
+  borderRadius?: Record<string, string>;
+  shadows?: Record<string, string>;
+}
+
+function loadTokens(domain: string, snapshot?: string): DesignTokens | null {
+  let path: string;
+  if (snapshot) {
+    path = join(ARCHIVE_DIR, domain, snapshot, 'tokens.json');
+  } else {
+    path = join(ROOT, 'extractions', domain, 'tokens.json');
+  }
+  if (!existsSync(path)) return null;
+  return JSON.parse(readFileSync(path, 'utf-8'));
+}
+
+function listSnapshots(domain: string): string[] {
+  const dir = join(ARCHIVE_DIR, domain);
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).filter(d => /^\d{4}-\d{2}-\d{2}/.test(d)).sort();
+}
+
+function createSnapshot(domain: string): void {
+  const extractDir = join(ROOT, 'extractions', domain);
+  if (!existsSync(extractDir)) {
+    console.error(`❌ Extraction not found: ${extractDir}`);
+    process.exit(1);
+  }
+  const date = new Date().toISOString().slice(0, 10);
+  const snapDir = join(ARCHIVE_DIR, domain, date);
+  mkdirSync(snapDir, { recursive: true });
+
+  // Copy tokens.json + DESIGN.md
+  for (const file of ['tokens.json', 'DESIGN.md', 'extraction-summary.json']) {
+    const src = join(extractDir, file);
+    if (existsSync(src)) copyFileSync(src, join(snapDir, file));
+  }
+  console.log(`📸 Snapshot created: ${snapDir}`);
+}
+
+function diffValue(label: string, a: any, b: any): string[] {
+  const lines: string[] = [];
+  if (a === b) return lines;
+  if (a === undefined || a === null) {
+    lines.push(`  + ${label}: ${JSON.stringify(b)} (added)`);
+  } else if (b === undefined || b === null) {
+    lines.push(`  - ${label}: ${JSON.stringify(a)} (removed)`);
+  } else {
+    lines.push(`  ~ ${label}: ${JSON.stringify(a)} → ${JSON.stringify(b)}`);
+  }
+  return lines;
+}
+
+function diffObject(label: string, a: Record<string, any> = {}, b: Record<string, any> = {}): string[] {
+  const lines: string[] = [];
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const k of keys) {
+    if (a[k] !== b[k]) {
+      lines.push(...diffValue(`${label}.${k}`, a[k], b[k]));
+    }
+  }
+  return lines;
+}
+
+function diffTokens(before: DesignTokens, after: DesignTokens): {
+  summary: { changed: number; added: number; removed: number };
+  lines: string[];
+} {
+  const lines: string[] = [];
+
+  // Meta
+  const dateBefore = before.meta?.extractedAt?.slice(0, 10) || '?';
+  const dateAfter = after.meta?.extractedAt?.slice(0, 10) || '?';
+  lines.push(`\n📅 Comparison: ${dateBefore} → ${dateAfter}\n`);
+
+  // Colors
+  const colorChanges: string[] = [];
+  colorChanges.push(...diffObject('background', before.colors?.background, after.colors?.background));
+  colorChanges.push(...diffObject('text', before.colors?.text, after.colors?.text));
+  if (typeof before.colors?.accent === 'object' && typeof after.colors?.accent === 'object') {
+    colorChanges.push(...diffObject('accent', before.colors.accent, after.colors.accent));
+  }
+  if (typeof before.colors?.border === 'object' && typeof after.colors?.border === 'object') {
+    colorChanges.push(...diffObject('border', before.colors.border, after.colors.border));
+  }
+  if (colorChanges.length > 0) {
+    lines.push('🎨 Colors:');
+    lines.push(...colorChanges);
+  }
+
+  // Typography
+  const typoChanges: string[] = [];
+  typoChanges.push(...diffObject('fontFamily', before.typography?.fontFamily, after.typography?.fontFamily));
+  typoChanges.push(...diffObject('fontSize', before.typography?.fontSize, after.typography?.fontSize));
+  typoChanges.push(...diffObject('fontWeight', before.typography?.fontWeight, after.typography?.fontWeight));
+  if (typoChanges.length > 0) {
+    lines.push('\n🔤 Typography:');
+    lines.push(...typoChanges);
+  }
+
+  // Spacing
+  const spacingChanges = diffObject('spacing', before.spacing, after.spacing);
+  if (spacingChanges.length > 0) {
+    lines.push('\n📐 Spacing:');
+    lines.push(...spacingChanges);
+  }
+
+  // Border radius
+  const radiusChanges = diffObject('borderRadius', before.borderRadius, after.borderRadius);
+  if (radiusChanges.length > 0) {
+    lines.push('\n⭕ Border radius:');
+    lines.push(...radiusChanges);
+  }
+
+  // Shadows
+  const shadowChanges = diffObject('shadow', before.shadows, after.shadows);
+  if (shadowChanges.length > 0) {
+    lines.push('\n💧 Shadows:');
+    lines.push(...shadowChanges);
+  }
+
+  // Summary
+  let changed = 0, added = 0, removed = 0;
+  for (const l of lines) {
+    if (l.startsWith('  ~ ')) changed++;
+    else if (l.startsWith('  + ')) added++;
+    else if (l.startsWith('  - ')) removed++;
+  }
+
+  return {
+    summary: { changed, added, removed },
+    lines,
+  };
+}
+
+// ── Cross-domain comparison (Design Diff killer feature) ──────────────────
+
+function compareDomains(domainA: string, domainB: string): void {
+  const tokensA = loadTokens(domainA);
+  const tokensB = loadTokens(domainB);
+
+  if (!tokensA) {
+    console.error(`❌ No extraction for "${domainA}". Run: prism extract https://${domainA}`);
+    process.exit(1);
+  }
+  if (!tokensB) {
+    console.error(`❌ No extraction for "${domainB}". Run: prism extract https://${domainB}`);
+    process.exit(1);
+  }
+
+  console.log(`\n🔬 Prism Design Diff — Cross-brand comparison`);
+  console.log(`   ${domainA} ↔ ${domainB}\n`);
+
+  const lines: string[] = [];
+
+  // Helper: color contrast label
+  function colorLabel(val: string | undefined): string {
+    return val ? val : '—';
+  }
+
+  // Colors table
+  lines.push('🎨 COLORS\n');
+  const colorPairs = [
+    ['Background', tokensA.colors?.background?.primary, tokensB.colors?.background?.primary],
+    ['Background 2', tokensA.colors?.background?.secondary, tokensB.colors?.background?.secondary],
+    ['Text primary', tokensA.colors?.text?.primary, tokensB.colors?.text?.primary],
+    ['Text muted', tokensA.colors?.text?.muted, tokensB.colors?.text?.muted],
+    ['Accent', (tokensA.colors?.accent as any)?.primary, (tokensB.colors?.accent as any)?.primary],
+    ['Border', tokensA.colors?.border as string, tokensB.colors?.border as string],
+  ];
+  for (const [label, a, b] of colorPairs) {
+    const same = a === b ? ' ← same' : '';
+    lines.push(`  ${String(label).padEnd(14)} ${domainA.padEnd(20)} ${colorLabel(a as string)}`);
+    lines.push(`  ${''.padEnd(14)} ${domainB.padEnd(20)} ${colorLabel(b as string)}${same}\n`);
+  }
+
+  // Typography table
+  lines.push('\n🔤 TYPOGRAPHY\n');
+  const typoPairs = [
+    ['Font body', tokensA.typography?.fontFamily?.primary, tokensB.typography?.fontFamily?.primary],
+    ['Font mono', tokensA.typography?.fontFamily?.mono, tokensB.typography?.fontFamily?.mono],
+    ['Size body', tokensA.typography?.fontSize?.base, tokensB.typography?.fontSize?.base],
+    ['Size heading', tokensA.typography?.fontSize?.xl, tokensB.typography?.fontSize?.xl],
+    ['Size display', tokensA.typography?.fontSize?.['3xl'], tokensB.typography?.fontSize?.['3xl']],
+    ['Weight bold', String(tokensA.typography?.fontWeight?.bold || ''), String(tokensB.typography?.fontWeight?.bold || '')],
+    ['Letter-spacing', (tokensA.typography as any)?.letterSpacing?.tight, (tokensB.typography as any)?.letterSpacing?.tight],
+  ];
+  for (const [label, a, b] of typoPairs) {
+    if (!a && !b) continue;
+    const delta = a !== b ? ' ← differs' : '';
+    lines.push(`  ${String(label).padEnd(16)} ${String(a || '—').padEnd(28)} ${String(b || '—')}${delta}`);
+  }
+
+  // Spacing table
+  lines.push('\n\n📐 SPACING\n');
+  const spacingKeys = ['sm', 'md', 'base', 'lg', 'xl'];
+  for (const k of spacingKeys) {
+    const a = (tokensA.spacing as any)?.[k];
+    const b = (tokensB.spacing as any)?.[k];
+    if (!a && !b) continue;
+    const delta = a !== b ? ' ← differs' : '';
+    lines.push(`  ${k.padEnd(6)} ${String(a || '—').padEnd(12)} ${String(b || '—')}${delta}`);
+  }
+
+  // Border radius
+  lines.push('\n\n⭕ BORDER RADIUS\n');
+  const radiusKeys = ['sm', 'md', 'lg', 'full'];
+  for (const k of radiusKeys) {
+    const a = (tokensA.borderRadius as any)?.[k];
+    const b = (tokensB.borderRadius as any)?.[k];
+    if (!a && !b) continue;
+    const delta = a !== b ? ' ← differs' : '';
+    lines.push(`  ${k.padEnd(6)} ${String(a || '—').padEnd(12)} ${String(b || '—')}${delta}`);
+  }
+
+  // Delta summary
+  let diffCount = 0;
+  for (const l of lines) { if (l.includes('← differs')) diffCount++; }
+
+  lines.push('\n');
+  lines.push(`\n${'═'.repeat(60)}`);
+  lines.push(`📊 ${domainA} vs ${domainB}: ${diffCount} design differences found`);
+  lines.push(`${'═'.repeat(60)}\n`);
+
+  // Verdict
+  const aIsDark = (tokensA.meta as any)?.isDark ?? false;
+  const bIsDark = (tokensB.meta as any)?.isDark ?? false;
+  if (aIsDark !== bIsDark) {
+    lines.push(`💡 Mode: ${domainA} is ${aIsDark ? 'dark' : 'light'}-native, ${domainB} is ${bIsDark ? 'dark' : 'light'}-native`);
+  }
+
+  console.log(lines.join('\n'));
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  const createMode = args.includes('--create');
+  const compareMode = args.includes('--compare') || (args.length === 2 && !args[0].startsWith('--') && !args[1].startsWith('--') && args[0].includes('.') && args[1].includes('.'));
+
+  if (createMode) {
+    const domain = args[args.indexOf('--create') + 1];
+    if (!domain) {
+      console.error('Usage: --create <domain>');
+      process.exit(1);
+    }
+    createSnapshot(domain);
+    return;
+  }
+
+  // Cross-domain comparison: prism diff linear.app notion.so
+  if (compareMode) {
+    const domainArgs = args.filter(a => !a.startsWith('--'));
+    if (domainArgs.length < 2) {
+      console.error('Usage: prism diff <domain-a> <domain-b>');
+      process.exit(1);
+    }
+    compareDomains(domainArgs[0], domainArgs[1]);
+    return;
+  }
+
+  const domain = args[0];
+  if (!domain) {
+    console.error(`Usage:
+  prism diff <domain-a> <domain-b>             # compare two brands (Design Diff)
+  prism diff <domain>                          # current vs latest snapshot
+  prism diff <domain> <snap1> <snap2>          # specific snapshots
+  prism diff --create <domain>                 # snapshot current state`);
+    process.exit(1);
+  }
+
+  const snapshots = listSnapshots(domain);
+  let before: DesignTokens | null = null;
+  let after: DesignTokens | null = null;
+  let beforeLabel = '?', afterLabel = '?';
+
+  if (args.length >= 3 && !args[1].includes('.') && !args[2].includes('.')) {
+    beforeLabel = args[1];
+    afterLabel = args[2];
+    before = loadTokens(domain, beforeLabel);
+    after = loadTokens(domain, afterLabel);
+  } else if (snapshots.length >= 1) {
+    beforeLabel = snapshots[0];
+    afterLabel = 'current';
+    before = loadTokens(domain, beforeLabel);
+    after = loadTokens(domain);
+  } else {
+    console.error(`❌ No snapshots found for ${domain}. Create one with: prism diff --create ${domain}`);
+    process.exit(1);
+  }
+
+  if (!before || !after) {
+    console.error(`❌ Missing tokens.json (before: ${!!before}, after: ${!!after})`);
+    process.exit(1);
+  }
+
+  console.log(`\n🔍 Prism — Diff ${domain}`);
+  console.log(`   ${beforeLabel} → ${afterLabel}\n`);
+
+  const diff = diffTokens(before, after);
+  console.log(diff.lines.join('\n'));
+
+  console.log(`\n${'═'.repeat(42)}`);
+  console.log(`📊 Summary: ~${diff.summary.changed} changed · +${diff.summary.added} added · -${diff.summary.removed} removed`);
+  console.log(`${'═'.repeat(42)}\n`);
+}
+
+main().catch(err => { console.error(err); process.exit(1); });