@nghitrum/dsforge 0.1.1

package/dist/index.js

@@ -0,0 +1,3324 @@
+// src/types/index.ts
+var TokenResolutionError = class extends Error {
+  constructor(message, path3, cause) {
+    super(message);
+    this.path = path3;
+    this.cause = cause;
+    this.name = "TokenResolutionError";
+  }
+};
+var CircularReferenceError = class extends TokenResolutionError {
+  constructor(cycle) {
+    const chain = cycle.join(" \u2192 ");
+    super(`Circular token reference detected: ${chain}`, cycle[0] ?? "");
+    this.cycle = cycle;
+    this.name = "CircularReferenceError";
+  }
+};
+var UnresolvedReferenceError = class extends TokenResolutionError {
+  constructor(refPath, fromToken) {
+    super(
+      `Token reference "{${refPath}}" in "${fromToken}" could not be resolved`,
+      fromToken
+    );
+    this.fromToken = fromToken;
+    this.name = "UnresolvedReferenceError";
+  }
+};
+
+// src/core/token-resolver.ts
+var REF_PATTERN = /\{([^{}]+)\}/g;
+var SOLE_REF_PATTERN = /^\{([^{}]+)\}$/;
+function getByPath(obj, segments) {
+  let current = obj;
+  for (const segment of segments) {
+    if (current === null || typeof current !== "object") return void 0;
+    current = current[segment];
+  }
+  return current;
+}
+function lookupRef(refPath, config) {
+  const segments = refPath.split(".");
+  if (config.tokens) {
+    const fromTokens = getByPath(config.tokens, segments);
+    if (fromTokens !== void 0) {
+      return fromTokens;
+    }
+  }
+  const fromRoot = getByPath(config, segments);
+  if (fromRoot !== void 0) {
+    return fromRoot;
+  }
+  return void 0;
+}
+var TokenResolver = class {
+  constructor(config) {
+    /** LRU-style cache: refPath → resolved concrete string */
+    this.cache = /* @__PURE__ */ new Map();
+    /** Tracks the current resolution chain for cycle detection */
+    this.stack = [];
+    this.warnings = [];
+    this.config = config;
+  }
+  // ─── Public API ─────────────────────────────────────────────────────────────
+  /**
+   * Resolve all tokens in the config.
+   * Returns a flat map of every token path to its concrete value.
+   *
+   * Resolution order ensures correct layering:
+   *   global → semantic → component
+   */
+  resolve() {
+    const tokens = {};
+    const layers = this.config.tokens;
+    if (!layers) {
+      return { tokens, warnings: this.warnings };
+    }
+    for (const [key, value] of Object.entries(layers.global ?? {})) {
+      const tokenPath = `global.${key}`;
+      try {
+        tokens[tokenPath] = this.resolveValue(String(value), tokenPath);
+      } catch (err) {
+        this.handleError(err, tokenPath);
+      }
+    }
+    for (const [key, value] of Object.entries(layers.semantic ?? {})) {
+      const tokenPath = `semantic.${key}`;
+      try {
+        tokens[tokenPath] = this.resolveValue(String(value), tokenPath);
+      } catch (err) {
+        this.handleError(err, tokenPath);
+      }
+    }
+    for (const [key, value] of Object.entries(layers.component ?? {})) {
+      const tokenPath = `component.${key}`;
+      try {
+        tokens[tokenPath] = this.resolveValue(String(value), tokenPath);
+      } catch (err) {
+        this.handleError(err, tokenPath);
+      }
+    }
+    return { tokens, warnings: this.warnings };
+  }
+  /**
+   * Resolve a single value in isolation.
+   * Useful for one-off resolution outside the full config context.
+   */
+  resolveOneValue(value, contextPath = "<anonymous>") {
+    return this.resolveValue(value, contextPath);
+  }
+  // ─── Core resolution logic ───────────────────────────────────────────────────
+  /**
+   * Resolve all {ref} patterns within a value string.
+   *
+   * Two modes:
+   *   - SOLE reference: "{global.blue-600}"  → return the resolved value directly
+   *     (preserves numeric types when the referenced value is a number)
+   *   - INTERPOLATED: "0 1px {shadow.color}" → replace refs inline, return string
+   */
+  resolveValue(value, currentPath) {
+    if (!value.includes("{")) {
+      return value;
+    }
+    const soleMatch = SOLE_REF_PATTERN.exec(value);
+    if (soleMatch?.[1] !== void 0) {
+      return this.resolveRef(soleMatch[1], currentPath);
+    }
+    return value.replace(REF_PATTERN, (_match, refPath) => {
+      try {
+        return this.resolveRef(refPath, currentPath);
+      } catch (err) {
+        if (err instanceof UnresolvedReferenceError) {
+          this.warnings.push({
+            type: "unresolved_ref",
+            path: currentPath,
+            message: err.message
+          });
+          return `{${refPath}}`;
+        }
+        throw err;
+      }
+    });
+  }
+  /**
+   * Resolve a single reference path to its concrete value.
+   * Implements:
+   *   - Cache lookup (avoid redundant resolution)
+   *   - Cycle detection via the resolution stack
+   *   - Recursive resolution (a ref can point to another ref)
+   */
+  resolveRef(refPath, fromToken) {
+    const cached = this.cache.get(refPath);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const cycleIndex = this.stack.indexOf(refPath);
+    if (cycleIndex !== -1) {
+      throw new CircularReferenceError([
+        ...this.stack.slice(cycleIndex),
+        refPath
+      ]);
+    }
+    const rawValue = lookupRef(refPath, this.config);
+    if (rawValue === void 0) {
+      throw new UnresolvedReferenceError(refPath, fromToken);
+    }
+    this.stack.push(refPath);
+    const resolved = this.resolveValue(String(rawValue), refPath);
+    this.stack.pop();
+    this.cache.set(refPath, resolved);
+    return resolved;
+  }
+  // ─── Error handling ──────────────────────────────────────────────────────────
+  handleError(err, path3) {
+    if (err instanceof CircularReferenceError) {
+      throw err;
+    }
+    if (err instanceof UnresolvedReferenceError) {
+      this.warnings.push({
+        type: "unresolved_ref",
+        path: path3,
+        message: err.message
+      });
+      return;
+    }
+    if (err instanceof Error) {
+      throw new TokenResolutionError(err.message, path3, err);
+    }
+    throw err;
+  }
+};
+function resolveTokens(config) {
+  return new TokenResolver(config).resolve();
+}
+function buildThemeCss(config, themeName) {
+  const theme = config.themes?.[themeName];
+  if (!theme) {
+    throw new Error(`Theme "${themeName}" not found in config.themes`);
+  }
+  const { tokens } = resolveTokens(config);
+  const lines = [];
+  for (const [tokenName, themeValue] of Object.entries(theme)) {
+    const cssVarName = `--${tokenName}`;
+    lines.push(`  ${cssVarName}: ${String(themeValue)};`);
+  }
+  for (const [tokenPath, resolvedValue] of Object.entries(tokens)) {
+    if (tokenPath.startsWith("semantic.")) {
+      const varName = tokenPath.replace("semantic.", "").replace(/\./g, "-");
+      const cssVarName = `--${varName}`;
+      const themeKey = varName;
+      if (!(themeKey in theme)) {
+        lines.push(`  ${cssVarName}: ${resolvedValue};`);
+      }
+    }
+  }
+  return `:root[data-theme="${themeName}"] {
+${lines.join("\n")}
+}`;
+}
+function extractRefs(value) {
+  const refs = [];
+  let match;
+  const pattern = new RegExp(REF_PATTERN.source, "g");
+  while ((match = pattern.exec(value)) !== null) {
+    if (match[1]) refs.push(match[1]);
+  }
+  return refs;
+}
+function hasRefs(value) {
+  return REF_PATTERN.test(value);
+}
+
+// src/utils/fs.ts
+import fs from "fs-extra";
+import path from "path";
+
+// src/schema/config.schema.ts
+import { z } from "zod";
+var RawValueSchema = z.union([z.string(), z.number()]);
+var TokenValueSchema = RawValueSchema;
+var CssLengthSchema = z.string().regex(
+  /^\d+(\.\d+)?(px|rem|em|%|vw|vh)?$/,
+  "Must be a valid CSS length (e.g. '4px', '0.25rem')"
+);
+var GlobalTokensSchema = z.record(z.string(), RawValueSchema).describe("Layer 1: primitive raw values only. No {references} allowed.");
+var SemanticTokensSchema = z.record(z.string(), TokenValueSchema).describe("Layer 2: intent-named tokens. May reference {global.*} tokens.");
+var ComponentTokensSchema = z.record(z.string(), TokenValueSchema).describe("Layer 3: component-specific. May reference global or semantic.");
+var TokenLayersSchema = z.object({
+  global: GlobalTokensSchema.optional(),
+  semantic: SemanticTokensSchema.optional(),
+  component: ComponentTokensSchema.optional()
+});
+var ColorSurfaceSchema = z.object({
+  default: TokenValueSchema,
+  subtle: TokenValueSchema.optional(),
+  overlay: TokenValueSchema.optional(),
+  inverse: TokenValueSchema.optional()
+});
+var ColorBorderSchema = z.object({
+  default: TokenValueSchema,
+  strong: TokenValueSchema.optional(),
+  focus: TokenValueSchema.optional(),
+  subtle: TokenValueSchema.optional()
+});
+var ColorTextSchema = z.object({
+  primary: TokenValueSchema,
+  secondary: TokenValueSchema.optional(),
+  disabled: TokenValueSchema.optional(),
+  inverse: TokenValueSchema.optional(),
+  onColor: TokenValueSchema.optional()
+});
+var StatusColorSetSchema = z.object({
+  bg: TokenValueSchema,
+  fg: TokenValueSchema,
+  border: TokenValueSchema.optional()
+});
+var ColorStatusSchema = z.object({
+  success: StatusColorSetSchema.optional(),
+  warning: StatusColorSetSchema.optional(),
+  danger: StatusColorSetSchema.optional(),
+  info: StatusColorSetSchema.optional()
+});
+var InteractiveStateSetSchema = z.object({
+  rest: TokenValueSchema,
+  hover: TokenValueSchema,
+  active: TokenValueSchema,
+  disabled: TokenValueSchema,
+  selected: TokenValueSchema.optional()
+});
+var ColorInteractiveSchema = z.object({
+  primary: InteractiveStateSetSchema.optional(),
+  secondary: InteractiveStateSetSchema.optional(),
+  danger: InteractiveStateSetSchema.optional()
+});
+var ColorConfigSchema = z.object({
+  surface: ColorSurfaceSchema.optional(),
+  border: ColorBorderSchema.optional(),
+  text: ColorTextSchema.optional(),
+  status: ColorStatusSchema.optional(),
+  interactive: ColorInteractiveSchema.optional()
+});
+var FontWeightSchema = z.union([
+  z.literal(100),
+  z.literal(200),
+  z.literal(300),
+  z.literal(400),
+  z.literal(500),
+  z.literal(600),
+  z.literal(700),
+  z.literal(800),
+  z.literal(900)
+]);
+var TypographyRoleSchema = z.object({
+  size: z.number().min(8).max(128).describe("Font size in px"),
+  weight: FontWeightSchema,
+  lineHeight: z.number().min(0.8).max(3).describe("Unitless line height multiplier"),
+  letterSpacing: z.union([z.string(), z.number()]).optional(),
+  fontFamily: z.string().optional()
+});
+var TypographyConfigSchema = z.object({
+  fontFamily: z.string().min(1),
+  roles: z.object({
+    display: TypographyRoleSchema.optional(),
+    h1: TypographyRoleSchema.optional(),
+    h2: TypographyRoleSchema.optional(),
+    h3: TypographyRoleSchema.optional(),
+    body: TypographyRoleSchema.optional(),
+    small: TypographyRoleSchema.optional(),
+    caption: TypographyRoleSchema.optional(),
+    label: TypographyRoleSchema.optional(),
+    code: TypographyRoleSchema.optional()
+  }).optional(),
+  /** Legacy — kept for backward compat; prefer roles */
+  scale: z.array(z.number().positive()).optional(),
+  fontWeights: z.array(FontWeightSchema).optional()
+});
+var SpacingConfigSchema = z.object({
+  baseUnit: z.number().positive().optional(),
+  scale: z.record(z.string(), z.number().nonnegative()).optional(),
+  semantic: z.record(z.string(), TokenValueSchema).optional()
+});
+var RadiusConfigSchema = z.record(z.string(), z.number().nonnegative()).describe(
+  "Named border-radius values in px. Keys: none, sm, md, lg, xl, full"
+);
+var ElevationConfigSchema = z.record(z.string(), z.string()).describe(
+  "Named shadow levels. Values are CSS box-shadow strings or 'none'."
+);
+var MotionDurationSchema = z.record(
+  z.string(),
+  z.number().nonnegative().describe("Duration in ms")
+);
+var MotionEasingSchema = z.record(
+  z.string(),
+  z.string().describe("CSS easing value: keyword or cubic-bezier(...)")
+);
+var MotionConfigSchema = z.object({
+  duration: MotionDurationSchema.optional(),
+  easing: MotionEasingSchema.optional()
+});
+var FocusRingSchema = z.object({
+  color: TokenValueSchema,
+  width: CssLengthSchema,
+  offset: CssLengthSchema,
+  style: z.enum(["solid", "dashed", "dotted"]).optional()
+});
+var StatesConfigSchema = z.object({
+  hoverOpacity: z.number().min(0).max(1).optional(),
+  activeOpacity: z.number().min(0).max(1).optional(),
+  disabledOpacity: z.number().min(0).max(1).optional(),
+  focusRing: FocusRingSchema.optional()
+});
+var BreakpointsSchema = z.record(
+  z.string(),
+  z.number().positive().describe("Breakpoint width in px")
+);
+var GridColumnsSchema = z.record(
+  z.string(),
+  z.number().int().positive().max(24)
+);
+var GridConfigSchema = z.object({
+  columns: GridColumnsSchema.optional(),
+  gutter: z.number().nonnegative().optional(),
+  margin: z.number().nonnegative().optional()
+});
+var LayoutConfigSchema = z.object({
+  breakpoints: BreakpointsSchema.optional(),
+  grid: GridConfigSchema.optional(),
+  container: z.record(z.string(), z.number().positive()).optional()
+});
+var ThemesConfigSchema = z.record(z.string(), z.record(z.string(), RawValueSchema)).describe(
+  "Named themes. Each is a flat map of semantic token overrides. Keys become CSS custom property names; values are concrete values."
+);
+var PhilosophyConfigSchema = z.object({
+  density: z.enum(["compact", "comfortable", "spacious"]).optional(),
+  elevation: z.enum(["minimal", "moderate", "expressive"]).optional(),
+  motion: z.enum(["none", "reduced", "full"]).optional()
+});
+var CustomizationConfigSchema = z.object({
+  extends: z.string().nullable().optional(),
+  overrides: z.record(z.string(), RawValueSchema).optional()
+});
+var SUPPORTED_TARGETS = ["react"];
+var OutputConfigSchema = z.object({
+  /**
+   * The framework adapter to use when generating component files.
+   *
+   * @default "react"
+   *
+   * Supported values: "react"
+   * Future values: "vue", "svelte", "angular", "react-native"
+   *
+   * An unknown value here will fail validation with an actionable message
+   * rather than silently generating incorrect output.
+   */
+  target: z.enum(SUPPORTED_TARGETS, {
+    errorMap: () => ({
+      message: `output.target must be one of: ${SUPPORTED_TARGETS.join(", ")}. Got an unsupported value. If you are trying to use a framework that is not yet supported, remove the output.target field or set it to "react".`
+    })
+  }).default("react")
+}).optional();
+var MetaConfigSchema = z.object({
+  name: z.string().min(1).regex(
+    /^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/,
+    "Must be a valid npm package name"
+  ),
+  version: z.string().regex(/^\d+\.\d+\.\d+/, "Must be a valid semver string (e.g. 0.1.0)"),
+  description: z.string().optional(),
+  preset: z.enum(["compact", "comfortable", "spacious"]).optional(),
+  npmScope: z.string().regex(
+    /^@[a-z0-9-~][a-z0-9-._~]*$/,
+    "Must be a valid npm scope (e.g. @myorg)"
+  ).optional()
+});
+var DesignSystemConfigSchema = z.object({
+  meta: MetaConfigSchema,
+  tokens: TokenLayersSchema.optional(),
+  themes: ThemesConfigSchema.optional(),
+  color: ColorConfigSchema.optional(),
+  typography: TypographyConfigSchema.optional(),
+  spacing: SpacingConfigSchema.optional(),
+  radius: RadiusConfigSchema.optional(),
+  elevation: ElevationConfigSchema.optional(),
+  motion: MotionConfigSchema.optional(),
+  states: StatesConfigSchema.optional(),
+  layout: LayoutConfigSchema.optional(),
+  philosophy: PhilosophyConfigSchema.optional(),
+  customization: CustomizationConfigSchema.optional(),
+  output: OutputConfigSchema
+});
+var A11yRuleSchema = z.object({
+  keyboard: z.boolean().optional(),
+  focusRing: z.boolean().optional(),
+  ariaLabel: z.enum(["required", "optional", "forbidden"]).optional(),
+  role: z.string().optional()
+});
+var ComponentRuleSchema = z.object({
+  allowedVariants: z.array(z.string()).optional(),
+  requiredProps: z.array(z.string()).optional(),
+  maxWidth: z.string().optional(),
+  allowedRadius: z.array(z.string()).optional(),
+  allowedShadows: z.array(z.string()).optional(),
+  colorPalette: z.array(z.string()).optional(),
+  tokens: z.record(z.string(), TokenValueSchema).optional(),
+  a11y: A11yRuleSchema.optional()
+});
+var RulesConfigSchema = z.record(z.string(), ComponentRuleSchema);
+
+// src/utils/logger.ts
+import chalk from "chalk";
+
+// src/utils/contrast.ts
+function parseHex(hex) {
+  const clean = hex.replace(/^#/, "");
+  if (clean.length === 3) {
+    const r = parseInt(clean[0] + clean[0], 16);
+    const g = parseInt(clean[1] + clean[1], 16);
+    const b = parseInt(clean[2] + clean[2], 16);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+    return [r, g, b];
+  }
+  if (clean.length === 6) {
+    const r = parseInt(clean.slice(0, 2), 16);
+    const g = parseInt(clean.slice(2, 4), 16);
+    const b = parseInt(clean.slice(4, 6), 16);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+    return [r, g, b];
+  }
+  return null;
+}
+function linearize(channel) {
+  const sRGB = channel / 255;
+  return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
+}
+function relativeLuminance(r, g, b) {
+  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+}
+function contrastRatio(l1, l2) {
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function hexContrastRatio(foreground, background) {
+  const fg = parseHex(foreground);
+  const bg = parseHex(background);
+  if (!fg || !bg) return null;
+  const fgLum = relativeLuminance(...fg);
+  const bgLum = relativeLuminance(...bg);
+  return contrastRatio(fgLum, bgLum);
+}
+var WCAG_THRESHOLDS = {
+  AA: { normal: 4.5, large: 3 },
+  AAA: { normal: 7, large: 4.5 }
+};
+function checkContrast(foreground, background, level = "AA", textSize = "normal") {
+  const ratio = hexContrastRatio(foreground, background);
+  if (ratio === null) return null;
+  const required = WCAG_THRESHOLDS[level][textSize];
+  return {
+    ratio,
+    passes: ratio >= required,
+    level,
+    textSize,
+    required,
+    ratioDisplay: ratio.toFixed(2)
+  };
+}
+function suggestContrastFix(foreground, background, level = "AA", textSize = "normal") {
+  const bgParsed = parseHex(background);
+  if (!bgParsed) return null;
+  const bgLum = relativeLuminance(...bgParsed);
+  const required = WCAG_THRESHOLDS[level][textSize];
+  const shouldDarken = bgLum > 0.5;
+  const fgParsed = parseHex(foreground);
+  if (!fgParsed) return null;
+  let [r, g, b] = fgParsed;
+  for (let step = 0; step < 30; step++) {
+    const fgLum = relativeLuminance(r, g, b);
+    const ratio = contrastRatio(fgLum, bgLum);
+    if (ratio >= required) {
+      return rgbToHex(r, g, b);
+    }
+    if (shouldDarken) {
+      r = Math.max(0, Math.round(r * 0.88));
+      g = Math.max(0, Math.round(g * 0.88));
+      b = Math.max(0, Math.round(b * 0.88));
+    } else {
+      r = Math.min(255, Math.round(r + (255 - r) * 0.12));
+      g = Math.min(255, Math.round(g + (255 - g) * 0.12));
+      b = Math.min(255, Math.round(b + (255 - b) * 0.12));
+    }
+  }
+  return null;
+}
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
+}
+function isHexColor(value) {
+  return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
+}
+
+// src/cli/commands/validate.ts
+var HEALTH_CHECKS = [
+  // ── 1. Token architecture (15 pts) ──────────────────────────────────────────
+  {
+    id: "token-architecture",
+    label: "Token Architecture",
+    maxScore: 15,
+    run(config) {
+      const issues = [];
+      const layers = config.tokens;
+      if (!layers) {
+        issues.push({
+          severity: "error",
+          code: "TOKEN_ARCH_MISSING",
+          message: 'No "tokens" section defined. Add tokens.global, tokens.semantic, tokens.component.',
+          path: "tokens",
+          suggestion: 'Add a "tokens": { "global": {}, "semantic": {}, "component": {} } section.'
+        });
+        return issues;
+      }
+      if (!layers.global || Object.keys(layers.global).length === 0) {
+        issues.push({
+          severity: "error",
+          code: "TOKEN_GLOBAL_EMPTY",
+          message: "tokens.global is empty. Global tokens are the raw value source of truth.",
+          path: "tokens.global",
+          suggestion: 'Add your brand palette as global tokens: { "blue-600": "#2563eb" }'
+        });
+      }
+      if (!layers.semantic || Object.keys(layers.semantic).length === 0) {
+        issues.push({
+          severity: "error",
+          code: "TOKEN_SEMANTIC_EMPTY",
+          message: "tokens.semantic is empty. Semantic tokens give intent to raw values.",
+          path: "tokens.semantic",
+          suggestion: 'Add semantic tokens: { "color-action": "{global.blue-600}" }'
+        });
+      }
+      for (const [key, value] of Object.entries(layers.global ?? {})) {
+        const strValue = String(value);
+        if (extractRefs(strValue).length > 0) {
+          issues.push({
+            severity: "error",
+            code: "TOKEN_GLOBAL_REF",
+            message: `global.${key} contains a reference "${strValue}". Global tokens must be raw values.`,
+            path: `tokens.global.${key}`,
+            suggestion: "Replace the reference with the actual value."
+          });
+        }
+      }
+      return issues;
+    }
+  },
+  // ── 2. Color roles (15 pts) ─────────────────────────────────────────────────
+  {
+    id: "color-roles",
+    label: "Color Roles",
+    maxScore: 15,
+    run(config) {
+      const issues = [];
+      const color = config.color;
+      if (!color) {
+        issues.push({
+          severity: "error",
+          code: "COLOR_ROLES_MISSING",
+          message: 'No "color" section defined. Define semantic color roles (surface, border, text, status).',
+          path: "color"
+        });
+        return issues;
+      }
+      if (!color.surface?.default) {
+        issues.push({
+          severity: "error",
+          code: "COLOR_SURFACE_MISSING",
+          message: "color.surface.default is required.",
+          path: "color.surface"
+        });
+      }
+      if (!color.text?.primary) {
+        issues.push({
+          severity: "error",
+          code: "COLOR_TEXT_MISSING",
+          message: "color.text.primary is required.",
+          path: "color.text"
+        });
+      }
+      if (!color.border?.default) {
+        issues.push({
+          severity: "warning",
+          code: "COLOR_BORDER_MISSING",
+          message: "color.border.default is not defined.",
+          path: "color.border",
+          suggestion: "Add a default border color to keep borders consistent."
+        });
+      }
+      const statusVariants = ["success", "warning", "danger", "info"];
+      for (const variant of statusVariants) {
+        if (!color.status?.[variant]) {
+          issues.push({
+            severity: "warning",
+            code: `COLOR_STATUS_${variant.toUpperCase()}_MISSING`,
+            message: `color.status.${variant} is not defined.`,
+            path: `color.status.${variant}`,
+            suggestion: `Add bg, fg, and border values for ${variant} status.`
+          });
+        }
+      }
+      return issues;
+    }
+  },
+  // ── 3. Dark mode / theming (15 pts) ─────────────────────────────────────────
+  {
+    id: "dark-mode",
+    label: "Theme Support",
+    maxScore: 15,
+    run(config) {
+      const issues = [];
+      if (!config.themes) {
+        issues.push({
+          severity: "error",
+          code: "THEMES_MISSING",
+          message: 'No "themes" section defined. Without it, dark mode is impossible without a full rewrite.',
+          path: "themes",
+          suggestion: 'Add "themes": { "light": {...}, "dark": {...} } to your config.'
+        });
+        return issues;
+      }
+      if (!config.themes["light"]) {
+        issues.push({
+          severity: "error",
+          code: "THEME_LIGHT_MISSING",
+          message: "themes.light is not defined.",
+          path: "themes.light"
+        });
+      }
+      if (!config.themes["dark"]) {
+        issues.push({
+          severity: "error",
+          code: "THEME_DARK_MISSING",
+          message: "themes.dark is not defined. Dark mode requires a dark theme override map.",
+          path: "themes.dark",
+          suggestion: "Add a dark theme that remaps surface, text, and border semantic tokens."
+        });
+      }
+      return issues;
+    }
+  },
+  // ── 4. Typography roles (10 pts) ─────────────────────────────────────────────
+  {
+    id: "typography-roles",
+    label: "Typography Roles",
+    maxScore: 10,
+    run(config) {
+      const issues = [];
+      const typo = config.typography;
+      if (!typo) {
+        issues.push({
+          severity: "error",
+          code: "TYPOGRAPHY_MISSING",
+          message: 'No "typography" section defined.',
+          path: "typography"
+        });
+        return issues;
+      }
+      if (!typo.roles) {
+        issues.push({
+          severity: "error",
+          code: "TYPOGRAPHY_ROLES_MISSING",
+          message: "typography.roles is not defined. A raw scale array is insufficient \u2014 roles carry intent.",
+          path: "typography.roles",
+          suggestion: "Replace typography.scale with named roles: display, h1, h2, body, small, caption."
+        });
+        return issues;
+      }
+      const requiredRoles = ["body"];
+      const recommendedRoles = [
+        "display",
+        "h1",
+        "h2",
+        "small",
+        "caption"
+      ];
+      for (const role of requiredRoles) {
+        if (!typo.roles[role]) {
+          issues.push({
+            severity: "error",
+            code: `TYPOGRAPHY_ROLE_${role.toUpperCase()}_MISSING`,
+            message: `typography.roles.${role} is required.`,
+            path: `typography.roles.${role}`
+          });
+        }
+      }
+      for (const role of recommendedRoles) {
+        if (!typo.roles[role]) {
+          issues.push({
+            severity: "warning",
+            code: `TYPOGRAPHY_ROLE_${role.toUpperCase()}_MISSING`,
+            message: `typography.roles.${role} is not defined.`,
+            path: `typography.roles.${role}`,
+            suggestion: `Add a ${role} role with size, weight, and lineHeight.`
+          });
+        }
+      }
+      for (const [roleName, roleValue] of Object.entries(typo.roles ?? {})) {
+        if (roleValue && !roleValue.lineHeight) {
+          issues.push({
+            severity: "error",
+            code: "TYPOGRAPHY_ROLE_NO_LINE_HEIGHT",
+            message: `typography.roles.${roleName} is missing lineHeight. Line height is required for readability.`,
+            path: `typography.roles.${roleName}.lineHeight`,
+            suggestion: `Add "lineHeight": 1.5 (or similar) to typography.roles.${roleName}.`
+          });
+        }
+      }
+      return issues;
+    }
+  },
+  // ── 5. Spacing semantic scale (8 pts) ────────────────────────────────────────
+  {
+    id: "spacing-semantic",
+    label: "Spacing Semantic Scale",
+    maxScore: 8,
+    run(config) {
+      const issues = [];
+      const spacing = config.spacing;
+      if (!spacing) {
+        issues.push({
+          severity: "error",
+          code: "SPACING_MISSING",
+          message: 'No "spacing" section defined.',
+          path: "spacing"
+        });
+        return issues;
+      }
+      if (!spacing.scale || Object.keys(spacing.scale).length < 6) {
+        issues.push({
+          severity: "error",
+          code: "SPACING_SCALE_INSUFFICIENT",
+          message: `spacing.scale has fewer than 6 named steps (found ${Object.keys(spacing.scale ?? {}).length}). A robust scale needs at least 6.`,
+          path: "spacing.scale",
+          suggestion: 'Define at least: { "1": 4, "2": 8, "3": 12, "4": 16, "5": 24, "6": 32 }'
+        });
+      }
+      if (!spacing.semantic || Object.keys(spacing.semantic).length === 0) {
+        issues.push({
+          severity: "error",
+          code: "SPACING_SEMANTIC_MISSING",
+          message: "spacing.semantic is not defined. Without it, engineers arithmetic-derive spacing rather than using intent-named tokens.",
+          path: "spacing.semantic",
+          suggestion: 'Add "component-padding-md", "layout-gap-sm" etc. as semantic tokens.'
+        });
+      }
+      return issues;
+    }
+  },
+  // ── 6. Interactive states (8 pts) ────────────────────────────────────────────
+  {
+    id: "interactive-states",
+    label: "Interactive States",
+    maxScore: 8,
+    run(config) {
+      const issues = [];
+      if (!config.states) {
+        issues.push({
+          severity: "error",
+          code: "STATES_MISSING",
+          message: 'No "states" section defined. Without state tokens every component invents its own hover/focus styles.',
+          path: "states",
+          suggestion: 'Add "states": { "focusRing": {...}, "hoverOpacity": 0.08, "disabledOpacity": 0.4 }'
+        });
+        return issues;
+      }
+      if (!config.states.focusRing) {
+        issues.push({
+          severity: "error",
+          code: "STATES_FOCUS_RING_MISSING",
+          message: "states.focusRing is not defined. Focus rings are required for keyboard accessibility.",
+          path: "states.focusRing",
+          suggestion: 'Add "focusRing": { "color": "...", "width": "2px", "offset": "2px" }'
+        });
+      }
+      if (!config.color?.interactive?.primary) {
+        issues.push({
+          severity: "warning",
+          code: "STATES_INTERACTIVE_MISSING",
+          message: "color.interactive.primary is not defined. Without it, hover/active/disabled colors are undefined.",
+          path: "color.interactive.primary",
+          suggestion: 'Add rest/hover/active/disabled values to "color.interactive.primary".'
+        });
+      }
+      return issues;
+    }
+  },
+  // ── 7. Motion tokens (6 pts) ──────────────────────────────────────────────────
+  {
+    id: "motion-tokens",
+    label: "Motion Tokens",
+    maxScore: 6,
+    run(config) {
+      const issues = [];
+      const motion = config.motion;
+      if (!motion) {
+        issues.push({
+          severity: "warning",
+          code: "MOTION_MISSING",
+          message: 'No "motion" section defined. Animation durations and easing will be magic numbers.',
+          path: "motion",
+          suggestion: 'Add "motion": { "duration": { "fast": 100, "normal": 200 }, "easing": { "standard": "..." } }'
+        });
+        return issues;
+      }
+      const durationCount = Object.keys(motion.duration ?? {}).length;
+      if (durationCount < 2) {
+        issues.push({
+          severity: "warning",
+          code: "MOTION_DURATION_INSUFFICIENT",
+          message: `motion.duration has only ${durationCount} value(s). Define at least 3 (fast, normal, slow).`,
+          path: "motion.duration"
+        });
+      }
+      if (!motion.easing || Object.keys(motion.easing).length === 0) {
+        issues.push({
+          severity: "warning",
+          code: "MOTION_EASING_MISSING",
+          message: "motion.easing is not defined.",
+          path: "motion.easing",
+          suggestion: 'Add "standard" and "decelerate" easing curves.'
+        });
+      }
+      return issues;
+    }
+  },
+  // ── 8. Elevation (6 pts) ─────────────────────────────────────────────────────
+  {
+    id: "elevation",
+    label: "Elevation Scale",
+    maxScore: 6,
+    run(config) {
+      const issues = [];
+      const elevation = config.elevation;
+      if (!elevation || Object.keys(elevation).length === 0) {
+        issues.push({
+          severity: "warning",
+          code: "ELEVATION_MISSING",
+          message: 'No "elevation" section defined. Shadow values will be inconsistent.',
+          path: "elevation",
+          suggestion: 'Add at least 4 named shadow levels: { "0": "none", "1": "...", "2": "...", "3": "..." }'
+        });
+        return issues;
+      }
+      if (Object.keys(elevation).length < 3) {
+        issues.push({
+          severity: "warning",
+          code: "ELEVATION_INSUFFICIENT",
+          message: `elevation has only ${Object.keys(elevation).length} level(s). Define at least 3 for a usable scale.`,
+          path: "elevation"
+        });
+      }
+      return issues;
+    }
+  },
+  // ── 9. Layout & breakpoints (6 pts) ──────────────────────────────────────────
+  {
+    id: "layout-grid",
+    label: "Layout & Breakpoints",
+    maxScore: 6,
+    run(config) {
+      const issues = [];
+      const layout = config.layout;
+      if (!layout) {
+        issues.push({
+          severity: "warning",
+          code: "LAYOUT_MISSING",
+          message: 'No "layout" section defined. Responsive behavior will be undefined.',
+          path: "layout",
+          suggestion: 'Add "layout": { "breakpoints": { "sm": 640, "md": 768, "lg": 1024 }, "grid": {...} }'
+        });
+        return issues;
+      }
+      const bpCount = Object.keys(layout.breakpoints ?? {}).length;
+      if (bpCount < 3) {
+        issues.push({
+          severity: "warning",
+          code: "LAYOUT_BREAKPOINTS_INSUFFICIENT",
+          message: `layout.breakpoints has only ${bpCount} breakpoint(s). Define at least 3 for responsive design.`,
+          path: "layout.breakpoints"
+        });
+      }
+      if (!layout.grid?.columns) {
+        issues.push({
+          severity: "warning",
+          code: "LAYOUT_GRID_MISSING",
+          message: "layout.grid.columns is not defined. Grid column counts per breakpoint are needed for consistent layouts.",
+          path: "layout.grid.columns"
+        });
+      }
+      return issues;
+    }
+  }
+];
+function runTokenResolutionCheck(config) {
+  const issues = [];
+  try {
+    const { warnings } = resolveTokens(config);
+    for (const w of warnings) {
+      issues.push({
+        severity: "error",
+        code: "TOKEN_UNRESOLVED_REF",
+        message: w.message,
+        path: w.path,
+        suggestion: "Check that the referenced token exists in tokens.global or tokens.semantic."
+      });
+    }
+  } catch (err) {
+    if (err instanceof CircularReferenceError) {
+      issues.push({
+        severity: "error",
+        code: "TOKEN_CIRCULAR_REF",
+        message: `Circular token reference: ${err.cycle.join(" \u2192 ")}`,
+        path: err.path,
+        suggestion: "Break the cycle by resolving one of the references to a raw value."
+      });
+    } else {
+      issues.push({
+        severity: "error",
+        code: "TOKEN_RESOLUTION_FAILED",
+        message: `Token resolution failed: ${err.message}`,
+        path: "tokens"
+      });
+    }
+  }
+  return issues;
+}
+function runGovernanceChecks(_config, rules) {
+  const issues = [];
+  for (const [component, rule] of Object.entries(rules)) {
+    for (const [tokenName, tokenValue] of Object.entries(rule.tokens ?? {})) {
+      const refs = extractRefs(String(tokenValue));
+      for (const ref of refs) {
+        if (!ref.includes(".")) {
+          issues.push({
+            severity: "warning",
+            code: "RULE_INVALID_REF_FORMAT",
+            message: `rules.${component}.tokens.${tokenName}: reference "{${ref}}" has no layer prefix (expected "layer.key").`,
+            path: `rules.${component}.tokens.${tokenName}`,
+            suggestion: `Use "{semantic.${ref}}" or "{global.${ref}}" format.`
+          });
+        }
+      }
+    }
+  }
+  return issues;
+}
+function runContrastChecks(config) {
+  const issues = [];
+  const { tokens } = resolveTokens(config);
+  function resolveColor(value) {
+    const str = String(value ?? "");
+    if (!str) return null;
+    const refMatch = /^\{([^{}]+)\}$/.exec(str);
+    if (refMatch?.[1]) {
+      const resolved = tokens[refMatch[1]];
+      return resolved && isHexColor(resolved) ? resolved : null;
+    }
+    return isHexColor(str) ? str : null;
+  }
+  const pairs = [];
+  const textPrimary = resolveColor(config.color?.text?.primary);
+  const textSecondary = resolveColor(config.color?.text?.secondary);
+  const textDisabled = resolveColor(config.color?.text?.disabled);
+  const textInverse = resolveColor(config.color?.text?.inverse);
+  const bgDefault = resolveColor(config.color?.surface?.default);
+  const bgSubtle = resolveColor(config.color?.surface?.subtle);
+  const bgInverse = resolveColor(config.color?.surface?.inverse);
+  if (textPrimary && bgDefault)
+    pairs.push([
+      textPrimary,
+      bgDefault,
+      "color.text.primary on color.surface.default"
+    ]);
+  if (textSecondary && bgDefault)
+    pairs.push([
+      textSecondary,
+      bgDefault,
+      "color.text.secondary on color.surface.default"
+    ]);
+  if (textPrimary && bgSubtle)
+    pairs.push([
+      textPrimary,
+      bgSubtle,
+      "color.text.primary on color.surface.subtle"
+    ]);
+  if (textInverse && bgInverse)
+    pairs.push([
+      textInverse,
+      bgInverse,
+      "color.text.inverse on color.surface.inverse"
+    ]);
+  for (const [statusName, statusValue] of Object.entries(
+    config.color?.status ?? {}
+  )) {
+    if (!statusValue) continue;
+    const fg = resolveColor(statusValue.fg);
+    const bg = resolveColor(statusValue.bg);
+    if (fg && bg) pairs.push([fg, bg, `color.status.${statusName}.fg on .bg`]);
+  }
+  const actionBg = resolveColor(
+    tokens["semantic.color-action"] ?? config.color?.interactive?.primary?.rest
+  );
+  const actionText = resolveColor(config.color?.text?.onColor);
+  if (actionBg && actionText)
+    pairs.push([
+      actionText,
+      actionBg,
+      "color.text.onColor on color-action (button text)"
+    ]);
+  for (const [fg, bg, label] of pairs) {
+    const result = checkContrast(fg, bg, "AA", "normal");
+    if (!result) continue;
+    if (!result.passes) {
+      const fix = suggestContrastFix(fg, bg, "AA", "normal");
+      issues.push({
+        severity: "error",
+        code: "A11Y_CONTRAST_FAIL",
+        message: `${label}: contrast ${result.ratioDisplay}:1 (required ${result.required}:1 for WCAG AA)`,
+        path: label,
+        suggestion: fix ? `Adjust foreground to approximately ${fix}` : `Increase contrast between ${fg} and ${bg} to at least ${result.required}:1`
+      });
+    }
+  }
+  if (textDisabled && bgDefault) {
+    const result = checkContrast(textDisabled, bgDefault, "AA", "normal");
+    if (result && result.ratio < 1.5) {
+      issues.push({
+        severity: "warning",
+        code: "A11Y_DISABLED_TOO_FAINT",
+        message: `color.text.disabled has contrast ${result.ratioDisplay}:1 \u2014 disabled text should remain perceivable.`,
+        path: "color.text.disabled",
+        suggestion: "Keep disabled text contrast above 1.5:1 even though AA exemption applies."
+      });
+    }
+  }
+  return issues;
+}
+function computeScore(config, rules, issues) {
+  let score = 0;
+  for (const check of HEALTH_CHECKS) {
+    const checkIssues = check.run(config, rules);
+    const hasErrors = checkIssues.some((i) => i.severity === "error");
+    const hasWarnings = checkIssues.some((i) => i.severity === "warning");
+    if (!hasErrors && !hasWarnings) {
+      score += check.maxScore;
+    } else if (!hasErrors && hasWarnings) {
+      score += Math.floor(check.maxScore * 0.6);
+    }
+  }
+  void issues;
+  return score;
+}
+function validateConfig(config, rules) {
+  const allIssues = [];
+  for (const check of HEALTH_CHECKS) {
+    allIssues.push(...check.run(config, rules));
+  }
+  allIssues.push(...runTokenResolutionCheck(config));
+  allIssues.push(...runGovernanceChecks(config, rules));
+  allIssues.push(...runContrastChecks(config));
+  const maxScore = HEALTH_CHECKS.reduce((sum, c) => sum + c.maxScore, 0);
+  const score = computeScore(config, rules, allIssues);
+  const valid = !allIssues.some((i) => i.severity === "error");
+  return { valid, score, maxScore, issues: allIssues };
+}
+
+// src/cli/commands/init.ts
+import path2 from "path";
+import fs2 from "fs-extra";
+import chalk3 from "chalk";
+
+// src/cli/prompt.ts
+import readline from "readline";
+import chalk2 from "chalk";
+var rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+// src/cli/commands/init.ts
+var SPACING_PRESETS = {
+  compact: {
+    "1": 2,
+    "2": 4,
+    "3": 8,
+    "4": 12,
+    "5": 16,
+    "6": 24,
+    "7": 32,
+    "8": 48
+  },
+  comfortable: {
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 24,
+    "6": 32,
+    "7": 48,
+    "8": 64
+  },
+  spacious: {
+    "1": 6,
+    "2": 12,
+    "3": 18,
+    "4": 24,
+    "5": 36,
+    "6": 48,
+    "7": 72,
+    "8": 96
+  }
+};
+var RADIUS_PRESETS = {
+  compact: { none: 0, sm: 2, md: 3, lg: 6, xl: 10, full: 9999 },
+  comfortable: { none: 0, sm: 2, md: 4, lg: 8, xl: 16, full: 9999 },
+  spacious: { none: 0, sm: 3, md: 6, lg: 12, xl: 20, full: 9999 }
+};
+function buildInitialConfig(name, preset = "comfortable") {
+  const spacing = SPACING_PRESETS[preset];
+  const radius = RADIUS_PRESETS[preset];
+  return {
+    meta: {
+      name,
+      version: "0.1.0",
+      description: `${name} design system`,
+      preset
+    },
+    tokens: {
+      global: {
+        // ── Brand palette ──
+        // Replace with your actual brand colors from Figma.
+        "brand-50": "#eff6ff",
+        "brand-100": "#dbeafe",
+        "brand-500": "#3b82f6",
+        "brand-600": "#2563eb",
+        "brand-700": "#1d4ed8",
+        "brand-900": "#1e3a8a",
+        // ── Neutral palette ──
+        "neutral-0": "#ffffff",
+        "neutral-50": "#f8fafc",
+        "neutral-100": "#f1f5f9",
+        "neutral-200": "#e2e8f0",
+        "neutral-300": "#cbd5e1",
+        "neutral-400": "#94a3b8",
+        "neutral-500": "#64748b",
+        "neutral-600": "#475569",
+        "neutral-700": "#334155",
+        "neutral-800": "#1e293b",
+        "neutral-900": "#0f172a",
+        "neutral-950": "#020617",
+        // ── Status ──
+        "green-50": "#f0fdf4",
+        "green-700": "#15803d",
+        "green-300": "#86efac",
+        "yellow-50": "#fffbeb",
+        "yellow-700": "#b45309",
+        "yellow-300": "#fcd34d",
+        "red-50": "#fef2f2",
+        "red-600": "#c22121",
+        "red-300": "#fca5a5",
+        "blue-50": "#eff6ff",
+        "blue-700": "#1d4ed8",
+        "blue-300": "#93c5fd"
+      },
+      semantic: {
+        // ── Color action ──
+        "color-action": "{global.brand-600}",
+        "color-action-hover": "{global.brand-700}",
+        "color-action-active": "{global.brand-900}",
+        "color-action-disabled": "{global.brand-100}",
+        "color-action-text": "{global.neutral-0}",
+        // ── Surfaces ──
+        "color-bg-default": "{global.neutral-0}",
+        "color-bg-subtle": "{global.neutral-50}",
+        "color-bg-overlay": "{global.neutral-100}",
+        "color-bg-inverse": "{global.neutral-900}",
+        // ── Borders ──
+        "color-border-default": "{global.neutral-200}",
+        "color-border-strong": "{global.neutral-400}",
+        "color-border-focus": "{global.brand-600}",
+        // ── Text ──
+        "color-text-primary": "{global.neutral-900}",
+        "color-text-secondary": "{global.neutral-500}",
+        "color-text-disabled": "{global.neutral-400}",
+        "color-text-inverse": "{global.neutral-0}",
+        "color-text-on-color": "{global.neutral-0}"
+      },
+      component: {
+        // These will be filled in during generate.
+        // Example: "button-bg": "{semantic.color-action}"
+      }
+    },
+    themes: {
+      light: {
+        "color-bg-default": "#ffffff",
+        "color-bg-subtle": "#f8fafc",
+        "color-text-primary": "#0f172a",
+        "color-text-secondary": "#64748b",
+        "color-border-default": "#e2e8f0",
+        "color-action": "#2563eb",
+        "color-action-hover": "#1d4ed8"
+      },
+      dark: {
+        "color-bg-default": "#0f172a",
+        "color-bg-subtle": "#1e293b",
+        "color-text-primary": "#f1f5f9",
+        "color-text-secondary": "#94a3b8",
+        "color-border-default": "#334155",
+        "color-action": "#60a5fa",
+        "color-action-hover": "#93c5fd"
+      }
+    },
+    color: {
+      surface: {
+        default: "{semantic.color-bg-default}",
+        subtle: "{semantic.color-bg-subtle}",
+        overlay: "{semantic.color-bg-overlay}",
+        inverse: "{semantic.color-bg-inverse}"
+      },
+      border: {
+        default: "{semantic.color-border-default}",
+        strong: "{semantic.color-border-strong}",
+        focus: "{semantic.color-border-focus}"
+      },
+      text: {
+        primary: "{semantic.color-text-primary}",
+        secondary: "{semantic.color-text-secondary}",
+        disabled: "{semantic.color-text-disabled}",
+        inverse: "{semantic.color-text-inverse}",
+        onColor: "{semantic.color-text-on-color}"
+      },
+      status: {
+        success: {
+          bg: "{global.green-50}",
+          fg: "{global.green-700}",
+          border: "{global.green-300}"
+        },
+        warning: {
+          bg: "{global.yellow-50}",
+          fg: "{global.yellow-700}",
+          border: "{global.yellow-300}"
+        },
+        danger: {
+          bg: "{global.red-50}",
+          fg: "{global.red-600}",
+          border: "{global.red-300}"
+        },
+        info: {
+          bg: "{global.blue-50}",
+          fg: "{global.blue-700}",
+          border: "{global.blue-300}"
+        }
+      },
+      interactive: {
+        primary: {
+          rest: "{semantic.color-action}",
+          hover: "{semantic.color-action-hover}",
+          active: "{semantic.color-action-active}",
+          disabled: "{semantic.color-action-disabled}"
+        }
+      }
+    },
+    typography: {
+      fontFamily: "Inter, system-ui, sans-serif",
+      roles: {
+        display: {
+          size: 32,
+          weight: 700,
+          lineHeight: 1.2,
+          letterSpacing: "-0.02em"
+        },
+        h1: {
+          size: 24,
+          weight: 700,
+          lineHeight: 1.3,
+          letterSpacing: "-0.01em"
+        },
+        h2: {
+          size: 20,
+          weight: 600,
+          lineHeight: 1.4,
+          letterSpacing: "-0.005em"
+        },
+        h3: { size: 18, weight: 600, lineHeight: 1.4, letterSpacing: 0 },
+        body: { size: 16, weight: 400, lineHeight: 1.6, letterSpacing: 0 },
+        small: { size: 14, weight: 400, lineHeight: 1.5, letterSpacing: 0 },
+        caption: {
+          size: 12,
+          weight: 400,
+          lineHeight: 1.4,
+          letterSpacing: "0.01em"
+        },
+        label: {
+          size: 14,
+          weight: 500,
+          lineHeight: 1.4,
+          letterSpacing: "0.01em"
+        },
+        code: {
+          size: 13,
+          weight: 400,
+          lineHeight: 1.6,
+          fontFamily: "ui-monospace, monospace"
+        }
+      }
+    },
+    spacing: {
+      baseUnit: preset === "compact" ? 2 : preset === "spacious" ? 6 : 4,
+      scale: spacing,
+      semantic: {
+        "component-padding-xs": `${spacing[1]}`,
+        "component-padding-sm": `${spacing[2]}`,
+        "component-padding-md": `${spacing[4]}`,
+        "component-padding-lg": `${spacing[5]}`,
+        "layout-gap-xs": `${spacing[2]}`,
+        "layout-gap-sm": `${spacing[3]}`,
+        "layout-gap-md": `${spacing[5]}`,
+        "layout-gap-lg": `${spacing[6]}`,
+        "layout-section": `${spacing[7]}`
+      }
+    },
+    radius,
+    elevation: {
+      "0": "none",
+      "1": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      "2": "0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10)",
+      "3": "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
+      "4": "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)"
+    },
+    motion: {
+      duration: {
+        instant: 50,
+        fast: 100,
+        normal: 200,
+        slow: 300,
+        deliberate: 500
+      },
+      easing: {
+        standard: "cubic-bezier(0.2, 0, 0, 1)",
+        decelerate: "cubic-bezier(0, 0, 0, 1)",
+        accelerate: "cubic-bezier(0.3, 0, 1, 1)",
+        spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+      }
+    },
+    states: {
+      hoverOpacity: 0.08,
+      activeOpacity: 0.12,
+      disabledOpacity: 0.4,
+      focusRing: {
+        color: "{semantic.color-border-focus}",
+        width: "2px",
+        offset: "2px"
+      }
+    },
+    layout: {
+      breakpoints: {
+        sm: 640,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        "2xl": 1536
+      },
+      grid: {
+        columns: { sm: 4, md: 8, lg: 12 },
+        gutter: 16,
+        margin: 24
+      },
+      container: {
+        sm: 640,
+        md: 768,
+        lg: 1024,
+        xl: 1280
+      }
+    },
+    philosophy: {
+      density: preset,
+      elevation: "minimal",
+      motion: "full"
+    },
+    customization: {
+      extends: null,
+      overrides: {}
+    }
+  };
+}
+function buildInitialRules() {
+  return {
+    button: {
+      allowedVariants: ["primary", "secondary", "danger", "ghost"],
+      requiredProps: ["aria-label"],
+      maxWidth: "320px",
+      tokens: {
+        "button-bg": "{semantic.color-action}",
+        "button-bg-hover": "{semantic.color-action-hover}",
+        "button-text": "{semantic.color-text-on-color}",
+        "button-radius": "{radius.md}"
+      },
+      a11y: {
+        keyboard: true,
+        focusRing: true,
+        ariaLabel: "required"
+      }
+    },
+    input: {
+      allowedVariants: ["default", "error", "disabled"],
+      requiredProps: ["aria-label"],
+      tokens: {
+        "input-border": "{semantic.color-border-default}",
+        "input-border-focus": "{semantic.color-border-focus}",
+        "input-bg": "{semantic.color-bg-default}"
+      },
+      a11y: {
+        keyboard: true,
+        focusRing: true,
+        ariaLabel: "required"
+      }
+    },
+    card: {
+      allowedVariants: ["default", "elevated", "outlined"],
+      maxWidth: "640px",
+      allowedRadius: ["md", "lg"],
+      allowedShadows: ["0", "1", "2", "3"],
+      tokens: {
+        "card-bg": "{semantic.color-bg-default}",
+        "card-border": "{semantic.color-border-default}",
+        "card-radius": "{radius.lg}"
+      }
+    }
+  };
+}
+
+// src/generators/tokens/css-vars.ts
+function cssVar(name) {
+  return `--${name}`;
+}
+function emitBlock(selector, entries, comment) {
+  if (entries.length === 0) return "";
+  const lines = [];
+  if (comment) lines.push(`/* ${comment} */`);
+  lines.push(`${selector} {`);
+  for (const [name, value] of entries) {
+    lines.push(`  ${cssVar(name)}: ${value};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function emitBaseCss(config, resolution) {
+  const sections = [];
+  const header = [
+    `/* \u2500\u2500\u2500 ${config.meta.name} \u2014 base tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */`,
+    `/* Generated by dsforge. Do not edit manually.                            */`,
+    `/* Import this file, then add a theme file for light/dark mode.         */`,
+    ""
+  ].join("\n");
+  const semanticEntries = Object.entries(
+    resolution.tokens
+  ).filter(([k]) => k.startsWith("semantic.")).map(([k, v]) => [k.replace("semantic.", ""), v]);
+  if (semanticEntries.length > 0) {
+    sections.push(emitBlock(":root", semanticEntries, "Semantic tokens"));
+  }
+  const componentEntries = Object.entries(
+    resolution.tokens
+  ).filter(([k]) => k.startsWith("component.")).map(([k, v]) => [k.replace("component.", ""), v]);
+  if (componentEntries.length > 0) {
+    sections.push(emitBlock(":root", componentEntries, "Component tokens"));
+  }
+  const spacing = config.spacing;
+  const spacingEntries = [];
+  for (const [key, value] of Object.entries(spacing?.scale ?? {})) {
+    spacingEntries.push([`spacing-${key}`, `${value}px`]);
+  }
+  for (const [key, value] of Object.entries(spacing?.semantic ?? {})) {
+    spacingEntries.push([key, `${value}px`]);
+  }
+  if (spacingEntries.length > 0) {
+    sections.push(emitBlock(":root", spacingEntries, "Spacing"));
+  }
+  const typo = config.typography;
+  const typoEntries = [];
+  if (typo?.fontFamily) {
+    typoEntries.push(["font-family-base", typo.fontFamily]);
+  }
+  for (const [role, value] of Object.entries(typo?.roles ?? {})) {
+    if (!value) continue;
+    typoEntries.push([`font-size-${role}`, `${value.size}px`]);
+    typoEntries.push([`font-weight-${role}`, String(value.weight)]);
+    typoEntries.push([`line-height-${role}`, String(value.lineHeight)]);
+    if (value.letterSpacing !== void 0 && value.letterSpacing !== 0) {
+      typoEntries.push([`letter-spacing-${role}`, String(value.letterSpacing)]);
+    }
+  }
+  if (typoEntries.length > 0) {
+    sections.push(emitBlock(":root", typoEntries, "Typography"));
+  }
+  const radiusEntries = Object.entries(
+    config.radius ?? {}
+  ).filter(([, v]) => v !== void 0).map(([k, v]) => [`radius-${k}`, v === 9999 ? "9999px" : `${v}px`]);
+  if (radiusEntries.length > 0) {
+    sections.push(emitBlock(":root", radiusEntries, "Border radius"));
+  }
+  const elevEntries = Object.entries(
+    config.elevation ?? {}
+  ).map(([k, v]) => [`shadow-${k}`, v]);
+  if (elevEntries.length > 0) {
+    sections.push(emitBlock(":root", elevEntries, "Elevation / shadows"));
+  }
+  const motionEntries = [];
+  for (const [key, ms] of Object.entries(config.motion?.duration ?? {})) {
+    if (ms !== void 0) motionEntries.push([`duration-${key}`, `${ms}ms`]);
+  }
+  for (const [key, curve] of Object.entries(config.motion?.easing ?? {})) {
+    if (curve !== void 0) motionEntries.push([`easing-${key}`, curve]);
+  }
+  if (motionEntries.length > 0) {
+    sections.push(emitBlock(":root", motionEntries, "Motion"));
+  }
+  const states = config.states;
+  const stateEntries = [];
+  if (states?.hoverOpacity !== void 0)
+    stateEntries.push(["state-hover-opacity", String(states.hoverOpacity)]);
+  if (states?.activeOpacity !== void 0)
+    stateEntries.push(["state-active-opacity", String(states.activeOpacity)]);
+  if (states?.disabledOpacity !== void 0)
+    stateEntries.push([
+      "state-disabled-opacity",
+      String(states.disabledOpacity)
+    ]);
+  if (states?.focusRing) {
+    const fr = states.focusRing;
+    const frColor = resolution.tokens[String(fr.color).replace(/[{}]/g, "")] ?? String(fr.color);
+    stateEntries.push(["focus-ring-color", frColor]);
+    stateEntries.push(["focus-ring-width", fr.width]);
+    stateEntries.push(["focus-ring-offset", fr.offset]);
+  }
+  if (stateEntries.length > 0) {
+    sections.push(emitBlock(":root", stateEntries, "Interactive states"));
+  }
+  return [header, ...sections].join("\n\n") + "\n";
+}
+function emitThemeCss(themeName, themeOverrides, config) {
+  const lines = [
+    `/* \u2500\u2500\u2500 ${config.meta.name} \u2014 ${themeName} theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */`,
+    `/* Generated by dsforge. Do not edit manually.                            */`,
+    `/* Usage: <html data-theme="${themeName}"> or ThemeProvider theme="${themeName}"  */`,
+    ""
+  ];
+  const entries = Object.entries(themeOverrides).map(
+    ([k, v]) => [k, String(v)]
+  );
+  lines.push(emitBlock(`:root[data-theme="${themeName}"]`, entries));
+  return lines.join("\n") + "\n";
+}
+function generateCssFiles(config, resolution) {
+  const files = [];
+  files.push({
+    filename: "base.css",
+    content: emitBaseCss(config, resolution)
+  });
+  for (const [themeName, themeOverrides] of Object.entries(
+    config.themes ?? {}
+  )) {
+    files.push({
+      filename: `${themeName}.css`,
+      content: emitThemeCss(themeName, themeOverrides, config)
+    });
+  }
+  if (!config.themes || Object.keys(config.themes).length === 0) {
+    const fallbackEntries = Object.entries(
+      resolution.tokens
+    ).filter(([k]) => k.startsWith("semantic.")).map(([k, v]) => [k.replace("semantic.", ""), v]);
+    files.push({
+      filename: "light.css",
+      content: [
+        `/* ${config.meta.name} \u2014 default theme (no themes defined in config) */`,
+        emitBlock(":root", fallbackEntries),
+        ""
+      ].join("\n")
+    });
+  }
+  return files;
+}
+
+// src/adapters/react/tokens/js-tokens.ts
+function safeKey(k) {
+  return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(k) ? k : JSON.stringify(k);
+}
+function toJsIdentifier(tokenPath) {
+  const withoutLayer = tokenPath.replace(/^(global|semantic|component)\./, "");
+  return withoutLayer.split("-").map(
+    (part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)
+  ).join("");
+}
+function formatValue(value) {
+  return JSON.stringify(value);
+}
+function emitJsTokens(config, resolution) {
+  const lines = [
+    `// ${config.meta.name} \u2014 design tokens`,
+    `// Generated by dsforge v${config.meta.version}. Do not edit manually.`,
+    "",
+    "// \u2500\u2500\u2500 Resolved token map \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500",
+    "export const tokens = {"
+  ];
+  const layers = ["global", "semantic", "component"];
+  for (const layer of layers) {
+    const entries = Object.entries(resolution.tokens).filter(
+      ([k]) => k.startsWith(`${layer}.`)
+    );
+    if (entries.length === 0) continue;
+    lines.push(`  // ${layer}`);
+    for (const [tokenPath, value] of entries) {
+      const identifier = toJsIdentifier(tokenPath);
+      lines.push(`  ${identifier}: ${formatValue(value)},`);
+    }
+  }
+  lines.push("} as const;", "");
+  lines.push("export type TokenKey = keyof typeof tokens;", "");
+  const themes = config.themes ?? {};
+  if (Object.keys(themes).length > 0) {
+    lines.push(
+      "// \u2500\u2500\u2500 Theme overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"
+    );
+    lines.push("export const themes = {");
+    for (const [themeName, overrides] of Object.entries(themes)) {
+      lines.push(`  "${themeName}": {`);
+      for (const [k, v] of Object.entries(overrides)) {
+        lines.push(`    ${JSON.stringify(k)}: ${JSON.stringify(String(v))},`);
+      }
+      lines.push("  },");
+    }
+    lines.push("} as const;", "");
+    lines.push("export type ThemeName = keyof typeof themes;", "");
+  }
+  const spacingScale = config.spacing?.scale ?? {};
+  if (Object.keys(spacingScale).length > 0) {
+    lines.push(
+      "// \u2500\u2500\u2500 Spacing scale \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"
+    );
+    lines.push("export const spacing = {");
+    for (const [key, value] of Object.entries(spacingScale)) {
+      lines.push(`  ${JSON.stringify(key)}: ${value},  // ${value}px`);
+    }
+    lines.push("} as const;", "");
+  }
+  const typoRoles = config.typography?.roles ?? {};
+  if (Object.keys(typoRoles).length > 0) {
+    lines.push(
+      "// \u2500\u2500\u2500 Typography roles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"
+    );
+    lines.push("export const typography = {");
+    for (const [role, value] of Object.entries(typoRoles)) {
+      if (!value) continue;
+      lines.push(`  ${role}: {`);
+      lines.push(`    size: ${value.size},`);
+      lines.push(`    weight: ${value.weight},`);
+      lines.push(`    lineHeight: ${value.lineHeight},`);
+      if (value.letterSpacing !== void 0) {
+        lines.push(
+          `    letterSpacing: ${JSON.stringify(String(value.letterSpacing))},`
+        );
+      }
+      if (value.fontFamily) {
+        lines.push(`    fontFamily: ${JSON.stringify(value.fontFamily)},`);
+      }
+      lines.push("  },");
+    }
+    lines.push("} as const;", "");
+  }
+  const radius = config.radius ?? {};
+  if (Object.keys(radius).length > 0) {
+    lines.push(
+      "// \u2500\u2500\u2500 Border radius \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"
+    );
+    lines.push("export const radius = {");
+    for (const [key, value] of Object.entries(radius)) {
+      if (value === void 0) continue;
+      const cssValue = value === 9999 ? "9999px" : `${value}px`;
+      lines.push(`  ${key}: ${JSON.stringify(cssValue)},`);
+    }
+    lines.push("} as const;", "");
+  }
+  const elevation = config.elevation ?? {};
+  if (Object.keys(elevation).length > 0) {
+    lines.push(
+      "// \u2500\u2500\u2500 Elevation / shadows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"
+    );
+    lines.push("export const elevation = {");
+    for (const [key, value] of Object.entries(elevation)) {
+      lines.push(`  ${JSON.stringify(key)}: ${JSON.stringify(value)},`);
+    }
+    lines.push("} as const;", "");
+  }
+  return lines.join("\n");
+}
+function emitTailwindConfig(config) {
+  const lines = [
+    `// ${config.meta.name} \u2014 Tailwind CSS theme extension`,
+    `// Generated by dsforge. Do not edit manually.`,
+    `//`,
+    `// Usage in tailwind.config.js:`,
+    `//   const ds = require('./${config.meta.name}/tokens/tailwind');`,
+    `//   module.exports = { theme: { extend: ds } };`,
+    "",
+    "module.exports = {"
+  ];
+  const interactive = config.color?.interactive?.primary;
+  const surface = config.color?.surface;
+  const border = config.color?.border;
+  const text = config.color?.text;
+  const status = config.color?.status ?? {};
+  lines.push("  colors: {");
+  if (interactive) {
+    lines.push("    action: {");
+    if (interactive.rest) lines.push(`      DEFAULT: 'var(--color-action)',`);
+    if (interactive.hover)
+      lines.push(`      hover: 'var(--color-action-hover)',`);
+    if (interactive.active)
+      lines.push(`      active: 'var(--color-action-active)',`);
+    if (interactive.disabled)
+      lines.push(`      disabled: 'var(--color-action-disabled)',`);
+    lines.push("    },");
+  }
+  if (surface) {
+    lines.push("    surface: {");
+    if (surface.default)
+      lines.push(`      DEFAULT: 'var(--color-bg-default)',`);
+    if (surface.subtle) lines.push(`      subtle: 'var(--color-bg-subtle)',`);
+    if (surface.overlay)
+      lines.push(`      overlay: 'var(--color-bg-overlay)',`);
+    if (surface.inverse)
+      lines.push(`      inverse: 'var(--color-bg-inverse)',`);
+    lines.push("    },");
+  }
+  if (border) {
+    lines.push("    border: {");
+    if (border.default)
+      lines.push(`      DEFAULT: 'var(--color-border-default)',`);
+    if (border.strong)
+      lines.push(`      strong: 'var(--color-border-strong)',`);
+    if (border.focus) lines.push(`      focus: 'var(--color-border-focus)',`);
+    lines.push("    },");
+  }
+  if (text) {
+    lines.push("    text: {");
+    if (text.primary) lines.push(`      DEFAULT: 'var(--color-text-primary)',`);
+    if (text.secondary)
+      lines.push(`      secondary: 'var(--color-text-secondary)',`);
+    if (text.disabled)
+      lines.push(`      disabled: 'var(--color-text-disabled)',`);
+    if (text.inverse) lines.push(`      inverse: 'var(--color-text-inverse)',`);
+    lines.push("    },");
+  }
+  for (const [statusName, statusValue] of Object.entries(status)) {
+    if (!statusValue) continue;
+    lines.push(`    ${safeKey(statusName)}: {`);
+    lines.push(`      bg: 'var(--color-${statusName}-bg)',`);
+    lines.push(`      DEFAULT: 'var(--color-${statusName}-fg)',`);
+    lines.push(`      border: 'var(--color-${statusName}-border)',`);
+    lines.push("    },");
+  }
+  lines.push("  },");
+  const spacingScale = config.spacing?.scale ?? {};
+  if (Object.keys(spacingScale).length > 0) {
+    lines.push("  spacing: {");
+    for (const [key, value] of Object.entries(spacingScale)) {
+      lines.push(`    ${JSON.stringify(key)}: '${value}px',`);
+    }
+    lines.push("  },");
+  }
+  const roles = config.typography?.roles ?? {};
+  if (Object.keys(roles).length > 0) {
+    lines.push("  fontSize: {");
+    for (const [role, value] of Object.entries(roles)) {
+      if (!value) continue;
+      const ls = value.letterSpacing ? `, letterSpacing: '${value.letterSpacing}'` : "";
+      lines.push(
+        `    ${safeKey(role)}: ['${value.size}px', { lineHeight: '${value.lineHeight}'${ls} }],`
+      );
+    }
+    lines.push("  },");
+  }
+  const weights = /* @__PURE__ */ new Set();
+  for (const role of Object.values(config.typography?.roles ?? {})) {
+    if (role) weights.add(role.weight);
+  }
+  if (weights.size > 0) {
+    lines.push("  fontWeight: {");
+    const weightNames = {
+      100: "thin",
+      200: "extralight",
+      300: "light",
+      400: "normal",
+      500: "medium",
+      600: "semibold",
+      700: "bold",
+      800: "extrabold",
+      900: "black"
+    };
+    for (const w of [...weights].sort()) {
+      const name = weightNames[w] ?? String(w);
+      lines.push(`    ${safeKey(name)}: '${w}',`);
+    }
+    lines.push("  },");
+  }
+  const radiusConfig = config.radius ?? {};
+  if (Object.keys(radiusConfig).length > 0) {
+    lines.push("  borderRadius: {");
+    for (const [key, value] of Object.entries(radiusConfig)) {
+      if (value === void 0) continue;
+      const cssValue = value === 9999 ? "9999px" : `${value}px`;
+      const twKey = key === "none" ? "none" : key === "full" ? "full" : `ds-${key}`;
+      lines.push(`    ${safeKey(twKey)}: '${cssValue}',`);
+    }
+    lines.push("  },");
+  }
+  const elevationConfig = config.elevation ?? {};
+  if (Object.keys(elevationConfig).length > 0) {
+    lines.push("  boxShadow: {");
+    for (const [key, value] of Object.entries(elevationConfig)) {
+      lines.push(
+        `    ${JSON.stringify(`ds-${key}`)}: ${JSON.stringify(value)},`
+      );
+    }
+    lines.push("  },");
+  }
+  const breakpoints = config.layout?.breakpoints ?? {};
+  if (Object.keys(breakpoints).length > 0) {
+    lines.push("  screens: {");
+    for (const [key, value] of Object.entries(breakpoints)) {
+      if (value !== void 0) lines.push(`    ${safeKey(key)}: '${value}px',`);
+    }
+    lines.push("  },");
+  }
+  const durations = config.motion?.duration ?? {};
+  if (Object.keys(durations).length > 0) {
+    lines.push("  transitionDuration: {");
+    for (const [key, value] of Object.entries(durations)) {
+      if (value !== void 0) lines.push(`    ${safeKey(key)}: '${value}ms',`);
+    }
+    lines.push("  },");
+  }
+  const easing = config.motion?.easing ?? {};
+  if (Object.keys(easing).length > 0) {
+    lines.push("  transitionTimingFunction: {");
+    for (const [key, value] of Object.entries(easing)) {
+      if (value !== void 0)
+        lines.push(`    ${safeKey(key)}: ${JSON.stringify(value)},`);
+    }
+    lines.push("  },");
+  }
+  lines.push("};", "");
+  return lines.join("\n");
+}
+
+// src/adapters/react/components/button.ts
+function generateButton(config, rule) {
+  const variants = rule?.allowedVariants ?? [
+    "primary",
+    "secondary",
+    "danger",
+    "ghost"
+  ];
+  const requiresAriaLabel = rule?.a11y?.ariaLabel === "required";
+  const maxWidth = rule?.maxWidth ?? "none";
+  const variantType = variants.map((v) => `"${v}"`).join(" | ");
+  const variantStyles = generateVariantStyles(variants, config);
+  return `/**
+ * Button \u2014 ${config.meta.name}
+ *
+ * Generated by dsforge. Extend via design-system.rules.json or component token overrides.
+ * Allowed variants: ${variants.join(", ")}
+ */
+
+import React from "react";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type ButtonVariant = ${variantType};
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> {
+  /** Visual style variant */
+  variant?: ButtonVariant;
+  /** Size preset */
+  size?: ButtonSize;
+  /** Shows a loading spinner and disables interaction */
+  loading?: boolean;
+  /** Full-width block button */
+  fullWidth?: boolean;
+  /** Left icon slot */
+  iconLeft?: React.ReactNode;
+  /** Right icon slot */
+  iconRight?: React.ReactNode;
+  /**
+   * Accessible label.${requiresAriaLabel ? "\n   * @required Governance rule: buttons must have aria-label." : ""}
+   */
+  "aria-label": string;
+  children?: React.ReactNode;
+  /** Style overrides applied to the button element */
+  style?: React.CSSProperties;
+}
+
+// \u2500\u2500\u2500 Size styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+const SIZE_STYLES: Record<ButtonSize, React.CSSProperties> = {
+  sm: {
+    fontSize: "var(--font-size-small, 0.875rem)",
+    padding: "var(--spacing-2, 8px) var(--spacing-3, 12px)",
+    gap: "var(--spacing-1, 4px)",
+  },
+  md: {
+    fontSize: "var(--font-size-body, 1rem)",
+    padding: "var(--component-padding-sm, 8px) var(--component-padding-md, 16px)",
+    gap: "var(--spacing-2, 8px)",
+  },
+  lg: {
+    fontSize: "var(--font-size-body, 1rem)",
+    padding: "var(--component-padding-md, 16px) var(--spacing-6, 32px)",
+    gap: "var(--spacing-2, 8px)",
+  },
+};
+
+// \u2500\u2500\u2500 Variant styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+${variantStyles}
+
+// \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      variant = "primary",
+      size = "md",
+      loading = false,
+      fullWidth = false,
+      iconLeft,
+      iconRight,
+      disabled,
+      children,
+      style,
+      ...props
+    },
+    ref,
+  ) {
+    const isDisabled = disabled ?? loading;
+
+    const baseStyle: React.CSSProperties = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: "var(--font-family-base, inherit)",
+      fontWeight: "var(--font-weight-label, 500)" as React.CSSProperties["fontWeight"],
+      lineHeight: 1,
+      border: "1px solid transparent",
+      borderRadius: "var(--button-radius, var(--radius-md, 4px))",
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      opacity: isDisabled ? "var(--state-disabled-opacity, 0.4)" : 1,
+      transition: [
+        "background-color var(--duration-fast, 100ms) var(--easing-standard, ease)",
+        "border-color var(--duration-fast, 100ms) var(--easing-standard, ease)",
+        "box-shadow var(--duration-fast, 100ms) var(--easing-standard, ease)",
+        "opacity var(--duration-fast, 100ms)",
+      ].join(", "),
+      maxWidth: "${maxWidth}",
+      width: fullWidth ? "100%" : undefined,
+      outline: "none",
+      textDecoration: "none",
+      whiteSpace: "nowrap",
+      userSelect: "none",
+      ...SIZE_STYLES[size],
+      ...VARIANT_STYLES[variant],
+      ...style,
+    };
+
+    const focusStyle: React.CSSProperties = {
+      boxShadow: [
+        "0 0 0 var(--focus-ring-offset, 2px) var(--color-bg-default, #fff)",
+        "0 0 0 calc(var(--focus-ring-offset, 2px) + var(--focus-ring-width, 2px)) var(--focus-ring-color, #2563eb)",
+      ].join(", "),
+    };
+
+    const [isFocusVisible, setIsFocusVisible] = React.useState(false);
+
+    const handleKeyUp = () => setIsFocusVisible(true);
+    const handleMouseDown = () => setIsFocusVisible(false);
+    const handleBlur = () => setIsFocusVisible(false);
+
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        style={{ ...baseStyle, ...(isFocusVisible ? focusStyle : {}) }}
+        onKeyUp={handleKeyUp}
+        onMouseDown={handleMouseDown}
+        onBlur={handleBlur}
+        {...props}
+      >
+        {loading && (
+          <LoadingSpinner
+            size={size === "sm" ? 14 : 16}
+            aria-hidden="true"
+          />
+        )}
+        {!loading && iconLeft && <span aria-hidden="true">{iconLeft}</span>}
+        {children && <span>{children}</span>}
+        {!loading && iconRight && <span aria-hidden="true">{iconRight}</span>}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+// \u2500\u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+function LoadingSpinner({ size, ...props }: { size: number } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      style={{
+        animation: "dsforge-spin 0.75s linear infinite",
+      }}
+      {...props}
+    >
+      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+    </svg>
+  );
+}
+
+// \u2500\u2500\u2500 Keyframe injection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+if (typeof document !== "undefined") {
+  const styleId = "dsforge-button-keyframes";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = "@keyframes dsforge-spin { to { transform: rotate(360deg); } }";
+    document.head.appendChild(style);
+  }
+}
+`;
+}
+function generateVariantStyles(variants, _config) {
+  const variantMap = {
+    primary: `  primary: {
+    background: "var(--button-bg, var(--color-action, #2563eb))",
+    color: "var(--button-text, var(--color-text-inverse, #ffffff))",
+    borderColor: "var(--button-bg, var(--color-action, #2563eb))",
+  }`,
+    secondary: `  secondary: {
+    background: "var(--color-bg-subtle, #f8fafc)",
+    color: "var(--color-text-primary, #111827)",
+    borderColor: "var(--color-border-default, #e2e8f0)",
+  }`,
+    danger: `  danger: {
+    background: "var(--color-danger-fg, #dc2626)",
+    color: "#ffffff",
+    borderColor: "var(--color-danger-fg, #dc2626)",
+  }`,
+    ghost: `  ghost: {
+    background: "transparent",
+    color: "var(--color-action, #2563eb)",
+    borderColor: "transparent",
+  }`,
+    outline: `  outline: {
+    background: "transparent",
+    color: "var(--color-action, #2563eb)",
+    borderColor: "var(--color-action, #2563eb)",
+  }`
+  };
+  const entries = variants.map((v) => {
+    return variantMap[v] ?? `  ${v}: {}`;
+  });
+  return `
+const VARIANT_STYLES: Record<ButtonVariant, React.CSSProperties> = {
+${entries.join(",\n")},
+};
+`;
+}
+
+// src/adapters/react/components/input.ts
+function generateInput(config, rule) {
+  const variants = rule?.allowedVariants ?? ["default", "error", "disabled"];
+  const variantType = variants.map((v) => `"${v}"`).join(" | ");
+  return `/**
+ * Input \u2014 ${config.meta.name}
+ *
+ * Generated by dsforge. Extend via design-system.rules.json or component token overrides.
+ */
+
+import React from "react";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type InputVariant = ${variantType};
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "style"> {
+  /** Visual/state variant */
+  variant?: InputVariant;
+  /** Label displayed above the input */
+  label?: string;
+  /** Helper text shown below the input */
+  helperText?: string;
+  /** Error message \u2014 also sets variant to "error" when present */
+  errorMessage?: string;
+  /** Size preset */
+  size?: "sm" | "md" | "lg";
+  /** Left adornment (icon or text) */
+  startAdornment?: React.ReactNode;
+  /** Right adornment (icon or text) */
+  endAdornment?: React.ReactNode;
+  /** Accessible label \u2014 required for inputs without a visible label */
+  "aria-label"?: string;
+  /** Style applied to the outer wrapper element */
+  style?: React.CSSProperties;
+}
+
+// \u2500\u2500\u2500 Styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+const SIZE_PADDING: Record<"sm" | "md" | "lg", string> = {
+  sm: "var(--spacing-1, 4px) var(--spacing-2, 8px)",
+  md: "var(--component-padding-sm, 8px) var(--component-padding-md, 16px)",
+  lg: "var(--component-padding-md, 16px) var(--component-padding-lg, 24px)",
+};
+
+const SIZE_FONT: Record<"sm" | "md" | "lg", string> = {
+  sm: "var(--font-size-small, 0.875rem)",
+  md: "var(--font-size-body, 1rem)",
+  lg: "var(--font-size-body, 1rem)",
+};
+
+// \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  function Input(
+    {
+      variant = "default",
+      size = "md",
+      label,
+      helperText,
+      errorMessage,
+      startAdornment,
+      endAdornment,
+      style,
+      id: propId,
+      disabled,
+      ...props
+    },
+    ref,
+  ) {
+    const id = propId ?? React.useId();
+    const errorId = \`\${id}-error\`;
+    const helperId = \`\${id}-helper\`;
+
+    const hasError = Boolean(errorMessage);
+    const isDisabled = disabled ?? variant === "disabled";
+    const resolvedVariant: InputVariant = hasError ? "error" : variant;
+
+    const borderColor =
+      resolvedVariant === "error"
+        ? "var(--color-danger-border, #fca5a5)"
+        : "var(--input-border, var(--color-border-default, #e2e8f0))";
+
+    const wrapperStyle: React.CSSProperties = {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--spacing-1, 4px)",
+      fontFamily: "var(--font-family-base, inherit)",
+      opacity: isDisabled ? "var(--state-disabled-opacity, 0.4)" : 1,
+      ...style,
+    };
+
+    const inputWrapperStyle: React.CSSProperties = {
+      display: "flex",
+      alignItems: "center",
+      background: "var(--input-bg, var(--color-bg-default, #ffffff))",
+      border: \`1px solid \${borderColor}\`,
+      borderRadius: "var(--input-radius, var(--radius-md, 4px))",
+      transition: \`border-color var(--duration-fast, 100ms) var(--easing-standard, ease),
+        box-shadow var(--duration-fast, 100ms) var(--easing-standard, ease)\`,
+      cursor: isDisabled ? "not-allowed" : "text",
+    };
+
+    const inputStyle: React.CSSProperties = {
+      flex: 1,
+      padding: SIZE_PADDING[size],
+      fontSize: SIZE_FONT[size],
+      lineHeight: "var(--line-height-body, 1.5)",
+      color: "var(--color-text-primary, #111827)",
+      background: "transparent",
+      border: "none",
+      outline: "none",
+      cursor: isDisabled ? "not-allowed" : "text",
+    };
+
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    const focusShadow = isFocused
+      ? [
+          "0 0 0 var(--focus-ring-offset, 2px) var(--color-bg-default, #fff)",
+          "0 0 0 calc(var(--focus-ring-offset, 2px) + var(--focus-ring-width, 2px)) var(--focus-ring-color, #2563eb)",
+        ].join(", ")
+      : undefined;
+
+    return (
+      <div style={wrapperStyle}>
+        {label && (
+          <label
+            htmlFor={id}
+            style={{
+              fontSize: "var(--font-size-label, 0.875rem)",
+              fontWeight: "var(--font-weight-label, 500)" as React.CSSProperties["fontWeight"],
+              color: "var(--color-text-primary, #111827)",
+              lineHeight: "var(--line-height-label, 1.4)",
+            }}
+          >
+            {label}
+          </label>
+        )}
+
+        <div
+          style={{
+            ...inputWrapperStyle,
+            boxShadow: focusShadow,
+            borderColor: isFocused
+              ? "var(--input-border-focus, var(--color-border-focus, #2563eb))"
+              : borderColor,
+          }}
+        >
+          {startAdornment && (
+            <span
+              aria-hidden="true"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                paddingLeft: "var(--spacing-3, 12px)",
+                color: "var(--color-text-secondary, #6b7280)",
+                flexShrink: 0,
+              }}
+            >
+              {startAdornment}
+            </span>
+          )}
+
+          <input
+            ref={ref}
+            id={id}
+            disabled={isDisabled}
+            aria-invalid={hasError ? "true" : undefined}
+            aria-describedby={
+              [hasError ? errorId : null, helperText ? helperId : null]
+                .filter(Boolean)
+                .join(" ") || undefined
+            }
+            style={inputStyle}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            {...props}
+          />
+
+          {endAdornment && (
+            <span
+              aria-hidden="true"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                paddingRight: "var(--spacing-3, 12px)",
+                color: "var(--color-text-secondary, #6b7280)",
+                flexShrink: 0,
+              }}
+            >
+              {endAdornment}
+            </span>
+          )}
+        </div>
+
+        {hasError && (
+          <span
+            id={errorId}
+            role="alert"
+            style={{
+              fontSize: "var(--font-size-caption, 0.75rem)",
+              color: "var(--color-danger-fg, #dc2626)",
+              lineHeight: "var(--line-height-caption, 1.4)",
+            }}
+          >
+            {errorMessage}
+          </span>
+        )}
+
+        {helperText && !hasError && (
+          <span
+            id={helperId}
+            style={{
+              fontSize: "var(--font-size-caption, 0.75rem)",
+              color: "var(--color-text-secondary, #6b7280)",
+              lineHeight: "var(--line-height-caption, 1.4)",
+            }}
+          >
+            {helperText}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";
+`;
+}
+
+// src/adapters/react/components/card.ts
+function generateCard(config, rule) {
+  const variants = rule?.allowedVariants ?? ["default", "elevated", "outlined"];
+  const maxWidth = rule?.maxWidth ?? "none";
+  const variantType = variants.map((v) => `"${v}"`).join(" | ");
+  return `/**
+ * Card \u2014 ${config.meta.name}
+ *
+ * Generated by dsforge. Extend via design-system.rules.json or component token overrides.
+ * Composable: use Card.Header, Card.Body, Card.Footer for structured content.
+ */
+
+import React from "react";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type CardVariant = ${variantType};
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Visual style variant */
+  variant?: CardVariant;
+  /** Override max-width. Default: ${maxWidth} */
+  maxWidth?: string | number;
+  /** Remove all padding from the card body */
+  noPadding?: boolean;
+  children: React.ReactNode;
+  /** Style overrides applied to the card container */
+  style?: React.CSSProperties;
+}
+
+export interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /** Style overrides applied to the section element */
+  style?: React.CSSProperties;
+}
+
+// \u2500\u2500\u2500 Variant styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+const VARIANT_STYLES: Record<CardVariant, React.CSSProperties> = {
+${generateVariantStylesCard(variants)}
+};
+
+// \u2500\u2500\u2500 Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+function CardRoot({
+  variant = "default",
+  maxWidth: maxWidthProp,
+  noPadding = false,
+  style,
+  children,
+  ...props
+}: CardProps) {
+  const computedMaxWidth = maxWidthProp
+    ? typeof maxWidthProp === "number"
+      ? \`\${maxWidthProp}px\`
+      : maxWidthProp
+    : "${maxWidth}";
+
+  const baseStyle: React.CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    background: "var(--card-bg, var(--color-bg-default, #ffffff))",
+    borderRadius: "var(--card-radius, var(--radius-lg, 8px))",
+    overflow: "hidden",
+    maxWidth: computedMaxWidth,
+    width: "100%",
+    fontFamily: "var(--font-family-base, inherit)",
+    transition: "box-shadow var(--duration-normal, 200ms) var(--easing-standard, ease)",
+    ...VARIANT_STYLES[variant],
+    ...style,
+  };
+
+  return (
+    <div style={baseStyle} {...props}>
+      {children}
+    </div>
+  );
+}
+
+// \u2500\u2500\u2500 Card.Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+function CardHeader({ style, children, ...props }: CardSectionProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "var(--component-padding-md, 16px)",
+        borderBottom: "1px solid var(--color-border-default, #e2e8f0)",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// \u2500\u2500\u2500 Card.Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+function CardBody({ style, children, ...props }: CardSectionProps) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        padding: "var(--component-padding-md, 16px)",
+        color: "var(--color-text-primary, #111827)",
+        fontSize: "var(--font-size-body, 1rem)",
+        lineHeight: "var(--line-height-body, 1.5)",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// \u2500\u2500\u2500 Card.Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+function CardFooter({ style, children, ...props }: CardSectionProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--spacing-3, 12px)",
+        padding: "var(--component-padding-md, 16px)",
+        borderTop: "1px solid var(--color-border-default, #e2e8f0)",
+        background: "var(--color-bg-subtle, #f8fafc)",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// \u2500\u2500\u2500 Composite export \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export const Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter,
+});
+`;
+}
+function generateVariantStylesCard(variants) {
+  const map = {
+    default: `  default: {
+    border: "1px solid var(--color-border-default, #e2e8f0)",
+    boxShadow: "none",
+  }`,
+    elevated: `  elevated: {
+    border: "1px solid transparent",
+    boxShadow: "var(--shadow-2, 0 1px 3px 0 rgb(0 0 0 / 0.10))",
+  }`,
+    outlined: `  outlined: {
+    border: "2px solid var(--color-border-strong, #94a3b8)",
+    boxShadow: "none",
+  }`,
+    interactive: `  interactive: {
+    border: "1px solid var(--color-border-default, #e2e8f0)",
+    boxShadow: "var(--shadow-1, 0 1px 2px 0 rgb(0 0 0 / 0.05))",
+    cursor: "pointer",
+  }`
+  };
+  return variants.map((v) => map[v] ?? `  ${v}: {}`).join(",\n");
+}
+
+// src/adapters/react/theme-provider.ts
+function generateThemeProvider(config) {
+  const themeNames = Object.keys(config.themes ?? { light: {}, dark: {} });
+  const defaultTheme = themeNames.includes("light") ? "light" : themeNames[0] ?? "light";
+  const themeType = themeNames.map((t) => `"${t}"`).join(" | ");
+  return `/**
+ * ThemeProvider \u2014 ${config.meta.name}
+ *
+ * Applies the active theme by setting data-theme on the root element.
+ * Consumers wrap their app (or a subtree) in ThemeProvider.
+ *
+ * Usage:
+ *   import "@${config.meta.name}/tokens/base.css";
+ *   import "@${config.meta.name}/tokens/light.css";  // or dark.css
+ *   import { ThemeProvider } from "@${config.meta.name}";
+ *
+ *   <ThemeProvider theme="light">
+ *     <App />
+ *   </ThemeProvider>
+ */
+
+import React from "react";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type ThemeName = ${themeType};
+
+export interface ThemeContextValue {
+  theme: ThemeName;
+  setTheme: (theme: ThemeName) => void;
+}
+
+export interface ThemeProviderProps {
+  /** Initial theme. Defaults to "${defaultTheme}". */
+  theme?: ThemeName;
+  /** Called when setTheme is invoked \u2014 use to persist theme preference. */
+  onThemeChange?: (theme: ThemeName) => void;
+  children: React.ReactNode;
+}
+
+// \u2500\u2500\u2500 Context \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export const ThemeContext = React.createContext<ThemeContextValue>({
+  theme: "${defaultTheme}",
+  setTheme: () => undefined,
+});
+
+/**
+ * Hook to read and change the current theme.
+ * Must be used inside a <ThemeProvider>.
+ */
+export function useTheme(): ThemeContextValue {
+  return React.useContext(ThemeContext);
+}
+
+// \u2500\u2500\u2500 Provider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export function ThemeProvider({
+  theme: initialTheme = "${defaultTheme}",
+  onThemeChange,
+  children,
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = React.useState<ThemeName>(initialTheme);
+
+  React.useEffect(() => {
+    setThemeState(initialTheme);
+  }, [initialTheme]);
+
+  const setTheme = React.useCallback(
+    (next: ThemeName) => {
+      setThemeState(next);
+      onThemeChange?.(next);
+    },
+    [onThemeChange],
+  );
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <div data-theme={theme} style={{ display: "contents" }}>
+        {children}
+      </div>
+    </ThemeContext.Provider>
+  );
+}
+`;
+}
+function generateComponentIndex(config, componentNames) {
+  const lines = [
+    `/**`,
+    ` * ${config.meta.name} \u2014 component library`,
+    ` * Generated by dsforge v${config.meta.version}. Do not edit manually.`,
+    ` *`,
+    ` * Usage:`,
+    ` *   import { Button, Input, Card, ThemeProvider } from "${config.meta.npmScope ?? "@myorg"}/${config.meta.name}";`,
+    ` */`,
+    ""
+  ];
+  for (const name of componentNames) {
+    lines.push(`export * from "./${name}";`);
+  }
+  lines.push(`export * from "./ThemeProvider";`);
+  lines.push("");
+  return lines.join("\n");
+}
+
+// src/generators/metadata/generator.ts
+var COMPONENT_DEFAULTS = {
+  button: {
+    description: "Triggers an action or navigation. The primary interactive element.",
+    role: "action-trigger",
+    hierarchyLevel: "primary",
+    interactionModel: "synchronous",
+    layoutImpact: "inline",
+    destructive: false,
+    sizes: ["sm", "md", "lg"]
+  },
+  input: {
+    description: "Accepts user text input. Use with a label for accessibility.",
+    role: "data-entry",
+    hierarchyLevel: "primary",
+    interactionModel: "synchronous",
+    layoutImpact: "block",
+    destructive: false,
+    sizes: ["sm", "md", "lg"]
+  },
+  card: {
+    description: "Groups related content with optional header, body, and footer slots.",
+    role: "content-container",
+    hierarchyLevel: "utility",
+    interactionModel: "none",
+    layoutImpact: "block",
+    destructive: false
+  },
+  badge: {
+    description: "Compact label for status, categories, or counts. Display-only \u2014 not interactive.",
+    role: "status-indicator",
+    hierarchyLevel: "utility",
+    interactionModel: "none",
+    layoutImpact: "inline",
+    destructive: false,
+    sizes: ["sm", "md", "lg"]
+  },
+  checkbox: {
+    description: "Binary toggle for boolean values. Supports indeterminate state for partial selections.",
+    role: "data-entry",
+    hierarchyLevel: "primary",
+    interactionModel: "synchronous",
+    layoutImpact: "inline",
+    destructive: false,
+    sizes: ["sm", "md", "lg"]
+  },
+  radio: {
+    description: "Single selection within a mutually exclusive group. Always use inside RadioGroup.",
+    role: "data-entry",
+    hierarchyLevel: "primary",
+    interactionModel: "synchronous",
+    layoutImpact: "inline",
+    destructive: false,
+    sizes: ["sm", "md", "lg"]
+  },
+  select: {
+    description: "Dropdown picker for selecting from a list of options. Wraps native <select> for accessibility.",
+    role: "data-entry",
+    hierarchyLevel: "primary",
+    interactionModel: "synchronous",
+    layoutImpact: "block",
+    destructive: false,
+    sizes: ["sm", "md", "lg"]
+  },
+  toast: {
+    description: "Feedback messages for user actions. Alert is inline; Toast is an overlay with auto-dismiss.",
+    role: "feedback",
+    hierarchyLevel: "utility",
+    interactionModel: "asynchronous",
+    layoutImpact: "overlay",
+    destructive: false
+  },
+  spinner: {
+    description: "Loading indicator for async operations. Use with an accessible label for screen readers.",
+    role: "loading-indicator",
+    hierarchyLevel: "utility",
+    interactionModel: "asynchronous",
+    layoutImpact: "inline",
+    destructive: false,
+    sizes: ["xs", "sm", "md", "lg", "xl"]
+  }
+};
+function buildComponentMetadata(componentName, rule, config) {
+  const defaults = COMPONENT_DEFAULTS[componentName.toLowerCase()] ?? {};
+  const variants = rule.allowedVariants ?? ["default"];
+  const requiredProps = rule.requiredProps ?? [];
+  const tokens = {};
+  for (const [tokenName] of Object.entries(rule.tokens ?? {})) {
+    tokens[tokenName] = `--${tokenName}`;
+  }
+  const meta = {
+    component: pascalCase(componentName),
+    version: config.meta.version,
+    description: defaults.description ?? `A ${componentName} component.`,
+    role: defaults.role ?? "ui-element",
+    hierarchyLevel: defaults.hierarchyLevel ?? "utility",
+    interactionModel: defaults.interactionModel ?? "none",
+    layoutImpact: defaults.layoutImpact ?? "inline",
+    destructive: componentName.toLowerCase().includes("delete") || variants.includes("danger"),
+    allowedVariants: variants,
+    defaultVariant: variants[0] ?? "default",
+    requiredProps,
+    optionalProps: buildOptionalProps(componentName, defaults),
+    tokens,
+    accessibilityContract: {
+      keyboard: rule.a11y?.keyboard ?? true,
+      focusRing: rule.a11y?.focusRing ?? true,
+      ariaLabel: rule.a11y?.ariaLabel ?? "optional",
+      ...rule.a11y?.role ? { role: rule.a11y.role } : {}
+    },
+    governanceRules: {
+      ...rule.maxWidth ? { maxWidth: rule.maxWidth } : {},
+      ...rule.allowedRadius ? { allowedRadius: rule.allowedRadius } : {},
+      ...rule.allowedShadows ? { allowedShadows: rule.allowedShadows } : {},
+      ...rule.colorPalette ? { colorPalette: rule.colorPalette } : {}
+    }
+  };
+  if (defaults.sizes) {
+    meta.sizes = defaults.sizes;
+  }
+  return meta;
+}
+function buildOptionalProps(componentName, _defaults) {
+  const common = ["className", "style", "id", "data-testid"];
+  const byComponent = {
+    button: [
+      "size",
+      "loading",
+      "disabled",
+      "fullWidth",
+      "iconLeft",
+      "iconRight",
+      "onClick"
+    ],
+    input: [
+      "size",
+      "disabled",
+      "label",
+      "helperText",
+      "errorMessage",
+      "placeholder",
+      "startAdornment",
+      "endAdornment",
+      "onChange"
+    ],
+    card: ["maxWidth", "noPadding", "onClick"],
+    badge: ["size", "dot"],
+    checkbox: ["size", "disabled", "label", "helperText", "indeterminate", "checked", "onChange"],
+    radio: ["size", "disabled", "label", "value", "onChange"],
+    select: ["size", "disabled", "label", "helperText", "errorMessage", "placeholder", "options", "fullWidth", "onChange"],
+    toast: ["variant", "title", "dismissible", "duration", "onDismiss"],
+    spinner: ["size", "variant", "label"]
+  };
+  return [...byComponent[componentName.toLowerCase()] ?? [], ...common];
+}
+function pascalCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function buildIndexMetadata(config, componentNames, tokenCount) {
+  return {
+    name: config.meta.name,
+    version: config.meta.version,
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    components: componentNames.map(pascalCase),
+    tokenCount,
+    themes: Object.keys(config.themes ?? {})
+  };
+}
+function generateMetadata(config, rules, tokenCount) {
+  const files = [];
+  const componentNames = Object.keys(rules);
+  for (const [componentName, rule] of Object.entries(rules)) {
+    const metadata = buildComponentMetadata(componentName, rule, config);
+    files.push({
+      filename: `${componentName}.json`,
+      content: JSON.stringify(metadata, null, 2)
+    });
+  }
+  const index = buildIndexMetadata(config, componentNames, tokenCount);
+  files.push({
+    filename: "index.json",
+    content: JSON.stringify(index, null, 2)
+  });
+  return files;
+}
+
+// src/adapters/react/docs/mdx.ts
+function generateComponentDoc(metadata, config) {
+  const {
+    component,
+    description,
+    allowedVariants,
+    sizes,
+    accessibilityContract
+  } = metadata;
+  const inlineContentByComponent = {
+    Button: (v) => v.charAt(0).toUpperCase() + v.slice(1)
+  };
+  const childContent = inlineContentByComponent[component] ?? (() => "");
+  const variantStories = allowedVariants.map((v) => `<${component} variant="${v}" aria-label="${v} example">${childContent(v)}</${component}>`).join("\n");
+  const sizeStories = sizes ? sizes.map((s) => `<${component} size="${s}" aria-label="${s} size example">${childContent(s)}</${component}>`).join("\n") : "";
+  const requiredPropsNote = metadata.requiredProps.length > 0 ? `
+
+> **Required props:** ${metadata.requiredProps.map((p) => `\`${p}\``).join(", ")}` : "";
+  return `---
+title: ${component}
+description: "${description}"
+---
+
+import { ${component} } from '../components/${component}';
+import { ThemeProvider } from '../components/ThemeProvider';
+
+# ${component}
+
+${description}${requiredPropsNote}
+
+## Overview
+
+| Property | Value |
+|---|---|
+| Role | \`${metadata.role}\` |
+| Interaction | \`${metadata.interactionModel}\` |
+| Layout impact | \`${metadata.layoutImpact}\` |
+| Destructive | \`${metadata.destructive}\` |
+| Default variant | \`${metadata.defaultVariant}\` |
+
+## Variants
+
+All allowed variants as defined in \`design-system.rules.json\`:
+
+\`\`\`tsx
+${allowedVariants.map((v) => `<${component} variant="${v}" aria-label="${v}">${childContent(v)}</${component}>`).join("\n")}
+\`\`\`
+
+<ThemeProvider theme="light">
+  <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+    ${variantStories}
+  </div>
+</ThemeProvider>
+
+${sizeStories ? `## Sizes
+
+\`\`\`tsx
+${sizes.map((s) => `<${component} size="${s}" aria-label="${s}">${childContent(s)}</${component}>`).join("\n")}
+\`\`\`
+
+<ThemeProvider theme="light">
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    ${sizeStories}
+  </div>
+</ThemeProvider>
+` : ""}
+
+## States
+
+\`\`\`tsx
+${component === "Button" ? `{/* Loading */}
+<Button variant="primary" loading aria-label="Saving">Saving...</Button>
+
+` : ""}{/* Disabled */}
+<${component} disabled aria-label="Disabled example">${childContent("disabled")}</${component}>
+\`\`\`
+
+## Accessibility
+
+| Requirement | Status |
+|---|---|
+| Keyboard navigation | ${accessibilityContract.keyboard ? "\u2705 Required" : "\u26A0\uFE0F Optional"} |
+| Focus ring | ${accessibilityContract.focusRing ? "\u2705 Required" : "\u26A0\uFE0F Optional"} |
+| aria-label | ${accessibilityContract.ariaLabel === "required" ? "\u2705 Required" : "\u26A0\uFE0F Optional"} |
+${accessibilityContract.role ? `| ARIA role | \`${accessibilityContract.role}\` |` : ""}
+
+## Tokens
+
+The following CSS custom properties control the appearance of this component.
+Override these in \`design-system.rules.json\` under \`${component.toLowerCase()}.tokens\`.
+
+| Token | CSS Property |
+|---|---|
+${Object.entries(metadata.tokens).map(([name, cssVar2]) => `| \`${name}\` | \`${cssVar2}\` |`).join("\n")}
+
+## Usage
+
+\`\`\`tsx
+import { ${component} } from "${config.meta.npmScope ?? "@myorg"}/${config.meta.name}";
+import "${config.meta.npmScope ?? "@myorg"}/${config.meta.name}/tokens/light.css";
+
+// Basic usage
+<${component}${metadata.requiredProps.includes("aria-label") ? `
+  aria-label="${component}"` : ""}${allowedVariants[0] ? `
+  variant="${allowedVariants[0]}"` : ""}
+>
+  ${childContent(allowedVariants[0] ?? "")}
+</${component}>
+\`\`\`
+`;
+}
+function generateIndexDoc(config, componentNames) {
+  return `---
+title: ${config.meta.name}
+description: "${config.meta.description ?? `${config.meta.name} design system`}"
+---
+
+# ${config.meta.name}
+
+> ${config.meta.description ?? "A generated design system."}
+
+Generated by **dsforge** \u2014 config-driven, AI-native, publish-ready.
+
+## Installation
+
+\`\`\`bash
+npm install ${config.meta.npmScope ?? "@myorg"}/${config.meta.name}
+\`\`\`
+
+## Setup
+
+\`\`\`tsx
+// 1. Import base tokens (spacing, typography, radius, motion)
+import "${config.meta.npmScope ?? "@myorg"}/${config.meta.name}/tokens/base.css";
+
+// 2. Import your theme (light or dark)
+import "${config.meta.npmScope ?? "@myorg"}/${config.meta.name}/tokens/light.css";
+
+// 3. Wrap your app
+import { ThemeProvider } from "${config.meta.npmScope ?? "@myorg"}/${config.meta.name}";
+
+function App() {
+  return (
+    <ThemeProvider theme="light">
+      {/* your app */}
+    </ThemeProvider>
+  );
+}
+\`\`\`
+
+## Components
+
+${componentNames.map((name) => `- [${name.charAt(0).toUpperCase() + name.slice(1)}](./${name}.mdx)`).join("\n")}
+
+## Themes
+
+${Object.keys(config.themes ?? {}).map((t) => `- \`${t}\` \u2014 import \`tokens/${t}.css\``).join("\n")}
+
+## Token Architecture
+
+This design system uses a 3-tier token architecture:
+
+| Layer | Purpose | Example |
+|---|---|---|
+| **Global** | Raw values | \`blue-600: #2563eb\` |
+| **Semantic** | Intent-named | \`color-action: {global.blue-600}\` |
+| **Component** | Component-specific | \`button-bg: {semantic.color-action}\` |
+
+Themes override only the **semantic layer**, making brand swapping and dark mode a single file change.
+`;
+}
+function generateDocs(config, rules, metadataMap) {
+  const files = [];
+  files.push({
+    filename: "index.mdx",
+    content: generateIndexDoc(config, Object.keys(rules))
+  });
+  for (const componentName of Object.keys(rules)) {
+    const metadata = metadataMap[componentName];
+    if (!metadata) continue;
+    files.push({
+      filename: `${componentName}.mdx`,
+      content: generateComponentDoc(metadata, config)
+    });
+  }
+  return files;
+}
+
+// src/generators/package/emitter.ts
+function generatePackageJson(config, componentNames) {
+  const scope = config.meta.npmScope ?? "@myorg";
+  const name = `${scope}/${config.meta.name}`;
+  const pkg = {
+    name,
+    version: config.meta.version,
+    description: config.meta.description ?? `${config.meta.name} design system`,
+    keywords: ["design-system", "tokens", "react", "typescript", "components"],
+    license: "MIT",
+    type: "module",
+    main: "./dist/index.js",
+    types: "./dist/index.d.ts",
+    exports: {
+      ".": {
+        import: "./dist/index.js",
+        types: "./dist/index.d.ts"
+      },
+      "./tokens/base.css": "./tokens/base.css",
+      ...Object.fromEntries(
+        Object.keys({}).concat(["light", "dark"]).map((t) => [`./tokens/${t}.css`, `./tokens/${t}.css`])
+      ),
+      "./tokens": "./tokens/tokens.js",
+      "./tailwind": "./tokens/tailwind.js",
+      "./metadata": "./metadata/index.json",
+      ...Object.fromEntries(
+        componentNames.map((c) => [`./metadata/${c}`, `./metadata/${c}.json`])
+      )
+    },
+    files: ["dist", "tokens", "metadata", "docs", "CHANGELOG.md"],
+    scripts: {
+      build: "tsc",
+      prepublishOnly: "npm run build"
+    },
+    devDependencies: {
+      "@types/react": "^18.0.0",
+      "@types/react-dom": "^18.0.0",
+      typescript: "^5.0.0"
+    },
+    peerDependencies: {
+      react: ">=17.0.0",
+      "react-dom": ">=17.0.0"
+    },
+    peerDependenciesMeta: {
+      react: { optional: false },
+      "react-dom": { optional: false }
+    },
+    engines: {
+      node: ">=18.0.0"
+    },
+    dsforge: {
+      generatedBy: "dsforge",
+      configVersion: config.meta.version,
+      preset: config.meta.preset ?? "comfortable",
+      components: componentNames,
+      themes: []
+    }
+  };
+  return JSON.stringify(pkg, null, 2);
+}
+function generateTsConfig() {
+  return JSON.stringify(
+    {
+      compilerOptions: {
+        target: "ES2020",
+        module: "NodeNext",
+        moduleResolution: "NodeNext",
+        lib: ["ES2020", "DOM"],
+        outDir: "./dist",
+        rootDir: "./src",
+        declaration: true,
+        declarationMap: true,
+        sourceMap: true,
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        jsx: "react-jsx"
+      },
+      include: ["src/**/*"],
+      exclude: ["node_modules", "dist"]
+    },
+    null,
+    2
+  );
+}
+function generateReadme(config, componentNames) {
+  const scope = config.meta.npmScope ?? "@myorg";
+  const pkgName = `${scope}/${config.meta.name}`;
+  const themeNames = ["light", "dark"];
+  return `# ${config.meta.name}
+
+> ${config.meta.description ?? "A design system generated by dsforge."}
+
+[![npm version](https://badge.fury.io/js/${encodeURIComponent(pkgName)}.svg)](https://www.npmjs.com/package/${pkgName})
+
+---
+
+## Installation
+
+\`\`\`bash
+npm install ${pkgName}
+\`\`\`
+
+## Quick start
+
+\`\`\`tsx
+// 1. Import base tokens (once, in your app root)
+import "${pkgName}/tokens/base.css";
+import "${pkgName}/tokens/light.css";
+
+// 2. Wrap your app
+import { ThemeProvider, Button } from "${pkgName}";
+
+function App() {
+  return (
+    <ThemeProvider theme="light">
+      <Button variant="primary" aria-label="Get started">
+        Get started
+      </Button>
+    </ThemeProvider>
+  );
+}
+\`\`\`
+
+## Components
+
+${componentNames.map(
+    (c) => `- **${c.charAt(0).toUpperCase() + c.slice(1)}** \u2014 see \`metadata/${c}.json\` for contract`
+  ).join("\n")}
+
+## Themes
+
+${themeNames.map((t) => `- \`${t}\` \u2014 import \`${pkgName}/tokens/${t}.css\``).join("\n")}
+
+### Theme switching
+
+\`\`\`tsx
+import { useTheme } from "${pkgName}";
+
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+      Toggle theme
+    </button>
+  );
+}
+\`\`\`
+
+## Using with Tailwind
+
+\`\`\`js
+// tailwind.config.js
+const ds = require("${pkgName}/tailwind");
+module.exports = {
+  theme: { extend: ds },
+};
+\`\`\`
+
+## Without React (CSS tokens only)
+
+\`\`\`html
+<link rel="stylesheet" href="node_modules/${pkgName}/tokens/base.css" />
+<link rel="stylesheet" href="node_modules/${pkgName}/tokens/light.css" />
+
+<button class="my-button">Click me</button>
+
+<style>
+  .my-button {
+    background: var(--color-action);
+    color: var(--color-text-inverse);
+    border-radius: var(--radius-md);
+    padding: var(--component-padding-sm) var(--component-padding-md);
+  }
+</style>
+\`\`\`
+
+## Token customization
+
+All design tokens are defined in \`design-system.config.json\`. After editing,
+run \`dsforge generate\` to regenerate the package.
+
+\`\`\`json
+// design-system.config.json (excerpt)
+{
+  "tokens": {
+    "global": {
+      "color-brand-500": "#2563eb"
+    },
+    "semantic": {
+      "color-action": "{global.color-brand-500}"
+    }
+  }
+}
+\`\`\`
+
+Token references use \`{tier.name}\` syntax to alias values across tiers:
+global \u2192 semantic \u2192 component. Changing a global value propagates through
+every semantic and component token that references it.
+
+## AI tool integration
+
+The \`metadata/\` directory contains machine-readable component contracts.
+AI coding assistants (Copilot, Cursor, Claude Code) can read these to
+generate UI that respects your governance rules automatically.
+
+\`\`\`json
+// ${pkgName}/metadata/button.json
+{
+  "component": "Button",
+  "allowedVariants": ["primary", "secondary", "danger", "ghost"],
+  "requiredProps": ["aria-label"],
+  "accessibilityContract": { "keyboard": true, "focusRing": true }
+}
+\`\`\`
+
+---
+
+Generated by [dsforge](https://github.com/nghitrum/dsforge) v${config.meta.version}.
+`;
+}
+function generateChangelog(config) {
+  const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  return `# Changelog
+
+All notable changes to \`${config.meta.name}\` are documented here.
+Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [${config.meta.version}] \u2014 ${date}
+
+### Added
+
+- Initial release generated by dsforge
+- Components: see \`metadata/index.json\` for full list
+- Token architecture: global \u2192 semantic \u2192 component (3-tier)
+- Themes: light, dark
+- CSS custom property output for all tokens
+- Tailwind theme extension
+- AI-consumable metadata per component
+
+---
+
+_To add a new entry: run \`dsforge diff --from <prev-version>\` and paste the output here._
+`;
+}
+export {
+  ColorConfigSchema,
+  DesignSystemConfigSchema,
+  ElevationConfigSchema,
+  LayoutConfigSchema,
+  MotionConfigSchema,
+  OutputConfigSchema,
+  RadiusConfigSchema,
+  RulesConfigSchema,
+  SUPPORTED_TARGETS,
+  SpacingConfigSchema,
+  StatesConfigSchema,
+  ThemesConfigSchema,
+  TokenLayersSchema,
+  TokenResolver,
+  TypographyConfigSchema,
+  buildInitialConfig,
+  buildInitialRules,
+  buildThemeCss,
+  checkContrast,
+  emitBaseCss,
+  emitJsTokens,
+  emitTailwindConfig,
+  emitThemeCss,
+  extractRefs,
+  generateButton,
+  generateCard,
+  generateChangelog,
+  generateComponentIndex,
+  generateCssFiles,
+  generateDocs,
+  generateInput,
+  generateMetadata,
+  generatePackageJson,
+  generateReadme,
+  generateThemeProvider,
+  generateTsConfig,
+  hasRefs,
+  hexContrastRatio,
+  isHexColor,
+  resolveTokens,
+  suggestContrastFix,
+  validateConfig
+};