designlang 1.0.0

package/src/extractors/borders.js

@@ -0,0 +1,31 @@
+import { parseCSSValue, clusterValues } from '../utils.js';
+
+export function extractBorders(computedStyles) {
+  const radiiSet = new Map(); // value -> count
+
+  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 sorted = [...radiiSet.keys()].sort((a, b) => a - b);
+  const clustered = clusterValues(sorted, 2);
+
+  const radii = clustered.map(v => {
+    let label;
+    if (v <= 2) label = 'xs';
+    else if (v <= 5) label = 'sm';
+    else if (v <= 10) label = 'md';
+    else if (v <= 16) label = 'lg';
+    else if (v <= 24) label = 'xl';
+    else label = 'full';
+    return { value: v, label, count: radiiSet.get(v) || 0 };
+  });
+
+  return { radii };
+}

package/src/extractors/breakpoints.js

@@ -0,0 +1,33 @@
+export function extractBreakpoints(mediaQueries) {
+  const bpSet = new Map(); // px value -> type
+
+  for (const query of mediaQueries) {
+    const minMatch = query.match(/min-width:\s*([\d.]+)(px|em|rem)/);
+    if (minMatch) {
+      let px = parseFloat(minMatch[1]);
+      if (minMatch[2] === 'em' || minMatch[2] === 'rem') px *= 16;
+      bpSet.set(Math.round(px), 'min-width');
+    }
+    const maxMatch = query.match(/max-width:\s*([\d.]+)(px|em|rem)/);
+    if (maxMatch) {
+      let px = parseFloat(maxMatch[1]);
+      if (maxMatch[2] === 'em' || maxMatch[2] === 'rem') px *= 16;
+      bpSet.set(Math.round(px), 'max-width');
+    }
+  }
+
+  const sorted = [...bpSet.entries()].sort((a, b) => a[0] - b[0]);
+
+  const labels = { 320: 'xs', 480: 'sm', 640: 'sm', 768: 'md', 1024: 'lg', 1280: 'xl', 1536: '2xl' };
+
+  return sorted.map(([value, type]) => {
+    // Find closest standard label
+    let label = `${value}px`;
+    let minDist = Infinity;
+    for (const [std, name] of Object.entries(labels)) {
+      const dist = Math.abs(value - parseInt(std));
+      if (dist < minDist && dist <= 64) { minDist = dist; label = name; }
+    }
+    return { value, label, type };
+  });
+}

package/src/extractors/colors.js

@@ -0,0 +1,87 @@
+import { parseColor, rgbToHex, rgbToHsl, clusterColors, isSaturated } from '../utils.js';
+
+export function extractColors(computedStyles) {
+  const colorMap = new Map(); // hex -> { hex, parsed, count, contexts: Set }
+
+  function addColor(value, context) {
+    const parsed = parseColor(value);
+    if (!parsed || parsed.a === 0) return;
+    const hex = rgbToHex(parsed);
+    if (!colorMap.has(hex)) {
+      colorMap.set(hex, { hex, parsed, count: 0, contexts: new Set() });
+    }
+    const entry = colorMap.get(hex);
+    entry.count++;
+    entry.contexts.add(context);
+  }
+
+  const gradients = new Set();
+
+  for (const el of computedStyles) {
+    addColor(el.color, 'text');
+    addColor(el.backgroundColor, 'background');
+    addColor(el.borderColor, 'border');
+
+    if (el.backgroundImage && el.backgroundImage !== 'none' && el.backgroundImage.includes('gradient')) {
+      gradients.add(el.backgroundImage);
+    }
+  }
+
+  const allColors = Array.from(colorMap.values());
+  const clusters = clusterColors(allColors, 15);
+
+  // Classify roles
+  const neutrals = [];
+  const chromatic = [];
+
+  for (const cluster of clusters) {
+    if (isSaturated(cluster.representative)) {
+      chromatic.push(cluster);
+    } else {
+      neutrals.push(cluster);
+    }
+  }
+
+  // Background colors: found on large-area elements
+  const bgColors = [];
+  for (const el of computedStyles) {
+    if (el.area > 50000) {
+      const parsed = parseColor(el.backgroundColor);
+      if (parsed && parsed.a > 0) bgColors.push(rgbToHex(parsed));
+    }
+  }
+
+  // Text colors: from color property
+  const textColors = [];
+  for (const el of computedStyles) {
+    const parsed = parseColor(el.color);
+    if (parsed && parsed.a > 0) {
+      const hex = rgbToHex(parsed);
+      if (!textColors.includes(hex)) textColors.push(hex);
+    }
+  }
+
+  const primary = chromatic[0] || null;
+  const secondary = chromatic[1] || null;
+  const accent = chromatic.find(c => {
+    const pct = c.count / allColors.reduce((s, a) => s + a.count, 0);
+    return pct < 0.05 && c.members.some(m => m.contexts.has('background'));
+  }) || chromatic[2] || null;
+
+  return {
+    primary: primary ? { hex: primary.hex, rgb: primary.representative, hsl: rgbToHsl(primary.representative), count: primary.count } : null,
+    secondary: secondary ? { hex: secondary.hex, rgb: secondary.representative, hsl: rgbToHsl(secondary.representative), count: secondary.count } : null,
+    accent: accent ? { hex: accent.hex, rgb: accent.representative, hsl: rgbToHsl(accent.representative), count: accent.count } : null,
+    neutrals: neutrals.map(c => ({ hex: c.hex, rgb: c.representative, hsl: rgbToHsl(c.representative), count: c.count })),
+    backgrounds: [...new Set(bgColors)],
+    text: textColors.slice(0, 10),
+    gradients: [...gradients],
+    all: clusters.map(c => ({
+      hex: c.hex,
+      rgb: c.representative,
+      hsl: rgbToHsl(c.representative),
+      count: c.count,
+      contexts: [...new Set(c.members.flatMap(m => [...m.contexts]))],
+    })),
+  };
+}

package/src/extractors/components.js

@@ -0,0 +1,66 @@
+export function extractComponents(computedStyles) {
+  const components = {};
+
+  // Buttons
+  const buttons = computedStyles.filter(el =>
+    el.tag === 'button' || el.role === 'button' ||
+    (el.tag === 'a' && /btn|button/i.test(el.classList))
+  );
+  if (buttons.length > 0) {
+    components.buttons = {
+      count: buttons.length,
+      baseStyle: mostCommonStyle(buttons, ['backgroundColor', 'color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderRadius']),
+    };
+  }
+
+  // Cards
+  const cards = computedStyles.filter(el =>
+    /card/i.test(el.classList) ||
+    (el.tag === 'div' && el.boxShadow !== 'none' && el.borderRadius !== '0px' && el.backgroundColor !== 'rgba(0, 0, 0, 0)')
+  );
+  if (cards.length > 0) {
+    components.cards = {
+      count: cards.length,
+      baseStyle: mostCommonStyle(cards, ['backgroundColor', 'borderRadius', 'boxShadow', 'paddingTop', 'paddingRight']),
+    };
+  }
+
+  // Inputs
+  const inputs = computedStyles.filter(el =>
+    ['input', 'textarea', 'select'].includes(el.tag)
+  );
+  if (inputs.length > 0) {
+    components.inputs = {
+      count: inputs.length,
+      baseStyle: mostCommonStyle(inputs, ['backgroundColor', 'color', 'borderColor', 'borderRadius', 'fontSize', 'paddingTop', 'paddingRight']),
+    };
+  }
+
+  // Links
+  const links = computedStyles.filter(el => el.tag === 'a');
+  if (links.length > 0) {
+    components.links = {
+      count: links.length,
+      baseStyle: mostCommonStyle(links, ['color', 'fontSize', 'fontWeight']),
+    };
+  }
+
+  return components;
+}
+
+function mostCommonStyle(elements, properties) {
+  const style = {};
+  for (const prop of properties) {
+    const counts = new Map();
+    for (const el of elements) {
+      const val = el[prop];
+      if (val && val !== 'none' && val !== 'auto' && val !== 'normal' && val !== 'rgba(0, 0, 0, 0)') {
+        counts.set(val, (counts.get(val) || 0) + 1);
+      }
+    }
+    if (counts.size > 0) {
+      style[prop] = [...counts.entries()].sort((a, b) => b[1] - a[1])[0][0];
+    }
+  }
+  return style;
+}

package/src/extractors/shadows.js

@@ -0,0 +1,27 @@
+export function extractShadows(computedStyles) {
+  const shadowSet = new Set();
+
+  for (const el of computedStyles) {
+    if (el.boxShadow && el.boxShadow !== 'none') {
+      shadowSet.add(el.boxShadow);
+    }
+  }
+
+  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 };
+}

package/src/extractors/spacing.js

@@ -0,0 +1,37 @@
+import { parseCSSValue, clusterValues, detectScale } from '../utils.js';
+
+export function extractSpacing(computedStyles) {
+  const allValues = new Set();
+
+  for (const el of computedStyles) {
+    for (const prop of ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'gap']) {
+      const val = parseCSSValue(el[prop]);
+      if (val && val.value > 0 && val.value < 500) {
+        allValues.add(Math.round(val.value));
+      }
+    }
+  }
+
+  const sorted = [...allValues].sort((a, b) => a - b);
+  const clustered = clusterValues(sorted, 2);
+  const { base, scale } = detectScale(clustered);
+
+  // Build named tokens
+  const tokens = {};
+  if (base) {
+    for (const v of scale) {
+      const step = v / base;
+      if (Number.isInteger(step)) {
+        tokens[String(step)] = `${v}px`;
+      } else {
+        tokens[`${v}px`] = `${v}px`;
+      }
+    }
+  } else {
+    for (let i = 0; i < scale.length; i++) {
+      tokens[String(i)] = `${scale[i]}px`;
+    }
+  }
+
+  return { base, scale, tokens, raw: sorted };
+}

package/src/extractors/typography.js

@@ -0,0 +1,72 @@
+import { parseCSSValue } from '../utils.js';
+
+export function extractTypography(computedStyles) {
+  const familyCount = new Map();
+  const sizeEntries = [];
+  const weightCount = new Map();
+
+  for (const el of computedStyles) {
+    // Font families
+    const family = el.fontFamily?.replace(/["']/g, '').split(',')[0]?.trim();
+    if (family) familyCount.set(family, (familyCount.get(family) || 0) + 1);
+
+    // Font sizes
+    const sizeVal = parseCSSValue(el.fontSize);
+    if (sizeVal) {
+      sizeEntries.push({
+        size: sizeVal.value,
+        weight: el.fontWeight,
+        lineHeight: el.lineHeight,
+        letterSpacing: el.letterSpacing,
+        tag: el.tag,
+        family,
+      });
+    }
+
+    // Weights
+    if (el.fontWeight) weightCount.set(el.fontWeight, (weightCount.get(el.fontWeight) || 0) + 1);
+  }
+
+  // Unique font families sorted by usage
+  const families = [...familyCount.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([name, count]) => {
+      const usedOn = computedStyles
+        .filter(el => el.fontFamily?.includes(name))
+        .map(el => el.tag);
+      const headingUse = usedOn.some(t => /^h[1-6]$/.test(t));
+      const bodyUse = usedOn.some(t => ['p', 'span', 'li', 'div'].includes(t));
+      return { name, count, usage: headingUse && bodyUse ? 'all' : headingUse ? 'headings' : 'body' };
+    });
+
+  // Build type scale from unique sizes
+  const sizeMap = new Map();
+  for (const entry of sizeEntries) {
+    const key = entry.size;
+    if (!sizeMap.has(key)) {
+      sizeMap.set(key, { size: entry.size, weight: entry.weight, lineHeight: entry.lineHeight, letterSpacing: entry.letterSpacing, tags: new Set(), count: 0 });
+    }
+    const s = sizeMap.get(key);
+    s.tags.add(entry.tag);
+    s.count++;
+  }
+
+  const scale = [...sizeMap.values()]
+    .sort((a, b) => b.size - a.size)
+    .map(s => ({ ...s, tags: [...s.tags] }));
+
+  // Identify heading sizes (from h1-h6 tags)
+  const headings = scale.filter(s => s.tags.some(t => /^h[1-6]$/.test(t)));
+
+  // Body text: most common size on p/span/li
+  const bodyEntries = sizeEntries.filter(e => ['p', 'span', 'li'].includes(e.tag));
+  const bodySizeCount = new Map();
+  for (const e of bodyEntries) bodySizeCount.set(e.size, (bodySizeCount.get(e.size) || 0) + 1);
+  const bodySize = [...bodySizeCount.entries()].sort((a, b) => b[1] - a[1])[0];
+  const body = bodySize ? scale.find(s => s.size === bodySize[0]) : null;
+
+  // Weights
+  const weights = [...weightCount.entries()].sort((a, b) => b[1] - a[1]).map(([w, count]) => ({ weight: w, count }));
+
+  return { families, scale, headings, body, weights };
+}

package/src/extractors/variables.js

@@ -0,0 +1,22 @@
+export function extractVariables(cssVariables) {
+  const categories = { colors: {}, spacing: {}, typography: {}, shadows: {}, radii: {}, other: {} };
+
+  for (const [name, value] of Object.entries(cssVariables)) {
+    const lower = name.toLowerCase();
+    if (/color|bg|foreground|primary|secondary|accent|muted|border|ring|destructive|card|popover|chart/.test(lower)) {
+      categories.colors[name] = value;
+    } else if (/spacing|gap|padding|margin|space|size/.test(lower)) {
+      categories.spacing[name] = value;
+    } else if (/font|text|line-height|letter|tracking|leading/.test(lower)) {
+      categories.typography[name] = value;
+    } else if (/shadow/.test(lower)) {
+      categories.shadows[name] = value;
+    } else if (/radius|rounded/.test(lower)) {
+      categories.radii[name] = value;
+    } else {
+      categories.other[name] = value;
+    }
+  }
+
+  return categories;
+}

package/src/formatters/css-vars.js

@@ -0,0 +1,103 @@
+import { pxToRem } from '../utils.js';
+
+export function formatCssVars(design) {
+  const lines = [':root {'];
+
+  // Colors
+  lines.push('  /* Colors — Primary */');
+  if (design.colors.primary) lines.push(`  --color-primary: ${design.colors.primary.hex};`);
+  if (design.colors.secondary) lines.push(`  --color-secondary: ${design.colors.secondary.hex};`);
+  if (design.colors.accent) lines.push(`  --color-accent: ${design.colors.accent.hex};`);
+  lines.push('');
+
+  if (design.colors.neutrals.length > 0) {
+    lines.push('  /* Colors — Neutrals */');
+    for (let i = 0; i < design.colors.neutrals.length && i < 10; i++) {
+      lines.push(`  --color-neutral-${i * 100 || 50}: ${design.colors.neutrals[i].hex};`);
+    }
+    lines.push('');
+  }
+
+  if (design.colors.backgrounds.length > 0) {
+    lines.push('  /* Colors — Backgrounds */');
+    for (let i = 0; i < design.colors.backgrounds.length; i++) {
+      lines.push(`  --color-bg${i > 0 ? `-${i}` : ''}: ${design.colors.backgrounds[i]};`);
+    }
+    lines.push('');
+  }
+
+  if (design.colors.text.length > 0) {
+    lines.push('  /* Colors — Text */');
+    for (let i = 0; i < design.colors.text.length && i < 5; i++) {
+      lines.push(`  --color-text${i > 0 ? `-${i}` : ''}: ${design.colors.text[i]};`);
+    }
+    lines.push('');
+  }
+
+  // Typography
+  if (design.typography.families.length > 0) {
+    lines.push('  /* Typography — Families */');
+    for (let i = 0; i < design.typography.families.length; i++) {
+      const f = design.typography.families[i];
+      let key;
+      if (f.usage === 'headings') key = 'heading';
+      else if (f.usage === 'body') key = 'body';
+      else if (i === 0) key = 'sans';
+      else if (f.name.toLowerCase().includes('mono')) key = 'mono';
+      else key = i === 1 ? 'heading' : `font-${i}`;
+      lines.push(`  --font-${key}: '${f.name}', sans-serif;`);
+    }
+    lines.push('');
+  }
+
+  if (design.typography.scale.length > 0) {
+    lines.push('  /* Typography — Scale */');
+    for (const s of design.typography.scale.slice(0, 12)) {
+      lines.push(`  --font-size-${s.size}: ${s.size}px;`);
+    }
+    lines.push('');
+  }
+
+  // Spacing
+  if (design.spacing.scale.length > 0) {
+    lines.push('  /* Spacing */');
+    for (const v of design.spacing.scale.slice(0, 20)) {
+      lines.push(`  --spacing-${v}: ${v}px;`);
+    }
+    lines.push('');
+  }
+
+  // Border radius
+  if (design.borders.radii.length > 0) {
+    lines.push('  /* Border Radius */');
+    for (const r of design.borders.radii) {
+      lines.push(`  --radius-${r.label}: ${r.value}px;`);
+    }
+    lines.push('');
+  }
+
+  // Shadows
+  if (design.shadows.values.length > 0) {
+    lines.push('  /* Box Shadows */');
+    for (const s of design.shadows.values) {
+      lines.push(`  --shadow-${s.label}: ${s.raw};`);
+    }
+    lines.push('');
+  }
+
+  // Site's own CSS variables
+  const siteVars = Object.entries(design.variables).filter(([, v]) => Object.keys(v).length > 0);
+  if (siteVars.length > 0) {
+    lines.push('  /* Original Site Variables */');
+    for (const [category, vars] of siteVars) {
+      lines.push(`  /* — ${category} — */`);
+      for (const [name, value] of Object.entries(vars)) {
+        lines.push(`  ${name}: ${value};`);
+      }
+    }
+    lines.push('');
+  }
+
+  lines.push('}');
+  return lines.join('\n');
+}