designlang 4.0.1 → 6.0.0

package/src/extractors/borders.js

@@ -1,14 +1,46 @@
 import { parseCSSValue, clusterValues } from '../utils.js';
 
+function parseBorderRadius(raw) {
+  if (!raw || raw === '0px') return [];
+  // Handle slash-separated (x/y) syntax — take the x part
+  const parts = raw.split('/')[0].trim().split(/\s+/);
+  const values = [];
+  for (const p of parts) {
+    const v = parseCSSValue(p);
+    if (v && v.value > 0) values.push(Math.round(v.value));
+  }
+  return values;
+}
+
 export function extractBorders(computedStyles) {
   const radiiSet = new Map(); // value -> count
+  const widthSet = new Set();
+  const styleSet = new Set();
 
   for (const el of computedStyles) {
     if (el.borderRadius && el.borderRadius !== '0px') {
-      const val = parseCSSValue(el.borderRadius.split(' ')[0]);
-      if (val && val.value > 0) {
-        const px = Math.round(val.value);
-        radiiSet.set(px, (radiiSet.get(px) || 0) + 1);
+      const values = parseBorderRadius(el.borderRadius);
+      if (values.length > 0) {
+        // Use the max value from the shorthand as the representative
+        const representative = Math.max(...values);
+        radiiSet.set(representative, (radiiSet.get(representative) || 0) + 1);
+      }
+    }
+
+    // Collect border widths
+    if (el.borderWidth) {
+      const parts = el.borderWidth.split(/\s+/);
+      for (const p of parts) {
+        const v = parseCSSValue(p);
+        if (v && v.value > 0) widthSet.add(Math.round(v.value));
+      }
+    }
+
+    // Collect border styles
+    if (el.borderStyle) {
+      const parts = el.borderStyle.split(/\s+/);
+      for (const p of parts) {
+        if (p && p !== 'none' && p !== 'initial') styleSet.add(p);
       }
     }
   }
@@ -27,5 +59,8 @@ export function extractBorders(computedStyles) {
     return { value: v, label, count: radiiSet.get(v) || 0 };
   });
 
-  return { radii };
+  const widths = [...widthSet].sort((a, b) => a - b);
+  const styles = [...styleSet].sort();
+
+  return { radii, widths, styles };
 }

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,9 +149,90 @@ 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) {
+      const style = type === 'tables' ? { ...data.baseStyle } : data.baseStyle;
+      delete style.cellStyle;
+      data.css = styleToCss(`.${type.replace(/s$/, '')}`, style);
+    }
+  }
+
   return components;
 }
 
+function styleToCss(selector, style) {
+  const propMap = {
+    backgroundColor: 'background-color', color: 'color', fontSize: 'font-size',
+    fontWeight: 'font-weight', paddingTop: 'padding-top', paddingRight: 'padding-right',
+    paddingBottom: 'padding-bottom', paddingLeft: 'padding-left',
+    borderRadius: 'border-radius', boxShadow: 'box-shadow', borderColor: 'border-color',
+    maxWidth: 'max-width', position: 'position',
+  };
+  const lines = Object.entries(style)
+    .filter(([, v]) => v)
+    .map(([k, v]) => `  ${propMap[k] || k}: ${v};`);
+  return `${selector} {\n${lines.join('\n')}\n}`;
+}
+
 function mostCommonStyle(elements, properties) {
   const style = {};
   for (const prop of properties) {

package/src/extractors/fonts.js

@@ -0,0 +1,82 @@
+export function extractFonts({ fontFaces = [], googleFontsLinks = [], documentFonts = [] }) {
+  const fontMap = new Map();
+
+  // Parse Google Fonts URLs into a lookup: family -> weights
+  const googleFamilies = new Map();
+  for (const url of googleFontsLinks) {
+    const params = new URL(url).searchParams;
+    for (const val of (params.getAll('family'))) {
+      const [name, spec] = val.split(':');
+      const family = name.replace(/\+/g, ' ');
+      const weights = spec?.match(/\d{3}/g) || ['400'];
+      googleFamilies.set(family, [...new Set([...(googleFamilies.get(family) || []), ...weights])]);
+    }
+  }
+
+  const getSource = (family, src) => {
+    if (googleFamilies.has(family)) return 'google-fonts';
+    if (src && /url\(/.test(src)) return /fonts\.(googleapis|gstatic|cdnfonts|bunny)/.test(src) ? 'cdn' : 'self-hosted';
+    return 'system';
+  };
+
+  const getOrCreate = (family) => {
+    if (!fontMap.has(family)) {
+      fontMap.set(family, { family, source: 'system', weights: new Set(), styles: new Set(), urls: [], fontFaceCSS: '' });
+    }
+    return fontMap.get(family);
+  };
+
+  // Process @font-face rules
+  for (const ff of fontFaces) {
+    const family = ff.family?.replace(/["']/g, '');
+    if (!family) continue;
+    const entry = getOrCreate(family);
+    entry.source = getSource(family, ff.src);
+    if (ff.weight) entry.weights.add(String(ff.weight));
+    if (ff.style) entry.styles.add(ff.style);
+    if (ff.src) entry.urls.push(ff.src);
+  }
+
+  // Process document.fonts entries
+  for (const df of documentFonts) {
+    const family = df.family?.replace(/["']/g, '');
+    if (!family) continue;
+    const entry = getOrCreate(family);
+    if (entry.source === 'system') entry.source = getSource(family, '');
+    if (df.weight) entry.weights.add(String(df.weight));
+    if (df.style) entry.styles.add(df.style);
+  }
+
+  // Add Google Fonts families not yet seen
+  for (const [family, weights] of googleFamilies) {
+    const entry = getOrCreate(family);
+    entry.source = 'google-fonts';
+    for (const w of weights) entry.weights.add(w);
+  }
+
+  // Build output
+  const fonts = [];
+  const systemFonts = [];
+
+  for (const entry of fontMap.values()) {
+    const weights = [...entry.weights].sort();
+    const styles = [...entry.styles];
+    if (!weights.length) weights.push('400');
+    if (!styles.length) styles.push('normal');
+
+    const fontFaceCSS = entry.source === 'self-hosted'
+      ? entry.urls.map((src, i) =>
+        `@font-face {\n  font-family: '${entry.family}';\n  font-weight: ${weights[i] || weights[0]};\n  font-style: ${styles[i] || styles[0]};\n  src: ${src};\n}`
+      ).join('\n\n')
+      : '';
+
+    if (entry.source === 'system') { systemFonts.push(entry.family); continue; }
+    fonts.push({ family: entry.family, source: entry.source, weights, styles, urls: entry.urls, fontFaceCSS });
+  }
+
+  const googleFontsUrl = googleFontsLinks[0] || (googleFamilies.size
+    ? `https://fonts.googleapis.com/css2?${[...googleFamilies].map(([f, w]) => `family=${f.replace(/ /g, '+')}:wght@${w.join(';')}`).join('&')}&display=swap`
+    : '');
+
+  return { fonts, googleFontsUrl, systemFonts };
+}

package/src/extractors/gradients.js

@@ -0,0 +1,100 @@
+export function extractGradients(styles) {
+  const seen = new Set();
+  const gradients = [];
+
+  for (const el of styles) {
+    const bg = el.backgroundImage;
+    if (!bg || !bg.includes('gradient')) continue;
+    const rawGradients = splitGradients(bg);
+    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));
+    }
+  }
+
+  return { gradients, count: gradients.length };
+}
+
+function splitGradients(value) {
+  // Split comma-separated gradient layers, respecting nested parens
+  const results = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < value.length; i++) {
+    if (value[i] === '(') depth++;
+    else if (value[i] === ')') depth--;
+    else if (value[i] === ',' && depth === 0) {
+      const chunk = value.slice(start, i).trim();
+      if (chunk.includes('gradient')) results.push(chunk);
+      start = i + 1;
+    }
+  }
+  const last = value.slice(start).trim();
+  if (last.includes('gradient')) results.push(last);
+  return results;
+}
+
+function parseGradient(raw) {
+  const typeMatch = raw.match(/^(repeating-)?(linear|radial|conic)-gradient/);
+  const type = typeMatch ? (typeMatch[1] || '') + typeMatch[2] : 'linear';
+
+  // Extract content inside outermost parens
+  const inner = raw.slice(raw.indexOf('(') + 1, raw.lastIndexOf(')'));
+
+  // Split top-level arguments by comma (respecting nested parens)
+  const args = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < inner.length; i++) {
+    if (inner[i] === '(') depth++;
+    else if (inner[i] === ')') depth--;
+    else if (inner[i] === ',' && depth === 0) {
+      args.push(inner.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  args.push(inner.slice(start).trim());
+
+  // First arg is direction/angle if it doesn't look like a color
+  let direction = null;
+  let stopArgs = args;
+  const first = args[0] || '';
+  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 => {
+    // 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 };
+  });
+
+  const colorCount = stops.length;
+  let classification = 'subtle';
+  if (colorCount > 4) classification = 'complex';
+  else if (colorCount > 2) classification = 'bold';
+  else if (colorCount === 2) classification = 'brand';
+
+  return { raw, type, direction, stops, classification };
+}

package/src/extractors/icons.js

@@ -0,0 +1,80 @@
+export function extractIcons(iconData) {
+  if (!iconData || !iconData.length) {
+    return { icons: [], sizeDistribution: { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 }, dominantStyle: 'none', colorPalette: [], count: 0 };
+  }
+
+  function classifySize(w, h) {
+    const s = Math.max(w || 0, h || 0);
+    if (s < 16) return 'xs';
+    if (s < 20) return 'sm';
+    if (s < 28) return 'md';
+    if (s < 40) return 'lg';
+    return 'xl';
+  }
+
+  function cleanSvg(svg) {
+    return svg.replace(/\s*(data-[a-z-]*|class|id)="[^"]*"/g, '').replace(/\s+/g, ' ').trim();
+  }
+  function simplify(svg) { return cleanSvg(svg); }
+
+  function detectStyle(svg) {
+    const hasStroke = /stroke="(?!none)[^"]+"|stroke-width="[^0"][^"]*"/.test(svg);
+    const hasFill = /fill="(?!none|transparent)[^"]+"|<(rect|circle|path)[^>]*(?!fill="none")/.test(svg);
+    const fillNone = /fill="none"/.test(svg);
+    if (hasStroke && (fillNone || !hasFill)) return 'outlined';
+    if (hasStroke && hasFill) return 'duo-tone';
+    return 'filled';
+  }
+
+  function extractColors(svg) {
+    const colors = new Set();
+    for (const m of svg.matchAll(/(?:fill|stroke)="([^"]+)"/g)) {
+      if (m[1] !== 'none' && m[1] !== 'transparent') colors.add(m[1]);
+    }
+    return [...colors];
+  }
+
+  // Deduplicate
+  const seen = new Map();
+  for (const icon of iconData) {
+    const key = simplify(icon.svg);
+    if (!seen.has(key)) seen.set(key, icon);
+  }
+
+  const sizeDistribution = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 };
+  const styleCounts = { outlined: 0, filled: 0, 'duo-tone': 0 };
+  const allColors = new Set();
+
+  const icons = [];
+  for (const icon of seen.values()) {
+    const cleaned = cleanSvg(icon.svg);
+    const sc = classifySize(icon.width, icon.height);
+    const style = detectStyle(icon.svg);
+    const colors = extractColors(icon.svg);
+    if (icon.fill && icon.fill !== 'none') colors.push(icon.fill);
+    if (icon.stroke && icon.stroke !== 'none') colors.push(icon.stroke);
+    const uniqueColors = [...new Set(colors)];
+
+    sizeDistribution[sc]++;
+    styleCounts[style]++;
+    uniqueColors.forEach(c => allColors.add(c));
+
+    icons.push({
+      svg: cleaned,
+      size: { width: icon.width, height: icon.height },
+      sizeClass: sc,
+      style,
+      colors: uniqueColors,
+    });
+  }
+
+  const dominantStyle = Object.entries(styleCounts).sort((a, b) => b[1] - a[1])[0][0];
+
+  return {
+    icons,
+    sizeDistribution,
+    dominantStyle,
+    colorPalette: [...allColors],
+    count: icons.length,
+  };
+}

package/src/extractors/images.js

@@ -0,0 +1,76 @@
+export function extractImageStyles(imageData) {
+  const ratioCount = new Map();
+  const shapeCount = new Map();
+  const filterCount = new Map();
+  const fitCount = new Map();
+  const patternCount = new Map();
+
+  const knownRatios = [
+    [1, 1, '1:1'], [4, 3, '4:3'], [3, 4, '3:4'], [16, 9, '16:9'], [9, 16, '9:16'],
+    [3, 2, '3:2'], [2, 3, '2:3'], [21, 9, '21:9'],
+  ];
+
+  function closestRatio(w, h) {
+    if (!w || !h) return null;
+    const r = w / h;
+    let best = null, bestDiff = 0.15;
+    for (const [rw, rh, label] of knownRatios) {
+      const diff = Math.abs(r - rw / rh);
+      if (diff < bestDiff) { best = label; bestDiff = diff; }
+    }
+    return best || `${Math.round(r * 100) / 100}:1`;
+  }
+
+  function classifyShape(borderRadius) {
+    const br = parseFloat(borderRadius) || 0;
+    if (br >= 50) return 'circular';
+    if (br >= 20) return 'pill';
+    if (br > 0) return 'rounded';
+    return 'square';
+  }
+
+  function classifyPattern(img, shape) {
+    const w = img.width || 0, h = img.height || 0;
+    const area = w * h;
+    if (shape === 'circular' && area <= 22500) return 'avatar';
+    if (w >= 600 && h >= 200 && img.objectFit === 'cover') return 'hero';
+    if (area <= 40000 && (shape === 'rounded' || shape === 'square')) return 'thumbnail';
+    if (w >= 400 && h >= 400 && shape === 'square') return 'gallery';
+    return 'general';
+  }
+
+  function incMap(map, key, extra) {
+    if (!map.has(key)) map.set(key, { count: 0, ...extra });
+    map.get(key).count++;
+  }
+
+  for (const img of imageData) {
+    const ratio = closestRatio(img.width, img.height);
+    if (ratio) incMap(ratioCount, ratio);
+
+    const shape = classifyShape(img.borderRadius);
+    incMap(shapeCount, shape, { borderRadius: img.borderRadius || '0' });
+
+    if (img.filter && img.filter !== 'none') {
+      for (const f of img.filter.match(/[a-z-]+\(/g) || [img.filter]) {
+        incMap(filterCount, f.replace('(', ''));
+      }
+    }
+
+    if (img.objectFit && img.objectFit !== 'initial') incMap(fitCount, img.objectFit);
+
+    const pattern = classifyPattern(img, shape);
+    incMap(patternCount, pattern, { styles: { objectFit: img.objectFit, borderRadius: img.borderRadius, shape } });
+  }
+
+  const toArray = (map, keyName) =>
+    Array.from(map.entries()).map(([k, v]) => ({ [keyName]: k, ...v })).sort((a, b) => b.count - a.count);
+
+  return {
+    patterns: toArray(patternCount, 'name'),
+    aspectRatios: toArray(ratioCount, 'ratio'),
+    shapes: toArray(shapeCount, 'shape'),
+    filters: toArray(filterCount, 'filter'),
+    objectFitUsage: toArray(fitCount, 'value'),
+  };
+}

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/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 };
 }