designlang 7.1.0 → 8.0.0

package/src/extractors/interaction-states.js

@@ -0,0 +1,57 @@
+// Structured catalog of transition styles captured by the Tier-2 interaction
+// pass — hover deltas, modal appearance, menu styling.
+
+function diffStyles(before, after) {
+  const diff = {};
+  if (!before || !after) return diff;
+  for (const k of Object.keys(after)) {
+    if (before[k] !== after[k]) {
+      diff[k] = { from: before[k], to: after[k] };
+    }
+  }
+  return diff;
+}
+
+export function extractInteractionStates(interactState) {
+  if (!interactState || typeof interactState !== 'object') {
+    return {
+      scrollSettled: false,
+      menusOpened: 0,
+      hover: { sampled: 0, changed: 0, deltas: [] },
+      accordionsOpened: 0,
+      modals: [],
+    };
+  }
+
+  const deltas = [];
+  const samples = Array.isArray(interactState.hoverSamples) ? interactState.hoverSamples : [];
+  for (const s of samples) {
+    const d = diffStyles(s.before, s.after);
+    if (Object.keys(d).length > 0) {
+      deltas.push({ selector: s.selector, changes: d });
+    }
+  }
+
+  const modals = Array.isArray(interactState.modals) ? interactState.modals.map(m => ({
+    trigger: m.trigger || '',
+    bg: m.snapshot?.bg || '',
+    color: m.snapshot?.color || '',
+    boxShadow: m.snapshot?.boxShadow || '',
+    borderRadius: m.snapshot?.borderRadius || '',
+    width: m.snapshot?.width || 0,
+    height: m.snapshot?.height || 0,
+    role: m.snapshot?.role || '',
+  })) : [];
+
+  return {
+    scrollSettled: !!interactState.scrollSettled,
+    menusOpened: interactState.menusOpened || 0,
+    hover: {
+      sampled: samples.length,
+      changed: deltas.length,
+      deltas,
+    },
+    accordionsOpened: interactState.accordionsOpened || 0,
+    modals,
+  };
+}

package/src/extractors/modern-css.js

@@ -0,0 +1,100 @@
+// Extractor for modern CSS features captured by the crawler:
+//   - Pseudo-elements (::before / ::after)
+//   - Variable-font axes (font-variation-settings)
+//   - OpenType features (font-feature-settings)
+//   - Modern text layout (text-wrap, text-decoration-*)
+//   - Container queries (@container)
+//   - env() usage (safe-area-inset-*, viewport-*)
+
+export function extractModernCss(payload) {
+  const light = (payload && payload.light) || payload || {};
+  const styles = Array.isArray(light.computedStyles) ? light.computedStyles : [];
+
+  // Pseudo-elements
+  const pseudoSamples = [];
+  let pseudoCount = 0;
+  for (const s of styles) {
+    const p = s && s.pseudo;
+    if (!p) continue;
+    if (p.before) { pseudoCount++; if (pseudoSamples.length < 20) pseudoSamples.push({ tag: s.tag, classList: s.classList, which: '::before', style: p.before }); }
+    if (p.after) { pseudoCount++; if (pseudoSamples.length < 20) pseudoSamples.push({ tag: s.tag, classList: s.classList, which: '::after', style: p.after }); }
+  }
+
+  // Variable fonts
+  const axesMap = new Map();
+  let variableFontCount = 0;
+  for (const s of styles) {
+    const v = s && s.fontVariationSettings;
+    if (!v || v === 'normal' || v === '') continue;
+    variableFontCount++;
+    // e.g. "\"wght\" 600, \"slnt\" -4"
+    for (const m of String(v).matchAll(/"([^"]+)"\s+(-?\d+(?:\.\d+)?)/g)) {
+      const axis = m[1];
+      const val = parseFloat(m[2]);
+      if (!axesMap.has(axis)) axesMap.set(axis, { axis, min: val, max: val, count: 0 });
+      const a = axesMap.get(axis);
+      a.min = Math.min(a.min, val);
+      a.max = Math.max(a.max, val);
+      a.count++;
+    }
+  }
+
+  // OpenType features
+  const featMap = new Map();
+  for (const s of styles) {
+    const f = s && s.fontFeatureSettings;
+    if (!f || f === 'normal' || f === '') continue;
+    for (const m of String(f).matchAll(/"([^"]+)"(?:\s+(on|off|\d+))?/g)) {
+      const key = m[1];
+      featMap.set(key, (featMap.get(key) || 0) + 1);
+    }
+  }
+
+  // Text-wrap / decoration
+  const textWrapMap = new Map();
+  const decStyleMap = new Map();
+  const thicknessMap = new Map();
+  const offsetMap = new Map();
+  for (const s of styles) {
+    if (s.textWrap && s.textWrap !== 'wrap' && s.textWrap !== '') {
+      textWrapMap.set(s.textWrap, (textWrapMap.get(s.textWrap) || 0) + 1);
+    }
+    if (s.textDecorationStyle && s.textDecorationStyle !== 'solid' && s.textDecorationStyle !== '') {
+      decStyleMap.set(s.textDecorationStyle, (decStyleMap.get(s.textDecorationStyle) || 0) + 1);
+    }
+    if (s.textDecorationThickness && s.textDecorationThickness !== 'auto' && s.textDecorationThickness !== '') {
+      thicknessMap.set(s.textDecorationThickness, (thicknessMap.get(s.textDecorationThickness) || 0) + 1);
+    }
+    if (s.textUnderlineOffset && s.textUnderlineOffset !== 'auto' && s.textUnderlineOffset !== '') {
+      offsetMap.set(s.textUnderlineOffset, (offsetMap.get(s.textUnderlineOffset) || 0) + 1);
+    }
+  }
+
+  const containerQueries = Array.isArray(light.containerQueries) ? light.containerQueries : [];
+  const envUsage = Array.isArray(light.envUsage) ? light.envUsage : [];
+
+  return {
+    pseudoElements: {
+      count: pseudoCount,
+      samples: pseudoSamples,
+    },
+    variableFonts: {
+      count: variableFontCount,
+      axes: [...axesMap.values()].sort((a, b) => b.count - a.count),
+    },
+    openTypeFeatures: [...featMap.entries()]
+      .map(([feature, count]) => ({ feature, count }))
+      .sort((a, b) => b.count - a.count),
+    textWrap: {
+      wrap: [...textWrapMap.entries()].map(([value, count]) => ({ value, count })),
+      decorationStyle: [...decStyleMap.entries()].map(([value, count]) => ({ value, count })),
+      decorationThickness: [...thicknessMap.entries()].map(([value, count]) => ({ value, count })),
+      underlineOffset: [...offsetMap.entries()].map(([value, count]) => ({ value, count })),
+    },
+    containerQueries: {
+      count: containerQueries.length,
+      rules: containerQueries,
+    },
+    envUsage: [...new Set(envUsage)],
+  };
+}

package/src/extractors/scoring.js

@@ -4,14 +4,16 @@ export function scoreDesignSystem(design) {
   const scores = {};
   const issues = [];
 
-  // 1. Color discipline (0-100)
-  // Fewer unique colors = more disciplined
+  // 1. Color discipline (0-100) — calibrated against real production sites
+  // (Linear, Stripe, Vercel, GitHub, Apple) which commonly ship 20–50 colors
+  // once you include hover/disabled/alpha variants.
   const colorCount = design.colors.all.length;
-  if (colorCount <= 8) scores.colorDiscipline = 100;
-  else if (colorCount <= 15) scores.colorDiscipline = 85;
-  else if (colorCount <= 25) scores.colorDiscipline = 70;
-  else if (colorCount <= 40) scores.colorDiscipline = 50;
-  else { scores.colorDiscipline = 30; issues.push(`${colorCount} unique colors detected — consider consolidating to a tighter palette`); }
+  if (colorCount <= 12) scores.colorDiscipline = 100;
+  else if (colorCount <= 25) scores.colorDiscipline = 92;
+  else if (colorCount <= 40) scores.colorDiscipline = 80;
+  else if (colorCount <= 60) scores.colorDiscipline = 65;
+  else if (colorCount <= 100) scores.colorDiscipline = 50;
+  else { scores.colorDiscipline = 35; issues.push(`${colorCount} unique colors detected — consider consolidating to a tighter palette`); }
 
   if (!design.colors.primary) {
     scores.colorDiscipline -= 15;
@@ -26,46 +28,62 @@ export function scoreDesignSystem(design) {
 
   const weightCount = design.typography.weights.length;
   if (weightCount <= 3) scores.typographyConsistency = Math.min(scores.typographyConsistency, 100);
-  else if (weightCount <= 5) scores.typographyConsistency = Math.min(scores.typographyConsistency, 80);
+  else if (weightCount <= 5) scores.typographyConsistency = Math.min(scores.typographyConsistency, 90);
+  else if (weightCount <= 7) scores.typographyConsistency = Math.min(scores.typographyConsistency, 80);
   else { scores.typographyConsistency -= 15; issues.push(`${weightCount} font weights in use — consider standardizing to 3 (regular, medium, bold)`); }
 
+  // Type-scale count — variable-font sites and component-rich pages commonly
+  // ship 12–18 sizes (nav, body, caption, h1–h6, stat, pill, etc).
   const scaleSize = design.typography.scale.length;
-  if (scaleSize <= 6) scores.typographyConsistency = Math.min(scores.typographyConsistency, 100);
-  else if (scaleSize <= 10) scores.typographyConsistency = Math.min(scores.typographyConsistency, 85);
+  if (scaleSize <= 8) scores.typographyConsistency = Math.min(scores.typographyConsistency, 100);
+  else if (scaleSize <= 14) scores.typographyConsistency = Math.min(scores.typographyConsistency, 92);
+  else if (scaleSize <= 20) scores.typographyConsistency = Math.min(scores.typographyConsistency, 82);
   else { scores.typographyConsistency -= 10; issues.push(`${scaleSize} distinct font sizes — consider a tighter type scale`); }
 
-  // 3. Spacing system (0-100)
+  // 3. Spacing system (0-100) — detectScale() only tries 2/4/6/8 as bases and
+  // fails on sites whose computed-style spacing has line-height/SVG noise mixed
+  // in. Don't penalise too hard when a base isn't pinned but tokenization is
+  // healthy — the design still has a system, we just can't name it.
   if (design.spacing.base) {
     scores.spacingSystem = 90;
-    // Check how many values fit the base
     const fittingValues = design.spacing.scale.filter(v => v % design.spacing.base === 0).length;
     const fitRatio = fittingValues / design.spacing.scale.length;
     if (fitRatio >= 0.8) scores.spacingSystem = 100;
-    else if (fitRatio >= 0.6) scores.spacingSystem = 80;
-    else scores.spacingSystem = 65;
+    else if (fitRatio >= 0.6) scores.spacingSystem = 85;
+    else scores.spacingSystem = 75;
   } else {
-    scores.spacingSystem = 40;
-    issues.push('No consistent spacing base unit detected — values appear arbitrary');
+    // Fallback: soft penalty if the site still ships design tokens (CSS vars).
+    const varCount = Object.values(design.variables || {}).reduce((s, v) => s + Object.keys(v || {}).length, 0);
+    scores.spacingSystem = varCount >= 20 ? 70 : 55;
+    if (varCount < 20) issues.push('No consistent spacing base unit detected — values appear arbitrary');
   }
 
-  if (design.spacing.scale.length > 20) {
+  // Spacing value count — real sites commonly ship 25–40 distinct spacings
+  // (component padding, gap, stacked layout rhythm). Only penalise above 35.
+  if (design.spacing.scale.length > 50) {
     scores.spacingSystem -= 15;
     issues.push(`${design.spacing.scale.length} unique spacing values — too many one-off values`);
+  } else if (design.spacing.scale.length > 35) {
+    scores.spacingSystem -= 5;
   }
 
-  // 4. Shadow consistency (0-100)
+  // 4. Shadow consistency (0-100) — calibrated; real sites routinely ship
+  // 10–20 shadows once hover/focus/elevation variants are counted.
   const shadowCount = design.shadows.values.length;
-  if (shadowCount === 0) scores.shadowConsistency = 80; // no shadows is fine
-  else if (shadowCount <= 4) scores.shadowConsistency = 100;
-  else if (shadowCount <= 8) scores.shadowConsistency = 75;
+  if (shadowCount === 0) scores.shadowConsistency = 85;
+  else if (shadowCount <= 5) scores.shadowConsistency = 100;
+  else if (shadowCount <= 10) scores.shadowConsistency = 90;
+  else if (shadowCount <= 18) scores.shadowConsistency = 78;
+  else if (shadowCount <= 28) scores.shadowConsistency = 62;
   else { scores.shadowConsistency = 50; issues.push(`${shadowCount} unique shadows — consider a 3-level elevation scale (sm/md/lg)`); }
 
   // 5. Border radius consistency (0-100)
   const radiiCount = design.borders.radii.length;
-  if (radiiCount <= 3) scores.radiusConsistency = 100;
-  else if (radiiCount <= 5) scores.radiusConsistency = 85;
-  else if (radiiCount <= 8) scores.radiusConsistency = 65;
-  else { scores.radiusConsistency = 40; issues.push(`${radiiCount} unique border radii — standardize to 3-4 values`); }
+  if (radiiCount <= 4) scores.radiusConsistency = 100;
+  else if (radiiCount <= 7) scores.radiusConsistency = 90;
+  else if (radiiCount <= 10) scores.radiusConsistency = 80;
+  else if (radiiCount <= 15) scores.radiusConsistency = 65;
+  else { scores.radiusConsistency = 45; issues.push(`${radiiCount} unique border radii — standardize to 3-4 values`); }
 
   // 6. Accessibility (from existing extractor)
   scores.accessibility = design.accessibility?.score || 0;
@@ -101,13 +119,14 @@ export function scoreDesignSystem(design) {
 
   // Overall score (weighted average)
   const weights = {
-    colorDiscipline: 20,
-    typographyConsistency: 20,
-    spacingSystem: 20,
-    shadowConsistency: 10,
-    radiusConsistency: 10,
+    colorDiscipline: 18,
+    typographyConsistency: 18,
+    spacingSystem: 18,
+    shadowConsistency: 9,
+    radiusConsistency: 9,
     accessibility: 15,
     tokenization: 5,
+    cssHealth: 8,
   };
 
   let totalWeight = 0;

package/src/extractors/token-sources.js

@@ -0,0 +1,65 @@
+// Attribute top design tokens back to the stylesheet URL that most likely
+// contributed them. Uses the per-element `sources` captured by the crawler.
+
+import { parseColor, rgbToHex } from '../utils.js';
+
+function firstSourceUrlWhere(styles, predicate) {
+  for (const s of styles) {
+    if (!s || !predicate(s)) continue;
+    const src = Array.isArray(s.sources) ? s.sources[0] : null;
+    if (src && src.url) return src.url;
+  }
+  return '';
+}
+
+export function extractTokenSources(design, computedStyles) {
+  const styles = Array.isArray(computedStyles) ? computedStyles : [];
+  const out = [];
+
+  // Primary color
+  const primaryHex = design.colors?.primary?.hex;
+  if (primaryHex) {
+    const url = firstSourceUrlWhere(styles, s => {
+      const p = parseColor(s.color);
+      return p && rgbToHex(p) === primaryHex;
+    });
+    out.push({ token: 'color.primary', path: 'colors.primary', sourceUrl: url });
+  }
+
+  // Text color (first in design.colors.text[])
+  const textHex = (design.colors?.text || [])[0];
+  if (textHex) {
+    const url = firstSourceUrlWhere(styles, s => {
+      const p = parseColor(s.color);
+      return p && rgbToHex(p) === textHex;
+    });
+    out.push({ token: 'color.text', path: 'colors.text[0]', sourceUrl: url });
+  }
+
+  // Body font — first typography family
+  const bodyFont = design.typography?.families?.[0]?.name;
+  if (bodyFont) {
+    const url = firstSourceUrlWhere(styles, s => typeof s.fontFamily === 'string' && s.fontFamily.includes(bodyFont));
+    out.push({ token: 'font.body', path: 'typography.families[0]', sourceUrl: url });
+  }
+
+  // Spacing base
+  const spacingBase = design.spacing?.base;
+  if (spacingBase != null) {
+    const target = `${spacingBase}px`;
+    const url = firstSourceUrlWhere(styles,
+      s => s.paddingTop === target || s.paddingLeft === target || s.marginTop === target || s.gap === target);
+    out.push({ token: 'spacing.base', path: 'spacing.base', sourceUrl: url });
+  }
+
+  // Radius base — first non-zero from design.borders.radii
+  const radii = design.borders?.radii || [];
+  const firstRadius = radii.find(r => (r.value || r) && (r.value || r) !== '0px');
+  if (firstRadius) {
+    const target = typeof firstRadius === 'string' ? firstRadius : (firstRadius.value || '');
+    const url = firstSourceUrlWhere(styles, s => s.borderRadius === target);
+    out.push({ token: 'radius.base', path: 'borders.radii[0]', sourceUrl: url });
+  }
+
+  return out;
+}

package/src/extractors/wide-gamut.js

@@ -0,0 +1,47 @@
+// Catalog of wide-gamut / modern color function usages from the crawler's
+// scan of stylesheet cssText. Produces counts + sample raw values + converted
+// sRGB hex for oklch/oklab values.
+
+import { oklchLikeToHex } from '../utils/color-gamut.js';
+
+export function extractWideGamut(modernColors) {
+  const src = Array.isArray(modernColors) ? modernColors : [];
+  const catalog = {
+    oklch: { count: 0, samples: [] },
+    oklab: { count: 0, samples: [] },
+    colorMix: { count: 0, samples: [] },
+    lightDark: { count: 0, samples: [] },
+    displayP3: { count: 0, samples: [] },
+    rec2020: { count: 0, samples: [] },
+  };
+
+  const bucket = {
+    oklch: catalog.oklch,
+    oklab: catalog.oklab,
+    'color-mix': catalog.colorMix,
+    'light-dark': catalog.lightDark,
+    'display-p3': catalog.displayP3,
+    rec2020: catalog.rec2020,
+  };
+
+  for (const entry of src) {
+    const b = bucket[entry.type];
+    if (!b) continue;
+    b.count++;
+    if (b.samples.length < 10) {
+      const sample = {
+        raw: entry.raw,
+        property: entry.property || '',
+        selector: entry.selector || '',
+      };
+      if (entry.type === 'oklch' || entry.type === 'oklab') {
+        const hex = oklchLikeToHex(entry.raw);
+        if (hex) sample.value = hex;
+      }
+      b.samples.push(sample);
+    }
+  }
+
+  const totalCount = Object.values(catalog).reduce((n, c) => n + c.count, 0);
+  return { ...catalog, totalCount };
+}

package/src/formatters/routes-reconciliation.js

@@ -0,0 +1,160 @@
+// Shared-vs-per-route reconciliation for multi-page token extraction.
+// Input: [{ url, path, tokens: DTCG-shaped { primitive, semantic, ... } }]
+// Output: { shared, perRoute: { <slug>: { added, changed } }, summary }
+//
+// "Shared" = a token path present with the same $value in ALL routes.
+// "Added"  = a token path present on this route but missing from the shared set.
+// "Changed"= a token path present in shared but with a different $value here.
+
+export function slugForPath(p) {
+  if (!p || p === '/' || p === '') return 'index';
+  return String(p)
+    .replace(/^\/+|\/+$/g, '')
+    .replace(/[^a-z0-9]+/gi, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase() || 'index';
+}
+
+function isLeaf(node) {
+  return node && typeof node === 'object' && '$value' in node;
+}
+
+// Walk a DTCG tree and produce a flat map of dotted-path -> serialized $value.
+function flattenTokens(tree, prefix = '', out = {}) {
+  if (!tree || typeof tree !== 'object') return out;
+  if (isLeaf(tree)) {
+    out[prefix] = JSON.stringify(tree.$value);
+    return out;
+  }
+  for (const [k, v] of Object.entries(tree)) {
+    if (k.startsWith('$')) continue;
+    const p = prefix ? `${prefix}.${k}` : k;
+    if (v && typeof v === 'object') flattenTokens(v, p, out);
+  }
+  return out;
+}
+
+// Set a dotted-path key to a (JSON-parsed) value on a nested object (leaf as DTCG $value).
+function setPath(root, dotted, jsonVal) {
+  const parts = dotted.split('.');
+  let cur = root;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const p = parts[i];
+    if (!cur[p] || typeof cur[p] !== 'object') cur[p] = {};
+    cur = cur[p];
+  }
+  cur[parts[parts.length - 1]] = { $value: JSON.parse(jsonVal) };
+}
+
+export function reconcileRoutes(routes) {
+  const safeRoutes = Array.isArray(routes) ? routes.filter(r => r && r.tokens) : [];
+  if (safeRoutes.length === 0) {
+    return {
+      shared: {},
+      perRoute: {},
+      summary: { routeCount: 0, sharedTokenCount: 0, totalUnique: 0, drift: [] },
+    };
+  }
+
+  // Flatten each route's tokens (combining primitive + semantic trees).
+  const flat = safeRoutes.map(r => {
+    const merged = {};
+    flattenTokens(r.tokens.primitive || {}, 'primitive', merged);
+    flattenTokens(r.tokens.semantic || {}, 'semantic', merged);
+    return { route: r, flat: merged };
+  });
+
+  // Build shared set: paths present across ALL routes with identical serialized value.
+  const firstKeys = Object.keys(flat[0].flat);
+  const sharedFlat = {};
+  for (const key of firstKeys) {
+    const v = flat[0].flat[key];
+    const allAgree = flat.every(f => f.flat[key] === v);
+    if (allAgree) sharedFlat[key] = v;
+  }
+
+  // Rebuild shared as DTCG tree.
+  const shared = {};
+  for (const [k, v] of Object.entries(sharedFlat)) setPath(shared, k, v);
+
+  // Per-route deltas.
+  const perRoute = {};
+  const usedSlugs = new Map();
+  const drift = [];
+  for (const { route, flat: f } of flat) {
+    let slug = slugForPath(route.path);
+    // Slug collision resolution.
+    if (usedSlugs.has(slug)) {
+      const n = usedSlugs.get(slug) + 1;
+      usedSlugs.set(slug, n);
+      slug = `${slug}-${n}`;
+    } else {
+      usedSlugs.set(slug, 1);
+    }
+
+    const added = {};
+    const changed = {};
+    for (const [k, v] of Object.entries(f)) {
+      if (!(k in sharedFlat)) {
+        // Not shared at all — either unique to this route or conflicts across routes.
+        // If the key exists in another route with a different value, it's a "changed" vs shared is not applicable;
+        // we classify as added when the token is absent from sharedFlat entirely.
+        const existsInOthers = flat.some(o => o.flat !== f && (k in o.flat));
+        if (!existsInOthers) {
+          setPath(added, k, v);
+        } else {
+          // Present in multiple routes but disagreeing values -> changed relative to the shared baseline.
+          setPath(changed, k, v);
+          drift.push({ path: route.path, token: k, value: JSON.parse(v) });
+        }
+      }
+    }
+    perRoute[slug] = { url: route.url, path: route.path, added, changed };
+  }
+
+  const allKeys = new Set();
+  for (const f of flat) for (const k of Object.keys(f.flat)) allKeys.add(k);
+
+  return {
+    shared,
+    perRoute,
+    summary: {
+      routeCount: safeRoutes.length,
+      sharedTokenCount: Object.keys(sharedFlat).length,
+      totalUnique: allKeys.size,
+      drift,
+    },
+  };
+}
+
+export function formatRoutesReport(reconciled) {
+  const { summary, perRoute } = reconciled;
+  const lines = [];
+  lines.push('# Multi-route Token Reconciliation');
+  lines.push('');
+  lines.push(`- Routes crawled: **${summary.routeCount}**`);
+  lines.push(`- Shared tokens: **${summary.sharedTokenCount}**`);
+  lines.push(`- Total unique tokens across routes: **${summary.totalUnique}**`);
+  lines.push(`- Cross-route drift entries: **${summary.drift.length}**`);
+  lines.push('');
+  lines.push('## Per-route contributions');
+  for (const [slug, entry] of Object.entries(perRoute)) {
+    const addedCount = countLeaves(entry.added);
+    const changedCount = countLeaves(entry.changed);
+    lines.push(`- \`${entry.path}\` (${slug}): ${addedCount} added, ${changedCount} changed`);
+  }
+  return lines.join('\n') + '\n';
+}
+
+function countLeaves(tree) {
+  let n = 0;
+  const walk = (node) => {
+    if (!node || typeof node !== 'object') return;
+    if (isLeaf(node)) { n++; return; }
+    for (const [k, v] of Object.entries(node)) {
+      if (!k.startsWith('$')) walk(v);
+    }
+  };
+  walk(tree);
+  return n;
+}

package/src/index.js

@@ -21,6 +21,11 @@ import { extractCssHealth } from './extractors/css-health.js';
 import { remediateFailingPairs } from './extractors/a11y-remediation.js';
 import { extractSemanticRegions } from './extractors/semantic-regions.js';
 import { clusterComponents } from './extractors/component-clusters.js';
+import { extractModernCss } from './extractors/modern-css.js';
+import { extractWideGamut } from './extractors/wide-gamut.js';
+import { extractTokenSources } from './extractors/token-sources.js';
+import { extractInteractionStates } from './extractors/interaction-states.js';
+import { formatDtcgTokens } from './formatters/dtcg-tokens.js';
 
 function safeExtract(fn, ...args) {
   try { return fn(...args); } catch { return null; }
@@ -30,6 +35,7 @@ export async function extractDesignLanguage(url, options = {}) {
   const rawData = await crawlPage(url, {
     ...options,
     ignore: options.ignore,
+    deepInteract: options.deepInteract,
   });
   const styles = rawData.light.computedStyles;
   const warnings = [];
@@ -63,6 +69,10 @@ export async function extractDesignLanguage(url, options = {}) {
     cssHealth: safeExtract(extractCssHealth, rawData.light.cssCoverage) || null,
     regions: safeExtract(extractSemanticRegions, rawData.light.sections) || [],
     componentClusters: safeExtract(clusterComponents, rawData.light.componentCandidates) || [],
+    modernCss: safeExtract(extractModernCss, rawData) || { pseudoElements: { count: 0, samples: [] }, variableFonts: { count: 0, axes: [] }, openTypeFeatures: [], textWrap: { wrap: [], decorationStyle: [], decorationThickness: [], underlineOffset: [] }, containerQueries: { count: 0, rules: [] }, envUsage: [] },
+    wideGamut: safeExtract(extractWideGamut, rawData.light.modernColors || []) || { oklch: { count: 0, samples: [] }, oklab: { count: 0, samples: [] }, colorMix: { count: 0, samples: [] }, lightDark: { count: 0, samples: [] }, displayP3: { count: 0, samples: [] }, rec2020: { count: 0, samples: [] }, totalCount: 0 },
+    tokenSources: [],
+    interactionStates: safeExtract(extractInteractionStates, rawData.interactState || rawData.light.interactState) || { scrollSettled: false, menusOpened: 0, hover: { sampled: 0, changed: 0, deltas: [] }, accordionsOpened: 0, modals: [] },
     score: null,
   };
 
@@ -106,6 +116,25 @@ export async function extractDesignLanguage(url, options = {}) {
     };
   } catch { /* non-fatal */ }
 
+  design.tokenSources = safeExtract(extractTokenSources, design, styles) || [];
+
+  // Per-route token extraction (Tier 2 multi-page reconciliation).
+  if (Array.isArray(rawData.routes) && rawData.routes.length > 0) {
+    design.routes = rawData.routes.map(r => {
+      const rStyles = r.computedStylesSample || [];
+      const rDesign = {
+        meta: { url: r.url },
+        colors: safeExtract(extractColors, rStyles) || { all: [], neutrals: [], backgrounds: [], text: [], gradients: [] },
+        typography: safeExtract(extractTypography, rStyles) || { families: [], scale: [] },
+        spacing: safeExtract(extractSpacing, rStyles) || { scale: [], base: null },
+        shadows: safeExtract(extractShadows, rStyles) || { values: [] },
+        borders: safeExtract(extractBorders, rStyles) || { radii: [] },
+      };
+      const tokens = safeExtract(formatDtcgTokens, rDesign) || { primitive: {}, semantic: {} };
+      return { url: r.url, path: r.path, tokens };
+    });
+  }
+
   design.score = safeExtract(scoreDesignSystem, design);
   if (design.score === null) warnings.push('scoring failed');