designlang 5.0.0 → 7.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,267 @@
+import { resolveRef } from './_token-ref.js';
+
+const HEADER_VERSION = '7.0.0';
+
+function* walkLeaves(node, prefix) {
+  if (node == null || typeof node !== 'object') return;
+  if ('$value' in node && '$type' in node) {
+    yield { path: prefix, token: node };
+    return;
+  }
+  for (const key of Object.keys(node)) {
+    yield* walkLeaves(node[key], prefix ? `${prefix}.${key}` : key);
+  }
+}
+
+// "semantic.color.action.primary" → "action-primary"
+// "primitive.spacing.s0" → "s0"
+function slugFromPath(path) {
+  const parts = path.split('.');
+  const trimmed = parts.slice(1);
+  let segs;
+  if (trimmed[0] === 'color' && trimmed.length >= 3) {
+    segs = trimmed.slice(1);
+  } else if (trimmed[0] === 'spacing' || trimmed[0] === 'radius') {
+    segs = trimmed.slice(1);
+  } else {
+    segs = trimmed;
+  }
+  return segs
+    .map((s) => s.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase())
+    .join('-')
+    .replace(/[^a-z0-9-]/g, '');
+}
+
+function titleFromPath(path) {
+  return slugFromPath(path)
+    .split('-')
+    .filter(Boolean)
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join(' ');
+}
+
+function collectWpColors(tokens) {
+  const entries = [];
+  const sem = tokens?.semantic?.color;
+  if (sem) {
+    for (const leaf of walkLeaves(sem, 'semantic.color')) {
+      if (leaf.token.$type !== 'color') continue;
+      const resolved = resolveRef(tokens, leaf.path);
+      if (typeof resolved !== 'string') continue;
+      entries.push({ slug: slugFromPath(leaf.path), color: resolved, name: titleFromPath(leaf.path) });
+    }
+  }
+  return entries;
+}
+
+function collectWpSpacing(tokens) {
+  const entries = [];
+  const spacing = tokens?.primitive?.spacing || {};
+  for (const key of Object.keys(spacing)) {
+    const tok = spacing[key];
+    if (!tok || tok.$type !== 'dimension') continue;
+    const resolved = resolveRef(tokens, `primitive.spacing.${key}`);
+    if (typeof resolved !== 'string') continue;
+    entries.push({ slug: key, size: resolved, name: key.toUpperCase() });
+  }
+  return entries;
+}
+
+function collectWpFontSizes(tokens, design) {
+  const entries = [];
+  const scale = design?.typography?.scale || [];
+  const labelFor = (s) => (s.tags && s.tags[0]) || `fs-${s.size}`;
+  for (const s of scale) {
+    const size = typeof s.size === 'number' ? `${s.size}px` : s.size;
+    const label = String(labelFor(s));
+    entries.push({ slug: label.toLowerCase(), size, name: label });
+  }
+  return entries;
+}
+
+function collectWpFontFamilies(tokens, design) {
+  const entries = [];
+  const fams = design?.typography?.families || [];
+  for (const f of fams) {
+    const name = typeof f === 'string' ? f : f?.name;
+    if (!name) continue;
+    const slug = name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
+    entries.push({ slug, fontFamily: `${name}, sans-serif`, name });
+  }
+  return entries;
+}
+
+function buildThemeJson(tokens, design) {
+  const palette = collectWpColors(tokens);
+  const spacingSizes = collectWpSpacing(tokens);
+  const fontSizes = collectWpFontSizes(tokens, design);
+  const fontFamilies = collectWpFontFamilies(tokens, design);
+
+  // Semantic surface/text for styles.color
+  const surfaceDefault = resolveRef(tokens, 'semantic.color.surface.default') || '#ffffff';
+  const textBody = resolveRef(tokens, 'semantic.color.text.body') || '#111111';
+
+  const theme = {
+    $schema: 'https://schemas.wp.org/trunk/theme.json',
+    version: 3,
+    settings: {
+      color: { palette },
+      typography: { fontSizes, fontFamilies },
+      spacing: { spacingSizes },
+    },
+    styles: {
+      color: {
+        background: `var(--wp--preset--color--surface-default, ${surfaceDefault})`,
+        text: `var(--wp--preset--color--text-body, ${textBody})`,
+      },
+    },
+  };
+  return JSON.stringify(theme, null, 2) + '\n';
+}
+
+function buildStyleCss(tokens, design) {
+  const source = tokens?.$metadata?.source || (design?.meta?.url ?? '');
+  const header = `/*
+Theme Name: designlang extracted theme
+Theme URI: https://github.com/Manavarya09/design-extract
+Description: Block theme generated from ${source} by designlang v${HEADER_VERSION}
+Version: 1.0.0
+Author: designlang
+License: MIT
+Text Domain: designlang-theme
+*/
+`;
+  const lines = [header, ':root {'];
+  for (const c of collectWpColors(tokens)) {
+    lines.push(`  --${c.slug}: ${c.color};`);
+  }
+  for (const s of collectWpSpacing(tokens)) {
+    lines.push(`  --spacing-${s.slug}: ${s.size};`);
+  }
+  lines.push('}');
+  return lines.join('\n') + '\n';
+}
+
+function buildFunctionsPhp() {
+  return `<?php
+if (!function_exists('designlang_theme_support')) {
+  function designlang_theme_support() {
+    add_theme_support('wp-block-styles');
+    add_theme_support('editor-styles');
+    add_theme_support('responsive-embeds');
+  }
+  add_action('after_setup_theme', 'designlang_theme_support');
+}
+`;
+}
+
+function buildIndexPhp() {
+  return `<?php get_header(); get_template_part('template-parts/content'); get_footer(); ?>
+`;
+}
+
+function buildIndexHtml() {
+  return `<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+<main class="wp-block-group"><!-- wp:post-content /--></main>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->
+`;
+}
+
+// Full block-theme skeleton. `design` is optional context for typography
+// (font families, type scale) that isn't in the DTCG token tree yet.
+export function formatWordPressTheme(tokens, design = {}) {
+  return {
+    'theme.json': buildThemeJson(tokens, design),
+    'style.css': buildStyleCss(tokens, design),
+    'functions.php': buildFunctionsPhp(),
+    'index.php': buildIndexPhp(),
+    'templates/index.html': buildIndexHtml(),
+  };
+}
+
+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

@@ -16,10 +16,23 @@ import { extractZIndex } from './extractors/zindex.js';
 import { extractIcons } from './extractors/icons.js';
 import { extractFonts } from './extractors/fonts.js';
 import { extractImageStyles } from './extractors/images.js';
+import { extractStackFingerprint } from './extractors/stack-fingerprint.js';
+import { extractCssHealth } from './extractors/css-health.js';
+import { remediateFailingPairs } from './extractors/a11y-remediation.js';
+import { extractSemanticRegions } from './extractors/semantic-regions.js';
+import { clusterComponents } from './extractors/component-clusters.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: {
@@ -29,46 +42,88 @@ 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),
-    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: [] },
+    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 || {},
+    stack: safeExtract(extractStackFingerprint, rawData.light.stack) || { framework: 'unknown', css: { layer: 'unknown', tailwind: null }, analytics: [], detectedFrom: { globalCount: 0, scriptCount: 0, classSampleSize: 0 } },
+    cssHealth: safeExtract(extractCssHealth, rawData.light.cssCoverage) || null,
+    regions: safeExtract(extractSemanticRegions, rawData.light.sections) || [],
+    componentClusters: safeExtract(clusterComponents, rawData.light.componentCandidates) || [],
     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);
+  // A11y remediation: derive failing pairs from accessibility extractor output
+  // and propose palette colors that pass the matching WCAG rule.
+  try {
+    const a11y = design.accessibility || {};
+    const palette = (design.colors?.all || []).map(c => c.hex).filter(Boolean);
+    const failingPairs = (a11y.pairs || [])
+      .filter(p => p.level === 'FAIL')
+      .map(p => ({
+        fg: p.foreground,
+        bg: p.background,
+        ratio: p.ratio,
+        rule: p.isLargeText ? 'AA-large' : 'AA-normal',
+      }));
+    design.accessibility = {
+      ...a11y,
+      failingPairs,
+      remediation: remediateFailingPairs(failingPairs, palette),
+    };
+  } catch { /* non-fatal */ }
+
+  design.score = safeExtract(scoreDesignSystem, design);
+  if (design.score === null) warnings.push('scoring failed');
 
   return design;
 }
 
 export { crawlPage } from './crawler.js';
 export { formatTokens } from './formatters/tokens.js';
+export { formatDtcgTokens } from './formatters/dtcg-tokens.js';
 export { formatMarkdown } from './formatters/markdown.js';
 export { formatTailwind } from './formatters/tailwind.js';
 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';
@@ -80,3 +135,4 @@ 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/mcp/resources.js

@@ -0,0 +1,64 @@
+// MCP resources builder. Pure/testable — returns { list, read } over the
+// loaded design + tokens. No transport concerns here.
+
+const URIS = {
+  'designlang://tokens/primitive': {
+    name: 'Primitive tokens',
+    description: 'DTCG primitive tier (raw colors, spacing, fonts, etc.)',
+  },
+  'designlang://tokens/semantic': {
+    name: 'Semantic tokens',
+    description: 'DTCG semantic tier (aliases like action.primary, surface.default)',
+  },
+  'designlang://regions': {
+    name: 'Semantic regions',
+    description: 'Detected page regions (hero, nav, footer, etc.) with bounds',
+  },
+  'designlang://components': {
+    name: 'Component clusters',
+    description: 'Clustered component instances with variant CSS',
+  },
+  'designlang://health': {
+    name: 'CSS health',
+    description: 'Coverage, dead-rule, and z-index-stack diagnostics',
+  },
+};
+
+function rpcError(code, message) {
+  const e = new Error(message);
+  e.code = code;
+  return e;
+}
+
+export function buildResources({ design, tokens }) {
+  function payloadFor(uri) {
+    switch (uri) {
+      case 'designlang://tokens/primitive': return tokens?.primitive ?? null;
+      case 'designlang://tokens/semantic':  return tokens?.semantic ?? null;
+      case 'designlang://regions':          return design?.regions ?? [];
+      case 'designlang://components':       return design?.componentClusters ?? [];
+      case 'designlang://health':           return design?.cssHealth ?? null;
+      default: return undefined;
+    }
+  }
+
+  return {
+    list() {
+      return Object.keys(URIS).map((uri) => ({
+        uri,
+        name: URIS[uri].name,
+        description: URIS[uri].description,
+        mimeType: 'application/json',
+      }));
+    },
+    read(uri) {
+      const payload = payloadFor(uri);
+      if (payload === undefined) throw rpcError(-32602, `Unknown resource URI: ${uri}`);
+      return {
+        uri,
+        mimeType: 'application/json',
+        text: JSON.stringify(payload),
+      };
+    },
+  };
+}