@fragments-sdk/cli 0.14.2 → 0.15.0

package/dist/{chunk-I34BC3CU.js → chunk-32LIWN2P.js}

@@ -9,6 +9,8 @@ import {
   isExportStory as storybookIsExportStory
 } from "@storybook/csf";
 import { generateContext, filterPlaceholders, PLACEHOLDER_PATTERNS } from "@fragments-sdk/context/generate";
+import { z as z2 } from "zod";
+import { z as z3 } from "zod";
 import { ComponentGraphEngine } from "@fragments-sdk/context/graph";
 import { useEffect, useState } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
@@ -17,8 +19,8 @@ var BRAND = {
   name: "Fragments",
   /** Lowercase name for file paths and CLI (e.g., "fragments") */
   nameLower: "fragments",
-  /** File extension for fragment definition files (e.g., ".fragment.tsx") */
-  fileExtension: ".fragment.tsx",
+  /** File extension for fragment definition files — V2 canonical format */
+  fileExtension: ".contract.json",
   /** Legacy file extension for segments (still supported for migration) */
   legacyFileExtension: ".segment.tsx",
   /** JSON file extension for compiled output */
@@ -134,6 +136,215 @@ function budgetBar(percent, width = 20) {
   const bar = "\u2588".repeat(filled) + "\u2591".repeat(width - filled);
   return percent > 100 ? `\x1B[31m${bar}\x1B[0m` : `\x1B[32m${bar}\x1B[0m`;
 }
+var COLOR_PROPERTIES = /* @__PURE__ */ new Set(["backgroundColor", "borderColor", "color"]);
+var NUMERIC_PROPERTIES = /* @__PURE__ */ new Set([
+  "borderWidth",
+  "borderRadius",
+  "fontSize",
+  "padding",
+  "gap"
+]);
+var DEFAULT_STYLE_PROPERTIES = [
+  "backgroundColor",
+  "borderColor",
+  "borderWidth",
+  "borderRadius",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "lineHeight",
+  "letterSpacing",
+  "textAlign",
+  "boxShadow",
+  "padding",
+  "gap",
+  "opacity"
+];
+var DEFAULT_ENHANCED_STYLE_PROPERTIES = [
+  ...DEFAULT_STYLE_PROPERTIES,
+  "color"
+];
+function normalizeStyleValue(prop, value) {
+  let normalized = value.trim().replace(/\s+/g, " ");
+  if (prop === "boxShadow" && normalized === "none") {
+    normalized = "";
+  }
+  if (normalized.match(/rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/)) {
+    normalized = "transparent";
+  }
+  return normalized;
+}
+function parseColor(color) {
+  const hexMatch = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
+  if (hexMatch) {
+    return {
+      r: parseInt(hexMatch[1], 16),
+      g: parseInt(hexMatch[2], 16),
+      b: parseInt(hexMatch[3], 16)
+    };
+  }
+  const rgbaMatch = color.match(
+    /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/
+  );
+  if (rgbaMatch) {
+    return {
+      r: parseInt(rgbaMatch[1], 10),
+      g: parseInt(rgbaMatch[2], 10),
+      b: parseInt(rgbaMatch[3], 10),
+      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
+    };
+  }
+  return null;
+}
+function compareColors(color1, color2, tolerance, alphaTolerance = 0.05) {
+  const rgb1 = parseColor(color1);
+  const rgb2 = parseColor(color2);
+  if (!rgb1 || !rgb2) {
+    return color1 === color2;
+  }
+  return Math.abs(rgb1.r - rgb2.r) <= tolerance && Math.abs(rgb1.g - rgb2.g) <= tolerance && Math.abs(rgb1.b - rgb2.b) <= tolerance && Math.abs((rgb1.a ?? 1) - (rgb2.a ?? 1)) <= alphaTolerance;
+}
+function compareNumericValues(value1, value2, tolerance) {
+  const num1 = parseFloat(value1);
+  const num2 = parseFloat(value2);
+  if (isNaN(num1) || isNaN(num2)) {
+    return value1 === value2;
+  }
+  return Math.abs(num1 - num2) <= tolerance;
+}
+function compareStyleValue(prop, figma2, rendered) {
+  const normalizedFigma = normalizeStyleValue(prop, figma2);
+  const normalizedRendered = normalizeStyleValue(prop, rendered);
+  if (normalizedFigma === normalizedRendered) {
+    return true;
+  }
+  if (COLOR_PROPERTIES.has(prop)) {
+    return compareColors(normalizedFigma, normalizedRendered, 5);
+  }
+  if (NUMERIC_PROPERTIES.has(prop)) {
+    return compareNumericValues(normalizedFigma, normalizedRendered, 1);
+  }
+  return false;
+}
+function compareStyles(figmaStyles, renderedStyles) {
+  const properties = [];
+  const cleanFigmaStyles = {};
+  const propsToCompare = DEFAULT_STYLE_PROPERTIES;
+  for (const prop of propsToCompare) {
+    const figmaValue = figmaStyles[prop];
+    const renderedValue = renderedStyles[prop];
+    if (figmaValue !== void 0) {
+      cleanFigmaStyles[prop] = figmaValue;
+      const match = compareStyleValue(prop, figmaValue, renderedValue || "");
+      properties.push({
+        property: prop,
+        figma: figmaValue,
+        rendered: renderedValue || "(not set)",
+        match
+      });
+    }
+  }
+  const allMatch = properties.every((p) => p.match);
+  return {
+    match: allMatch,
+    properties,
+    figmaStyles: cleanFigmaStyles,
+    renderedStyles
+  };
+}
+function compareStylesWithTokens(figmaStyles, renderedStyles, tokenLookup, theme = "default") {
+  const properties = [];
+  const cleanFigmaStyles = {};
+  const propsToCompare = DEFAULT_ENHANCED_STYLE_PROPERTIES;
+  for (const prop of propsToCompare) {
+    const figmaValue = figmaStyles[prop];
+    const renderedValue = renderedStyles[prop];
+    if (figmaValue !== void 0) {
+      cleanFigmaStyles[prop] = figmaValue;
+      const match = compareStyleValue(prop, figmaValue, renderedValue || "");
+      const item = {
+        property: prop,
+        figma: figmaValue,
+        rendered: renderedValue || "(not set)",
+        match,
+        isHardcoded: false
+      };
+      if (tokenLookup) {
+        const figmaTokens = tokenLookup.findByValue(figmaValue, theme);
+        const renderedTokens = renderedValue ? tokenLookup.findByValue(renderedValue, theme) : [];
+        if (figmaTokens.length > 0) {
+          item.figmaToken = figmaTokens[0];
+        }
+        if (renderedTokens.length > 0) {
+          item.renderedToken = renderedTokens[0];
+        }
+        item.isHardcoded = !!item.figmaToken && !item.renderedToken;
+        if (item.isHardcoded && item.figmaToken) {
+          const token = tokenLookup.getToken(item.figmaToken);
+          if (token) {
+            const cssProperty = toCssProperty(prop);
+            item.suggestedFix = {
+              tokenName: item.figmaToken,
+              tokenValue: token.resolvedValue,
+              codeFix: `${cssProperty}: var(${item.figmaToken});`,
+              confidence: 0.9,
+              reason: `Figma uses token ${item.figmaToken} (${token.resolvedValue}). Replace hardcoded value with token for consistency.`
+            };
+          }
+        }
+      }
+      properties.push(item);
+    }
+  }
+  const allMatch = properties.every((p) => p.match);
+  let tokenSummary;
+  if (tokenLookup) {
+    tokenSummary = tokenLookup.calculateUsageSummary(
+      properties.map((p) => ({
+        property: p.property,
+        figma: p.figma,
+        rendered: p.rendered,
+        match: p.match
+      })),
+      theme
+    );
+  }
+  return {
+    match: allMatch,
+    properties,
+    figmaStyles: cleanFigmaStyles,
+    renderedStyles,
+    tokenSummary
+  };
+}
+function toCssProperty(prop) {
+  return prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function formatTokenSummary(summary) {
+  const lines = [];
+  lines.push(`Token Compliance: ${summary.compliancePercent}%`);
+  lines.push(
+    `${summary.usingTokens}/${summary.totalProperties} properties using tokens`
+  );
+  if (summary.hardcoded > 0) {
+    lines.push(`${summary.hardcoded} hardcoded value(s) detected`);
+  }
+  if (summary.implicitMatches > 0) {
+    lines.push(`${summary.implicitMatches} implicit match(es)`);
+  }
+  return lines.join("\n");
+}
+function getComplianceBadge(compliancePercent) {
+  if (compliancePercent >= 100) {
+    return { label: "Excellent", color: "green" };
+  } else if (compliancePercent >= 80) {
+    return { label: "Good", color: "blue" };
+  } else if (compliancePercent >= 50) {
+    return { label: "Fair", color: "yellow" };
+  } else {
+    return { label: "Poor", color: "red" };
+  }
+}
 var figmaStringMappingSchema = z.object({
   __type: z.literal("figma-string"),
   figmaProperty: z.string().min(1)
@@ -1166,6 +1377,777 @@ function parseTokenFile(content, filePath) {
     total: tokens.length
   };
 }
+var DTCG_META_KEYS = /* @__PURE__ */ new Set([
+  "$type",
+  "$value",
+  "$description",
+  "$deprecated",
+  "$extensions",
+  "$extends"
+]);
+var MAX_ALIAS_DEPTH = 10;
+function isDTCGFile(filePath) {
+  return filePath.endsWith(".tokens.json") || filePath.endsWith(".tokens");
+}
+function mapDTCGTypeToCategory(type, tokenPath) {
+  switch (type) {
+    case "color":
+      return "colors";
+    case "dimension":
+      if (/radius/i.test(tokenPath)) return "radius";
+      return "spacing";
+    case "fontFamily":
+    case "fontWeight":
+      return "typography";
+    case "shadow":
+      return "shadows";
+    case "border":
+      return "borders";
+    case "duration":
+    case "cubicBezier":
+    case "transition":
+      return "transitions";
+    case "typography":
+      return "typography";
+    case "gradient":
+      return "colors";
+    case "strokeStyle":
+      return "borders";
+    case "number":
+      return "other";
+    default:
+      return "other";
+  }
+}
+function colorValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const obj = value;
+    if (typeof obj.hex === "string") {
+      if (obj.alpha !== void 0 && typeof obj.alpha === "number" && obj.alpha < 1) {
+        const hex = obj.hex.replace("#", "");
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${obj.alpha})`;
+      }
+      return obj.hex;
+    }
+    if (Array.isArray(obj.components)) {
+      const comps = obj.components;
+      if (comps.length >= 3) {
+        const alpha = obj.alpha ?? (comps.length >= 4 ? comps[3] : 1);
+        if (typeof alpha === "number" && alpha < 1) {
+          return `rgba(${Math.round(comps[0] * 255)}, ${Math.round(comps[1] * 255)}, ${Math.round(comps[2] * 255)}, ${alpha})`;
+        }
+        if (comps.every((c) => c <= 1)) {
+          const r = Math.round(comps[0] * 255);
+          const g = Math.round(comps[1] * 255);
+          const b = Math.round(comps[2] * 255);
+          return `rgb(${r}, ${g}, ${b})`;
+        }
+        return `rgb(${comps[0]}, ${comps[1]}, ${comps[2]})`;
+      }
+    }
+  }
+  return String(value);
+}
+function dimensionValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const obj = value;
+    if (typeof obj.value === "number" && typeof obj.unit === "string") {
+      return `${obj.value}${obj.unit}`;
+    }
+  }
+  return String(value);
+}
+function shadowValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    return value.map((v) => shadowSingleToCSS(v)).join(", ");
+  }
+  return shadowSingleToCSS(value);
+}
+function shadowSingleToCSS(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const obj = value;
+    const parts = [];
+    if (obj.inset) parts.push("inset");
+    parts.push(dimensionValueToCSS(obj.offsetX));
+    parts.push(dimensionValueToCSS(obj.offsetY));
+    parts.push(dimensionValueToCSS(obj.blur));
+    if (obj.spread !== void 0) parts.push(dimensionValueToCSS(obj.spread));
+    parts.push(colorValueToCSS(obj.color));
+    return parts.join(" ");
+  }
+  return String(value);
+}
+function borderValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const obj = value;
+    return `${dimensionValueToCSS(obj.width)} ${obj.style ?? "solid"} ${colorValueToCSS(obj.color)}`;
+  }
+  return String(value);
+}
+function typographyValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const obj = value;
+    const parts = [];
+    if (obj.fontWeight) parts.push(String(obj.fontWeight));
+    if (obj.fontSize) parts.push(dimensionValueToCSS(obj.fontSize));
+    if (obj.lineHeight) parts.push(`/ ${obj.lineHeight}`);
+    if (obj.fontFamily) {
+      const family = Array.isArray(obj.fontFamily) ? obj.fontFamily.join(", ") : String(obj.fontFamily);
+      parts.push(family);
+    }
+    return parts.join(" ");
+  }
+  return String(value);
+}
+function cubicBezierValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value) && value.length === 4) {
+    return `cubic-bezier(${value.join(", ")})`;
+  }
+  return String(value);
+}
+function transitionValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const obj = value;
+    const parts = [];
+    if (obj.duration) parts.push(String(obj.duration));
+    if (obj.timingFunction) parts.push(cubicBezierValueToCSS(obj.timingFunction));
+    if (obj.delay) parts.push(String(obj.delay));
+    return parts.join(" ");
+  }
+  return String(value);
+}
+function gradientValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    const stops = value.map((stop) => {
+      if (stop && typeof stop === "object") {
+        const s = stop;
+        const color = colorValueToCSS(s.color);
+        const position = typeof s.position === "number" ? ` ${s.position * 100}%` : "";
+        return `${color}${position}`;
+      }
+      return String(stop);
+    });
+    return `linear-gradient(${stops.join(", ")})`;
+  }
+  return String(value);
+}
+function fontFamilyValueToCSS(value) {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.join(", ");
+  return String(value);
+}
+function valueToCSS(type, value) {
+  switch (type) {
+    case "color":
+      return colorValueToCSS(value);
+    case "dimension":
+      return dimensionValueToCSS(value);
+    case "shadow":
+      return shadowValueToCSS(value);
+    case "border":
+      return borderValueToCSS(value);
+    case "typography":
+      return typographyValueToCSS(value);
+    case "cubicBezier":
+      return cubicBezierValueToCSS(value);
+    case "transition":
+      return transitionValueToCSS(value);
+    case "gradient":
+      return gradientValueToCSS(value);
+    case "fontFamily":
+      return fontFamilyValueToCSS(value);
+    case "fontWeight":
+      return String(value);
+    case "duration":
+      return String(value);
+    case "number":
+      return String(value);
+    case "strokeStyle":
+      return typeof value === "string" ? value : String(value);
+    default:
+      return String(value);
+  }
+}
+function isAlias(value) {
+  return typeof value === "string" && /^\{.+\}$/.test(value);
+}
+function resolveAliasPath(alias) {
+  return alias.slice(1, -1);
+}
+function resolveAlias(alias, root, visited, depth) {
+  if (depth > MAX_ALIAS_DEPTH) {
+    throw new Error(`Circular alias detected: ${alias} (max depth ${MAX_ALIAS_DEPTH} reached)`);
+  }
+  const path = resolveAliasPath(alias);
+  if (visited.has(path)) {
+    throw new Error(`Circular alias detected: ${[...visited, path].join(" \u2192 ")}`);
+  }
+  visited.add(path);
+  const parts = path.split(".");
+  let current = root;
+  for (const part of parts) {
+    if (current && typeof current === "object" && part in current) {
+      current = current[part];
+    } else {
+      throw new Error(`Alias reference "${alias}" could not be resolved: "${part}" not found in path "${path}"`);
+    }
+  }
+  if (current && typeof current === "object" && "$value" in current) {
+    const resolvedValue = current.$value;
+    if (isAlias(resolvedValue)) {
+      return resolveAlias(resolvedValue, root, visited, depth + 1);
+    }
+    return resolvedValue;
+  }
+  if (isAlias(current)) {
+    return resolveAlias(current, root, visited, depth + 1);
+  }
+  return current;
+}
+function resolveExtends(group, root, visited) {
+  if (!group.$extends) return group;
+  const extendsPath = group.$extends;
+  if (visited.has(extendsPath)) {
+    throw new Error(`Circular $extends detected: ${[...visited, extendsPath].join(" \u2192 ")}`);
+  }
+  visited.add(extendsPath);
+  const parts = extendsPath.split(".");
+  let parent = root;
+  for (const part of parts) {
+    if (parent && typeof parent === "object" && part in parent) {
+      parent = parent[part];
+    } else {
+      throw new Error(`$extends reference "${extendsPath}" could not be resolved`);
+    }
+  }
+  if (!parent || typeof parent !== "object") {
+    throw new Error(`$extends target "${extendsPath}" is not a group`);
+  }
+  const resolvedParent = resolveExtends(parent, root, visited);
+  const merged = { ...resolvedParent };
+  for (const [key, value] of Object.entries(group)) {
+    if (key === "$extends") continue;
+    merged[key] = value;
+  }
+  return merged;
+}
+function walkTokenTree(node, root, path, inheritedType, tokens) {
+  const resolved = resolveExtends(node, root, /* @__PURE__ */ new Set());
+  const currentType = resolved.$type ?? inheritedType;
+  for (const [key, child] of Object.entries(resolved)) {
+    if (DTCG_META_KEYS.has(key)) continue;
+    if (typeof child !== "object" || child === null) continue;
+    const childObj = child;
+    const childPath = [...path, key];
+    if ("$value" in childObj) {
+      const tokenType = childObj.$type ?? currentType;
+      if (!tokenType) {
+        continue;
+      }
+      let rawValue = childObj.$value;
+      if (isAlias(rawValue)) {
+        try {
+          rawValue = resolveAlias(rawValue, root, /* @__PURE__ */ new Set(), 0);
+        } catch {
+        }
+      }
+      const cssValue = valueToCSS(tokenType, rawValue);
+      tokens.push({
+        path: childPath.join("."),
+        type: tokenType,
+        rawValue,
+        cssValue,
+        description: childObj.$description,
+        deprecated: childObj.$deprecated,
+        extensions: childObj.$extensions
+      });
+    } else {
+      walkTokenTree(
+        childObj,
+        root,
+        childPath,
+        currentType,
+        tokens
+      );
+    }
+  }
+}
+function detectDTCGPrefix(tokens, root) {
+  const extensions = root.$extensions;
+  if (extensions) {
+    const fragmentsExt = extensions["com.usefragments"];
+    if (fragmentsExt?.prefix && typeof fragmentsExt.prefix === "string") {
+      const p = fragmentsExt.prefix.replace(/-$/, "");
+      return `--${p}-`;
+    }
+  }
+  const topLevelKeys = Object.keys(root).filter((k) => !DTCG_META_KEYS.has(k));
+  if (topLevelKeys.length === 1) {
+    return `--${topLevelKeys[0]}-`;
+  }
+  if (tokens.length === 0) return "--";
+  const firstParts = tokens[0].path.split(".");
+  if (firstParts.length > 0) {
+    return `--${firstParts[0]}-`;
+  }
+  return "--";
+}
+function tokenPathToCSSName(path, prefix) {
+  const suffix = path.replace(/\./g, "-");
+  const normalizedPrefix = prefix.endsWith("-") ? prefix : `${prefix}-`;
+  const prefixBase = normalizedPrefix.replace(/^--/, "").replace(/-$/, "");
+  if (suffix.startsWith(prefixBase + "-") || suffix === prefixBase) {
+    return `--${suffix}`;
+  }
+  return `${normalizedPrefix}${suffix}`;
+}
+function parseDTCGFile(content, filePath) {
+  const root = JSON.parse(content);
+  const resolvedTokens = [];
+  walkTokenTree(root, root, [], void 0, resolvedTokens);
+  const prefix = detectDTCGPrefix(resolvedTokens, root);
+  const categories = {};
+  for (const token of resolvedTokens) {
+    const category = mapDTCGTypeToCategory(token.type, token.path);
+    const cssName = tokenPathToCSSName(token.path, prefix);
+    const parsed = {
+      name: cssName,
+      value: token.cssValue,
+      category,
+      description: token.description
+    };
+    if (!categories[category]) {
+      categories[category] = [];
+    }
+    categories[category].push(parsed);
+  }
+  return {
+    prefix,
+    categories,
+    total: resolvedTokens.length
+  };
+}
+var dtcgTokenTypeSchema = z2.enum([
+  "color",
+  "dimension",
+  "fontFamily",
+  "fontWeight",
+  "duration",
+  "cubicBezier",
+  "number",
+  "shadow",
+  "border",
+  "strokeStyle",
+  "transition",
+  "gradient",
+  "typography"
+]);
+var dtcgColorValueSchema = z2.union([
+  z2.string(),
+  z2.object({
+    colorSpace: z2.string().default("srgb"),
+    components: z2.array(z2.number()),
+    hex: z2.string().optional(),
+    alpha: z2.number().optional()
+  })
+]);
+var dtcgDimensionValueSchema = z2.union([
+  z2.string(),
+  z2.object({
+    value: z2.number(),
+    unit: z2.enum(["px", "rem"])
+  })
+]);
+var dtcgShadowValueSchema = z2.object({
+  color: dtcgColorValueSchema,
+  offsetX: dtcgDimensionValueSchema,
+  offsetY: dtcgDimensionValueSchema,
+  blur: dtcgDimensionValueSchema,
+  spread: dtcgDimensionValueSchema.optional(),
+  inset: z2.boolean().optional()
+});
+var dtcgBorderValueSchema = z2.object({
+  color: dtcgColorValueSchema,
+  width: dtcgDimensionValueSchema,
+  style: z2.string()
+});
+var dtcgTypographyValueSchema = z2.object({
+  fontFamily: z2.union([z2.string(), z2.array(z2.string())]),
+  fontSize: dtcgDimensionValueSchema,
+  fontWeight: z2.union([z2.number(), z2.string()]),
+  letterSpacing: dtcgDimensionValueSchema.optional(),
+  lineHeight: z2.union([z2.string(), z2.number()]).optional()
+});
+var dtcgTransitionValueSchema = z2.object({
+  duration: z2.string(),
+  delay: z2.string().optional(),
+  timingFunction: z2.array(z2.number()).length(4)
+});
+var dtcgGradientStopSchema = z2.object({
+  color: dtcgColorValueSchema,
+  position: z2.number()
+});
+var dtcgCubicBezierValueSchema = z2.tuple([
+  z2.number(),
+  z2.number(),
+  z2.number(),
+  z2.number()
+]);
+var dtcgTokenSchema = z2.object({
+  $value: z2.unknown(),
+  $type: dtcgTokenTypeSchema.optional(),
+  $description: z2.string().optional(),
+  $deprecated: z2.union([z2.boolean(), z2.string()]).optional(),
+  $extensions: z2.record(z2.string(), z2.unknown()).optional()
+}).passthrough();
+var dtcgTokenFileSchema = z2.record(z2.string(), z2.unknown()).refine(
+  (data) => {
+    return data !== null && typeof data === "object" && !Array.isArray(data);
+  },
+  { message: "DTCG token file must be a JSON object" }
+);
+var contractPropSchema = z3.object({
+  type: z3.string(),
+  values: z3.array(z3.string()).optional(),
+  default: z3.unknown().optional(),
+  description: z3.string(),
+  required: z3.boolean().optional(),
+  constraints: z3.array(z3.string()).optional()
+});
+var contractUsageSchema = z3.object({
+  when: z3.array(z3.string()),
+  whenNot: z3.array(z3.string()),
+  guidelines: z3.array(z3.string()).optional(),
+  accessibility: z3.array(z3.string()).optional()
+});
+var contractExampleSchema = z3.object({
+  name: z3.string(),
+  description: z3.string(),
+  code: z3.string(),
+  args: z3.record(z3.string(), z3.unknown()).optional()
+});
+var contractRelationSchema = z3.object({
+  component: z3.string(),
+  relationship: z3.enum(["alternative", "parent", "child", "sibling", "composition", "complementary", "used-by"]),
+  note: z3.string()
+});
+var contractContractSchema = z3.object({
+  propsSummary: z3.array(z3.string()).optional(),
+  scenarioTags: z3.array(z3.string()).optional(),
+  a11yRules: z3.array(z3.string()).optional(),
+  bans: z3.array(z3.object({
+    pattern: z3.string(),
+    message: z3.string()
+  })).optional(),
+  compoundChildren: z3.record(z3.string(), z3.object({
+    required: z3.boolean().optional(),
+    accepts: z3.array(z3.string()).optional(),
+    description: z3.string().optional()
+  })).optional(),
+  canonicalUsage: z3.array(z3.string()).optional(),
+  performanceBudget: z3.number().optional()
+});
+var contractAiSchema = z3.object({
+  compositionPattern: z3.enum(["compound", "simple", "controlled", "wrapper"]).optional(),
+  subComponents: z3.array(z3.string()).optional(),
+  requiredChildren: z3.array(z3.string()).optional(),
+  commonPatterns: z3.array(z3.string()).optional()
+});
+var contractPreviewSchema = z3.object({
+  setupModule: z3.string().optional(),
+  wrapperModule: z3.string().optional(),
+  wrapperExport: z3.string().optional(),
+  css: z3.array(z3.string()).optional(),
+  theme: z3.enum(["light", "dark"]).optional()
+});
+var contractProvenanceSchema = z3.object({
+  source: z3.enum(["manual", "extracted", "merged", "migrated"]),
+  verified: z3.boolean(),
+  frameworkSupport: z3.enum(["native", "manual-only"]).optional(),
+  sourceHash: z3.string().optional(),
+  extractedAt: z3.string().optional()
+});
+var contractFigmaSchema = z3.object({
+  nodeUrl: z3.string().optional(),
+  propMappings: z3.record(z3.string(), z3.object({
+    type: z3.enum(["string", "boolean", "enum", "instance", "children", "textContent"]),
+    figmaProperty: z3.string(),
+    values: z3.record(z3.string(), z3.string()).optional()
+  })).optional()
+});
+var componentContractSchema = z3.object({
+  $schema: z3.string(),
+  name: z3.string(),
+  description: z3.string(),
+  category: z3.string(),
+  tags: z3.array(z3.string()).optional(),
+  status: z3.enum(["stable", "beta", "deprecated", "experimental"]).optional(),
+  framework: z3.enum(["react", "vue", "svelte", "web-components", "angular"]).optional(),
+  sourcePath: z3.string(),
+  exportName: z3.string(),
+  propsSummary: z3.array(z3.string()),
+  props: z3.record(z3.string(), contractPropSchema),
+  usage: contractUsageSchema,
+  examples: z3.array(contractExampleSchema).optional(),
+  relations: z3.array(contractRelationSchema).optional(),
+  contract: contractContractSchema.optional(),
+  ai: contractAiSchema.optional(),
+  preview: contractPreviewSchema.optional(),
+  provenance: contractProvenanceSchema,
+  tokens: z3.array(z3.string()).optional(),
+  figma: contractFigmaSchema.optional()
+});
+function isContractFile(filePath) {
+  return filePath.endsWith(".contract.json");
+}
+function parseComponentContract(content, filePath) {
+  const raw = JSON.parse(content);
+  const validated = componentContractSchema.parse(raw);
+  return {
+    filePath,
+    meta: {
+      name: validated.name,
+      description: validated.description,
+      category: validated.category,
+      tags: validated.tags,
+      status: validated.status,
+      figma: validated.figma?.nodeUrl,
+      figmaProps: validated.figma?.propMappings
+    },
+    usage: validated.usage,
+    props: validated.props,
+    relations: validated.relations ?? [],
+    variants: (validated.examples ?? []).map((ex) => ({
+      name: ex.name,
+      description: ex.description,
+      code: ex.code,
+      args: ex.args
+    })),
+    contract: validated.contract ? {
+      ...validated.contract,
+      // Merge top-level propsSummary into contract.propsSummary if not already set
+      propsSummary: validated.contract.propsSummary ?? validated.propsSummary
+    } : {
+      propsSummary: validated.propsSummary
+    },
+    framework: validated.framework,
+    ai: validated.ai,
+    propsSummary: validated.propsSummary,
+    provenance: validated.provenance,
+    sourcePath: validated.sourcePath,
+    exportName: validated.exportName
+  };
+}
+function parseToFlatTokens(tokens, prefix) {
+  const parsed = parseDTCGFile(JSON.stringify(tokens), "tokens.tokens.json");
+  const effectivePrefix = prefix ? `--${prefix.replace(/^--/, "").replace(/-$/, "")}-` : parsed.prefix;
+  const result = [];
+  for (const [category, categoryTokens] of Object.entries(parsed.categories)) {
+    for (const token of categoryTokens) {
+      let cssName = token.name;
+      if (prefix && token.name.startsWith(parsed.prefix)) {
+        cssName = effectivePrefix + token.name.slice(parsed.prefix.length);
+      }
+      result.push({
+        cssName,
+        cssValue: token.value ?? "",
+        category,
+        description: token.description
+      });
+    }
+  }
+  return result;
+}
+function generateCSSCustomProperties(tokens, options) {
+  const selector = options?.selector ?? ":root";
+  const flatTokens = parseToFlatTokens(tokens, options?.prefix);
+  const lines = [];
+  lines.push(`${selector} {`);
+  const grouped = /* @__PURE__ */ new Map();
+  for (const token of flatTokens) {
+    const group = grouped.get(token.category) ?? [];
+    group.push(token);
+    grouped.set(token.category, group);
+  }
+  for (const [category, categoryTokens] of grouped) {
+    lines.push(`  /* ${category} */`);
+    for (const token of categoryTokens) {
+      if (token.description) {
+        lines.push(`  /* ${token.description} */`);
+      }
+      lines.push(`  ${token.cssName}: ${token.cssValue};`);
+    }
+    lines.push("");
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function generateSCSSVariables(tokens, options) {
+  const flatTokens = parseToFlatTokens(tokens, options?.prefix);
+  const lines = [];
+  lines.push("// Auto-generated from DTCG token file");
+  lines.push("// Do not edit directly \u2014 modify the .tokens.json source");
+  lines.push("");
+  const grouped = /* @__PURE__ */ new Map();
+  for (const token of flatTokens) {
+    const group = grouped.get(token.category) ?? [];
+    group.push(token);
+    grouped.set(token.category, group);
+  }
+  for (const [category, categoryTokens] of grouped) {
+    lines.push(`// ${category}`);
+    for (const token of categoryTokens) {
+      const scssName = token.cssName.replace(/^--/, "$");
+      lines.push(`${scssName}: ${token.cssValue} !default;`);
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function generateTailwindConfig(tokens) {
+  const flatTokens = parseToFlatTokens(tokens);
+  const theme = {};
+  for (const token of flatTokens) {
+    const tailwindKey = categoryToTailwindKey(token.category);
+    if (!tailwindKey) continue;
+    if (!theme[tailwindKey]) {
+      theme[tailwindKey] = {};
+    }
+    const parts = token.cssName.replace(/^--[\w]+-/, "").split("-");
+    const tokenKey = parts.join("-") || token.cssName;
+    theme[tailwindKey][tokenKey] = `var(${token.cssName})`;
+  }
+  return {
+    theme: {
+      extend: theme
+    }
+  };
+}
+function categoryToTailwindKey(category) {
+  switch (category) {
+    case "colors":
+    case "surfaces":
+    case "text":
+      return "colors";
+    case "spacing":
+      return "spacing";
+    case "radius":
+      return "borderRadius";
+    case "typography":
+      return "fontFamily";
+    case "shadows":
+      return "boxShadow";
+    case "borders":
+      return "borderWidth";
+    case "transitions":
+      return "transitionDuration";
+    case "z-index":
+      return "zIndex";
+    default:
+      return void 0;
+  }
+}
+function generateFigmaVariables(tokens) {
+  const flatTokens = parseToFlatTokens(tokens);
+  const collections = /* @__PURE__ */ new Map();
+  for (const token of flatTokens) {
+    const collectionName = categoryToFigmaCollection(token.category);
+    const vars = collections.get(collectionName) ?? [];
+    vars.push({
+      name: token.cssName.replace(/^--/, "").replace(/-/g, "/"),
+      type: categoryToFigmaType(token.category),
+      value: parseFigmaValue(token.cssValue, token.category),
+      description: token.description,
+      scopes: categoryToFigmaScopes(token.category)
+    });
+    collections.set(collectionName, vars);
+  }
+  return Array.from(collections.entries()).map(([name, variables]) => ({
+    name,
+    modes: [{ name: "Default", modeId: "default" }],
+    variables
+  }));
+}
+function categoryToFigmaCollection(category) {
+  switch (category) {
+    case "colors":
+    case "surfaces":
+    case "text":
+      return "Colors";
+    case "spacing":
+    case "radius":
+      return "Dimensions";
+    case "typography":
+      return "Typography";
+    case "shadows":
+      return "Effects";
+    default:
+      return "Other";
+  }
+}
+function categoryToFigmaType(category) {
+  switch (category) {
+    case "colors":
+    case "surfaces":
+    case "text":
+      return "COLOR";
+    case "spacing":
+    case "radius":
+    case "z-index":
+      return "FLOAT";
+    default:
+      return "STRING";
+  }
+}
+function categoryToFigmaScopes(category) {
+  switch (category) {
+    case "colors":
+      return ["ALL_FILLS", "STROKE_COLOR"];
+    case "surfaces":
+      return ["FRAME_FILL", "SHAPE_FILL"];
+    case "text":
+      return ["TEXT_FILL"];
+    case "spacing":
+      return ["GAP", "WIDTH_HEIGHT"];
+    case "radius":
+      return ["CORNER_RADIUS"];
+    default:
+      return ["ALL_SCOPES"];
+  }
+}
+function parseFigmaValue(cssValue, category) {
+  if (category === "colors" || category === "surfaces" || category === "text") {
+    const hexMatch = cssValue.match(/^#([0-9a-f]{6})$/i);
+    if (hexMatch) {
+      const hex = hexMatch[1];
+      return {
+        r: parseInt(hex.substring(0, 2), 16) / 255,
+        g: parseInt(hex.substring(2, 4), 16) / 255,
+        b: parseInt(hex.substring(4, 6), 16) / 255,
+        a: 1
+      };
+    }
+  }
+  if (category === "spacing" || category === "radius") {
+    const numMatch = cssValue.match(/^(\d+(?:\.\d+)?)/);
+    if (numMatch) {
+      return parseFloat(numMatch[1]);
+    }
+  }
+  return cssValue;
+}
 var CATEGORY_AFFINITIES = {
   forms: ["feedback"],
   actions: ["feedback"]
@@ -1477,6 +2459,17 @@ export {
   classifyComplexity,
   formatBytes,
   budgetBar,
+  DEFAULT_STYLE_PROPERTIES,
+  DEFAULT_ENHANCED_STYLE_PROPERTIES,
+  normalizeStyleValue,
+  parseColor,
+  compareColors,
+  compareNumericValues,
+  compareStyleValue,
+  compareStyles,
+  compareStylesWithTokens,
+  formatTokenSummary,
+  getComplianceBadge,
   figmaPropMappingSchema,
   fragmentMetaSchema,
   fragmentUsageSchema,
@@ -1516,6 +2509,16 @@ export {
   isFigmaPropMapping,
   resolveFigmaMapping,
   parseTokenFile,
+  isDTCGFile,
+  parseDTCGFile,
+  dtcgTokenFileSchema,
+  componentContractSchema,
+  isContractFile,
+  parseComponentContract,
+  generateCSSCustomProperties,
+  generateSCSSVariables,
+  generateTailwindConfig,
+  generateFigmaVariables,
   analyzeComposition,
   executeVariantLoaders,
   resolvePreviewRuntimeState,
@@ -1524,4 +2527,4 @@ export {
   isReactComponent,
   discoverComponents
 };
-//# sourceMappingURL=chunk-I34BC3CU.js.map
+//# sourceMappingURL=chunk-32LIWN2P.js.map