designlang 10.1.0 → 10.3.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [10.3.0] — 2026-04-22
+
+**Perf + SEO.** designlang now doubles as a lightweight auditor.
+
+### Added
+
+- **`src/extractors/perf.js`** — `captureCoreWebVitals(url)` opens a fresh Playwright context, measures LCP / CLS / INP via PerformanceObserver, categorises every network response into JS / CSS / font / image / document / other, counts third-party requests against a known-host list, and synthesises an interaction so INP reports. Returns grade buckets (good / needs-improvement / poor) per vital.
+- **`src/extractors/seo.js`** — pure extractor for Open Graph, Twitter cards, canonical, manifest, theme-color, viewport, every favicon, and inline JSON-LD blocks (schema.org structured data).
+- Crawler now captures `favicons`, `manifest`, and `<script type="application/ld+json">` content.
+- New flag `--perf`. Auto-on with `--full`.
+- New outputs: `*-seo.json`, `*-perf.json`.
+
+## [10.2.0] — 2026-04-22
+
+**Dark mode pairing + responsive screenshots.** Joins the light & dark extractor passes into semantic pairs, and adds full-page captures at 4 breakpoints × (light, dark).
+
+### Added
+
+- **`src/extractors/dark-mode-pair.js`** — pure function that maps light ↔ dark pairs for primary/secondary/accent/background/text roles and every CSS variable that actually differs between themes. Emits a drop-in Tailwind `darkMode: 'class'` config plus an audit (tokens missing from either pass).
+- **`src/extractors/responsive-screenshots.js`** — full-page PNGs at mobile / tablet / desktop / wide × (light, dark). Writes to `screenshots/responsive/<breakpoint>-<scheme>.png` with an index.
+- New flag `--responsive-shots`. Auto-on with `--full`.
+- New outputs: `*-dark-mode.json`, `*-responsive.json`.
+
+### Changed
+
+- CLI version test now reads from `package.json` instead of a hardcoded string — no per-release test churn going forward.
+
 ## [10.1.0] — 2026-04-22
 
 **Component screenshots.** The existing `--screenshots` flag now emits cluster-aware, retina (2×), multi-variant PNGs instead of five hardcoded selectors and a full-page image.

package/bin/design-extract.js

@@ -10,6 +10,9 @@ import { refineWithSmart } from '../src/classifiers/smart.js';
 import { crawlCanonicalPages } from '../src/multipage.js';
 import { extractLogo } from '../src/extractors/logo.js';
 import { captureComponentScreenshotsV10 } from '../src/extractors/component-screenshots.js';
+import { pairDarkMode } from '../src/extractors/dark-mode-pair.js';
+import { captureResponsiveScreenshots } from '../src/extractors/responsive-screenshots.js';
+import { captureCoreWebVitals, extractFontLoading } from '../src/extractors/perf.js';
 import { buildPromptPack } from '../src/formatters/prompt-pack.js';
 import { formatMarkdown } from '../src/formatters/markdown.js';
 import { formatTokens } from '../src/formatters/tokens.js';
@@ -53,7 +56,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('10.1.0');
+  .version('10.3.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -85,6 +88,8 @@ program
   .option('--smart', 'use optional LLM fallback when heuristic classifiers have low confidence (needs OPENAI_API_KEY or ANTHROPIC_API_KEY)')
   .option('--pages <n>', 'crawl N canonical pages (pricing/docs/blog/about/product) in addition to the homepage', parseInt)
   .option('--no-prompts', 'skip writing the prompt-pack directory')
+  .option('--responsive-shots', 'capture full-page PNGs at 4 breakpoints × (light,dark)')
+  .option('--perf', 'measure Core Web Vitals + bundle profile (LCP/CLS/INP, JS/CSS/font/img bytes, third-party count)')
   .option('--json', 'output raw JSON to stdout (for CI/CD)')
   .option('--json-pretty', 'output formatted JSON to stdout')
   .option('--no-history', 'skip saving to history')
@@ -233,6 +238,33 @@ program
         } catch (e) { design.componentScreenshots = { error: e.message }; }
       }
 
+      // v10.2: dark-mode pairing (pure, based on already-extracted data).
+      design.darkModePaired = pairDarkMode(design);
+
+      // v10.3: Core Web Vitals + bundle profile.
+      if (merged.full || merged.perf) {
+        spinner.text = 'Measuring Core Web Vitals...';
+        try {
+          design.perf = await captureCoreWebVitals(url, {
+            width: merged.width,
+            height: parseInt(merged.height) || 800,
+            channel: merged.systemChrome ? 'chrome' : undefined,
+          });
+          design.perf.fontLoading = extractFontLoading(design._raw?.light?.stack || {});
+        } catch (e) { design.perf = { error: e.message }; }
+      }
+
+      // v10.2: responsive screenshots at 4 breakpoints × (light, dark).
+      if (merged.full || merged.responsiveShots) {
+        spinner.text = 'Capturing responsive screenshots...';
+        try {
+          design.responsiveShots = await captureResponsiveScreenshots(url, outDir, {
+            includeDark: merged.dark || merged.full,
+            channel: merged.systemChrome ? 'chrome' : undefined,
+          });
+        } catch (e) { design.responsiveShots = { error: e.message }; }
+      }
+
       // v10: multi-page canonical crawl (pricing/docs/blog/about/product).
       const pagesArg = merged.pages != null ? merged.pages : (merged.full ? 5 : 0);
       if (pagesArg > 0) {
@@ -322,6 +354,18 @@ program
       if (design.componentScreenshots && (design.componentScreenshots.components || []).length) {
         files.push({ name: `${prefix}-screenshots.json`, content: JSON.stringify(design.componentScreenshots, null, 2), label: 'Component Screenshots index' });
       }
+      if (design.darkModePaired && design.darkModePaired.available) {
+        files.push({ name: `${prefix}-dark-mode.json`, content: JSON.stringify(design.darkModePaired, null, 2), label: 'Dark Mode Pairing' });
+      }
+      if (design.responsiveShots && Array.isArray(design.responsiveShots.shots) && design.responsiveShots.shots.length) {
+        files.push({ name: `${prefix}-responsive.json`, content: JSON.stringify(design.responsiveShots, null, 2), label: 'Responsive Screenshots index' });
+      }
+      if (design.seo) {
+        files.push({ name: `${prefix}-seo.json`, content: JSON.stringify(design.seo, null, 2), label: 'SEO + Structured Data' });
+      }
+      if (design.perf && !design.perf.error) {
+        files.push({ name: `${prefix}-perf.json`, content: JSON.stringify(design.perf, null, 2), label: 'Perf + Bundle' });
+      }
       if (merged.prompts !== false) {
         const pack = buildPromptPack(design);
         const promptsDir = join(outDir, `${prefix}-prompts`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "10.1.0",
+  "version": "10.3.0",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, motion, component anatomy, brand voice, page intent, section roles, material language, component library, imagery style, and logo. Outputs AI-optimized markdown, W3C design tokens, motion tokens, typed component stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {

package/src/crawler.js

@@ -867,6 +867,17 @@ async function extractPageData(page, ignoreSelectors, scopeSelector) {
       results.fontData.documentFonts.push({ family: font.family.replace(/['"]/g, ''), style: font.style, weight: font.weight, status: font.status });
     }
 
+    // v10.3 — favicons, manifest, JSON-LD.
+    results.favicons = Array.from(document.querySelectorAll('link[rel~="icon"], link[rel="shortcut icon"], link[rel="apple-touch-icon"]'))
+      .slice(0, 10)
+      .map(l => ({ rel: l.getAttribute('rel'), href: l.href, sizes: l.getAttribute('sizes') || '', type: l.getAttribute('type') || '' }));
+    const manifestLink = document.querySelector('link[rel="manifest"]');
+    results.manifest = manifestLink ? manifestLink.href : null;
+    results.jsonLd = Array.from(document.querySelectorAll('script[type="application/ld+json"]'))
+      .slice(0, 12)
+      .map(s => s.textContent || '')
+      .filter(Boolean);
+
     // Image data
     results.images = [];
     for (const img of document.querySelectorAll('img, picture img, [role="img"]')) {

package/src/extractors/dark-mode-pair.js

@@ -0,0 +1,96 @@
+// v10.2 — Dark Mode Pairing
+//
+// When the user passes --dark the crawler runs a second pass under
+// `color-scheme: dark` and the main extractor emits `design.darkMode` with
+// parallel colors + CSS variable maps. This module joins the two halves into
+// *semantic pairs* — same role in light mode ↔ same role in dark mode — so
+// downstream consumers (prompt pack, Tailwind darkMode config, agents) can
+// author a single `[data-theme="dark"]` override block without guessing.
+//
+// Pure function. No Page handle, no side effects — takes the finished design
+// object and returns a plain JSON structure.
+
+function hexOf(c) {
+  if (!c) return null;
+  if (typeof c === 'string') return c.toLowerCase();
+  return (c.hex || '').toLowerCase();
+}
+
+function pairRoleColors(light = {}, dark = {}) {
+  const pairs = {};
+  for (const role of ['primary', 'secondary', 'accent']) {
+    const l = hexOf(light[role]);
+    const d = hexOf(dark[role]);
+    if (l || d) pairs[role] = { light: l, dark: d };
+  }
+  const bgPair = {
+    light: (light.backgrounds?.[0]?.hex || null),
+    dark: (dark.backgrounds?.[0]?.hex || null),
+  };
+  if (bgPair.light || bgPair.dark) pairs.background = bgPair;
+  const textPair = {
+    light: (light.text?.[0]?.hex || null),
+    dark: (dark.text?.[0]?.hex || null),
+  };
+  if (textPair.light || textPair.dark) pairs.text = textPair;
+  return pairs;
+}
+
+function pairVariables(lightVars = {}, darkVars = {}) {
+  // Walk the union of keys; emit light/dark only when values differ.
+  const keys = new Set([...Object.keys(lightVars || {}), ...Object.keys(darkVars || {})]);
+  const out = {};
+  for (const k of keys) {
+    const l = lightVars[k];
+    const d = darkVars[k];
+    if (l == null && d == null) continue;
+    if (typeof l === 'string' && typeof d === 'string' && l === d) continue;
+    out[k] = { light: l ?? null, dark: d ?? null };
+  }
+  return out;
+}
+
+export function pairDarkMode(design = {}) {
+  if (!design.darkMode) {
+    return { available: false, reason: 'no --dark pass captured' };
+  }
+  const lightColors = design.colors || {};
+  const darkColors = design.darkMode.colors || {};
+  const roles = pairRoleColors(lightColors, darkColors);
+  const variables = pairVariables(design.variables || {}, design.darkMode.variables || {});
+  const pairedVarCount = Object.keys(variables).length;
+
+  // Light colors that don't appear in dark (and vice versa) signal tokens the
+  // site forgot to theme — useful for an audit.
+  const lightSet = new Set((lightColors.all || []).map(c => (c.hex || '').toLowerCase()).filter(Boolean));
+  const darkSet = new Set((darkColors.all || []).map(c => (c.hex || '').toLowerCase()).filter(Boolean));
+  const missingInDark = [...lightSet].filter(x => !darkSet.has(x)).slice(0, 20);
+  const missingInLight = [...darkSet].filter(x => !lightSet.has(x)).slice(0, 20);
+
+  // Tailwind-ready config snippet.
+  const tailwind = {
+    darkMode: 'class',
+    theme: {
+      extend: {
+        colors: Object.fromEntries(
+          Object.entries(roles)
+            .filter(([, v]) => v.light && v.dark)
+            .map(([role, v]) => [role, { DEFAULT: v.light, dark: v.dark }]),
+        ),
+      },
+    },
+  };
+
+  return {
+    available: true,
+    roles,
+    variables,
+    pairedVarCount,
+    audit: {
+      missingInDark,
+      missingInLight,
+      coverage: pairedVarCount > 0 ? 'paired' : 'light-only-vars',
+    },
+    tailwind,
+  };
+}

package/src/extractors/perf.js

@@ -0,0 +1,140 @@
+// v10.3 — Perf & Bundle Profile
+//
+// Opens a fresh Playwright context, captures every network response, and
+// measures Core Web Vitals via PerformanceObserver. Returns a single JSON
+// payload a bin-level consumer can write as `*-perf.json`.
+//
+// No Lighthouse dependency — everything is pure `playwright` + the page's own
+// `PerformanceObserver` API, which keeps the package size flat.
+
+import { chromium } from 'playwright';
+
+const THIRD_PARTY_HOSTS = [
+  'google-analytics', 'googletagmanager', 'analytics.google', 'segment.', 'mixpanel',
+  'amplitude', 'posthog', 'intercom', 'hotjar', 'fullstory', 'sentry', 'datadog',
+  'cloudflare', 'fastly', 'doubleclick', 'facebook.net', 'adservice.google', 'hs-analytics',
+  'stripe.com', 'recaptcha', 'hcaptcha', 'sentry-cdn', 'optimizely', 'statsig',
+];
+
+function categorize(url) {
+  if (!url) return 'other';
+  if (/\.(js|mjs)(?:\?|$)/i.test(url)) return 'js';
+  if (/\.(css)(?:\?|$)/i.test(url)) return 'css';
+  if (/\.(woff2?|ttf|otf|eot)(?:\?|$)/i.test(url)) return 'font';
+  if (/\.(png|jpe?g|webp|avif|gif|svg|ico)(?:\?|$)/i.test(url)) return 'image';
+  if (/fonts\.gstatic|fonts\.googleapis/.test(url)) return 'font';
+  if (/\.(html?)(?:\?|$)/i.test(url)) return 'document';
+  return 'other';
+}
+
+function isThirdParty(resUrl, pageHost) {
+  try {
+    const u = new URL(resUrl);
+    if (u.hostname === pageHost) return false;
+    if (THIRD_PARTY_HOSTS.some(h => u.hostname.includes(h))) return true;
+    return u.hostname !== pageHost;
+  } catch { return false; }
+}
+
+function fontLoadingStrategy(stack) {
+  const classes = (stack.classNameSample || []).join(' ');
+  const metas = (stack.metas || []).map(m => `${m.name || ''}=${m.content || ''}`).join(' ');
+  const preloadCount = ((metas + classes).match(/preload|rel=["']preload/g) || []).length;
+  return { preloadCount };
+}
+
+export async function captureCoreWebVitals(url, { width = 1280, height = 800, channel, timeout = 30000 } = {}) {
+  const browser = await chromium.launch({ headless: true, ...(channel && { channel }) });
+  try {
+    const ctx = await browser.newContext({ viewport: { width, height }, colorScheme: 'light' });
+    const page = await ctx.newPage();
+
+    const requests = [];
+    page.on('response', async (res) => {
+      try {
+        const req = res.request();
+        const headers = res.headers();
+        const contentLength = Number(headers['content-length'] || 0);
+        requests.push({
+          url: res.url(),
+          method: req.method(),
+          status: res.status(),
+          type: categorize(res.url()),
+          bytes: contentLength,
+          fromCache: res.fromServiceWorker() || /hit/i.test(headers['x-cache'] || ''),
+        });
+      } catch { /* ignore */ }
+    });
+
+    await page.addInitScript(() => {
+      window.__dlVitals = { lcp: 0, cls: 0, inp: 0 };
+      try {
+        new PerformanceObserver((list) => {
+          for (const e of list.getEntries()) window.__dlVitals.lcp = e.startTime;
+        }).observe({ type: 'largest-contentful-paint', buffered: true });
+      } catch {}
+      try {
+        let cls = 0;
+        new PerformanceObserver((list) => {
+          for (const e of list.getEntries()) {
+            if (!e.hadRecentInput) cls += e.value;
+          }
+          window.__dlVitals.cls = cls;
+        }).observe({ type: 'layout-shift', buffered: true });
+      } catch {}
+      try {
+        new PerformanceObserver((list) => {
+          for (const e of list.getEntries()) {
+            if ((e.duration || 0) > window.__dlVitals.inp) window.__dlVitals.inp = e.duration;
+          }
+        }).observe({ type: 'event', buffered: true, durationThreshold: 16 });
+      } catch {}
+    });
+
+    const start = Date.now();
+    await page.goto(url, { waitUntil: 'domcontentloaded', timeout }).catch(() => {});
+    await page.waitForLoadState('networkidle').catch(() => {});
+    // Give the observers a moment; synthesize an interaction so INP reports.
+    await page.mouse.move(100, 100);
+    await page.mouse.click(100, 100).catch(() => {});
+    await page.waitForTimeout(1200);
+
+    const ttfbish = Date.now() - start;
+    const vitals = await page.evaluate(() => ({ ...(window.__dlVitals || {}) }));
+    const pageHost = new URL(url).hostname;
+
+    const totals = { js: 0, css: 0, font: 0, image: 0, document: 0, other: 0 };
+    const counts = { js: 0, css: 0, font: 0, image: 0, document: 0, other: 0 };
+    let thirdPartyCount = 0, thirdPartyBytes = 0;
+    for (const r of requests) {
+      totals[r.type] = (totals[r.type] || 0) + (r.bytes || 0);
+      counts[r.type] = (counts[r.type] || 0) + 1;
+      if (isThirdParty(r.url, pageHost)) {
+        thirdPartyCount++;
+        thirdPartyBytes += r.bytes || 0;
+      }
+    }
+
+    return {
+      vitals: {
+        lcp: Math.round(vitals.lcp || 0),
+        cls: Number((vitals.cls || 0).toFixed(4)),
+        inp: Math.round(vitals.inp || 0),
+        // Rough classification vs Google's good/needs-improvement thresholds.
+        lcpGrade: vitals.lcp < 2500 ? 'good' : vitals.lcp < 4000 ? 'needs-improvement' : 'poor',
+        clsGrade: (vitals.cls || 0) < 0.1 ? 'good' : (vitals.cls || 0) < 0.25 ? 'needs-improvement' : 'poor',
+      },
+      ttfbApprox: ttfbish,
+      bytes: totals,
+      counts,
+      thirdParty: { count: thirdPartyCount, bytes: thirdPartyBytes },
+      requestsTotal: requests.length,
+    };
+  } finally {
+    await browser.close();
+  }
+}
+
+export function extractFontLoading(stack = {}) {
+  return fontLoadingStrategy(stack);
+}

package/src/extractors/responsive-screenshots.js

@@ -0,0 +1,55 @@
+// v10.2 — Responsive Screenshots
+//
+// Full-page PNGs at each breakpoint × (light, dark). Lives alongside the
+// component screenshots dir so output stays organised. Writes to
+// `screenshots/responsive/<breakpoint>-<scheme>.png` and returns an index.
+
+import { chromium } from 'playwright';
+import { mkdirSync } from 'fs';
+import { join } from 'path';
+
+const BREAKPOINTS = [
+  { slug: 'mobile', width: 375, height: 812 },
+  { slug: 'tablet', width: 768, height: 1024 },
+  { slug: 'desktop', width: 1280, height: 800 },
+  { slug: 'wide', width: 1920, height: 1080 },
+];
+
+async function captureAt(url, dir, bp, scheme, channel) {
+  const browser = await chromium.launch({ headless: true, ...(channel && { channel }) });
+  try {
+    const ctx = await browser.newContext({
+      viewport: { width: bp.width, height: bp.height },
+      deviceScaleFactor: bp.slug === 'mobile' ? 2 : 1,
+      colorScheme: scheme,
+    });
+    const page = await ctx.newPage();
+    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {});
+    await page.waitForLoadState('networkidle').catch(() => {});
+    await page.evaluate(() => document.fonts.ready).catch(() => {});
+    const file = `${bp.slug}-${scheme}.png`;
+    const path = join(dir, file);
+    await page.screenshot({ path, fullPage: true });
+    return { breakpoint: bp.slug, scheme, width: bp.width, path: `screenshots/responsive/${file}` };
+  } finally {
+    await browser.close();
+  }
+}
+
+export async function captureResponsiveScreenshots(url, outDir, { includeDark = true, channel } = {}) {
+  const dir = join(outDir, 'screenshots', 'responsive');
+  mkdirSync(dir, { recursive: true });
+  const out = [];
+  const schemes = includeDark ? ['light', 'dark'] : ['light'];
+  for (const bp of BREAKPOINTS) {
+    for (const scheme of schemes) {
+      try {
+        const row = await captureAt(url, dir, bp, scheme, channel);
+        out.push(row);
+      } catch (e) {
+        out.push({ breakpoint: bp.slug, scheme, error: e.message });
+      }
+    }
+  }
+  return { count: out.filter(r => !r.error).length, shots: out };
+}

package/src/extractors/seo.js

@@ -0,0 +1,69 @@
+// v10.3 — SEO & Structured Data
+//
+// Pure extractor — operates on the metas + scripts the crawler already
+// collected. Captures Open Graph, Twitter cards, canonical, manifest, theme
+// color, and every inline JSON-LD block (schema.org structured data).
+
+function pickMeta(metas, name) {
+  const m = metas.find(m => (m.name || '').toLowerCase() === name.toLowerCase());
+  return m ? m.content : null;
+}
+
+function jsonLdFromScripts(rawScripts = []) {
+  // rawScripts here may be just URLs. For JSON-LD we need inline script text,
+  // which the crawler doesn't currently capture. Accept an optional `inline`
+  // parameter from a richer payload where available.
+  return [];
+}
+
+export function extractSeo(rawData = {}) {
+  const stack = rawData.light?.stack || {};
+  const metas = stack.metas || [];
+  const openGraph = {};
+  const twitter = {};
+  for (const m of metas) {
+    const name = (m.name || '').toLowerCase();
+    if (name.startsWith('og:')) openGraph[name.slice(3)] = m.content;
+    else if (name.startsWith('twitter:')) twitter[name.slice(8)] = m.content;
+  }
+  const description = pickMeta(metas, 'description');
+  const canonical = pickMeta(metas, 'canonical');
+  const themeColor = pickMeta(metas, 'theme-color');
+  const viewport = pickMeta(metas, 'viewport');
+
+  const inlineJsonLd = Array.isArray(rawData.light?.jsonLd) ? rawData.light.jsonLd : [];
+  const favicons = rawData.light?.favicons || [];
+  const manifest = rawData.light?.manifest || null;
+
+  const structured = [];
+  for (const block of inlineJsonLd) {
+    try {
+      const parsed = typeof block === 'string' ? JSON.parse(block) : block;
+      const entries = Array.isArray(parsed) ? parsed : [parsed];
+      for (const e of entries) {
+        structured.push({ type: e['@type'] || 'Thing', name: e.name || e.headline || null, sample: JSON.stringify(e).slice(0, 400) });
+      }
+    } catch { /* skip bad JSON-LD */ }
+  }
+
+  return {
+    openGraph,
+    twitter,
+    description,
+    canonical,
+    themeColor,
+    viewport,
+    favicons,
+    manifest,
+    structuredData: structured,
+    score: {
+      hasOg: Object.keys(openGraph).length > 0,
+      hasTwitter: Object.keys(twitter).length > 0,
+      hasDescription: !!description,
+      hasCanonical: !!canonical,
+      hasStructuredData: structured.length > 0,
+      hasFavicon: favicons.length > 0,
+      hasThemeColor: !!themeColor,
+    },
+  };
+}

package/src/index.js

@@ -33,6 +33,7 @@ import { extractSectionRoles } from './extractors/section-roles.js';
 import { extractComponentLibrary } from './extractors/component-library.js';
 import { extractMaterialLanguage } from './extractors/material-language.js';
 import { extractImageryStyle } from './extractors/imagery-style.js';
+import { extractSeo } from './extractors/seo.js';
 import { formatDtcgTokens } from './formatters/dtcg-tokens.js';
 import { formatMotionTokens } from './formatters/motion-tokens.js';
 
@@ -137,6 +138,7 @@ export async function extractDesignLanguage(url, options = {}) {
   design.componentLibrary = safeExtract(extractComponentLibrary, rawData.light?.stack || {}) || { library: 'unknown', confidence: 0, evidence: [], alternates: [] };
   design.materialLanguage = safeExtract(extractMaterialLanguage, design) || { label: 'flat', confidence: 0, signals: [], metrics: {} };
   design.imageryStyle = safeExtract(extractImageryStyle, rawData.light?.images || []) || { label: 'none', confidence: 0, counts: {}, signals: [] };
+  design.seo = safeExtract(extractSeo, rawData) || { openGraph: {}, twitter: {}, structuredData: [], score: {} };
   // Stash raw crawler output so downstream orchestration (multipage, smart)
   // can rebuild the digest without re-crawling.
   design._raw = rawData;
@@ -203,6 +205,10 @@ export { extractMaterialLanguage } from './extractors/material-language.js';
 export { extractImageryStyle } from './extractors/imagery-style.js';
 export { extractLogo } from './extractors/logo.js';
 export { captureComponentScreenshotsV10 } from './extractors/component-screenshots.js';
+export { pairDarkMode } from './extractors/dark-mode-pair.js';
+export { captureResponsiveScreenshots } from './extractors/responsive-screenshots.js';
+export { captureCoreWebVitals, extractFontLoading } from './extractors/perf.js';
+export { extractSeo } from './extractors/seo.js';
 export { refineWithSmart } from './classifiers/smart.js';
 export { crawlCanonicalPages, computeCrossPageConsistency, discoverCanonicalPages } from './multipage.js';
 export { buildPromptPack, formatV0Prompt, formatLovablePrompt, formatCursorPrompt, formatClaudeArtifactPrompt } from './formatters/prompt-pack.js';