chaincss 2.1.37 → 2.1.39

package/ROADMAP.md

@@ -0,0 +1,31 @@
+
+## v3.0 Ideas
+
+### 1. Predictive & Self-Healing CSS
+- Context-aware typo correction (not just fuzzy matching)
+- Intent detection: `display: "flexbox"` → maps to `display: flex` + applies defaults
+- Modes: strict (error), dev (auto-fix), smart (fix + log)
+- Builds on: suggestions.ts, explain()
+
+### 2. Style Graph Compiler
+- Instead of linear compilation, build a dependency graph of styles
+- Dead style elimination
+- Automatic merging of identical rules
+- Predictive pre-compilation
+- Order-safe CSS output
+- Builds on: compile(), atomic optimizer
+
+### 3. Unit-Aware Math Engine
+- Full CSS expression evaluator
+- `add("10px", "2rem")` → resolves units → optimized calc()
+- `fluidType(14, 20)` → responsive clamp()
+- Context-aware scaling
+- Builds on: helpers.ts
+
+### 4. IDE Intelligence Layer (VS Code Extension)
+- Real-time invalid property detection
+- Shorthand translation hints
+- Animation suggestion
+- Breakpoint inference
+- Style conflict detection
+- Builds on: suggestions.ts

package/dist/cli/index.js

@@ -2612,6 +2612,431 @@ var init_content_addressable_cache = __esm({
   }
 });
 
+// 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();
+}
+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 StyleGraphBuilder, StyleGraphCompiler;
+var init_style_graph = __esm({
+  "src/compiler/style-graph.ts"() {
+    "use strict";
+    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;
+      }
+    };
+    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 };
+      }
+    };
+  }
+});
+
 // src/core/compiler.ts
 var compiler_exports = {};
 __export(compiler_exports, {
@@ -2620,7 +3045,7 @@ __export(compiler_exports, {
 });
 import fs7 from "fs";
 import path6 from "path";
-import crypto4 from "crypto";
+import crypto5 from "crypto";
 import chalk2 from "chalk";
 import { fileURLToPath, pathToFileURL } from "url";
 async function compileChainCSS(inputFile, outputDir, config) {
@@ -2639,6 +3064,7 @@ var init_compiler = __esm({
     init_cache_manager();
     init_content_addressable_cache();
     init_shorthands();
+    init_style_graph();
     __filename = typeof import.meta !== "undefined" ? (() => {
       try {
         return fileURLToPath(import.meta.url);
@@ -2689,6 +3115,35 @@ var init_compiler = __esm({
         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);
@@ -2726,7 +3181,7 @@ var init_compiler = __esm({
         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 || "",
@@ -2854,7 +3309,7 @@ var init_compiler = __esm({
       // ============================================================================
       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 = path6.resolve(filePath);

package/dist/compiler/analyzer.d.ts

@@ -0,0 +1,12 @@
+import type { StyleDefinition, StyleDiagnostic, StyleAnalysis, BreakpointInference, DiagnosticSeverity } from '../core/types.js';
+export type { StyleDiagnostic, StyleAnalysis, BreakpointInference, DiagnosticSeverity };
+export declare class StyleAnalyzer {
+    private _diagnostics;
+    analyzeStyle(selector: string, styles: Record<string, any>, _opts?: any): StyleDiagnostic[];
+    analyze(sd: StyleDefinition): StyleAnalysis;
+    reset(): void;
+    getDiagnostics(): StyleDiagnostic[];
+}
+export declare function analyze(sd: StyleDefinition): StyleAnalysis;
+export declare function analyzeStyle(sd: StyleDefinition): StyleAnalysis;
+export default StyleAnalyzer;

package/dist/compiler/intent-engine.d.ts

@@ -0,0 +1,31 @@
+import type { CorrectionResult, HealMode, HealResult, IntentContext } from '../core/types.js';
+export type { CorrectionResult, HealMode, HealResult, IntentContext };
+interface ValueCorrection {
+    wrong: string;
+    correct: string;
+    confidence: number;
+}
+export declare const intent: {
+    correct(property: string, value: string, context?: IntentContext): CorrectionResult | null;
+    heal(styles: Record<string, any>, mode?: HealMode, context?: IntentContext): HealResult;
+    getIntent(value: string, ctx?: IntentContext): string | null;
+    validate(property: string, value: string): {
+        valid: boolean;
+        suggestion?: string;
+    };
+    getCorrections(property: string): ValueCorrection[];
+    explain(correction: CorrectionResult): string;
+    getKnownProperties(): string[];
+    getIntents(): {
+        pattern: string;
+        description: string;
+    }[];
+};
+export declare const correct: (property: string, value: string, context?: IntentContext) => CorrectionResult | null;
+export declare const heal: (styles: Record<string, any>, mode?: HealMode, context?: IntentContext) => HealResult;
+export declare const validate: (property: string, value: string) => {
+    valid: boolean;
+    suggestion?: string;
+};
+export declare const getIntent: (value: string, ctx?: IntentContext) => string | null;
+export default intent;

package/dist/compiler/math-engine.d.ts

@@ -0,0 +1,89 @@
+import type { CSSUnit, CSSMathValue, MathContext, MathResult, FluidTypeConfig } from '../core/types.js';
+export type { CSSUnit, CSSMathValue, MathContext, MathResult, FluidTypeConfig };
+export type MathOp = 'add' | 'subtract' | 'multiply' | 'divide';
+export declare const 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: string | number, b: string | number, context?: MathContext): MathResult;
+    /**
+     * Subtract two CSS values with unit resolution.
+     */
+    subtract(a: string | number, b: string | number, context?: MathContext): MathResult;
+    /**
+     * Multiply two CSS values with unit resolution.
+     */
+    multiply(a: string | number, b: string | number, context?: MathContext): MathResult;
+    /**
+     * Divide two CSS values with unit resolution.
+     */
+    divide(a: string | number, b: string | number, context?: MathContext): MathResult;
+    /**
+     * Sum multiple CSS values.
+     */
+    sum(...values: (string | number)[]): MathResult;
+    /**
+     * Resolve a CSS value to pixels.
+     */
+    toPx(value: string | number, context?: MathContext): number;
+    /**
+     * Convert between CSS units.
+     */
+    convert(value: string | number, toUnit: CSSUnit, context?: MathContext): MathResult;
+    /**
+     * 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: FluidTypeConfig): MathResult;
+    /**
+     * Scale a value by a factor with unit preservation.
+     */
+    scale(value: string | number, factor: number): MathResult;
+    /**
+     * Clamp a CSS value between min and max.
+     */
+    clampValue(value: string | number, min: string | number, max: string | number, context?: MathContext): MathResult;
+    /**
+     * Parse a CSS value into its numeric and unit parts.
+     */
+    parse(value: string | number): CSSMathValue;
+    /**
+     * Check if two values have compatible units for direct operations.
+     */
+    compatible(a: string | number, b: string | number): boolean;
+    /**
+     * Get the category of a CSS unit.
+     */
+    unitCategory(unit: CSSUnit): string;
+    /**
+     * Create a CSS min() expression.
+     */
+    cssMin(...values: (string | number)[]): string;
+    /**
+     * Create a CSS max() expression.
+     */
+    cssMax(...values: (string | number)[]): string;
+    /**
+     * Format a number with specified precision.
+     */
+    precision(value: number, decimals?: number): string;
+};
+export declare const add: (a: string | number, b: string | number, context?: MathContext) => MathResult;
+export declare const subtract: (a: string | number, b: string | number, context?: MathContext) => MathResult;
+export declare const multiply: (a: string | number, b: string | number, context?: MathContext) => MathResult;
+export declare const divide: (a: string | number, b: string | number, context?: MathContext) => MathResult;
+export declare const fluidType: (config: FluidTypeConfig) => MathResult;
+export declare const convert: (value: string | number, toUnit: CSSUnit, context?: MathContext) => MathResult;
+export declare const toPx: (value: string | number, context?: MathContext) => number;
+export declare const scale: (value: string | number, factor: number) => MathResult;
+export default math;

package/dist/compiler/style-graph.d.ts

@@ -0,0 +1,30 @@
+import type { StyleDefinition, StyleGraph, StyleGraphNode, StyleGraphEdge, GraphCompileOptions, GraphCompileResult } from '../core/types.js';
+export type { StyleGraph, StyleGraphNode, StyleGraphEdge, GraphCompileOptions, GraphCompileResult };
+export declare class StyleGraphCompiler {
+    private options;
+    constructor(options?: GraphCompileOptions);
+    /**
+     * Compile a set of style definitions through the graph compiler.
+     */
+    compile(styles: Record<string, StyleDefinition>): GraphCompileResult;
+    /**
+     * Analyze a style graph without generating CSS.
+     */
+    analyze(styles: Record<string, StyleDefinition>): StyleGraph;
+    /**
+     * Get optimization statistics for a graph.
+     */
+    getStats(graph: StyleGraph): {
+        totalNodes: number;
+        deadNodes: number;
+        mergedGroups: number;
+        averageSpecificity: number;
+        deepestDependencyChain: number;
+    };
+    /**
+     * Update options.
+     */
+    configure(options: Partial<GraphCompileOptions>): void;
+}
+export declare function compileGraph(styles: Record<string, StyleDefinition>, options?: GraphCompileOptions): GraphCompileResult;
+export default StyleGraphCompiler;