designlang 8.0.0 → 10.0.0

package/src/extractors/imagery-style.js

@@ -0,0 +1,131 @@
+// Classify the imagery style of a site from the sampled <img> list. No image
+// downloads — we work from the src URL, displayed dimensions, and styling
+// already captured by the crawler. The goal is a fingerprint an LLM can use:
+// "photography-heavy with abstract gradients" vs "flat illustration only".
+
+const LABELS = [
+  'photography', '3d-render', 'isometric', 'flat-illustration',
+  'gradient-mesh', 'icon-only', 'screenshot', 'mixed', 'none',
+];
+
+function isSvg(img) {
+  const src = (img.src || '').toLowerCase();
+  return src.endsWith('.svg') || src.startsWith('data:image/svg+xml') || img.tag === 'svg';
+}
+
+function aspectBucket(img) {
+  if (!img.width || !img.height) return 'unknown';
+  const r = img.width / img.height;
+  if (r > 2.2) return 'ultra-wide';
+  if (r > 1.4) return 'landscape';
+  if (r > 0.85) return 'square-ish';
+  if (r > 0.5) return 'portrait';
+  return 'tall';
+}
+
+function filenameHint(src) {
+  const lower = (src || '').toLowerCase();
+  const hints = [];
+  if (/\b(screenshot|screen-shot|dashboard|ui-|product-ui)\b/.test(lower)) hints.push('screenshot');
+  if (/\b(hero|cover|banner)\b/.test(lower)) hints.push('hero');
+  if (/\b(3d|render|gltf|iso|isometric)\b/.test(lower)) hints.push('3d');
+  if (/\b(illust|illustr|character|mascot)\b/.test(lower)) hints.push('illustration');
+  if (/\b(photo|portrait|team|headshot)\b/.test(lower)) hints.push('photo');
+  if (/\b(icon|symbol|logo)\b/.test(lower)) hints.push('icon');
+  if (/\b(gradient|mesh|blob)\b/.test(lower)) hints.push('mesh');
+  return hints;
+}
+
+function scoreLabels(images) {
+  const tally = Object.fromEntries(LABELS.map(l => [l, 0]));
+  const reasons = [];
+  let photoish = 0, svgCount = 0, iconCount = 0, heroCount = 0, screenshotCount = 0;
+
+  for (const img of images) {
+    const svg = isSvg(img);
+    if (svg) svgCount++;
+    const maxSide = Math.max(img.width || 0, img.height || 0);
+    if (maxSide < 40 && maxSide > 0) iconCount++;
+    const hints = filenameHint(img.src);
+    if (hints.includes('screenshot')) { tally.screenshot += 0.4; screenshotCount++; }
+    if (hints.includes('3d')) tally['3d-render'] += 0.6;
+    if (hints.includes('iso')) tally['isometric'] += 0.6;
+    if (hints.includes('illustration')) tally['flat-illustration'] += 0.5;
+    if (hints.includes('photo')) { tally.photography += 0.5; photoish++; }
+    if (hints.includes('mesh')) tally['gradient-mesh'] += 0.5;
+    if (hints.includes('icon')) iconCount++;
+    if (hints.includes('hero')) heroCount++;
+
+    // Ext-based heuristics.
+    const src = (img.src || '').toLowerCase();
+    if (/\.(jpe?g|webp|avif)(\?|$)/.test(src) && maxSide > 200) {
+      tally.photography += 0.15; photoish++;
+      reasons.push('raster photo-ext');
+    }
+    if (src.endsWith('.png') && maxSide > 150 && !svg) {
+      tally.photography += 0.05;
+    }
+    if (svg && maxSide > 100) {
+      tally['flat-illustration'] += 0.15;
+    }
+  }
+
+  // Normalization heuristics.
+  const total = Math.max(1, images.length);
+  if (svgCount / total > 0.6) { tally['flat-illustration'] += 0.4; reasons.push('svg-heavy'); }
+  if (iconCount / total > 0.7) tally['icon-only'] += 0.6;
+  if (photoish / total > 0.5) tally.photography += 0.3;
+  if (screenshotCount > 0) reasons.push(`${screenshotCount} screenshot-like`);
+
+  return { tally, reasons, counts: { total, svgCount, iconCount, heroCount, screenshotCount, photoish } };
+}
+
+function dominantAspect(images) {
+  const buckets = {};
+  for (const img of images) {
+    const b = aspectBucket(img);
+    buckets[b] = (buckets[b] || 0) + 1;
+  }
+  const sorted = Object.entries(buckets).sort((a, b) => b[1] - a[1]);
+  return sorted[0] ? sorted[0][0] : 'unknown';
+}
+
+function borderRadiusProfile(images) {
+  const radii = images.map(i => parseFloat(i.borderRadius) || 0).filter(n => !isNaN(n));
+  if (!radii.length) return 'none';
+  const avg = radii.reduce((a, b) => a + b, 0) / radii.length;
+  if (avg > 9999) return 'full';
+  if (avg > 20) return 'rounded';
+  if (avg > 4) return 'soft';
+  return 'square';
+}
+
+export function extractImageryStyle(images = []) {
+  if (!images.length) {
+    return { label: 'none', confidence: 0, counts: {}, aspectRatios: [], radiusProfile: 'none', signals: [] };
+  }
+  const { tally, reasons, counts } = scoreLabels(images);
+  const ranked = Object.entries(tally).sort((a, b) => b[1] - a[1]);
+  const [winner, winScore] = ranked[0];
+  const [, second] = ranked[1] || [null, 0];
+  let label = winScore === 0 ? 'mixed' : winner;
+  if (winScore > 0 && second > 0 && (winScore - second) < 0.2) label = 'mixed';
+  const confidence = Math.min(1, winScore / Math.max(1, images.length * 0.3));
+
+  return {
+    label,
+    confidence: Number(confidence.toFixed(3)),
+    counts: {
+      total: counts.total,
+      svg: counts.svgCount,
+      icon: counts.iconCount,
+      hero: counts.heroCount,
+      screenshot: counts.screenshotCount,
+      photoLike: counts.photoish,
+    },
+    dominantAspect: dominantAspect(images),
+    radiusProfile: borderRadiusProfile(images),
+    alternates: ranked.filter(([, s]) => s > 0 && s !== winScore).slice(0, 3).map(([l, s]) => ({ label: l, score: Number(s.toFixed(3)) })),
+    signals: reasons.slice(0, 10),
+  };
+}

package/src/extractors/logo.js

@@ -0,0 +1,142 @@
+// Pull the site's logo from the page. Uses a Playwright Page handle because we
+// need the inline SVG source (or the <img> pixels) — computed-styles alone
+// can't recover them. Writes the asset to disk and returns metadata.
+//
+// Strategy:
+//   1) Candidate selectors, in priority order:
+//      a. header/nav [aria-label*="logo"] | [class*="logo"] | [id*="logo"]
+//      b. header a[href="/"] svg | header a[href="/"] img
+//      c. first <svg> in <header>|<nav> with width 16-240 and height 16-120
+//      d. first <img> in <header>|<nav> with alt matching site name
+//   2) For SVG: capture `outerHTML`, save as .svg.
+//   3) For <img>: save the bytes via page.request (handles CORS), fallback to
+//      element.screenshot() if fetch fails.
+//   4) Compute clearspace by sampling 8 directions from the bounding box and
+//      stopping at the first non-whitespace pixel within 80px (very cheap).
+
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+
+const CANDIDATES = [
+  'header a[href="/"] svg, header [href="/"] svg, nav a[href="/"] svg',
+  'header a[href="/"] img, nav a[href="/"] img',
+  'header [class*="logo" i] svg, nav [class*="logo" i] svg, [id*="logo" i] svg',
+  'header [class*="logo" i] img, nav [class*="logo" i] img, [id*="logo" i] img',
+  'header svg, nav svg',
+  'header img, nav img',
+];
+
+async function findLogoHandle(page) {
+  for (const sel of CANDIDATES) {
+    try {
+      const handles = await page.$$(sel);
+      for (const h of handles) {
+        const info = await h.evaluate((el) => {
+          const r = el.getBoundingClientRect();
+          const tag = el.tagName.toLowerCase();
+          const w = r.width, hh = r.height;
+          if (tag === 'svg') {
+            if (w < 16 || w > 260 || hh < 12 || hh > 120) return null;
+            return { tag, w, hh, x: r.x, y: r.y, outer: el.outerHTML };
+          }
+          if (tag === 'img') {
+            if (w < 20 || w > 320 || hh < 12 || hh > 120) return null;
+            return { tag, w, hh, x: r.x, y: r.y, src: el.currentSrc || el.src, alt: el.getAttribute('alt') || '' };
+          }
+          return null;
+        });
+        if (info) return { handle: h, info };
+      }
+    } catch { /* selector not found, keep looking */ }
+  }
+  return null;
+}
+
+async function fetchImgBytes(page, url) {
+  try {
+    const resp = await page.request.get(url, { timeout: 10000 });
+    if (!resp.ok()) return null;
+    const buf = await resp.body();
+    return buf;
+  } catch { return null; }
+}
+
+function guessExt(url) {
+  const m = (url || '').toLowerCase().match(/\.(png|jpe?g|webp|gif|svg|ico|avif)(?:$|\?)/);
+  return m ? (m[1] === 'jpeg' ? 'jpg' : m[1]) : 'png';
+}
+
+export async function extractLogo(page, outDir, prefix) {
+  const found = await findLogoHandle(page);
+  if (!found) {
+    return { found: false };
+  }
+  const { handle, info } = found;
+
+  let savedPath = null;
+  let ext = null;
+
+  if (info.tag === 'svg') {
+    ext = 'svg';
+    savedPath = join(outDir, `${prefix}-logo.svg`);
+    writeFileSync(savedPath, info.outer, 'utf-8');
+  } else {
+    ext = guessExt(info.src);
+    savedPath = join(outDir, `${prefix}-logo.${ext}`);
+    const bytes = await fetchImgBytes(page, info.src);
+    if (bytes) {
+      writeFileSync(savedPath, bytes);
+    } else {
+      // Fallback: screenshot the element.
+      try {
+        await handle.screenshot({ path: savedPath });
+        ext = 'png';
+        savedPath = savedPath.replace(/\.(jpe?g|webp|gif|ico|avif)$/i, '.png');
+      } catch {
+        return { found: true, saved: false, info };
+      }
+    }
+  }
+
+  // Cheap clearspace: sample the bounding box + 80px margin for document
+  // background continuity. Implemented in-page so we don't pull pixels back.
+  const clearspace = await page.evaluate(({ x, y, w, h }) => {
+    const body = document.body;
+    const bg = getComputedStyle(body).backgroundColor;
+    // Count how many pixels of margin we have before hitting another element.
+    const margin = { top: 0, right: 0, bottom: 0, left: 0 };
+    const probe = (dx, dy, max) => {
+      for (let d = 2; d <= max; d += 4) {
+        const el = document.elementFromPoint(x + dx(d), y + dy(d));
+        if (!el) return d;
+        // If we're still inside the logo itself, keep going.
+        if (el.closest('svg, img, [class*="logo" i]')) continue;
+        const r = el.getBoundingClientRect();
+        if (r.width < 8 && r.height < 8) continue;
+        // If it's the page/body, we hit open space.
+        if (el === body || el.tagName === 'HEADER' || el.tagName === 'NAV') return d;
+        return d;
+      }
+      return max;
+    };
+    margin.top = probe(() => w / 2, d => -d, 80);
+    margin.bottom = probe(() => w / 2, d => h + d, 80);
+    margin.left = probe(d => -d, () => h / 2, 80);
+    margin.right = probe(d => w + d, () => h / 2, 80);
+    return { backgroundColor: bg, margin };
+  }, info).catch(() => null);
+
+  return {
+    found: true,
+    saved: true,
+    path: savedPath,
+    file: `${prefix}-logo.${ext}`,
+    kind: info.tag,
+    width: Number(info.w.toFixed(1)),
+    height: Number(info.hh.toFixed(1)),
+    aspect: Number((info.w / Math.max(1, info.hh)).toFixed(3)),
+    src: info.src || null,
+    alt: info.alt || null,
+    clearspace,
+  };
+}

package/src/extractors/material-language.js

@@ -0,0 +1,152 @@
+// Classify a site's "material language" — the visual tactility vocabulary it
+// uses. Signals are the already-extracted shadows, borders, backdrop filters,
+// saturation, and geometry. Output: one dominant label + secondary signals.
+
+const LABELS = [
+  'glassmorphism', 'neumorphism', 'flat', 'brutalist',
+  'skeuomorphic', 'material-you', 'soft-ui', 'mixed',
+];
+
+function parseHexToRgb(hex) {
+  if (!hex || !hex.startsWith('#')) return null;
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.split('').map(c => c + c).join('') : h;
+  if (full.length !== 6) return null;
+  return { r: parseInt(full.slice(0, 2), 16), g: parseInt(full.slice(2, 4), 16), b: parseInt(full.slice(4, 6), 16) };
+}
+
+function rgbSaturation(rgb) {
+  if (!rgb) return 0;
+  const max = Math.max(rgb.r, rgb.g, rgb.b) / 255;
+  const min = Math.min(rgb.r, rgb.g, rgb.b) / 255;
+  if (max === 0) return 0;
+  return (max - min) / max;
+}
+
+function avgSaturation(colors) {
+  if (!colors.length) return 0;
+  let total = 0, count = 0;
+  for (const c of colors) {
+    const rgb = parseHexToRgb(c.hex || c);
+    if (!rgb) continue;
+    total += rgbSaturation(rgb);
+    count++;
+  }
+  return count > 0 ? total / count : 0;
+}
+
+function detectBackdropBlur(modernCss = {}, variables = {}) {
+  // modernCss.pseudoElements might contain backdrop-filter samples; also look
+  // at css-variables for `--backdrop`.
+  const samples = [
+    ...((modernCss.pseudoElements && modernCss.pseudoElements.samples) || []),
+    ...Object.values(variables || {}).flatMap(v => typeof v === 'string' ? [v] : []),
+  ].join(' ');
+  return /backdrop-filter|backdrop-blur|blur\(\s*\d+px\s*\)/i.test(samples);
+}
+
+function shadowComplexity(shadowValues) {
+  // Soft-UI / neumorphism use pair-shadows (inset + outer) with low blur and
+  // low-saturation grays. Brutalism uses hard black shadows with 0 blur.
+  if (!shadowValues.length) return { profile: 'none', avgBlur: 0, maxBlur: 0, insetCount: 0, hardShadowCount: 0, hasPair: false };
+  let insetCount = 0, hardShadowCount = 0, totalBlur = 0, maxBlur = 0, pairCount = 0;
+  for (const v of shadowValues) {
+    const raw = typeof v === 'string' ? v : (v.value || '');
+    if (/inset/i.test(raw)) insetCount++;
+    // Blur is the third length in `offset-x offset-y blur [spread] color`. The
+    // `px` unit is common but optional — `0 0` is a valid zero-blur shadow.
+    const blurs = [...raw.matchAll(/(-?\d+(?:\.\d+)?)(?:px)?\s+(-?\d+(?:\.\d+)?)(?:px)?\s+(\d+(?:\.\d+)?)(?:px)?/g)];
+    for (const m of blurs) {
+      const blur = parseFloat(m[3]);
+      totalBlur += blur;
+      if (blur > maxBlur) maxBlur = blur;
+      if (blur === 0) hardShadowCount++;
+    }
+    if ((raw.match(/,/g) || []).length >= 1) pairCount++;
+  }
+  const avgBlur = totalBlur / Math.max(1, shadowValues.length);
+  let profile = 'soft';
+  if (hardShadowCount > shadowValues.length * 0.5) profile = 'hard';
+  else if (maxBlur > 40) profile = 'diffuse';
+  return { profile, avgBlur, maxBlur, insetCount, hardShadowCount, hasPair: pairCount > 0 };
+}
+
+function borderProfile(radii = [], borderValues = []) {
+  const nums = radii.map(r => {
+    if (typeof r === 'number') return r;
+    if (typeof r === 'string') return parseFloat(r) || 0;
+    if (r && typeof r === 'object') return parseFloat(r.value || r.px || 0) || 0;
+    return 0;
+  }).filter(n => !isNaN(n));
+  const avg = nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : 0;
+  const max = nums.length ? Math.max(...nums) : 0;
+  const pill = nums.some(n => n >= 9999 || n >= 500);
+  const sharp = nums.length && max < 4;
+  return { avg, max, pill, sharp };
+}
+
+export function extractMaterialLanguage(design = {}) {
+  const colors = design.colors?.all || [];
+  const shadows = design.shadows?.values || [];
+  const radii = design.borders?.radii || [];
+  const variables = design.variables || {};
+  const modernCss = design.modernCss || {};
+
+  const sat = avgSaturation(colors);
+  const hasBackdropBlur = detectBackdropBlur(modernCss, variables);
+  const sh = shadowComplexity(shadows);
+  const br = borderProfile(radii);
+  const gradientCount = design.gradients?.count || 0;
+
+  const scores = Object.fromEntries(LABELS.map(l => [l, 0]));
+  const signals = [];
+
+  if (hasBackdropBlur) {
+    scores.glassmorphism += 0.6; signals.push({ label: 'glassmorphism', weight: 0.6, detail: 'backdrop-filter present' });
+  }
+  if (sh.avgBlur > 30 && sat < 0.3 && sh.insetCount > 0 && sh.hasPair) {
+    scores.neumorphism += 0.7; signals.push({ label: 'neumorphism', weight: 0.7, detail: 'paired blur + inset + low saturation' });
+  }
+  if (sh.profile === 'hard' && br.sharp && sat > 0.4) {
+    scores.brutalist += 0.75; signals.push({ label: 'brutalist', weight: 0.75, detail: 'hard shadows + sharp corners + saturated' });
+  }
+  if (shadows.length === 0 && sh.insetCount === 0 && br.avg < 12 && gradientCount < 2) {
+    scores.flat += 0.55; signals.push({ label: 'flat', weight: 0.55, detail: 'no shadows, simple radii' });
+  }
+  if (sh.avgBlur > 60 && sat < 0.4 && !hasBackdropBlur) {
+    scores['soft-ui'] += 0.5; signals.push({ label: 'soft-ui', weight: 0.5, detail: 'soft diffuse shadows' });
+  }
+  if (br.pill && sh.profile === 'soft' && sat > 0.3) {
+    scores['material-you'] += 0.45; signals.push({ label: 'material-you', weight: 0.45, detail: 'pill shapes + soft shadows' });
+  }
+  if (gradientCount > 6 && sat > 0.5) {
+    scores.skeuomorphic += 0.35; signals.push({ label: 'skeuomorphic', weight: 0.35, detail: 'heavy gradient usage' });
+  }
+
+  const ranked = Object.entries(scores).sort((a, b) => b[1] - a[1]);
+  const [winner, winScore] = ranked[0];
+  const [, second] = ranked[1] || [null, 0];
+  let label = winScore === 0 ? 'flat' : winner;
+  // If top two are close, it's "mixed".
+  if (winScore > 0 && second > 0 && (winScore - second) < 0.15) label = 'mixed';
+  const confidence = Math.min(1, winScore);
+
+  return {
+    label,
+    confidence: Number(confidence.toFixed(3)),
+    signals,
+    metrics: {
+      saturation: Number(sat.toFixed(3)),
+      shadowProfile: sh.profile,
+      avgShadowBlur: Number(sh.avgBlur.toFixed(1)),
+      maxShadowBlur: Number(sh.maxBlur.toFixed(1)),
+      insetShadows: sh.insetCount,
+      avgRadius: Number(br.avg.toFixed(1)),
+      maxRadius: Number(br.max.toFixed(1)),
+      hasPill: br.pill,
+      hasBackdropBlur,
+      gradientCount,
+    },
+    alternates: ranked.filter(([, s]) => s > 0 && s !== winScore).slice(0, 3).map(([l, s]) => ({ label: l, score: Number(s.toFixed(3)) })),
+  };
+}

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,
+  };
+}