prism-design 2.13.0

package/scripts/bank.ts

@@ -0,0 +1,374 @@
+#!/usr/bin/env ts-node
+/**
+ * bank.ts — Prism Component Bank CLI
+ *
+ * Usage:
+ *   npx tsx scripts/bank.ts register --all
+ *   npx tsx scripts/bank.ts register --domain addictsneakers.com
+ *   npx tsx scripts/bank.ts query --type button --tag dark
+ *   npx tsx scripts/bank.ts query --domain addictsneakers.com
+ *   npx tsx scripts/bank.ts stats
+ *   npx tsx scripts/bank.ts show <component-id>
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { registerDomain, BANK_DIR, BankIndex, BankCatalog, BankIndexEntry } from './bank-register.js';
+
+const EXTRACTIONS_DIR = path.join(process.cwd(), 'extractions');
+
+// ─── CLI Arg Parsing ──────────────────────────────────────────────────────────
+
+function parseArgs(argv: string[]): { cmd: string; flags: Record<string, string | boolean> } {
+  const args = argv.slice(2);
+  const cmd  = args[0] || 'stats';
+  const flags: Record<string, string | boolean> = {};
+
+  for (let i = 1; i < args.length; i++) {
+    const a = args[i];
+    if (a.startsWith('--')) {
+      const key = a.slice(2);
+      const next = args[i + 1];
+      if (next && !next.startsWith('--')) {
+        flags[key] = next;
+        i++;
+      } else {
+        flags[key] = true;
+      }
+    } else if (!a.startsWith('--')) {
+      // positional after command (e.g., bank show <id>)
+      if (!flags['_pos']) flags['_pos'] = a;
+      else if (!flags['_pos2']) flags['_pos2'] = a;
+    }
+  }
+  return { cmd, flags };
+}
+
+// ─── Load Bank ────────────────────────────────────────────────────────────────
+
+function loadIndex(): BankIndex {
+  const p = path.join(BANK_DIR, '_index.json');
+  if (!fs.existsSync(p)) return { version: '1.0.0', updatedAt: '', components: [] };
+  return JSON.parse(fs.readFileSync(p, 'utf-8'));
+}
+
+function loadCatalog(): BankCatalog {
+  const p = path.join(BANK_DIR, '_catalog.json');
+  if (!fs.existsSync(p)) return { version: '1.0.0', updatedAt: '', byType: {}, byDomain: {}, byTags: {} };
+  return JSON.parse(fs.readFileSync(p, 'utf-8'));
+}
+
+// ─── Commands ────────────────────────────────────────────────────────────────
+
+async function cmdRegister(flags: Record<string, string | boolean>): Promise<void> {
+  console.log('');
+  console.log('┌─────────────────────────────────────────┐');
+  console.log('│  🏦 Prism — Component Bank    │');
+  console.log('│  Command: register                      │');
+  console.log('└─────────────────────────────────────────┘');
+  console.log('');
+
+  if (flags['all']) {
+    // Register all domains that have tokens.json
+    const domains = fs.readdirSync(EXTRACTIONS_DIR).filter(d => {
+      const stat = fs.statSync(path.join(EXTRACTIONS_DIR, d));
+      if (!stat.isDirectory()) return false;
+      return fs.existsSync(path.join(EXTRACTIONS_DIR, d, 'tokens.json'));
+    });
+
+    console.log(`📦 ${domains.length} extractions trouvées — enregistrement en cours...\n`);
+    let total = 0;
+    for (const d of domains) {
+      total += await registerDomain(d, true);
+    }
+    console.log(`\n✅ Total : ${total} composants dans la banque`);
+    printBankSummary();
+
+  } else if (flags['domain']) {
+    const domain = flags['domain'] as string;
+    console.log(`📦 Enregistrement de ${domain}...\n`);
+    const count = await registerDomain(domain, true);
+    if (count > 0) {
+      console.log(`\n✅ ${count} composants enregistrés`);
+    }
+
+  } else {
+    console.log('Usage:');
+    console.log('  npx tsx scripts/bank.ts register --all');
+    console.log('  npx tsx scripts/bank.ts register --domain <domain>');
+  }
+}
+
+function cmdQuery(flags: Record<string, string | boolean>): void {
+  const index = loadIndex();
+
+  if (index.components.length === 0) {
+    console.log('⚠️  La banque est vide. Lance d\'abord: npx tsx scripts/bank.ts register --all');
+    return;
+  }
+
+  let results = [...index.components];
+
+  // Filters
+  if (flags['type'])   results = results.filter(c => c.type === flags['type']);
+  if (flags['domain']) results = results.filter(c => c.domain === flags['domain'] || c.domain.includes(flags['domain'] as string));
+  if (flags['tag'])    results = results.filter(c => c.tags.includes(flags['tag'] as string));
+  if (flags['dark'])   results = results.filter(c => c.isDark === true);
+  if (flags['light'])  results = results.filter(c => c.isDark === false);
+
+  const limit = flags['limit'] ? parseInt(flags['limit'] as string) : 30;
+  const total = results.length;
+  results = results.slice(0, limit);
+
+  console.log('');
+  console.log(`🔍 ${total} composant(s) trouvé(s)${results.length < total ? ` (affichage: ${results.length})` : ''}`);
+  if (flags['type'] || flags['domain'] || flags['tag'] || flags['dark'] || flags['light']) {
+    const applied = [];
+    if (flags['type'])   applied.push(`type=${flags['type']}`);
+    if (flags['domain']) applied.push(`domain=${flags['domain']}`);
+    if (flags['tag'])    applied.push(`tag=${flags['tag']}`);
+    if (flags['dark'])   applied.push('dark');
+    if (flags['light'])  applied.push('light');
+    console.log(`   Filtres: ${applied.join(', ')}`);
+  }
+  console.log('');
+
+  if (results.length === 0) {
+    console.log('  Aucun résultat. Essaie sans filtres ou avec d\'autres valeurs.');
+    return;
+  }
+
+  for (const c of results) {
+    const darkLabel = c.isDark ? '🌑' : '☀️ ';
+    console.log(`  ${darkLabel} [${c.id}]`);
+    console.log(`     ${c.domain}  /  ${c.type}  /  "${c.label}"`);
+    console.log(`     Accent: ${c.accent}  |  Tags: ${c.tags.filter(t => !['button','card','heading','input','badge','link'].includes(t)).join(', ')}`);
+    console.log('');
+  }
+
+  console.log(`─────────────────────────────────────────────────`);
+  console.log(`💡 Détail: npx tsx scripts/bank.ts show <id>`);
+}
+
+function cmdShow(flags: Record<string, string | boolean>): void {
+  const id = flags['_pos'] as string || flags['id'] as string;
+  if (!id) {
+    console.error('Usage: npx tsx scripts/bank.ts show <component-id>');
+    return;
+  }
+
+  const snapshotPath = path.join(BANK_DIR, id, 'snapshot.json');
+  if (!fs.existsSync(snapshotPath)) {
+    console.error(`❌ Composant introuvable: ${id}`);
+    const index = loadIndex();
+    const similar = index.components.filter(c => c.id.includes(id.split('--')[0]));
+    if (similar.length) {
+      console.log('  Suggestions:');
+      for (const s of similar.slice(0, 5)) console.log(`    ${s.id}`);
+    }
+    return;
+  }
+
+  const snap = JSON.parse(fs.readFileSync(snapshotPath, 'utf-8'));
+  console.log('');
+  console.log(`┌── Component Snapshot ────────────────────────────`);
+  console.log(`│  ID:      ${snap.id}`);
+  console.log(`│  Domain:  ${snap.domain}`);
+  console.log(`│  Type:    ${snap.componentType}  (${snap.componentLabel})`);
+  console.log(`│  URL:     ${snap.url}`);
+  console.log(`│  Dark:    ${snap.siteTokens.isDark ? 'yes' : 'no'}`);
+  console.log(`│  Tags:    ${snap.tags.join(', ')}`);
+  console.log(`└──────────────────────────────────────────────────`);
+  console.log('');
+  console.log('Site Tokens:');
+  console.log(`  Background: ${snap.siteTokens.colors.background}`);
+  console.log(`  Text:       ${snap.siteTokens.colors.text}`);
+  console.log(`  Accent:     ${snap.siteTokens.colors.accent}`);
+  console.log(`  Font:       ${snap.siteTokens.typography.primary}`);
+  console.log(`  Radius md:  ${snap.siteTokens.borderRadius.md}`);
+  console.log('');
+  console.log('Component Styles:');
+  const styles = snap.styles;
+  const styleKeys = ['backgroundColor', 'color', 'padding', 'borderRadius', 'border', 'fontSize', 'fontWeight', 'fontFamily', 'boxShadow', 'width', 'height'];
+  for (const k of styleKeys) {
+    if (styles[k] && styles[k] !== 'none' && styles[k] !== 'normal') {
+      console.log(`  ${k}: ${styles[k]}`);
+    }
+  }
+  if (snap.designMdPath) {
+    console.log('');
+    console.log(`📄 DESIGN.md: bank/${snap.designMdPath}`);
+  }
+  if (snap.screenshotPath) {
+    console.log(`🖼  Screenshot: bank/${snap.screenshotPath}`);
+  }
+}
+
+function cmdStats(): void {
+  const index   = loadIndex();
+  const catalog = loadCatalog();
+
+  const total   = index.components.length;
+  const domains = Object.keys(catalog.byDomain).length;
+
+  console.log('');
+  console.log('┌─────────────────────────────────────────────────┐');
+  console.log('│  📊 Prism — Component Bank Stats      │');
+  console.log('└─────────────────────────────────────────────────┘');
+  console.log('');
+
+  if (total === 0) {
+    console.log('  La banque est vide. Lance: npx tsx scripts/bank.ts register --all');
+    return;
+  }
+
+  console.log(`  Total composants : ${total}`);
+  console.log(`  Domaines         : ${domains}`);
+  console.log(`  Dernière màj     : ${index.updatedAt ? new Date(index.updatedAt).toLocaleString('fr-FR') : 'N/A'}`);
+  console.log('');
+
+  // By type
+  console.log('  Par type:');
+  const typeEntries = Object.entries(catalog.byType).sort((a, b) => b[1].length - a[1].length);
+  const maxTypeCount = typeEntries[0]?.[1].length || 1;
+  for (const [type, ids] of typeEntries) {
+    const bar = '█'.repeat(Math.round((ids.length / maxTypeCount) * 20));
+    console.log(`    ${type.padEnd(12)} ${String(ids.length).padStart(3)}  ${bar}`);
+  }
+  console.log('');
+
+  // By domain
+  console.log('  Par domaine:');
+  const domainEntries = Object.entries(catalog.byDomain).sort((a, b) => b[1].length - a[1].length);
+  for (const [domain, ids] of domainEntries) {
+    const dark = index.components.find(c => c.domain === domain)?.isDark;
+    const themeIcon = dark ? '🌑' : '☀️ ';
+    console.log(`    ${themeIcon} ${domain.padEnd(35)} ${String(ids.length).padStart(3)} composants`);
+  }
+  console.log('');
+
+  // By tag (top 10)
+  console.log('  Tags populaires:');
+  const tagEntries = Object.entries(catalog.byTags)
+    .filter(([t]) => !['button','card','heading','input','badge','link','form','typography'].includes(t))
+    .sort((a, b) => b[1].length - a[1].length)
+    .slice(0, 12);
+  for (const [tag, ids] of tagEntries) {
+    const bar = '▪'.repeat(Math.min(ids.length, 20));
+    console.log(`    ${tag.padEnd(20)} ${String(ids.length).padStart(3)}  ${bar}`);
+  }
+  console.log('');
+}
+
+function printBankSummary(): void {
+  const index = loadIndex();
+  console.log('');
+  console.log(`📊 Banque mise à jour — ${index.components.length} composants au total`);
+  console.log(`   Commandes disponibles:`);
+  console.log(`   npx tsx scripts/bank.ts stats`);
+  console.log(`   npx tsx scripts/bank.ts query --type button`);
+  console.log(`   npx tsx scripts/bank.ts inject <id> [--retheme domain] [--preset name]`);
+  console.log(`   npx tsx scripts/bank.ts diff <domain1> <domain2>`);
+}
+
+// ─── Diff: compare tokens of 2 domains ───────────────────────────────────────
+
+function cmdDiff(flags: Record<string, string | boolean>): void {
+  const domain1 = flags['_pos'] as string;
+  const domain2 = flags['_pos2'] as string;
+  if (!domain1 || !domain2) {
+    console.error('Usage: npx tsx scripts/bank.ts diff <domain1> <domain2>');
+    return;
+  }
+
+  const load = (domain: string) => {
+    const p = path.join(EXTRACTIONS_DIR, domain, 'tokens.json');
+    if (!fs.existsSync(p)) return null;
+    const t = JSON.parse(fs.readFileSync(p, 'utf-8'));
+    return {
+      bg: t.colors?.background?.primary || '?',
+      text: t.colors?.text?.primary || '?',
+      accent: t.colors?.accent?.primary || '?',
+      border: t.colors?.border || '?',
+      font: t.typography?.fontFamily?.primary || '?',
+      radiusMd: t.borderRadius?.md || '?',
+      spacingMd: t.spacing?.md || '?',
+    };
+  };
+
+  const t1 = load(domain1);
+  const t2 = load(domain2);
+  if (!t1) { console.error(`❌ Tokens not found: ${domain1}`); return; }
+  if (!t2) { console.error(`❌ Tokens not found: ${domain2}`); return; }
+
+  console.log('');
+  console.log(`┌─────────────────────────────────────────────────────────────┐`);
+  console.log(`│  🔍 Token Diff: ${domain1} vs ${domain2}`);
+  console.log(`└─────────────────────────────────────────────────────────────┘`);
+  console.log('');
+
+  const rows: [string, string, string][] = [
+    ['Background',   t1.bg,        t2.bg],
+    ['Text',         t1.text,      t2.text],
+    ['Accent',       t1.accent,    t2.accent],
+    ['Border',       t1.border,    t2.border],
+    ['Font',         t1.font,      t2.font],
+    ['Radius (md)',  t1.radiusMd,  t2.radiusMd],
+    ['Spacing (md)', t1.spacingMd, t2.spacingMd],
+  ];
+
+  let changes = 0;
+  for (const [label, v1, v2] of rows) {
+    const same = v1 === v2;
+    const marker = same ? '  =' : '  ≠';
+    if (!same) changes++;
+    console.log(`  ${label.padEnd(14)} ${v1.padEnd(30)} ${marker} ${v2}`);
+  }
+  console.log('');
+  console.log(`  ${changes} différence(s) sur 7 tokens comparés`);
+  console.log('');
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+(async () => {
+  const { cmd, flags } = parseArgs(process.argv);
+
+  switch (cmd) {
+    case 'register':
+      await cmdRegister(flags);
+      break;
+    case 'query':
+    case 'search':
+      cmdQuery(flags);
+      break;
+    case 'show':
+    case 'get':
+      cmdShow(flags);
+      break;
+    case 'inject': {
+      // Delegate to bank-inject.ts
+      const { execSync } = await import('child_process');
+      const injectArgs = process.argv.slice(3).join(' ');
+      try {
+        execSync(`npx tsx scripts/bank-inject.ts ${injectArgs}`, { stdio: 'inherit', cwd: process.cwd() });
+      } catch { process.exit(1); }
+      break;
+    }
+    case 'retheme': {
+      // Alias: inject with --retheme or --preset
+      const { execSync } = await import('child_process');
+      const rethemeArgs = process.argv.slice(3).join(' ');
+      try {
+        execSync(`npx tsx scripts/bank-inject.ts ${rethemeArgs}`, { stdio: 'inherit', cwd: process.cwd() });
+      } catch { process.exit(1); }
+      break;
+    }
+    case 'diff':
+      cmdDiff(flags);
+      break;
+    case 'stats':
+    default:
+      cmdStats();
+  }
+})();

package/scripts/browser-stealth.ts

@@ -0,0 +1,189 @@
+/**
+ * browser-stealth.ts — Prism Phase 4
+ * Lazy-load playwright-extra + stealth plugin pour contourner Cloudflare/DataDome
+ * Fallback gracieux vers playwright standard si non disponible
+ */
+
+import type { Browser, BrowserContext, Page } from 'playwright';
+import { chromium as stdChromium } from 'playwright';
+
+// Lazy init : ne charge stealth que si --stealth est demandé
+let stealthChromium: any = null;
+let stealthLoaded = false;
+
+async function loadStealth(): Promise<any> {
+  if (stealthLoaded) return stealthChromium;
+  stealthLoaded = true;
+  try {
+    // @ts-ignore
+    const { chromium: chromiumExtra } = await import('playwright-extra');
+    // @ts-ignore
+    const stealthMod = await import('puppeteer-extra-plugin-stealth');
+    const StealthPlugin = stealthMod.default || stealthMod;
+
+    const stealth = StealthPlugin();
+    // Retirer le plugin iframe.contentWindow qui cause des issues en playwright
+    try { stealth.enabledEvasions.delete('iframe.contentWindow'); } catch {}
+
+    chromiumExtra.use(stealth);
+    stealthChromium = chromiumExtra;
+    return chromiumExtra;
+  } catch (err) {
+    console.warn(`  ⚠️  Stealth mode unavailable: ${(err as Error).message}`);
+    console.warn('  Falling back to standard playwright');
+    return null;
+  }
+}
+
+export interface StealthOptions {
+  stealth?: boolean;
+  viewport?: { width: number; height: number };
+  mobile?: boolean;
+}
+
+export async function launchBrowser(options: StealthOptions = {}): Promise<Browser> {
+  const launchArgs = [
+    '--no-sandbox',
+    '--disable-setuid-sandbox',
+    '--disable-blink-features=AutomationControlled',
+    '--disable-infobars',
+    '--disable-dev-shm-usage',
+    `--window-size=${options.viewport?.width || 1440},${options.viewport?.height || 900}`,
+  ];
+
+  if (options.stealth) {
+    const stealthBrowser = await loadStealth();
+    if (stealthBrowser) {
+      return stealthBrowser.launch({ headless: true, args: launchArgs });
+    }
+  }
+
+  return stdChromium.launch({ headless: true, args: launchArgs });
+}
+
+export async function createStealthContext(
+  browser: Browser,
+  options: StealthOptions = {},
+): Promise<BrowserContext> {
+  const vp = options.viewport || { width: 1440, height: 900 };
+  const mobile = options.mobile;
+
+  const context = await browser.newContext({
+    viewport: vp,
+    userAgent: mobile
+      ? 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1'
+      : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36',
+    deviceScaleFactor: mobile ? 3 : 2,
+    locale: 'fr-FR',
+    timezoneId: 'Europe/Paris',
+    extraHTTPHeaders: {
+      'Accept-Language': 'fr-FR,fr;q=0.9,en;q=0.8',
+      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8',
+      'sec-ch-ua': '"Chromium";v="124", "Google Chrome";v="124", "Not-A.Brand";v="99"',
+      'sec-ch-ua-mobile': mobile ? '?1' : '?0',
+      'sec-ch-ua-platform': mobile ? '"Android"' : '"Windows"',
+      'sec-fetch-dest': 'document',
+      'sec-fetch-mode': 'navigate',
+      'sec-fetch-site': 'none',
+      'sec-fetch-user': '?1',
+      'upgrade-insecure-requests': '1',
+    },
+  });
+
+  // Anti-detection script (applied even without stealth plugin)
+  await context.addInitScript(() => {
+    // navigator.webdriver
+    Object.defineProperty(navigator, 'webdriver', { get: () => false, configurable: true });
+
+    // navigator.plugins (make it look realistic)
+    Object.defineProperty(navigator, 'plugins', {
+      get: () => [
+        { name: 'PDF Viewer', description: 'Portable Document Format', filename: 'internal-pdf-viewer' },
+        { name: 'Chrome PDF Viewer', description: '', filename: 'internal-pdf-viewer' },
+        { name: 'Chromium PDF Viewer', description: '', filename: 'internal-pdf-viewer' },
+      ],
+      configurable: true,
+    });
+
+    // navigator.languages
+    Object.defineProperty(navigator, 'languages', {
+      get: () => ['fr-FR', 'fr', 'en-US', 'en'],
+      configurable: true,
+    });
+
+    // window.chrome
+    (window as any).chrome = {
+      runtime: {},
+      loadTimes: () => ({}),
+      csi: () => ({}),
+      app: {},
+    };
+
+    // Permissions API
+    const originalQuery = window.navigator.permissions?.query;
+    if (originalQuery) {
+      window.navigator.permissions.query = (parameters: any): Promise<any> =>
+        parameters.name === 'notifications'
+          ? Promise.resolve({ state: Notification.permission } as any)
+          : originalQuery(parameters);
+    }
+
+    // Hide CDP detection
+    try {
+      const nav = navigator as any;
+      delete nav.__proto__.webdriver;
+    } catch {}
+
+    // WebGL vendor/renderer spoofing (very common bot detection)
+    try {
+      const getParameter = WebGLRenderingContext.prototype.getParameter;
+      WebGLRenderingContext.prototype.getParameter = function(param: number) {
+        if (param === 37445) return 'Intel Inc.';         // UNMASKED_VENDOR_WEBGL
+        if (param === 37446) return 'Intel Iris OpenGL Engine'; // UNMASKED_RENDERER_WEBGL
+        return getParameter.call(this, param);
+      };
+    } catch {}
+  });
+
+  return context;
+}
+
+// ─── Cloudflare detection + wait ──────────────────────────────────────────────
+
+export async function waitForCloudflare(page: Page, maxWait = 15000): Promise<boolean> {
+  const start = Date.now();
+  while (Date.now() - start < maxWait) {
+    const isChallenge = await page.evaluate(() => {
+      const title = document.title.toLowerCase();
+      const body = document.body?.innerText?.toLowerCase() || '';
+      return (
+        title.includes('just a moment') ||
+        title.includes('attendez') ||
+        body.includes('checking your browser') ||
+        body.includes('vérification') ||
+        !!document.querySelector('#cf-challenge-stage') ||
+        !!document.querySelector('[data-cf-challenge]') ||
+        !!document.querySelector('#turnstile-wrapper')
+      );
+    }).catch(() => false);
+
+    if (!isChallenge) return true;
+    await page.waitForTimeout(500);
+  }
+  return false;
+}
+
+export async function detectBotProtection(page: Page): Promise<string | null> {
+  return page.evaluate(() => {
+    const html = document.documentElement.outerHTML.toLowerCase();
+    const title = document.title.toLowerCase();
+
+    if (title.includes('just a moment') || document.querySelector('#cf-challenge-stage')) return 'cloudflare';
+    if (html.includes('datadome')) return 'datadome';
+    if (html.includes('perimeterx')) return 'perimeterx';
+    if (html.includes('imperva') || html.includes('incapsula')) return 'imperva';
+    if (document.querySelector('iframe[src*="recaptcha"]')) return 'recaptcha';
+    if (document.querySelector('.h-captcha, iframe[src*="hcaptcha"]')) return 'hcaptcha';
+    return null;
+  }).catch(() => null);
+}