prism-design 2.13.0

package/scripts/extract.ts

@@ -0,0 +1,2038 @@
+/**
+ * Prism — Script d'extraction Playwright
+ *
+ * Extrait le design RÉEL d'un site via getComputedStyle() :
+ * - Screenshots multi-viewport (desktop 1440px + mobile 390px)
+ * - CSS computed sur tous les éléments clés
+ * - CSS custom properties (--color-*, --font-*, etc.)
+ * - Couleurs dominantes, typo, spacing, layout
+ * - Structure DOM (sections, composants, navigation)
+ */
+
+import { chromium, type Page, type Browser } from 'playwright';
+import { mkdir, writeFile } from 'fs/promises';
+import { join } from 'path';
+
+// ── Types ────────────────────────────────────────────────────────────
+
+interface ComputedStyles {
+  backgroundColor: string;
+  backgroundImage: string;
+  color: string;
+  fontFamily: string;
+  fontSize: string;
+  fontWeight: string;
+  lineHeight: string;
+  letterSpacing: string;
+  textAlign: string;
+  padding: string;
+  margin: string;
+  borderRadius: string;
+  border: string;
+  boxShadow: string;
+  width: string;
+  height: string;
+  minHeight: string;
+  maxWidth: string;
+  display: string;
+  gap: string;
+  gridTemplateColumns: string;
+  flexDirection: string;
+  alignItems: string;
+  justifyContent: string;
+  position: string;
+  overflow: string;
+  transition: string;
+  opacity: string;
+  textTransform: string;
+  textDecoration: string;
+  fontFeatureSettings: string;
+  fontVariationSettings: string;
+}
+
+interface ElementExtraction {
+  selector: string;
+  tag: string;
+  classes: string[];
+  text: string;
+  styles: ComputedStyles;
+  children: number;
+  rect: { x: number; y: number; width: number; height: number };
+}
+
+interface SectionExtraction {
+  index: number;
+  tag: string;
+  classes: string[];
+  role: string;
+  estimatedPurpose: string;
+  rect: { x: number; y: number; width: number; height: number };
+  styles: Partial<ComputedStyles> | Record<string, string>;
+  childCount: number;
+  bgTreatment?: string;
+  isDark?: boolean;
+  aboveFold?: boolean;
+  isFullBleed?: boolean;
+  imgRatio?: number;
+  maxHeadingPx?: number;
+  gridCols?: number;
+  hasAnimation?: boolean;
+  textLen?: number;
+  vPad?: number;
+  hasChart?: boolean;
+}
+
+interface ComponentVariant {
+  tag: string;
+  classes: string[];
+  text: string;
+  styles: ComputedStyles;
+  rect: { x: number; y: number; width: number; height: number };
+}
+
+interface FontFaceDeclaration {
+  family: string;
+  src: string;
+  weight: string;
+  style: string;
+  display: string;
+}
+
+interface ExtractionResult {
+  url: string;
+  domain: string;
+  timestamp: string;
+  viewport: { width: number; height: number };
+  pageTitle: string;
+  cssCustomProperties: Record<string, string>;
+  elements: Record<string, ElementExtraction | null>;
+  sections: SectionExtraction[];
+  allColors: string[];
+  allFontFamilies: string[];
+  allFontSizes: string[];
+  allBorderRadii: string[];
+  allShadows: string[];
+  allTransitions: string[];
+  images: { src: string; alt: string; width: number; height: number }[];
+  widgets?: WidgetExtraction;
+  imageryProfile?: {
+    ogImage: string | null;
+    ogImageWidth: number | null;
+    ogImageHeight: number | null;
+    twitterImage: string | null;
+    heroImage: { src: string; alt: string; width: number; height: number; aspectRatio: number } | null;
+    formats: { png: number; jpg: number; webp: number; svg: number; gif: number; other: number };
+    totalImages: number;
+    totalAboveFold: number;
+    aspectRatioBuckets: { landscape: number; portrait: number; square: number; ultrawide: number };
+    illustrationHeavy: boolean;
+    photoHeavy: boolean;
+    avgImageSize: { width: number; height: number };
+    decorativePatterns?: {
+      multiStopGradients: number;
+      radialGradients: number;
+      largeSvgShapes: number;
+      backgroundImagePatterns: number;
+      hasNoise: boolean;
+      hasGlassmorphism: boolean;
+    };
+  };
+  links: { href: string; text: string; isNav: boolean }[];
+  componentVariants: Record<string, ComponentVariant[]>;
+  componentStates: Record<string, ComponentStateStyles>;
+  fontFaces: FontFaceDeclaration[];
+  mediaBreakpoints: string[];
+  openTypeFeatures: string[];
+  variableAxes: string[];
+  displaySignature?: { family: string; fontSize: string; fontWeight: string; isSerif: boolean; isItalic: boolean; sample: string; secondary?: { family: string; fontSize: string; fontWeight: string; isSerif: boolean; isItalic: boolean; sample: string } };
+  // Phase 5 Sprint 80/20 — advanced capture (kept: has downstream consumers)
+  keyframes?: Record<string, Record<string, Record<string, string>>>;
+  zIndexMap?: Array<{ selector: string; z: number; stackingRoot: string }>;
+  visualEffects?: import('./extractors/advanced.js').VisualEffects;
+  // RFC C/D/F/A/B fields removed in v2.4 (Phase 1.2) — zero downstream consumers detected:
+  //   transform3DMap, containerQueries, containerTypes, gridLayouts, responsiveSnapshot, pseudoElements
+  // If needed, re-add with explicit consumer; YAGNI removed speculative extraction (saves ~50KB/site, ~10s extract time).
+}
+
+// ── Config ───────────────────────────────────────────────────────────
+
+const VIEWPORTS = {
+  desktop: { width: 1440, height: 900 },
+  mobile: { width: 390, height: 844 },
+} as const;
+
+// Phase 5.1.1 — Stricter selectors. AVANT: [class*="header"] matchait <body class="with-new-header">
+// → headerHeight = 12802px (toute la page) sur Attio, Cursor, Airbnb.
+// APRÈS: tag-first selectors, plus ARIA roles, plus class-strict.
+const KEY_SELECTORS: Record<string, string> = {
+  body: 'body',
+  header: 'header, [role="banner"], [data-testid*="header"]:not(body):not(html)',
+  nav: 'nav, [role="navigation"]',
+  main: 'main, [role="main"]',
+  sidebar: 'aside, [role="complementary"]',
+  footer: 'footer, [role="contentinfo"]',
+  hero: 'section[class*="hero" i]:not(body), [class*="hero-section" i]:not(body), [data-section="hero"]',
+  card: 'article, [class*="card" i]:not(body):not(html):not(main):not(section)',
+  button: 'button, [role="button"]:not(body):not(html)',
+  input: 'input[type="text"], input[type="search"], input[type="email"], textarea',
+  heading: 'h1',
+  subheading: 'h2',
+  link: 'a:not([class*="btn"]):not([class*="button"])',
+  badge: '[class*="badge" i]:not(body), [class*="tag" i]:not(body), [class*="chip" i]:not(body)',
+  modal: '[class*="modal" i]:not(body), [role="dialog"]',
+  dropdown: '[role="menu"], [class*="dropdown" i]:not(body)',
+  avatar: 'img[class*="avatar" i], img[class*="profile" i]',
+  logo: 'header a img, header a svg, nav a img, nav a svg, [class*="logo" i]:not(body):not(html)',
+};
+
+// ── Extraction functions ─────────────────────────────────────────────
+
+async function extractComputedStyles(page: Page): Promise<Record<string, ElementExtraction | null>> {
+  return page.evaluate((selectors: Record<string, string>) => {
+    const result: Record<string, any> = {};
+    for (const [name, selector] of Object.entries(selectors)) {
+      // For heading selectors (h1/h2), prefer the first VISIBLE element in DOM
+      // (SPAs often have a hidden SEO h1 before the visible one)
+      let el: Element | null = null;
+      const isHeading = /^h[1-6]$/.test(selector.trim());
+      if (isHeading) {
+        const candidates = Array.from(document.querySelectorAll(selector));
+        el = candidates.find(c => {
+          const r = c.getBoundingClientRect();
+          const cs = getComputedStyle(c);
+          return r.width > 0 && r.height > 0 &&
+                 cs.display !== 'none' && cs.visibility !== 'hidden' && cs.opacity !== '0';
+        }) || candidates[0] || null;
+        // SPA fallback: no h1 at all → try ARIA heading roles, then largest-font text above fold
+        if (!el && name === 'heading') {
+          el = document.querySelector('[role="heading"][aria-level="1"]') ||
+               document.querySelector('[aria-level="1"]') || null;
+          if (!el) {
+            const vh = window.innerHeight;
+            let bestEl: Element | null = null;
+            let bestSize = 31;
+            document.querySelectorAll('div,span,p,strong').forEach((c: Element) => {
+              const r = c.getBoundingClientRect();
+              if (r.top > vh * 1.5 || r.bottom < 0 || (c as HTMLElement).children.length > 2) return;
+              const fs = parseFloat(getComputedStyle(c).fontSize);
+              if (fs > bestSize) { bestEl = c; bestSize = fs; }
+            });
+            el = bestEl;
+          }
+        }
+      } else {
+        el = document.querySelector(selector);
+      }
+      if (!el) { result[name] = null; continue; }
+      const cs = getComputedStyle(el);
+      const rect = el.getBoundingClientRect();
+      result[name] = {
+        tag: el.tagName.toLowerCase(),
+        classes: Array.from(el.classList),
+        text: (el as HTMLElement).innerText?.slice(0, 200) || '',
+        ariaLabel: (el as HTMLElement).getAttribute('aria-label') || undefined,
+        dataTestId: (el as HTMLElement).getAttribute('data-testid') || undefined,
+        role: (el as HTMLElement).getAttribute('role') || undefined,
+        children: el.children.length,
+        rect: { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.round(rect.width), height: Math.round(rect.height) },
+        styles: {
+          backgroundColor: cs.backgroundColor,
+          backgroundImage: cs.backgroundImage,
+          color: cs.color,
+          fontFamily: cs.fontFamily,
+          fontSize: cs.fontSize,
+          fontWeight: cs.fontWeight,
+          lineHeight: cs.lineHeight,
+          letterSpacing: cs.letterSpacing,
+          textAlign: cs.textAlign,
+          padding: cs.padding,
+          margin: cs.margin,
+          borderRadius: cs.borderRadius,
+          border: cs.border,
+          boxShadow: cs.boxShadow,
+          width: cs.width,
+          height: cs.height,
+          minHeight: cs.minHeight,
+          maxWidth: cs.maxWidth,
+          display: cs.display,
+          gap: cs.gap,
+          gridTemplateColumns: cs.gridTemplateColumns,
+          flexDirection: cs.flexDirection,
+          alignItems: cs.alignItems,
+          justifyContent: cs.justifyContent,
+          position: cs.position,
+          overflow: cs.overflow,
+          transition: cs.transition,
+          opacity: cs.opacity,
+          textTransform: cs.textTransform,
+          textDecoration: cs.textDecoration,
+          fontFeatureSettings: cs.fontFeatureSettings,
+          fontVariationSettings: (cs as any).fontVariationSettings || 'normal',
+        },
+      };
+    }
+    return result;
+  }, KEY_SELECTORS);
+}
+
+async function extractCSSCustomProperties(page: Page): Promise<Record<string, string>> {
+  return page.evaluate(() => {
+    const vars: Record<string, string> = {};
+    // From :root / html
+    const rootStyles = getComputedStyle(document.documentElement);
+    for (let i = 0; i < rootStyles.length; i++) {
+      const prop = rootStyles[i];
+      if (prop.startsWith('--')) {
+        vars[prop] = rootStyles.getPropertyValue(prop).trim();
+      }
+    }
+    // v4-V1-T5: Also scan body + main sections for scoped CSS vars
+    // (Tailwind/shadcn often define --vars on .dark, body, or section scopes)
+    const scopedRoots = [
+      document.body,
+      document.querySelector('main'),
+      document.querySelector('[data-theme]'),
+      document.querySelector('.dark, [class*="dark"]'),
+      document.querySelector('header, nav'),
+    ].filter(Boolean) as HTMLElement[];
+    scopedRoots.forEach(el => {
+      const sc = getComputedStyle(el);
+      for (let i = 0; i < sc.length; i++) {
+        const prop = sc[i];
+        if (prop.startsWith('--') && !(prop in vars)) {
+          vars[prop] = sc.getPropertyValue(prop).trim();
+        }
+      }
+    });
+    // Also check stylesheets for CSS variables (extended selectors)
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSStyleRule && (
+              rule.selectorText === ':root' ||
+              rule.selectorText === 'html' ||
+              rule.selectorText === 'body' ||
+              rule.selectorText === '*' ||
+              /\.dark\b/.test(rule.selectorText) ||
+              /\[data-theme/.test(rule.selectorText)
+            )) {
+              for (let i = 0; i < rule.style.length; i++) {
+                const prop = rule.style[i];
+                if (prop.startsWith('--') && !(prop in vars)) {
+                  vars[prop] = rule.style.getPropertyValue(prop).trim();
+                }
+              }
+            }
+          }
+        } catch { /* cross-origin stylesheet, skip */ }
+      }
+    } catch { /* no stylesheets accessible */ }
+    return vars;
+  });
+}
+
+async function extractAllColors(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const colorSet = new Set<string>();
+    const MAX = 3000;
+    const all = Array.from(document.querySelectorAll('*'));
+    // Prioritize visible elements, fill remaining with rest — up to MAX
+    const visible = all.filter(el => {
+      const r = (el as HTMLElement).getBoundingClientRect();
+      return r.width > 0 && r.height > 0;
+    });
+    const sample = visible.length >= MAX
+      ? visible.slice(0, MAX)
+      : [...visible, ...all.filter(el => !visible.includes(el))].slice(0, MAX);
+
+    const props = ['backgroundColor', 'color', 'borderColor', 'borderTopColor', 'outlineColor', 'caretColor', 'columnRuleColor', 'fill', 'stroke'] as const;
+
+    // Phase 5.1.1 — Inline multi-value parsing (avoids tsx __name emission inside page.evaluate)
+    // borderColor can be "rgb(A) rgb(B) rgb(C) rgb(D)" when sides differ. If mixed, drop entirely.
+    const COLOR_REGEX = /rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}/g;
+
+    sample.forEach(el => {
+      const cs = getComputedStyle(el);
+      props.forEach(prop => {
+        const val = cs[prop as keyof CSSStyleDeclaration] as string;
+        if (!val || val === 'rgba(0, 0, 0, 0)' || val === 'transparent') return;
+        // Parse multi-color inline
+        const matches = val.match(COLOR_REGEX) || [];
+        if (matches.length === 0) {
+          if (val.startsWith('#') || val.startsWith('rgb')) colorSet.add(val);
+        } else if (matches.length === 1) {
+          colorSet.add(matches[0]);
+        } else {
+          const uniq = Array.from(new Set(matches));
+          if (uniq.length === 1) colorSet.add(uniq[0]);
+          // Mixed-side borderColor → drop (no canonical color)
+        }
+      });
+
+      ['::before', '::after'].forEach(pseudo => {
+        const pcs = getComputedStyle(el, pseudo);
+        if (pcs.content && pcs.content !== 'none' && pcs.content !== 'normal') {
+          props.forEach(prop => {
+            const val = pcs[prop as keyof CSSStyleDeclaration] as string;
+            if (!val || val === 'rgba(0, 0, 0, 0)' || val === 'transparent') return;
+            const matches = val.match(COLOR_REGEX) || [];
+            if (matches.length === 0) {
+              if (val.startsWith('#') || val.startsWith('rgb')) colorSet.add(val);
+            } else if (matches.length === 1) {
+              colorSet.add(matches[0]);
+            } else {
+              const uniq = Array.from(new Set(matches));
+              if (uniq.length === 1) colorSet.add(uniq[0]);
+            }
+          });
+        }
+      });
+    });
+    return [...colorSet];
+  });
+}
+
+/**
+ * Phase 5.1.3 — Detect anti-bot challenge pages BEFORE extraction.
+ * Cloudflare, captchas, "Just a moment", and similar interstitials would otherwise
+ * be extracted as if they were the real site, producing nonsense tokens.
+ */
+async function detectBotChallenge(page: Page): Promise<{ blocked: boolean; reason?: string }> {
+  return page.evaluate(() => {
+    const title = (document.title || '').toLowerCase();
+    const bodyText = (document.body?.textContent || '').slice(0, 500).toLowerCase();
+    const html = (document.documentElement?.outerHTML || '').slice(0, 2000).toLowerCase();
+
+    const SIGNATURES = [
+      { pattern: /just a moment\.\.\.|checking your browser/i, reason: 'Cloudflare interstitial' },
+      { pattern: /verify you are human|are you a robot/i, reason: 'Human verification challenge' },
+      { pattern: /captcha|recaptcha|hcaptcha/i, reason: 'CAPTCHA detected' },
+      { pattern: /access denied|forbidden|403/i, reason: 'Access denied (403)' },
+      { pattern: /enable javascript and cookies|please enable cookies/i, reason: 'JS/cookies required gate' },
+      { pattern: /ddos protection|protection by/i, reason: 'DDoS protection page' },
+    ];
+
+    for (const sig of SIGNATURES) {
+      if (sig.pattern.test(title) || sig.pattern.test(bodyText) || sig.pattern.test(html.slice(0, 1000))) {
+        return { blocked: true, reason: sig.reason };
+      }
+    }
+
+    // Heuristic: page with <100 chars of visible text AND <5 elements = suspicious
+    const visibleText = (document.body?.innerText || '').trim();
+    const elementCount = document.body?.children?.length || 0;
+    if (visibleText.length < 100 && elementCount < 5) {
+      return { blocked: true, reason: `Suspicious empty page (${visibleText.length} chars, ${elementCount} elements)` };
+    }
+
+    return { blocked: false };
+  });
+}
+
+async function extractAllFonts(page: Page): Promise<{ families: string[]; sizes: string[] }> {
+  return page.evaluate(() => {
+    const families = new Set<string>();
+    const sizes = new Set<string>();
+    const elements = document.querySelectorAll('*');
+    const sample = Array.from(elements).slice(0, 3000);
+    sample.forEach(el => {
+      const cs = getComputedStyle(el);
+      families.add(cs.fontFamily);
+      sizes.add(cs.fontSize);
+    });
+    return { families: [...families], sizes: [...sizes] };
+  });
+}
+
+async function extractAllBorderRadii(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const radii = new Set<string>();
+    const elements = document.querySelectorAll('*');
+    const sample = Array.from(elements).slice(0, 3000);
+    sample.forEach(el => {
+      const cs = getComputedStyle(el);
+      if (cs.borderRadius && cs.borderRadius !== '0px') {
+        radii.add(cs.borderRadius);
+      }
+    });
+    return [...radii];
+  });
+}
+
+async function extractAllShadows(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const shadows = new Set<string>();
+    const elements = document.querySelectorAll('*');
+    const sample = Array.from(elements).slice(0, 3000);
+    sample.forEach(el => {
+      const cs = getComputedStyle(el);
+      if (cs.boxShadow && cs.boxShadow !== 'none') {
+        shadows.add(cs.boxShadow);
+      }
+    });
+    return [...shadows];
+  });
+}
+
+async function extractAllTransitions(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const transitions = new Set<string>();
+    const elements = document.querySelectorAll('*');
+    const sample = Array.from(elements).slice(0, 1000);
+    sample.forEach(el => {
+      const cs = getComputedStyle(el);
+      if (cs.transition && cs.transition !== 'all 0s ease 0s' && cs.transition !== 'none 0s ease 0s') {
+        transitions.add(cs.transition);
+      }
+    });
+    return [...transitions];
+  });
+}
+
+// ── Component Variants (all unique styles per component type) ───────
+
+async function extractComponentVariants(page: Page): Promise<Record<string, ComponentVariant[]>> {
+  return page.evaluate(() => {
+    const variantSelectors: Record<string, string> = {
+      // ── Core interactive ──
+      // v4-V1-T1: Extended button selector covers Tailwind utility CSS + ARIA + handlers
+      // (sites without semantic .btn class like utility-first frameworks now detected)
+      buttons: 'button, [class*="btn"], [role="button"], a[class*="button"], input[type="submit"], input[type="button"], a[class*="bg-"][href], a[class*="-cta"], button[class*="bg-"], [onclick]:not(div):not(span):not(li), [data-action="button"], a[aria-label][href][class*="px-"]',
+      inputs: 'input, textarea, select',
+      searchBar: '[role="search"], [class*="search-bar"], [class*="searchbar"], [class*="search-form"]',
+      // ── Content blocks ──
+      cards: '[class*="card"], article, [class*="tile"]',
+      badges: '[class*="badge"], [class*="tag"], [class*="chip"], [class*="label"]:not(label)',
+      statusBadge: '[class*="status"], [class*="pill"], [class*="indicator"], [class*="dot"][class*="color"], [data-status]',
+      // ── Navigation & structure ──
+      navLinks: 'nav a, [class*="nav"] a, [class*="menu"] a, [role="navigation"] a, header a',
+      tabs: '[role="tablist"], [role="tab"], [class*="tabs"], [class*="tab-bar"], [class*="tab-nav"]',
+      footerLinks: 'footer a, [role="contentinfo"] a',
+      // ── Marketing sections ──
+      pricingCard: '[class*="pricing"], [class*="price-card"], [class*="plan-card"], [class*="plan-tile"], [class*="tier"]',
+      ctaBanner: '[class*="cta"], [class*="call-to-action"], [class*="banner-cta"], [class*="promo-banner"]',
+      testimonial: '[class*="testimonial"], [class*="review-card"], [class*="quote-block"], [class*="customer-story"]',
+      logoTile: '[class*="logo-grid"] img, [class*="logos"] img, [class*="customer-logo"], [class*="partner-logo"], [class*="brand-logo"]',
+      // ── Typography roles ──
+      headingH1: 'h1',
+      headingH2: 'h2',
+      headingH3: 'h3',
+      headingH4: 'h4',
+      headingH5: 'h5',
+      headingH6: 'h6',
+      links: 'a',
+      eyebrowLabels: '[class*="eyebrow"], [class*="overline"], [class*="kicker"], [class*="label--small"], [class*="meta"], [class*="subtitle"]',
+      captions: 'figcaption, caption, [class*="caption"], [class*="helper-text"], [class*="supporting"]',
+      tableHeaders: 'th, thead td',
+      // ── Misc UI ──
+      avatar: '[class*="avatar"], [class*="profile-pic"], [class*="user-pic"]',
+      divider: 'hr, [class*="divider"], [class*="separator"]',
+      tooltip: '[role="tooltip"], [class*="tooltip"]',
+    };
+
+    // Site-specific selectors — only injected when found in DOM (avoids noise on non-matching sites)
+    const siteSpecificSelectors: Record<string, string> = {
+      // Travel / booking
+      datePicker: '[class*="date-picker"], [class*="datepicker"], [class*="calendar"], [data-testid*="date"]',
+      reservationCard: '[class*="reservation"], [class*="booking"], [class*="checkout-panel"]',
+      propertyCard: '[class*="property-card"], [class*="listing-card"], [class*="stay-card"]',
+      ratingDisplay: '[class*="rating"], [class*="review-score"], [class*="star-rating"]',
+      hostCard: '[class*="host-card"], [class*="host-info"], [class*="profile-card"]',
+      // SaaS / dev tools
+      codeBlock: 'pre, code, [class*="code-block"], [class*="syntax"], [class*="prism"]',
+      changelogRow: '[class*="changelog"], [class*="release"], [class*="release-note"], [class*="version-row"]',
+      breadcrumb: '[aria-label="breadcrumb"], [class*="breadcrumb"], nav[class*="crumb"]',
+      alert: '[role="alert"], [class*="alert"], [class*="notification-bar"], [class*="toast"]',
+      commandPalette: '[class*="command-palette"], [class*="CommandPalette"], [class*="cmdk-root"], [role="dialog"][class*="search"], [class*="CommandDialog"]',
+      dataTable: 'table[class*="data"], [class*="data-table"], [class*="DataTable"], [class*="DataGrid"], [role="grid"]',
+      accordion: '[class*="accordion"], [class*="Accordion"], details:has(summary), [role="region"][class*="collapsible"]',
+      skeleton: '[class*="skeleton"], [class*="Skeleton"], [class*="shimmer"], [class*="loading-placeholder"]',
+      progressBar: '[role="progressbar"], [class*="progress-bar"], [class*="ProgressBar"], [class*="progress-track"]',
+      emptyState: '[class*="empty-state"], [class*="EmptyState"], [class*="empty-placeholder"], [class*="no-results"]',
+      kpiCard: '[class*="metric-card"], [class*="stat-card"], [class*="KpiCard"], [class*="StatCard"], [class*="stats-card"]',
+      timelinePill: '[class*="timeline"], [class*="Timeline"], [class*="agent-trace"], [class*="AgentTrace"]',
+      // Ecom
+      productCard: '[class*="product-card"], [class*="product-tile"], [class*="sku-card"]',
+      priceTag: '[class*="price"], [class*="cost"], [itemprop="price"]',
+    };
+    for (const [name, sel] of Object.entries(siteSpecificSelectors)) {
+      if (document.querySelectorAll(sel).length > 0) (variantSelectors as Record<string, string>)[name] = sel;
+    }
+
+    const result: Record<string, any[]> = {};
+
+    for (const [name, selector] of Object.entries(variantSelectors)) {
+      const elems = document.querySelectorAll(selector);
+      const seen = new Set<string>();
+      const variants: any[] = [];
+
+      const els = Array.from(elems).slice(0, 50);
+      for (const el of els) {
+        const rect = el.getBoundingClientRect();
+        if (rect.width < 5 || rect.height < 5) continue;
+
+        const cs = getComputedStyle(el);
+        // Inline fingerprint
+        const fp = [
+          cs.backgroundColor, cs.color, cs.fontSize, cs.fontWeight,
+          cs.fontFamily, cs.borderRadius, cs.padding, cs.border,
+          cs.boxShadow, cs.display, cs.height,
+        ].join('|');
+        if (seen.has(fp)) continue;
+        seen.add(fp);
+
+        // Inline extractStyles
+        variants.push({
+          tag: el.tagName.toLowerCase(),
+          classes: Array.from(el.classList),
+          text: (el as HTMLElement).innerText?.trim().slice(0, 100) || '',
+          rect: { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.round(rect.width), height: Math.round(rect.height) },
+          styles: {
+            backgroundColor: cs.backgroundColor,
+            color: cs.color,
+            fontFamily: cs.fontFamily,
+            fontSize: cs.fontSize,
+            fontWeight: cs.fontWeight,
+            lineHeight: cs.lineHeight,
+            letterSpacing: cs.letterSpacing,
+            padding: cs.padding,
+            margin: cs.margin,
+            borderRadius: cs.borderRadius,
+            border: cs.border,
+            boxShadow: cs.boxShadow,
+            width: cs.width,
+            height: cs.height,
+            maxWidth: cs.maxWidth,
+            display: cs.display,
+            gap: cs.gap,
+            gridTemplateColumns: cs.gridTemplateColumns,
+            flexDirection: cs.flexDirection,
+            alignItems: cs.alignItems,
+            justifyContent: cs.justifyContent,
+            position: cs.position,
+            overflow: cs.overflow,
+            transition: cs.transition,
+            opacity: cs.opacity,
+            textTransform: cs.textTransform,
+            textDecoration: cs.textDecoration,
+            fontFeatureSettings: cs.fontFeatureSettings,
+            fontVariationSettings: (cs as any).fontVariationSettings || 'normal',
+          },
+        });
+        if (variants.length >= 10) break;
+      }
+
+      if (variants.length > 0) {
+        result[name] = variants;
+      }
+    }
+
+    return result;
+  });
+}
+
+// ── Component States (:hover, :focus) ──────────────────────
+// Note: `:active` not supported — UA state unreachable via Playwright dispatchEvent
+
+interface ComponentStateStyles {
+  default: Record<string, string>;
+  hover?: Record<string, string>;
+  focus?: Record<string, string>;
+}
+
+const STATE_PROPS = [
+  'backgroundColor', 'color', 'border', 'borderColor', 'boxShadow',
+  'opacity', 'transform', 'outline', 'textDecoration', 'cursor',
+] as const;
+
+async function extractComponentStates(page: Page): Promise<Record<string, ComponentStateStyles>> {
+  const result: Record<string, ComponentStateStyles> = {};
+
+  // Phase 5 Sprint 80/20 — `:active` retiré (dispatchEvent('mousedown') ne déclenche
+  // PAS l'état UA `:active` — les données étaient identiques au default, inutile.
+  // Voir audit du 2026-04-18.
+  const targets: { name: string; selector: string; states: ('hover' | 'focus')[] }[] = [
+    { name: 'button', selector: 'button:not([disabled]), [class*="btn"]:not([disabled]), a[class*="button"]', states: ['hover', 'focus'] },
+    { name: 'input', selector: 'input[type="text"], input[type="search"], input[type="email"]', states: ['focus'] },
+    { name: 'link', selector: 'a:not([class*="btn"]):not([class*="button"])', states: ['hover'] },
+    { name: 'card', selector: '[class*="card"]:not(body), article, [class*="tile"]', states: ['hover'] },
+    { name: 'navLink', selector: 'nav a, header a, [role="navigation"] a', states: ['hover'] },
+    { name: 'tab', selector: '[role="tab"], [class*="tab-item"], [class*="tab-link"]', states: ['hover'] },
+    { name: 'badge', selector: '[class*="badge"], [class*="tag"], [class*="chip"]', states: ['hover'] },
+    { name: 'footerLink', selector: 'footer a, [role="contentinfo"] a', states: ['hover'] },
+  ];
+
+  for (const target of targets) {
+    try {
+      // Get default styles first
+      const defaultStyles = await page.evaluate((selector) => {
+        const el = document.querySelector(selector);
+        if (!el) return null;
+        const cs = getComputedStyle(el);
+        const props = ['backgroundColor', 'color', 'border', 'borderColor', 'boxShadow',
+          'opacity', 'transform', 'outline', 'textDecoration', 'cursor'];
+        const result: Record<string, string> = {};
+        for (const p of props) result[p] = (cs as any)[p];
+        return result;
+      }, target.selector);
+
+      if (!defaultStyles) continue;
+
+      const stateStyles: ComponentStateStyles = { default: defaultStyles };
+
+      for (const state of target.states) {
+        try {
+          let stateResult: Record<string, string> | null = null;
+
+          if (state === 'hover') {
+            // Use Playwright native hover
+            await page.hover(target.selector, { timeout: 2000 });
+            stateResult = await page.evaluate((selector) => {
+              const el = document.querySelector(selector);
+              if (!el) return null;
+              const cs = getComputedStyle(el);
+              const props = ['backgroundColor', 'color', 'border', 'borderColor', 'boxShadow',
+                'opacity', 'transform', 'outline', 'textDecoration', 'cursor'];
+              const result: Record<string, string> = {};
+              for (const p of props) result[p] = (cs as any)[p];
+              return result;
+            }, target.selector);
+            // Move away to reset
+            await page.mouse.move(0, 0);
+          } else if (state === 'focus') {
+            await page.focus(target.selector);
+            stateResult = await page.evaluate((selector) => {
+              const el = document.querySelector(selector) as HTMLElement;
+              if (!el) return null;
+              el.focus();
+              const cs = getComputedStyle(el);
+              const props = ['backgroundColor', 'color', 'border', 'borderColor', 'boxShadow',
+                'opacity', 'transform', 'outline', 'textDecoration', 'cursor'];
+              const result: Record<string, string> = {};
+              for (const p of props) result[p] = (cs as any)[p];
+              return result;
+            }, target.selector);
+            await page.evaluate(() => { (document.activeElement as HTMLElement)?.blur?.(); });
+          }
+          // Note: `:active` state intentionally not extracted — requires real pointer
+          // events not available via Playwright (dispatchEvent doesn't trigger UA state).
+
+          if (stateResult) {
+            // Only keep properties that CHANGED vs default
+            const changed: Record<string, string> = {};
+            for (const [k, v] of Object.entries(stateResult)) {
+              if (v !== defaultStyles[k]) changed[k] = v;
+            }
+            if (Object.keys(changed).length > 0) {
+              stateStyles[state] = stateResult;
+            }
+          }
+        } catch (err) {
+          // State extraction failed — site may block interaction (CSP, intercepted event)
+          if (process.env.CLONE_LOG_LEVEL === 'debug') {
+            console.log(`     ⚠️  ${target.name}:${state} failed: ${(err as Error).message.slice(0, 80)}`);
+          }
+        }
+      }
+
+      result[target.name] = stateStyles;
+    } catch (err) {
+      // Element not found for target.selector — common, site may not have this component
+      if (process.env.CLONE_LOG_LEVEL === 'debug') {
+        console.log(`     ⚠️  ${target.name} skipped: ${(err as Error).message.slice(0, 80)}`);
+      }
+    }
+  }
+
+  return result;
+}
+
+// ── OpenType Features & Variable Font Axes ──────────────────────────
+
+async function extractOpenTypeFeatures(page: Page): Promise<{ features: string[]; axes: string[] }> {
+  return page.evaluate(() => {
+    const featureSet = new Set<string>();
+    const axisSet = new Set<string>();
+
+    // Scan all elements for font-feature-settings and font-variation-settings
+    const elements = Array.from(document.querySelectorAll('*'));
+    for (const el of elements) {
+      const cs = getComputedStyle(el);
+      const featureVal = cs.fontFeatureSettings;
+      const variationVal = (cs as any).fontVariationSettings;
+
+      if (featureVal && featureVal !== 'normal') {
+        // Parse "ss01" on, "kern" 1, "liga" 0 etc.
+        const matches = featureVal.match(/"([a-z0-9]{4})"/gi);
+        if (matches) {
+          for (const m of matches) featureSet.add(m.replace(/"/g, '').toLowerCase());
+        }
+      }
+
+      if (variationVal && variationVal !== 'normal') {
+        // Parse "wght" 400, "wdth" 75 etc.
+        const matches = variationVal.match(/"([A-Z]{4})"/gi);
+        if (matches) {
+          for (const m of matches) axisSet.add(m.replace(/"/g, '').toUpperCase());
+        }
+      }
+    }
+
+    // Also scan CSS rules in stylesheets
+    try {
+      for (const sheet of Array.from(document.styleSheets)) {
+        try {
+          const rules = Array.from(sheet.cssRules || []);
+          for (const rule of rules) {
+            const text = (rule as CSSStyleRule).cssText || '';
+            const featureMatches = text.match(/font-feature-settings\s*:\s*([^;]+)/gi);
+            if (featureMatches) {
+              for (const fm of featureMatches) {
+                const tags = fm.match(/"([a-z0-9]{4})"/gi);
+                if (tags) tags.forEach(t => featureSet.add(t.replace(/"/g, '').toLowerCase()));
+              }
+            }
+            const variationMatches = text.match(/font-variation-settings\s*:\s*([^;]+)/gi);
+            if (variationMatches) {
+              for (const vm of variationMatches) {
+                const tags = vm.match(/"([A-Z]{4})"/gi);
+                if (tags) tags.forEach(t => axisSet.add(t.replace(/"/g, '').toUpperCase()));
+              }
+            }
+          }
+        } catch { /* cross-origin sheet */ }
+      }
+    } catch { /* security error */ }
+
+    return {
+      features: Array.from(featureSet),
+      axes: Array.from(axisSet),
+    };
+  });
+}
+
+// ── Font-face declarations ──────────────────────────────────────────
+
+async function extractFontFaces(page: Page): Promise<FontFaceDeclaration[]> {
+  return page.evaluate(() => {
+    const fonts: Array<{ family: string; src: string; weight: string; style: string; display: string }> = [];
+    const seen = new Set<string>();
+
+    // Method 1: document.fonts API (if available)
+    try {
+      if ('fonts' in document) {
+        (document as any).fonts.forEach((font: FontFace) => {
+          const key = `${font.family}|${font.weight}|${font.style}`;
+          if (seen.has(key)) return;
+          seen.add(key);
+          // font.src can be a URL string or local() reference
+          let src = '';
+          try {
+            src = (font as any).src || '';
+            // Clean up the src — it's often a CSS url() value
+            if (typeof src === 'string') {
+              const urlMatch = src.match(/url\(["']?([^"')]+)["']?\)/);
+              if (urlMatch) src = urlMatch[1];
+            }
+          } catch { /* ignore */ }
+          fonts.push({
+            family: font.family.replace(/['"]/g, ''),
+            src,
+            weight: font.weight || 'normal',
+            style: font.style || 'normal',
+            display: (font as any).display || 'auto',
+          });
+        });
+      }
+    } catch { /* fonts API not supported */ }
+
+    // Method 2: Parse @font-face rules from stylesheets
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSFontFaceRule) {
+              const family = rule.style.getPropertyValue('font-family').replace(/['"]/g, '').trim();
+              const src = rule.style.getPropertyValue('src');
+              const weight = rule.style.getPropertyValue('font-weight') || 'normal';
+              const style = rule.style.getPropertyValue('font-style') || 'normal';
+              const display = rule.style.getPropertyValue('font-display') || 'auto';
+              const key = `${family}|${weight}|${style}`;
+              if (seen.has(key)) continue;
+              seen.add(key);
+              // Extract actual URLs from the src property
+              const urls: string[] = [];
+              const urlMatches = src.matchAll(/url\(["']?([^"')]+)["']?\)/g);
+              for (const m of urlMatches) {
+                urls.push(m[1]);
+              }
+              fonts.push({
+                family,
+                src: urls.join(', ') || src,
+                weight,
+                style,
+                display,
+              });
+            }
+          }
+        } catch { /* cross-origin stylesheet, skip */ }
+      }
+    } catch { /* no stylesheets accessible */ }
+
+    return fonts;
+  });
+}
+
+// ── Media query breakpoints ─────────────────────────────────────────
+
+async function extractMediaBreakpoints(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const breakpoints = new Set<string>();
+    // Use a stack instead of recursion to avoid named function declarations
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          const ruleStack: CSSRuleList[] = [sheet.cssRules];
+          while (ruleStack.length > 0) {
+            const rules = ruleStack.pop()!;
+            for (const rule of rules) {
+              if (typeof CSSContainerRule !== 'undefined' && rule instanceof CSSContainerRule) continue;
+              if (rule instanceof CSSMediaRule) {
+                const media = rule.conditionText || rule.media?.mediaText || '';
+                if (media) {
+                  // Only capture viewport width breakpoints (min-width / max-width), not feature queries
+                  if (/(min|max)-width\s*:\s*\d/.test(media)) {
+                    const matches = media.matchAll(/(\d+(?:\.\d+)?)(px|em|rem)/g);
+                    for (const m of matches) {
+                      const val = parseFloat(m[1]);
+                      const unit = m[2];
+                      // Filter: ignore sub-320px values (print, tiny accessibility queries)
+                      const pxVal = unit === 'px' ? val : unit === 'em' ? val * 16 : val * 16;
+                      if (pxVal >= 320) breakpoints.add(`${m[1]}${m[2]}`);
+                    }
+                    breakpoints.add(`@media ${media}`);
+                  }
+                }
+                if (rule.cssRules && rule.cssRules.length > 0) {
+                  ruleStack.push(rule.cssRules);
+                }
+              }
+            }
+          }
+        } catch { /* cross-origin stylesheet, skip */ }
+      }
+    } catch { /* no stylesheets accessible */ }
+
+    const numericBPs: string[] = [];
+    const mediaBPs: string[] = [];
+    for (const bp of breakpoints) {
+      if (bp.startsWith('@media')) {
+        mediaBPs.push(bp);
+      } else {
+        numericBPs.push(bp);
+      }
+    }
+    numericBPs.sort((a, b) => parseFloat(a) - parseFloat(b));
+
+    // Phase 5.2.3 — STOP synthetic Tailwind defaults.
+    // The previous fallback injected '640px,768px,1024px,1280px' when <2 detected,
+    // presenting Tailwind defaults AS IF they were extracted from the site = factual lie.
+    // If <2 detected, return what we have. Downstream marks "fixed-width / responsive units only".
+    return [...numericBPs, ...mediaBPs];
+  });
+}
+
+// ── Sections extraction ─────────────────────────────────────────────
+
+// v2.7 A.1 — the hero headline is frequently NOT the largest measured <h*> (it's a styled <div>,
+// a <span>, or image text), and the §1 narrative was hardcoded to the BODY font — so the single most
+// recognizable signature (serif vs sans display) was lost on every site. Detect the display face by
+// VISUAL PROMINENCE: the above-fold text node with the largest fontSize × rendered width, and classify it.
+interface DisplayFace { family: string; fontSize: string; fontWeight: string; isSerif: boolean; isItalic: boolean; sample: string }
+async function extractDisplaySignature(page: Page): Promise<(DisplayFace & { secondary?: DisplayFace }) | null> {
+  return page.evaluate(() => {
+    const vh = window.innerHeight, vw = window.innerWidth;
+    // v2.9 A.1+ — scan the WHOLE page (hydrated), weight above-fold higher, then keep the top-2
+    // DISTINCT display families. Catches sites with a sans hero + a serif-italic in lower bands
+    // (e.g. switchcollective: Satoshi hero above the fold, Canela serif-italic in "Ré-inventer").
+    const cands: Array<{ score: number; family: string; fontSize: string; fontWeight: string; style: string; sample: string }> = [];
+    const els = document.querySelectorAll('h1,h2,h3,p,a,span,div,[class*="title"],[class*="heading"],[class*="hero"],[class*="headline"]');
+    els.forEach(el => {
+      const r = el.getBoundingClientRect();
+      if (r.width < 80 || r.height < 24) return;
+      const own = Array.from(el.childNodes).filter(n => n.nodeType === 3).map(n => n.textContent || '').join('').replace(/\s+/g, ' ').trim();
+      if (own.length < 3 || own.length > 120) return;
+      const cs = getComputedStyle(el);
+      const fs = parseFloat(cs.fontSize) || 0;
+      if (fs < 22) return; // display scale only
+      const aboveFold = r.top < vh * 1.2 && r.top > -80;
+      const score = fs * Math.min(r.width, vw) * (aboveFold ? 1.5 : 1); // hero counts more
+      cands.push({ score, family: cs.fontFamily || '', fontSize: cs.fontSize, fontWeight: cs.fontWeight, style: cs.fontStyle, sample: own.slice(0, 60) });
+    });
+    if (!cands.length) return null;
+    cands.sort((a, b) => b.score - a.score);
+    const SERIF = ['times', 'georgia', 'garamond', 'playfair', 'canela', 'fraunces', 'tiempos', 'teodor', 'quincy', 'recoleta', 'editorial', 'freight', 'noe', 'reckless', 'domaine', 'ogg', 'signifier', 'lora', 'merriweather', 'source serif', 'dm serif', 'spectral', 'newsreader', 'cormorant', 'gt sectra', 'ppeditorial', 'instrument serif'];
+    // NOTE: classification is inlined via an anonymous .map() — a NAMED const-arrow (e.g. `const classify=`)
+    // makes tsx/esbuild emit a `__name(...)` helper that is undefined inside page.evaluate (ReferenceError).
+    const topFirst = (cands[0].family.split(',')[0] || '').replace(/["']/g, '').trim().toLowerCase();
+    const secCand = cands.find(c => (c.family.split(',')[0] || '').replace(/["']/g, '').trim().toLowerCase() !== topFirst);
+    const faces = [cands[0], secCand].filter(Boolean).map(c => {
+      const cc = c as { family: string; fontSize: string; fontWeight: string; style: string; sample: string };
+      const first = (cc.family.split(',')[0] || '').replace(/["']/g, '').trim();
+      const low = first.toLowerCase();
+      return {
+        family: first,
+        fontSize: cc.fontSize,
+        fontWeight: cc.fontWeight,
+        isSerif: SERIF.some(s => low.includes(s)) || (/serif/.test(low) && !/sans/.test(low)),
+        isItalic: cc.style === 'italic' || /italic/.test(low),
+        sample: cc.sample,
+      };
+    });
+    const primary = faces[0];
+    const secondary = faces[1];
+    return secondary ? { ...primary, secondary } : primary;
+  });
+}
+
+async function extractSections(page: Page): Promise<SectionExtraction[]> {
+  return page.evaluate(() => {
+    // Find major page sections
+    const sectionSelectors = [
+      'header', 'nav', 'main', 'section', 'aside', 'footer',
+      '[role="banner"]', '[role="navigation"]', '[role="main"]',
+      '[role="complementary"]', '[role="contentinfo"]',
+      'div[class*="section"]', 'div[class*="container"]',
+      'div[class*="wrapper"]', 'div[class*="hero"]',
+    ];
+
+    const seen = new Set<Element>();
+    const sections: Array<{
+      index: number;
+      tag: string;
+      classes: string[];
+      role: string;
+      estimatedPurpose: string;
+      rect: { x: number; y: number; width: number; height: number };
+      styles: Record<string, string>;
+      childCount: number;
+      bgTreatment: string;
+      isDark: boolean;
+      aboveFold: boolean;
+      isFullBleed: boolean;
+      imgRatio: number;
+      maxHeadingPx: number;
+      gridCols: number;
+      hasAnimation: boolean;
+      textLen: number;
+      vPad: number;
+      hasChart: boolean;
+    }> = [];
+
+    // Also get direct children of body that are significant
+    const bodyChildren = (document.body ? Array.from(document.body.children) : []).filter(el => {
+      const rect = el.getBoundingClientRect();
+      return rect.height > 50 && rect.width > 200;
+    });
+
+    // v2.10-B — SPA/Framer/WebGL fallback: when everything is nested in ≤2 wrappers (e.g. hyperliquid
+    // returns a single monolithic section), descend to surface real bands. Iterative stack (NO named
+    // recursive fn — that triggers tsx/esbuild __name → ReferenceError in page.evaluate). A "band" =
+    // full-width-ish, 80–2600px tall, with content; giant wrappers (>2600px) are descended into.
+    const extraCandidates: Element[] = [];
+    if (bodyChildren.length <= 2) {
+      const vw = window.innerWidth;
+      const stack: Element[] = bodyChildren.slice();
+      let guard = 0;
+      while (stack.length > 0 && guard < 3000) {
+        guard++;
+        const node = stack.shift() as Element;
+        const kids = Array.from(node.children);
+        for (let ki = 0; ki < kids.length; ki++) {
+          const k = kids[ki];
+          const kr = k.getBoundingClientRect();
+          const hasContent = k.children.length > 0 || (k.textContent || '').trim().length > 0;
+          if (kr.width > vw * 0.6 && kr.height >= 80 && kr.height <= 2600 && hasContent) extraCandidates.push(k);
+          else if (kr.height > 2600 && k.children.length > 0) stack.push(k);
+        }
+      }
+    }
+
+    const allCandidates = [
+      ...bodyChildren,
+      ...extraCandidates,
+      ...sectionSelectors.flatMap(s => Array.from(document.querySelectorAll(s))),
+    ];
+
+    let idx = 0;
+    for (const el of allCandidates) {
+      if (seen.has(el)) continue;
+      seen.add(el);
+
+      const rect = el.getBoundingClientRect();
+      if (rect.height < 30) continue;
+
+      const cs = getComputedStyle(el);
+      const tag = el.tagName.toLowerCase();
+      const classes = Array.from(el.classList);
+      const role = el.getAttribute('role') || '';
+
+      // v2.7 A.3/A.4 — content-signature classification (not tag/class strings only).
+      // The old classifier defaulted to 'unknown' on Webflow/Shopify/Chakra div-soup, making §13
+      // a useless stub. We now read real content signals so §13 names real bands.
+      const classStr = classes.join(' ').toLowerCase();
+      const vw = window.innerWidth, vh = window.innerHeight;
+      const txt = (el.textContent || '').replace(/\s+/g, ' ').trim();
+      const txtLen = txt.length;
+      const imgEls = el.querySelectorAll('img,picture,svg,video');
+      let imgArea = 0;
+      imgEls.forEach(im => { const r = im.getBoundingClientRect(); imgArea += Math.max(0, r.width) * Math.max(0, r.height); });
+      const imgRatio = imgArea / Math.max(1, rect.width * rect.height);
+      let maxHeadingPx = 0;
+      el.querySelectorAll('h1,h2,h3').forEach(h => { const fs = parseFloat(getComputedStyle(h).fontSize) || 0; if (fs > maxHeadingPx) maxHeadingPx = fs; });
+      const isFullBleed = rect.width >= vw * 0.95;
+      const aboveFold = rect.y < vh * 0.9;
+      const gridCols = cs.gridTemplateColumns && cs.gridTemplateColumns !== 'none' ? cs.gridTemplateColumns.split(' ').filter(Boolean).length : 0;
+      const hasAnimation = !!cs.animationName && cs.animationName !== 'none';
+      // Background treatment (A.4) — the dominant atmosphere the old extractor was blind to.
+      const bgImg = cs.backgroundImage || 'none';
+      let bgTreatment = 'flat';
+      if (bgImg && bgImg !== 'none') {
+        if (/gradient/i.test(bgImg)) bgTreatment = /radial-gradient|conic-gradient/i.test(bgImg) ? 'radial-gradient' : ((bgImg.match(/rgba?\(|#[0-9a-f]{3,8}/gi) || []).length >= 4 ? 'mesh-gradient' : 'linear-gradient');
+        else if (/url\(/i.test(bgImg)) bgTreatment = 'image';
+      }
+      const bgM = (cs.backgroundColor || '').match(/(\d+),\s*(\d+),\s*(\d+)/);
+      const isDarkBand = bgM ? (((+bgM[1]) * 0.2126 + (+bgM[2]) * 0.7152 + (+bgM[3]) * 0.0722) / 255 < 0.35) : false;
+      // v2.11-B — premium sites put their generous vertical whitespace on an INNER wrapper, not the
+      // section element (attio sections report padding "0px"). Capture the largest child's vertical
+      // padding so the real airy rhythm survives. Also flag chart/canvas/SVG-graph bands (A).
+      let innerPadTop = parseFloat(cs.paddingTop) || 0;
+      let innerPadBottom = parseFloat(cs.paddingBottom) || 0;
+      if (innerPadTop < 8 && innerPadBottom < 8) {
+        const kidsArr = Array.from(el.children);
+        for (let ci = 0; ci < kidsArr.length; ci++) {
+          const cr = kidsArr[ci].getBoundingClientRect();
+          if (cr.height > 60 && cr.width > rect.width * 0.4) {
+            const kcs = getComputedStyle(kidsArr[ci]);
+            innerPadTop = Math.max(innerPadTop, parseFloat(kcs.paddingTop) || 0);
+            innerPadBottom = Math.max(innerPadBottom, parseFloat(kcs.paddingBottom) || 0);
+          }
+        }
+      }
+      const vPad = Math.round((innerPadTop + innerPadBottom) / 2);
+      const hasChart = !!el.querySelector('canvas, svg path[d], svg polyline, [class*="chart" i], [class*="graph" i]');
+
+      // Classify: structural tags first, then content signature.
+      let purpose = 'unknown';
+      if (tag === 'header' || role === 'banner' || classStr.includes('header')) purpose = 'header';
+      else if (tag === 'nav' || role === 'navigation' || classStr.includes('nav')) purpose = 'navigation';
+      else if (tag === 'footer' || role === 'contentinfo' || classStr.includes('footer')) purpose = 'footer';
+      else if (tag === 'aside' || role === 'complementary' || classStr.includes('sidebar')) purpose = 'sidebar';
+      else if (hasAnimation && txtLen > 0 && txtLen < 220 && rect.height < 180 && isFullBleed) purpose = 'marquee';
+      else if (aboveFold && idx <= 2 && maxHeadingPx >= 30 && isFullBleed) purpose = 'hero';
+      else if (/pricing|tarif|formule|\bplan/.test(classStr) || (gridCols >= 2 && /€|\$|\/mo\b|\/mois|par mois/i.test(txt.slice(0, 400)))) purpose = 'pricing';
+      else if (/faq|accordion|question/.test(classStr)) purpose = 'faq';
+      else if (/testimonial|review|avis|t[ée]moignage/i.test(classStr + ' ' + txt.slice(0, 160))) purpose = 'testimonials';
+      else if (imgEls.length >= 5 && rect.height < 220 && maxHeadingPx < 24) purpose = 'logo-strip';
+      else if (imgRatio > 0.4 && gridCols >= 3) purpose = 'gallery-grid';
+      else if (gridCols >= 2 && el.children.length >= 3 && maxHeadingPx < 30) purpose = 'card-grid';
+      else if (maxHeadingPx >= 24 && txtLen > 60) purpose = 'feature-section';
+      else if (txtLen > 220) purpose = 'content-section';
+      else if (tag === 'main' || role === 'main') purpose = 'main-content';
+      else if (tag === 'section') purpose = 'section';
+
+      sections.push({
+        index: idx++,
+        tag,
+        classes,
+        role,
+        estimatedPurpose: purpose,
+        rect: { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.round(rect.width), height: Math.round(rect.height) },
+        styles: {
+          backgroundColor: cs.backgroundColor,
+          color: cs.color,
+          fontFamily: cs.fontFamily,
+          fontSize: cs.fontSize,
+          padding: cs.padding,
+          margin: cs.margin,
+          display: cs.display,
+          gap: cs.gap,
+          gridTemplateColumns: cs.gridTemplateColumns,
+          flexDirection: cs.flexDirection,
+          maxWidth: cs.maxWidth,
+          width: cs.width,
+          height: cs.height,
+          position: cs.position,
+          borderRadius: cs.borderRadius,
+          boxShadow: cs.boxShadow,
+          overflow: cs.overflow,
+          alignItems: cs.alignItems,
+          justifyContent: cs.justifyContent,
+          textTransform: cs.textTransform,
+          textDecoration: cs.textDecoration,
+          border: cs.border,
+          letterSpacing: cs.letterSpacing,
+          lineHeight: cs.lineHeight,
+          fontWeight: cs.fontWeight,
+          opacity: cs.opacity,
+          transition: cs.transition,
+          fontFeatureSettings: cs.fontFeatureSettings,
+          fontVariationSettings: (cs as any).fontVariationSettings || 'normal',
+        },
+        childCount: el.children.length,
+        bgTreatment,
+        isDark: isDarkBand,
+        aboveFold,
+        isFullBleed,
+        imgRatio: Math.round(imgRatio * 100) / 100,
+        maxHeadingPx: Math.round(maxHeadingPx),
+        gridCols,
+        hasAnimation,
+        textLen: txtLen,
+        vPad,
+        hasChart,
+      });
+    }
+
+    // Sort by Y position
+    sections.sort((a, b) => a.rect.y - b.rect.y);
+    return sections;
+  });
+}
+
+async function extractImages(page: Page): Promise<{ src: string; alt: string; width: number; height: number }[]> {
+  return page.evaluate(() => {
+    return Array.from(document.querySelectorAll('img')).slice(0, 50).map(img => ({
+      src: img.src,
+      alt: img.alt,
+      width: Math.round(img.getBoundingClientRect().width),
+      height: Math.round(img.getBoundingClientRect().height),
+    }));
+  });
+}
+
+/**
+ * Extract imagery profile — OG image, hero image, format distribution, illustration vs photo mix.
+ * Used in DESIGN.md §10b to guide LLMs on visual tone (lifestyle photography vs product mockups
+ * vs abstract gradients vs illustration-heavy).
+ */
+interface ImageryProfile {
+  ogImage: string | null;
+  ogImageWidth: number | null;
+  ogImageHeight: number | null;
+  twitterImage: string | null;
+  heroImage: { src: string; alt: string; width: number; height: number; aspectRatio: number } | null;
+  formats: { png: number; jpg: number; webp: number; svg: number; gif: number; other: number };
+  totalImages: number;
+  totalAboveFold: number;
+  aspectRatioBuckets: { landscape: number; portrait: number; square: number; ultrawide: number };
+  illustrationHeavy: boolean;       // svg + png count vs jpg/webp (illustrations vs photos)
+  photoHeavy: boolean;
+  avgImageSize: { width: number; height: number };
+  decorativePatterns?: {
+    multiStopGradients: number;
+    radialGradients: number;
+    largeSvgShapes: number;
+    backgroundImagePatterns: number;
+    hasNoise: boolean;
+    hasGlassmorphism: boolean;
+  };
+}
+
+async function extractImageryProfile(page: Page): Promise<ImageryProfile> {
+  return page.evaluate(() => {
+    // OG / Twitter meta — inline lookups to avoid tsx __name() compilation issues
+    const ogImageEl = document.querySelector('meta[property="og:image"]') || document.querySelector('meta[name="og:image"]');
+    const ogImage = ogImageEl ? ogImageEl.getAttribute('content') : null;
+    const ogWEl = document.querySelector('meta[property="og:image:width"]');
+    const ogW = ogWEl ? ogWEl.getAttribute('content') : null;
+    const ogHEl = document.querySelector('meta[property="og:image:height"]');
+    const ogH = ogHEl ? ogHEl.getAttribute('content') : null;
+    const twitterEl = document.querySelector('meta[name="twitter:image"]') || document.querySelector('meta[property="twitter:image"]');
+    const twitterImage = twitterEl ? twitterEl.getAttribute('content') : null;
+
+    // All images on page
+    const imgs = Array.from(document.querySelectorAll('img'));
+    const formats = { png: 0, jpg: 0, webp: 0, svg: 0, gif: 0, other: 0 };
+    const buckets = { landscape: 0, portrait: 0, square: 0, ultrawide: 0 };
+    let totalW = 0;
+    let totalH = 0;
+    let counted = 0;
+    let aboveFold = 0;
+    const viewportH = window.innerHeight;
+
+    let heroImage = null;
+    let heroArea = 0;
+
+    for (const img of imgs.slice(0, 100)) {
+      const rect = img.getBoundingClientRect();
+      const w = Math.round(rect.width);
+      const h = Math.round(rect.height);
+      if (w < 50 || h < 50) continue;
+
+      counted++;
+      totalW += w;
+      totalH += h;
+      if (rect.top < viewportH) aboveFold++;
+
+      const area = w * h;
+      if (area > heroArea && rect.top < viewportH * 1.5) {
+        heroArea = area;
+        heroImage = {
+          src: img.src,
+          alt: img.alt || '',
+          width: w,
+          height: h,
+          aspectRatio: Math.round((w / h) * 100) / 100,
+        };
+      }
+
+      const ratio = w / h;
+      if (ratio > 2.3) buckets.ultrawide++;
+      else if (ratio > 1.15) buckets.landscape++;
+      else if (ratio < 0.87) buckets.portrait++;
+      else buckets.square++;
+
+      const src = img.src.toLowerCase();
+      const srcsetFirst = (img.srcset || '').toLowerCase().split(' ')[0];
+      const extMatch = src.match(/\.(png|jpe?g|webp|svg|gif)(\?|$)/) || srcsetFirst.match(/\.(png|jpe?g|webp|svg|gif)(\?|$)/);
+      const ext = extMatch ? extMatch[1] : '';
+      if (ext === 'png') formats.png++;
+      else if (ext === 'jpg' || ext === 'jpeg') formats.jpg++;
+      else if (ext === 'webp') formats.webp++;
+      else if (ext === 'svg') formats.svg++;
+      else if (ext === 'gif') formats.gif++;
+      else formats.other++;
+    }
+
+    // Count significant SVGs only (skip tiny icons < 60px which dominate counts)
+    const inlineSvgs = Array.from(document.querySelectorAll('svg'));
+    let largeSvgs = 0;
+    let iconSvgs = 0;
+    for (const svg of inlineSvgs.slice(0, 300)) {
+      const rect = svg.getBoundingClientRect();
+      if (rect.width >= 80 && rect.height >= 80) largeSvgs++;
+      else iconSvgs++;
+    }
+    formats.svg += largeSvgs;  // only count significant SVGs as illustrations
+
+    const totalCounted = counted || 1;
+    const avgImageSize = {
+      width: Math.round(totalW / totalCounted),
+      height: Math.round(totalH / totalCounted),
+    };
+
+    // Heuristics:
+    // - photo-heavy: 10+ raster photos (jpg/webp), regardless of icon count
+    // - illustration-heavy: large SVGs dominate AND few raster photos exist
+    // - otherwise: mixed or text-driven
+    const photoCount = formats.jpg + formats.webp;
+    const illustrationCount = formats.svg;  // already filtered to >=80px
+    const photoHeavy = photoCount >= 10;
+    const illustrationHeavy = !photoHeavy && illustrationCount > photoCount * 1.5 && illustrationCount >= 5;
+
+    // Phase 4.4 — Decorative patterns detection (gradient mesh, blobs, glassmorphism)
+    let multiStopGradients = 0;
+    let radialGradients = 0;
+    let backgroundImagePatterns = 0;
+    let hasNoise = false;
+    let hasGlassmorphism = false;
+    const allEls = document.querySelectorAll('*');
+    const scanLimit = Math.min(allEls.length, 1500);
+    for (let i = 0; i < scanLimit; i++) {
+      const el = allEls[i];
+      const cs = getComputedStyle(el);
+      const bgImage = cs.backgroundImage;
+      if (bgImage && bgImage !== 'none') {
+        if (bgImage.indexOf('radial-gradient') !== -1) radialGradients++;
+        if (bgImage.indexOf('linear-gradient') !== -1 || bgImage.indexOf('conic-gradient') !== -1) {
+          const m = bgImage.match(/\b(linear|conic)-gradient\([^)]*\)/);
+          if (m && (m[0].match(/,/g) || []).length >= 3) multiStopGradients++;
+        }
+        if (bgImage.indexOf('url(') !== -1 && !/\.(jpe?g|webp|png)/i.test(bgImage)) {
+          backgroundImagePatterns++;
+        }
+        if (/noise|grain|pattern/i.test(bgImage)) hasNoise = true;
+      }
+      const backdrop = (cs as any).backdropFilter || (cs as any).webkitBackdropFilter;
+      if (backdrop && /blur\(\d+/.test(backdrop)) hasGlassmorphism = true;
+    }
+    // Large SVG shapes (already counted above via largeSvgs)
+    const decorativePatterns = {
+      multiStopGradients,
+      radialGradients,
+      largeSvgShapes: largeSvgs,
+      backgroundImagePatterns,
+      hasNoise,
+      hasGlassmorphism,
+    };
+
+    return {
+      ogImage,
+      ogImageWidth: ogW ? parseInt(ogW, 10) : null,
+      ogImageHeight: ogH ? parseInt(ogH, 10) : null,
+      twitterImage,
+      heroImage,
+      formats,
+      totalImages: counted,
+      totalAboveFold: aboveFold,
+      aspectRatioBuckets: buckets,
+      illustrationHeavy,
+      photoHeavy,
+      avgImageSize,
+      decorativePatterns,
+    };
+  }) as Promise<ImageryProfile>;
+}
+
+async function extractLinks(page: Page): Promise<{ href: string; text: string; isNav: boolean }[]> {
+  return page.evaluate(() => {
+    return Array.from(document.querySelectorAll('a')).slice(0, 100).map(a => {
+      const inNav = !!a.closest('nav, header, [role="navigation"], [class*="nav"]');
+      return {
+        href: a.href,
+        text: a.innerText?.trim().slice(0, 100) || '',
+        isNav: inNav,
+      };
+    });
+  });
+}
+
+// ── Advanced extractors (kept after Phase 1.2 cleanup — only zIndexMap + keyframes have consumers) ────
+import {
+  extractKeyframes,
+  extractZIndexMap,
+  extractVisualEffects,
+  type VisualEffects,
+} from './extractors/advanced.js';
+import { extractWidgets, type WidgetExtraction } from './extractors/widgets.js';
+
+// ── Screenshots ──────────────────────────────────────────────────────
+
+// v2.9 A.5 — fully hydrate lazy content BEFORE screenshots + DOM extraction.
+// Root cause of Attio's "white capture" + MIAM's stripped photos: IntersectionObserver / lazy
+// images never entered the viewport at capture time. Slow-scroll the whole page in steps (triggers
+// every lazy loader), wait for images to decode + network to settle, then return to top.
+async function ensureLazyLoaded(page: Page): Promise<void> {
+  try {
+    await page.evaluate(async () => {
+      await new Promise<void>((resolve) => {
+        const step = Math.max(240, Math.floor(window.innerHeight * 0.75));
+        let y = 0;
+        const tick = () => {
+          window.scrollTo(0, y);
+          y += step;
+          if (y >= document.documentElement.scrollHeight) { window.scrollTo(0, 0); resolve(); }
+          else setTimeout(tick, 110);
+        };
+        tick();
+      });
+    });
+    // Wait for newly-revealed images to decode (capped) + network to settle.
+    await page.evaluate(async () => {
+      const pending = Array.from(document.images).filter(i => !i.complete && i.src);
+      await Promise.race([
+        Promise.all(pending.map(i => (i.decode ? i.decode().catch(() => {}) : Promise.resolve()))),
+        new Promise(r => setTimeout(r, 2500)),
+      ]);
+    }).catch(() => {});
+    await page.waitForLoadState('networkidle', { timeout: 3000 }).catch(() => {});
+  } catch { /* best-effort — never block extraction */ }
+}
+
+async function takeScreenshots(page: Page, outputDir: string, viewport: string): Promise<void> {
+  // Full page (with timeout fallback) — heavy sites need longer timeouts
+  try {
+    await page.screenshot({
+      path: join(outputDir, `full-page-${viewport}.png`),
+      fullPage: true,
+      timeout: 60000,
+    });
+  } catch {
+    console.log(`  ⚠️  Full-page screenshot timeout, using viewport-only`);
+    try {
+      await page.screenshot({
+        path: join(outputDir, `full-page-${viewport}.png`),
+        fullPage: false,
+        timeout: 30000,
+      });
+    } catch {
+      console.log(`  ⚠️  Viewport screenshot also timeout, skipping`);
+    }
+  }
+
+  // Above the fold
+  await page.screenshot({
+    path: join(outputDir, `above-fold-${viewport}.png`),
+    fullPage: false,
+  });
+
+  // Individual sections
+  const sections = await page.evaluate(() => {
+    const candidates = [
+      ...Array.from(document.querySelectorAll('header, nav, main, section, aside, footer')),
+      ...(document.body ? Array.from(document.body.children) : []).filter(el => {
+        const r = el.getBoundingClientRect();
+        return r.height > 100 && r.width > 200;
+      }),
+    ];
+    const seen = new Set<Element>();
+    return candidates.filter(el => {
+      if (seen.has(el)) return false;
+      seen.add(el);
+      return true;
+    }).slice(0, 15).map((el, i) => {
+      const r = el.getBoundingClientRect();
+      const tag = el.tagName.toLowerCase();
+      const cls = Array.from(el.classList).join('-').slice(0, 30) || 'no-class';
+      return {
+        name: `${i}-${tag}-${cls}`,
+        clip: { x: r.x, y: r.y + window.scrollY, width: r.width, height: Math.min(r.height, 2000) },
+      };
+    });
+  });
+
+  for (const section of sections) {
+    if (section.clip.width < 10 || section.clip.height < 10) continue;
+    try {
+      await page.screenshot({
+        path: join(outputDir, `section-${section.name}-${viewport}.png`),
+        clip: section.clip,
+      });
+    } catch {
+      // Skip sections that fail (out of bounds, etc.)
+    }
+  }
+}
+
+// ── Scroll-and-screenshot (catches lazy-loaded content) ─────────────
+
+async function scrollAndScreenshot(page: Page, outputDir: string, viewport: string): Promise<void> {
+  const viewportHeight = page.viewportSize()?.height || 900;
+
+  // Get total page height
+  const totalHeight = await page.evaluate(() => {
+    return Math.max(
+      document.body?.scrollHeight || 0,
+      document.documentElement.scrollHeight,
+    );
+  });
+
+  // Phase 5 Sprint 80/20 — 5 positions × 300ms au lieu de 10 × 800ms (gain -6.5s/viewport)
+  // Couverture lazy-load préservée par full-page screenshot déjà pris.
+  const MAX_POSITIONS = 5;
+  const WAIT_LAZY = 300;
+  const positions: number[] = [];
+  let currentY = 0;
+  while (currentY < totalHeight && positions.length < MAX_POSITIONS) {
+    positions.push(currentY);
+    currentY += viewportHeight;
+  }
+
+  for (let i = 0; i < positions.length; i++) {
+    const y = positions[i];
+
+    // Scroll to position
+    await page.evaluate((scrollY: number) => {
+      window.scrollTo({ top: scrollY, behavior: 'instant' as ScrollBehavior });
+    }, y);
+
+    // Wait for lazy-loaded content to appear
+    await page.waitForTimeout(WAIT_LAZY);
+
+    // Take screenshot at this scroll position
+    try {
+      await page.screenshot({
+        path: join(outputDir, `scroll-${i}-${viewport}.png`),
+        fullPage: false, // Only the current viewport
+      });
+    } catch {
+      // Skip on failure
+    }
+  }
+
+  // Scroll back to top for subsequent extractions
+  await page.evaluate(() => {
+    window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior });
+  });
+  await page.waitForTimeout(500);
+}
+
+// ── Main extraction pipeline ─────────────────────────────────────────
+
+async function extractFromURL(url: string): Promise<void> {
+  const domain = new URL(url).hostname.replace('www.', '');
+  const baseDir = join(process.cwd(), 'extractions', domain);
+  const screenshotDir = join(baseDir, 'screenshots');
+
+  await mkdir(screenshotDir, { recursive: true });
+
+  console.log(`\n🔍 Prism — Extracting: ${url}`);
+  console.log(`📁 Output: ${baseDir}\n`);
+
+  let browser: Browser | null = null;
+
+  try {
+    browser = await chromium.launch({
+      headless: true,
+      args: [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-blink-features=AutomationControlled',
+        '--disable-infobars',
+        '--window-size=1440,900',
+      ],
+    });
+
+    const results: Record<string, ExtractionResult> = {};
+
+    for (const [vpName, vpSize] of Object.entries(VIEWPORTS)) {
+      console.log(`📐 Viewport: ${vpName} (${vpSize.width}x${vpSize.height})`);
+
+      // sec-ch-ua Client Hints are Chromium-only — Safari/iOS never sends them.
+      // Sending them with an iPhone UA is a detectable bot fingerprint.
+      const mobileUA = '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';
+      const desktopUA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36';
+
+      let context = await browser.newContext({
+        viewport: vpSize,
+        userAgent: vpName === 'mobile' ? mobileUA : desktopUA,
+        deviceScaleFactor: vpName === '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',
+          // Client Hints uniquement pour desktop (Chrome) — jamais pour mobile Safari
+          ...(vpName !== 'mobile' ? {
+            'sec-ch-ua': '"Chromium";v="124", "Google Chrome";v="124", "Not-A.Brand";v="99"',
+            'sec-ch-ua-mobile': '?0',
+            'sec-ch-ua-platform': '"Windows"',
+          } : {}),
+        },
+      });
+
+      let page = await context.newPage();
+
+      // Masquer les indicateurs d'automatisation
+      await page.addInitScript(() => {
+        Object.defineProperty(navigator, 'webdriver', { get: () => false });
+        Object.defineProperty(navigator, 'plugins', { get: () => [1, 2, 3] });
+        (window as any).chrome = { runtime: {} };
+      });
+
+      // Phase 2.1 — Fast page load: skip networkidle, use domcontentloaded + targeted waits
+      // Why: networkidle waits for tracker scripts (GA, Hotjar) that often never settle on tracker-heavy
+      // sites like Stripe/Coinbase, wasting 30s. domcontentloaded + load + conditional lazy-wait is faster
+      // and still captures full computed styles.
+      console.log('  ⏳ Loading page...');
+      try {
+        await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 15000 });
+        // Wait for load event (fonts + critical CSS) but don't block on tracker network
+        await page.waitForLoadState('load', { timeout: 5000 }).catch(() => {});
+      } catch {
+        console.log('  ⚠️  Initial load failed, falling back to bare domcontentloaded...');
+        await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 10000 });
+      }
+
+      // Conditional lazy-wait: only wait if the page is long enough to suggest lazy-loaded content
+      const isLongPage = await page.evaluate(() =>
+        document.documentElement.scrollHeight > window.innerHeight * 2
+      ).catch(() => false);
+      if (isLongPage) await page.waitForTimeout(2000);
+
+      // Dismiss common popups/modals
+      await dismissPopups(page);
+
+      // Phase 5.1.3 — Bot challenge detection (Cloudflare, CAPTCHA, etc.)
+      const botCheck = await detectBotChallenge(page);
+      if (botCheck.blocked) {
+        console.log(`  🤖 Bot challenge: ${botCheck.reason} — stealth retry...`);
+        await page.close().catch(() => {});
+        await context.close().catch(() => {});
+        await browser!.close().catch(() => {});
+
+        // Stealth retry via browser-stealth.ts (playwright-extra + puppeteer-stealth)
+        const { launchBrowser } = await import('./browser-stealth.js');
+        browser = await launchBrowser({ stealth: true });
+        context = await browser.newContext({
+          viewport: vpSize,
+          userAgent: vpName === 'mobile' ? mobileUA : desktopUA,
+          deviceScaleFactor: vpName === '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',
+            ...(vpName !== 'mobile' ? {
+              'sec-ch-ua': '"Chromium";v="124", "Google Chrome";v="124", "Not-A.Brand";v="99"',
+              'sec-ch-ua-mobile': '?0',
+              'sec-ch-ua-platform': '"Windows"',
+            } : {}),
+          },
+        });
+        page = await context.newPage();
+        await page.addInitScript(() => {
+          Object.defineProperty(navigator, 'webdriver', { get: () => false });
+          Object.defineProperty(navigator, 'plugins', { get: () => [1, 2, 3] });
+          (window as any).chrome = { runtime: {} };
+        });
+
+        console.log('  ⏳ Stealth retry — loading page...');
+        await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+        await page.waitForLoadState('load', { timeout: 10000 }).catch(() => {});
+        await dismissPopups(page);
+
+        const botCheck2 = await detectBotChallenge(page);
+        if (botCheck2.blocked) {
+          throw new Error(`Bot challenge persists after stealth retry: ${botCheck2.reason}`);
+        }
+        console.log(`  ✅ Stealth retry succeeded`);
+      }
+
+      // ── v2.9 A.5 — hydrate lazy content before capturing anything ──
+      console.log('  💧 Hydrating lazy content (full-page scroll + decode)...');
+      await ensureLazyLoaded(page);
+
+      // ── Screenshots ──
+      console.log('  📸 Taking screenshots...');
+      await takeScreenshots(page, screenshotDir, vpName);
+
+      // ── Scroll-and-screenshot (catches lazy-loaded content) ──
+      console.log('  📜 Scroll-and-screenshot for lazy-loaded content...');
+      await scrollAndScreenshot(page, screenshotDir, vpName);
+
+      // ── Extract everything ──
+      console.log('  🎨 Extracting computed styles...');
+      const [
+        elements,
+        cssVars,
+        allColors,
+        fonts,
+        borderRadii,
+        shadows,
+        transitions,
+        sections,
+        images,
+        imageryProfile,
+        widgets,
+        links,
+        componentVariants,
+        fontFaces,
+        mediaBreakpoints,
+      ] = await Promise.all([
+        extractComputedStyles(page),
+        extractCSSCustomProperties(page),
+        extractAllColors(page),
+        extractAllFonts(page),
+        extractAllBorderRadii(page),
+        extractAllShadows(page),
+        extractAllTransitions(page),
+        extractSections(page),
+        extractImages(page),
+        extractImageryProfile(page).catch((e) => { console.warn('  ⚠️  imagery profile extraction failed:', (e as Error).message); return null; }),
+        extractWidgets(page).catch((e) => { console.warn('  ⚠️  widgets extraction failed:', (e as Error).message); return null; }),
+        extractLinks(page),
+        extractComponentVariants(page),
+        extractFontFaces(page),
+        extractMediaBreakpoints(page),
+      ]);
+
+      // ── Advanced design capture ──
+      const [keyframes, zIndexMap, visualEffects] = await Promise.all([
+        extractKeyframes(page).catch((e) => { console.warn('  ⚠️  keyframes extraction failed:', (e as Error).message); return {}; }),
+        extractZIndexMap(page).catch((e) => { console.warn('  ⚠️  z-index extraction failed:', (e as Error).message); return []; }),
+        vpName === 'desktop' ? extractVisualEffects(page).catch((e) => { console.warn('  ⚠️  visual effects extraction failed:', (e as Error).message); return null; }) : Promise.resolve(null),
+      ]);
+      console.log(`  🎬 Advanced: ${Object.keys(keyframes).length} keyframes, ${zIndexMap.length} z-index`);
+      if (visualEffects) console.log(`  ✨ Visual effects: ${visualEffects.motionSummary}`);
+
+      // ── Component States (hover/focus) — desktop only, sequential ──
+      let componentStates: Record<string, ComponentStateStyles> = {};
+      if (vpName === 'desktop') {
+        console.log('  🖱️  Extracting component states (hover/focus)...');
+        componentStates = await extractComponentStates(page);
+        const stateCount = Object.keys(componentStates).length;
+        console.log(`     → ${stateCount} component states captured`);
+      }
+
+      // ── OpenType Features ──
+      const openTypeData = await extractOpenTypeFeatures(page);
+      console.log(`  🔤 OpenType features: [${openTypeData.features.join(', ') || 'none'}] | axes: [${openTypeData.axes.join(', ') || 'none'}]`);
+
+      const displaySignature = await extractDisplaySignature(page).catch((e) => { console.error('  ❌ displaySignature ERR:', (e as Error).message); return null; });
+      if (displaySignature) console.log(`  🅰️  Display signature: ${displaySignature.family} ${displaySignature.fontSize} ${displaySignature.isSerif ? 'SERIF' : 'sans'}${displaySignature.isItalic ? ' italic' : ''}`);
+
+      const pageTitle = await page.title();
+
+      results[vpName] = {
+        url,
+        domain,
+        timestamp: new Date().toISOString(),
+        viewport: vpSize,
+        pageTitle,
+        cssCustomProperties: cssVars,
+        elements,
+        sections,
+        allColors,
+        allFontFamilies: fonts.families,
+        allFontSizes: fonts.sizes,
+        allBorderRadii: borderRadii,
+        allShadows: shadows,
+        allTransitions: transitions,
+        images,
+        imageryProfile: imageryProfile || undefined,
+        widgets: widgets || undefined,
+        links,
+        componentVariants,
+        componentStates,
+        fontFaces,
+        mediaBreakpoints,
+        openTypeFeatures: openTypeData.features,
+        variableAxes: openTypeData.axes,
+        displaySignature: displaySignature || undefined,
+        // Advanced capture
+        keyframes,
+        zIndexMap,
+        visualEffects: visualEffects || undefined,
+      };
+
+      const variantCount = Object.values(componentVariants).reduce((sum, v) => sum + v.length, 0);
+      console.log(`  ✅ ${vpName} done — ${Object.keys(cssVars).length} CSS vars, ${allColors.length} colors, ${sections.length} sections, ${variantCount} component variants, ${fontFaces.length} font-faces, ${mediaBreakpoints.filter(b => !b.startsWith('@')).length} breakpoints`);
+
+      await context.close();
+    }
+
+    // ── Save results ──
+    console.log('\n💾 Saving extraction data...');
+
+    // Phase 1.3 — add schema version so downstream can detect drift
+    const versionedResults = {
+      ...results,
+      version: '2.4.0',
+    };
+
+    await writeFile(
+      join(baseDir, 'raw-css.json'),
+      JSON.stringify(versionedResults, null, 2),
+    );
+
+    // Save a summary for quick reference
+    const desktop = results.desktop;
+    const summary = {
+      url,
+      domain,
+      extractedAt: new Date().toISOString(),
+      pageTitle: desktop.pageTitle,
+      cssCustomPropertiesCount: Object.keys(desktop.cssCustomProperties).length,
+      colorsFound: desktop.allColors.length,
+      fontFamilies: desktop.allFontFamilies,
+      fontSizes: desktop.allFontSizes,
+      borderRadii: desktop.allBorderRadii,
+      shadows: desktop.allShadows,
+      sectionsFound: desktop.sections.length,
+      elementsFound: Object.entries(desktop.elements).filter(([, v]) => v !== null).map(([k]) => k),
+      imagesCount: desktop.images.length,
+      navLinksCount: desktop.links.filter(l => l.isNav).length,
+      componentVariants: Object.fromEntries(
+        Object.entries(desktop.componentVariants).map(([k, v]) => [k, v.length])
+      ),
+      fontFaces: desktop.fontFaces.map(f => `${f.family} (${f.weight} ${f.style})`),
+      mediaBreakpoints: desktop.mediaBreakpoints.filter(b => !b.startsWith('@')),
+    };
+
+    await writeFile(
+      join(baseDir, 'extraction-summary.json'),
+      JSON.stringify(summary, null, 2),
+    );
+
+    console.log(`\n✅ Extraction complete for ${domain}`);
+    console.log(`   📁 ${baseDir}/`);
+    console.log(`   📸 Screenshots: ${screenshotDir}/`);
+    console.log(`   🎨 Raw CSS: ${baseDir}/raw-css.json`);
+    console.log(`   📊 Summary: ${baseDir}/extraction-summary.json`);
+    console.log(`\n   Next: run 'npm run analyze -- ${domain}' to analyze layout`);
+
+  } catch (err) {
+    console.error('❌ Extraction failed:', err);
+    throw err;
+  } finally {
+    if (browser) await browser.close();
+  }
+}
+
+// ── Popup dismissal ──────────────────────────────────────────────────
+
+async function dismissPopups(page: Page): Promise<void> {
+  // ── Couche 1 : Click accept (déclenche le callback consent du site) ──
+  const clickSelectors = [
+    // Didomi (priorité — CMP le plus courant en FR)
+    '#didomi-notice-agree-button',
+    '[data-testid="didomi-notice-agree-button"]',
+    'button[aria-label*="Accepter"]',
+    'button[aria-label*="Accept all"]',
+    'button[aria-label*="J\'accepte"]',
+    '.didomi-continue-without-agreeing',
+    // OneTrust
+    '#onetrust-accept-btn-handler',
+    'button[data-testid="ot-sdk-btn-allow-all"]',
+    // Cookiebot
+    '#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll',
+    'a#CybotCookiebotDialogBodyLevelButtonAccept',
+    '#CybotCookiebotDialogBodyButtonAccept',
+    '.cm__btn-allow', '.cm__btn-accept',
+    // Axeptio
+    '[data-axeptio-action="accept"]', '.axeptio__btn-accept',
+    // TarteAuCitron
+    '#tarteaucitronPersonalize2', '.tarteaucitronAllow', '.tarteaucitron-accept',
+    // Quantcast
+    '.qc-cmp2-buttons-primary button',
+    // Google CMP / Funding Choices (utilisé par claude.com, anthropic.com, googleblog, etc.)
+    '.fc-button-label',
+    '.fc-cta-consent',
+    '.qc-cmp2-summary-buttons button:nth-of-type(2)',
+    'button[mode="primary"][label*="Accept"]',
+    // Usercentrics
+    '#uc-btn-accept-banner',
+    'button[data-testid="uc-accept-all-button"]',
+    // Pierrot (Shopify)
+    '.pd-banner__button--accept', 'button[data-cookiebanner-action="accept"]',
+    // Native dialog element
+    'dialog button:has-text("Accept")',
+    'dialog button:has-text("Accepter")',
+    // Generic aria-label English/French
+    'button[aria-label*="cookie" i][aria-label*="accept" i]',
+    'button[aria-label*="cookie" i][aria-label*="allow" i]',
+    'button[aria-label*="accepter" i]',
+    // Generic consent
+    'button[class*="cookie"][class*="accept"]',
+    'button[class*="consent"][class*="accept"]',
+    '[class*="cookie"] button[class*="accept"]',
+    'button[class*="accept-all"]',
+    '[class*="consent"] button',
+    'button[class*="cookie"]', 'button[class*="accept"]', 'button[class*="consent"]',
+    // Generic close
+    '[class*="modal"] button[class*="close"]',
+    '[class*="popup"] button[class*="close"]',
+    '[class*="banner"] button[class*="close"]',
+    '[aria-label="Close"]', '[aria-label="Dismiss"]',
+  ];
+
+  // ── Helper : essaie de cliquer sur un selector dans un frame donné ──
+  const tryClickInFrame = async (frame: any): Promise<string | null> => {
+    for (const selector of clickSelectors) {
+      try {
+        const btn = frame.locator(selector).first();
+        if (await btn.isVisible({ timeout: 600 })) {
+          await btn.click({ timeout: 1500 });
+          return selector;
+        }
+      } catch {
+        // Continue
+      }
+    }
+    return null;
+  };
+
+  // ── Couche 1a : Main frame ──
+  let clicked = false;
+  const mainHit = await tryClickInFrame(page);
+  if (mainHit) {
+    console.log(`  🖱️  Popup fermé via click (main): ${mainHit}`);
+    clicked = true;
+    await page.waitForTimeout(1500);
+  }
+
+  // ── Couche 1b : Iframes (IAB TCF, Google Funding Choices, etc.) ──
+  if (!clicked) {
+    const frames = page.frames();
+    for (const frame of frames) {
+      if (frame === page.mainFrame()) continue;
+      try {
+        const url = frame.url();
+        // Skip about:blank et frames sans URL pertinente
+        if (!url || url === 'about:blank' || url.startsWith('data:')) continue;
+        const hit = await tryClickInFrame(frame);
+        if (hit) {
+          console.log(`  🖱️  Popup fermé via click (iframe ${url.slice(0, 60)}): ${hit}`);
+          clicked = true;
+          await page.waitForTimeout(1500);
+          break;
+        }
+      } catch {
+        // Continue
+      }
+    }
+  }
+
+  // ── Couche 2 : DOM cleanup (supprimer les overlays restants) ─────
+  const removed = await page.evaluate(() => {
+    let count = 0;
+    const cmpSelectors = [
+      '#didomi-host', '.didomi-popup-container', '#didomi-consent-popup',
+      '[class*="didomi-popup"]', '[class*="didomi-notice"]',
+      '#onetrust-banner-sdk', '#onetrust-consent-sdk', '.onetrust-pc-dark-filter',
+      '#CookieConsent', '.CookieConsent', '#CybotCookiebotDialog',
+      '.axeptio_container', '[class*="axeptio"]',
+      '.tarteaucitronRoot', '#tarteaucitron', '#tarteaucitronRoot',
+      '.qc-cmp2-container', '[class*="qc-cmp"]',
+      '.pd-cookie-banner-window', '[class*="pd-banner"]',
+      '[id*="cookie-banner"]', '[id*="consent-banner"]',
+      '[class*="cookie-banner"]', '[class*="consent-banner"]',
+      '[class*="cookie-notice"]', '[class*="consent-notice"]',
+      '[class*="gdpr"]', '[id*="gdpr"]',
+    ];
+    for (const sel of cmpSelectors) {
+      document.querySelectorAll(sel).forEach(el => { el.remove(); count++; });
+    }
+
+    // Supprimer les overlays/backdrops à z-index élevé
+    document.querySelectorAll('[style*="position: fixed"], [style*="position:fixed"]').forEach(el => {
+      const cs = window.getComputedStyle(el);
+      const z = parseInt(cs.zIndex || '0');
+      if (z > 9000 && (cs.backgroundColor.includes('rgba') || cs.opacity < '1')) {
+        (el as HTMLElement).style.display = 'none';
+        count++;
+      }
+    });
+
+    // Débloquer le scroll sur body
+    if (document.body) {
+      document.body.classList.remove(
+        'didomi-popup-open', 'modal-open', 'no-scroll', 'overflow-hidden',
+        'cookie-open', 'consent-open', 'noscroll'
+      );
+      document.body.style.overflow = '';
+    }
+    document.documentElement.style.overflow = '';
+    return count;
+  });
+
+  if (removed > 0) {
+    console.log(`  🧹 ${removed} overlay(s) nettoyé(s)`);
+  }
+}
+
+// ── CLI ──────────────────────────────────────────────────────────────
+
+const url = process.argv[2];
+
+if (!url) {
+  console.error('Usage: npm run extract -- <URL>');
+  console.error('Example: npm run extract -- https://linear.app');
+  process.exit(1);
+}
+
+// Validate URL
+try {
+  new URL(url);
+} catch {
+  console.error(`Invalid URL: ${url}`);
+  process.exit(1);
+}
+
+extractFromURL(url).catch((err) => {
+  console.error('Fatal error:', err);
+  process.exit(1);
+});