designlang 5.0.0 → 7.0.0

package/src/formatters/flutter-dart.js

@@ -0,0 +1,130 @@
+// Flutter Dart emitter — consumes a DTCG token object and emits a Dart file
+// with a DesignTokens class and a buildDesignlangTheme() ThemeData helper.
+
+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);
+  }
+}
+
+function camelFromPath(path) {
+  const parts = path.split('.');
+  const trimmed = parts.slice(1);
+  let segs;
+  if (trimmed[0] === 'color' && trimmed.length >= 3) {
+    segs = trimmed.slice(1);
+  } else {
+    segs = trimmed;
+  }
+  return segs
+    .map((s, i) => (i === 0 ? s : s.charAt(0).toUpperCase() + s.slice(1)))
+    .join('')
+    .replace(/[^a-zA-Z0-9]/g, '');
+}
+
+function hexToDartArgb(hex) {
+  if (typeof hex !== 'string') return null;
+  let h = hex.trim().replace(/^#/, '');
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  if (h.length === 6 && /^[0-9a-fA-F]{6}$/.test(h)) return `0xFF${h.toUpperCase()}`;
+  if (h.length === 8 && /^[0-9a-fA-F]{8}$/.test(h)) return `0x${h.toUpperCase()}`;
+  return null;
+}
+
+function dimensionToNumber(value) {
+  if (typeof value === 'number') return value;
+  if (typeof value !== 'string') return null;
+  const m = value.match(/^(-?\d+(?:\.\d+)?)(px|pt|dp|rem|em)?$/);
+  if (!m) return null;
+  const n = parseFloat(m[1]);
+  if (m[2] === 'rem' || m[2] === 'em') return n * 16;
+  return n;
+}
+
+export function formatFlutterDart(tokens) {
+  const source = tokens?.$metadata?.source || '';
+  const lines = [];
+  lines.push(`// Generated by designlang v${HEADER_VERSION}`);
+  if (source) lines.push(`// Source: ${source}`);
+  lines.push("import 'package:flutter/material.dart';");
+  lines.push('');
+  lines.push('class DesignTokens {');
+  lines.push('  DesignTokens._();');
+  lines.push('');
+
+  // Semantic colors
+  const semColor = tokens?.semantic?.color;
+  const semEntries = [];
+  if (semColor) {
+    lines.push('  // Semantic');
+    for (const leaf of walkLeaves(semColor, 'semantic.color')) {
+      if (leaf.token.$type !== 'color') continue;
+      const resolved = resolveRef(tokens, leaf.path);
+      const argb = hexToDartArgb(resolved);
+      if (!argb) continue;
+      const name = camelFromPath(leaf.path);
+      lines.push(`  static const Color ${name} = Color(${argb});`);
+      semEntries.push({ name, path: leaf.path });
+    }
+  }
+
+  // Primitive spacing
+  const spacing = tokens?.primitive?.spacing || {};
+  for (const key of Object.keys(spacing)) {
+    const tok = spacing[key];
+    if (!tok || tok.$type !== 'dimension') continue;
+    const n = dimensionToNumber(resolveRef(tokens, `primitive.spacing.${key}`));
+    if (n == null) continue;
+    lines.push(`  static const double ${camelFromPath(`primitive.spacing.${key}`)} = ${n};`);
+  }
+
+  // Primitive radius
+  const radius = tokens?.primitive?.radius || {};
+  for (const key of Object.keys(radius)) {
+    const tok = radius[key];
+    if (!tok || tok.$type !== 'dimension') continue;
+    const n = dimensionToNumber(resolveRef(tokens, `primitive.radius.${key}`));
+    if (n == null) continue;
+    lines.push(`  static const double ${camelFromPath(`primitive.radius.${key}`)} = ${n};`);
+  }
+
+  // Primitive colors for direct use
+  const primColor = tokens?.primitive?.color;
+  if (primColor) {
+    lines.push('');
+    lines.push('  // Primitive palette');
+    for (const leaf of walkLeaves(primColor, 'primitive.color')) {
+      if (leaf.token.$type !== 'color') continue;
+      const resolved = resolveRef(tokens, leaf.path);
+      const argb = hexToDartArgb(resolved);
+      if (!argb) continue;
+      lines.push(`  static const Color ${camelFromPath(leaf.path)} = Color(${argb});`);
+    }
+  }
+
+  lines.push('}');
+  lines.push('');
+
+  // ThemeData helper
+  const hasActionPrimary = semEntries.some((e) => e.name === 'actionPrimary');
+  const hasSurfaceDefault = semEntries.some((e) => e.name === 'surfaceDefault');
+  lines.push('ThemeData buildDesignlangTheme() {');
+  lines.push('  return ThemeData(');
+  lines.push('    colorScheme: const ColorScheme.light(');
+  if (hasActionPrimary) lines.push('      primary: DesignTokens.actionPrimary,');
+  if (hasSurfaceDefault) lines.push('      surface: DesignTokens.surfaceDefault,');
+  lines.push('    ),');
+  lines.push('  );');
+  lines.push('}');
+
+  return lines.join('\n') + '\n';
+}

package/src/formatters/ios-swiftui.js

@@ -0,0 +1,161 @@
+// iOS SwiftUI emitter — consumes a DTCG token object and produces a single
+// Swift file exposing semantic Colors, primitive spacing/radius as CGFloat, and
+// primitive palette colors.
+
+import { resolveRef } from './_token-ref.js';
+
+const HEADER_VERSION = '7.0.0';
+
+// Convert a dotted DTCG path to camelCase identifier.
+// e.g. "semantic.color.action.primary" → "actionPrimary"
+//      "primitive.color.brand.primary" → "brandPrimary"
+//      "primitive.spacing.s0" → "spacingS0"
+//      "primitive.radius.r0" → "radiusR0"
+function camelFromPath(path) {
+  const parts = path.split('.');
+  // Drop leading "primitive"/"semantic" and the type bucket.
+  // We keep meaningful parts.
+  const trimmed = parts.slice(1); // drop primitive/semantic
+  // Drop the type segment for semantic colors ("color.action.primary" → "action.primary")
+  // For primitive colors ("color.brand.primary" → keep "brand.primary")
+  // For primitive spacing ("spacing.s0") we want "spacingS0" — keep all.
+  let segments;
+  if (trimmed[0] === 'color' && trimmed.length >= 3) {
+    segments = trimmed.slice(1);
+  } else {
+    segments = trimmed;
+  }
+  return segments
+    .map((s, i) => (i === 0 ? s : s.charAt(0).toUpperCase() + s.slice(1)))
+    .join('')
+    .replace(/[^a-zA-Z0-9]/g, '');
+}
+
+// Convert "#rrggbb" or "#rgb" to "0xRRGGBB" for SwiftUI Color(hex:).
+function hexToSwiftHex(hex) {
+  if (typeof hex !== 'string') return null;
+  let h = hex.trim().replace(/^#/, '');
+  if (h.length === 3) {
+    h = h.split('').map((c) => c + c).join('');
+  }
+  if (h.length === 6 && /^[0-9a-fA-F]{6}$/.test(h)) {
+    return `0x${h.toUpperCase()}`;
+  }
+  if (h.length === 8 && /^[0-9a-fA-F]{8}$/.test(h)) {
+    // drop alpha
+    return `0x${h.slice(2).toUpperCase()}`;
+  }
+  return null;
+}
+
+function dimensionToNumber(value) {
+  if (typeof value === 'number') return value;
+  if (typeof value !== 'string') return null;
+  const m = value.match(/^(-?\d+(?:\.\d+)?)(px|pt|rem|em)?$/);
+  if (!m) return null;
+  const n = parseFloat(m[1]);
+  const unit = m[2];
+  if (unit === 'rem' || unit === 'em') return n * 16;
+  return n;
+}
+
+// Walk leaves of a subtree producing { path, token } pairs.
+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);
+  }
+}
+
+export function formatIosSwiftUI(tokens) {
+  const lines = [];
+  const source = tokens?.$metadata?.source || '';
+  lines.push(`// Generated by designlang v${HEADER_VERSION} — https://github.com/Manavarya09/design-extract`);
+  if (source) lines.push(`// Source: ${source}`);
+  lines.push('import SwiftUI');
+  lines.push('');
+  lines.push('extension Color {');
+  lines.push('  init(hex: UInt32) {');
+  lines.push('    let r = Double((hex >> 16) & 0xFF) / 255');
+  lines.push('    let g = Double((hex >> 8) & 0xFF) / 255');
+  lines.push('    let b = Double(hex & 0xFF) / 255');
+  lines.push('    self.init(red: r, green: g, blue: b)');
+  lines.push('  }');
+  lines.push('');
+  lines.push('  // MARK: Semantic');
+
+  // Semantic colors
+  const semanticColor = tokens?.semantic?.color;
+  if (semanticColor) {
+    for (const leaf of walkLeaves(semanticColor, 'semantic.color')) {
+      if (leaf.token.$type !== 'color') continue;
+      const resolved = resolveRef(tokens, leaf.path);
+      const swiftHex = hexToSwiftHex(resolved);
+      if (!swiftHex) continue;
+      lines.push(`  static let ${camelFromPath(leaf.path)} = Color(hex: ${swiftHex})`);
+    }
+  }
+  lines.push('}');
+  lines.push('');
+
+  // CGFloat spacing + radius
+  lines.push('extension CGFloat {');
+  lines.push('  // MARK: Primitive spacing');
+  const spacing = tokens?.primitive?.spacing || {};
+  for (const key of Object.keys(spacing)) {
+    const tok = spacing[key];
+    if (!tok || tok.$type !== 'dimension') continue;
+    const n = dimensionToNumber(resolveRef(tokens, `primitive.spacing.${key}`));
+    if (n == null) continue;
+    const name = camelFromPath(`primitive.spacing.${key}`);
+    lines.push(`  static let ${name}: CGFloat = ${n}`);
+  }
+  lines.push('');
+  lines.push('  // MARK: Primitive radius');
+  const radius = tokens?.primitive?.radius || {};
+  for (const key of Object.keys(radius)) {
+    const tok = radius[key];
+    if (!tok || tok.$type !== 'dimension') continue;
+    const n = dimensionToNumber(resolveRef(tokens, `primitive.radius.${key}`));
+    if (n == null) continue;
+    const name = camelFromPath(`primitive.radius.${key}`);
+    lines.push(`  static let ${name}: CGFloat = ${n}`);
+  }
+  lines.push('}');
+  lines.push('');
+
+  // Primitive palette colors for direct use
+  lines.push('// MARK: Primitive palette (for direct use)');
+  lines.push('extension Color {');
+  const primColor = tokens?.primitive?.color;
+  if (primColor) {
+    for (const leaf of walkLeaves(primColor, 'primitive.color')) {
+      if (leaf.token.$type !== 'color') continue;
+      const resolved = resolveRef(tokens, leaf.path);
+      const swiftHex = hexToSwiftHex(resolved);
+      if (!swiftHex) continue;
+      lines.push(`  static let ${camelFromPath(leaf.path)} = Color(hex: ${swiftHex})`);
+    }
+  }
+  lines.push('}');
+  lines.push('');
+
+  // Typography hint comments (composite typography tokens)
+  const typography = tokens?.semantic?.typography;
+  if (typography) {
+    for (const key of Object.keys(typography)) {
+      const tok = typography[key];
+      if (!tok || tok.$type !== 'typography') continue;
+      const v = tok.$value || {};
+      lines.push(
+        `// typography.${key}: family=${v.fontFamily ?? ''} size=${v.fontSize ?? ''} weight=${v.fontWeight ?? ''} lineHeight=${v.lineHeight ?? ''}`,
+      );
+    }
+  }
+
+  return lines.join('\n') + '\n';
+}

package/src/formatters/markdown.js

@@ -3,6 +3,7 @@ import { pxToRem } from '../utils.js';
 export function formatMarkdown(design) {
   const lines = [];
   const { meta, colors, typography, spacing, shadows, borders, variables, breakpoints, animations, components } = design;
+  const componentClusters = Array.isArray(design.componentClusters) ? design.componentClusters : [];
 
   lines.push(`# Design Language: ${meta.title || 'Unknown Site'}`);
   lines.push('');
@@ -259,6 +260,30 @@ export function formatMarkdown(design) {
     }
   }
 
+  // ── Component Clusters (v7) ──
+  if (componentClusters.length > 0) {
+    lines.push('## Component Clusters');
+    lines.push('');
+    lines.push('Reusable component instances grouped by DOM structure and style similarity:');
+    lines.push('');
+    for (const cluster of componentClusters) {
+      const kindLabel = cluster.kind.charAt(0).toUpperCase() + cluster.kind.slice(1);
+      lines.push(`### ${kindLabel} — ${cluster.instanceCount} instance${cluster.instanceCount === 1 ? '' : 's'}, ${cluster.variants.length} variant${cluster.variants.length === 1 ? '' : 's'}`);
+      lines.push('');
+      cluster.variants.forEach((v, i) => {
+        lines.push(`**Variant ${i + 1}** (${v.instanceCount} instance${v.instanceCount === 1 ? '' : 's'})`);
+        lines.push('');
+        lines.push('```css');
+        for (const [prop, val] of Object.entries(v.css || {})) {
+          const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+          lines.push(`  ${cssProp}: ${val};`);
+        }
+        lines.push('```');
+        lines.push('');
+      });
+    }
+  }
+
   // ── Layout ──
   if (design.layout) {
     const l = design.layout;

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];