designlang 6.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/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;
 

package/src/index.js

@@ -16,6 +16,11 @@ import { extractZIndex } from './extractors/zindex.js';
 import { extractIcons } from './extractors/icons.js';
 import { extractFonts } from './extractors/fonts.js';
 import { extractImageStyles } from './extractors/images.js';
+import { extractStackFingerprint } from './extractors/stack-fingerprint.js';
+import { extractCssHealth } from './extractors/css-health.js';
+import { remediateFailingPairs } from './extractors/a11y-remediation.js';
+import { extractSemanticRegions } from './extractors/semantic-regions.js';
+import { clusterComponents } from './extractors/component-clusters.js';
 
 function safeExtract(fn, ...args) {
   try { return fn(...args); } catch { return null; }
@@ -54,6 +59,10 @@ export async function extractDesignLanguage(url, options = {}) {
     fonts: rawData.light.fontData ? (safeExtract(extractFonts, rawData.light.fontData) || { fonts: [], systemFonts: [] }) : { fonts: [], systemFonts: [] },
     images: rawData.light.images ? (safeExtract(extractImageStyles, rawData.light.images) || { patterns: [], aspectRatios: [] }) : { patterns: [], aspectRatios: [] },
     componentScreenshots: rawData.componentScreenshots || {},
+    stack: safeExtract(extractStackFingerprint, rawData.light.stack) || { framework: 'unknown', css: { layer: 'unknown', tailwind: null }, analytics: [], detectedFrom: { globalCount: 0, scriptCount: 0, classSampleSize: 0 } },
+    cssHealth: safeExtract(extractCssHealth, rawData.light.cssCoverage) || null,
+    regions: safeExtract(extractSemanticRegions, rawData.light.sections) || [],
+    componentClusters: safeExtract(clusterComponents, rawData.light.componentCandidates) || [],
     score: null,
   };
 
@@ -77,6 +86,26 @@ export async function extractDesignLanguage(url, options = {}) {
     };
   }
 
+  // A11y remediation: derive failing pairs from accessibility extractor output
+  // and propose palette colors that pass the matching WCAG rule.
+  try {
+    const a11y = design.accessibility || {};
+    const palette = (design.colors?.all || []).map(c => c.hex).filter(Boolean);
+    const failingPairs = (a11y.pairs || [])
+      .filter(p => p.level === 'FAIL')
+      .map(p => ({
+        fg: p.foreground,
+        bg: p.background,
+        ratio: p.ratio,
+        rule: p.isLargeText ? 'AA-large' : 'AA-normal',
+      }));
+    design.accessibility = {
+      ...a11y,
+      failingPairs,
+      remediation: remediateFailingPairs(failingPairs, palette),
+    };
+  } catch { /* non-fatal */ }
+
   design.score = safeExtract(scoreDesignSystem, design);
   if (design.score === null) warnings.push('scoring failed');
 
@@ -85,6 +114,7 @@ export async function extractDesignLanguage(url, options = {}) {
 
 export { crawlPage } from './crawler.js';
 export { formatTokens } from './formatters/tokens.js';
+export { formatDtcgTokens } from './formatters/dtcg-tokens.js';
 export { formatMarkdown } from './formatters/markdown.js';
 export { formatTailwind } from './formatters/tailwind.js';
 export { formatCssVars } from './formatters/css-vars.js';

package/src/mcp/resources.js

@@ -0,0 +1,64 @@
+// MCP resources builder. Pure/testable — returns { list, read } over the
+// loaded design + tokens. No transport concerns here.
+
+const URIS = {
+  'designlang://tokens/primitive': {
+    name: 'Primitive tokens',
+    description: 'DTCG primitive tier (raw colors, spacing, fonts, etc.)',
+  },
+  'designlang://tokens/semantic': {
+    name: 'Semantic tokens',
+    description: 'DTCG semantic tier (aliases like action.primary, surface.default)',
+  },
+  'designlang://regions': {
+    name: 'Semantic regions',
+    description: 'Detected page regions (hero, nav, footer, etc.) with bounds',
+  },
+  'designlang://components': {
+    name: 'Component clusters',
+    description: 'Clustered component instances with variant CSS',
+  },
+  'designlang://health': {
+    name: 'CSS health',
+    description: 'Coverage, dead-rule, and z-index-stack diagnostics',
+  },
+};
+
+function rpcError(code, message) {
+  const e = new Error(message);
+  e.code = code;
+  return e;
+}
+
+export function buildResources({ design, tokens }) {
+  function payloadFor(uri) {
+    switch (uri) {
+      case 'designlang://tokens/primitive': return tokens?.primitive ?? null;
+      case 'designlang://tokens/semantic':  return tokens?.semantic ?? null;
+      case 'designlang://regions':          return design?.regions ?? [];
+      case 'designlang://components':       return design?.componentClusters ?? [];
+      case 'designlang://health':           return design?.cssHealth ?? null;
+      default: return undefined;
+    }
+  }
+
+  return {
+    list() {
+      return Object.keys(URIS).map((uri) => ({
+        uri,
+        name: URIS[uri].name,
+        description: URIS[uri].description,
+        mimeType: 'application/json',
+      }));
+    },
+    read(uri) {
+      const payload = payloadFor(uri);
+      if (payload === undefined) throw rpcError(-32602, `Unknown resource URI: ${uri}`);
+      return {
+        uri,
+        mimeType: 'application/json',
+        text: JSON.stringify(payload),
+      };
+    },
+  };
+}