designlang 5.0.0 → 7.0.0

package/src/extractors/component-clusters.js

@@ -0,0 +1,39 @@
+// Cluster similar component instances by structuralHash + style vector cosine similarity.
+
+function cosine(a = [], b = []) {
+  const n = Math.min(a.length, b.length);
+  let dot = 0, na = 0, nb = 0;
+  for (let i = 0; i < n; i++) {
+    dot += a[i] * b[i];
+    na += a[i] * a[i];
+    nb += b[i] * b[i];
+  }
+  return na && nb ? dot / (Math.sqrt(na) * Math.sqrt(nb)) : (na === nb ? 1 : 0);
+}
+
+export function clusterComponents(elements = [], { threshold = 0.95 } = {}) {
+  const byKind = {};
+  for (const el of elements) {
+    const key = `${el.kind}|${el.structuralHash}`;
+    (byKind[key] ||= []).push(el);
+  }
+  const out = [];
+  for (const group of Object.values(byKind)) {
+    const variants = [];
+    for (const el of group) {
+      const match = variants.find(v => cosine(v.example.styleVector || [], el.styleVector || []) >= threshold);
+      if (match) {
+        match.instanceCount++;
+      } else {
+        variants.push({ example: el, instanceCount: 1 });
+      }
+    }
+    out.push({
+      kind: group[0].kind,
+      structuralHash: group[0].structuralHash,
+      instanceCount: group.length,
+      variants: variants.map(v => ({ css: v.example.css, instanceCount: v.instanceCount })),
+    });
+  }
+  return out;
+}

package/src/extractors/components.js

@@ -1,15 +1,33 @@
 export function extractComponents(computedStyles) {
   const components = {};
 
-  // Buttons
+  // Buttons — with variant detection
   const buttons = computedStyles.filter(el =>
     el.tag === 'button' || el.role === 'button' ||
     (el.tag === 'a' && /btn|button/i.test(el.classList))
   );
   if (buttons.length > 0) {
+    // Group by background color to detect variants
+    const bgGroups = new Map();
+    for (const btn of buttons) {
+      const bg = btn.backgroundColor || 'transparent';
+      if (!bgGroups.has(bg)) bgGroups.set(bg, []);
+      bgGroups.get(bg).push(btn);
+    }
+    const variants = [...bgGroups.entries()]
+      .sort((a, b) => b[1].length - a[1].length)
+      .map(([bg, group], i) => {
+        let variant = 'default';
+        if (bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') variant = 'ghost';
+        else if (i === 0) variant = 'primary';
+        else if (i === 1) variant = 'secondary';
+        else variant = `variant-${i + 1}`;
+        return { variant, backgroundColor: bg, count: group.length, style: mostCommonStyle(group, ['color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderRadius']) };
+      });
     components.buttons = {
       count: buttons.length,
       baseStyle: mostCommonStyle(buttons, ['backgroundColor', 'color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderRadius']),
+      variants,
     };
   }
 
@@ -131,6 +149,64 @@ export function extractComponents(computedStyles) {
     };
   }
 
+  // Tabs
+  const tabs = computedStyles.filter(el =>
+    el.role === 'tab' || /\btab\b/i.test(el.classList)
+  );
+  if (tabs.length > 0) {
+    components.tabs = {
+      count: tabs.length,
+      baseStyle: mostCommonStyle(tabs, ['backgroundColor', 'color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderColor', 'borderRadius']),
+    };
+  }
+
+  // Accordions
+  const accordions = computedStyles.filter(el =>
+    /accordion/i.test(el.classList) ||
+    (el.tag === 'summary') ||
+    (el.tag === 'details')
+  );
+  if (accordions.length > 0) {
+    components.accordions = {
+      count: accordions.length,
+      baseStyle: mostCommonStyle(accordions, ['backgroundColor', 'color', 'fontSize', 'paddingTop', 'paddingRight', 'borderColor']),
+    };
+  }
+
+  // Tooltips
+  const tooltips = computedStyles.filter(el =>
+    el.role === 'tooltip' || /tooltip/i.test(el.classList)
+  );
+  if (tooltips.length > 0) {
+    components.tooltips = {
+      count: tooltips.length,
+      baseStyle: mostCommonStyle(tooltips, ['backgroundColor', 'color', 'fontSize', 'borderRadius', 'paddingTop', 'paddingRight', 'boxShadow']),
+    };
+  }
+
+  // Progress bars
+  const progressBars = computedStyles.filter(el =>
+    el.tag === 'progress' || el.role === 'progressbar' || /progress/i.test(el.classList)
+  );
+  if (progressBars.length > 0) {
+    components.progressBars = {
+      count: progressBars.length,
+      baseStyle: mostCommonStyle(progressBars, ['backgroundColor', 'color', 'borderRadius', 'fontSize']),
+    };
+  }
+
+  // Switches / Toggles
+  const switches = computedStyles.filter(el =>
+    el.role === 'switch' ||
+    /switch|toggle/i.test(el.classList)
+  );
+  if (switches.length > 0) {
+    components.switches = {
+      count: switches.length,
+      baseStyle: mostCommonStyle(switches, ['backgroundColor', 'borderRadius', 'borderColor']),
+    };
+  }
+
   // Generate CSS snippets for each component
   for (const [type, data] of Object.entries(components)) {
     if (data.baseStyle) {

package/src/extractors/css-health.js

@@ -0,0 +1,151 @@
+// CSS health audit — operates on page.coverage.stopCSSCoverage() output
+// serialized as [{ url, text, totalBytes, ranges:[{start,end}] }].
+
+function countUsed(ranges = []) {
+  let used = 0;
+  for (const r of ranges) used += Math.max(0, (r.end || 0) - (r.start || 0));
+  return used;
+}
+
+function countImportant(text) {
+  const m = text.match(/!important/g);
+  return m ? m.length : 0;
+}
+
+function countDuplicates(text) {
+  // Count prop:value pairs that appear >=2x across the sheet.
+  const seen = new Map();
+  const re = /([\w-]+)\s*:\s*([^;{}!]+)(\s*!important)?\s*;?/g;
+  for (const m of text.matchAll(re)) {
+    const key = `${m[1].trim()}:${m[2].trim()}`;
+    seen.set(key, (seen.get(key) || 0) + 1);
+  }
+  let dup = 0;
+  for (const n of seen.values()) if (n >= 2) dup += (n - 1);
+  return dup;
+}
+
+function countVendorPrefixes(text) {
+  return {
+    webkit: (text.match(/-webkit-/g) || []).length,
+    moz: (text.match(/-moz-/g) || []).length,
+    ms: (text.match(/-ms-/g) || []).length,
+    o: (text.match(/(^|[^-\w])-o-/g) || []).length,
+  };
+}
+
+function extractKeyframes(text) {
+  const out = [];
+  const re = /@keyframes\s+([\w-]+)\s*\{([\s\S]*?)\n\}/g;
+  for (const m of text.matchAll(re)) {
+    const body = m[2];
+    const steps = (body.match(/(\d+%|from|to)\s*\{/g) || []).length;
+    out.push({ name: m[1], steps });
+  }
+  return out;
+}
+
+function specificityFor(selector) {
+  // Simple WCAG-ish triple: ids, classes+attrs+pseudo-classes, types
+  const ids = (selector.match(/#[\w-]+/g) || []).length;
+  const classes = (selector.match(/\.[\w-]+|\[[^\]]+\]|:(?!:)[\w-]+(?:\([^)]+\))?/g) || []).length;
+  const types = (selector.match(/(?:^|[\s>+~,])([a-z][\w-]*)/gi) || []).length;
+  return [ids, classes, types];
+}
+
+function specificityDistribution(text) {
+  const triples = [];
+  const re = /([^{}]+)\{([^}]*)\}/g;
+  for (const m of text.matchAll(re)) {
+    const selectorList = m[1];
+    for (const sel of selectorList.split(',').map(s => s.trim()).filter(Boolean)) {
+      if (sel.startsWith('@')) continue;
+      triples.push(specificityFor(sel));
+    }
+  }
+  if (triples.length === 0) {
+    return { max: [0, 0, 0], average: [0, 0, 0], count: 0 };
+  }
+  let max = [0, 0, 0];
+  let sum = [0, 0, 0];
+  for (const t of triples) {
+    for (let i = 0; i < 3; i++) {
+      sum[i] += t[i];
+      if (t[i] > max[i]) max[i] = t[i];
+    }
+  }
+  const avg = sum.map(v => Math.round((v / triples.length) * 100) / 100);
+  return { max, average: avg, count: triples.length };
+}
+
+export function extractCssHealth(coverage = []) {
+  const sheets = [];
+  let totalBytes = 0;
+  let usedBytes = 0;
+  let importantCount = 0;
+  let duplicates = 0;
+  const vendorPrefixes = { webkit: 0, moz: 0, ms: 0, o: 0 };
+  const keyframes = [];
+  let specMax = [0, 0, 0];
+  let specSumWeighted = [0, 0, 0];
+  let specCount = 0;
+
+  for (const c of coverage) {
+    const text = c.text || '';
+    const sheetTotal = typeof c.totalBytes === 'number' ? c.totalBytes : text.length;
+    const sheetUsed = countUsed(c.ranges);
+    const sheetUnused = Math.max(0, sheetTotal - sheetUsed);
+    sheets.push({
+      url: c.url || '',
+      totalBytes: sheetTotal,
+      usedBytes: sheetUsed,
+      unusedBytes: sheetUnused,
+      unusedPercent: sheetTotal ? Math.round((sheetUnused / sheetTotal) * 100) : 0,
+    });
+    totalBytes += sheetTotal;
+    usedBytes += sheetUsed;
+
+    importantCount += countImportant(text);
+    duplicates += countDuplicates(text);
+
+    const vp = countVendorPrefixes(text);
+    vendorPrefixes.webkit += vp.webkit;
+    vendorPrefixes.moz += vp.moz;
+    vendorPrefixes.ms += vp.ms;
+    vendorPrefixes.o += vp.o;
+
+    keyframes.push(...extractKeyframes(text));
+
+    const spec = specificityDistribution(text);
+    for (let i = 0; i < 3; i++) {
+      if (spec.max[i] > specMax[i]) specMax[i] = spec.max[i];
+      specSumWeighted[i] += spec.average[i] * spec.count;
+    }
+    specCount += spec.count;
+  }
+
+  const unusedBytes = Math.max(0, totalBytes - usedBytes);
+  const unusedPercent = totalBytes ? Math.round((unusedBytes / totalBytes) * 100) : 0;
+  const specAvg = specCount > 0
+    ? specSumWeighted.map(v => Math.round((v / specCount) * 100) / 100)
+    : [0, 0, 0];
+
+  const issues = [];
+  if (importantCount > 0) issues.push(`${importantCount} !important rule${importantCount > 1 ? 's' : ''}`);
+  if (duplicates > 0) issues.push(`${duplicates} duplicate declaration${duplicates > 1 ? 's' : ''}`);
+  if (unusedPercent >= 50) issues.push(`${unusedPercent}% unused CSS`);
+
+  return {
+    sheets,
+    totalBytes,
+    usedBytes,
+    unusedBytes,
+    unusedPercent,
+    importantCount,
+    duplicates,
+    vendorPrefixes,
+    keyframes,
+    specificity: { max: specMax, average: specAvg, count: specCount },
+    issues,
+  };
+}

package/src/extractors/gradients.js

@@ -6,7 +6,9 @@ export function extractGradients(styles) {
     const bg = el.backgroundImage;
     if (!bg || !bg.includes('gradient')) continue;
     const rawGradients = splitGradients(bg);
-    for (const raw of rawGradients) {
+    for (let raw of rawGradients) {
+      // Normalize vendor prefixes
+      raw = raw.replace(/-(webkit|moz)-/g, '');
       if (seen.has(raw)) continue;
       seen.add(raw);
       gradients.push(parseGradient(raw));
@@ -58,15 +60,33 @@ function parseGradient(raw) {
   let direction = null;
   let stopArgs = args;
   const first = args[0] || '';
-  if (/^(to |from |\d+deg|at )/.test(first) || /^(circle|ellipse)/.test(first)) {
+  if (/^(to |from |\d+(\.\d+)?(deg|grad|rad|turn)|at )/.test(first) || /^(circle|ellipse)/.test(first)) {
     direction = first;
     stopArgs = args.slice(1);
   }
 
   const stops = stopArgs.map(s => {
-    const posMatch = s.match(/([\d.]+%?)$/);
-    const position = posMatch ? posMatch[1] : null;
-    const color = position ? s.slice(0, posMatch.index).trim() : s.trim();
+    // Match position only if it's outside parentheses (not inside rgb/hsl)
+    // Position is a percentage or length at the end, after the color value
+    const trimmed = s.trim();
+    // Check if trailing value is outside any parens
+    const lastParen = trimmed.lastIndexOf(')');
+    const trailing = lastParen >= 0 ? trimmed.slice(lastParen + 1).trim() : trimmed;
+    const posMatch = trailing.match(/([\d.]+(%|px|em|rem|vw|vh)?)$/);
+    let position = null;
+    let color = trimmed;
+    if (posMatch && posMatch[0] !== trimmed) {
+      // Position found after the color function closes
+      position = posMatch[0];
+      color = trimmed.slice(0, trimmed.length - trailing.length + trailing.indexOf(posMatch[0])).trim();
+    } else if (lastParen < 0) {
+      // No parens — simple color like "red 50%"
+      const simplePos = trimmed.match(/\s+([\d.]+(%|px|em|rem|vw|vh)?)$/);
+      if (simplePos) {
+        position = simplePos[1];
+        color = trimmed.slice(0, simplePos.index).trim();
+      }
+    }
     return { color, position };
   });
 

package/src/extractors/scoring.js

@@ -73,7 +73,26 @@ export function scoreDesignSystem(design) {
     issues.push(`${design.accessibility.failCount} WCAG contrast failures`);
   }
 
-  // 7. CSS variable usage (0-100)
+  // 7. CSS health (0-100) — additive; does not affect existing weights.
+  if (design.cssHealth) {
+    const ch = design.cssHealth;
+    let h = 100;
+    if (ch.unusedPercent >= 70) h -= 30;
+    else if (ch.unusedPercent >= 50) h -= 20;
+    else if (ch.unusedPercent >= 30) h -= 10;
+    if (ch.importantCount >= 20) h -= 20;
+    else if (ch.importantCount >= 5) h -= 10;
+    else if (ch.importantCount >= 1) h -= 5;
+    if (ch.duplicates >= 20) h -= 15;
+    else if (ch.duplicates >= 5) h -= 8;
+    else if (ch.duplicates >= 1) h -= 3;
+    scores.cssHealth = Math.max(0, h);
+    if (ch.importantCount >= 5) issues.push(`${ch.importantCount} !important rules — prefer specificity over overrides`);
+    if (ch.unusedPercent >= 50) issues.push(`${ch.unusedPercent}% of CSS is unused — consider purging`);
+    if (ch.duplicates >= 5) issues.push(`${ch.duplicates} duplicate CSS declarations`);
+  }
+
+  // 8. CSS variable usage (0-100)
   const varCount = Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0);
   if (varCount >= 20) scores.tokenization = 100;
   else if (varCount >= 10) scores.tokenization = 75;

package/src/extractors/semantic-regions.js

@@ -0,0 +1,44 @@
+// Classify page sections: nav/hero/features/pricing/testimonials/cta/footer/sidebar/content.
+
+const KW = {
+  pricing: /\b(\$\s*\d|per\s?month|\/mo\b|pricing|free|billed)/i,
+  testimonials: /(customer|review|testimonial|said|"|")/i,
+  features: /(feature|benefit|why|what you get)/i,
+  cta: /(get started|sign up|try free|start now|request demo|contact sales)/i,
+};
+
+function classify(s) {
+  const role = (s.role || '').toLowerCase();
+  const tag = (s.tag || '').toLowerCase();
+  if (tag === 'nav' || role === 'navigation') return 'nav';
+  if (tag === 'header' || role === 'banner') return 'nav';
+  if (tag === 'footer' || role === 'contentinfo') return 'footer';
+  if (tag === 'aside' || role === 'complementary') return 'sidebar';
+
+  const cls = (s.className || '').toLowerCase();
+  const id = (s.id || '').toLowerCase();
+  const blob = `${cls} ${id}`;
+  const text = s.text || '';
+  const headings = s.headings || [];
+
+  if (/hero/.test(blob)) return 'hero';
+  if (/pricing/.test(blob) || KW.pricing.test(text)) return 'pricing';
+  if (/testimonial|review/.test(blob) || KW.testimonials.test(text)) return 'testimonials';
+  if (/features?|grid/.test(blob) && s.cardCount >= 3) return 'features';
+  if (KW.features.test(text) && s.cardCount >= 3) return 'features';
+  if (s.buttonCount <= 2 && headings.length && text.length < 400 && KW.cta.test(text)) return 'cta';
+  if (headings.length === 1 && s.buttonCount >= 1 && s.bounds && s.bounds.h > 300) return 'hero';
+  return 'content';
+}
+
+export function extractSemanticRegions(sections = []) {
+  return sections.map(s => ({
+    role: classify(s),
+    tag: s.tag,
+    bounds: s.bounds,
+    heading: (s.headings && s.headings[0]) || null,
+    buttonCount: s.buttonCount || 0,
+    cardCount: s.cardCount || 0,
+    className: s.className || null,
+  }));
+}

package/src/extractors/shadows.js

@@ -1,27 +1,70 @@
 export function extractShadows(computedStyles) {
   const shadowSet = new Set();
+  const textShadowSet = new Set();
 
   for (const el of computedStyles) {
     if (el.boxShadow && el.boxShadow !== 'none') {
       shadowSet.add(el.boxShadow);
     }
+    if (el.textShadow && el.textShadow !== 'none') {
+      textShadowSet.add(el.textShadow);
+    }
+  }
+
+  const values = [...shadowSet].map(raw => parseShadow(raw));
+  values.sort((a, b) => a.visualWeight - b.visualWeight);
+
+  const textShadows = [...textShadowSet].map(raw => parseShadow(raw));
+  textShadows.sort((a, b) => a.visualWeight - b.visualWeight);
+
+  return { values, textShadows };
+}
+
+function parseShadow(raw) {
+  const inset = raw.includes('inset');
+  const cleaned = raw.replace(/\binset\b/g, '').trim();
+
+  // Extract color (rgb/rgba/hsl/hsla or named/hex) — find the non-numeric portion
+  let color = '';
+  let numericPart = cleaned;
+  // Match color functions first (they may contain commas/numbers)
+  const colorFnMatch = cleaned.match(/(rgba?\([^)]+\)|hsla?\([^)]+\))/);
+  if (colorFnMatch) {
+    color = colorFnMatch[1];
+    numericPart = cleaned.replace(color, '').trim();
+  } else {
+    // Try hex or named color at start or end
+    const hexMatch = cleaned.match(/(#[0-9a-fA-F]{3,8})/);
+    if (hexMatch) {
+      color = hexMatch[1];
+      numericPart = cleaned.replace(color, '').trim();
+    } else {
+      // Named color — typically last or first token that isn't a length
+      const tokens = cleaned.split(/\s+/);
+      const colorToken = tokens.find(t => !/^-?[\d.]+px$/.test(t) && !/^[\d.]+$/.test(t));
+      if (colorToken) {
+        color = colorToken;
+        numericPart = cleaned.replace(colorToken, '').trim();
+      }
+    }
   }
 
-  const values = [...shadowSet].map(raw => {
-    // Parse: offset-x offset-y blur spread color [inset]
-    const inset = raw.includes('inset');
-    // Approximate blur from the string for classification
-    const nums = raw.match(/([\d.]+)px/g)?.map(n => parseFloat(n)) || [];
-    const blur = nums[2] || 0;
-    let label = 'md';
-    if (blur <= 2) label = 'xs';
-    else if (blur <= 6) label = 'sm';
-    else if (blur <= 15) label = 'md';
-    else if (blur <= 30) label = 'lg';
-    else label = 'xl';
-    return { raw, blur, inset, label };
-  });
-
-  values.sort((a, b) => a.blur - b.blur);
-  return { values };
+  // Parse numeric values (offset-x, offset-y, blur, spread)
+  const nums = numericPart.match(/-?[\d.]+px/g)?.map(n => parseFloat(n)) || [];
+  const offsetX = nums[0] || 0;
+  const offsetY = nums[1] || 0;
+  const blur = nums[2] || 0;
+  const spread = nums[3] || 0;
+
+  // Visual weight = distance + blur
+  const visualWeight = Math.sqrt(offsetX * offsetX + offsetY * offsetY) + blur;
+
+  let label = 'none';
+  if (visualWeight > 0 && visualWeight <= 3) label = 'xs';
+  else if (visualWeight <= 8) label = 'sm';
+  else if (visualWeight <= 16) label = 'md';
+  else if (visualWeight <= 32) label = 'lg';
+  else if (visualWeight > 32) label = 'xl';
+
+  return { raw, offsetX, offsetY, blur, spread, color, inset, visualWeight: Math.round(visualWeight * 100) / 100, label };
 }

package/src/extractors/spacing.js

@@ -1,4 +1,33 @@
-import { parseCSSValue, clusterValues, detectScale } from '../utils.js';
+import { parseCSSValue, detectScale } from '../utils.js';
+
+function naturalBreakCluster(values) {
+  if (values.length <= 1) return values;
+  const sorted = [...values].sort((a, b) => a - b);
+  if (sorted.length <= 2) return sorted;
+
+  // Compute gaps between consecutive values
+  const gaps = [];
+  for (let i = 1; i < sorted.length; i++) {
+    gaps.push(sorted[i] - sorted[i - 1]);
+  }
+
+  // Find median gap
+  const sortedGaps = [...gaps].sort((a, b) => a - b);
+  const medianGap = sortedGaps[Math.floor(sortedGaps.length / 2)];
+
+  // Split into clusters at gaps larger than the median
+  const clusters = [[sorted[0]]];
+  for (let i = 1; i < sorted.length; i++) {
+    if (gaps[i - 1] > medianGap) {
+      clusters.push([sorted[i]]);
+    } else {
+      clusters[clusters.length - 1].push(sorted[i]);
+    }
+  }
+
+  // Use the first (smallest) value in each cluster as representative
+  return clusters.map(c => c[0]);
+}
 
 export function extractSpacing(computedStyles) {
   const allValues = new Set();
@@ -13,7 +42,7 @@ export function extractSpacing(computedStyles) {
   }
 
   const sorted = [...allValues].sort((a, b) => a - b);
-  const clustered = clusterValues(sorted, 2);
+  const clustered = naturalBreakCluster(sorted);
   const { base, scale } = detectScale(clustered);
 
   // Build named tokens

package/src/extractors/stack-fingerprint.js

@@ -0,0 +1,88 @@
+// Framework + CSS layer + analytics fingerprint.
+// Pure function over signals collected by the crawler.
+
+const FRAMEWORK_BY_GLOBAL = {
+  '__NEXT_DATA__': 'next',
+  '__NUXT__': 'nuxt',
+  '___gatsby': 'gatsby',
+  '_remixContext': 'remix',
+  'React': 'react',
+  'Vue': 'vue',
+  'Shopify': 'shopify',
+  'wp': 'wordpress',
+};
+
+const SCRIPT_PATTERNS = [
+  [/_next\/static/, 'next'],
+  [/\/nuxt\//, 'nuxt'],
+  [/\/astro\//, 'astro'],
+  [/\/sveltekit\//, 'sveltekit'],
+  [/shopify\./, 'shopify'],
+  [/wp-(content|includes)/, 'wordpress'],
+  [/webflow\.com/, 'webflow'],
+  [/framerusercontent/, 'framer'],
+];
+
+const ANALYTICS = {
+  gtag: /googletagmanager\.com|google-analytics/,
+  plausible: /plausible\.io/,
+  posthog: /posthog\.com/,
+  segment: /segment\.(io|com)/,
+  mixpanel: /mixpanel/,
+  amplitude: /amplitude/,
+  hotjar: /hotjar/,
+  vercelInsights: /\/_vercel\/insights/,
+};
+
+const TAILWIND_UTIL = /(^|\s)(flex|grid|block|inline|hidden|text-(xs|sm|base|lg|xl|\d+xl)|text-(gray|slate|zinc|red|blue|green|amber|neutral|stone)-\d+|bg-(gray|slate|zinc|red|blue|green|amber|neutral|stone)-\d+|p[xy]?-\d+|m[xy]?-\d+|gap-\d+|rounded(-\w+)?|shadow(-\w+)?|items-(start|center|end|baseline|stretch)|justify-(start|center|end|between|around|evenly)|grid-cols-\d+|col-span-\d+)(\s|$)/;
+
+function detectFramework(signals) {
+  for (const g of signals.windowGlobals || []) {
+    if (FRAMEWORK_BY_GLOBAL[g]) return FRAMEWORK_BY_GLOBAL[g];
+  }
+  for (const s of signals.scripts || []) {
+    for (const [re, name] of SCRIPT_PATTERNS) if (re.test(s)) return name;
+  }
+  return 'unknown';
+}
+
+function detectTailwind(signals) {
+  const classes = (signals.classNameSample || []).filter(c => typeof c === 'string');
+  const hits = classes.filter(c => TAILWIND_UTIL.test(c));
+  if (hits.length < Math.max(5, classes.length * 0.1)) return null;
+  const utilFreq = new Map();
+  for (const c of hits) {
+    for (const u of c.split(/\s+/).filter(Boolean)) {
+      utilFreq.set(u, (utilFreq.get(u) || 0) + 1);
+    }
+  }
+  const topUtilities = [...utilFreq.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 100)
+    .map(([u, n]) => ({ utility: u, count: n }));
+  return { detected: true, utilities: topUtilities };
+}
+
+function detectAnalytics(signals) {
+  const found = [];
+  for (const [name, re] of Object.entries(ANALYTICS)) {
+    if ((signals.scripts || []).some(s => re.test(s))) found.push(name);
+  }
+  return found;
+}
+
+export function extractStackFingerprint(signals = {}) {
+  const framework = detectFramework(signals);
+  const tailwind = detectTailwind(signals);
+  const css = { layer: tailwind ? 'tailwind' : 'unknown', tailwind: tailwind || null };
+  return {
+    framework,
+    css,
+    analytics: detectAnalytics(signals),
+    detectedFrom: {
+      globalCount: (signals.windowGlobals || []).length,
+      scriptCount: (signals.scripts || []).length,
+      classSampleSize: (signals.classNameSample || []).length,
+    },
+  };
+}

package/src/extractors/variables.js

@@ -18,5 +18,24 @@ export function extractVariables(cssVariables) {
     }
   }
 
-  return categories;
+  // Build dependency map: which variables reference other variables
+  const dependencies = {};
+  for (const [name, value] of Object.entries(cssVariables)) {
+    const refs = [...value.matchAll(/var\((--[\w-]+)/g)].map(m => m[1]);
+    if (refs.length > 0) {
+      dependencies[name] = refs;
+    }
+  }
+
+  // Semantic grouping by name patterns
+  const semantic = { success: {}, warning: {}, error: {}, info: {} };
+  for (const [name, value] of Object.entries(cssVariables)) {
+    const lower = name.toLowerCase();
+    if (/success|green|valid|positive/.test(lower)) semantic.success[name] = value;
+    else if (/warning|warn|yellow|caution|amber/.test(lower)) semantic.warning[name] = value;
+    else if (/error|danger|destructive|red|invalid|negative/.test(lower)) semantic.error[name] = value;
+    else if (/info|informati|blue|notice/.test(lower)) semantic.info[name] = value;
+  }
+
+  return { ...categories, dependencies, semantic };
 }