designlang 9.0.0 → 10.1.0

package/src/extractors/component-screenshots.js

@@ -0,0 +1,161 @@
+// v10.1 — Component Screenshots
+//
+// Given a Playwright Page, crop PNG screenshots for each detected component
+// cluster. We re-query the DOM using the same candidate selector the crawler
+// uses, group matches by `kind + variantHint + sizeHint`, and capture up to
+// three representatives per group at 2× retina. Writes into a `screenshots/`
+// subdirectory under the output root and returns an index the bin emits as
+// `*-screenshots.json`.
+
+import { chromium } from 'playwright';
+import { mkdirSync } from 'fs';
+import { join } from 'path';
+
+const CANDIDATE_SELECTOR = 'button, a[role="button"], .btn, [class*="button"], input[type="text"], input[type="email"], input[type="search"], textarea, [class*="card"]';
+
+const FALLBACK_GROUPS = [
+  { slug: 'button', selector: 'button:not(:empty), a[role="button"], [class*="btn"]:not(:empty)' },
+  { slug: 'card', selector: '[class*="card"]:not(:empty)' },
+  { slug: 'input', selector: 'input[type="text"], input[type="email"], input[type="search"], textarea' },
+  { slug: 'nav', selector: 'nav, [role="navigation"]' },
+  { slug: 'hero', selector: '[class*="hero"], section:first-of-type' },
+];
+
+function slugify(s) {
+  return (s || 'component')
+    .toString()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '') || 'component';
+}
+
+async function collectClusteredHandles(page) {
+  // In-page classification mirrors what the crawler does for candidates but
+  // returns enough to screenshot (unique index so we can re-find handles).
+  const groups = await page.evaluate((sel) => {
+    const out = {};
+    let ix = 0;
+    for (const el of document.querySelectorAll(sel)) {
+      const r = el.getBoundingClientRect();
+      if (r.width < 20 || r.height < 10) continue;
+      if (r.width > window.innerWidth || r.height > window.innerHeight * 2) continue;
+      const cs = getComputedStyle(el);
+      if (cs.visibility === 'hidden' || cs.display === 'none' || parseFloat(cs.opacity) < 0.1) continue;
+
+      const tag = el.tagName.toLowerCase();
+      const cls = typeof el.className === 'string' ? el.className.toLowerCase() : '';
+      let kind = 'other';
+      if (tag === 'button' || el.getAttribute('role') === 'button' || /\bbtn\b|button/.test(cls)) kind = 'button';
+      else if (tag === 'input' || tag === 'textarea') kind = 'input';
+      else if (/card/.test(cls)) kind = 'card';
+      else if (tag === 'a') kind = 'link';
+
+      const variant = ((cls.match(/\b(primary|secondary|tertiary|ghost|outline|solid|destructive|danger|success|warning|subtle)\b/) || [])[1]) || 'default';
+      const size = ((cls.match(/\b(xs|sm|md|lg|xl|small|medium|large)\b/) || [])[1]) || '';
+
+      const key = [kind, variant, size].filter(Boolean).join('--');
+      if (!out[key]) out[key] = [];
+      el.setAttribute('data-dl-shot', String(ix));
+      out[key].push({ ix, w: Math.round(r.width), h: Math.round(r.height), kind, variant, size });
+      ix++;
+    }
+    return out;
+  }, CANDIDATE_SELECTOR);
+  return groups;
+}
+
+async function captureGroup(page, key, entries, screenshotDir, maxPerGroup = 3) {
+  const out = [];
+  const slug = slugify(key);
+  let variant = 0;
+  for (const info of entries.slice(0, maxPerGroup)) {
+    const handle = await page.$(`[data-dl-shot="${info.ix}"]`);
+    if (!handle) continue;
+    const file = `${slug}-${variant}.png`;
+    const path = join(screenshotDir, file);
+    try {
+      await handle.screenshot({ path, omitBackground: false });
+    } catch { continue; }
+    out.push({
+      cluster: key,
+      variant,
+      path: `screenshots/${file}`,
+      bounds: { w: info.w, h: info.h },
+      kind: info.kind,
+      variantHint: info.variant,
+      sizeHint: info.size,
+      retina: true,
+    });
+    variant++;
+  }
+  return out;
+}
+
+async function captureFallbacks(page, screenshotDir) {
+  const out = [];
+  for (const g of FALLBACK_GROUPS) {
+    try {
+      const handles = await page.$$(g.selector);
+      for (const h of handles.slice(0, 2)) {
+        const box = await h.boundingBox();
+        if (!box || box.width < 20 || box.height < 10) continue;
+        const path = join(screenshotDir, `${g.slug}-${out.filter(x => x.cluster === g.slug).length}.png`);
+        await h.screenshot({ path });
+        out.push({
+          cluster: g.slug,
+          variant: out.filter(x => x.cluster === g.slug).length,
+          path: `screenshots/${path.split('screenshots/')[1]}`,
+          bounds: { w: Math.round(box.width), h: Math.round(box.height) },
+          retina: true,
+          fallback: true,
+        });
+      }
+    } catch { /* skip */ }
+  }
+  return out;
+}
+
+// Public entry. Launches a fresh Playwright context at deviceScaleFactor: 2
+// so captures are crisp on retina displays without a second full run.
+export async function captureComponentScreenshotsV10(url, outDir, { width = 1280, height = 800, channel } = {}) {
+  const screenshotDir = join(outDir, 'screenshots');
+  mkdirSync(screenshotDir, { recursive: true });
+
+  const browser = await chromium.launch({ headless: true, ...(channel && { channel }) });
+  try {
+    const context = await browser.newContext({
+      viewport: { width, height },
+      deviceScaleFactor: 2,
+      colorScheme: 'light',
+    });
+    const page = await context.newPage();
+    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {});
+    await page.waitForLoadState('networkidle').catch(() => {});
+    await page.evaluate(() => document.fonts.ready).catch(() => {});
+
+    const groups = await collectClusteredHandles(page);
+    let components = [];
+    for (const [key, entries] of Object.entries(groups)) {
+      if (!entries.length) continue;
+      const rows = await captureGroup(page, key, entries, screenshotDir);
+      components.push(...rows);
+    }
+
+    // If clustering produced nothing (auth / docs pages often do), fall back
+    // to the v9 hardcoded selector list so users still get something.
+    if (!components.length) {
+      components = await captureFallbacks(page, screenshotDir);
+    }
+
+    let fullPage = null;
+    try {
+      const p = join(screenshotDir, 'full-page.png');
+      await page.screenshot({ path: p, fullPage: true });
+      fullPage = { path: 'screenshots/full-page.png', retina: true };
+    } catch { /* non-fatal */ }
+
+    return { components, fullPage, count: components.length };
+  } finally {
+    await browser.close();
+  }
+}

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