designlang 4.0.1 → 5.0.0

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/zindex.js

@@ -0,0 +1,65 @@
+const LAYER_DEFS = [
+  { name: 'modal', min: 1000, max: Infinity },
+  { name: 'dropdown', min: 100, max: 999 },
+  { name: 'sticky', min: 10, max: 99 },
+  { name: 'base', min: -Infinity, max: 9 },
+];
+
+function elLabel(el) {
+  const cls = el.classList?.length ? '.' + [...el.classList].join('.') : '';
+  return el.tag + cls;
+}
+
+export function extractZIndex(styles) {
+  // Filter and parse explicit z-index values
+  const entries = styles
+    .filter(el => el.zIndex !== 'auto')
+    .map(el => ({ value: parseInt(el.zIndex, 10), el }))
+    .filter(e => !isNaN(e.value));
+
+  // Group by z-index value
+  const byValue = new Map();
+  for (const { value, el } of entries) {
+    if (!byValue.has(value)) byValue.set(value, []);
+    byValue.get(value).push(el);
+  }
+
+  const allValues = [...byValue.keys()].sort((a, b) => a - b);
+
+  // Build scale: each unique value with count and representative elements
+  const scale = allValues.map(value => ({
+    value,
+    count: byValue.get(value).length,
+    elements: byValue.get(value).map(elLabel),
+  }));
+
+  // Build layers from predefined ranges
+  const layers = LAYER_DEFS
+    .map(def => {
+      const matching = allValues.filter(v => v >= def.min && v <= def.max);
+      if (!matching.length) return null;
+      const elements = matching.flatMap(v => byValue.get(v).map(elLabel));
+      return {
+        name: def.name,
+        range: [Math.min(...matching), Math.max(...matching)],
+        elements,
+      };
+    })
+    .filter(Boolean);
+
+  // Detect issues
+  const issues = [];
+  const highValues = allValues.filter(v => v > 9999);
+  if (highValues.length) {
+    issues.push({ type: 'excessive', message: `Very high z-index values: ${highValues.join(', ')}` });
+  }
+  if (allValues.length >= 5) {
+    const spread = allValues[allValues.length - 1] - allValues[0];
+    const density = allValues.length / (spread || 1);
+    if (density > 0.3) {
+      issues.push({ type: 'z-index-war', message: `${allValues.length} unique values in a narrow range (${allValues[0]}-${allValues[allValues.length - 1]})` });
+    }
+  }
+
+  return { layers, allValues, issues, scale };
+}

package/src/formatters/markdown.js

@@ -500,6 +500,104 @@ export function formatMarkdown(design) {
     }
   }
 
+  // ── Gradients ──
+  if (design.gradients && design.gradients.count > 0) {
+    lines.push('## Gradients');
+    lines.push('');
+    lines.push(`**${design.gradients.count} unique gradients** detected.`);
+    lines.push('');
+    lines.push('| Type | Direction | Stops | Classification |');
+    lines.push('|------|-----------|-------|----------------|');
+    for (const g of design.gradients.gradients.slice(0, 15)) {
+      lines.push(`| ${g.type} | ${g.direction || '—'} | ${g.stops.length} | ${g.classification} |`);
+    }
+    lines.push('');
+    lines.push('```css');
+    for (const g of design.gradients.gradients.slice(0, 5)) {
+      lines.push(`background: ${g.raw};`);
+    }
+    lines.push('```');
+    lines.push('');
+  }
+
+  // ── Z-Index Map ──
+  if (design.zIndex && design.zIndex.allValues.length > 0) {
+    lines.push('## Z-Index Map');
+    lines.push('');
+    lines.push(`**${design.zIndex.allValues.length} unique z-index values** across ${design.zIndex.layers.length} layers.`);
+    lines.push('');
+    if (design.zIndex.layers.length > 0) {
+      lines.push('| Layer | Range | Elements |');
+      lines.push('|-------|-------|----------|');
+      for (const l of design.zIndex.layers) {
+        const elNames = l.elements.slice(0, 3).join(', ');
+        lines.push(`| ${l.name} | ${l.range} | ${elNames} |`);
+      }
+      lines.push('');
+    }
+    if (design.zIndex.issues.length > 0) {
+      lines.push('**Issues:**');
+      for (const issue of design.zIndex.issues) {
+        lines.push(`- ${issue}`);
+      }
+      lines.push('');
+    }
+  }
+
+  // ── Icons ──
+  if (design.icons && design.icons.count > 0) {
+    lines.push('## SVG Icons');
+    lines.push('');
+    lines.push(`**${design.icons.count} unique SVG icons** detected. Dominant style: **${design.icons.dominantStyle || 'mixed'}**.`);
+    lines.push('');
+    const dist = design.icons.sizeDistribution;
+    if (dist) {
+      lines.push('| Size Class | Count |');
+      lines.push('|------------|-------|');
+      for (const [cls, count] of Object.entries(dist)) {
+        if (count > 0) lines.push(`| ${cls} | ${count} |`);
+      }
+      lines.push('');
+    }
+    if (design.icons.colorPalette.length > 0) {
+      lines.push(`**Icon colors:** ${design.icons.colorPalette.slice(0, 10).map(c => `\`${c}\``).join(', ')}`);
+      lines.push('');
+    }
+  }
+
+  // ── Font Files ──
+  if (design.fonts && design.fonts.fonts.length > 0) {
+    lines.push('## Font Files');
+    lines.push('');
+    lines.push('| Family | Source | Weights | Styles |');
+    lines.push('|--------|--------|---------|--------|');
+    for (const f of design.fonts.fonts) {
+      lines.push(`| ${f.family} | ${f.source} | ${f.weights.join(', ')} | ${f.styles.join(', ')} |`);
+    }
+    lines.push('');
+    if (design.fonts.googleFontsUrl) {
+      lines.push(`**Google Fonts URL:** \`${design.fonts.googleFontsUrl}\``);
+      lines.push('');
+    }
+  }
+
+  // ── Image Styles ──
+  if (design.images && design.images.patterns.length > 0) {
+    lines.push('## Image Style Patterns');
+    lines.push('');
+    lines.push('| Pattern | Count | Key Styles |');
+    lines.push('|---------|-------|------------|');
+    for (const p of design.images.patterns) {
+      const styles = Object.entries(p.styles || {}).map(([k, v]) => `${k}: ${v}`).join(', ');
+      lines.push(`| ${p.name} | ${p.count} | ${styles || '—'} |`);
+    }
+    lines.push('');
+    if (design.images.aspectRatios.length > 0) {
+      lines.push(`**Aspect ratios:** ${design.images.aspectRatios.slice(0, 8).map(a => `${a.ratio} (${a.count}x)`).join(', ')}`);
+      lines.push('');
+    }
+  }
+
   // ── Quick Start ──
   lines.push('## Quick Start');
   lines.push('');

package/src/index.js

@@ -11,6 +11,11 @@ import { extractComponents } from './extractors/components.js';
 import { extractAccessibility } from './extractors/accessibility.js';
 import { extractLayout } from './extractors/layout.js';
 import { scoreDesignSystem } from './extractors/scoring.js';
+import { extractGradients } from './extractors/gradients.js';
+import { extractZIndex } from './extractors/zindex.js';
+import { extractIcons } from './extractors/icons.js';
+import { extractFonts } from './extractors/fonts.js';
+import { extractImageStyles } from './extractors/images.js';
 
 export async function extractDesignLanguage(url, options = {}) {
   const rawData = await crawlPage(url, options);
@@ -35,8 +40,13 @@ export async function extractDesignLanguage(url, options = {}) {
     components: extractComponents(styles),
     accessibility: extractAccessibility(styles),
     layout: extractLayout(styles),
+    gradients: extractGradients(styles),
+    zIndex: extractZIndex(styles),
+    icons: rawData.light.icons ? extractIcons(rawData.light.icons) : { icons: [], count: 0 },
+    fonts: rawData.light.fontData ? extractFonts(rawData.light.fontData) : { fonts: [], systemFonts: [] },
+    images: rawData.light.images ? extractImageStyles(rawData.light.images) : { patterns: [], aspectRatios: [] },
     componentScreenshots: rawData.componentScreenshots || {},
-    score: null, // populated below
+    score: null,
   };
 
   if (rawData.dark) {
@@ -68,3 +78,5 @@ export { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from './multi
 export { generateClone } from './clone.js';
 export { scoreDesignSystem } from './extractors/scoring.js';
 export { watchSite } from './watch.js';
+export { diffDarkMode } from './darkdiff.js';
+export { applyDesign } from './apply.js';

package/website/app/api/extract/route.js

@@ -0,0 +1,85 @@
+import { extractDesignLanguage } from '../../../../src/index.js';
+import { formatMarkdown } from '../../../../src/formatters/markdown.js';
+import { formatTokens } from '../../../../src/formatters/tokens.js';
+import { formatTailwind } from '../../../../src/formatters/tailwind.js';
+import { formatCssVars } from '../../../../src/formatters/css-vars.js';
+import { formatPreview } from '../../../../src/formatters/preview.js';
+import { formatFigma } from '../../../../src/formatters/figma.js';
+import { formatReactTheme, formatShadcnTheme } from '../../../../src/formatters/theme.js';
+import { nameFromUrl } from '../../../../src/utils.js';
+
+export const maxDuration = 60;
+export const dynamic = 'force-dynamic';
+
+async function getBrowserOptions() {
+  // On Vercel/Lambda, use @sparticuz/chromium; locally, use playwright's bundled browser
+  if (process.env.VERCEL || process.env.AWS_LAMBDA_FUNCTION_NAME) {
+    const chromium = (await import('@sparticuz/chromium')).default;
+    return {
+      executablePath: await chromium.executablePath(),
+      browserArgs: chromium.args,
+    };
+  }
+  return {};
+}
+
+export async function POST(request) {
+  try {
+    const { url } = await request.json();
+
+    if (!url) {
+      return Response.json({ error: 'URL is required' }, { status: 400 });
+    }
+
+    let targetUrl = url;
+    if (!targetUrl.startsWith('http')) targetUrl = `https://${targetUrl}`;
+
+    // Validate URL
+    try {
+      new URL(targetUrl);
+    } catch {
+      return Response.json({ error: 'Invalid URL' }, { status: 400 });
+    }
+
+    const browserOpts = await getBrowserOptions();
+    const design = await extractDesignLanguage(targetUrl, browserOpts);
+
+    const prefix = nameFromUrl(targetUrl);
+
+    const files = {
+      [`${prefix}-design-language.md`]: formatMarkdown(design),
+      [`${prefix}-design-tokens.json`]: formatTokens(design),
+      [`${prefix}-tailwind.config.js`]: formatTailwind(design),
+      [`${prefix}-variables.css`]: formatCssVars(design),
+      [`${prefix}-preview.html`]: formatPreview(design),
+      [`${prefix}-figma-variables.json`]: formatFigma(design),
+      [`${prefix}-theme.js`]: formatReactTheme(design),
+      [`${prefix}-shadcn-theme.css`]: formatShadcnTheme(design),
+    };
+
+    const summary = {
+      url: design.meta.url,
+      title: design.meta.title,
+      colors: design.colors.all.length,
+      colorList: design.colors.all.slice(0, 20).map(c => c.hex),
+      fonts: design.typography.families.map(f => f.name).join(', ') || 'none detected',
+      spacingCount: design.spacing.scale.length,
+      spacingBase: design.spacing.base,
+      shadowCount: design.shadows.values.length,
+      radiiCount: design.borders.radii.length,
+      componentCount: Object.keys(design.components).length,
+      cssVarCount: Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0),
+      a11yScore: design.accessibility?.score ?? null,
+      a11yFailCount: design.accessibility?.failCount ?? 0,
+      score: design.score,
+    };
+
+    return Response.json({ summary, files });
+  } catch (err) {
+    console.error('Extraction failed:', err);
+    return Response.json(
+      { error: err.message || 'Extraction failed' },
+      { status: 500 }
+    );
+  }
+}

package/website/app/components/Extractor.js

@@ -0,0 +1,184 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function Extractor() {
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState(null);
+
+  const handleExtract = async (e) => {
+    e.preventDefault();
+    if (!url.trim()) return;
+
+    setLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const res = await fetch('/api/extract', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: url.trim() }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Extraction failed');
+      setResult(data);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDownload = async () => {
+    if (!result) return;
+
+    const JSZip = (await import('jszip')).default;
+    const zip = new JSZip();
+
+    for (const [filename, content] of Object.entries(result.files)) {
+      zip.file(filename, content);
+    }
+
+    const blob = await zip.generateAsync({ type: 'blob' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `designlang-${new Date().toISOString().slice(0, 10)}.zip`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  };
+
+  return (
+    <div className="extractor">
+      <form onSubmit={handleExtract} className="extractor-form">
+        <input
+          type="text"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          placeholder="https://vercel.com"
+          className="extractor-input"
+          disabled={loading}
+        />
+        <button type="submit" className="extractor-btn" disabled={loading || !url.trim()}>
+          {loading ? 'Extracting...' : 'Extract'}
+        </button>
+      </form>
+
+      {loading && (
+        <div className="extractor-loading">
+          <div className="extractor-spinner" />
+          <p>Launching headless browser, crawling DOM, extracting styles...</p>
+          <p className="extractor-loading-sub">This takes 15–30 seconds</p>
+        </div>
+      )}
+
+      {error && (
+        <div className="extractor-error">
+          <p>{error}</p>
+          <p className="extractor-error-hint">
+            Server too slow? Run it locally — it hits different:<br />
+            <code>npx designlang {url || 'https://example.com'}</code>
+          </p>
+        </div>
+      )}
+
+      {result && (
+        <div className="extractor-results">
+          <div className="extractor-results-header">
+            <h3>{result.summary.title || result.summary.url}</h3>
+            <button onClick={handleDownload} className="extractor-download">
+              Download ZIP ({Object.keys(result.files).length} files)
+            </button>
+          </div>
+
+          <div className="extractor-stats-grid">
+            <div className="extractor-stat">
+              <div className="extractor-stat-value">{result.summary.colors}</div>
+              <div className="extractor-stat-label">Colors</div>
+            </div>
+            <div className="extractor-stat">
+              <div className="extractor-stat-value">{result.summary.spacingCount}</div>
+              <div className="extractor-stat-label">Spacing Values</div>
+            </div>
+            <div className="extractor-stat">
+              <div className="extractor-stat-value">{result.summary.shadowCount}</div>
+              <div className="extractor-stat-label">Shadows</div>
+            </div>
+            <div className="extractor-stat">
+              <div className="extractor-stat-value">{result.summary.componentCount}</div>
+              <div className="extractor-stat-label">Components</div>
+            </div>
+            <div className="extractor-stat">
+              <div className="extractor-stat-value">{result.summary.cssVarCount}</div>
+              <div className="extractor-stat-label">CSS Variables</div>
+            </div>
+            <div className="extractor-stat">
+              <div className="extractor-stat-value">
+                {result.summary.score ? `${result.summary.score.overall}` : '—'}
+              </div>
+              <div className="extractor-stat-label">
+                Design Score {result.summary.score ? `(${result.summary.score.grade})` : ''}
+              </div>
+            </div>
+          </div>
+
+          {/* Color swatches */}
+          {result.summary.colorList && result.summary.colorList.length > 0 && (
+            <div className="extractor-section">
+              <div className="extractor-section-title">Colors</div>
+              <div className="extractor-colors">
+                {result.summary.colorList.map((hex, i) => (
+                  <div key={i} className="extractor-swatch" title={hex}>
+                    <div className="extractor-swatch-color" style={{ backgroundColor: hex }} />
+                    <div className="extractor-swatch-hex">{hex}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Fonts */}
+          {result.summary.fonts && result.summary.fonts !== 'none detected' && (
+            <div className="extractor-section">
+              <div className="extractor-section-title">Typography</div>
+              <div className="extractor-fonts">{result.summary.fonts}</div>
+            </div>
+          )}
+
+          {/* Accessibility */}
+          {result.summary.a11yScore !== null && (
+            <div className="extractor-section">
+              <div className="extractor-section-title">Accessibility</div>
+              <div className="extractor-a11y">
+                <span className={`extractor-a11y-score ${result.summary.a11yScore >= 80 ? 'good' : result.summary.a11yScore >= 50 ? 'ok' : 'bad'}`}>
+                  {result.summary.a11yScore}% WCAG
+                </span>
+                {result.summary.a11yFailCount > 0 && (
+                  <span className="extractor-a11y-fails">{result.summary.a11yFailCount} failing contrast pairs</span>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Files list */}
+          <div className="extractor-section">
+            <div className="extractor-section-title">Output Files</div>
+            <div className="extractor-files">
+              {Object.entries(result.files).map(([name, content]) => (
+                <div key={name} className="extractor-file">
+                  <span className="extractor-file-name">{name}</span>
+                  <span className="extractor-file-size">
+                    {content.length > 1024 ? `${(content.length / 1024).toFixed(1)}KB` : `${content.length}B`}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}