designlang 6.0.0 → 7.1.0

package/src/extractors/component-clusters.js

@@ -0,0 +1,39 @@
+// Cluster similar component instances by structuralHash + style vector cosine similarity.
+
+function cosine(a = [], b = []) {
+  const n = Math.min(a.length, b.length);
+  let dot = 0, na = 0, nb = 0;
+  for (let i = 0; i < n; i++) {
+    dot += a[i] * b[i];
+    na += a[i] * a[i];
+    nb += b[i] * b[i];
+  }
+  return na && nb ? dot / (Math.sqrt(na) * Math.sqrt(nb)) : (na === nb ? 1 : 0);
+}
+
+export function clusterComponents(elements = [], { threshold = 0.95 } = {}) {
+  const byKind = {};
+  for (const el of elements) {
+    const key = `${el.kind}|${el.structuralHash}`;
+    (byKind[key] ||= []).push(el);
+  }
+  const out = [];
+  for (const group of Object.values(byKind)) {
+    const variants = [];
+    for (const el of group) {
+      const match = variants.find(v => cosine(v.example.styleVector || [], el.styleVector || []) >= threshold);
+      if (match) {
+        match.instanceCount++;
+      } else {
+        variants.push({ example: el, instanceCount: 1 });
+      }
+    }
+    out.push({
+      kind: group[0].kind,
+      structuralHash: group[0].structuralHash,
+      instanceCount: group.length,
+      variants: variants.map(v => ({ css: v.example.css, instanceCount: v.instanceCount })),
+    });
+  }
+  return out;
+}

package/src/extractors/css-health.js

@@ -0,0 +1,151 @@
+// CSS health audit — operates on page.coverage.stopCSSCoverage() output
+// serialized as [{ url, text, totalBytes, ranges:[{start,end}] }].
+
+function countUsed(ranges = []) {
+  let used = 0;
+  for (const r of ranges) used += Math.max(0, (r.end || 0) - (r.start || 0));
+  return used;
+}
+
+function countImportant(text) {
+  const m = text.match(/!important/g);
+  return m ? m.length : 0;
+}
+
+function countDuplicates(text) {
+  // Count prop:value pairs that appear >=2x across the sheet.
+  const seen = new Map();
+  const re = /([\w-]+)\s*:\s*([^;{}!]+)(\s*!important)?\s*;?/g;
+  for (const m of text.matchAll(re)) {
+    const key = `${m[1].trim()}:${m[2].trim()}`;
+    seen.set(key, (seen.get(key) || 0) + 1);
+  }
+  let dup = 0;
+  for (const n of seen.values()) if (n >= 2) dup += (n - 1);
+  return dup;
+}
+
+function countVendorPrefixes(text) {
+  return {
+    webkit: (text.match(/-webkit-/g) || []).length,
+    moz: (text.match(/-moz-/g) || []).length,
+    ms: (text.match(/-ms-/g) || []).length,
+    o: (text.match(/(^|[^-\w])-o-/g) || []).length,
+  };
+}
+
+function extractKeyframes(text) {
+  const out = [];
+  const re = /@keyframes\s+([\w-]+)\s*\{([\s\S]*?)\n\}/g;
+  for (const m of text.matchAll(re)) {
+    const body = m[2];
+    const steps = (body.match(/(\d+%|from|to)\s*\{/g) || []).length;
+    out.push({ name: m[1], steps });
+  }
+  return out;
+}
+
+function specificityFor(selector) {
+  // Simple WCAG-ish triple: ids, classes+attrs+pseudo-classes, types
+  const ids = (selector.match(/#[\w-]+/g) || []).length;
+  const classes = (selector.match(/\.[\w-]+|\[[^\]]+\]|:(?!:)[\w-]+(?:\([^)]+\))?/g) || []).length;
+  const types = (selector.match(/(?:^|[\s>+~,])([a-z][\w-]*)/gi) || []).length;
+  return [ids, classes, types];
+}
+
+function specificityDistribution(text) {
+  const triples = [];
+  const re = /([^{}]+)\{([^}]*)\}/g;
+  for (const m of text.matchAll(re)) {
+    const selectorList = m[1];
+    for (const sel of selectorList.split(',').map(s => s.trim()).filter(Boolean)) {
+      if (sel.startsWith('@')) continue;
+      triples.push(specificityFor(sel));
+    }
+  }
+  if (triples.length === 0) {
+    return { max: [0, 0, 0], average: [0, 0, 0], count: 0 };
+  }
+  let max = [0, 0, 0];
+  let sum = [0, 0, 0];
+  for (const t of triples) {
+    for (let i = 0; i < 3; i++) {
+      sum[i] += t[i];
+      if (t[i] > max[i]) max[i] = t[i];
+    }
+  }
+  const avg = sum.map(v => Math.round((v / triples.length) * 100) / 100);
+  return { max, average: avg, count: triples.length };
+}
+
+export function extractCssHealth(coverage = []) {
+  const sheets = [];
+  let totalBytes = 0;
+  let usedBytes = 0;
+  let importantCount = 0;
+  let duplicates = 0;
+  const vendorPrefixes = { webkit: 0, moz: 0, ms: 0, o: 0 };
+  const keyframes = [];
+  let specMax = [0, 0, 0];
+  let specSumWeighted = [0, 0, 0];
+  let specCount = 0;
+
+  for (const c of coverage) {
+    const text = c.text || '';
+    const sheetTotal = typeof c.totalBytes === 'number' ? c.totalBytes : text.length;
+    const sheetUsed = countUsed(c.ranges);
+    const sheetUnused = Math.max(0, sheetTotal - sheetUsed);
+    sheets.push({
+      url: c.url || '',
+      totalBytes: sheetTotal,
+      usedBytes: sheetUsed,
+      unusedBytes: sheetUnused,
+      unusedPercent: sheetTotal ? Math.round((sheetUnused / sheetTotal) * 100) : 0,
+    });
+    totalBytes += sheetTotal;
+    usedBytes += sheetUsed;
+
+    importantCount += countImportant(text);
+    duplicates += countDuplicates(text);
+
+    const vp = countVendorPrefixes(text);
+    vendorPrefixes.webkit += vp.webkit;
+    vendorPrefixes.moz += vp.moz;
+    vendorPrefixes.ms += vp.ms;
+    vendorPrefixes.o += vp.o;
+
+    keyframes.push(...extractKeyframes(text));
+
+    const spec = specificityDistribution(text);
+    for (let i = 0; i < 3; i++) {
+      if (spec.max[i] > specMax[i]) specMax[i] = spec.max[i];
+      specSumWeighted[i] += spec.average[i] * spec.count;
+    }
+    specCount += spec.count;
+  }
+
+  const unusedBytes = Math.max(0, totalBytes - usedBytes);
+  const unusedPercent = totalBytes ? Math.round((unusedBytes / totalBytes) * 100) : 0;
+  const specAvg = specCount > 0
+    ? specSumWeighted.map(v => Math.round((v / specCount) * 100) / 100)
+    : [0, 0, 0];
+
+  const issues = [];
+  if (importantCount > 0) issues.push(`${importantCount} !important rule${importantCount > 1 ? 's' : ''}`);
+  if (duplicates > 0) issues.push(`${duplicates} duplicate declaration${duplicates > 1 ? 's' : ''}`);
+  if (unusedPercent >= 50) issues.push(`${unusedPercent}% unused CSS`);
+
+  return {
+    sheets,
+    totalBytes,
+    usedBytes,
+    unusedBytes,
+    unusedPercent,
+    importantCount,
+    duplicates,
+    vendorPrefixes,
+    keyframes,
+    specificity: { max: specMax, average: specAvg, count: specCount },
+    issues,
+  };
+}

package/src/extractors/scoring.js

@@ -73,7 +73,26 @@ export function scoreDesignSystem(design) {
     issues.push(`${design.accessibility.failCount} WCAG contrast failures`);
   }
 
-  // 7. CSS variable usage (0-100)
+  // 7. CSS health (0-100) — additive; does not affect existing weights.
+  if (design.cssHealth) {
+    const ch = design.cssHealth;
+    let h = 100;
+    if (ch.unusedPercent >= 70) h -= 30;
+    else if (ch.unusedPercent >= 50) h -= 20;
+    else if (ch.unusedPercent >= 30) h -= 10;
+    if (ch.importantCount >= 20) h -= 20;
+    else if (ch.importantCount >= 5) h -= 10;
+    else if (ch.importantCount >= 1) h -= 5;
+    if (ch.duplicates >= 20) h -= 15;
+    else if (ch.duplicates >= 5) h -= 8;
+    else if (ch.duplicates >= 1) h -= 3;
+    scores.cssHealth = Math.max(0, h);
+    if (ch.importantCount >= 5) issues.push(`${ch.importantCount} !important rules — prefer specificity over overrides`);
+    if (ch.unusedPercent >= 50) issues.push(`${ch.unusedPercent}% of CSS is unused — consider purging`);
+    if (ch.duplicates >= 5) issues.push(`${ch.duplicates} duplicate CSS declarations`);
+  }
+
+  // 8. CSS variable usage (0-100)
   const varCount = Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0);
   if (varCount >= 20) scores.tokenization = 100;
   else if (varCount >= 10) scores.tokenization = 75;

package/src/extractors/semantic-regions.js

@@ -0,0 +1,44 @@
+// Classify page sections: nav/hero/features/pricing/testimonials/cta/footer/sidebar/content.
+
+const KW = {
+  pricing: /\b(\$\s*\d|per\s?month|\/mo\b|pricing|free|billed)/i,
+  testimonials: /(customer|review|testimonial|said|"|")/i,
+  features: /(feature|benefit|why|what you get)/i,
+  cta: /(get started|sign up|try free|start now|request demo|contact sales)/i,
+};
+
+function classify(s) {
+  const role = (s.role || '').toLowerCase();
+  const tag = (s.tag || '').toLowerCase();
+  if (tag === 'nav' || role === 'navigation') return 'nav';
+  if (tag === 'header' || role === 'banner') return 'nav';
+  if (tag === 'footer' || role === 'contentinfo') return 'footer';
+  if (tag === 'aside' || role === 'complementary') return 'sidebar';
+
+  const cls = (s.className || '').toLowerCase();
+  const id = (s.id || '').toLowerCase();
+  const blob = `${cls} ${id}`;
+  const text = s.text || '';
+  const headings = s.headings || [];
+
+  if (/hero/.test(blob)) return 'hero';
+  if (/pricing/.test(blob) || KW.pricing.test(text)) return 'pricing';
+  if (/testimonial|review/.test(blob) || KW.testimonials.test(text)) return 'testimonials';
+  if (/features?|grid/.test(blob) && s.cardCount >= 3) return 'features';
+  if (KW.features.test(text) && s.cardCount >= 3) return 'features';
+  if (s.buttonCount <= 2 && headings.length && text.length < 400 && KW.cta.test(text)) return 'cta';
+  if (headings.length === 1 && s.buttonCount >= 1 && s.bounds && s.bounds.h > 300) return 'hero';
+  return 'content';
+}
+
+export function extractSemanticRegions(sections = []) {
+  return sections.map(s => ({
+    role: classify(s),
+    tag: s.tag,
+    bounds: s.bounds,
+    heading: (s.headings && s.headings[0]) || null,
+    buttonCount: s.buttonCount || 0,
+    cardCount: s.cardCount || 0,
+    className: s.className || null,
+  }));
+}

package/src/extractors/stack-fingerprint.js

@@ -0,0 +1,88 @@
+// Framework + CSS layer + analytics fingerprint.
+// Pure function over signals collected by the crawler.
+
+const FRAMEWORK_BY_GLOBAL = {
+  '__NEXT_DATA__': 'next',
+  '__NUXT__': 'nuxt',
+  '___gatsby': 'gatsby',
+  '_remixContext': 'remix',
+  'React': 'react',
+  'Vue': 'vue',
+  'Shopify': 'shopify',
+  'wp': 'wordpress',
+};
+
+const SCRIPT_PATTERNS = [
+  [/_next\/static/, 'next'],
+  [/\/nuxt\//, 'nuxt'],
+  [/\/astro\//, 'astro'],
+  [/\/sveltekit\//, 'sveltekit'],
+  [/shopify\./, 'shopify'],
+  [/wp-(content|includes)/, 'wordpress'],
+  [/webflow\.com/, 'webflow'],
+  [/framerusercontent/, 'framer'],
+];
+
+const ANALYTICS = {
+  gtag: /googletagmanager\.com|google-analytics/,
+  plausible: /plausible\.io/,
+  posthog: /posthog\.com/,
+  segment: /segment\.(io|com)/,
+  mixpanel: /mixpanel/,
+  amplitude: /amplitude/,
+  hotjar: /hotjar/,
+  vercelInsights: /\/_vercel\/insights/,
+};
+
+const TAILWIND_UTIL = /(^|\s)(flex|grid|block|inline|hidden|text-(xs|sm|base|lg|xl|\d+xl)|text-(gray|slate|zinc|red|blue|green|amber|neutral|stone)-\d+|bg-(gray|slate|zinc|red|blue|green|amber|neutral|stone)-\d+|p[xy]?-\d+|m[xy]?-\d+|gap-\d+|rounded(-\w+)?|shadow(-\w+)?|items-(start|center|end|baseline|stretch)|justify-(start|center|end|between|around|evenly)|grid-cols-\d+|col-span-\d+)(\s|$)/;
+
+function detectFramework(signals) {
+  for (const g of signals.windowGlobals || []) {
+    if (FRAMEWORK_BY_GLOBAL[g]) return FRAMEWORK_BY_GLOBAL[g];
+  }
+  for (const s of signals.scripts || []) {
+    for (const [re, name] of SCRIPT_PATTERNS) if (re.test(s)) return name;
+  }
+  return 'unknown';
+}
+
+function detectTailwind(signals) {
+  const classes = (signals.classNameSample || []).filter(c => typeof c === 'string');
+  const hits = classes.filter(c => TAILWIND_UTIL.test(c));
+  if (hits.length < Math.max(5, classes.length * 0.1)) return null;
+  const utilFreq = new Map();
+  for (const c of hits) {
+    for (const u of c.split(/\s+/).filter(Boolean)) {
+      utilFreq.set(u, (utilFreq.get(u) || 0) + 1);
+    }
+  }
+  const topUtilities = [...utilFreq.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 100)
+    .map(([u, n]) => ({ utility: u, count: n }));
+  return { detected: true, utilities: topUtilities };
+}
+
+function detectAnalytics(signals) {
+  const found = [];
+  for (const [name, re] of Object.entries(ANALYTICS)) {
+    if ((signals.scripts || []).some(s => re.test(s))) found.push(name);
+  }
+  return found;
+}
+
+export function extractStackFingerprint(signals = {}) {
+  const framework = detectFramework(signals);
+  const tailwind = detectTailwind(signals);
+  const css = { layer: tailwind ? 'tailwind' : 'unknown', tailwind: tailwind || null };
+  return {
+    framework,
+    css,
+    analytics: detectAnalytics(signals),
+    detectedFrom: {
+      globalCount: (signals.windowGlobals || []).length,
+      scriptCount: (signals.scripts || []).length,
+      classSampleSize: (signals.classNameSample || []).length,
+    },
+  };
+}

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),
+  };
+}