designlang 6.0.0 → 7.1.0

package/src/formatters/dtcg-tokens.js

@@ -0,0 +1,175 @@
+// DTCG v1 token formatter.
+// Input: design object from extractDesignLanguage.
+// Output: { $metadata, primitive, semantic } — every leaf is { $value, $type }.
+
+function token(value, type, extensions) {
+  const t = { $value: value, $type: type };
+  if (extensions) t.$extensions = extensions;
+  return t;
+}
+
+function ref(path) { return `{${path}}`; }
+
+// Normalize a color entry — may be a string hex or { hex } object.
+function colorValue(v) {
+  if (v == null) return null;
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object' && typeof v.hex === 'string') return v.hex;
+  return null;
+}
+
+// Normalize a dimension entry — may be a string ('4px'), a number (4), or { value } object.
+function dimensionValue(v) {
+  if (v == null) return null;
+  if (typeof v === 'string') return v;
+  if (typeof v === 'number') return `${v}px`;
+  if (typeof v === 'object') {
+    if (typeof v.value === 'number') return `${v.value}px`;
+    if (typeof v.value === 'string') return v.value;
+  }
+  return null;
+}
+
+// Normalize a shadow entry — may be a string or { raw } object.
+function shadowValue(v) {
+  if (v == null) return null;
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object' && typeof v.raw === 'string') return v.raw;
+  return null;
+}
+
+// Normalize a font family entry — may be a string or { name } object.
+function fontFamilyValue(v) {
+  if (v == null) return null;
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object' && typeof v.name === 'string') return v.name;
+  return null;
+}
+
+// Normalize a typography scale size — may be number (px) or string ('16px').
+function fontSizeValue(v) {
+  if (v == null) return null;
+  if (typeof v === 'string') return v;
+  if (typeof v === 'number') return `${v}px`;
+  return null;
+}
+
+function buildPrimitive(design) {
+  const brand = colorValue(design.colors?.primary) || colorValue(design.colors?.all?.[0]) || '#000000';
+  const secondary = colorValue(design.colors?.secondary);
+
+  const neutrals = {};
+  const rawNeutrals = design.colors?.neutrals || [];
+  for (let i = 0; i < rawNeutrals.length; i++) {
+    const cv = colorValue(rawNeutrals[i]);
+    if (cv) neutrals[`n${i * 100 + 100}`] = token(cv, 'color');
+  }
+
+  const background = {};
+  const rawBackgrounds = design.colors?.backgrounds || [];
+  for (let i = 0; i < rawBackgrounds.length; i++) {
+    const cv = colorValue(rawBackgrounds[i]);
+    if (cv) background[`bg${i}`] = token(cv, 'color');
+  }
+
+  const text = {};
+  const rawText = design.colors?.text || [];
+  for (let i = 0; i < rawText.length; i++) {
+    const cv = colorValue(rawText[i]);
+    if (cv) text[`text${i}`] = token(cv, 'color');
+  }
+
+  const color = {
+    brand: {
+      primary: token(brand, 'color'),
+      ...(secondary && { secondary: token(secondary, 'color') }),
+    },
+    neutral: neutrals,
+    background,
+    text,
+  };
+
+  const spacing = {};
+  const rawSpacing = design.spacing?.scale || [];
+  for (let i = 0; i < rawSpacing.length; i++) {
+    const dv = dimensionValue(rawSpacing[i]);
+    if (dv) spacing[`s${i}`] = token(dv, 'dimension');
+  }
+
+  const radius = {};
+  const rawRadii = design.borders?.radii || [];
+  for (let i = 0; i < rawRadii.length; i++) {
+    const dv = dimensionValue(rawRadii[i]);
+    if (dv) radius[`r${i}`] = token(dv, 'dimension');
+  }
+
+  const shadow = {};
+  const rawShadows = design.shadows?.values || [];
+  for (let i = 0; i < rawShadows.length; i++) {
+    const sv = shadowValue(rawShadows[i]);
+    if (sv) shadow[`sh${i}`] = token(sv, 'shadow');
+  }
+
+  const fontFamily = {};
+  const rawFamilies = design.typography?.families || [];
+  for (let i = 0; i < rawFamilies.length; i++) {
+    const fv = fontFamilyValue(rawFamilies[i]);
+    if (fv) fontFamily[`f${i}`] = token(fv, 'fontFamily');
+  }
+
+  return { color, spacing, radius, shadow, fontFamily };
+}
+
+function buildSemantic(design, primitive) {
+  const firstRadiusKey = Object.keys(primitive.radius)[0] || 'r0';
+  const firstShadowKey = Object.keys(primitive.shadow)[0] || 'sh0';
+
+  const color = {
+    action: {
+      primary: token(ref('primitive.color.brand.primary'), 'color'),
+    },
+    surface: {
+      default: token(ref('primitive.color.background.bg0'), 'color'),
+    },
+    text: {
+      body: token(ref('primitive.color.text.text0'), 'color'),
+    },
+  };
+  if (primitive.color.brand.secondary) {
+    color.action.secondary = token(ref('primitive.color.brand.secondary'), 'color');
+  }
+
+  const firstFamily = fontFamilyValue(design.typography?.families?.[0]) || 'system-ui';
+  const firstScale = design.typography?.scale?.[0] || {};
+  const typography = {
+    body: token({
+      fontFamily: firstFamily,
+      fontSize: fontSizeValue(firstScale.size) || '16px',
+      fontWeight: firstScale.weight || '400',
+      lineHeight: firstScale.lineHeight || '1.5',
+    }, 'typography'),
+  };
+
+  const radius = {
+    control: token(ref(`primitive.radius.${firstRadiusKey}`), 'dimension'),
+  };
+
+  const shadow = {
+    elevated: token(ref(`primitive.shadow.${firstShadowKey}`), 'shadow'),
+  };
+
+  return { color, typography, radius, shadow };
+}
+
+export function formatDtcgTokens(design) {
+  const primitive = buildPrimitive(design);
+  const semantic = buildSemantic(design, primitive);
+  const $metadata = {
+    generator: 'designlang',
+    version: '7.0.0',
+    spec: 'https://design-tokens.github.io/community-group/format/',
+  };
+  if (design.meta?.url) $metadata.source = design.meta.url;
+  if (design.meta?.timestamp) $metadata.generatedAt = design.meta.timestamp;
+  return { $metadata, primitive, semantic };
+}

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

@@ -1,3 +1,186 @@
+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;