designlang 4.0.1 → 6.0.0

package/src/formatters/theme.js

@@ -46,15 +46,149 @@ export function formatReactTheme(design) {
     theme.shadows[s.label] = s.raw;
   }
 
+  // Component variant tokens for interactive states
+  theme.states = {
+    hover: { opacity: 0.08 },
+    focus: { opacity: 0.12 },
+    active: { opacity: 0.16 },
+    disabled: { opacity: 0.38 },
+  };
+
+  // Build MUI v5 theme
+  const muiTheme = buildMuiTheme(design);
+
+  // Build TypeScript type definition comment
+  const tsType = buildTypeComment(theme);
+
   return `// React Theme — extracted from ${design.meta.url}
 // Compatible with: Chakra UI, Stitches, Vanilla Extract, or any CSS-in-JS
 
+${tsType}
+
 export const theme = ${JSON.stringify(theme, null, 2)};
 
+// MUI v5 theme
+export const muiTheme = ${JSON.stringify(muiTheme, null, 2)};
+
 export default theme;
 `;
 }
 
+function buildTypeComment(theme) {
+  const colorKeys = Object.keys(theme.colors || {}).map(k => `    ${k}: string;`).join('\n');
+  const fontKeys = Object.keys(theme.fonts || {}).map(k => `    ${k}: string;`).join('\n');
+  const sizeKeys = Object.keys(theme.fontSizes || {}).map(k => `    '${k}': string;`).join('\n');
+  const spaceKeys = Object.keys(theme.space || {}).map(k => `    '${k}': string;`).join('\n');
+  const radiiKeys = Object.keys(theme.radii || {}).map(k => `    ${k}: string;`).join('\n');
+  const shadowKeys = Object.keys(theme.shadows || {}).map(k => `    ${k}: string;`).join('\n');
+
+  return `/**
+ * TypeScript type definition for this theme:
+ *
+ * interface Theme {
+ *   colors: {
+${colorKeys}
+ *   };
+ *   fonts: {
+${fontKeys}
+ *   };
+ *   fontSizes: {
+${sizeKeys}
+ *   };
+ *   space: {
+${spaceKeys}
+ *   };
+ *   radii: {
+${radiiKeys}
+ *   };
+ *   shadows: {
+${shadowKeys}
+ *   };
+ *   states: {
+ *     hover: { opacity: number };
+ *     focus: { opacity: number };
+ *     active: { opacity: number };
+ *     disabled: { opacity: number };
+ *   };
+ * }
+ */`;
+}
+
+function buildMuiTheme(design) {
+  const { colors, typography, borders, shadows } = design;
+  const mui = { palette: {}, typography: {}, shape: {}, shadows: [] };
+
+  // Palette
+  if (colors.primary) {
+    mui.palette.primary = { main: colors.primary.hex };
+    const pHsl = toHslParts(colors.primary.hex);
+    if (pHsl) {
+      mui.palette.primary.light = `hsl(${pHsl.h}, ${pHsl.s}%, ${Math.min(pHsl.l + 15, 95)}%)`;
+      mui.palette.primary.dark = `hsl(${pHsl.h}, ${pHsl.s}%, ${Math.max(pHsl.l - 15, 10)}%)`;
+    }
+  }
+  if (colors.secondary) {
+    mui.palette.secondary = { main: colors.secondary.hex };
+    const sHsl = toHslParts(colors.secondary.hex);
+    if (sHsl) {
+      mui.palette.secondary.light = `hsl(${sHsl.h}, ${sHsl.s}%, ${Math.min(sHsl.l + 15, 95)}%)`;
+      mui.palette.secondary.dark = `hsl(${sHsl.h}, ${sHsl.s}%, ${Math.max(sHsl.l - 15, 10)}%)`;
+    }
+  }
+  mui.palette.background = {};
+  if (colors.backgrounds.length > 0) mui.palette.background.default = colors.backgrounds[0];
+  if (colors.backgrounds.length > 1) mui.palette.background.paper = colors.backgrounds[1];
+  else if (colors.backgrounds.length > 0) mui.palette.background.paper = colors.backgrounds[0];
+  mui.palette.text = {};
+  if (colors.text.length > 0) mui.palette.text.primary = colors.text[0];
+  if (colors.text.length > 1) mui.palette.text.secondary = colors.text[1];
+
+  // Typography
+  const bodyFont = typography.families.find(f => f.usage === 'body');
+  const headingFont = typography.families.find(f => f.usage === 'headings');
+  mui.typography.fontFamily = bodyFont ? `'${bodyFont.name}', sans-serif` : undefined;
+  for (const s of typography.scale.slice(0, 6)) {
+    const level = s.size >= 32 ? 'h1' : s.size >= 24 ? 'h2' : s.size >= 20 ? 'h3' : s.size >= 16 ? 'body1' : 'body2';
+    mui.typography[level] = {
+      fontSize: `${s.size}px`,
+      fontWeight: s.weight || 400,
+      lineHeight: s.lineHeight || 1.5,
+    };
+    if (headingFont && level.startsWith('h')) {
+      mui.typography[level].fontFamily = `'${headingFont.name}', sans-serif`;
+    }
+  }
+
+  // Shape
+  if (borders.radii.length > 0) {
+    const md = borders.radii.find(r => r.label === 'md') || borders.radii[0];
+    mui.shape.borderRadius = md.value;
+  }
+
+  // Shadows (first few)
+  mui.shadows = shadows.values.slice(0, 5).map(s => s.raw);
+
+  return mui;
+}
+
+function toHslParts(hex) {
+  if (!hex) return null;
+  const h = hex.replace('#', '');
+  const r = parseInt(h.slice(0, 2), 16) / 255;
+  const g = parseInt(h.slice(2, 4), 16) / 255;
+  const b = parseInt(h.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let hue;
+  if (max === r) hue = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) hue = ((b - r) / d + 2) / 6;
+  else hue = ((r - g) / d + 4) / 6;
+  return { h: Math.round(hue * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+
 export function formatShadcnTheme(design) {
   const { colors, borders } = design;
   const lines = ['@layer base {', '  :root {'];

package/src/formatters/vue-theme.js

@@ -0,0 +1,44 @@
+import { rgbToHsl } from '../utils.js';
+
+export function formatVueTheme(design) {
+  const { colors, typography, spacing, borders, shadows } = design;
+  const lines = [];
+
+  lines.push('// Vuetify 3 theme configuration');
+  lines.push('// Generated by designlang');
+  lines.push('');
+  lines.push('export const designlangTheme = {');
+  lines.push('  dark: false,');
+  lines.push('  colors: {');
+  if (colors.primary) lines.push(`    primary: '${colors.primary.hex}',`);
+  if (colors.secondary) lines.push(`    secondary: '${colors.secondary.hex}',`);
+  if (colors.accent) lines.push(`    accent: '${colors.accent.hex}',`);
+  if (colors.backgrounds.length > 0) lines.push(`    background: '${colors.backgrounds[0]}',`);
+  if (colors.text.length > 0) lines.push(`    'on-background': '${colors.text[0]}',`);
+  lines.push('  },');
+  lines.push('};');
+  lines.push('');
+
+  // CSS variables for non-Vuetify usage
+  lines.push('// CSS custom properties');
+  lines.push('export const cssVariables = `');
+  lines.push(':root {');
+  if (colors.primary) lines.push(`  --dl-color-primary: ${colors.primary.hex};`);
+  if (colors.secondary) lines.push(`  --dl-color-secondary: ${colors.secondary.hex};`);
+  for (const [i, n] of colors.neutrals.slice(0, 8).entries()) {
+    lines.push(`  --dl-color-neutral-${i + 1}: ${n.hex};`);
+  }
+  for (const [i, val] of spacing.scale.slice(0, 12).entries()) {
+    lines.push(`  --dl-spacing-${i + 1}: ${val}px;`);
+  }
+  for (const r of borders.radii) {
+    lines.push(`  --dl-radius-${r.label}: ${r.value}px;`);
+  }
+  if (typography.families.length > 0) {
+    lines.push(`  --dl-font-primary: '${typography.families[0].name}', sans-serif;`);
+  }
+  lines.push('}');
+  lines.push('`;');
+
+  return lines.join('\n');
+}

package/src/formatters/wordpress.js

@@ -0,0 +1,84 @@
+export function formatWordPress(design) {
+  const { colors, typography, spacing } = design;
+
+  const theme = {
+    $schema: "https://schemas.wp.org/trunk/theme.json",
+    version: 3,
+    settings: {
+      color: {
+        palette: [],
+        gradients: [],
+      },
+      typography: {
+        fontFamilies: [],
+        fontSizes: [],
+      },
+      spacing: {
+        spacingSizes: [],
+      },
+      layout: {
+        contentSize: "1200px",
+        wideSize: "1400px",
+      },
+    },
+    styles: {
+      color: {},
+      typography: {},
+      spacing: {},
+    },
+  };
+
+  // Colors
+  if (colors.primary) theme.settings.color.palette.push({ slug: 'primary', color: colors.primary.hex, name: 'Primary' });
+  if (colors.secondary) theme.settings.color.palette.push({ slug: 'secondary', color: colors.secondary.hex, name: 'Secondary' });
+  if (colors.accent) theme.settings.color.palette.push({ slug: 'accent', color: colors.accent.hex, name: 'Accent' });
+  for (let i = 0; i < Math.min(colors.neutrals.length, 5); i++) {
+    theme.settings.color.palette.push({ slug: `neutral-${i + 1}`, color: colors.neutrals[i].hex, name: `Neutral ${i + 1}` });
+  }
+  for (const bg of colors.backgrounds.slice(0, 3)) {
+    theme.settings.color.palette.push({ slug: `bg-${bg.replace('#', '')}`, color: bg, name: `Background ${bg}` });
+  }
+
+  // Typography
+  for (const fam of typography.families) {
+    theme.settings.typography.fontFamilies.push({ fontFamily: fam.name, slug: fam.name.toLowerCase().replace(/\s+/g, '-'), name: fam.name });
+  }
+  for (const s of typography.scale.slice(0, 8)) {
+    theme.settings.typography.fontSizes.push({ size: `${s.size}px`, slug: `size-${s.size}`, name: `${s.size}px` });
+  }
+
+  // Spacing
+  for (let i = 0; i < Math.min(spacing.scale.length, 8); i++) {
+    const val = spacing.scale[i];
+    theme.settings.spacing.spacingSizes.push({ size: `${val}px`, slug: `spacing-${val}`, name: `${val}px` });
+  }
+
+  // Layout from extracted containers
+  if (design.layout && design.layout.containerWidths.length > 0) {
+    theme.settings.layout.contentSize = design.layout.containerWidths[0].maxWidth;
+  }
+
+  // Body styles
+  if (typography.body) {
+    theme.styles.typography.fontSize = `${typography.body.size}px`;
+    theme.styles.typography.lineHeight = typography.body.lineHeight;
+  }
+  if (typography.families.length > 0) {
+    theme.styles.typography.fontFamily = typography.families[0].name;
+  }
+  if (colors.backgrounds.length > 0) {
+    theme.styles.color.background = colors.backgrounds[0];
+  }
+  if (colors.text.length > 0) {
+    theme.styles.color.text = colors.text[0];
+  }
+
+  // Gradients from design
+  if (design.gradients && design.gradients.gradients) {
+    for (const g of design.gradients.gradients.slice(0, 5)) {
+      theme.settings.color.gradients.push({ slug: `gradient-${theme.settings.color.gradients.length + 1}`, gradient: g.raw, name: `Gradient ${theme.settings.color.gradients.length + 1}` });
+    }
+  }
+
+  return JSON.stringify(theme, null, 2);
+}

package/src/history.js

@@ -2,8 +2,9 @@
 
 import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
 import { join } from 'path';
+import { homedir } from 'os';
 
-const HISTORY_DIR = join(process.env.HOME || process.env.USERPROFILE || '.', '.designlang');
+const HISTORY_DIR = join(homedir(), '.designlang');
 
 function ensureDir() {
   mkdirSync(HISTORY_DIR, { recursive: true });
@@ -50,6 +51,12 @@ export function saveSnapshot(design) {
   };
 
   history.push(snapshot);
+
+  // Prune oldest entries if history exceeds 50 snapshots
+  if (history.length > 50) {
+    history = history.slice(history.length - 50);
+  }
+
   writeFileSync(file, JSON.stringify(history, null, 2), 'utf-8');
   return { hostname, snapshotCount: history.length, file };
 }

package/src/index.js

@@ -11,10 +11,23 @@ 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';
+
+function safeExtract(fn, ...args) {
+  try { return fn(...args); } catch { return null; }
+}
 
 export async function extractDesignLanguage(url, options = {}) {
-  const rawData = await crawlPage(url, options);
+  const rawData = await crawlPage(url, {
+    ...options,
+    ignore: options.ignore,
+  });
   const styles = rawData.light.computedStyles;
+  const warnings = [];
 
   const design = {
     meta: {
@@ -24,29 +37,48 @@ export async function extractDesignLanguage(url, options = {}) {
       elementCount: styles.length,
       pagesAnalyzed: rawData.pagesAnalyzed || 1,
     },
-    colors: extractColors(styles),
-    typography: extractTypography(styles),
-    spacing: extractSpacing(styles),
-    shadows: extractShadows(styles),
-    borders: extractBorders(styles),
-    variables: extractVariables(rawData.light.cssVariables),
-    breakpoints: extractBreakpoints(rawData.light.mediaQueries),
-    animations: extractAnimations(styles, rawData.light.keyframes),
-    components: extractComponents(styles),
-    accessibility: extractAccessibility(styles),
-    layout: extractLayout(styles),
+    colors: safeExtract(extractColors, styles) || { primary: null, secondary: null, accent: null, neutrals: [], backgrounds: [], text: [], gradients: [], all: [] },
+    typography: safeExtract(extractTypography, styles) || { families: [], scale: [] },
+    spacing: safeExtract(extractSpacing, styles) || { scale: [], base: null },
+    shadows: safeExtract(extractShadows, styles) || { values: [] },
+    borders: safeExtract(extractBorders, styles) || { radii: [] },
+    variables: safeExtract(extractVariables, rawData.light.cssVariables) || {},
+    breakpoints: safeExtract(extractBreakpoints, rawData.light.mediaQueries) || [],
+    animations: safeExtract(extractAnimations, styles, rawData.light.keyframes) || { transitions: [], keyframes: [] },
+    components: safeExtract(extractComponents, styles) || {},
+    accessibility: safeExtract(extractAccessibility, styles) || { score: 0, failCount: 0 },
+    layout: safeExtract(extractLayout, styles) || { gridCount: 0, flexCount: 0 },
+    gradients: safeExtract(extractGradients, styles) || { count: 0 },
+    zIndex: safeExtract(extractZIndex, styles) || { allValues: [], issues: [] },
+    icons: rawData.light.icons ? (safeExtract(extractIcons, rawData.light.icons) || { icons: [], count: 0 }) : { icons: [], count: 0 },
+    fonts: rawData.light.fontData ? (safeExtract(extractFonts, rawData.light.fontData) || { fonts: [], systemFonts: [] }) : { fonts: [], systemFonts: [] },
+    images: rawData.light.images ? (safeExtract(extractImageStyles, rawData.light.images) || { patterns: [], aspectRatios: [] }) : { patterns: [], aspectRatios: [] },
     componentScreenshots: rawData.componentScreenshots || {},
-    score: null, // populated below
+    score: null,
   };
 
+  // Track which extractors failed
+  const extractorChecks = [
+    ['colors', design.colors], ['typography', design.typography], ['spacing', design.spacing],
+    ['shadows', design.shadows], ['borders', design.borders], ['variables', design.variables],
+    ['breakpoints', design.breakpoints], ['animations', design.animations], ['components', design.components],
+    ['accessibility', design.accessibility], ['layout', design.layout], ['gradients', design.gradients],
+    ['zIndex', design.zIndex],
+  ];
+  for (const [name, result] of extractorChecks) {
+    if (result === null) warnings.push(`${name} extractor failed`);
+  }
+  design.warnings = warnings;
+
   if (rawData.dark) {
     design.darkMode = {
-      colors: extractColors(rawData.dark.computedStyles),
-      variables: extractVariables(rawData.dark.cssVariables),
+      colors: safeExtract(extractColors, rawData.dark.computedStyles) || { primary: null, secondary: null, accent: null, neutrals: [], backgrounds: [], text: [], gradients: [], all: [] },
+      variables: safeExtract(extractVariables, rawData.dark.cssVariables) || {},
     };
   }
 
-  design.score = scoreDesignSystem(design);
+  design.score = safeExtract(scoreDesignSystem, design);
+  if (design.score === null) warnings.push('scoring failed');
 
   return design;
 }
@@ -59,6 +91,9 @@ export { formatCssVars } from './formatters/css-vars.js';
 export { formatPreview } from './formatters/preview.js';
 export { formatFigma } from './formatters/figma.js';
 export { formatReactTheme, formatShadcnTheme } from './formatters/theme.js';
+export { formatWordPress } from './formatters/wordpress.js';
+export { formatVueTheme } from './formatters/vue-theme.js';
+export { formatSvelteTheme } from './formatters/svelte-theme.js';
 export { diffDesigns, formatDiffMarkdown, formatDiffHtml } from './diff.js';
 export { saveSnapshot, getHistory, formatHistoryMarkdown } from './history.js';
 export { captureResponsive } from './extractors/responsive.js';
@@ -68,3 +103,6 @@ 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';
+export { loadConfig, mergeConfig } from './config.js';

package/src/utils.js

@@ -20,6 +20,29 @@ const NAMED_COLORS = {
   maroon: { r: 128, g: 0, b: 0, a: 1 },
 };
 
+function oklabToRgb(L, a, b) {
+  // OKLab -> linear sRGB
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  let r = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  let g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  let bl = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
+  // Clamp to [0,255]
+  const clamp = v => Math.round(Math.max(0, Math.min(1, v)) * 255);
+  return { r: clamp(r), g: clamp(g), b: clamp(bl) };
+}
+
+function oklchToRgb(L, C, H) {
+  const hRad = H * Math.PI / 180;
+  const a = C * Math.cos(hRad);
+  const b = C * Math.sin(hRad);
+  return oklabToRgb(L, a, b);
+}
+
 export function parseColor(str) {
   if (!str || str === 'none' || str === 'currentcolor' || str === 'inherit' || str === 'initial') return null;
   str = str.trim().toLowerCase();
@@ -58,6 +81,51 @@ export function parseColor(str) {
     return { ...rgb, a: hslMatch[4] !== undefined ? +hslMatch[4] : 1 };
   }
 
+  // hsl modern: hsl(210 50% 40%) or hsl(210 50% 40% / 0.5)
+  const hslModern = str.match(/hsla?\(\s*([\d.]+)\s+([\d.]+)%\s+([\d.]+)%\s*(?:\/\s*([\d.]+%?))?\s*\)/);
+  if (hslModern) {
+    const rgb = hslToRgb(+hslModern[1], +hslModern[2], +hslModern[3]);
+    let a = 1;
+    if (hslModern[4] !== undefined) {
+      a = hslModern[4].endsWith('%') ? parseFloat(hslModern[4]) / 100 : +hslModern[4];
+    }
+    return { ...rgb, a };
+  }
+
+  // oklch(L C H) or oklch(L C H / a)
+  const oklchMatch = str.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+%?))?\s*\)/);
+  if (oklchMatch) {
+    const rgb = oklchToRgb(+oklchMatch[1], +oklchMatch[2], +oklchMatch[3]);
+    let a = 1;
+    if (oklchMatch[4] !== undefined) {
+      a = oklchMatch[4].endsWith('%') ? parseFloat(oklchMatch[4]) / 100 : +oklchMatch[4];
+    }
+    return { ...rgb, a };
+  }
+
+  // oklab(L a b) or oklab(L a b / alpha)
+  const oklabMatch = str.match(/oklab\(\s*([\d.e+-]+)\s+([\d.e+-]+)\s+([\d.e+-]+)\s*(?:\/\s*([\d.]+%?))?\s*\)/);
+  if (oklabMatch) {
+    const rgb = oklabToRgb(+oklabMatch[1], +oklabMatch[2], +oklabMatch[3]);
+    let a = 1;
+    if (oklabMatch[4] !== undefined) {
+      a = oklabMatch[4].endsWith('%') ? parseFloat(oklabMatch[4]) / 100 : +oklabMatch[4];
+    }
+    return { ...rgb, a };
+  }
+
+  // color-mix(in srgb, color1 pct, color2)
+  const mixMatch = str.match(/color-mix\(\s*in\s+\w+\s*,\s*(.+?)\s*,\s*(.+?)\s*\)/);
+  if (mixMatch) {
+    const part1 = mixMatch[1].trim().replace(/\s+\d+%$/, '');
+    const part2 = mixMatch[2].trim().replace(/\s+\d+%$/, '');
+    const c1 = parseColor(part1);
+    const c2 = parseColor(part2);
+    if (c1 && c2) {
+      return { r: Math.round((c1.r + c2.r) / 2), g: Math.round((c1.g + c2.g) / 2), b: Math.round((c1.b + c2.b) / 2), a: (c1.a + c2.a) / 2 };
+    }
+  }
+
   return null;
 }
 

package/tests/cli.test.js

@@ -0,0 +1,34 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { execFileSync } from 'node:child_process';
+import { resolve } from 'node:path';
+
+const CLI_PATH = resolve(import.meta.dirname, '..', 'bin', 'design-extract.js');
+
+describe('CLI', () => {
+  it('shows help with --help', () => {
+    const output = execFileSync('node', [CLI_PATH, '--help'], { encoding: 'utf-8' });
+    assert.ok(output.includes('designlang'));
+    assert.ok(output.includes('Extract'));
+  });
+
+  it('shows version with --version', () => {
+    const output = execFileSync('node', [CLI_PATH, '--version'], { encoding: 'utf-8' });
+    assert.ok(output.trim().match(/^\d+\.\d+\.\d+$/));
+  });
+
+  it('shows version number 6.0.0', () => {
+    const output = execFileSync('node', [CLI_PATH, '--version'], { encoding: 'utf-8' });
+    assert.equal(output.trim(), '6.0.0');
+  });
+
+  it('exits with error when no arguments provided', () => {
+    try {
+      execFileSync('node', [CLI_PATH], { encoding: 'utf-8', stdio: 'pipe' });
+      assert.fail('Should have thrown');
+    } catch (err) {
+      // Commander exits with code 1 when required argument is missing
+      assert.ok(err.status !== 0);
+    }
+  });
+});