chaincss 2.1.38 → 2.1.39

package/dist/index.js

@@ -545,10 +545,10 @@ var init_shorthands = __esm({
         c.overflowX = "hidden";
         c.overflowY = "auto";
         if (!c.nestedRules) c.nestedRules = [];
-        const scale = typeof v === "number" ? v : 2;
+        const scale2 = typeof v === "number" ? v : 2;
         c.nestedRules.push({
           selector: "& > *",
-          styles: { transform: `translateZ(-1px) scale(${scale})` }
+          styles: { transform: `translateZ(-1px) scale(${scale2})` }
         });
       },
       lineClamp: (v, c) => {
@@ -2371,7 +2371,7 @@ var init_Chain = __esm({
         if (prop === "pressable") return () => this.macroHandler("pressable");
         if (prop === "focusRing") return (color) => this.macroHandler("focusRing", color);
         if (prop === "outlineDebug") return () => this.macroHandler("outlineDebug");
-        if (prop === "parallax") return (scale) => this.macroHandler("parallax", scale);
+        if (prop === "parallax") return (scale2) => this.macroHandler("parallax", scale2);
         if (prop === "lineClamp") return (lines) => this.macroHandler("lineClamp", lines);
         if (prop === "frostedNav") return (blur) => this.macroHandler("frostedNav", blur);
         if (prop === "gap") return (value) => this.setProperty("gap", value);
@@ -3545,7 +3545,7 @@ function withSmartStyles(WrappedComponent, styles) {
 // src/core/compiler.ts
 import fs6 from "fs";
 import path5 from "path";
-import crypto4 from "crypto";
+import crypto5 from "crypto";
 import chalk2 from "chalk";
 import { fileURLToPath, pathToFileURL } from "url";
 
@@ -6167,6 +6167,431 @@ var PersistentCache = class {
 
 // src/core/compiler.ts
 init_shorthands();
+
+// src/compiler/style-graph.ts
+import crypto4 from "crypto";
+function calculateSpecificity(selector) {
+  let a = 0;
+  let b = 0;
+  let c = 0;
+  const idMatches = selector.match(/#[a-zA-Z0-9_-]+/g);
+  if (idMatches) a += idMatches.length;
+  const classMatches = selector.match(/\.[a-zA-Z0-9_-]+/g);
+  if (classMatches) b += classMatches.length;
+  const attrMatches = selector.match(/\[[^\]]+\]/g);
+  if (attrMatches) b += attrMatches.length;
+  const pseudoClassMatches = selector.match(/:[a-zA-Z-]+(?:\([^)]*\))?/g);
+  if (pseudoClassMatches) {
+    const notMatches = selector.match(/:not\(([^)]+)\)/g);
+    const regularPseudoClasses = pseudoClassMatches.length - (notMatches?.length || 0);
+    b += Math.max(0, regularPseudoClasses);
+  }
+  const elementMatches = selector.match(/^[a-zA-Z]+|[a-zA-Z]+(?=[.#[:])/g);
+  if (elementMatches) c += elementMatches.length;
+  return a * 1e4 + b * 100 + c;
+}
+function hashProperties(properties) {
+  const sorted = Object.entries(properties).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${k}:${v}`).join(";");
+  return crypto4.createHash("md5").update(sorted).digest("hex").slice(0, 8);
+}
+function kebab2(prop) {
+  return prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+var StyleGraphBuilder = class {
+  entries = [];
+  nodes = /* @__PURE__ */ new Map();
+  edges = [];
+  orderCounter = 0;
+  addEntry(entry) {
+    entry.sourceOrder = this.orderCounter++;
+    this.entries.push(entry);
+  }
+  build() {
+    this.nodes.clear();
+    this.edges = [];
+    for (const entry of this.entries) {
+      const id = `node-${this.nodes.size}`;
+      const node = {
+        id,
+        selector: entry.selector,
+        properties: entry.properties,
+        specificity: calculateSpecificity(entry.selector),
+        dependencies: [],
+        dependents: [],
+        mediaQuery: entry.mediaQuery,
+        isDead: false,
+        hash: hashProperties(entry.properties),
+        sourceComponent: entry.sourceComponent
+      };
+      this.nodes.set(id, node);
+    }
+    const nodeArray = Array.from(this.nodes.values());
+    for (let i = 0; i < nodeArray.length; i++) {
+      for (let j = i + 1; j < nodeArray.length; j++) {
+        const a = nodeArray[i];
+        const b = nodeArray[j];
+        if (this.selectorsOverlap(a.selector, b.selector)) {
+          if (a.specificity <= b.specificity) {
+            this.edges.push({ from: a.id, to: b.id, type: "overrides" });
+            a.dependents.push(b.id);
+            b.dependencies.push(a.id);
+          }
+          if (b.specificity <= a.specificity) {
+            this.edges.push({ from: b.id, to: a.id, type: "overrides" });
+            b.dependents.push(a.id);
+            a.dependencies.push(b.id);
+          }
+        }
+      }
+    }
+    const rootNodes = nodeArray.filter((n) => n.dependencies.length === 0).map((n) => n.id);
+    const leafNodes = nodeArray.filter((n) => n.dependents.length === 0).map((n) => n.id);
+    return {
+      nodes: this.nodes,
+      edges: this.edges,
+      rootNodes,
+      leafNodes
+    };
+  }
+  selectorsOverlap(a, b) {
+    const partsA = a.split(/[\s>+~]+/).filter(Boolean);
+    const partsB = b.split(/[\s>+~]+/).filter(Boolean);
+    for (const pa of partsA) {
+      for (const pb of partsB) {
+        if (pa === pb) return true;
+        if (pa.startsWith(".") && pb.startsWith(".") && pa === pb) return true;
+      }
+    }
+    return false;
+  }
+};
+function eliminateDeadStyles(graph, knownSelectors) {
+  if (knownSelectors.length === 0) {
+    return { eliminated: 0, graph };
+  }
+  const reachable = /* @__PURE__ */ new Set();
+  const queue = [];
+  for (const [id, node] of graph.nodes) {
+    if (knownSelectors.some((ks) => node.selector.includes(ks) || ks.includes(node.selector))) {
+      reachable.add(id);
+      queue.push(id);
+    }
+  }
+  while (queue.length > 0) {
+    const current = queue.shift();
+    const node = graph.nodes.get(current);
+    if (!node) continue;
+    for (const depId of node.dependents) {
+      if (!reachable.has(depId)) {
+        reachable.add(depId);
+        queue.push(depId);
+      }
+    }
+  }
+  let eliminated = 0;
+  for (const [id, node] of graph.nodes) {
+    if (!reachable.has(id)) {
+      node.isDead = true;
+      eliminated++;
+    }
+  }
+  return { eliminated, graph };
+}
+function mergeIdenticalRules(graph, threshold) {
+  const hashGroups = /* @__PURE__ */ new Map();
+  for (const [, node] of graph.nodes) {
+    if (node.isDead) continue;
+    if (Object.keys(node.properties).length < threshold) continue;
+    const existing = hashGroups.get(node.hash) || [];
+    existing.push(node);
+    hashGroups.set(node.hash, existing);
+  }
+  let merged = 0;
+  for (const [, group] of hashGroups) {
+    if (group.length < 2) continue;
+    const mergedSelector = group.map((n) => n.selector).join(", ");
+    const primary = group[0];
+    primary.selector = mergedSelector;
+    for (let i = 1; i < group.length; i++) {
+      group[i].isDead = true;
+      merged++;
+    }
+  }
+  return { merged, graph };
+}
+function topologicalSort(graph) {
+  const visited = /* @__PURE__ */ new Set();
+  const sorted = [];
+  const visiting = /* @__PURE__ */ new Set();
+  function visit(id) {
+    if (visited.has(id)) return true;
+    if (visiting.has(id)) return false;
+    visiting.add(id);
+    const node = graph.nodes.get(id);
+    if (node) {
+      for (const depId of node.dependencies) {
+        if (!visit(depId)) return false;
+      }
+    }
+    visiting.delete(id);
+    visited.add(id);
+    if (node && !node.isDead) {
+      sorted.push(node);
+    }
+    return true;
+  }
+  for (const id of graph.rootNodes) {
+    if (!visit(id)) {
+      return Array.from(graph.nodes.values()).filter((n) => !n.isDead).sort((a, b) => a.sourceComponent?.localeCompare(b.sourceComponent || "") || 0);
+    }
+  }
+  for (const [id] of graph.nodes) {
+    if (!visited.has(id)) {
+      visit(id);
+    }
+  }
+  return sorted;
+}
+function generateCSSFromGraph(graph, sortOutput = "specificity") {
+  let nodes;
+  switch (sortOutput) {
+    case "specificity":
+      nodes = Array.from(graph.nodes.values()).filter((n) => !n.isDead).sort((a, b) => a.specificity - b.specificity);
+      break;
+    case "topological":
+      nodes = topologicalSort(graph);
+      break;
+    case "source-order":
+    default:
+      nodes = Array.from(graph.nodes.values()).filter((n) => !n.isDead);
+      break;
+  }
+  let css = "";
+  let currentMediaQuery;
+  for (const node of nodes) {
+    if (node.isDead) continue;
+    if (node.mediaQuery !== currentMediaQuery) {
+      if (currentMediaQuery) {
+        css += "}\n\n";
+      }
+      if (node.mediaQuery) {
+        css += `@media ${node.mediaQuery} {
+`;
+      }
+      currentMediaQuery = node.mediaQuery;
+    }
+    const rules = Object.entries(node.properties).map(([prop, value]) => `  ${kebab2(prop)}: ${value};`).join("\n");
+    if (rules) {
+      css += `${node.selector} {
+${rules}
+}
+`;
+    }
+  }
+  if (currentMediaQuery) {
+    css += "}\n";
+  }
+  return css;
+}
+var StyleGraphCompiler = class {
+  options;
+  constructor(options = {}) {
+    this.options = {
+      eliminateDead: options.eliminateDead ?? false,
+      knownSelectors: options.knownSelectors ?? [],
+      mergeIdentical: options.mergeIdentical ?? false,
+      mergeThreshold: options.mergeThreshold ?? 3,
+      sortOutput: options.sortOutput ?? "specificity",
+      verbose: options.verbose ?? false
+    };
+  }
+  /**
+   * Compile a set of style definitions through the graph compiler.
+   */
+  compile(styles) {
+    const startTime = Date.now();
+    const builder = new StyleGraphBuilder();
+    let preOptimizationSize = 0;
+    for (const [componentName, styleDef] of Object.entries(styles)) {
+      if (!styleDef || !styleDef.selectors) continue;
+      for (const selector of styleDef.selectors) {
+        const properties = {};
+        for (const [prop, value] of Object.entries(styleDef)) {
+          if (prop === "selectors" || prop === "atRules" || prop === "nestedRules" || prop === "hover" || prop === "themes" || prop.startsWith("_")) {
+            continue;
+          }
+          if (typeof value === "string" || typeof value === "number") {
+            properties[prop] = String(value);
+            preOptimizationSize += String(value).length + prop.length;
+          }
+        }
+        if (Object.keys(properties).length > 0) {
+          builder.addEntry({
+            selector,
+            properties,
+            sourceComponent: componentName,
+            sourceOrder: 0
+          });
+        }
+        if (styleDef.hover && typeof styleDef.hover === "object") {
+          const hoverProperties = {};
+          for (const [prop, value] of Object.entries(styleDef.hover)) {
+            if (typeof value === "string" || typeof value === "number") {
+              hoverProperties[prop] = String(value);
+            }
+          }
+          if (Object.keys(hoverProperties).length > 0) {
+            builder.addEntry({
+              selector: `${selector}:hover`,
+              properties: hoverProperties,
+              sourceComponent: componentName,
+              sourceOrder: 0
+            });
+          }
+        }
+        if (styleDef.atRules) {
+          for (const rule of styleDef.atRules) {
+            if (rule.type === "media" && rule.styles && rule.query) {
+              const mediaProperties = {};
+              for (const [prop, value] of Object.entries(rule.styles)) {
+                if (typeof value === "string" || typeof value === "number") {
+                  mediaProperties[prop] = String(value);
+                }
+              }
+              if (Object.keys(mediaProperties).length > 0) {
+                builder.addEntry({
+                  selector,
+                  properties: mediaProperties,
+                  sourceComponent: componentName,
+                  sourceOrder: 0,
+                  mediaQuery: rule.query
+                });
+              }
+            }
+          }
+        }
+      }
+    }
+    let graph = builder.build();
+    let eliminatedDead = 0;
+    if (this.options.eliminateDead && this.options.knownSelectors.length > 0) {
+      const result = eliminateDeadStyles(graph, this.options.knownSelectors);
+      eliminatedDead = result.eliminated;
+      graph = result.graph;
+    }
+    let mergedRules = 0;
+    if (this.options.mergeIdentical) {
+      const result = mergeIdenticalRules(graph, this.options.mergeThreshold);
+      mergedRules = result.merged;
+      graph = result.graph;
+    }
+    const css = generateCSSFromGraph(graph, this.options.sortOutput);
+    let postOptimizationSize = css.length;
+    if (postOptimizationSize === 0) {
+      postOptimizationSize = preOptimizationSize;
+    }
+    const classMap = {};
+    for (const [, node] of graph.nodes) {
+      if (!node.isDead && node.sourceComponent) {
+        if (classMap[node.sourceComponent]) {
+          classMap[node.sourceComponent] += ` ${node.selector.replace(/^\./, "")}`;
+        } else {
+          classMap[node.sourceComponent] = node.selector.replace(/^\./, "");
+        }
+      }
+    }
+    const totalNodes = graph.nodes.size;
+    const aliveNodes = totalNodes - eliminatedDead;
+    const savingsPercent = preOptimizationSize > 0 ? `${((preOptimizationSize - postOptimizationSize) / preOptimizationSize * 100).toFixed(1)}%` : "0%";
+    const stats = {
+      totalStyles: totalNodes,
+      atomicStyles: 0,
+      uniqueProperties: new Set(
+        Array.from(graph.nodes.values()).filter((n) => !n.isDead).flatMap((n) => Object.keys(n.properties))
+      ).size,
+      savings: savingsPercent,
+      compileTime: Date.now() - startTime
+    };
+    return {
+      css,
+      classMap,
+      atomicClasses: [],
+      stats,
+      graph,
+      eliminatedDead,
+      mergedRules,
+      optimizationTime: Date.now() - startTime,
+      preOptimizationSize,
+      postOptimizationSize
+    };
+  }
+  /**
+   * Analyze a style graph without generating CSS.
+   */
+  analyze(styles) {
+    const builder = new StyleGraphBuilder();
+    for (const [componentName, styleDef] of Object.entries(styles)) {
+      if (!styleDef || !styleDef.selectors) continue;
+      for (const selector of styleDef.selectors) {
+        const properties = {};
+        for (const [prop, value] of Object.entries(styleDef)) {
+          if (prop === "selectors" || prop.startsWith("_")) continue;
+          if (typeof value === "string" || typeof value === "number") {
+            properties[prop] = String(value);
+          }
+        }
+        if (Object.keys(properties).length > 0) {
+          builder.addEntry({ selector, properties, sourceComponent: componentName, sourceOrder: 0 });
+        }
+      }
+    }
+    return builder.build();
+  }
+  /**
+   * Get optimization statistics for a graph.
+   */
+  getStats(graph) {
+    const nodes = Array.from(graph.nodes.values());
+    const deadNodes = nodes.filter((n) => n.isDead).length;
+    const averageSpecificity = nodes.length > 0 ? nodes.reduce((sum, n) => sum + n.specificity, 0) / nodes.length : 0;
+    let maxDepth = 0;
+    const depths = /* @__PURE__ */ new Map();
+    function getDepth(id) {
+      if (depths.has(id)) return depths.get(id);
+      const node = graph.nodes.get(id);
+      if (!node || node.dependencies.length === 0) {
+        depths.set(id, 0);
+        return 0;
+      }
+      const max = Math.max(...node.dependencies.map((d) => getDepth(d)));
+      const depth = max + 1;
+      depths.set(id, depth);
+      return depth;
+    }
+    for (const [id] of graph.nodes) {
+      maxDepth = Math.max(maxDepth, getDepth(id));
+    }
+    return {
+      totalNodes: nodes.length,
+      deadNodes,
+      mergedGroups: 0,
+      averageSpecificity: Math.round(averageSpecificity * 100) / 100,
+      deepestDependencyChain: maxDepth
+    };
+  }
+  /**
+   * Update options.
+   */
+  configure(options) {
+    this.options = { ...this.options, ...options };
+  }
+};
+function compileGraph(styles, options) {
+  const compiler = new StyleGraphCompiler(options);
+  return compiler.compile(styles);
+}
+
+// src/core/compiler.ts
 var __filename = typeof import.meta !== "undefined" ? (() => {
   try {
     return fileURLToPath(import.meta.url);
@@ -6217,6 +6642,35 @@ var ChainCSSCompiler = class {
     this.initOptimizer();
     this.initPrefixer();
   }
+  /**
+  * Compile using the style graph compiler for advanced optimizations.
+  * 
+  * @example
+  * const result = compiler.compileWithGraph(styles, { 
+  *   eliminateDead: true, 
+  *   knownSelectors: ['.header', '.footer'],
+  *   mergeIdentical: true 
+  * });
+  */
+  compileWithGraph(styles, options) {
+    const graphCompiler = new StyleGraphCompiler({
+      ...options,
+      verbose: this.config.verbose
+    });
+    const result = graphCompiler.compile(styles);
+    if (this.config.verbose) {
+      if (result.eliminatedDead > 0) {
+        console.log(`  \u{1F9F9} Eliminated ${result.eliminatedDead} dead styles`);
+      }
+      if (result.mergedRules > 0) {
+        console.log(`  \u{1F517} Merged ${result.mergedRules} identical rules`);
+      }
+      if (result.optimizationTime > 0) {
+        console.log(`  \u26A1 Graph compilation: ${result.optimizationTime}ms`);
+      }
+    }
+    return result;
+  }
   hasStyles() {
     const combined = this.getCombinedCSS();
     return !!(combined && combined.trim().length > 0);
@@ -6254,7 +6708,7 @@ var ChainCSSCompiler = class {
     if (result.css && result.css.trim()) {
       this.accumulatedCSS += result.css + "\n";
     }
-    const cacheKey = crypto4.createHash("sha256").update(`${componentName}-${JSON.stringify(styleObj)}`).digest("hex").slice(0, 16);
+    const cacheKey = crypto5.createHash("sha256").update(`${componentName}-${JSON.stringify(styleObj)}`).digest("hex").slice(0, 16);
     this.addToCache(cacheKey, {
       result: {
         css: result.css || "",
@@ -6382,7 +6836,7 @@ var ChainCSSCompiler = class {
   // ============================================================================
   hashStyleDef(styleDef) {
     const { _componentName, _generateComponent, _framework, _propsDefinition, ...relevant } = styleDef;
-    return crypto4.createHash("sha256").update(JSON.stringify(relevant)).digest("hex").slice(0, 16);
+    return crypto5.createHash("sha256").update(JSON.stringify(relevant)).digest("hex").slice(0, 16);
   }
   async importModule(filePath) {
     const absolutePath = path5.resolve(filePath);
@@ -6810,7 +7264,7 @@ function createThemeContract(contractShape) {
 }
 function validateTheme(contract, theme = {}, path6 = "") {
   const errors = [];
-  function validate(contractPart, themePart, currentPath) {
+  function validate2(contractPart, themePart, currentPath) {
     if (typeof contractPart === "object" && contractPart !== null) {
       const requiredKeys = Object.keys(contractPart);
       const themeKeys = Object.keys(themePart || {});
@@ -6819,7 +7273,7 @@ function validateTheme(contract, theme = {}, path6 = "") {
         if (!themePart || !(key in themePart)) {
           errors.push(`  \u2717 Missing required token: "${newPath}"`);
         } else {
-          validate(
+          validate2(
             contractPart[key],
             themePart[key],
             newPath
@@ -6838,7 +7292,7 @@ function validateTheme(contract, theme = {}, path6 = "") {
       }
     }
   }
-  validate(contract, theme, path6);
+  validate2(contract, theme, path6);
   if (errors.length > 0) {
     throw new Error(`Theme Contract Validation Failed:
 ${errors.join("\n")}`);
@@ -6877,6 +7331,641 @@ init_helpers();
 init_animations();
 init_suggestions();
 init_Chain();
+
+// src/compiler/math-engine.ts
+var DEFAULT_CONTEXT = {
+  rootFontSize: 16,
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  parentFontSize: 16,
+  dpi: 96,
+  elementWidth: 1920,
+  elementHeight: 1080
+};
+var UNIT_CATEGORIES = {
+  absolute: ["px", "cm", "mm", "in", "pt", "pc"],
+  relative: ["rem", "em", "%", "ch", "ex"],
+  viewport: ["vw", "vh", "vmin", "vmax"],
+  angle: ["deg", "rad", "turn", "grad"],
+  time: ["s", "ms"],
+  resolution: ["dpi", "dpcm", "dppx"]
+};
+var PX_CONVERSIONS = {
+  "cm": 37.795,
+  "mm": 3.7795,
+  "in": 96,
+  "pt": 1.333,
+  "pc": 16
+};
+function parseCSSValue(input) {
+  if (typeof input === "number") {
+    return { value: input, unit: "px" };
+  }
+  const trimmed = input.trim();
+  const match = trimmed.match(/^(-?\d+(?:\.\d+)?)\s*(px|rem|em|%|vw|vh|vmin|vmax|ch|ex|cm|mm|in|pt|pc|deg|rad|turn|grad|s|ms|dpi|dpcm|dppx)?$/i);
+  if (match) {
+    return {
+      value: parseFloat(match[1]),
+      unit: match[2]?.toLowerCase() || "px"
+    };
+  }
+  const numMatch = trimmed.match(/(-?\d+(?:\.\d+)?)/);
+  return {
+    value: numMatch ? parseFloat(numMatch[1]) : 0,
+    unit: "px"
+  };
+}
+function getUnitCategory(unit) {
+  for (const [category, units] of Object.entries(UNIT_CATEGORIES)) {
+    if (units.includes(unit)) return category;
+  }
+  return "unknown";
+}
+function resolveToPx(value, context) {
+  const { value: v, unit } = value;
+  switch (unit) {
+    case "px":
+      return v;
+    case "rem":
+      return v * context.rootFontSize;
+    case "em":
+      return v * context.parentFontSize;
+    case "%":
+      return v / 100 * context.parentFontSize;
+    // Default to font-relative
+    case "vw":
+      return v / 100 * context.viewportWidth;
+    case "vh":
+      return v / 100 * context.viewportHeight;
+    case "vmin":
+      return v / 100 * Math.min(context.viewportWidth, context.viewportHeight);
+    case "vmax":
+      return v / 100 * Math.max(context.viewportWidth, context.viewportHeight);
+    case "cm":
+      return v * (PX_CONVERSIONS["cm"] || 37.795);
+    case "mm":
+      return v * (PX_CONVERSIONS["mm"] || 3.7795);
+    case "in":
+      return v * (PX_CONVERSIONS["in"] || 96);
+    case "pt":
+      return v * (PX_CONVERSIONS["pt"] || 1.333);
+    case "pc":
+      return v * (PX_CONVERSIONS["pc"] || 16);
+    // ch/ex are approximate
+    case "ch":
+      return v * (context.parentFontSize * 0.5);
+    case "ex":
+      return v * (context.parentFontSize * 0.45);
+    default:
+      return v;
+  }
+}
+function resolveFromPx(px, targetUnit, context) {
+  switch (targetUnit) {
+    case "px":
+      return px;
+    case "rem":
+      return px / context.rootFontSize;
+    case "em":
+      return px / context.parentFontSize;
+    case "%":
+      return px / context.parentFontSize * 100;
+    case "vw":
+      return px / context.viewportWidth * 100;
+    case "vh":
+      return px / context.viewportHeight * 100;
+    case "vmin":
+      return px / Math.min(context.viewportWidth, context.viewportHeight) * 100;
+    case "vmax":
+      return px / Math.max(context.viewportWidth, context.viewportHeight) * 100;
+    case "cm":
+      return px / (PX_CONVERSIONS["cm"] || 37.795);
+    case "mm":
+      return px / (PX_CONVERSIONS["mm"] || 3.7795);
+    case "in":
+      return px / (PX_CONVERSIONS["in"] || 96);
+    case "pt":
+      return px / (PX_CONVERSIONS["pt"] || 1.333);
+    case "pc":
+      return px / (PX_CONVERSIONS["pc"] || 16);
+    case "ch":
+      return px / (context.parentFontSize * 0.5);
+    case "ex":
+      return px / (context.parentFontSize * 0.45);
+    default:
+      return px;
+  }
+}
+function canResolve(a, b, context) {
+  const catA = getUnitCategory(a.unit);
+  const catB = getUnitCategory(b.unit);
+  if (catA === catB) return true;
+  if ((catA === "absolute" || catA === "relative") && (catB === "absolute" || catB === "relative")) return true;
+  return false;
+}
+function createResult(value, unit, expression, resolved, explanations = []) {
+  return {
+    value,
+    unit,
+    expression,
+    resolved,
+    explanations,
+    toString() {
+      return this.expression;
+    },
+    toCalc() {
+      return unit === "calc" ? expression : `calc(${expression})`;
+    }
+  };
+}
+function operate(a, op, b, context) {
+  const ctx = { ...DEFAULT_CONTEXT, ...context };
+  const valA = parseCSSValue(a);
+  const valB = parseCSSValue(b);
+  const explanations = [];
+  if (valA.unit === valB.unit) {
+    let result;
+    switch (op) {
+      case "add":
+        result = valA.value + valB.value;
+        break;
+      case "subtract":
+        result = valA.value - valB.value;
+        break;
+      case "multiply":
+        result = valA.value * valB.value;
+        break;
+      case "divide":
+        result = valA.value / valB.value;
+        break;
+    }
+    const rounded = Math.round(result * 100) / 100;
+    explanations.push(`Same unit (${valA.unit}) \u2014 direct ${op}`);
+    return createResult(
+      rounded,
+      valA.unit,
+      `${rounded}${valA.unit}`,
+      { value: rounded, unit: valA.unit },
+      explanations
+    );
+  }
+  if (canResolve(valA, valB, ctx)) {
+    const pxA = resolveToPx(valA, ctx);
+    const pxB = resolveToPx(valB, ctx);
+    let pxResult;
+    switch (op) {
+      case "add":
+        pxResult = pxA + pxB;
+        break;
+      case "subtract":
+        pxResult = pxA - pxB;
+        break;
+      case "multiply":
+        pxResult = pxA * pxB;
+        break;
+      case "divide":
+        pxResult = pxA / pxB;
+        break;
+    }
+    const rounded = Math.round(pxResult * 100) / 100;
+    explanations.push(`Resolved ${valA.value}${valA.unit} \u2192 ${Math.round(pxA * 100) / 100}px`);
+    explanations.push(`Resolved ${valB.value}${valB.unit} \u2192 ${Math.round(pxB * 100) / 100}px`);
+    explanations.push(`${op} \u2192 ${rounded}px`);
+    return createResult(
+      rounded,
+      "px",
+      `${rounded}px`,
+      { value: rounded, unit: "px" },
+      explanations
+    );
+  }
+  const expr = `${valA.value}${valA.unit} ${getOpSymbol(op)} ${valB.value}${valB.unit}`;
+  explanations.push(`Cannot resolve ${valA.unit} \u2194 ${valB.unit} \u2014 using calc()`);
+  return createResult(
+    0,
+    "calc",
+    `calc(${expr})`,
+    null,
+    explanations
+  );
+}
+function getOpSymbol(op) {
+  switch (op) {
+    case "add":
+      return "+";
+    case "subtract":
+      return "-";
+    case "multiply":
+      return "*";
+    case "divide":
+      return "/";
+  }
+}
+var math = {
+  /**
+   * Add two CSS values with unit resolution.
+   * 
+   * @example
+   * math.add('10px', '2rem')                    // → '42px' (with default context)
+   * math.add('10px', '2rem', { rootFontSize: 16 }) // → '42px'
+   * math.add('10px', '2vw')                     // → 'calc(10px + 2vw)'
+   */
+  add(a, b, context) {
+    return operate(a, "add", b, context);
+  },
+  /**
+   * Subtract two CSS values with unit resolution.
+   */
+  subtract(a, b, context) {
+    return operate(a, "subtract", b, context);
+  },
+  /**
+   * Multiply two CSS values with unit resolution.
+   */
+  multiply(a, b, context) {
+    return operate(a, "multiply", b, context);
+  },
+  /**
+   * Divide two CSS values with unit resolution.
+   */
+  divide(a, b, context) {
+    return operate(a, "divide", b, context);
+  },
+  /**
+   * Sum multiple CSS values.
+   */
+  sum(...values) {
+    if (values.length === 0) {
+      return createResult(0, "px", "0px", { value: 0, unit: "px" });
+    }
+    if (values.length === 1) {
+      const parsed = parseCSSValue(values[0]);
+      return createResult(parsed.value, parsed.unit, `${parsed.value}${parsed.unit}`, parsed);
+    }
+    let result = this.add(values[0], values[1]);
+    for (let i = 2; i < values.length; i++) {
+      result = this.add(result.expression, values[i]);
+    }
+    return result;
+  },
+  /**
+   * Resolve a CSS value to pixels.
+   */
+  toPx(value, context) {
+    const ctx = { ...DEFAULT_CONTEXT, ...context };
+    const parsed = parseCSSValue(value);
+    return resolveToPx(parsed, ctx);
+  },
+  /**
+   * Convert between CSS units.
+   */
+  convert(value, toUnit, context) {
+    const ctx = { ...DEFAULT_CONTEXT, ...context };
+    const parsed = parseCSSValue(value);
+    const px = resolveToPx(parsed, ctx);
+    const converted = resolveFromPx(px, toUnit, ctx);
+    const rounded = Math.round(converted * 1e3) / 1e3;
+    return createResult(
+      rounded,
+      toUnit,
+      `${rounded}${toUnit}`,
+      { value: rounded, unit: toUnit },
+      [`${parsed.value}${parsed.unit} \u2192 ${rounded}${toUnit}`]
+    );
+  },
+  /**
+   * Create a fluid typography clamp() expression.
+   * 
+   * @example
+   * math.fluidType({ minSize: 14, maxSize: 20 }) 
+   *   // → 'clamp(14px, 0.625vw + 12px, 20px)'
+   * math.fluidType({ minSize: 14, maxSize: 20, unit: 'rem', rootFontSize: 16 })
+   *   // → 'clamp(0.875rem, 0.625vw + 0.75rem, 1.25rem)'
+   */
+  fluidType(config) {
+    const {
+      minSize,
+      maxSize,
+      minWidth = 320,
+      maxWidth = 1280,
+      unit = "px",
+      rootFontSize = 16
+    } = config;
+    const slope = (maxSize - minSize) / (maxWidth - minWidth);
+    const intercept = minSize - slope * minWidth;
+    const slopeVw = Math.round(slope * 100 * 1e4) / 1e4;
+    const interceptRounded = Math.round(intercept * 100) / 100;
+    const minStr = unit === "rem" ? `${minSize / rootFontSize}rem` : `${minSize}${unit}`;
+    const maxStr = unit === "rem" ? `${maxSize / rootFontSize}rem` : `${maxSize}${unit}`;
+    const prefStr = `${slopeVw}vw + ${unit === "rem" ? interceptRounded / rootFontSize + "rem" : interceptRounded + unit}`;
+    const expression = `clamp(${minStr}, ${prefStr}, ${maxStr})`;
+    return createResult(
+      0,
+      "calc",
+      expression,
+      null,
+      [`Fluid type: ${minSize}${unit} \u2192 ${maxSize}${unit} between ${minWidth}px and ${maxWidth}px`]
+    );
+  },
+  /**
+   * Scale a value by a factor with unit preservation.
+   */
+  scale(value, factor) {
+    const parsed = parseCSSValue(value);
+    const scaled = Math.round(parsed.value * factor * 100) / 100;
+    return createResult(
+      scaled,
+      parsed.unit,
+      `${scaled}${parsed.unit}`,
+      { value: scaled, unit: parsed.unit },
+      [`Scaled ${parsed.value}${parsed.unit} \xD7 ${factor} = ${scaled}${parsed.unit}`]
+    );
+  },
+  /**
+   * Clamp a CSS value between min and max.
+   */
+  clampValue(value, min, max, context) {
+    const parsed = parseCSSValue(value);
+    const parsedMin = parseCSSValue(min);
+    const parsedMax = parseCSSValue(max);
+    if (parsed.unit === parsedMin.unit && parsed.unit === parsedMax.unit) {
+      const clamped = Math.max(parsedMin.value, Math.min(parsedMax.value, parsed.value));
+      return createResult(
+        clamped,
+        parsed.unit,
+        `${clamped}${parsed.unit}`,
+        { value: clamped, unit: parsed.unit },
+        [`Clamped ${parsed.value} between ${parsedMin.value} and ${parsedMax.value}`]
+      );
+    }
+    const valStr = `${parsed.value}${parsed.unit}`;
+    const minStr = `${parsedMin.value}${parsedMin.unit}`;
+    const maxStr = `${parsedMax.value}${parsedMax.unit}`;
+    return createResult(
+      0,
+      "calc",
+      `clamp(${minStr}, ${valStr}, ${maxStr})`,
+      null,
+      ["Mixed units \u2014 using clamp()"]
+    );
+  },
+  /**
+   * Parse a CSS value into its numeric and unit parts.
+   */
+  parse(value) {
+    return parseCSSValue(value);
+  },
+  /**
+   * Check if two values have compatible units for direct operations.
+   */
+  compatible(a, b) {
+    const valA = parseCSSValue(a);
+    const valB = parseCSSValue(b);
+    return valA.unit === valB.unit || getUnitCategory(valA.unit) === getUnitCategory(valB.unit);
+  },
+  /**
+   * Get the category of a CSS unit.
+   */
+  unitCategory(unit) {
+    return getUnitCategory(unit);
+  },
+  /**
+   * Create a CSS min() expression.
+   */
+  cssMin(...values) {
+    const formatted = values.map((v) => {
+      const parsed = parseCSSValue(v);
+      return `${parsed.value}${parsed.unit}`;
+    });
+    return `min(${formatted.join(", ")})`;
+  },
+  /**
+   * Create a CSS max() expression.
+   */
+  cssMax(...values) {
+    const formatted = values.map((v) => {
+      const parsed = parseCSSValue(v);
+      return `${parsed.value}${parsed.unit}`;
+    });
+    return `max(${formatted.join(", ")})`;
+  },
+  /**
+   * Format a number with specified precision.
+   */
+  precision(value, decimals = 2) {
+    return value.toFixed(decimals);
+  }
+};
+var add = math.add.bind(math);
+var subtract = math.subtract.bind(math);
+var multiply = math.multiply.bind(math);
+var divide = math.divide.bind(math);
+var fluidType = math.fluidType.bind(math);
+var convert = math.convert.bind(math);
+var toPx = math.toPx.bind(math);
+var scale = math.scale.bind(math);
+
+// src/compiler/intent-engine.ts
+var SEMANTIC_INTENTS = [
+  { pattern: /^flexbox$/i, handler: (v, ctx) => ({ original: v, property: ctx.property || "display", corrected: "flex", defaults: { display: "flex", justifyContent: "center", alignItems: "center" }, confidence: 0.95, intent: "flexbox-centering", explanation: '"flexbox" mapped to display: flex with centering defaults.' }), description: "flexbox -> flex + centering" },
+  { pattern: /^(absolutely|abs)$/i, handler: (v, ctx) => ({ original: v, property: ctx.property || "position", corrected: "absolute", defaults: { position: "absolute" }, confidence: 0.9, intent: "absolute-position", explanation: '"abs/absolutely" -> position: absolute' }), description: "abs -> absolute" },
+  { pattern: /^(rel|relatively)$/i, handler: (v, ctx) => ({ original: v, property: ctx.property || "position", corrected: "relative", defaults: { position: "relative" }, confidence: 0.9, intent: "relative-position", explanation: '"rel/relatively" -> position: relative' }), description: "rel -> relative" },
+  { pattern: /^(hidden|invisible)$/i, handler: (v, ctx) => ({ original: v, property: ctx.property || "visibility", corrected: v.toLowerCase() === "invisible" ? "hidden" : v.toLowerCase(), defaults: { visibility: "hidden" }, confidence: 0.9, intent: "visibility-toggle", explanation: '"' + v + '" -> visibility: hidden' }), description: "invisible -> hidden" },
+  { pattern: /^(full|fullscreen|full-screen)$/i, handler: (v, ctx) => ({ original: v, property: ctx.property || "size", corrected: "100%", defaults: { width: "100%", height: "100%" }, confidence: 0.85, intent: "full-size", explanation: '"full/fullscreen" -> width/height: 100%' }), description: "full -> 100%" },
+  { pattern: /^(rounded|round)$/i, handler: (v, ctx) => ({ original: v, property: ctx.property || "border-radius", corrected: "9999px", defaults: { borderRadius: "9999px" }, confidence: 0.8, intent: "rounded-pill", explanation: '"rounded" -> border-radius: 9999px (pill)' }), description: "rounded -> pill" }
+];
+var VALUE_CORRECTIONS = {
+  "display": [{ wrong: "flexbox", correct: "flex", confidence: 0.95 }, { wrong: "inline-flexbox", correct: "inline-flex", confidence: 0.95 }],
+  "position": [{ wrong: "abs", correct: "absolute", confidence: 0.9 }, { wrong: "rel", correct: "relative", confidence: 0.9 }],
+  "text-align": [{ wrong: "centered", correct: "center", confidence: 0.85 }, { wrong: "justified", correct: "justify", confidence: 0.85 }],
+  "overflow": [{ wrong: "scrollable", correct: "auto", confidence: 0.8 }],
+  "cursor": [{ wrong: "hand", correct: "pointer", confidence: 0.9 }],
+  "user-select": [{ wrong: "unselectable", correct: "none", confidence: 0.85 }]
+};
+var KNOWN_PROPERTIES = ["display", "position", "color", "background", "width", "height", "font-size", "text-align", "cursor", "opacity", "z-index", "overflow", "visibility", "flex", "flex-direction", "justify-content", "align-items", "gap", "grid", "transition", "transform", "animation", "box-shadow", "pointer-events", "user-select", "line-height"];
+function levenshtein(a, b) {
+  const m = [];
+  for (let i = 0; i <= b.length; i++) m[i] = [i];
+  for (let j = 0; j <= a.length; j++) m[0][j] = j;
+  for (let i = 1; i <= b.length; i++)
+    for (let j = 1; j <= a.length; j++)
+      m[i][j] = Math.min(m[i - 1][j] + 1, m[i][j - 1] + 1, m[i - 1][j - 1] + (a[j - 1] === b[i - 1] ? 0 : 1));
+  return m[b.length][a.length];
+}
+function findClosestProperty(prop) {
+  const lp = prop.toLowerCase();
+  let best = null, bestDist = Infinity;
+  for (const k of KNOWN_PROPERTIES) {
+    const d = levenshtein(lp, k);
+    if (d < bestDist && d <= 3) {
+      bestDist = d;
+      best = k;
+    }
+  }
+  return best;
+}
+function detectIntent(value, ctx = {}) {
+  const lv = value.toLowerCase();
+  for (const rule of SEMANTIC_INTENTS) {
+    if (rule.pattern.test(lv)) {
+      const r = rule.handler(value, ctx);
+      if (r) return r;
+    }
+  }
+  return null;
+}
+var intent = {
+  correct(property, value, context) {
+    const ctx = { property, value, ...context };
+    const si = detectIntent(value, ctx);
+    if (si) return si;
+    if (VALUE_CORRECTIONS[property]) {
+      const c = VALUE_CORRECTIONS[property].find((c2) => c2.wrong === value.toLowerCase());
+      if (c) return { original: value, property, corrected: c.correct, defaults: { [property]: c.correct }, confidence: c.confidence, intent: "value-correction", explanation: `"${value}" is not valid for ${property}. Did you mean "${c.correct}"?` };
+    }
+    const pc = findClosestProperty(property);
+    if (pc && pc !== property.toLowerCase()) {
+      const d = levenshtein(property.toLowerCase(), pc);
+      return { original: property, property, corrected: pc, defaults: {}, confidence: Math.max(0, 1 - d / Math.max(property.length, pc.length)), intent: "property-correction", explanation: `Unknown property "${property}". Did you mean "${pc}"?` };
+    }
+    return null;
+  },
+  heal(styles, mode = "smart", context) {
+    const corrections = [], warnings = [], fixed = {};
+    for (const [prop, value] of Object.entries(styles)) {
+      if (prop.startsWith("_") || prop === "selectors") {
+        fixed[prop] = value;
+        continue;
+      }
+      if (typeof value === "object" && value !== null && prop === "hover") {
+        const hr = this.heal(value, mode, { ...context, property: prop });
+        fixed[prop] = hr.fixed;
+        corrections.push(...hr.corrections);
+        warnings.push(...hr.warnings);
+        continue;
+      }
+      if (typeof value !== "string" && typeof value !== "number") {
+        fixed[prop] = value;
+        continue;
+      }
+      const sv = String(value), corr = this.correct(prop, sv, { ...context, property: prop, value: sv });
+      if (corr) {
+        corrections.push(corr);
+        if (mode === "strict") {
+          warnings.push("[strict] " + corr.explanation);
+          fixed[prop] = sv;
+        } else if (mode === "dev") {
+          fixed[prop] = corr.corrected;
+          Object.assign(fixed, corr.defaults);
+        } else {
+          warnings.push("[auto-fix] " + corr.explanation);
+          fixed[prop] = corr.corrected;
+          Object.assign(fixed, corr.defaults);
+        }
+      } else {
+        fixed[prop] = value;
+      }
+    }
+    return { fixed, corrections, warnings, mode };
+  },
+  getIntent(value, ctx) {
+    const r = detectIntent(value, ctx);
+    return r?.intent || null;
+  },
+  validate(property, value) {
+    if (VALUE_CORRECTIONS[property]) {
+      const c = VALUE_CORRECTIONS[property].find((c2) => c2.wrong === value.toLowerCase());
+      if (c) return c.confidence < 1 ? { valid: false, suggestion: c.correct } : { valid: true };
+    }
+    if (!KNOWN_PROPERTIES.includes(property.toLowerCase())) {
+      const s = findClosestProperty(property);
+      return s ? { valid: false, suggestion: s } : { valid: false };
+    }
+    return { valid: true };
+  },
+  getCorrections(property) {
+    return VALUE_CORRECTIONS[property] || [];
+  },
+  explain(correction) {
+    return correction.explanation;
+  },
+  getKnownProperties() {
+    return [...KNOWN_PROPERTIES];
+  },
+  getIntents() {
+    return SEMANTIC_INTENTS.map((r) => ({ pattern: r.pattern.toString(), description: r.description }));
+  }
+};
+var correct = intent.correct.bind(intent);
+var heal = intent.heal.bind(intent);
+var validate = intent.validate.bind(intent);
+var getIntent = intent.getIntent.bind(intent);
+
+// src/compiler/analyzer.ts
+var CONFLICTS = [
+  { props: ["position", "z-index", "zIndex"], msg: "z-index only works on positioned elements (not static)", sev: "warning" },
+  { props: ["flex-direction", "align-items", "justify-content"], msg: "Flex properties require display: flex", sev: "warning" },
+  { props: ["grid-template-columns", "grid-template-rows"], msg: "Grid properties require display: grid", sev: "warning" },
+  { props: ["overflow", "overflow-x", "overflow-y"], msg: "Consider using the overflow shorthand", sev: "hint" }
+];
+function detectShorthands(styles) {
+  const d = [];
+  const m = ["margin-top", "margin-right", "margin-bottom", "margin-left"].filter((p) => p in styles);
+  if (m.length >= 3) d.push({ property: "margin", severity: "hint", message: 'Use "margin" shorthand instead of: ' + m.join(", "), suggestion: "margin" });
+  return d;
+}
+var StyleAnalyzer = class {
+  _diagnostics = [];
+  analyzeStyle(selector, styles, _opts) {
+    const r = [];
+    for (const [p, v] of Object.entries(styles)) {
+      if (p === "selectors" || p.startsWith("_") || typeof v === "object") continue;
+      const val = intent.validate(p, String(v));
+      if (!val.valid) r.push({ property: p, value: String(v), selector, severity: "warning", message: `"${v}" unrecognized for "${p}"`, suggestion: val.suggestion });
+    }
+    r.push(...detectShorthands(styles));
+    this._diagnostics.push(...r);
+    const sp = Object.keys(styles).filter((k) => typeof styles[k] !== "object");
+    for (const c of CONFLICTS) {
+      const ix = c.props.filter((k) => sp.includes(k));
+      if (ix.length >= 2) r.push({ property: c.props.join(", "), selector, severity: c.sev, message: c.msg });
+    }
+    return r;
+  }
+  analyze(sd) {
+    const ad = [];
+    const sels = sd.selectors || ["&"];
+    for (const s of sels) ad.push(...this.analyzeStyle(s, sd));
+    if (sd.hover && typeof sd.hover === "object") for (const s of sels) ad.push(...this.analyzeStyle(s + ":hover", sd.hover));
+    return {
+      diagnostics: ad,
+      conflicts: [],
+      breakpoints: [],
+      unusedSelectors: [],
+      deadStyles: [],
+      duplicationWarnings: [],
+      optimizationSuggestions: [],
+      stats: {
+        totalProperties: Object.keys(sd).filter((k) => !["selectors", "atRules", "nestedRules", "hover", "themes"].includes(k) && !k.startsWith("_")).length,
+        totalSelectors: sels.length,
+        shorthandOpportunities: ad.filter((d) => d.message.includes("shorthand")).length,
+        animationSuggestions: 0,
+        responsiveIssues: 0
+      }
+    };
+  }
+  reset() {
+    this._diagnostics = [];
+  }
+  getDiagnostics() {
+    return [...this._diagnostics];
+  }
+};
+function analyze(sd) {
+  return new StyleAnalyzer().analyze(sd);
+}
+
+// src/index.ts
 var VERSION2 = "3.0.0";
 var index_default = chain;
 if (typeof process !== "undefined" && process.env?.NODE_ENV !== "test") {
@@ -6895,8 +7984,12 @@ export {
   ChainCSSPrefixer,
   DesignTokens,
   PersistentCache,
+  StyleAnalyzer,
+  StyleGraphCompiler,
   Theme,
   VERSION2 as VERSION,
+  add,
+  analyze as analyzeStyle,
   animationPresets,
   autoDetector,
   buildChain,
@@ -6904,7 +7997,10 @@ export {
   smartChain as chainV3,
   clearTimeline,
   compileChainCSS,
+  compileGraph,
   configureAtomic,
+  convert,
+  correct,
   createAnimation,
   createTokens as createDesignTokens,
   createSmartComponent,
@@ -6912,13 +8008,16 @@ export {
   createThemeContract,
   createTokens2 as createTokens,
   index_default as default,
+  divide,
   enableDebug,
   enableTimeline,
   expandShorthand,
   exportTimeline,
+  fluidType,
   getAnimationPreset,
   getAnimationPresetNames,
   getAvailableShorthands,
+  getIntent,
   getPropertySuggestion,
   getShorthandSuggestion,
   getStyleChanges,
@@ -6928,17 +8027,25 @@ export {
   getSuggestions,
   handleShorthand,
   hasAnimationPreset,
+  heal,
   helpers,
   injectChainStyles,
+  intent,
   isShorthand,
   macros,
+  math,
+  multiply,
   recipe,
   runtimeChain,
+  scale,
   setBreakpoints,
   shorthandMap,
   smartChain,
+  subtract,
+  toPx,
   tokens2 as tokens,
   useSmartStyles,
   validateTheme,
+  validate as validateValue,
   withSmartStyles
 };