designlang 7.2.0 → 9.0.0

package/src/drift.js

@@ -0,0 +1,137 @@
+// designlang drift <url> --tokens <file>
+// Compares local project tokens against the live site and reports what's drifted.
+// Designed for CI/CD: exits non-zero when drift exceeds the tolerance budget.
+
+import { readFileSync } from 'fs';
+import { extname } from 'path';
+import { extractDesignLanguage } from './index.js';
+
+function flattenDtcg(obj, prefix = '', out = {}) {
+  for (const [k, v] of Object.entries(obj || {})) {
+    if (k.startsWith('$')) continue;
+    if (v && typeof v === 'object') {
+      if ('$value' in v) {
+        out[prefix ? `${prefix}.${k}` : k] = v.$value;
+      } else {
+        flattenDtcg(v, prefix ? `${prefix}.${k}` : k, out);
+      }
+    }
+  }
+  return out;
+}
+
+function loadLocalTokens(file) {
+  const raw = readFileSync(file, 'utf8');
+  const ext = extname(file);
+  if (ext === '.json') {
+    const j = JSON.parse(raw);
+    const flat = flattenDtcg(j);
+    if (Object.keys(flat).length) return flat;
+    const out = {};
+    for (const [group, entries] of Object.entries(j)) {
+      if (!entries || typeof entries !== 'object') continue;
+      for (const [k, v] of Object.entries(entries)) out[`${group}.${k}`] = String(v);
+    }
+    return out;
+  }
+  if (ext === '.css') {
+    const out = {};
+    for (const m of raw.matchAll(/--([\w-]+):\s*([^;]+);/g)) out[m[1]] = m[2].trim();
+    return out;
+  }
+  throw new Error(`Unsupported token file: ${ext}`);
+}
+
+function hexToRgb(h) {
+  const m = h.replace('#', '').match(/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+  return m ? [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)] : null;
+}
+
+function colorDistance(a, b) {
+  const ra = hexToRgb(a), rb = hexToRgb(b);
+  if (!ra || !rb) return Infinity;
+  return Math.sqrt(ra.reduce((s, v, i) => s + (v - rb[i]) ** 2, 0));
+}
+
+function findNearest(value, palette) {
+  if (!/^#[\da-f]{6}$/i.test(value)) return null;
+  let best = { distance: Infinity, token: null };
+  for (const p of palette) {
+    if (!/^#[\da-f]{6}$/i.test(p.hex || '')) continue;
+    const d = colorDistance(value, p.hex);
+    if (d < best.distance) best = { distance: d, token: p };
+  }
+  return best;
+}
+
+export async function checkDrift(url, { tokens: tokensFile, tolerance = 8, options = {} } = {}) {
+  const local = loadLocalTokens(tokensFile);
+  const design = await extractDesignLanguage(url, options);
+  const livePalette = design.colors?.all || [];
+
+  const drifted = [];
+  const matched = [];
+  const unknown = [];
+
+  for (const [name, value] of Object.entries(local)) {
+    if (!/^#[\da-f]{3,8}$/i.test(String(value))) continue; // only color tokens for now
+    const hex = value.length === 4 ? '#' + value.slice(1).split('').map(c => c + c).join('') : value;
+    const nearest = findNearest(hex, livePalette);
+    if (!nearest || nearest.distance === Infinity) { unknown.push({ name, value: hex }); continue; }
+    if (nearest.distance > tolerance) {
+      drifted.push({
+        token: name,
+        local: hex,
+        nearestLive: nearest.token.hex,
+        distance: Math.round(nearest.distance),
+        role: nearest.token.role || 'unknown',
+      });
+    } else {
+      matched.push({ token: name, local: hex, liveMatch: nearest.token.hex, distance: Math.round(nearest.distance) });
+    }
+  }
+
+  const driftRatio = drifted.length / Math.max(1, drifted.length + matched.length);
+  const verdict = driftRatio === 0 ? 'in-sync' : driftRatio < 0.15 ? 'minor-drift' : driftRatio < 0.4 ? 'notable-drift' : 'major-drift';
+
+  return {
+    url,
+    tokensFile,
+    tolerance,
+    verdict,
+    driftRatio: +driftRatio.toFixed(3),
+    drifted,
+    matched,
+    unknown,
+    summary: {
+      total: drifted.length + matched.length,
+      drifted: drifted.length,
+      matched: matched.length,
+      unknown: unknown.length,
+    },
+  };
+}
+
+export function formatDriftMarkdown(r) {
+  const lines = [
+    `# designlang drift report`,
+    ``,
+    `**Live site:** ${r.url}`,
+    `**Local tokens:** ${r.tokensFile}`,
+    `**Verdict:** ${r.verdict} (drift ratio: ${r.driftRatio})`,
+    ``,
+    `| metric | count |`,
+    `|---|---|`,
+    `| total color tokens | ${r.summary.total} |`,
+    `| matched | ${r.summary.matched} |`,
+    `| drifted | ${r.summary.drifted} |`,
+    `| unknown | ${r.summary.unknown} |`,
+    ``,
+  ];
+  if (r.drifted.length) {
+    lines.push(`## Drifted tokens`, ``, `| token | local | nearest live | Δ |`, `|---|---|---|---|`);
+    for (const d of r.drifted) lines.push(`| \`${d.token}\` | \`${d.local}\` | \`${d.nearestLive}\` (${d.role}) | ${d.distance} |`);
+    lines.push('');
+  }
+  return lines.join('\n');
+}

package/src/extractors/accessibility.js

@@ -28,16 +28,59 @@ function wcagLevel(ratio, isLargeText) {
   return 'FAIL';
 }
 
+// Tags where "foreground vs background" contrast is *not* a WCAG text concern —
+// SVG/icon glyphs, media, form primitives, and structural containers without
+// direct text. Filtering these removes the overlay/decorative false-positives
+// that used to crater scores on dark-themed sites.
+const NON_TEXT_TAGS = new Set([
+  'svg', 'path', 'circle', 'rect', 'polygon', 'polyline', 'line', 'ellipse',
+  'use', 'defs', 'g', 'clippath', 'mask', 'filter', 'symbol', 'stop', 'lineargradient', 'radialgradient',
+  'img', 'picture', 'video', 'audio', 'canvas', 'iframe', 'source', 'track',
+  'br', 'hr', 'wbr',
+  'input', 'select', 'textarea', 'progress', 'meter', 'option', 'optgroup',
+  'script', 'style', 'link', 'meta', 'head', 'html', 'body',
+  'main', 'section', 'article', 'aside', 'header', 'footer', 'nav',
+  'div', 'figure', 'form', 'fieldset', 'ul', 'ol', 'dl',
+]);
+
+const TEXT_BEARING_TAGS = new Set([
+  'p', 'a', 'button', 'label', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'td', 'th', 'code', 'pre', 'em', 'strong', 'small', 'b', 'i', 'u',
+  'time', 'summary', 'figcaption', 'blockquote', 'q', 'mark', 'cite', 'abbr',
+  'dt', 'dd', 'kbd', 'samp', 'var', 'sub', 'sup', 'del', 'ins', 'caption', 'legend',
+  // span is a high-noise/high-signal tag — it wraps both real text and
+  // decorative glyphs. Include it but require an explicit background (the
+  // opacity filter downstream still removes the decorative transparent ones).
+  'span',
+]);
+
+function isContrastRelevant(el) {
+  const tag = (el.tag || '').toLowerCase();
+  if (NON_TEXT_TAGS.has(tag)) return false;
+  if (!TEXT_BEARING_TAGS.has(tag)) return false;
+  // If the crawler captured hasText, trust it — filters decorative
+  // span/link/button wrappers that hold no real glyphs. If hasText wasn't
+  // captured (older fixtures, unit tests) fall back to inclusion.
+  if (el.hasText === false) return false;
+  return true;
+}
+
 export function extractAccessibility(computedStyles) {
   const pairs = new Map(); // "fg|bg" -> { fg, bg, count, elements }
 
   for (const el of computedStyles) {
+    if (!isContrastRelevant(el)) continue;
+
     const fg = parseColor(el.color);
     const bg = parseColor(el.backgroundColor);
-    if (!fg || !bg || bg.a === 0) continue;
+    if (!fg || !bg) continue;
+    // Skip transparent/semi-transparent — real contrast depends on the parent
+    // stack which we don't composite. Counting these as "fails" is noise.
+    if (bg.a < 0.9 || fg.a < 0.9) continue;
 
     const fgHex = rgbToHex(fg);
     const bgHex = rgbToHex(bg);
+    if (fgHex === bgHex) continue;
     const key = `${fgHex}|${bgHex}`;
 
     if (!pairs.has(key)) {

package/src/extractors/colors.js

@@ -1,25 +1,39 @@
-import { parseColor, rgbToHex, rgbToHsl, clusterColors, isSaturated } from '../utils.js';
+import { parseColor, rgbToHex, rgbToHsl, clusterColors, isSaturated, colorDistance } from '../utils.js';
+
+const INTERACTIVE_TAGS = new Set(['a', 'button']);
+const INTERACTIVE_ROLES = new Set(['button', 'link', 'menuitem', 'tab']);
+const INTERACTIVE_CLASS_RE = /\b(btn|button|cta|primary|action)\b/i;
+
+function isInteractive(el) {
+  if (!el) return false;
+  if (INTERACTIVE_TAGS.has(el.tag)) return true;
+  if (el.role && INTERACTIVE_ROLES.has(el.role)) return true;
+  if (el.classList && INTERACTIVE_CLASS_RE.test(el.classList)) return true;
+  return false;
+}
 
 export function extractColors(computedStyles) {
-  const colorMap = new Map(); // hex -> { hex, parsed, count, contexts: Set }
+  const colorMap = new Map(); // hex -> { hex, parsed, count, contexts: Set, interactiveBg: number }
 
-  function addColor(value, context) {
+  function addColor(value, context, { interactive = false } = {}) {
     const parsed = parseColor(value);
     if (!parsed || parsed.a === 0) return;
     const hex = rgbToHex(parsed);
     if (!colorMap.has(hex)) {
-      colorMap.set(hex, { hex, parsed, count: 0, contexts: new Set() });
+      colorMap.set(hex, { hex, parsed, count: 0, contexts: new Set(), interactiveBg: 0 });
     }
     const entry = colorMap.get(hex);
     entry.count++;
     entry.contexts.add(context);
+    if (interactive && context === 'background') entry.interactiveBg++;
   }
 
   const gradients = new Set();
 
   for (const el of computedStyles) {
+    const interactive = isInteractive(el);
     addColor(el.color, 'text');
-    addColor(el.backgroundColor, 'background');
+    addColor(el.backgroundColor, 'background', { interactive });
     addColor(el.borderColor, 'border');
 
     if (el.backgroundImage && el.backgroundImage !== 'none' && el.backgroundImage.includes('gradient')) {
@@ -30,12 +44,21 @@ export function extractColors(computedStyles) {
   const allColors = Array.from(colorMap.values());
   const clusters = clusterColors(allColors, 15);
 
-  // Classify roles
+  // Aggregate interactive-bg score per cluster (sum across members)
+  for (const cluster of clusters) {
+    cluster.interactiveBg = cluster.members.reduce((s, m) => s + (m.interactiveBg || 0), 0);
+    const { s: sat, l: lit } = rgbToHsl(cluster.representative);
+    cluster.saturation = sat;
+    cluster.lightness = lit;
+  }
+
+  // Classify roles — tighten chromatic threshold so pale grays (hsl sat < 25) don't qualify
   const neutrals = [];
   const chromatic = [];
 
   for (const cluster of clusters) {
-    if (isSaturated(cluster.representative)) {
+    const chromaticEnough = cluster.saturation > 25 && cluster.lightness > 5 && cluster.lightness < 95;
+    if (chromaticEnough || (isSaturated(cluster.representative) && cluster.interactiveBg > 0)) {
       chromatic.push(cluster);
     } else {
       neutrals.push(cluster);
@@ -61,12 +84,27 @@ export function extractColors(computedStyles) {
     }
   }
 
-  const primary = chromatic[0] || null;
-  const secondary = chromatic[1] || null;
-  const accent = chromatic.find(c => {
-    const pct = c.count / allColors.reduce((s, a) => s + a.count, 0);
+  // Rank chromatic clusters by brand-likelihood:
+  //   interactiveBg carries the most signal (it's a CTA color)
+  //   saturation comes next (brand colors are usually punchy)
+  //   raw usage count is a weak tiebreaker (avoids neutral-heavy sites dominating)
+  function brandScore(c) {
+    return c.interactiveBg * 100 + c.saturation * 2 + Math.log10(Math.max(1, c.count));
+  }
+  const ranked = [...chromatic].sort((a, b) => brandScore(b) - brandScore(a));
+
+  const primary = ranked[0] || null;
+  // secondary: distinct hue from primary
+  const secondary = ranked.find(c => {
+    if (!primary || c === primary) return false;
+    return colorDistance(c.representative, primary.representative) > 60;
+  }) || ranked[1] || null;
+  // accent: sparse chromatic, prefers background context
+  const accent = ranked.find(c => {
+    if (c === primary || c === secondary) return false;
+    const pct = c.count / Math.max(1, allColors.reduce((s, a) => s + a.count, 0));
     return pct < 0.05 && c.members.some(m => m.contexts.has('background'));
-  }) || chromatic[2] || null;
+  }) || ranked.find(c => c !== primary && c !== secondary) || null;
 
   return {
     primary: primary ? { hex: primary.hex, rgb: primary.representative, hsl: rgbToHsl(primary.representative), count: primary.count } : null,

package/src/extractors/component-anatomy.js

@@ -0,0 +1,123 @@
+// Component Anatomy v2 — builds per-kind anatomy trees, variant × state matrices,
+// and typed prop surfaces that downstream generators can turn into stubs.
+
+const KNOWN_VARIANTS = ['primary', 'secondary', 'tertiary', 'ghost', 'outline', 'solid', 'destructive', 'danger', 'success', 'warning', 'link', 'subtle'];
+const KNOWN_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', 'small', 'medium', 'large'];
+
+function slotFingerprint(slots = []) {
+  return slots.map(s => s.role).join('>');
+}
+
+function inferSlots(slots = [], kind) {
+  const roles = new Set(slots.map(s => s.role));
+  if (kind === 'button') {
+    return {
+      label: true,
+      icon: roles.has('icon'),
+      badge: roles.has('badge'),
+    };
+  }
+  if (kind === 'card') {
+    return {
+      heading: roles.has('heading'),
+      description: roles.has('text'),
+      media: roles.has('icon'),
+      footer: slots.length > 3,
+    };
+  }
+  if (kind === 'input') {
+    return { leading: roles.has('icon'), trailing: false };
+  }
+  return {};
+}
+
+function dominant(arr) {
+  const counts = {};
+  for (const v of arr) counts[v] = (counts[v] || 0) + 1;
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])[0]?.[0] || '';
+}
+
+export function extractComponentAnatomy(candidates = []) {
+  const byKind = {};
+  for (const c of candidates) {
+    const k = c.kind || 'other';
+    (byKind[k] ||= []).push(c);
+  }
+
+  const anatomies = [];
+  for (const [kind, items] of Object.entries(byKind)) {
+    if (items.length < 2) continue;
+
+    // Group variants by explicit class hint, fall back to style vector.
+    const variantGroups = {};
+    for (const it of items) {
+      const v = it.variantHint || 'default';
+      (variantGroups[v] ||= []).push(it);
+    }
+
+    const variants = Object.entries(variantGroups).map(([name, vs]) => {
+      const sizes = {};
+      for (const it of vs) {
+        const sz = it.sizeHint || 'default';
+        (sizes[sz] ||= []).push(it);
+      }
+      return {
+        name,
+        count: vs.length,
+        states: {
+          default: { count: vs.filter(v => !v.disabled).length, css: vs.find(v => !v.disabled)?.css || null },
+          disabled: { count: vs.filter(v => v.disabled).length, css: vs.find(v => v.disabled)?.css || null },
+        },
+        sizes: Object.entries(sizes).map(([sName, sItems]) => ({ name: sName, count: sItems.length, css: sItems[0].css })),
+        sampleText: vs.slice(0, 5).map(v => v.text).filter(Boolean),
+      };
+    }).sort((a, b) => b.count - a.count);
+
+    const slotSignatures = items.map(i => slotFingerprint(i.slots));
+    const anatomy = {
+      kind,
+      totalInstances: items.length,
+      slots: inferSlots(items[0].slots, kind),
+      dominantSlotShape: dominant(slotSignatures),
+      variants,
+      props: {
+        variant: Object.keys(variantGroups).filter(v => v !== 'default'),
+        size: [...new Set(items.map(i => i.sizeHint).filter(Boolean))],
+        disabled: items.some(i => i.disabled),
+      },
+    };
+    anatomies.push(anatomy);
+  }
+
+  return anatomies.sort((a, b) => b.totalInstances - a.totalInstances);
+}
+
+// Emit TypeScript-flavored React stub for the anatomy — includes variant/size props + slot children.
+export function formatAnatomyStubs(anatomies = []) {
+  const lines = [
+    "// Auto-generated by designlang — component anatomy v2.",
+    "// Scaffolds. Wire into your token system; not a runtime library.",
+    "",
+    "import * as React from 'react';",
+    "",
+  ];
+  for (const a of anatomies) {
+    const Name = a.kind.charAt(0).toUpperCase() + a.kind.slice(1);
+    const variantUnion = (a.props.variant.length ? a.props.variant : ['default']).map(v => `'${v}'`).join(' | ');
+    const sizeUnion = (a.props.size.length ? a.props.size : ['md']).map(v => `'${v}'`).join(' | ');
+    lines.push(`export interface ${Name}Props {`);
+    lines.push(`  variant?: ${variantUnion};`);
+    lines.push(`  size?: ${sizeUnion};`);
+    if (a.props.disabled) lines.push(`  disabled?: boolean;`);
+    if (a.slots.icon) lines.push(`  leadingIcon?: React.ReactNode;`);
+    if (a.slots.badge) lines.push(`  badge?: React.ReactNode;`);
+    lines.push(`  children?: React.ReactNode;`);
+    lines.push(`}`);
+    lines.push(``);
+    lines.push(`export function ${Name}({ variant = '${a.props.variant[0] || 'default'}', size = 'md', ...rest }: ${Name}Props) {`);
+    lines.push(`  return React.createElement('${a.kind === 'input' ? 'input' : a.kind === 'link' ? 'a' : a.kind === 'card' ? 'div' : 'button'}', { 'data-variant': variant, 'data-size': size, ...rest });`);
+    lines.push(`}`);
+    lines.push(``);
+  }
+  return lines.join('\n');
+}

package/src/extractors/motion.js

@@ -0,0 +1,184 @@
+// Motion v2 — rich motion language extraction.
+// Classifies easings into semantic families, detects springs/bounces,
+// catches scroll/view-timeline usage, and emits motion tokens (duration, easing, spring).
+
+const MS = v => {
+  if (!v) return 0;
+  const m = String(v).match(/(-?\d+\.?\d*)(m?s)?/);
+  if (!m) return 0;
+  const n = parseFloat(m[1]);
+  return m[2] === 's' ? n * 1000 : n;
+};
+
+const DURATION_NAMES = [
+  { max: 80, name: 'instant' },
+  { max: 150, name: 'xs' },
+  { max: 250, name: 'sm' },
+  { max: 400, name: 'md' },
+  { max: 700, name: 'lg' },
+  { max: 1200, name: 'xl' },
+  { max: Infinity, name: 'xxl' },
+];
+
+function nameDuration(ms) {
+  return DURATION_NAMES.find(d => ms <= d.max).name;
+}
+
+function classifyCubicBezier(raw) {
+  const m = raw.match(/cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/);
+  if (!m) return { family: 'custom', raw };
+  const [x1, y1, x2, y2] = m.slice(1).map(Number);
+  if (y1 < 0 || y2 > 1 || y2 < 0 || y1 > 1) return { family: 'spring', raw, overshoot: true };
+  if (x1 < 0.2 && x2 > 0.8) return { family: 'ease-in-out', raw };
+  if (x1 < 0.2 && y1 < 0.2) return { family: 'ease-out', raw };
+  if (x2 > 0.8 && y2 > 0.8) return { family: 'ease-in', raw };
+  if (y1 < x1 && y2 < x2) return { family: 'ease-in', raw };
+  if (y1 > x1 && y2 > x2) return { family: 'ease-out', raw };
+  return { family: 'custom', raw };
+}
+
+function classifyEasing(raw) {
+  if (!raw) return { family: 'linear', raw };
+  if (raw === 'linear') return { family: 'linear', raw };
+  if (raw === 'ease' || raw === 'ease-in-out') return { family: 'ease-in-out', raw };
+  if (raw === 'ease-in') return { family: 'ease-in', raw };
+  if (raw === 'ease-out') return { family: 'ease-out', raw };
+  if (/cubic-bezier/.test(raw)) return classifyCubicBezier(raw);
+  if (/steps/.test(raw)) return { family: 'steps', raw };
+  return { family: 'custom', raw };
+}
+
+function isBounceKeyframe(kf) {
+  if (!kf.steps || kf.steps.length < 3) return false;
+  const first = kf.steps.find(s => s.offset === '0%' || s.offset === 'from');
+  const last = kf.steps.find(s => s.offset === '100%' || s.offset === 'to');
+  if (!first || !last) return false;
+  return first.style.replace(/\s+/g, '') === last.style.replace(/\s+/g, '');
+}
+
+function keyframeKind(kf) {
+  const props = new Set();
+  const values = [];
+  for (const step of kf.steps || []) {
+    for (const part of (step.style || '').split(';')) {
+      const [p, v] = part.split(':').map(s => (s || '').trim());
+      if (p) props.add(p);
+      if (v) values.push(v);
+    }
+  }
+  const has = p => props.has(p);
+  const anyValue = re => values.some(v => re.test(v));
+  if (has('transform') && anyValue(/translate/i)) {
+    if (anyValue(/translateY\(-?\d/)) return 'slide-y';
+    if (anyValue(/translateX\(-?\d/)) return 'slide-x';
+    return 'slide';
+  }
+  if (has('opacity') && !has('transform')) return 'fade';
+  if (has('opacity') && has('transform')) return 'reveal';
+  if (anyValue(/rotate/)) return 'rotate';
+  if (anyValue(/scale/)) return 'scale';
+  if (isBounceKeyframe(kf)) return 'pulse';
+  return 'custom';
+}
+
+export function extractMotion(computedStyles, keyframes = []) {
+  const transitions = new Set();
+  const easingRaw = new Set();
+  const durations = [];
+  const animationRefs = new Map();
+  const transitionedProps = {};
+  const scrollSignals = new Set();
+  let animatingElements = 0;
+
+  for (const el of computedStyles) {
+    let isAnimating = false;
+    if (el.transition && el.transition !== 'all 0s ease 0s' && el.transition !== 'none') {
+      transitions.add(el.transition);
+      isAnimating = true;
+      for (const m of el.transition.matchAll(/(?<![(\d])(\d+\.?\d*m?s)(?![)\w])/g)) durations.push(MS(m[1]));
+      for (const m of el.transition.matchAll(/(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\([^)]+\)|steps\([^)]+\))/g)) easingRaw.add(m[1]);
+      for (const part of el.transition.split(',')) {
+        const prop = part.trim().split(/\s+/)[0];
+        if (prop && prop !== 'all') transitionedProps[prop] = (transitionedProps[prop] || 0) + 1;
+      }
+    }
+    if (el.animation && el.animation !== 'none 0s ease 0s 1 normal none running' && el.animation !== 'none') {
+      const nameMatch = el.animation.match(/([a-zA-Z_][\w-]*)\s*$/) || el.animation.match(/^([a-zA-Z_][\w-]*)/);
+      if (nameMatch) {
+        const name = nameMatch[1];
+        if (name !== 'none' && name !== 'running' && name !== 'paused') {
+          animationRefs.set(name, (animationRefs.get(name) || 0) + 1);
+        }
+      }
+      isAnimating = true;
+    }
+    if (el.animationTimeline && el.animationTimeline !== 'auto' && el.animationTimeline !== 'none' && el.animationTimeline !== '') {
+      scrollSignals.add(el.animationTimeline);
+    }
+    if (el.viewTimelineName) scrollSignals.add(`view:${el.viewTimelineName}`);
+    if (el.scrollTimelineName) scrollSignals.add(`scroll:${el.scrollTimelineName}`);
+    if (isAnimating) animatingElements++;
+  }
+
+  const uniqueDurations = [...new Set(durations.filter(d => d > 0))].sort((a, b) => a - b);
+  const durationTokens = uniqueDurations.map(ms => ({
+    name: nameDuration(ms),
+    ms,
+    css: ms >= 1000 ? `${ms / 1000}s` : `${ms}ms`,
+  }));
+  // dedupe by name — keep first (smallest) per bucket
+  const seenName = new Set();
+  const namedDurations = [];
+  for (const t of durationTokens) {
+    if (seenName.has(t.name)) continue;
+    seenName.add(t.name);
+    namedDurations.push(t);
+  }
+
+  const easings = [...easingRaw].map(e => ({ ...classifyEasing(e), count: computedStyles.filter(c => (c.transition || '').includes(e)).length }));
+  const springs = easings.filter(e => e.family === 'spring');
+
+  const enrichedKeyframes = (keyframes || []).map(kf => ({
+    name: kf.name,
+    steps: kf.steps,
+    kind: keyframeKind(kf),
+    isBounce: isBounceKeyframe(kf),
+    used: animationRefs.has(kf.name),
+    usageCount: animationRefs.get(kf.name) || 0,
+    propertiesAnimated: [...new Set((kf.steps || []).flatMap(s => (s.style || '').split(';').map(d => d.split(':')[0].trim()).filter(Boolean)))],
+  }));
+
+  const transitionTop = Object.entries(transitionedProps).sort((a, b) => b[1] - a[1]).slice(0, 10).map(([property, count]) => ({ property, count }));
+
+  // Motion language fingerprint — what does this site's motion *feel* like?
+  const totalUses = easings.reduce((s, e) => s + e.count, 0);
+  const share = family => easings.filter(e => e.family === family).reduce((s, e) => s + e.count, 0) / (totalUses || 1);
+  const feel = springs.length > 0
+    ? 'springy'
+    : share('ease-out') > 0.5
+      ? 'responsive'
+      : share('ease-in-out') > 0.5
+        ? 'smooth'
+        : share('linear') > 0.5
+          ? 'mechanical'
+          : 'mixed';
+
+  return {
+    durations: namedDurations,
+    easings,
+    springs,
+    keyframes: enrichedKeyframes,
+    transitionedProperties: transitionTop,
+    scrollLinked: {
+      present: scrollSignals.size > 0,
+      signals: [...scrollSignals],
+    },
+    stats: {
+      animatingElements,
+      transitionCount: transitions.size,
+      keyframeCount: enrichedKeyframes.length,
+      keyframeUnused: enrichedKeyframes.filter(k => !k.used).length,
+    },
+    feel,
+  };
+}