chaincss 2.1.38 → 2.2.0

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")}`);
@@ -6876,7 +7330,1277 @@ init_shorthands();
 init_helpers();
 init_animations();
 init_suggestions();
+
+// src/compiler/design-orchestrator.ts
+function parseColor(color) {
+  const trimmed = color.trim().toLowerCase();
+  const hexMatch = trimmed.match(/^#([a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})$/);
+  if (hexMatch) {
+    let hex = hexMatch[1];
+    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    if (hex.length === 8) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+        a: parseInt(hex.slice(6, 8), 16) / 255
+      };
+    }
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: 1
+    };
+  }
+  const rgbMatch = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);
+  if (rgbMatch) {
+    return {
+      r: parseInt(rgbMatch[1]),
+      g: parseInt(rgbMatch[2]),
+      b: parseInt(rgbMatch[3]),
+      a: rgbMatch[4] ? parseFloat(rgbMatch[4]) : 1
+    };
+  }
+  const named = {
+    white: [255, 255, 255],
+    black: [0, 0, 0],
+    red: [255, 0, 0],
+    green: [0, 128, 0],
+    blue: [0, 0, 255],
+    gray: [128, 128, 128],
+    grey: [128, 128, 128],
+    transparent: [0, 0, 0]
+  };
+  if (named[trimmed]) {
+    const [r, g, b] = named[trimmed];
+    return { r, g, b, a: trimmed === "transparent" ? 0 : 1 };
+  }
+  return null;
+}
+function relativeLuminance(r, g, b) {
+  const rsrgb = r / 255;
+  const gsrgb = g / 255;
+  const bsrgb = b / 255;
+  const rLin = rsrgb <= 0.04045 ? rsrgb / 12.92 : Math.pow((rsrgb + 0.055) / 1.055, 2.4);
+  const gLin = gsrgb <= 0.04045 ? gsrgb / 12.92 : Math.pow((gsrgb + 0.055) / 1.055, 2.4);
+  const bLin = bsrgb <= 0.04045 ? bsrgb / 12.92 : Math.pow((bsrgb + 0.055) / 1.055, 2.4);
+  return 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin;
+}
+function contrastRatio(foreground, background) {
+  const fg = parseColor(foreground);
+  const bg = parseColor(background);
+  if (!fg || !bg) return -1;
+  const lumFg = relativeLuminance(fg.r, fg.g, fg.b) + 0.05;
+  const lumBg = relativeLuminance(bg.r, bg.g, bg.b) + 0.05;
+  const lighter = Math.max(lumFg, lumBg);
+  const darker = Math.min(lumFg, lumBg);
+  return lighter / darker;
+}
+function checkContrast(foreground, background) {
+  const ratio = contrastRatio(foreground, background);
+  return {
+    foreground,
+    background,
+    ratio: Math.round(ratio * 100) / 100,
+    passes: {
+      AA: ratio >= 4.5,
+      AALarge: ratio >= 3,
+      AAA: ratio >= 7,
+      AAALarge: ratio >= 4.5
+    },
+    suggestion: ratio < 4.5 ? `Contrast ratio ${Math.round(ratio * 100) / 100} fails AA. Need ${Math.round((4.5 - ratio) * 100) / 100} more. Consider darkening/lightening.` : void 0
+  };
+}
+function auditContrast(styles) {
+  const checks = [];
+  for (const style of styles) {
+    if (style.color && style.backgroundColor) {
+      checks.push(checkContrast(style.color, style.backgroundColor));
+    }
+  }
+  const failures = checks.filter((c) => !c.passes.AA);
+  const warnings = checks.filter((c) => c.passes.AA && !c.passes.AAA);
+  return {
+    checks,
+    failures,
+    warnings,
+    passCount: checks.length - failures.length,
+    failCount: failures.length,
+    summary: failures.length === 0 ? "All " + checks.length + " contrast checks pass AA." : failures.length + " of " + checks.length + " contrast checks FAIL AA."
+  };
+}
+function createContextualToken(defaultValue, contexts = {}) {
+  const name = "ctx-" + Math.random().toString(36).slice(2, 8);
+  return { name, default: defaultValue, contexts };
+}
+function resolveContextual(token, selectorPath) {
+  let bestMatch = token.default;
+  let bestLength = 0;
+  for (const [context, value] of Object.entries(token.contexts)) {
+    if (selectorPath.includes(context) && context.length > bestLength) {
+      bestMatch = value;
+      bestLength = context.length;
+    }
+  }
+  return bestMatch;
+}
+function generateContextualCSS(propertyName, token, baseSelector) {
+  let css = "";
+  css += baseSelector + " { " + propertyName + ": " + token.default + "; }\n";
+  for (const [context, value] of Object.entries(token.contexts)) {
+    css += context + " " + baseSelector + " { " + propertyName + ": " + value + "; }\n";
+  }
+  return css;
+}
+function validateTokenRelationships(tokens3, pairs) {
+  const styles = [];
+  for (const pair of pairs) {
+    const fg = resolveTokenPath2(tokens3, pair.foreground);
+    const bg = resolveTokenPath2(tokens3, pair.background);
+    if (fg && bg) {
+      styles.push({ selector: pair.label, color: fg, backgroundColor: bg });
+    }
+  }
+  return auditContrast(styles);
+}
+function resolveTokenPath2(tokens3, path6) {
+  const parts = path6.split(".");
+  let current = tokens3;
+  for (const part of parts) {
+    if (current === void 0 || current === null) return null;
+    current = current[part];
+  }
+  return typeof current === "string" ? current : null;
+}
+var orchestrator = {
+  contrastRatio,
+  checkContrast,
+  auditContrast,
+  createContextualToken,
+  resolveContextual,
+  generateContextualCSS,
+  validateTokenRelationships,
+  parseColor
+};
+
+// src/compiler/scroll-timeline.ts
+var SCROLL_PRESETS = {
+  fadeIn: {
+    selector: "",
+    timeline: { name: "fade-in", source: "view", range: "entry" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", transform: "translateY(20px)" } },
+      { offset: "100%", properties: { opacity: "1", transform: "translateY(0)" } }
+    ]
+  },
+  fadeOut: {
+    selector: "",
+    timeline: { name: "fade-out", source: "view", range: "exit" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "1" } },
+      { offset: "100%", properties: { opacity: "0" } }
+    ]
+  },
+  scaleIn: {
+    selector: "",
+    timeline: { name: "scale-in", source: "view", range: "entry" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", transform: "scale(0.8)" } },
+      { offset: "100%", properties: { opacity: "1", transform: "scale(1)" } }
+    ]
+  },
+  slideLeft: {
+    selector: "",
+    timeline: { name: "slide-left", source: "view", range: "entry" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", transform: "translateX(-40px)" } },
+      { offset: "100%", properties: { opacity: "1", transform: "translateX(0)" } }
+    ]
+  },
+  slideRight: {
+    selector: "",
+    timeline: { name: "slide-right", source: "view", range: "entry" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", transform: "translateX(40px)" } },
+      { offset: "100%", properties: { opacity: "1", transform: "translateX(0)" } }
+    ]
+  },
+  parallax: {
+    selector: "",
+    timeline: { name: "parallax", source: "scroll", scroller: "root" },
+    keyframes: [
+      { offset: "0%", properties: { transform: "translateY(0)" } },
+      { offset: "100%", properties: { transform: "translateY(-20%)" } }
+    ]
+  },
+  stickyReveal: {
+    selector: "",
+    timeline: { name: "sticky-reveal", source: "view", range: "contain" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", clipPath: "inset(0 0 100% 0)" } },
+      { offset: "50%", properties: { opacity: "1", clipPath: "inset(0 0 0% 0)" } },
+      { offset: "100%", properties: { opacity: "1", clipPath: "inset(0 0 0% 0)" } }
+    ]
+  }
+};
+var animCounter = 0;
+function generateName(prefix) {
+  return prefix + "-" + (animCounter++).toString(36);
+}
+function compileScrollAnimation(animation) {
+  const animName = animation.timeline.name || generateName("scroll-anim");
+  const timelineName = "--" + animName + "-tl";
+  let css = "";
+  css += "/* Scroll Timeline: " + animName + " */\n";
+  if (animation.timeline.source === "view") {
+    const range = animation.timeline.range || "entry";
+    css += animation.selector + " {\n";
+    css += "  view-timeline-name: " + timelineName + ";\n";
+    css += "  view-timeline-axis: " + (animation.timeline.axis || "block") + ";\n";
+    if (animation.timeline.inset) {
+      const inset = typeof animation.timeline.inset === "string" ? animation.timeline.inset : animation.timeline.inset.start + " " + animation.timeline.inset.end;
+      css += "  view-timeline-inset: " + inset + ";\n";
+    }
+    css += "}\n\n";
+  } else {
+    const scroller = animation.timeline.scroller === "root" ? "root" : animation.timeline.scroller === "self" ? "self" : animation.timeline.scroller || "nearest";
+    css += animation.selector + " {\n";
+    if (scroller === "root" || scroller === "self" || scroller === "nearest") {
+      css += "  scroll-timeline-name: " + timelineName + ";\n";
+      css += "  scroll-timeline-axis: " + (animation.timeline.axis || "block") + ";\n";
+    }
+    css += "}\n\n";
+  }
+  css += "@keyframes " + animName + " {\n";
+  for (const step of animation.keyframes) {
+    css += "  " + step.offset + " {\n";
+    for (const [prop, value] of Object.entries(step.properties)) {
+      const kebabProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+      css += "    " + kebabProp + ": " + value + ";\n";
+    }
+    css += "  }\n";
+  }
+  css += "}\n\n";
+  const targetSelector = animation.selector + " > *" || animation.selector;
+  css += "/* Apply animation to children */\n";
+  css += targetSelector + " {\n";
+  css += "  animation: " + animName + " linear both;\n";
+  css += "  animation-timeline: " + timelineName + ";\n";
+  if (animation.timeline.source === "view") {
+    const range = animation.timeline.range || "entry";
+    css += "  animation-range: " + range + ";\n";
+  }
+  if (animation.delay) css += "  animation-delay: " + animation.delay + ";\n";
+  css += "}\n\n";
+  css += "/* Fallback for browsers without scroll-timeline */\n";
+  css += "@supports not (animation-timeline: scroll()) {\n";
+  css += "  " + targetSelector + " {\n";
+  css += "    /* Use JS polyfill: https://github.com/flackr/scroll-timeline */\n";
+  css += "    animation: " + animName + " 1s ease both;\n";
+  css += "  }\n";
+  css += "}\n";
+  return {
+    css,
+    animationName: animName,
+    timelineName,
+    fallback: ""
+  };
+}
+function compileScrollAnimations(animations) {
+  let css = "/* ============================================================\n";
+  css += "   ChainCSS Scroll-Driven Animations\n";
+  css += "   Generated: " + (/* @__PURE__ */ new Date()).toISOString() + "\n";
+  css += "   ============================================================ */\n\n";
+  for (const animation of animations) {
+    const result = compileScrollAnimation(animation);
+    css += result.css;
+  }
+  return css;
+}
+function createScrollAnimation(preset, selector, overrides) {
+  const base = SCROLL_PRESETS[preset];
+  if (!base) throw new Error("Unknown scroll preset: " + preset);
+  return {
+    ...base,
+    selector,
+    timeline: { ...base.timeline, ...overrides?.timeline },
+    keyframes: overrides?.keyframes || base.keyframes,
+    ...overrides
+  };
+}
+function getScrollPresets() {
+  return Object.keys(SCROLL_PRESETS);
+}
+var scrollTimeline = {
+  compile: compileScrollAnimation,
+  compileAll: compileScrollAnimations,
+  create: createScrollAnimation,
+  presets: SCROLL_PRESETS,
+  getPresets: getScrollPresets
+};
+
+// src/index.ts
 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/css-if-transpiler.ts
+function detectIfPatterns(styles) {
+  const conditions = [];
+  if (!styles._conditions) return conditions;
+  const condEntries = Object.entries(styles._conditions || {});
+  for (const [variable, branches] of condEntries) {
+    const branch = branches;
+    const trueStyles = branch.true || {};
+    const falseStyles = branch.false || {};
+    const allProps = /* @__PURE__ */ new Set([...Object.keys(trueStyles), ...Object.keys(falseStyles)]);
+    for (const prop of allProps) {
+      if (prop.startsWith("_") || prop === "selectors") continue;
+      const trueVal = trueStyles[prop];
+      const falseVal = falseStyles[prop];
+      if (trueVal !== void 0 && falseVal !== void 0 && trueVal !== falseVal) {
+        conditions.push({
+          property: prop,
+          variable: variable.startsWith("--") ? variable : "--" + variable,
+          conditions: { true: trueVal },
+          defaultValue: falseVal
+        });
+      }
+    }
+  }
+  return conditions;
+}
+function emitCSSIf(selector, detectedConditions, baseProperties = {}) {
+  if (detectedConditions.length === 0) return "";
+  let css = "";
+  css += "/* Native CSS if() \u2014 Chrome 137+ */\n";
+  css += selector + " {\n";
+  for (const [prop, value] of Object.entries(baseProperties)) {
+    css += "  " + prop + ": " + value + ";\n";
+  }
+  for (const cond of detectedConditions) {
+    const entries = Object.entries(cond.conditions);
+    if (entries.length === 1) {
+      const [condition, val] = entries[0];
+      css += "  " + cond.property + ": if(style(" + cond.variable + ": " + condition + "): " + val + " else " + cond.defaultValue + ");\n";
+    } else {
+      let chain3 = "";
+      for (let i = 0; i < entries.length; i++) {
+        const [condition, val] = entries[i];
+        chain3 += i === 0 ? "if(style(" + cond.variable + ": " + condition + "): " + val : " else if(style(" + cond.variable + ": " + condition + "): " + val;
+      }
+      chain3 += " else " + cond.defaultValue + ")".repeat(entries.length);
+      css += "  " + cond.property + ": " + chain3 + ";\n";
+    }
+  }
+  css += "}\n\n";
+  css += "/* Fallback for browsers without CSS if() */\n";
+  css += "@supports not (property: if()) {\n";
+  css += "  " + selector + " {\n";
+  for (const [prop, value] of Object.entries(baseProperties)) {
+    css += "    " + prop + ": " + value + ";\n";
+  }
+  for (const cond of detectedConditions) {
+    css += "    " + cond.property + ": " + cond.defaultValue + ";\n";
+  }
+  css += "  }\n";
+  for (const cond of detectedConditions) {
+    for (const [condition, val] of Object.entries(cond.conditions)) {
+      const modClass = selector + "--" + cond.variable.replace("--", "") + "-" + condition;
+      css += "  " + modClass + " { " + cond.property + ": " + val + "; }\n";
+    }
+  }
+  css += "}\n";
+  return css;
+}
+
+// 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 LAYOUT_MACROS = {
+  stickyHeader: {
+    name: "stickyHeader",
+    description: "Sticky header with scroll shadow and entrance animation",
+    properties: {
+      position: "sticky",
+      top: "0",
+      zIndex: "50",
+      backgroundColor: "var(--header-bg, white)",
+      backdropFilter: "blur(8px)",
+      borderBottom: "1px solid transparent"
+    },
+    defaults: {
+      "--header-bg": "white",
+      "--header-shadow": "0 4px 12px rgba(0,0,0,0.1)"
+    },
+    mediaQueries: {
+      "(max-width: 768px)": {
+        padding: "12px 16px"
+      },
+      "(min-width: 769px)": {
+        padding: "16px 32px"
+      }
+    }
+  },
+  card: {
+    name: "card",
+    description: "Standard card container with hover lift effect",
+    properties: {
+      display: "flex",
+      flexDirection: "column",
+      borderRadius: "12px",
+      backgroundColor: "var(--card-bg, white)",
+      boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)",
+      transition: "box-shadow 0.2s ease, transform 0.2s ease",
+      overflow: "hidden"
+    },
+    defaults: {
+      "--card-bg": "white",
+      "--card-hover-shadow": "0 10px 30px rgba(0,0,0,0.15)"
+    },
+    mediaQueries: {
+      "(hover: hover)": {
+        "&:hover": {
+          boxShadow: "var(--card-hover-shadow)",
+          transform: "translateY(-2px)"
+        }
+      }
+    }
+  },
+  hero: {
+    name: "hero",
+    description: "Full-width hero section with centered content",
+    properties: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "100%",
+      minHeight: "60vh",
+      padding: "48px 24px",
+      textAlign: "center"
+    },
+    defaults: {},
+    mediaQueries: {
+      "(max-width: 768px)": {
+        minHeight: "40vh",
+        padding: "32px 16px"
+      }
+    }
+  },
+  container: {
+    name: "container",
+    description: "Responsive centered container with max-width",
+    properties: {
+      width: "100%",
+      maxWidth: "1200px",
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingLeft: "16px",
+      paddingRight: "16px"
+    },
+    defaults: {},
+    mediaQueries: {
+      "(min-width: 768px)": {
+        paddingLeft: "24px",
+        paddingRight: "24px"
+      },
+      "(min-width: 1024px)": {
+        paddingLeft: "32px",
+        paddingRight: "32px"
+      }
+    }
+  },
+  center: {
+    name: "center",
+    description: "Absolute centering using flexbox",
+    properties: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    defaults: {}
+  },
+  gridList: {
+    name: "gridList",
+    description: "Responsive grid list with auto-fit columns",
+    properties: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+      gap: "24px"
+    },
+    defaults: {},
+    mediaQueries: {
+      "(max-width: 640px)": {
+        gridTemplateColumns: "1fr",
+        gap: "16px"
+      }
+    }
+  },
+  sidebar: {
+    name: "sidebar",
+    description: "Two-column layout: sidebar + main content",
+    properties: {
+      display: "grid",
+      gridTemplateColumns: "280px 1fr",
+      gap: "32px",
+      minHeight: "100vh"
+    },
+    defaults: {},
+    mediaQueries: {
+      "(max-width: 1024px)": {
+        gridTemplateColumns: "1fr",
+        gap: "24px"
+      }
+    }
+  },
+  pill: {
+    name: "pill",
+    description: "Pill-shaped element (fully rounded)",
+    properties: {
+      borderRadius: "9999px",
+      padding: "8px 20px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    defaults: {}
+  },
+  glass: {
+    name: "glass",
+    description: "Frosted glass morphism effect",
+    properties: {
+      backgroundColor: "rgba(255, 255, 255, 0.1)",
+      backdropFilter: "blur(16px)",
+      border: "1px solid rgba(255, 255, 255, 0.2)",
+      borderRadius: "16px"
+    },
+    defaults: {}
+  },
+  truncate: {
+    name: "truncate",
+    description: "Single-line text truncation with ellipsis",
+    properties: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    defaults: {}
+  },
+  srOnly: {
+    name: "srOnly",
+    description: "Screen-reader only (visually hidden but accessible)",
+    properties: {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0, 0, 0, 0)",
+      whiteSpace: "nowrap",
+      borderWidth: "0"
+    },
+    defaults: {}
+  }
+};
+function resolveLayoutMacro(name) {
+  return LAYOUT_MACROS[name] || null;
+}
+function expandLayoutMacro(name) {
+  const macro2 = resolveLayoutMacro(name);
+  if (!macro2) return null;
+  const result = { ...macro2.properties };
+  if (macro2.defaults) {
+    Object.assign(result, macro2.defaults);
+  }
+  if (macro2.mediaQueries) {
+    result.atRules = result.atRules || [];
+    for (const [query, props] of Object.entries(macro2.mediaQueries)) {
+      result.atRules.push({
+        type: "media",
+        query,
+        styles: props
+      });
+    }
+  }
+  return result;
+}
+function getAvailableMacros() {
+  return Object.keys(LAYOUT_MACROS);
+}
+function getMacroDescription(name) {
+  const macro2 = resolveLayoutMacro(name);
+  return macro2?.description || null;
+}
+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;
+  },
+  cssIf: { detect: detectIfPatterns, emit: emitCSSIf },
+  getIntents() {
+    return SEMANTIC_INTENTS.map((r) => ({ pattern: r.pattern.toString(), description: r.description }));
+  },
+  getKnownProperties() {
+    return [...KNOWN_PROPERTIES];
+  },
+  // Layout Macros
+  macro(name) {
+    return expandLayoutMacro(name);
+  },
+  getMacros() {
+    return getAvailableMacros();
+  },
+  getMacroDescription(name) {
+    return getMacroDescription(name);
+  },
+  hasMacro(name) {
+    return name in LAYOUT_MACROS;
+  },
+  /**
+   * Apply a layout macro to an existing styles object.
+   * Merges macro properties with user overrides.
+   */
+  applyMacro(name, overrides) {
+    const macro2 = expandLayoutMacro(name);
+    if (!macro2) return null;
+    if (!overrides) return macro2;
+    const merged = { ...macro2 };
+    for (const [key, value] of Object.entries(overrides)) {
+      if (key === "atRules" && Array.isArray(value) && Array.isArray(merged.atRules)) {
+        merged.atRules = [...merged.atRules, ...value];
+      } else if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        merged[key] = { ...merged[key] || {}, ...value };
+      } else {
+        merged[key] = value;
+      }
+    }
+    return merged;
+  }
+};
+var correct = intent.correct.bind(intent);
+var heal = intent.heal.bind(intent);
+var validate = intent.validate.bind(intent);
+var getIntent = intent.getIntent.bind(intent);
+var macro = intent.macro.bind(intent);
+var applyMacro = intent.applyMacro.bind(intent);
+var getMacros = intent.getMacros.bind(intent);
+var hasMacro = intent.hasMacro.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,31 +8619,51 @@ export {
   ChainCSSPrefixer,
   DesignTokens,
   PersistentCache,
+  SCROLL_PRESETS,
+  StyleAnalyzer,
+  StyleGraphCompiler,
   Theme,
   VERSION2 as VERSION,
+  add,
+  analyze as analyzeStyle,
   animationPresets,
+  auditContrast,
   autoDetector,
   buildChain,
   chain,
   smartChain as chainV3,
+  checkContrast,
   clearTimeline,
   compileChainCSS,
+  compileGraph,
+  compileScrollAnimation,
+  compileScrollAnimations,
   configureAtomic,
+  contrastRatio,
+  convert,
+  correct,
   createAnimation,
+  createContextualToken,
   createTokens as createDesignTokens,
+  createScrollAnimation,
   createSmartComponent,
   createTheme,
   createThemeContract,
   createTokens2 as createTokens,
   index_default as default,
+  divide,
   enableDebug,
   enableTimeline,
   expandShorthand,
   exportTimeline,
+  fluidType,
+  generateContextualCSS,
   getAnimationPreset,
   getAnimationPresetNames,
   getAvailableShorthands,
+  getIntent,
   getPropertySuggestion,
+  getScrollPresets,
   getShorthandSuggestion,
   getStyleChanges,
   getStyleDiff,
@@ -6928,17 +8672,29 @@ export {
   getSuggestions,
   handleShorthand,
   hasAnimationPreset,
+  heal,
   helpers,
   injectChainStyles,
+  intent,
   isShorthand,
   macros,
+  math,
+  multiply,
+  orchestrator,
   recipe,
+  resolveContextual,
   runtimeChain,
+  scale,
+  scrollTimeline,
   setBreakpoints,
   shorthandMap,
   smartChain,
+  subtract,
+  toPx,
   tokens2 as tokens,
   useSmartStyles,
   validateTheme,
+  validateTokenRelationships,
+  validate as validateValue,
   withSmartStyles
 };