designlang 5.0.0 → 7.0.0

package/src/formatters/_token-ref.js

@@ -0,0 +1,44 @@
+// Internal helper: resolve DTCG reference strings like "{primitive.color.brand.primary}"
+// against a token tree, following chains until we reach a non-reference $value.
+
+const REF_PATTERN = /^\{([^}]+)\}$/;
+
+function parseRef(value) {
+  if (typeof value !== 'string') return null;
+  const match = value.match(REF_PATTERN);
+  return match ? match[1] : null;
+}
+
+function getAtPath(tokens, path) {
+  const parts = path.split('.');
+  let node = tokens;
+  for (const part of parts) {
+    if (node == null || typeof node !== 'object') return undefined;
+    node = node[part];
+  }
+  return node;
+}
+
+// Resolve a token at the given dotted path to its leaf $value (following references).
+// Returns undefined if the path is missing or a reference cannot be resolved.
+export function resolveRef(tokens, path, seen = new Set()) {
+  if (seen.has(path)) return undefined; // cycle
+  seen.add(path);
+
+  const node = getAtPath(tokens, path);
+  if (node == null) return undefined;
+
+  // If we got a token object with $value
+  if (typeof node === 'object' && '$value' in node) {
+    const inner = node.$value;
+    const refPath = parseRef(inner);
+    if (refPath) return resolveRef(tokens, refPath, seen);
+    return inner;
+  }
+
+  // If the node is itself a reference string
+  const refPath = parseRef(node);
+  if (refPath) return resolveRef(tokens, refPath, seen);
+
+  return node;
+}

package/src/formatters/agent-rules.js

@@ -0,0 +1,116 @@
+// Agent rules emitter. Produces ready-to-drop files that teach coding agents
+// (Cursor, Claude Code, generic) to prefer the extracted design tokens
+// instead of inventing new colors/typography.
+//
+// Output: { relativePath: fileContent } — caller is responsible for writing.
+
+import { resolveRef } from './_token-ref.js';
+
+function hostFromUrl(url) {
+  try { return new URL(url).hostname; } catch { return url || 'unknown'; }
+}
+
+// Resolve a semantic token path to its concrete leaf value, or fall back.
+function resolveSemantic(tokens, path, fallback) {
+  const v = resolveRef(tokens, path);
+  return (typeof v === 'string' && v) ? v : fallback;
+}
+
+function firstFontFamily(tokens) {
+  const fam = tokens?.primitive?.fontFamily || {};
+  const keys = Object.keys(fam);
+  if (!keys.length) return 'system-ui';
+  const v = fam[keys[0]]?.$value;
+  return typeof v === 'string' ? v : 'system-ui';
+}
+
+function buildBody({ url, tokens, design, iso }) {
+  const actionPrimary = resolveSemantic(tokens, 'semantic.color.action.primary', '#000000');
+  const surfaceDefault = resolveSemantic(tokens, 'semantic.color.surface.default', '#ffffff');
+  const textBody = resolveSemantic(tokens, 'semantic.color.text.body', '#111111');
+  const radiusControl = resolveSemantic(tokens, 'semantic.radius.control', '0px');
+  const fontFamily = firstFontFamily(tokens);
+
+  const lines = [];
+  lines.push(`Source: ${url}`);
+  lines.push(`Extracted by designlang v7.0.0 on ${iso}`);
+  lines.push('');
+  lines.push('## Semantic tokens (use these)');
+  lines.push(`- color.action.primary: ${actionPrimary}`);
+  lines.push(`- color.surface.default: ${surfaceDefault}`);
+  lines.push(`- color.text.body: ${textBody}`);
+  lines.push(`- radius.control: ${radiusControl}`);
+  lines.push(`- typography.body.fontFamily: ${fontFamily}`);
+
+  const regions = Array.isArray(design?.regions) ? design.regions : [];
+  if (regions.length) {
+    lines.push('');
+    lines.push('## Regions');
+    const names = regions.map(r => r.role || r.name).filter(Boolean);
+    for (const n of names) lines.push(`- ${n}`);
+  }
+
+  lines.push('');
+  lines.push('## How to use');
+  lines.push('- Prefer `semantic.*` tokens over `primitive.*`.');
+  lines.push('- Never invent new tokens or hex values; reuse the ones above.');
+  lines.push('- When a value is missing, pick the closest existing semantic token and flag the gap.');
+  lines.push('- Reference tokens by their dotted path (e.g. `semantic.color.action.primary`).');
+
+  return { body: lines.join('\n'), actionPrimary };
+}
+
+function cursorFile({ url, body }) {
+  const front = [
+    '---',
+    `description: Design system extracted from ${url} — use these tokens, do not invent new ones.`,
+    'globs: **/*.{ts,tsx,jsx,js,css,scss,html,vue,svelte,swift,kt,dart,php}',
+    'alwaysApply: true',
+    '---',
+    '',
+    '# Design system reference',
+  ].join('\n');
+  return `${front}\n${body}\n`;
+}
+
+function claudeSkillFile({ url, body }) {
+  const host = hostFromUrl(url);
+  const front = [
+    '---',
+    'name: designlang-tokens',
+    `description: Use when styling UI for ${host} — references the extracted design system tokens instead of inventing colors, spacing, or typography.`,
+    '---',
+    '',
+    '# designlang tokens',
+  ].join('\n');
+  return `${front}\n${body}\n`;
+}
+
+function claudeFragmentFile({ url, body }) {
+  // Plain H2 section ready to append to a project's CLAUDE.md (no frontmatter).
+  return `## Design system (via designlang)\n\n${body}\n`;
+}
+
+function agentsMdFile({ url, body }) {
+  const head = [
+    '# Agent instructions — design system',
+    '',
+    `This project follows the design system extracted from ${url}.`,
+    'Any coding agent working here must use the tokens below and avoid inventing new ones.',
+    '',
+  ].join('\n');
+  return `${head}${body}\n`;
+}
+
+export function formatAgentRules({ design, tokens, url }) {
+  const resolvedUrl = url || tokens?.$metadata?.source || design?.meta?.url || 'unknown';
+  const iso = tokens?.$metadata?.generatedAt || new Date().toISOString();
+  const { body } = buildBody({ url: resolvedUrl, tokens, design: design || {}, iso });
+
+  return {
+    '.cursor/rules/designlang.mdc': cursorFile({ url: resolvedUrl, body }),
+    '.claude/skills/designlang/SKILL.md': claudeSkillFile({ url: resolvedUrl, body }),
+    'CLAUDE.md.fragment': claudeFragmentFile({ url: resolvedUrl, body }),
+    'agents.md': agentsMdFile({ url: resolvedUrl, body }),
+  };
+}

package/src/formatters/android-compose.js

@@ -0,0 +1,164 @@
+// Android Compose emitter — consumes a DTCG token object and produces three
+// files: Theme.kt (Kotlin Compose), colors.xml, and dimens.xml.
+
+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" → "ActionPrimary"
+function pascalFromPath(path) {
+  const parts = path.split('.');
+  const trimmed = parts.slice(1); // drop root (primitive/semantic)
+  let segs;
+  if (trimmed[0] === 'color' && trimmed.length >= 3) {
+    segs = trimmed.slice(1);
+  } else {
+    segs = trimmed;
+  }
+  return segs
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('')
+    .replace(/[^a-zA-Z0-9]/g, '');
+}
+
+// "semantic.color.action.primary" → "action_primary"
+function snakeFromPath(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) => s.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase())
+    .join('_')
+    .replace(/[^a-z0-9_]/g, '');
+}
+
+// Normalize "#rgb"/"#rrggbb"/"#aarrggbb" to "FFRRGGBB" (alpha-first, uppercase).
+function hexToArgb(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 `FF${h.toUpperCase()}`;
+  if (h.length === 8 && /^[0-9a-fA-F]{8}$/.test(h)) return 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;
+}
+
+function collectColors(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);
+      const argb = hexToArgb(resolved);
+      if (!argb) continue;
+      entries.push({ path: leaf.path, argb });
+    }
+  }
+  const prim = tokens?.primitive?.color;
+  if (prim) {
+    for (const leaf of walkLeaves(prim, 'primitive.color')) {
+      if (leaf.token.$type !== 'color') continue;
+      const resolved = resolveRef(tokens, leaf.path);
+      const argb = hexToArgb(resolved);
+      if (!argb) continue;
+      entries.push({ path: leaf.path, argb });
+    }
+  }
+  return entries;
+}
+
+function collectDimensions(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 n = dimensionToNumber(resolveRef(tokens, `primitive.spacing.${key}`));
+    if (n == null) continue;
+    entries.push({ path: `primitive.spacing.${key}`, value: n });
+  }
+  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;
+    entries.push({ path: `primitive.radius.${key}`, value: n });
+  }
+  return entries;
+}
+
+function buildThemeKt(tokens, colors, dims) {
+  const source = tokens?.$metadata?.source || '';
+  const lines = [];
+  lines.push(`// Generated by designlang v${HEADER_VERSION}`);
+  if (source) lines.push(`// Source: ${source}`);
+  lines.push('package com.designlang.tokens');
+  lines.push('');
+  lines.push('import androidx.compose.ui.graphics.Color');
+  lines.push('import androidx.compose.ui.unit.dp');
+  lines.push('');
+  lines.push('object DesignTokens {');
+  for (const { path, argb } of colors) {
+    lines.push(`    val ${pascalFromPath(path)} = Color(0x${argb})`);
+  }
+  for (const { path, value } of dims) {
+    lines.push(`    val ${pascalFromPath(path)} = ${value}.dp`);
+  }
+  lines.push('}');
+  return lines.join('\n') + '\n';
+}
+
+function buildColorsXml(colors) {
+  const lines = ['<?xml version="1.0" encoding="utf-8"?>', '<resources>'];
+  for (const { path, argb } of colors) {
+    lines.push(`    <color name="${snakeFromPath(path)}">#${argb}</color>`);
+  }
+  lines.push('</resources>');
+  return lines.join('\n') + '\n';
+}
+
+function buildDimensXml(dims) {
+  const lines = ['<?xml version="1.0" encoding="utf-8"?>', '<resources>'];
+  for (const { path, value } of dims) {
+    lines.push(`    <dimen name="${snakeFromPath(path)}">${value}dp</dimen>`);
+  }
+  lines.push('</resources>');
+  return lines.join('\n') + '\n';
+}
+
+export function formatAndroidCompose(tokens) {
+  const colors = collectColors(tokens);
+  const dims = collectDimensions(tokens);
+  return {
+    'Theme.kt': buildThemeKt(tokens, colors, dims),
+    'colors.xml': buildColorsXml(colors),
+    'dimens.xml': buildDimensXml(dims),
+  };
+}

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/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) {