designlang 4.0.1 → 5.0.0

package/bin/design-extract.js

@@ -21,6 +21,8 @@ import { syncDesign } from '../src/sync.js';
 import { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from '../src/multibrand.js';
 import { generateClone } from '../src/clone.js';
 import { watchSite } from '../src/watch.js';
+import { diffDarkMode } from '../src/darkdiff.js';
+import { applyDesign } from '../src/apply.js';
 import { nameFromUrl } from '../src/utils.js';
 
 const program = new Command();
@@ -28,7 +30,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('4.0.1');
+  .version('5.0.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -45,6 +47,8 @@ program
   .option('--responsive', 'capture design at multiple breakpoints')
   .option('--interactions', 'capture hover/focus/active states')
   .option('--full', 'enable all extra captures (screenshots, responsive, interactions)')
+  .option('--cookie <cookies...>', 'cookies for authenticated pages (name=value)')
+  .option('--header <headers...>', 'custom headers (name:value)')
   .option('--no-history', 'skip saving to history')
   .option('--verbose', 'show detailed progress')
   .action(async (url, opts) => {
@@ -61,6 +65,16 @@ program
 
     try {
       spinner.text = `Crawling${opts.depth > 0 ? ` (depth: ${opts.depth})` : ''}...`;
+      // Parse auth options
+      const cookies = opts.cookie || [];
+      const headers = {};
+      if (opts.header) {
+        for (const h of opts.header) {
+          const [name, ...rest] = h.split(':');
+          if (name && rest.length) headers[name.trim()] = rest.join(':').trim();
+        }
+      }
+
       const design = await extractDesignLanguage(url, {
         width: opts.width,
         height: parseInt(opts.height) || 800,
@@ -69,6 +83,8 @@ program
         depth: opts.depth,
         screenshots: opts.screenshots || opts.full,
         outDir,
+        cookies: cookies.length > 0 ? cookies : undefined,
+        headers: Object.keys(headers).length > 0 ? headers : undefined,
       });
 
       // Responsive capture
@@ -163,6 +179,25 @@ program
         console.log(`  ${chalk.gray('Design Score:')} ${gradeColor(`${s.overall}/100 (${s.grade})`)}${s.issues.length > 0 ? ` — ${s.issues.length} issues` : ''}`);
       }
 
+      // New v5 extractors
+      if (design.gradients && design.gradients.count > 0) {
+        console.log(`  ${chalk.gray('Gradients:')} ${design.gradients.count} unique gradients`);
+      }
+      if (design.zIndex && design.zIndex.allValues.length > 0) {
+        console.log(`  ${chalk.gray('Z-Index:')} ${design.zIndex.allValues.length} layers${design.zIndex.issues.length > 0 ? ` (${design.zIndex.issues.length} issues)` : ''}`);
+      }
+      if (design.icons && design.icons.count > 0) {
+        console.log(`  ${chalk.gray('Icons:')} ${design.icons.count} SVG icons (${design.icons.dominantStyle || 'mixed'})`);
+      }
+      if (design.fonts && design.fonts.fonts.length > 0) {
+        const sources = design.fonts.fonts.map(f => f.source).filter((v, i, a) => a.indexOf(v) === i);
+        console.log(`  ${chalk.gray('Font Files:')} ${design.fonts.fonts.length} fonts (${sources.join(', ')})`);
+      }
+      if (design.images && design.images.patterns.length > 0) {
+        const total = design.images.patterns.reduce((s, p) => s + p.count, 0);
+        console.log(`  ${chalk.gray('Images:')} ${total} images, ${design.images.patterns.length} style patterns`);
+      }
+
       // Accessibility summary
       if (design.accessibility) {
         const a = design.accessibility;
@@ -486,4 +521,44 @@ program
     }
   });
 
+// ── Apply command ──────────────────────────────────────────
+program
+  .command('apply <url>')
+  .description('Extract and apply design directly to your project')
+  .option('-d, --dir <path>', 'project directory', '.')
+  .option('--framework <type>', 'force framework (tailwind, shadcn, css)')
+  .option('--cookie <cookies...>', 'cookies for authenticated pages')
+  .option('--header <headers...>', 'custom headers')
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+
+    console.log('');
+    console.log(chalk.bold('  designlang apply'));
+    console.log(chalk.gray(`  ${url} → ${resolve(opts.dir)}`));
+    console.log('');
+
+    const spinner = ora('Extracting design...').start();
+
+    try {
+      const result = await applyDesign(url, {
+        dir: resolve(opts.dir),
+        framework: opts.framework,
+        cookies: opts.cookie,
+        headers: opts.header ? Object.fromEntries(opts.header.map(h => { const [k, ...v] = h.split(':'); return [k.trim(), v.join(':').trim()]; })) : undefined,
+      });
+
+      spinner.succeed(`Applied ${result.framework} design!`);
+      console.log('');
+      for (const f of result.applied) {
+        console.log(`  ${chalk.green('✓')} ${chalk.cyan(f.file)} — ${f.type}`);
+      }
+      console.log('');
+
+    } catch (err) {
+      spinner.fail('Apply failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
   "type": "module",
   "bin": {

package/src/apply.js

@@ -0,0 +1,65 @@
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { extractDesignLanguage } from './index.js';
+import { formatTailwind } from './formatters/tailwind.js';
+import { formatCssVars } from './formatters/css-vars.js';
+import { formatShadcnTheme } from './formatters/theme.js';
+
+export async function applyDesign(url, options = {}) {
+  const { dir = '.', framework } = options;
+  const design = await extractDesignLanguage(url, options);
+  const detected = framework || detectFramework(dir);
+  const applied = [];
+
+  if (detected === 'tailwind' || detected === 'auto') {
+    const twPath = findFile(dir, ['tailwind.config.js', 'tailwind.config.ts', 'tailwind.config.mjs']);
+    if (twPath) {
+      writeFileSync(twPath, formatTailwind(design), 'utf-8');
+      applied.push({ file: twPath, type: 'tailwind' });
+    }
+  }
+
+  if (detected === 'shadcn' || detected === 'auto') {
+    const globalsPath = findFile(dir, [
+      'app/globals.css', 'src/app/globals.css', 'styles/globals.css',
+      'src/styles/globals.css', 'src/index.css', 'app/global.css',
+    ]);
+    if (globalsPath) {
+      const existing = readFileSync(globalsPath, 'utf-8');
+      const shadcnVars = formatShadcnTheme(design);
+      // Replace existing @layer base block or append
+      const layerRegex = /@layer\s+base\s*\{[\s\S]*?\n\}/;
+      const updated = layerRegex.test(existing)
+        ? existing.replace(layerRegex, shadcnVars)
+        : existing + '\n\n' + shadcnVars;
+      writeFileSync(globalsPath, updated, 'utf-8');
+      applied.push({ file: globalsPath, type: 'shadcn' });
+    }
+  }
+
+  if (detected === 'css' || detected === 'auto') {
+    const cssVarsContent = formatCssVars(design);
+    const cssPath = join(dir, 'design-variables.css');
+    writeFileSync(cssPath, cssVarsContent, 'utf-8');
+    applied.push({ file: cssPath, type: 'css-variables' });
+  }
+
+  return { design, applied, framework: detected };
+}
+
+function detectFramework(dir) {
+  if (findFile(dir, ['tailwind.config.js', 'tailwind.config.ts', 'tailwind.config.mjs'])) {
+    // Check for shadcn
+    if (findFile(dir, ['components.json'])) return 'shadcn';
+    return 'tailwind';
+  }
+  return 'auto';
+}
+
+function findFile(dir, candidates) {
+  for (const c of candidates) {
+    const p = join(dir, c);
+    if (existsSync(p)) return p;
+  }
+  return null;
+}

package/src/crawler.js

@@ -5,13 +5,29 @@ import { join } from 'path';
 const MAX_ELEMENTS = 5000;
 
 export async function crawlPage(url, options = {}) {
-  const { width = 1280, height = 800, wait = 0, dark = false, depth = 0, screenshots = false, outDir = '' } = options;
+  const { width = 1280, height = 800, wait = 0, dark = false, depth = 0, screenshots = false, outDir = '', executablePath, browserArgs, cookies, headers } = options;
 
-  const browser = await chromium.launch({ headless: true });
+  const browser = await chromium.launch({
+    headless: true,
+    ...(executablePath && { executablePath }),
+    ...(browserArgs && { args: browserArgs }),
+  });
   const context = await browser.newContext({
     viewport: { width, height },
     colorScheme: 'light',
+    ...(headers && { extraHTTPHeaders: headers }),
   });
+
+  // Set cookies if provided
+  if (cookies && cookies.length > 0) {
+    await context.addCookies(cookies.map(c => {
+      if (typeof c === 'string') {
+        const [name, ...rest] = c.split('=');
+        return { name, value: rest.join('='), url };
+      }
+      return c;
+    }));
+  }
   const page = await context.newPage();
 
   await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
@@ -273,6 +289,69 @@ async function extractPageData(page) {
       }
     } catch { /* no access */ }
 
+    // SVG icons
+    results.icons = [];
+    for (const svg of document.querySelectorAll('svg')) {
+      const rect = svg.getBoundingClientRect();
+      if (rect.width > 4 && rect.width < 200 && rect.height > 4 && rect.height < 200) {
+        results.icons.push({
+          svg: svg.outerHTML,
+          width: rect.width,
+          height: rect.height,
+          viewBox: svg.getAttribute('viewBox') || '',
+          classList: Array.from(svg.classList).join(' '),
+          fill: svg.getAttribute('fill') || getComputedStyle(svg).fill || '',
+          stroke: svg.getAttribute('stroke') || getComputedStyle(svg).stroke || '',
+        });
+      }
+    }
+
+    // Font data
+    results.fontData = { fontFaces: [], googleFontsLinks: [], documentFonts: [] };
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSFontFaceRule) {
+              results.fontData.fontFaces.push({
+                family: rule.style.getPropertyValue('font-family').replace(/['"]/g, ''),
+                style: rule.style.getPropertyValue('font-style') || 'normal',
+                weight: rule.style.getPropertyValue('font-weight') || '400',
+                src: rule.style.getPropertyValue('src') || '',
+              });
+            }
+          }
+        } catch { /* cross-origin */ }
+      }
+    } catch {}
+    for (const link of document.querySelectorAll('link[href*="fonts.googleapis.com"]')) {
+      results.fontData.googleFontsLinks.push(link.href);
+    }
+    for (const font of document.fonts) {
+      results.fontData.documentFonts.push({ family: font.family.replace(/['"]/g, ''), style: font.style, weight: font.weight, status: font.status });
+    }
+
+    // Image data
+    results.images = [];
+    for (const img of document.querySelectorAll('img, picture img, [role="img"]')) {
+      const rect = img.getBoundingClientRect();
+      if (rect.width < 5 || rect.height < 5) continue;
+      const cs = getComputedStyle(img);
+      results.images.push({
+        tag: img.tagName.toLowerCase(),
+        src: img.src || '',
+        width: rect.width,
+        height: rect.height,
+        objectFit: cs.objectFit,
+        objectPosition: cs.objectPosition,
+        borderRadius: cs.borderRadius,
+        filter: cs.filter,
+        opacity: cs.opacity,
+        aspectRatio: cs.aspectRatio,
+        classList: Array.from(img.classList).join(' '),
+      });
+    }
+
     return results;
   }, MAX_ELEMENTS);
 }

package/src/darkdiff.js

@@ -0,0 +1,65 @@
+export function diffDarkMode(lightDesign, darkDesign) {
+  const changes = [];
+
+  // Color changes
+  const lightColors = new Set(lightDesign.colors.all.map(c => c.hex));
+  const darkColors = new Set(darkDesign.colors.all.map(c => c.hex));
+
+  const addedInDark = darkDesign.colors.all.filter(c => !lightColors.has(c.hex));
+  const removedInDark = lightDesign.colors.all.filter(c => !darkColors.has(c.hex));
+
+  if (addedInDark.length > 0 || removedInDark.length > 0) {
+    changes.push({
+      category: 'colors',
+      light: lightDesign.colors.all.length,
+      dark: darkDesign.colors.all.length,
+      added: addedInDark.map(c => c.hex),
+      removed: removedInDark.map(c => c.hex),
+    });
+  }
+
+  // CSS variable changes
+  const lightVars = flattenVars(lightDesign.variables);
+  const darkVars = flattenVars(darkDesign.variables);
+  const varChanges = [];
+
+  for (const [key, lightVal] of Object.entries(lightVars)) {
+    const darkVal = darkVars[key];
+    if (darkVal && darkVal !== lightVal) {
+      varChanges.push({ name: key, light: lightVal, dark: darkVal });
+    }
+  }
+  const newDarkVars = Object.entries(darkVars)
+    .filter(([key]) => !lightVars[key])
+    .map(([name, dark]) => ({ name, light: null, dark }));
+
+  if (varChanges.length > 0 || newDarkVars.length > 0) {
+    changes.push({
+      category: 'cssVariables',
+      changed: varChanges,
+      newInDark: newDarkVars,
+    });
+  }
+
+  return {
+    hasChanges: changes.length > 0,
+    changes,
+    summary: {
+      colorsChanged: (addedInDark.length + removedInDark.length) || 0,
+      variablesChanged: varChanges.length,
+      newDarkVariables: newDarkVars.length,
+    },
+  };
+}
+
+function flattenVars(variables) {
+  const flat = {};
+  for (const [, group] of Object.entries(variables)) {
+    if (typeof group === 'object') {
+      for (const [key, val] of Object.entries(group)) {
+        flat[key] = val;
+      }
+    }
+  }
+  return flat;
+}

package/src/extractors/animations.js

@@ -2,6 +2,8 @@ export function extractAnimations(computedStyles, keyframes) {
   const transitionSet = new Set();
   const easingSet = new Set();
   const durationSet = new Set();
+  const animationNames = new Set();
+  const transitionProperties = {};
 
   for (const el of computedStyles) {
     if (el.transition && el.transition !== 'all 0s ease 0s' && el.transition !== 'none') {
@@ -13,16 +15,50 @@ export function extractAnimations(computedStyles, keyframes) {
 
       const eMatch = el.transition.match(/(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\([^)]+\))/g);
       if (eMatch) eMatch.forEach(e => easingSet.add(e));
+
+      // Extract which properties are animated
+      const parts = el.transition.split(',').map(s => s.trim());
+      for (const part of parts) {
+        const prop = part.split(/\s+/)[0];
+        if (prop && prop !== 'all') {
+          transitionProperties[prop] = (transitionProperties[prop] || 0) + 1;
+        }
+      }
+    }
+
+    // Capture animation usage
+    if (el.animation && el.animation !== 'none 0s ease 0s 1 normal none running' && el.animation !== 'none') {
+      const nameMatch = el.animation.match(/^([\w-]+)/);
+      if (nameMatch && nameMatch[1] !== 'none') animationNames.add(nameMatch[1]);
     }
   }
 
+  // Enhanced keyframes with timing and properties changed
+  const enhancedKeyframes = keyframes.map(kf => {
+    const propertiesAnimated = new Set();
+    for (const step of kf.steps) {
+      const props = step.style.split(';').map(s => s.split(':')[0].trim()).filter(Boolean);
+      props.forEach(p => propertiesAnimated.add(p));
+    }
+    return {
+      name: kf.name,
+      steps: kf.steps,
+      propertiesAnimated: [...propertiesAnimated],
+      isUsed: animationNames.has(kf.name),
+    };
+  });
+
+  // Sort transition properties by usage
+  const sortedProps = Object.entries(transitionProperties)
+    .sort((a, b) => b[1] - a[1])
+    .map(([prop, count]) => ({ property: prop, count }));
+
   return {
     transitions: [...transitionSet],
     easings: [...easingSet],
     durations: [...durationSet],
-    keyframes: keyframes.map(kf => ({
-      name: kf.name,
-      steps: kf.steps,
-    })),
+    keyframes: enhancedKeyframes,
+    transitionProperties: sortedProps,
+    animationNames: [...animationNames],
   };
 }

package/src/extractors/components.js

@@ -131,9 +131,32 @@ export function extractComponents(computedStyles) {
     };
   }
 
+  // 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,80 @@
+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 (const raw of rawGradients) {
+      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+deg|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();
+    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 };
+}