designlang 4.0.1 → 6.0.0

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

@@ -1,76 +1,95 @@
 // Figma Variables JSON format (compatible with Figma Variables import)
 export function formatFigma(design) {
-  const variables = [];
+  const collections = [];
 
-  // Colors
+  // --- Brand collection (colors with light/dark modes) ---
+  const brandVars = [];
+  const hasDarkMode = !!design.darkMode;
+  const brandModes = hasDarkMode ? ['light', 'dark'] : ['light'];
+
+  // Brand colors
   if (design.colors.primary) {
-    variables.push(colorVar('color/primary', design.colors.primary.hex));
+    const v = { name: 'color/primary', type: 'COLOR', values: { light: colorVal(design.colors.primary.hex) } };
+    if (hasDarkMode && design.darkMode.colors.primary) v.values.dark = colorVal(design.darkMode.colors.primary.hex);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
   if (design.colors.secondary) {
-    variables.push(colorVar('color/secondary', design.colors.secondary.hex));
+    const v = { name: 'color/secondary', type: 'COLOR', values: { light: colorVal(design.colors.secondary.hex) } };
+    if (hasDarkMode && design.darkMode.colors.secondary) v.values.dark = colorVal(design.darkMode.colors.secondary.hex);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
   if (design.colors.accent) {
-    variables.push(colorVar('color/accent', design.colors.accent.hex));
+    const v = { name: 'color/accent', type: 'COLOR', values: { light: colorVal(design.colors.accent.hex) } };
+    if (hasDarkMode && design.darkMode.colors.accent) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
+
+  // Neutrals
   for (let i = 0; i < design.colors.neutrals.length && i < 10; i++) {
-    variables.push(colorVar(`color/neutral/${i * 100 || 50}`, design.colors.neutrals[i].hex));
+    const label = i * 100 || 50;
+    const v = { name: `color/neutral/${label}`, type: 'COLOR', values: { light: colorVal(design.colors.neutrals[i].hex) } };
+    if (hasDarkMode && design.darkMode.colors.neutrals[i]) v.values.dark = colorVal(design.darkMode.colors.neutrals[i].hex);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
+
+  // Semantic colors (backgrounds, text)
   for (let i = 0; i < design.colors.backgrounds.length; i++) {
-    variables.push(colorVar(`color/background/${i === 0 ? 'default' : i}`, design.colors.backgrounds[i]));
+    const label = i === 0 ? 'default' : `${i}`;
+    const v = { name: `color/background/${label}`, type: 'COLOR', values: { light: colorVal(design.colors.backgrounds[i]) } };
+    if (hasDarkMode && design.darkMode.colors.backgrounds[i]) v.values.dark = colorVal(design.darkMode.colors.backgrounds[i]);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
   for (let i = 0; i < design.colors.text.length && i < 5; i++) {
-    variables.push(colorVar(`color/text/${i === 0 ? 'default' : i}`, design.colors.text[i]));
+    const label = i === 0 ? 'default' : `${i}`;
+    const v = { name: `color/text/${label}`, type: 'COLOR', values: { light: colorVal(design.colors.text[i]) } };
+    if (hasDarkMode && design.darkMode.colors.text[i]) v.values.dark = colorVal(design.darkMode.colors.text[i]);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
 
-  // Spacing
-  for (const v of design.spacing.scale.slice(0, 20)) {
-    variables.push({ name: `spacing/${v}`, type: 'FLOAT', value: v, scopes: ['GAP', 'ALL_SCOPES'] });
+  collections.push({ name: 'Brand', modes: brandModes, variables: brandVars });
+
+  // --- Typography collection ---
+  const typoVars = [];
+  for (const s of design.typography.scale.slice(0, 12)) {
+    typoVars.push({ name: `font/size/${s.size}`, type: 'FLOAT', values: { default: s.size } });
+    if (s.weight) {
+      typoVars.push({ name: `font/weight/${s.size}`, type: 'FLOAT', values: { default: parseInt(s.weight) || 400 } });
+    }
+    if (s.lineHeight && s.lineHeight !== 'normal') {
+      const lh = parseFloat(s.lineHeight);
+      if (!isNaN(lh)) {
+        typoVars.push({ name: `font/lineHeight/${s.size}`, type: 'FLOAT', values: { default: lh } });
+      }
+    }
+  }
+  if (typoVars.length > 0) {
+    collections.push({ name: 'Typography', modes: ['default'], variables: typoVars });
   }
 
+  // --- Spacing collection ---
+  const spacingVars = [];
+  for (const v of design.spacing.scale.slice(0, 20)) {
+    spacingVars.push({ name: `spacing/${v}`, type: 'FLOAT', values: { default: v } });
+  }
   // Border radius
   for (const r of design.borders.radii) {
-    variables.push({ name: `radius/${r.label}`, type: 'FLOAT', value: r.value, scopes: ['CORNER_RADIUS'] });
+    spacingVars.push({ name: `radius/${r.label}`, type: 'FLOAT', values: { default: r.value } });
   }
-
-  // Font sizes
-  for (const s of design.typography.scale.slice(0, 12)) {
-    variables.push({ name: `fontSize/${s.size}`, type: 'FLOAT', value: s.size, scopes: ['FONT_SIZE'] });
+  if (spacingVars.length > 0) {
+    collections.push({ name: 'Spacing', modes: ['default'], variables: spacingVars });
   }
 
-  const collection = {
-    name: `Design Language — ${design.meta.title || 'Extracted'}`,
-    modes: [{ name: 'Default', variables }],
-  };
-
-  // Add dark mode if available
-  if (design.darkMode) {
-    const darkVars = [];
-    const dc = design.darkMode.colors;
-    if (dc.primary) darkVars.push(colorVar('color/primary', dc.primary.hex));
-    if (dc.secondary) darkVars.push(colorVar('color/secondary', dc.secondary.hex));
-    for (let i = 0; i < dc.neutrals.length && i < 10; i++) {
-      darkVars.push(colorVar(`color/neutral/${i * 100 || 50}`, dc.neutrals[i].hex));
-    }
-    for (let i = 0; i < dc.backgrounds.length; i++) {
-      darkVars.push(colorVar(`color/background/${i === 0 ? 'default' : i}`, dc.backgrounds[i]));
-    }
-    for (let i = 0; i < dc.text.length && i < 5; i++) {
-      darkVars.push(colorVar(`color/text/${i === 0 ? 'default' : i}`, dc.text[i]));
-    }
-    collection.modes.push({ name: 'Dark', variables: darkVars });
-  }
-
-  return JSON.stringify(collection, null, 2);
+  return JSON.stringify({ collections }, null, 2);
 }
 
-function colorVar(name, hex) {
+function colorVal(hex) {
   const rgb = hexToRgb(hex);
-  return {
-    name,
-    type: 'COLOR',
-    value: { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255, a: 1 },
-    scopes: ['ALL_SCOPES'],
-  };
+  return { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255, a: 1 };
 }
 
 function hexToRgb(hex) {

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/formatters/preview.js

@@ -9,39 +9,59 @@ export function formatPreview(design) {
 <title>Design Language: ${esc(meta.title)}</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0a; color: #e5e5e5; line-height: 1.6; }
+  :root {
+    --bg: #0a0a0a; --bg-card: #141414; --border: #222; --text: #e5e5e5; --text-heading: #fff;
+    --text-muted: #666; --text-sub: #a0a0a0; --text-dim: #444; --text-faint: #555; --row-border: #1a1a1a;
+  }
+  [data-theme="light"] {
+    --bg: #f5f5f5; --bg-card: #fff; --border: #ddd; --text: #333; --text-heading: #111;
+    --text-muted: #888; --text-sub: #666; --text-dim: #999; --text-faint: #aaa; --row-border: #e5e5e5;
+  }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
   .container { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
-  h1 { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: #fff; }
-  h2 { font-size: 24px; font-weight: 600; margin: 48px 0 20px; color: #fff; border-bottom: 1px solid #222; padding-bottom: 12px; }
-  h3 { font-size: 16px; font-weight: 600; margin: 24px 0 12px; color: #a0a0a0; text-transform: uppercase; letter-spacing: 0.05em; }
-  .meta { color: #666; font-size: 14px; margin-bottom: 32px; }
+  .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+  .theme-toggle { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; white-space: nowrap; }
+  h1 { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: var(--text-heading); }
+  h2 { font-size: 24px; font-weight: 600; margin: 48px 0 20px; color: var(--text-heading); border-bottom: 1px solid var(--border); padding-bottom: 12px; }
+  h3 { font-size: 16px; font-weight: 600; margin: 24px 0 12px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.05em; }
+  .meta { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
   .meta span { margin-right: 16px; }
   .grid { display: grid; gap: 12px; }
   .grid-2 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
   .grid-3 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
   .grid-4 { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
+  @media (max-width: 600px) {
+    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
+    h1 { font-size: 24px; }
+    .container { padding: 20px 12px; }
+  }
+  @media (max-width: 380px) {
+    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+  }
 
   /* Color swatches */
-  .swatch { border-radius: 12px; overflow: hidden; background: #141414; border: 1px solid #222; }
+  .swatch { border-radius: 12px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; position: relative; }
   .swatch-color { height: 80px; position: relative; }
   .swatch-info { padding: 10px 12px; font-size: 13px; }
-  .swatch-hex { font-weight: 600; font-family: monospace; color: #fff; }
-  .swatch-label { font-size: 11px; color: #666; margin-top: 2px; }
-  .swatch-role { display: inline-block; font-size: 10px; background: #222; color: #aaa; padding: 2px 8px; border-radius: 4px; margin-top: 4px; }
+  .swatch-hex { font-weight: 600; font-family: monospace; color: var(--text-heading); }
+  .swatch-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+  .swatch-role { display: inline-block; font-size: 10px; background: var(--border); color: var(--text-sub); padding: 2px 8px; border-radius: 4px; margin-top: 4px; }
+  .copied-tip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
+  .copied-tip.show { opacity: 1; }
 
   /* Type scale */
-  .type-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid #1a1a1a; }
-  .type-size { font-family: monospace; color: #666; min-width: 60px; font-size: 13px; }
-  .type-meta { font-size: 12px; color: #444; margin-left: auto; font-family: monospace; }
+  .type-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--row-border); }
+  .type-size { font-family: monospace; color: var(--text-muted); min-width: 60px; font-size: 13px; }
+  .type-meta { font-size: 12px; color: var(--text-dim); margin-left: auto; font-family: monospace; }
 
   /* Spacing */
   .spacing-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
   .spacing-bar { background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 4px; height: 24px; min-width: 4px; transition: width 0.3s; }
-  .spacing-label { font-family: monospace; font-size: 13px; color: #888; min-width: 60px; }
+  .spacing-label { font-family: monospace; font-size: 13px; color: var(--text-sub); min-width: 60px; }
 
   /* Shadows */
-  .shadow-card { background: #fff; border-radius: 12px; padding: 24px; text-align: center; min-height: 80px; display: flex; align-items: center; justify-content: center; }
-  .shadow-label { font-size: 12px; color: #333; font-family: monospace; }
+  .shadow-card { background: var(--bg-card); border-radius: 12px; padding: 24px; text-align: center; min-height: 80px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
+  .shadow-label { font-size: 12px; color: var(--text); font-family: monospace; }
 
   /* Radii */
   .radius-item { width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 600; }
@@ -51,7 +71,7 @@ export function formatPreview(design) {
   .a11y-score.good { color: #22c55e; }
   .a11y-score.warn { color: #eab308; }
   .a11y-score.bad { color: #ef4444; }
-  .a11y-pair { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #141414; border-radius: 8px; margin-bottom: 6px; border: 1px solid #222; }
+  .a11y-pair { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-card); border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border); flex-wrap: wrap; }
   .a11y-sample { width: 120px; padding: 6px 12px; border-radius: 6px; text-align: center; font-size: 14px; font-weight: 500; }
   .a11y-ratio { font-family: monospace; font-size: 14px; min-width: 50px; }
   .a11y-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
@@ -59,21 +79,25 @@ export function formatPreview(design) {
   .a11y-badge.fail { background: #ef444420; color: #ef4444; }
 
   /* Components */
-  .comp-screenshot { border-radius: 8px; border: 1px solid #222; max-width: 100%; }
+  .comp-screenshot { border-radius: 8px; border: 1px solid var(--border); max-width: 100%; }
 
   /* Stat cards */
   .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 24px 0; }
-  .stat { background: #141414; border: 1px solid #222; border-radius: 12px; padding: 16px; }
-  .stat-value { font-size: 28px; font-weight: 700; color: #fff; }
-  .stat-label { font-size: 12px; color: #666; margin-top: 4px; }
+  .stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
+  .stat-value { font-size: 28px; font-weight: 700; color: var(--text-heading); }
+  .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
 
   .font-tag { display: inline-block; background: #1e1e2e; color: #a78bfa; padding: 4px 10px; border-radius: 6px; font-size: 13px; margin: 4px 4px 4px 0; }
+  [data-theme="light"] .font-tag { background: #ede9fe; color: #6d28d9; }
 </style>
 </head>
 <body>
 <div class="container">
 
-<h1>${esc(meta.title)}</h1>
+<div class="header-row">
+  <h1>${esc(meta.title)}</h1>
+  <button class="theme-toggle" onclick="toggleTheme()">Toggle Light/Dark</button>
+</div>
 <div class="meta">
   <span>${esc(meta.url)}</span>
   <span>${meta.elementCount} elements</span>
@@ -135,7 +159,7 @@ ${typography.scale.length > 0 ? `
   ${typography.scale.slice(0, 12).map(s => `
   <div class="type-row">
     <span class="type-size">${s.size}px</span>
-    <span style="font-size:${Math.min(s.size, 48)}px;font-weight:${s.weight};color:#fff">The quick brown fox</span>
+    <span style="font-size:${Math.min(s.size, 48)}px;font-weight:${s.weight};color:var(--text-heading)">The quick brown fox</span>
     <span class="type-meta">${s.weight} / ${s.lineHeight}</span>
   </div>`).join('')}
 </div>` : ''}
@@ -206,6 +230,25 @@ ${componentScreenshots && Object.keys(componentScreenshots).length > 0 ? `
 </div>` : ''}
 
 </div>
+<script>
+function toggleTheme() {
+  const html = document.documentElement;
+  const current = html.getAttribute('data-theme');
+  html.setAttribute('data-theme', current === 'light' ? 'dark' : 'light');
+}
+document.querySelectorAll('.swatch').forEach(el => {
+  el.addEventListener('click', () => {
+    const hex = el.querySelector('.swatch-hex');
+    if (!hex) return;
+    navigator.clipboard.writeText(hex.textContent).then(() => {
+      let tip = el.querySelector('.copied-tip');
+      if (!tip) { tip = document.createElement('div'); tip.className = 'copied-tip'; tip.textContent = 'Copied!'; el.appendChild(tip); }
+      tip.classList.add('show');
+      setTimeout(() => tip.classList.remove('show'), 1200);
+    });
+  });
+});
+</script>
 </body>
 </html>`;
 }

package/src/formatters/svelte-theme.js

@@ -0,0 +1,40 @@
+export function formatSvelteTheme(design) {
+  const { colors, typography, spacing, borders } = design;
+  const lines = [];
+
+  lines.push('/* Svelte theme — generated by designlang */');
+  lines.push('/* Import in +layout.svelte or app.css */');
+  lines.push('');
+  lines.push(':root {');
+  lines.push('  /* Colors */');
+  if (colors.primary) lines.push(`  --color-primary: ${colors.primary.hex};`);
+  if (colors.secondary) lines.push(`  --color-secondary: ${colors.secondary.hex};`);
+  if (colors.accent) lines.push(`  --color-accent: ${colors.accent.hex};`);
+  for (const [i, n] of colors.neutrals.slice(0, 10).entries()) {
+    lines.push(`  --color-neutral-${(i + 1) * 100}: ${n.hex};`);
+  }
+  if (colors.backgrounds.length > 0) lines.push(`  --color-background: ${colors.backgrounds[0]};`);
+  if (colors.text.length > 0) lines.push(`  --color-text: ${colors.text[0]};`);
+  lines.push('');
+  lines.push('  /* Typography */');
+  if (typography.families.length > 0) lines.push(`  --font-primary: '${typography.families[0].name}', sans-serif;`);
+  if (typography.families.length > 1) lines.push(`  --font-secondary: '${typography.families[1].name}', sans-serif;`);
+  if (typography.body) lines.push(`  --font-size-base: ${typography.body.size}px;`);
+  for (const s of typography.scale.slice(0, 8)) {
+    lines.push(`  --font-size-${s.size}: ${s.size}px;`);
+  }
+  lines.push('');
+  lines.push('  /* Spacing */');
+  if (spacing.base) lines.push(`  --spacing-base: ${spacing.base}px;`);
+  for (const [i, val] of spacing.scale.slice(0, 12).entries()) {
+    lines.push(`  --spacing-${i + 1}: ${val}px;`);
+  }
+  lines.push('');
+  lines.push('  /* Border Radii */');
+  for (const r of borders.radii) {
+    lines.push(`  --radius-${r.label}: ${r.value}px;`);
+  }
+  lines.push('}');
+
+  return lines.join('\n');
+}

package/src/formatters/tailwind.js

@@ -1,3 +1,20 @@
+import { rgbToHex, rgbToHsl } from '../utils.js';
+
+function generateColorScale(hex, parsed) {
+  const { h, s } = rgbToHsl(parsed);
+  const scale = {};
+  const levels = [
+    { name: '50', l: 97 }, { name: '100', l: 94 }, { name: '200', l: 86 },
+    { name: '300', l: 76 }, { name: '400', l: 64 }, { name: '500', l: 50 },
+    { name: '600', l: 40 }, { name: '700', l: 32 }, { name: '800', l: 24 },
+    { name: '900', l: 16 }, { name: '950', l: 10 },
+  ];
+  for (const { name, l } of levels) {
+    scale[name] = `hsl(${h}, ${s}%, ${l}%)`;
+  }
+  return scale;
+}
+
 export function formatTailwind(design) {
   const config = {
     colors: {},
@@ -12,10 +29,19 @@ export function formatTailwind(design) {
     transitionTimingFunction: {},
   };
 
-  // Colors
-  if (design.colors.primary) config.colors.primary = design.colors.primary.hex;
-  if (design.colors.secondary) config.colors.secondary = design.colors.secondary.hex;
-  if (design.colors.accent) config.colors.accent = design.colors.accent.hex;
+  // Colors — generate full scales from brand colors
+  if (design.colors.primary) {
+    config.colors.primary = generateColorScale(design.colors.primary.hex, design.colors.primary);
+    config.colors.primary.DEFAULT = design.colors.primary.hex;
+  }
+  if (design.colors.secondary) {
+    config.colors.secondary = generateColorScale(design.colors.secondary.hex, design.colors.secondary);
+    config.colors.secondary.DEFAULT = design.colors.secondary.hex;
+  }
+  if (design.colors.accent) {
+    config.colors.accent = generateColorScale(design.colors.accent.hex, design.colors.accent);
+    config.colors.accent.DEFAULT = design.colors.accent.hex;
+  }
   for (let i = 0; i < design.colors.neutrals.length && i < 10; i++) {
     config.colors[`neutral-${i * 100 || 50}`] = design.colors.neutrals[i].hex;
   }
@@ -60,6 +86,33 @@ export function formatTailwind(design) {
     }
   }
 
+  // Animations
+  if (design.animations) {
+    if (design.animations.durations.length > 0) {
+      config.transitionDuration = {};
+      for (const d of design.animations.durations) {
+        const ms = d.endsWith('ms') ? parseInt(d) : parseFloat(d) * 1000;
+        config.transitionDuration[`${ms}`] = d;
+      }
+    }
+    if (design.animations.easings.length > 0) {
+      config.transitionTimingFunction = {};
+      for (const e of design.animations.easings) {
+        const val = typeof e === 'object' ? e.value : e;
+        const name = val.startsWith('cubic-bezier') ? 'custom' : val.replace(/ease-?/g, '').replace(/-/g, '') || 'default';
+        config.transitionTimingFunction[name] = val;
+      }
+    }
+  }
+
+  // Container
+  if (design.layout && design.layout.containerWidths.length > 0) {
+    const maxW = design.layout.containerWidths[0].maxWidth;
+    const padding = design.layout.containerWidths[0].padding;
+    config.container = { center: true, padding: padding || '1rem' };
+    if (maxW) config.maxWidth = { container: maxW };
+  }
+
   // Clean empty objects
   for (const [key, val] of Object.entries(config)) {
     if (typeof val === 'object' && Object.keys(val).length === 0) delete config[key];