chaincss 2.1.39 → 2.3.0

package/dist/index.js

@@ -7330,6 +7330,3728 @@ 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/compiler/style-ir.ts
+var idCounter = 0;
+function nextId(prefix = "ir") {
+  return prefix + "-" + (idCounter++).toString(36) + "-" + Date.now().toString(36);
+}
+function resetIdCounter() {
+  idCounter = 0;
+}
+function record(pass, action, previous, reason) {
+  return { pass, action, timestamp: Date.now(), previous, reason };
+}
+function createDeclaration(property, value, source, meta = {}) {
+  return {
+    id: nextId("decl"),
+    property,
+    value,
+    source,
+    history: [record("parser", "created", void 0, "Parsed from StyleDefinition")],
+    meta
+  };
+}
+function createRule(selector, source) {
+  return {
+    id: nextId("rule"),
+    selector,
+    declarations: [],
+    pseudoClasses: [],
+    atRules: [],
+    nestedRules: [],
+    conditions: [],
+    isDead: false,
+    specificity: 0,
+    hash: "",
+    source: source || {},
+    history: [record("parser", "created", void 0, "Parsed from StyleDefinition")],
+    meta: {}
+  };
+}
+function createIR(sourceFiles = []) {
+  return {
+    id: nextId("ir"),
+    rules: [],
+    diagnostics: [],
+    meta: {
+      version: "1.0.0",
+      createdAt: Date.now(),
+      sourceFiles,
+      passCount: 0,
+      passes: []
+    }
+  };
+}
+function parseIR(styles, sourceFile) {
+  const ir = createIR(sourceFile ? [sourceFile] : []);
+  for (const [componentName, styleDef] of Object.entries(styles)) {
+    if (!styleDef || typeof styleDef !== "object") continue;
+    const selectors = Array.isArray(styleDef.selectors) ? styleDef.selectors : styleDef.selector ? [styleDef.selector] : ["." + componentName];
+    for (const selector of selectors) {
+      const rule = createRule(selector, {
+        file: sourceFile,
+        component: componentName
+      });
+      for (const [prop, value] of Object.entries(styleDef)) {
+        if (prop === "selectors" || prop === "selector" || prop.startsWith("_")) continue;
+        if (prop === "hover" || prop === "atRules" || prop === "nestedRules" || prop === "themes") continue;
+        if (typeof value === "string" || typeof value === "number") {
+          rule.declarations.push(createDeclaration(prop, value, rule.source));
+        }
+      }
+      if (styleDef.hover && typeof styleDef.hover === "object") {
+        const pc = {
+          id: nextId("hover"),
+          name: "hover",
+          declarations: [],
+          source: rule.source,
+          history: [record("parser", "created", void 0, "Parsed hover block")]
+        };
+        for (const [prop, value] of Object.entries(styleDef.hover)) {
+          if (typeof value === "string" || typeof value === "number") {
+            pc.declarations.push(createDeclaration(prop, value, rule.source));
+          }
+        }
+        rule.pseudoClasses.push(pc);
+      }
+      if (styleDef.atRules && Array.isArray(styleDef.atRules)) {
+        for (const atRule of styleDef.atRules) {
+          const irAtRule = {
+            id: nextId("atrule"),
+            type: atRule.type || "media",
+            query: atRule.query,
+            name: atRule.name,
+            declarations: [],
+            nestedRules: [],
+            source: rule.source,
+            history: [record("parser", "created", void 0, "Parsed at-rule")]
+          };
+          if (atRule.styles && typeof atRule.styles === "object") {
+            for (const [prop, value] of Object.entries(atRule.styles)) {
+              if (typeof value === "string" || typeof value === "number") {
+                irAtRule.declarations.push(createDeclaration(prop, value, rule.source));
+              }
+            }
+          }
+          rule.atRules.push(irAtRule);
+        }
+      }
+      if (styleDef._ifConditions && Array.isArray(styleDef._ifConditions)) {
+        for (const cond of styleDef._ifConditions) {
+          rule.conditions.push({
+            id: nextId("cond"),
+            property: cond.property,
+            variable: cond.variable,
+            conditions: cond.conditions || {},
+            defaultValue: cond.defaultValue || "",
+            source: rule.source
+          });
+        }
+      }
+      ir.rules.push(rule);
+    }
+  }
+  return ir;
+}
+function kebab3(prop) {
+  return prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function generateCSS(ir, options) {
+  let css = "";
+  for (const rule of ir.rules) {
+    if (rule.isDead) continue;
+    if (rule.declarations.length > 0) {
+      css += rule.selector + " {\n";
+      for (const decl of rule.declarations) {
+        css += "  " + kebab3(decl.property) + ": " + decl.value + ";\n";
+      }
+      css += "}\n";
+    }
+    for (const pc of rule.pseudoClasses) {
+      if (pc.declarations.length > 0) {
+        css += rule.selector + ":" + pc.name + " {\n";
+        for (const decl of pc.declarations) {
+          css += "  " + kebab3(decl.property) + ": " + decl.value + ";\n";
+        }
+        css += "}\n";
+      }
+    }
+    for (const atRule of rule.atRules) {
+      if (atRule.type === "media" && atRule.query) {
+        css += "@media " + atRule.query + " {\n";
+        css += rule.selector + " {\n";
+        for (const decl of atRule.declarations) {
+          css += "  " + kebab3(decl.property) + ": " + decl.value + ";\n";
+        }
+        css += "}\n}\n";
+      } else if (atRule.type === "keyframes" && atRule.name) {
+        css += "@keyframes " + atRule.name + " {\n";
+        for (const decl of atRule.declarations) {
+          css += "  " + decl.property + " { " + kebab3(decl.property) + ": " + decl.value + "; }\n";
+        }
+        css += "}\n";
+      }
+    }
+    if (rule.conditions.length > 0) {
+      css += "/* Native CSS if() */\n";
+      css += rule.selector + " {\n";
+      for (const cond of rule.conditions) {
+        const entries = Object.entries(cond.conditions);
+        if (entries.length === 1) {
+          const [c, v] = entries[0];
+          css += "  " + kebab3(cond.property) + ": if(style(" + cond.variable + ": " + c + "): " + v + " else " + cond.defaultValue + ");\n";
+        }
+      }
+      css += "}\n";
+    }
+  }
+  return css;
+}
+function countNodes(ir) {
+  let declarations = 0, pseudoClasses = 0, atRules = 0, conditions = 0;
+  for (const rule of ir.rules) {
+    declarations += rule.declarations.length;
+    pseudoClasses += rule.pseudoClasses.length;
+    atRules += rule.atRules.length;
+    conditions += rule.conditions.length;
+  }
+  return { rules: ir.rules.length, declarations, pseudoClasses, atRules, conditions };
+}
+function findRule(ir, selector) {
+  return ir.rules.find((r) => r.selector === selector);
+}
+function cloneIR(ir) {
+  return JSON.parse(JSON.stringify(ir));
+}
+function debugIR(ir) {
+  const counts = countNodes(ir);
+  return [
+    "StyleIR {",
+    "  id: " + ir.id,
+    "  rules: " + counts.rules,
+    "  declarations: " + counts.declarations,
+    "  pseudoClasses: " + counts.pseudoClasses,
+    "  atRules: " + counts.atRules,
+    "  conditions: " + counts.conditions,
+    "  diagnostics: " + ir.diagnostics.length,
+    "  passes: [" + ir.meta.passes.join(", ") + "]",
+    "}"
+  ].join("\n");
+}
+function applyPass(ir, pass, passName) {
+  const result = pass(ir);
+  result.meta.passCount++;
+  result.meta.passes.push(passName);
+  return result;
+}
+function applyPasses(ir, passes) {
+  let current = ir;
+  for (const { name, pass } of passes) {
+    current = applyPass(current, pass, name);
+  }
+  return current;
+}
+function compileViaIR(styles, passes = [], options) {
+  let ir = parseIR(styles, options?.sourceFile);
+  for (const { name, pass } of passes) {
+    ir = applyPass(ir, pass, name);
+  }
+  const css = generateCSS(ir, options);
+  return { css, ir };
+}
+var styleIR = {
+  createIR,
+  parseIR,
+  generateCSS,
+  createRule,
+  createDeclaration,
+  countNodes,
+  findRule,
+  cloneIR,
+  debugIR,
+  applyPass,
+  applyPasses,
+  compileViaIR,
+  resetIdCounter
+};
+
+// src/compiler/pass-manager.ts
+var intentRecoveryPass = (ir) => {
+  for (const rule of ir.rules) {
+    for (const decl of rule.declarations) {
+      if (decl.property === "display" && decl.value === "flexbox") {
+        decl.value = "flex";
+        decl.history.push({
+          pass: "intent-recovery",
+          action: "corrected-value",
+          timestamp: Date.now(),
+          previous: "flexbox",
+          reason: "flexbox \u2192 flex"
+        });
+        const hasJustify = rule.declarations.some((d) => d.property === "justifyContent");
+        const hasAlign = rule.declarations.some((d) => d.property === "alignItems");
+        if (!hasJustify) {
+          rule.declarations.push({
+            id: "ir-auto-" + Date.now(),
+            property: "justifyContent",
+            value: "center",
+            history: [{
+              pass: "intent-recovery",
+              action: "added-default",
+              timestamp: Date.now(),
+              reason: "Added flexbox centering default"
+            }],
+            meta: {}
+          });
+        }
+        if (!hasAlign) {
+          rule.declarations.push({
+            id: "ir-auto-" + Date.now() + 1,
+            property: "alignItems",
+            value: "center",
+            history: [{
+              pass: "intent-recovery",
+              action: "added-default",
+              timestamp: Date.now(),
+              reason: "Added flexbox centering default"
+            }],
+            meta: {}
+          });
+        }
+      }
+      if (decl.property === "position" && decl.value === "abs") {
+        decl.value = "absolute";
+        decl.history.push({
+          pass: "intent-recovery",
+          action: "corrected-value",
+          timestamp: Date.now(),
+          previous: "abs",
+          reason: "abs \u2192 absolute"
+        });
+      }
+    }
+  }
+  return ir;
+};
+var unitResolutionPass = (ir) => {
+  for (const rule of ir.rules) {
+    for (const decl of rule.declarations) {
+      if (typeof decl.value === "number") {
+        const unitless = ["opacity", "zIndex", "flex", "fontWeight", "lineHeight", "order"];
+        if (!unitless.includes(decl.property)) {
+          decl.value = decl.value + "px";
+          decl.history.push({
+            pass: "unit-resolution",
+            action: "added-unit",
+            timestamp: Date.now(),
+            previous: decl.value,
+            reason: "Added px unit to number value"
+          });
+        }
+      }
+    }
+  }
+  return ir;
+};
+var validationPass = (ir) => {
+  for (const rule of ir.rules) {
+    const position = rule.declarations.find((d) => d.property === "position");
+    const zIndex = rule.declarations.find((d) => d.property === "zIndex" || d.property === "z-index");
+    if (position && position.value === "static" && zIndex) {
+      ir.diagnostics.push({
+        id: "diag-" + Date.now(),
+        nodeId: rule.id,
+        severity: "warning",
+        message: "z-index has no effect on static positioned elements",
+        suggestion: "Change position to relative, absolute, or fixed",
+        pass: "validation"
+      });
+    }
+    const display = rule.declarations.find((d) => d.property === "display");
+    const hasFlexProps = rule.declarations.some(
+      (d) => ["justifyContent", "alignItems", "flexDirection", "flexWrap"].includes(d.property)
+    );
+    if (hasFlexProps && (!display || display.value !== "flex" && display.value !== "inline-flex")) {
+      ir.diagnostics.push({
+        id: "diag-" + Date.now() + 1,
+        nodeId: rule.id,
+        severity: "warning",
+        message: "Flex properties require display: flex or display: inline-flex",
+        pass: "validation"
+      });
+    }
+  }
+  return ir;
+};
+var specificitySortPass = (ir) => {
+  for (const rule of ir.rules) {
+    let a = 0, b = 0, c = 0;
+    const idMatches = rule.selector.match(/#[a-zA-Z0-9_-]+/g);
+    if (idMatches) a += idMatches.length;
+    const classMatches = rule.selector.match(/\.[a-zA-Z0-9_-]+/g);
+    if (classMatches) b += classMatches.length;
+    const pseudoMatches = rule.selector.match(/:[a-zA-Z-]+/g);
+    if (pseudoMatches) b += pseudoMatches.length;
+    const elemMatches = rule.selector.match(/^[a-zA-Z]+|[a-zA-Z]+(?=[.#[:])/g);
+    if (elemMatches) c += elemMatches.length;
+    rule.specificity = a * 1e4 + b * 100 + c;
+  }
+  ir.rules.sort((a, b) => a.specificity - b.specificity);
+  return ir;
+};
+var deadEliminationPass = (ir) => {
+  const before = ir.rules.length;
+  ir.rules = ir.rules.filter((r) => !r.isDead);
+  const eliminated = before - ir.rules.length;
+  if (eliminated > 0) {
+    ir.diagnostics.push({
+      id: "diag-dead-" + Date.now(),
+      nodeId: ir.id,
+      severity: "info",
+      message: "Eliminated " + eliminated + " dead rules",
+      pass: "dead-elimination"
+    });
+  }
+  return ir;
+};
+var atomicExtractionPass = (ir) => {
+  const usageMap = /* @__PURE__ */ new Map();
+  for (const rule of ir.rules) {
+    for (const decl of rule.declarations) {
+      const key = decl.property + ":" + decl.value;
+      usageMap.set(key, (usageMap.get(key) || 0) + 1);
+    }
+  }
+  for (const rule of ir.rules) {
+    for (const decl of rule.declarations) {
+      const key = decl.property + ":" + decl.value;
+      const usage = usageMap.get(key) || 0;
+      decl.meta.atomic = usage >= 3;
+      decl.meta.usageCount = usage;
+    }
+  }
+  return ir;
+};
+var mediaQueryPackingPass = (ir) => {
+  const queryMap = /* @__PURE__ */ new Map();
+  for (const rule of ir.rules) {
+    for (const atRule of rule.atRules) {
+      if (atRule.type === "media" && atRule.query) {
+        const existing = queryMap.get(atRule.query) || [];
+        existing.push(rule);
+        queryMap.set(atRule.query, existing);
+      }
+    }
+  }
+  return ir;
+};
+var cssIfTranspilePass = (ir) => {
+  for (const rule of ir.rules) {
+    if (rule.conditions.length > 0) {
+      rule.meta.hasCSSIf = true;
+    }
+  }
+  return ir;
+};
+var cssCompressionPass = (ir) => {
+  for (const rule of ir.rules) {
+    for (const decl of rule.declarations) {
+      if (typeof decl.value === "string" && /^#[0-9a-fA-F]{6}$/.test(decl.value)) {
+        const hex = decl.value;
+        if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
+          decl.value = "#" + hex[1] + hex[3] + hex[5];
+          decl.history.push({
+            pass: "css-compression",
+            action: "shortened-hex",
+            timestamp: Date.now(),
+            previous: hex,
+            reason: "Shortened hex color"
+          });
+        }
+      }
+      if (typeof decl.value === "string" && /^0\.\d+/.test(decl.value)) {
+        const shortened = decl.value.replace(/^0\./, ".");
+        decl.value = shortened;
+      }
+    }
+  }
+  return ir;
+};
+var diagnosticsExportPass = (ir) => {
+  const seen = /* @__PURE__ */ new Set();
+  const unique = [];
+  for (const diag of ir.diagnostics) {
+    const key = diag.nodeId + ":" + diag.message;
+    if (!seen.has(key)) {
+      seen.add(key);
+      unique.push(diag);
+    }
+  }
+  ir.diagnostics = unique;
+  return ir;
+};
+var DEFAULT_PIPELINE = [
+  {
+    name: "intent-recovery",
+    priority: 1,
+    description: "Fix typos and add defaults for common patterns",
+    pass: intentRecoveryPass,
+    requires: [],
+    enabled: true
+  },
+  {
+    name: "unit-resolution",
+    priority: 2,
+    description: "Resolve units and normalize values",
+    pass: unitResolutionPass,
+    requires: [],
+    enabled: true
+  },
+  {
+    name: "validation",
+    priority: 3,
+    description: "Run contrast checks and conflict detection",
+    pass: validationPass,
+    requires: ["intent-recovery"],
+    enabled: true
+  },
+  {
+    name: "specificity-sort",
+    priority: 4,
+    description: "Order rules by specificity",
+    pass: specificitySortPass,
+    requires: [],
+    enabled: true
+  },
+  {
+    name: "dead-elimination",
+    priority: 5,
+    description: "Remove unused selectors",
+    pass: deadEliminationPass,
+    requires: ["specificity-sort"],
+    enabled: true
+  },
+  {
+    name: "atomic-extraction",
+    priority: 6,
+    description: "Extract shared properties into atomic classes",
+    pass: atomicExtractionPass,
+    requires: ["unit-resolution"],
+    enabled: true
+  },
+  {
+    name: "media-query-packing",
+    priority: 7,
+    description: "Group same-query rules together",
+    pass: mediaQueryPackingPass,
+    requires: ["specificity-sort"],
+    enabled: true
+  },
+  {
+    name: "css-if-transpile",
+    priority: 8,
+    description: "Transpile conditional patterns to native CSS if()",
+    pass: cssIfTranspilePass,
+    requires: ["intent-recovery"],
+    enabled: true
+  },
+  {
+    name: "css-compression",
+    priority: 9,
+    description: "Minify CSS output",
+    pass: cssCompressionPass,
+    requires: [],
+    enabled: true
+  },
+  {
+    name: "diagnostics-export",
+    priority: 10,
+    description: "Collect and organize diagnostics",
+    pass: diagnosticsExportPass,
+    requires: ["validation"],
+    enabled: true
+  }
+];
+var PassManager = class {
+  passes = [];
+  results = [];
+  constructor(passes = DEFAULT_PIPELINE) {
+    this.passes = passes.filter((p) => p.enabled);
+    this.validateDependencies();
+  }
+  /**
+   * Validate that all pass dependencies are satisfied.
+   */
+  validateDependencies() {
+    const passNames = new Set(this.passes.map((p) => p.name));
+    for (const pass of this.passes) {
+      for (const req of pass.requires) {
+        if (!passNames.has(req)) {
+          throw new Error(
+            'Pass "' + pass.name + '" requires "' + req + '" but it is not in the pipeline'
+          );
+        }
+      }
+    }
+  }
+  /**
+   * Topological sort passes by dependencies.
+   * Passes with no dependencies run first.
+   */
+  sortByDependencies() {
+    const sorted = [];
+    const remaining = [...this.passes];
+    const satisfied = /* @__PURE__ */ new Set();
+    while (remaining.length > 0) {
+      const ready = remaining.findIndex(
+        (p) => p.requires.every((req) => satisfied.has(req))
+      );
+      if (ready === -1) {
+        throw new Error("Circular dependency detected in pass pipeline");
+      }
+      const pass = remaining.splice(ready, 1)[0];
+      sorted.push(pass);
+      satisfied.add(pass.name);
+    }
+    return sorted;
+  }
+  /**
+   * Run the full pipeline on an IR.
+   */
+  run(ir) {
+    const startTime = Date.now();
+    const sorted = this.sortByDependencies();
+    this.results = [];
+    let current = ir;
+    const from = countNodes(ir);
+    for (const pass of sorted) {
+      const passStart = Date.now();
+      const before = countNodes(current);
+      try {
+        current = pass.pass(current);
+      } catch (err) {
+        this.results.push({
+          name: pass.name,
+          duration: Date.now() - passStart,
+          nodesBefore: before.rules + before.declarations,
+          nodesAfter: before.rules + before.declarations,
+          changes: 0,
+          errors: [err.message]
+        });
+        continue;
+      }
+      const after = countNodes(current);
+      this.results.push({
+        name: pass.name,
+        duration: Date.now() - passStart,
+        nodesBefore: before.rules + before.declarations,
+        nodesAfter: after.rules + after.declarations,
+        changes: Math.abs(after.rules + after.declarations - (before.rules + before.declarations)),
+        errors: []
+      });
+    }
+    const totalDuration = Date.now() - startTime;
+    const to = countNodes(current);
+    return {
+      ir: current,
+      css: "",
+      // Will be generated separately
+      results: this.results,
+      totalDuration,
+      summary: "Pipeline complete: " + this.results.length + " passes in " + totalDuration + "ms. Nodes: " + (from.rules + from.declarations) + " \u2192 " + (to.rules + to.declarations)
+    };
+  }
+  /**
+   * Get results from the last run.
+   */
+  getResults() {
+    return this.results;
+  }
+  /**
+   * Print a human-readable report of pass results.
+   */
+  report() {
+    const lines = [
+      "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550",
+      "  ChainCSS Multi-Pass Pipeline Report",
+      "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550"
+    ];
+    for (const result of this.results) {
+      const status = result.errors.length > 0 ? "\u274C" : "\u2713";
+      lines.push(
+        "  " + status + " " + result.name.padEnd(22) + " " + result.duration.toString().padStart(4) + "ms  nodes: " + result.nodesBefore + " \u2192 " + result.nodesAfter
+      );
+      if (result.errors.length > 0) {
+        for (const err of result.errors) {
+          lines.push("     \u26A0 " + err);
+        }
+      }
+    }
+    lines.push("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
+    return lines.join("\n");
+  }
+  /**
+   * Add a custom pass to the pipeline.
+   */
+  addPass(pass) {
+    this.passes.push(pass);
+    return this;
+  }
+  /**
+   * Remove a pass by name.
+   */
+  removePass(name) {
+    this.passes = this.passes.filter((p) => p.name !== name);
+    return this;
+  }
+  /**
+   * Enable/disable a pass.
+   */
+  setPassEnabled(name, enabled) {
+    const pass = this.passes.find((p) => p.name === name);
+    if (pass) pass.enabled = enabled;
+    this.passes = this.passes.filter((p) => p.enabled);
+    return this;
+  }
+  /**
+   * Get the list of pass names in execution order.
+   */
+  getPassOrder() {
+    return this.sortByDependencies().map((p) => p.name);
+  }
+};
+function runDefaultPipeline(ir) {
+  const manager = new PassManager(DEFAULT_PIPELINE.map((p) => ({ ...p })));
+  return manager.run(ir);
+}
+
+// src/compiler/constraint-solver.ts
+function tokenize(expr) {
+  const tokens3 = [];
+  let current = "";
+  let inParens = 0;
+  for (const char of expr) {
+    if (char === "(") {
+      inParens++;
+      current += char;
+    } else if (char === ")") {
+      inParens--;
+      current += char;
+    } else if (char === " " && inParens === 0) {
+      if (current) tokens3.push(current);
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current) tokens3.push(current);
+  return tokens3;
+}
+function parseExpression(expr) {
+  const trimmed = expr.trim();
+  const funcMatch = trimmed.match(/^([a-zA-Z]+)\((.+)\)$/);
+  if (funcMatch) {
+    const args = funcMatch[2].split(",").map((a) => a.trim());
+    return {
+      left: "",
+      operator: "function",
+      right: "",
+      isFunction: true,
+      functionName: funcMatch[1],
+      functionArgs: args
+    };
+  }
+  const tokens3 = tokenize(trimmed);
+  if (tokens3.length === 3) {
+    return {
+      left: tokens3[0],
+      operator: tokens3[1],
+      right: tokens3[2],
+      isFunction: false
+    };
+  }
+  return {
+    left: trimmed,
+    operator: "",
+    right: "",
+    isFunction: false
+  };
+}
+var KNOWN_REFERENCES = {
+  "parent": "100%",
+  "parent.width": "100%",
+  "parent.height": "100%",
+  "viewport": "100vw",
+  "viewport.width": "100vw",
+  "viewport.height": "100vh",
+  "self": "100%",
+  "self.width": "100%",
+  "self.height": "100%"
+};
+function resolveReference(ref) {
+  return KNOWN_REFERENCES[ref] || ref;
+}
+function resolveConstraint(constraint, context) {
+  const { property, operator, expression } = constraint;
+  const parsed = parseExpression(expression);
+  if (operator === "<" && expression === "parent") {
+    return {
+      constraint,
+      cssProperty: "max-" + property,
+      cssValue: "100%",
+      method: "direct",
+      explanation: property + " < parent \u2192 max-" + property + ": 100%"
+    };
+  }
+  if (operator === ">" && expression === "parent") {
+    return {
+      constraint,
+      cssProperty: "min-" + property,
+      cssValue: "100%",
+      method: "direct",
+      explanation: property + " > parent \u2192 min-" + property + ": 100%"
+    };
+  }
+  if (operator === "=" && parsed.operator === "*") {
+    const leftRef = resolveReference(parsed.left);
+    const rightNum = parseFloat(parsed.right);
+    if (!isNaN(rightNum)) {
+      if (property === "height" && parsed.left === "width" || property === "width" && parsed.left === "height") {
+        const ratio = rightNum;
+        const gcd = findGCD(Math.round(ratio * 100), 100);
+        const num = Math.round(ratio * 100) / gcd;
+        const den = 100 / gcd;
+        return {
+          constraint,
+          cssProperty: "aspect-ratio",
+          cssValue: num + " / " + den,
+          method: "aspect-ratio",
+          explanation: property + " = " + expression + " \u2192 aspect-ratio: " + num + "/" + den
+        };
+      }
+      return {
+        constraint,
+        cssProperty: property,
+        cssValue: "calc(" + leftRef + " * " + rightNum + ")",
+        method: "calc",
+        explanation: property + " = " + expression + " \u2192 calc(" + leftRef + " * " + rightNum + ")"
+      };
+    }
+  }
+  if (operator === "=" && parsed.operator === "/") {
+    const leftRef = resolveReference(parsed.left);
+    const rightNum = parseFloat(parsed.right);
+    if (!isNaN(rightNum)) {
+      return {
+        constraint,
+        cssProperty: property,
+        cssValue: "calc(" + leftRef + " / " + rightNum + ")",
+        method: "calc",
+        explanation: property + " = " + expression + " \u2192 calc(" + leftRef + " / " + rightNum + ")"
+      };
+    }
+  }
+  if (parsed.isFunction && parsed.functionName) {
+    const resolvedArgs = (parsed.functionArgs || []).map(resolveReference);
+    return {
+      constraint,
+      cssProperty: property,
+      cssValue: parsed.functionName + "(" + resolvedArgs.join(", ") + ")",
+      method: parsed.functionName,
+      explanation: property + " = " + expression + " \u2192 " + parsed.functionName + "()"
+    };
+  }
+  if (operator === "=" && !parsed.operator) {
+    const resolved = resolveReference(expression);
+    return {
+      constraint,
+      cssProperty: property,
+      cssValue: resolved,
+      method: "direct",
+      explanation: property + " = " + expression + " \u2192 " + resolved
+    };
+  }
+  if (operator === "=" && expression.includes("vw") || expression.includes("vh")) {
+    return {
+      constraint,
+      cssProperty: property,
+      cssValue: expression,
+      method: "direct",
+      explanation: property + " = " + expression
+    };
+  }
+  return {
+    constraint,
+    cssProperty: property,
+    cssValue: expression,
+    method: "direct",
+    explanation: property + " = " + expression + " (passthrough)"
+  };
+}
+function resolveStickyUntil(selector, untilSelector) {
+  return {
+    constraint: {
+      property: "position",
+      operator: "=",
+      expression: "sticky until " + untilSelector
+    },
+    cssProperty: "position",
+    cssValue: "sticky; top: 0; animation: sticky-" + selector.replace(".", "") + " 1s linear both; animation-timeline: scroll(); animation-range: contain 0% contain 100%",
+    method: "sticky",
+    explanation: "sticky until " + untilSelector + " \u2192 position: sticky + scroll-timeline"
+  };
+}
+function resolveContainerQuery(property, operator, value, condition) {
+  const widthMatch = condition.match(/>\s*(\d+)(px|rem|em)?/);
+  if (widthMatch) {
+    const width = widthMatch[1] + (widthMatch[2] || "px");
+    return {
+      atRule: {
+        type: "container",
+        query: "(min-width: " + width + ")",
+        declarations: [{ property, value }]
+      },
+      explanation: property + " " + operator + " " + value + " when > " + width + " \u2192 @container (min-width: " + width + ")"
+    };
+  }
+  return {
+    atRule: { type: "container", query: condition, declarations: [{ property, value }] },
+    explanation: property + " when " + condition + " \u2192 @container " + condition
+  };
+}
+var constraintSolverPass = (ir) => {
+  for (const rule of ir.rules) {
+    const constraints = rule.meta._constraints || [];
+    if (constraints.length === 0) continue;
+    for (const constraint of constraints) {
+      const resolved = resolveConstraint(constraint);
+      rule.declarations.push({
+        id: "constraint-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6),
+        property: resolved.cssProperty,
+        value: resolved.cssValue,
+        history: [{
+          pass: "constraint-solver",
+          action: "resolved-constraint",
+          timestamp: Date.now(),
+          reason: resolved.explanation
+        }],
+        meta: { constraint }
+      });
+    }
+  }
+  return ir;
+};
+function parseConstraint(property, expression) {
+  let operator = "=";
+  let cleanExpr = expression;
+  const opMatch = expression.match(/^([<>=!≈]+)\s*(.*)/);
+  if (opMatch) {
+    operator = opMatch[1];
+    cleanExpr = opMatch[2];
+  }
+  let condition;
+  const condMatch = cleanExpr.match(/^(.+)\s+when\s+(.+)$/);
+  if (condMatch) {
+    cleanExpr = condMatch[1];
+    condition = condMatch[2];
+  }
+  return {
+    property,
+    operator,
+    expression: cleanExpr,
+    condition
+  };
+}
+function findGCD(a, b) {
+  return b === 0 ? a : findGCD(b, a % b);
+}
+var constraintSolver = {
+  resolve: resolveConstraint,
+  resolveStickyUntil,
+  resolveContainerQuery,
+  parseConstraint,
+  parseExpression,
+  resolveReference,
+  pass: constraintSolverPass
+};
+
+// src/compiler/layout-intelligence.ts
+var LAYOUT_PATTERNS = [
+  // --- Flexbox Patterns ---
+  {
+    name: "stack-center",
+    description: "Vertical stack with centered items",
+    macro: "stack('vertical center')",
+    example: "chain.stack('vertical center')",
+    required: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    optional: ["gap", "padding"],
+    minMatches: 4
+  },
+  {
+    name: "stack-horizontal",
+    description: "Horizontal stack with centered items",
+    macro: "stack('horizontal center')",
+    example: "chain.stack('horizontal center')",
+    required: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    optional: ["gap"],
+    minMatches: 4
+  },
+  {
+    name: "flex-center",
+    description: "Flexbox absolute centering",
+    macro: "center()",
+    example: "chain.center()",
+    required: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    minMatches: 3
+  },
+  {
+    name: "flex-between",
+    description: "Flexbox space-between alignment",
+    macro: "stack('between')",
+    example: "chain.stack('between')",
+    required: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    minMatches: 3
+  },
+  {
+    name: "flex-row-wrap",
+    description: "Flex row with wrapping",
+    macro: "chain.flex().flexDir('row').flexWrap('wrap')",
+    example: "chain.flex().flexDir('row').flexWrap('wrap')",
+    required: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap"
+    },
+    minMatches: 3
+  },
+  // --- Grid Patterns ---
+  {
+    name: "grid-center",
+    description: "Grid with centered items",
+    macro: "gridCenter()",
+    example: "chain.gridCenter()",
+    required: {
+      display: "grid",
+      placeItems: "center"
+    },
+    minMatches: 2
+  },
+  {
+    name: "grid-auto-fit",
+    description: "Responsive auto-fit grid",
+    macro: "gridList()",
+    example: "chain.gridList()",
+    required: {
+      display: "grid"
+    },
+    optional: ["gridTemplateColumns", "gap"],
+    minMatches: 1
+    // Lower because gridTemplateColumns varies
+  },
+  // --- Positioning Patterns ---
+  {
+    name: "absolute-center",
+    description: "Absolute positioning centering",
+    macro: "absolute({ top: '50%', left: '50%' })",
+    example: "chain.absolute({ top: '50%', left: '50%' }).transform('translate(-50%, -50%)')",
+    required: {
+      position: "absolute",
+      top: "50%",
+      left: "50%"
+    },
+    optional: ["transform"],
+    minMatches: 3
+  },
+  {
+    name: "sticky-top",
+    description: "Sticky element at top",
+    macro: "stickyHeader()",
+    example: "chain.stickyHeader()",
+    // from intent macros
+    required: {
+      position: "sticky",
+      top: "0"
+    },
+    optional: ["zIndex", "backgroundColor", "backdropFilter"],
+    minMatches: 2
+  },
+  // --- Sizing Patterns ---
+  {
+    name: "full-size",
+    description: "Full width and height",
+    macro: "chain.size('100%')",
+    example: "chain.size('100%')",
+    required: {
+      width: "100%",
+      height: "100%"
+    },
+    minMatches: 2
+  },
+  {
+    name: "pill-shape",
+    description: "Fully rounded pill element",
+    macro: "pill()",
+    example: "chain.pill()",
+    required: {
+      borderRadius: "9999px"
+    },
+    optional: ["padding", "display"],
+    minMatches: 1
+  },
+  // --- Intent Macros (from intent-engine.ts) ---
+  {
+    name: "sticky-header",
+    description: "Sticky header with backdrop blur",
+    macro: "stickyHeader()",
+    example: "chain.stickyHeader()",
+    required: {
+      position: "sticky",
+      top: "0"
+    },
+    optional: ["zIndex", "backgroundColor", "backdropFilter", "borderBottom", "padding"],
+    minMatches: 2
+  },
+  {
+    name: "card-layout",
+    description: "Card container with shadow and hover lift",
+    macro: "card()",
+    example: "chain.card()",
+    required: {
+      borderRadius: "12px",
+      overflow: "hidden"
+    },
+    optional: ["display", "flexDirection", "backgroundColor", "boxShadow", "transition"],
+    minMatches: 2
+  },
+  {
+    name: "hero-section",
+    description: "Full-width centered hero",
+    macro: "hero()",
+    example: "chain.hero()",
+    required: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "100%"
+    },
+    optional: ["minHeight", "padding", "textAlign"],
+    minMatches: 4
+  },
+  {
+    name: "container-layout",
+    description: "Centered max-width container",
+    macro: "container()",
+    example: "chain.container()",
+    required: {
+      marginLeft: "auto",
+      marginRight: "auto"
+    },
+    optional: ["width", "maxWidth", "paddingLeft", "paddingRight"],
+    minMatches: 2
+  },
+  {
+    name: "sidebar-layout",
+    description: "Sidebar + main content grid",
+    macro: "sidebar()",
+    example: "chain.sidebar()",
+    required: {
+      display: "grid"
+    },
+    optional: ["gridTemplateColumns", "gap", "minHeight"],
+    minMatches: 1
+  },
+  {
+    name: "grid-list",
+    description: "Responsive auto-fit grid list",
+    macro: "gridList()",
+    example: "chain.gridList()",
+    required: {
+      display: "grid"
+    },
+    optional: ["gridTemplateColumns", "gap"],
+    minMatches: 1
+  },
+  {
+    name: "truncate-text",
+    description: "Single-line text truncation with ellipsis",
+    macro: "truncate()",
+    example: "chain.truncate()",
+    required: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    minMatches: 3
+  },
+  {
+    name: "sr-only",
+    description: "Screen-reader only element",
+    macro: "srOnly()",
+    example: "chain.srOnly()",
+    required: {
+      position: "absolute",
+      width: "1px",
+      height: "1px"
+    },
+    optional: ["padding", "margin", "overflow", "clip"],
+    minMatches: 2
+  },
+  // --- Chain.ts Special Methods ---
+  {
+    name: "inline-flex",
+    description: "Inline flex container",
+    macro: "inlineFlex()",
+    example: "chain.inlineFlex()",
+    required: {
+      display: "inline-flex"
+    },
+    minMatches: 1
+  },
+  {
+    name: "inline-grid",
+    description: "Inline grid container",
+    macro: "inlineGrid()",
+    example: "chain.inlineGrid()",
+    required: {
+      display: "inline-grid"
+    },
+    minMatches: 1
+  },
+  {
+    name: "flex-center-direction",
+    description: "Flex centering with direction",
+    macro: "flexCenter('row')",
+    example: "chain.flexCenter('col')",
+    required: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    optional: ["flexDirection"],
+    minMatches: 3
+  },
+  {
+    name: "fixed-position",
+    description: "Fixed positioning",
+    macro: "fixed()",
+    example: "chain.fixed({ top: 0 })",
+    required: {
+      position: "fixed"
+    },
+    optional: ["top", "right", "bottom", "left", "zIndex"],
+    minMatches: 1
+  },
+  {
+    name: "relative-position",
+    description: "Relative positioning",
+    macro: "relative()",
+    example: "chain.relative()",
+    required: {
+      position: "relative"
+    },
+    minMatches: 1
+  },
+  {
+    name: "hidden-element",
+    description: "Hidden element",
+    macro: "hide()",
+    example: "chain.hide()",
+    required: {
+      display: "none"
+    },
+    minMatches: 1
+  },
+  {
+    name: "unselectable",
+    description: "Unselectable text",
+    macro: "unselectable()",
+    example: "chain.unselectable()",
+    required: {
+      userSelect: "none"
+    },
+    minMatches: 1
+  },
+  {
+    name: "scrollable",
+    description: "Scrollable container",
+    macro: "scrollable()",
+    example: "chain.scrollable()",
+    required: {
+      overflow: "auto"
+    },
+    minMatches: 1
+  },
+  {
+    name: "square-shape",
+    description: "Square element with equal sides",
+    macro: "square()",
+    example: "chain.square(100)",
+    required: {
+      width: "100px",
+      height: "100px"
+    },
+    optional: ["borderRadius"],
+    minMatches: 2
+  },
+  {
+    name: "circle-shape",
+    description: "Circle element",
+    macro: "circle()",
+    example: "chain.circle(50)",
+    required: {
+      borderRadius: "50%"
+    },
+    optional: ["width", "height"],
+    minMatches: 1
+  },
+  {
+    name: "bento-grid",
+    description: "Bento box grid layout",
+    macro: "bento()",
+    example: "chain.bento(3)",
+    required: {
+      display: "grid"
+    },
+    optional: ["gridTemplateColumns", "gap", "gridAutoRows"],
+    minMatches: 1
+  },
+  {
+    name: "focus-ring",
+    description: "Focus ring outline",
+    macro: "focusRing()",
+    example: "chain.focusRing()",
+    required: {
+      outline: "2px solid #3b82f6"
+    },
+    optional: ["outlineOffset"],
+    minMatches: 1
+  },
+  {
+    name: "shimmer-effect",
+    description: "Shimmer loading animation",
+    macro: "shimmer()",
+    example: "chain.shimmer()",
+    required: {
+      background: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)"
+    },
+    optional: ["backgroundSize", "animation"],
+    minMatches: 1
+  },
+  {
+    name: "skeleton-loader",
+    description: "Skeleton loading state",
+    macro: "skeleton()",
+    example: "chain.skeleton(true)",
+    required: {
+      animation: "pulse 1.5s ease-in-out infinite"
+    },
+    optional: ["backgroundColor", "borderRadius"],
+    minMatches: 1
+  },
+  {
+    name: "safe-area-bottom",
+    description: "Safe area padding for notched devices",
+    macro: "safeArea('bottom')",
+    example: "chain.safeArea('bottom')",
+    required: {
+      paddingBottom: "env(safe-area-inset-bottom)"
+    },
+    minMatches: 1
+  },
+  // --- Glass Morphism ---
+  {
+    name: "glass-effect",
+    description: "Frosted glass effect",
+    macro: "glass()",
+    example: "chain.glass()",
+    required: {
+      backdropFilter: "blur(16px)"
+    },
+    optional: ["backgroundColor", "border", "borderRadius"],
+    minMatches: 1
+  }
+];
+function matchPattern(rule, pattern) {
+  const declarations = rule.declarations;
+  const propMap = new Map(declarations.map((d) => [d.property, String(d.value)]));
+  const matchedProperties = [];
+  let totalRequired = Object.keys(pattern.required).length;
+  let matched = 0;
+  for (const [prop, expectedValue] of Object.entries(pattern.required)) {
+    const actualValue = propMap.get(prop);
+    if (actualValue === String(expectedValue)) {
+      matched++;
+      matchedProperties.push(prop);
+    }
+  }
+  if (pattern.optional) {
+    for (const prop of pattern.optional) {
+      if (propMap.has(prop)) {
+        matchedProperties.push(prop);
+      }
+    }
+  }
+  const minMatches = pattern.minMatches || Object.keys(pattern.required).length;
+  const confidence = matched >= minMatches ? Math.min(1, matched / totalRequired) : 0;
+  if (confidence >= 0.75 && matched >= minMatches) {
+    return {
+      pattern,
+      ruleId: rule.id,
+      selector: rule.selector,
+      matchedProperties,
+      confidence
+    };
+  }
+  return null;
+}
+function findDuplicates(matches) {
+  const patternGroups = /* @__PURE__ */ new Map();
+  for (const match of matches) {
+    const key = match.pattern.name;
+    const group = patternGroups.get(key) || [];
+    group.push(match);
+    patternGroups.set(key, group);
+  }
+  const duplicates = [];
+  for (const [patternName, group] of patternGroups) {
+    if (group.length >= 2) {
+      duplicates.push({
+        pattern: patternName,
+        selectors: group.map((m) => m.selector),
+        count: group.length
+      });
+    }
+  }
+  return duplicates;
+}
+function generateSuggestions(matches) {
+  const suggestions = [];
+  for (const match of matches) {
+    if (match.confidence >= 0.85) {
+      const propsCount = match.matchedProperties.length;
+      suggestions.push({
+        selector: match.selector,
+        suggestion: match.pattern.macro,
+        savings: propsCount - 1
+        // Saving N-1 declarations
+      });
+    }
+  }
+  return suggestions;
+}
+var layoutIntelligencePass = (ir) => {
+  const allMatches = [];
+  for (const rule of ir.rules) {
+    for (const pattern of LAYOUT_PATTERNS) {
+      const match = matchPattern(rule, pattern);
+      if (match) {
+        allMatches.push(match);
+        rule.meta.layoutPattern = pattern.name;
+        rule.meta.layoutConfidence = match.confidence;
+      }
+    }
+  }
+  const duplicates = findDuplicates(allMatches);
+  for (const dup of duplicates) {
+    ir.diagnostics.push({
+      id: "layout-dup-" + Date.now() + "-" + dup.pattern,
+      nodeId: ir.rules[0]?.id || ir.id,
+      severity: "info",
+      message: 'Layout pattern "' + dup.pattern + '" found ' + dup.count + " times: " + dup.selectors.join(", "),
+      suggestion: "Consider extracting: " + (LAYOUT_PATTERNS.find((p) => p.name === dup.pattern)?.macro || ""),
+      pass: "layout-intelligence"
+    });
+  }
+  const suggestions = generateSuggestions(allMatches);
+  for (const sug of suggestions) {
+    ir.diagnostics.push({
+      id: "layout-sug-" + Date.now() + "-" + sug.selector.replace(/[.#]/g, ""),
+      nodeId: ir.rules.find((r) => r.selector === sug.selector)?.id || ir.id,
+      severity: "hint",
+      message: '"' + sug.selector + '" could use ' + sug.suggestion + " (save " + sug.savings + " declarations)",
+      suggestion: sug.suggestion,
+      pass: "layout-intelligence"
+    });
+  }
+  ir.meta = ir.meta || {};
+  ir.meta.layoutMatches = allMatches;
+  ir.meta.layoutDuplicates = duplicates;
+  return ir;
+};
+function recognizeLayout(declarations) {
+  const rule = {
+    id: "temp-rule",
+    selector: ".temp",
+    declarations: Object.entries(declarations).map(([prop, value]) => ({
+      id: "temp-decl-" + prop,
+      property: prop,
+      value,
+      history: [],
+      meta: {}
+    })),
+    pseudoClasses: [],
+    atRules: [],
+    nestedRules: [],
+    conditions: [],
+    isDead: false,
+    specificity: 0,
+    hash: "",
+    source: {},
+    history: [],
+    meta: {}
+  };
+  const matches = [];
+  for (const pattern of LAYOUT_PATTERNS) {
+    const match = matchPattern(rule, pattern);
+    if (match) matches.push(match);
+  }
+  return matches;
+}
+function suggestMacro(declarations) {
+  const matches = recognizeLayout(declarations);
+  if (matches.length === 0) return null;
+  const best = matches.sort((a, b) => b.confidence - a.confidence)[0];
+  return best.confidence >= 0.85 ? best.pattern.macro : null;
+}
+function getLayoutPatterns() {
+  return [...LAYOUT_PATTERNS];
+}
+var layoutIntelligence = {
+  recognize: recognizeLayout,
+  suggestMacro,
+  getPatterns: getLayoutPatterns,
+  pass: layoutIntelligencePass,
+  patterns: LAYOUT_PATTERNS
+};
+
+// src/compiler/responsive-inference.ts
+var MOBILE_BREAKPOINT = 768;
+var TABLET_BREAKPOINT = 1024;
+var LARGE_FONT_THRESHOLD = 32;
+var LARGE_PADDING_THRESHOLD = 48;
+var LARGE_GAP_THRESHOLD = 32;
+var MAX_GRID_COLUMNS = 2;
+function detectFixedWidth(rule) {
+  const issues = [];
+  for (const decl of rule.declarations) {
+    if ((decl.property === "width" || decl.property === "max-width") && typeof decl.value === "string") {
+      const pxMatch = decl.value.match(/^(\d+(\.\d+)?)px$/);
+      if (pxMatch) {
+        const px = parseFloat(pxMatch[1]);
+        if (px > MOBILE_BREAKPOINT) {
+          issues.push({
+            ruleId: rule.id,
+            selector: rule.selector,
+            property: decl.property,
+            currentValue: decl.value,
+            severity: px > TABLET_BREAKPOINT ? "error" : "warning",
+            category: "overflow",
+            message: "Fixed " + decl.property + ": " + decl.value + " will overflow on viewports < " + px + "px",
+            suggestedFix: decl.property + ": min(100%, " + decl.value + ");",
+            autoFixAvailable: true,
+            affectedViewports: ["mobile", "tablet"]
+          });
+        }
+      }
+    }
+  }
+  return issues;
+}
+function detectGridColumns(rule) {
+  const issues = [];
+  for (const decl of rule.declarations) {
+    if ((decl.property === "gridTemplateColumns" || decl.property === "grid-template-columns") && typeof decl.value === "string") {
+      const columns = decl.value.split(/\s+/).filter(
+        (c) => c.includes("fr") || c.includes("px") || c.includes("%")
+      );
+      const explicitColumns = columns.length;
+      if (explicitColumns > MAX_GRID_COLUMNS) {
+        const isFixed = columns.every((c) => c.includes("px"));
+        const suggestion = isFixed ? "repeat(auto-fit, minmax(" + columns[0] + ", 1fr))" : "repeat(auto-fit, minmax(250px, 1fr))";
+        issues.push({
+          ruleId: rule.id,
+          selector: rule.selector,
+          property: decl.property,
+          currentValue: decl.value,
+          severity: explicitColumns >= 4 ? "error" : "warning",
+          category: "grid",
+          message: explicitColumns + " columns will not fit on mobile screens (\u2264 " + MOBILE_BREAKPOINT + "px)",
+          suggestedFix: "grid-template-columns: " + suggestion + ";",
+          autoFixAvailable: true,
+          affectedViewports: ["mobile"]
+        });
+      }
+    }
+    if ((decl.property === "gridTemplateColumns" || decl.property === "grid-template-columns") && typeof decl.value === "string" && decl.value.includes("auto-fit") && !decl.value.includes("minmax")) {
+      issues.push({
+        ruleId: rule.id,
+        selector: rule.selector,
+        property: decl.property,
+        currentValue: decl.value,
+        severity: "info",
+        category: "grid",
+        message: "auto-fit without minmax() may collapse to 0 on empty containers. Consider: repeat(auto-fit, minmax(250px, 1fr))",
+        suggestedFix: "grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));",
+        autoFixAvailable: true,
+        affectedViewports: ["all"]
+      });
+    }
+  }
+  return issues;
+}
+function detectLargeTypography(rule) {
+  const issues = [];
+  for (const decl of rule.declarations) {
+    if ((decl.property === "fontSize" || decl.property === "font-size") && typeof decl.value === "string") {
+      const pxMatch = decl.value.match(/^(\d+(\.\d+)?)px$/);
+      if (pxMatch) {
+        const px = parseFloat(pxMatch[1]);
+        if (px > LARGE_FONT_THRESHOLD) {
+          const minSize = Math.round(px * 0.5);
+          issues.push({
+            ruleId: rule.id,
+            selector: rule.selector,
+            property: decl.property,
+            currentValue: decl.value,
+            severity: "warning",
+            category: "typography",
+            message: "font-size: " + decl.value + " may be too large on mobile. Consider responsive scaling.",
+            suggestedFix: "font-size: clamp(" + minSize + "px, " + Math.round(px / TABLET_BREAKPOINT * 100) + "vw, " + px + "px);",
+            autoFixAvailable: true,
+            affectedViewports: ["mobile", "tablet"]
+          });
+        }
+      }
+    }
+  }
+  return issues;
+}
+function detectLargeSpacing(rule) {
+  const issues = [];
+  for (const decl of rule.declarations) {
+    if ((decl.property === "padding" || decl.property.startsWith("padding")) && typeof decl.value === "string") {
+      const pxMatch = decl.value.match(/^(\d+(\.\d+)?)px$/);
+      if (pxMatch) {
+        const px = parseFloat(pxMatch[1]);
+        if (px > LARGE_PADDING_THRESHOLD) {
+          issues.push({
+            ruleId: rule.id,
+            selector: rule.selector,
+            property: decl.property,
+            currentValue: decl.value,
+            severity: "info",
+            category: "spacing",
+            message: decl.property + ": " + decl.value + " may be excessive on mobile. Consider reducing to " + Math.round(px * 0.5) + "px on small screens.",
+            suggestedFix: "@media (max-width: 768px) { " + rule.selector + " { " + decl.property + ": " + Math.round(px * 0.5) + "px; } }",
+            autoFixAvailable: true,
+            affectedViewports: ["mobile"]
+          });
+        }
+      }
+    }
+  }
+  return issues;
+}
+function detectViewportUnits(rule) {
+  const issues = [];
+  for (const decl of rule.declarations) {
+    if ((decl.property === "height" || decl.property === "min-height") && typeof decl.value === "string" && decl.value.includes("100vh")) {
+      issues.push({
+        ruleId: rule.id,
+        selector: rule.selector,
+        property: decl.property,
+        currentValue: decl.value,
+        severity: "warning",
+        category: "viewport",
+        message: "100vh can cause issues on mobile browsers with dynamic toolbars. Consider 100dvh instead.",
+        suggestedFix: decl.property + ": 100dvh;",
+        autoFixAvailable: true,
+        affectedViewports: ["mobile"]
+      });
+    }
+  }
+  return issues;
+}
+function detectLargeGaps(rule) {
+  const issues = [];
+  for (const decl of rule.declarations) {
+    if ((decl.property === "gap" || decl.property === "grid-gap") && typeof decl.value === "string") {
+      const pxMatch = decl.value.match(/^(\d+(\.\d+)?)px$/);
+      if (pxMatch) {
+        const px = parseFloat(pxMatch[1]);
+        if (px > LARGE_GAP_THRESHOLD) {
+          issues.push({
+            ruleId: rule.id,
+            selector: rule.selector,
+            property: decl.property,
+            currentValue: decl.value,
+            severity: "info",
+            category: "spacing",
+            message: "gap: " + decl.value + " may be too large on mobile. Consider reducing to " + Math.round(px * 0.5) + "px on small screens.",
+            suggestedFix: "@media (max-width: 768px) { " + rule.selector + " { gap: " + Math.round(px * 0.5) + "px; } }",
+            autoFixAvailable: true,
+            affectedViewports: ["mobile"]
+          });
+        }
+      }
+    }
+  }
+  return issues;
+}
+var responsiveInferencePass = (ir) => {
+  const allIssues = [];
+  for (const rule of ir.rules) {
+    if (rule.isDead) continue;
+    allIssues.push(...detectFixedWidth(rule));
+    allIssues.push(...detectGridColumns(rule));
+    allIssues.push(...detectLargeTypography(rule));
+    allIssues.push(...detectLargeSpacing(rule));
+    allIssues.push(...detectViewportUnits(rule));
+    allIssues.push(...detectLargeGaps(rule));
+  }
+  for (const issue of allIssues) {
+    ir.diagnostics.push({
+      id: "responsive-" + issue.category + "-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6),
+      nodeId: issue.ruleId,
+      severity: issue.severity,
+      message: issue.message,
+      suggestion: issue.suggestedFix,
+      pass: "responsive-inference"
+    });
+  }
+  ir.meta = ir.meta || {};
+  ir.meta.responsiveIssues = allIssues;
+  return ir;
+};
+function analyzeResponsive(selector, declarations) {
+  const rule = {
+    id: "temp-responsive",
+    selector,
+    declarations: Object.entries(declarations).map(([prop, value]) => ({
+      id: "temp-" + prop,
+      property: prop,
+      value,
+      history: [],
+      meta: {}
+    })),
+    pseudoClasses: [],
+    atRules: [],
+    nestedRules: [],
+    conditions: [],
+    isDead: false,
+    specificity: 0,
+    hash: "",
+    source: {},
+    history: [],
+    meta: {}
+  };
+  return [
+    ...detectFixedWidth(rule),
+    ...detectGridColumns(rule),
+    ...detectLargeTypography(rule),
+    ...detectLargeSpacing(rule),
+    ...detectViewportUnits(rule),
+    ...detectLargeGaps(rule)
+  ];
+}
+function generateResponsiveReport(issues) {
+  const critical = issues.filter((i) => i.severity === "error");
+  const warnings = issues.filter((i) => i.severity === "warning");
+  const info = issues.filter((i) => i.severity === "info");
+  let summary;
+  if (issues.length === 0) {
+    summary = "\u2705 No responsive issues detected.";
+  } else if (critical.length > 0) {
+    summary = "\u274C " + critical.length + " critical, " + warnings.length + " warnings, " + info.length + " suggestions.";
+  } else if (warnings.length > 0) {
+    summary = "\u26A0\uFE0F " + warnings.length + " warnings, " + info.length + " suggestions.";
+  } else {
+    summary = "\u{1F4A1} " + info.length + " responsive suggestions.";
+  }
+  return {
+    issues,
+    criticalCount: critical.length,
+    warningCount: warnings.length,
+    infoCount: info.length,
+    summary
+  };
+}
+function autoFixIssue(issue) {
+  return issue.suggestedFix;
+}
+function autoFixAll(issues) {
+  return issues.filter((i) => i.autoFixAvailable).map((i) => i.suggestedFix);
+}
+var responsiveInference = {
+  analyze: analyzeResponsive,
+  report: generateResponsiveReport,
+  autoFix: autoFixIssue,
+  autoFixAll,
+  pass: responsiveInferencePass
+};
+
+// src/compiler/pattern-learner.ts
+import crypto6 from "crypto";
+function fingerprintDeclarations(declarations) {
+  const sorted = [...declarations].sort((a, b) => a.property.localeCompare(b.property));
+  const properties = {};
+  const propertyList = [];
+  for (const decl of sorted) {
+    properties[decl.property] = decl.value;
+    propertyList.push(decl.property + ":" + decl.value);
+  }
+  const signature = propertyList.join("; ");
+  const hash = crypto6.createHash("md5").update(signature).digest("hex").slice(0, 12);
+  return {
+    hash,
+    signature,
+    properties,
+    propertyCount: sorted.length
+  };
+}
+function clusterPatterns(rules, options = {}) {
+  const minProperties = options.minProperties || 3;
+  const minFrequency = options.minFrequency || 2;
+  const groups = /* @__PURE__ */ new Map();
+  for (const rule of rules) {
+    if (rule.isDead) continue;
+    if (rule.declarations.length < minProperties) continue;
+    const fp = fingerprintDeclarations(rule.declarations);
+    const existing = groups.get(fp.hash);
+    if (existing) {
+      existing.occurrences.push({
+        ruleId: rule.id,
+        selector: rule.selector,
+        sourceFile: rule.source.file,
+        component: rule.source.component
+      });
+      if (rule.source.file) existing.files.add(rule.source.file);
+    } else {
+      groups.set(fp.hash, {
+        fingerprint: fp,
+        occurrences: [{
+          ruleId: rule.id,
+          selector: rule.selector,
+          sourceFile: rule.source.file,
+          component: rule.source.component
+        }],
+        files: new Set(rule.source.file ? [rule.source.file] : [])
+      });
+    }
+  }
+  const clusters = [];
+  for (const [, group] of groups) {
+    if (group.occurrences.length < minFrequency) continue;
+    const frequency = group.occurrences.length;
+    const score = frequency * group.fingerprint.propertyCount;
+    const suggestedName = generatePatternName(group.fingerprint.properties);
+    const declarations = frequency * group.fingerprint.propertyCount;
+    const linesEliminated = declarations - 1;
+    const bundleReduction = estimateBundleSavings(declarations, frequency);
+    clusters.push({
+      fingerprint: group.fingerprint,
+      occurrences: group.occurrences,
+      frequency,
+      fileCount: group.files.size,
+      score,
+      suggestedName,
+      suggestedRecipe: generateRecipeCode(suggestedName, group.fingerprint.properties),
+      savings: {
+        declarations,
+        linesEliminated,
+        bundleReduction
+      }
+    });
+  }
+  clusters.sort((a, b) => b.score - a.score);
+  return clusters;
+}
+function generatePatternName(properties) {
+  const keys = Object.keys(properties);
+  if (hasAll(keys, ["display", "justifyContent", "alignItems"]) && properties["display"] === "flex") {
+    return "flexCenter";
+  }
+  if (hasAll(keys, ["display", "flexDirection", "justifyContent", "alignItems"]) && properties["flexDirection"] === "column") {
+    return "stack";
+  }
+  if (hasAll(keys, ["padding", "borderRadius", "backgroundColor", "color"])) {
+    const bg = String(properties["backgroundColor"] || "");
+    if (bg.includes("2563eb") || bg.includes("blue")) return "primaryButton";
+    if (bg.includes("e5e7eb") || bg.includes("gray")) return "secondaryButton";
+    return "button";
+  }
+  if (hasAll(keys, ["position", "top"]) && properties["position"] === "sticky") {
+    return "stickyHeader";
+  }
+  if (hasAll(keys, ["position", "top", "left"]) && properties["position"] === "absolute") {
+    return "absoluteOverlay";
+  }
+  if (hasAll(keys, ["borderRadius"]) && properties["borderRadius"] === "9999px") {
+    return "pill";
+  }
+  if (hasAll(keys, ["overflow", "textOverflow", "whiteSpace"])) {
+    return "truncate";
+  }
+  if (hasAll(keys, ["backdropFilter"])) {
+    return "glass";
+  }
+  if (keys.includes("display")) return String(properties["display"]) + "Layout";
+  if (keys.includes("position")) return String(properties["position"]) + "Element";
+  return "pattern-" + keys.slice(0, 3).join("-");
+}
+function hasAll(haystack, needles) {
+  return needles.every((n) => haystack.includes(n));
+}
+function generateRecipeCode(name, properties) {
+  const lines = Object.entries(properties).map(
+    ([prop, value]) => "  " + prop + ": '" + value + "',"
+  );
+  return "chain.recipe('" + name + "', {\n" + lines.join("\n") + "\n})";
+}
+function estimateBundleSavings(declarations, frequency) {
+  const avgBytesPerDecl = 25;
+  const totalBytes = declarations * avgBytesPerDecl;
+  if (totalBytes > 1e4) return "~" + Math.round(totalBytes / 1e3) + "KB";
+  return "~" + totalBytes + "B";
+}
+function generateReport(clusters) {
+  const highValue = clusters.filter((c) => c.score >= 10);
+  const totalDeclarations = clusters.reduce((sum, c) => sum + c.savings.declarations, 0);
+  const totalBytes = totalDeclarations * 25;
+  let summary;
+  if (clusters.length === 0) {
+    summary = "No repeated patterns found. Your styles are already unique!";
+  } else if (highValue.length > 0) {
+    summary = "Found " + clusters.length + " patterns. " + highValue.length + " high-value patterns worth extracting.";
+  } else {
+    summary = "Found " + clusters.length + " patterns. None high-value enough to suggest extraction yet.";
+  }
+  return {
+    clusters,
+    totalPatterns: clusters.length,
+    highValuePatterns: highValue,
+    totalSavings: {
+      declarations: totalDeclarations,
+      estimatedBytes: totalBytes
+    },
+    summary
+  };
+}
+var patternLearningPass = (ir) => {
+  const clusters = clusterPatterns(ir.rules, {
+    minProperties: 3,
+    minFrequency: 2
+  });
+  if (clusters.length === 0) return ir;
+  for (const cluster of clusters.slice(0, 5)) {
+    ir.diagnostics.push({
+      id: "pattern-" + cluster.fingerprint.hash,
+      nodeId: ir.rules[0]?.id || ir.id,
+      severity: "info",
+      message: 'Pattern "' + cluster.suggestedName + '" found ' + cluster.frequency + " times across " + cluster.fileCount + " files. " + cluster.savings.bundleReduction + " potential savings.",
+      suggestion: cluster.suggestedRecipe,
+      pass: "pattern-learner"
+    });
+  }
+  ir.meta = ir.meta || {};
+  ir.meta.patternClusters = clusters;
+  ir.meta.learningReport = generateReport(clusters);
+  return ir;
+};
+function learnPatterns(rules, options) {
+  const irRules = rules.map((r) => ({
+    id: "learn-" + Math.random().toString(36).slice(2, 8),
+    selector: r.selector,
+    declarations: Object.entries(r.declarations).map(([prop, value]) => ({
+      id: "learn-decl-" + prop,
+      property: prop,
+      value,
+      history: [],
+      meta: {}
+    })),
+    pseudoClasses: [],
+    atRules: [],
+    nestedRules: [],
+    conditions: [],
+    isDead: false,
+    specificity: 0,
+    hash: "",
+    source: { file: r.sourceFile },
+    history: [],
+    meta: {}
+  }));
+  const clusters = clusterPatterns(irRules, options);
+  return generateReport(clusters);
+}
+function getExtractionCandidates(rules, minScore) {
+  const report = learnPatterns(rules);
+  const threshold = minScore || 10;
+  return report.clusters.filter((c) => c.score >= threshold);
+}
+var patternLearner = {
+  learn: learnPatterns,
+  extract: getExtractionCandidates,
+  fingerprint: fingerprintDeclarations,
+  cluster: clusterPatterns,
+  report: generateReport,
+  pass: patternLearningPass
+};
+
+// src/compiler/source-optimizer.ts
+function findDuplicates2(rules) {
+  const signatureMap = /* @__PURE__ */ new Map();
+  for (const rule of rules) {
+    if (rule.isDead) continue;
+    if (rule.declarations.length < 3) continue;
+    const sorted = [...rule.declarations].sort((a, b) => a.property.localeCompare(b.property));
+    const signature = sorted.map((d) => d.property + ":" + d.value).join(";");
+    const existing = signatureMap.get(signature);
+    if (existing) {
+      existing.occurrences.push({
+        selector: rule.selector,
+        file: rule.source.file,
+        line: rule.source.line,
+        component: rule.source.component
+      });
+      existing.count++;
+      existing.savingsBytes += estimateRuleBytes(rule);
+    } else {
+      signatureMap.set(signature, {
+        signature,
+        occurrences: [{
+          selector: rule.selector,
+          file: rule.source.file,
+          line: rule.source.line,
+          component: rule.source.component
+        }],
+        count: 1,
+        suggestion: "",
+        savingsBytes: 0
+      });
+    }
+  }
+  const duplicates = [];
+  for (const [, group] of signatureMap) {
+    if (group.count >= 2) {
+      group.suggestion = generateExtractSuggestion(group);
+      duplicates.push(group);
+    }
+  }
+  return duplicates.sort((a, b) => b.savingsBytes - a.savingsBytes);
+}
+function estimateRuleBytes(rule) {
+  let bytes = rule.selector.length + 3;
+  for (const decl of rule.declarations) {
+    bytes += decl.property.length + String(decl.value).length + 6;
+  }
+  return bytes;
+}
+function generateExtractSuggestion(group) {
+  const selectors = group.occurrences.map((o) => o.selector).join(", ");
+  const files = [...new Set(group.occurrences.map((o) => o.file).filter(Boolean))];
+  return "Extract as shared recipe or component. Found in: " + (files.length > 0 ? files.join(", ") : selectors);
+}
+function findDeadRules(rules) {
+  const dead = [];
+  for (const rule of rules) {
+    if (!rule.isDead) continue;
+    dead.push({
+      ruleId: rule.id,
+      selector: rule.selector,
+      file: rule.source.file,
+      line: rule.source.line,
+      reason: rule.meta.deathReason || "Marked as dead by optimization pass",
+      bytesWasted: estimateRuleBytes(rule)
+    });
+  }
+  return dead;
+}
+function findSpecificityConflicts(rules) {
+  const conflicts = [];
+  const alive = rules.filter((r) => !r.isDead);
+  for (let i = 0; i < alive.length; i++) {
+    for (let j = i + 1; j < alive.length; j++) {
+      const a = alive[i];
+      const b = alive[j];
+      if (!selectorsOverlap(a.selector, b.selector)) continue;
+      const aProps = new Set(a.declarations.map((d) => d.property));
+      const bProps = new Set(b.declarations.map((d) => d.property));
+      const overlap = [...aProps].filter((p) => bProps.has(p));
+      if (overlap.length === 0) continue;
+      const diff = Math.abs(a.specificity - b.specificity);
+      if (diff >= 100) {
+        const higher = a.specificity > b.specificity ? a : b;
+        const lower = a.specificity > b.specificity ? b : a;
+        conflicts.push({
+          higher: {
+            selector: higher.selector,
+            specificity: higher.specificity,
+            file: higher.source.file,
+            line: higher.source.line
+          },
+          lower: {
+            selector: lower.selector,
+            specificity: lower.specificity,
+            file: lower.source.file,
+            line: lower.source.line
+          },
+          property: overlap[0],
+          severity: diff >= 1e4 ? "warning" : "info"
+        });
+      }
+    }
+  }
+  return conflicts;
+}
+function 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.startsWith(".") && pb.startsWith(".") && pa === pb) return true;
+      if (pa === pb && !pa.startsWith(".") && !pa.startsWith("#")) return true;
+    }
+  }
+  return false;
+}
+function findAnimationConflicts(rules) {
+  const animationMap = /* @__PURE__ */ new Map();
+  for (const rule of rules) {
+    if (rule.isDead) continue;
+    for (const atRule of rule.atRules) {
+      if (atRule.type === "keyframes" && atRule.name) {
+        const existing = animationMap.get(atRule.name);
+        if (existing) {
+          existing.locations.push({
+            file: rule.source.file,
+            line: rule.source.line,
+            selector: rule.selector
+          });
+          existing.count++;
+        } else {
+          animationMap.set(atRule.name, {
+            name: atRule.name,
+            locations: [{
+              file: rule.source.file,
+              line: rule.source.line,
+              selector: rule.selector
+            }],
+            count: 1
+          });
+        }
+      }
+    }
+  }
+  return [...animationMap.values()].filter((a) => a.count >= 2);
+}
+function findMediaQueryRedundancies(rules) {
+  const queryMap = /* @__PURE__ */ new Map();
+  for (const rule of rules) {
+    if (rule.isDead) continue;
+    for (const atRule of rule.atRules) {
+      if (atRule.type === "media" && atRule.query) {
+        const normalized = atRule.query.replace(/\s+/g, " ").trim();
+        const existing = queryMap.get(normalized);
+        if (existing) {
+          existing.count++;
+          if (rule.source.file) existing.files.add(rule.source.file);
+        } else {
+          queryMap.set(normalized, {
+            count: 1,
+            files: new Set(rule.source.file ? [rule.source.file] : [])
+          });
+        }
+      }
+    }
+  }
+  const redundancies = [];
+  for (const [query, data] of queryMap) {
+    if (data.count >= 3) {
+      redundancies.push({
+        query,
+        count: data.count,
+        files: [...data.files],
+        suggestion: "Extract as shared breakpoint: $breakpoints." + generateBreakpointName(query),
+        savingsBytes: estimateMQSavings(query, data.count)
+      });
+    }
+  }
+  return redundancies.sort((a, b) => b.savingsBytes - a.savingsBytes);
+}
+function generateBreakpointName(query) {
+  if (query.includes("768")) return "md";
+  if (query.includes("1024")) return "lg";
+  if (query.includes("1280")) return "xl";
+  if (query.includes("640")) return "sm";
+  return "custom";
+}
+function estimateMQSavings(query, count) {
+  const queryBytes = query.length + 12;
+  return (count - 1) * queryBytes;
+}
+function formatReport(report) {
+  const lines = [
+    "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550",
+    "  ChainCSS Source-Aware Optimization Report",
+    "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550",
+    ""
+  ];
+  if (report.duplicates.length > 0) {
+    lines.push("\u{1F501} DUPLICATES (" + report.duplicates.length + " found)");
+    for (const dup of report.duplicates.slice(0, 5)) {
+      const selectors = dup.occurrences.map((o) => o.selector).join(" = ");
+      lines.push("  \u2022 " + selectors);
+      lines.push("    \u2192 " + dup.suggestion);
+      lines.push("    \u2192 Savings: ~" + dup.savingsBytes + "B");
+    }
+    lines.push("");
+  }
+  if (report.deadRules.length > 0) {
+    lines.push("\u{1F480} DEAD CODE (" + report.deadRules.length + " rules, ~" + report.deadRules.reduce((s2, d) => s2 + d.bytesWasted, 0) + "B)");
+    for (const dead of report.deadRules.slice(0, 5)) {
+      const location = dead.file ? dead.file + (dead.line ? ":" + dead.line : "") : "unknown";
+      lines.push("  \u2022 " + dead.selector + " (" + location + ") \u2014 " + dead.reason);
+    }
+    lines.push("");
+  }
+  if (report.specificityConflicts.length > 0) {
+    lines.push("\u2694\uFE0F SPECIFICITY WARS (" + report.specificityConflicts.length + " conflicts)");
+    for (const conflict of report.specificityConflicts.slice(0, 5)) {
+      lines.push("  \u2022 " + conflict.higher.selector + " (" + conflict.higher.specificity + ")");
+      lines.push("    overrides: " + conflict.lower.selector + " (" + conflict.lower.specificity + ")");
+      if (conflict.property) lines.push("    Property: " + conflict.property);
+    }
+    lines.push("");
+  }
+  if (report.animationConflicts.length > 0) {
+    lines.push("\u{1F3AC} ANIMATION CONFLICTS (" + report.animationConflicts.length + " found)");
+    for (const ac of report.animationConflicts.slice(0, 5)) {
+      lines.push("  \u2022 @keyframes " + ac.name + " \u2014 defined " + ac.count + " times");
+      for (const loc of ac.locations) {
+        lines.push("    " + (loc.file || "unknown") + " \u2192 " + loc.selector);
+      }
+    }
+    lines.push("");
+  }
+  if (report.mediaQueryRedundancies.length > 0) {
+    lines.push("\u{1F4F1} MEDIA QUERY CONSOLIDATION (" + report.mediaQueryRedundancies.length + " redundant)");
+    for (const mq of report.mediaQueryRedundancies.slice(0, 5)) {
+      lines.push("  \u2022 " + mq.query + " \u2014 used " + mq.count + " times");
+      lines.push("    \u2192 " + mq.suggestion);
+      lines.push("    \u2192 Savings: ~" + mq.savingsBytes + "B");
+    }
+    lines.push("");
+  }
+  const s = report.summary;
+  lines.push("\u{1F4CA} SUMMARY");
+  lines.push("  \u2022 " + s.duplicatesCount + " duplicates \u2192 extract recipes");
+  lines.push("  \u2022 " + s.deadCount + " dead rules \u2192 remove");
+  lines.push("  \u2022 " + s.specificityCount + " specificity issues \u2192 fix cascade");
+  lines.push("  \u2022 " + s.animationCount + " animation conflicts \u2192 scope names");
+  lines.push("  \u2022 " + s.mediaQueryCount + " redundant media queries \u2192 consolidate");
+  lines.push("  \u2022 Total potential savings: " + s.totalSavingsKB);
+  lines.push("");
+  lines.push("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
+  return lines.join("\n");
+}
+function generateOptimizationReport(rules) {
+  const duplicates = findDuplicates2(rules);
+  const deadRules = findDeadRules(rules);
+  const specificityConflicts = findSpecificityConflicts(rules);
+  const animationConflicts = findAnimationConflicts(rules);
+  const mediaQueryRedundancies = findMediaQueryRedundancies(rules);
+  const totalSavingsBytes = duplicates.reduce((s, d) => s + d.savingsBytes, 0) + deadRules.reduce((s, d) => s + d.bytesWasted, 0) + mediaQueryRedundancies.reduce((s, m) => s + m.savingsBytes, 0);
+  const report = {
+    duplicates,
+    deadRules,
+    specificityConflicts,
+    animationConflicts,
+    mediaQueryRedundancies,
+    summary: {
+      totalIssues: duplicates.length + deadRules.length + specificityConflicts.length + animationConflicts.length + mediaQueryRedundancies.length,
+      duplicatesCount: duplicates.length,
+      deadCount: deadRules.length,
+      specificityCount: specificityConflicts.length,
+      animationCount: animationConflicts.length,
+      mediaQueryCount: mediaQueryRedundancies.length,
+      totalSavingsBytes,
+      totalSavingsKB: totalSavingsBytes > 1e3 ? (totalSavingsBytes / 1e3).toFixed(1) + "KB" : totalSavingsBytes + "B"
+    },
+    formattedReport: ""
+  };
+  report.formattedReport = formatReport(report);
+  return report;
+}
+var sourceOptimizerPass = (ir) => {
+  const report = generateOptimizationReport(ir.rules);
+  for (const dup of report.duplicates.slice(0, 3)) {
+    ir.diagnostics.push({
+      id: "source-dup-" + Date.now(),
+      nodeId: ir.rules[0]?.id || ir.id,
+      severity: "warning",
+      message: "Duplicate: " + dup.occurrences.map((o) => o.selector).join(" = ") + " (" + dup.count + "\xD7)",
+      suggestion: dup.suggestion,
+      pass: "source-optimizer"
+    });
+  }
+  for (const dead of report.deadRules.slice(0, 3)) {
+    ir.diagnostics.push({
+      id: "source-dead-" + Date.now(),
+      nodeId: dead.ruleId,
+      severity: "info",
+      message: "Dead rule: " + dead.selector + " \u2014 " + dead.reason,
+      pass: "source-optimizer"
+    });
+  }
+  ir.meta = ir.meta || {};
+  ir.meta.optimizationReport = report;
+  return ir;
+};
+function optimizeSource(rules) {
+  return generateOptimizationReport(rules);
+}
+var sourceOptimizer = {
+  optimize: optimizeSource,
+  findDuplicates: findDuplicates2,
+  findDeadRules,
+  findSpecificityConflicts,
+  findAnimationConflicts,
+  findMediaQueryRedundancies,
+  report: generateOptimizationReport,
+  format: formatReport,
+  pass: sourceOptimizerPass
+};
+
+// src/compiler/semantic-tokens.ts
+var DEFAULT_THEME = {
+  // --- SURFACES ---
+  surface: {
+    interactive: {
+      properties: {
+        backgroundColor: "$colors.primary.500",
+        color: "$colors.white",
+        borderRadius: "$radii.md",
+        cursor: "pointer",
+        transition: "all 0.2s ease"
+      },
+      description: "Clickable surface \u2014 buttons, CTAs, links"
+    },
+    container: {
+      properties: {
+        backgroundColor: "$colors.neutral.100",
+        color: "$colors.neutral.900",
+        borderRadius: "$radii.lg",
+        border: "1px solid $colors.neutral.200"
+      },
+      description: "Content container \u2014 cards, sections, panels"
+    },
+    overlay: {
+      properties: {
+        backgroundColor: "$colors.white",
+        color: "$colors.neutral.900",
+        borderRadius: "$radii.xl",
+        boxShadow: "$shadows.xl",
+        zIndex: "50"
+      },
+      description: "Modal overlay \u2014 dialogs, drawers"
+    },
+    sheet: {
+      properties: {
+        backgroundColor: "$colors.neutral.50",
+        color: "$colors.neutral.800",
+        borderRadius: "$radii.lg $radii.lg 0 0",
+        boxShadow: "$shadows.lg"
+      },
+      description: "Bottom sheet \u2014 mobile menus, action sheets"
+    },
+    tooltip: {
+      properties: {
+        backgroundColor: "$colors.neutral.900",
+        color: "$colors.white",
+        borderRadius: "$radii.sm",
+        padding: "4px 8px",
+        fontSize: "12px",
+        boxShadow: "$shadows.md"
+      },
+      description: "Tooltip \u2014 hover information popups"
+    },
+    input: {
+      properties: {
+        backgroundColor: "$colors.white",
+        color: "$colors.neutral.900",
+        borderRadius: "$radii.md",
+        border: "1px solid $colors.neutral.300",
+        padding: "8px 12px"
+      },
+      description: "Input field \u2014 text inputs, selects, textareas"
+    }
+  },
+  // --- TEXT ---
+  text: {
+    primary: {
+      properties: {
+        color: "$colors.neutral.900",
+        fontWeight: "400"
+      },
+      description: "Primary body text \u2014 main content"
+    },
+    secondary: {
+      properties: {
+        color: "$colors.neutral.600",
+        fontWeight: "400"
+      },
+      description: "Secondary text \u2014 descriptions, captions"
+    },
+    muted: {
+      properties: {
+        color: "$colors.neutral.400",
+        fontSize: "14px",
+        fontWeight: "400"
+      },
+      description: "Muted text \u2014 placeholders, hints, meta info"
+    },
+    link: {
+      properties: {
+        color: "$colors.primary.500",
+        fontWeight: "500",
+        textDecoration: "underline",
+        cursor: "pointer"
+      },
+      description: "Link text \u2014 hyperlinks, navigational text"
+    },
+    inverse: {
+      properties: {
+        color: "$colors.white",
+        fontWeight: "500"
+      },
+      description: "Inverse text \u2014 text on dark backgrounds"
+    },
+    code: {
+      properties: {
+        fontFamily: "monospace",
+        fontSize: "14px",
+        color: "$colors.neutral.800",
+        backgroundColor: "$colors.neutral.100",
+        borderRadius: "$radii.sm",
+        padding: "2px 6px"
+      },
+      description: "Code text \u2014 inline code, code blocks"
+    }
+  },
+  // --- ELEVATION ---
+  elevation: {
+    flat: {
+      properties: {
+        boxShadow: "none",
+        zIndex: "0"
+      },
+      description: "Flat \u2014 no elevation, base level"
+    },
+    raised: {
+      properties: {
+        boxShadow: "$shadows.sm",
+        zIndex: "10"
+      },
+      description: "Raised \u2014 subtle lift, cards on light backgrounds"
+    },
+    floating: {
+      properties: {
+        boxShadow: "$shadows.md",
+        zIndex: "20"
+      },
+      description: "Floating \u2014 dropdowns, popovers"
+    },
+    sticky: {
+      properties: {
+        boxShadow: "$shadows.md",
+        zIndex: "30",
+        position: "sticky",
+        top: "0"
+      },
+      description: "Sticky \u2014 sticky headers, persistent nav"
+    },
+    overlay: {
+      properties: {
+        boxShadow: "$shadows.xl",
+        zIndex: "50",
+        position: "fixed"
+      },
+      description: "Overlay \u2014 modals, dialogs"
+    },
+    modal: {
+      properties: {
+        boxShadow: "$shadows.2xl",
+        zIndex: "100",
+        position: "fixed",
+        backdropFilter: "blur(4px)"
+      },
+      description: "Modal \u2014 full-screen overlay with backdrop"
+    }
+  },
+  // --- STATES ---
+  state: {
+    hover: {
+      properties: {
+        filter: "brightness(1.1)",
+        transition: "filter 0.2s ease"
+      },
+      pseudoClass: "hover",
+      description: "Hover state \u2014 slight brightening"
+    },
+    active: {
+      properties: {
+        filter: "brightness(0.95)",
+        transform: "scale(0.98)",
+        transition: "all 0.1s ease"
+      },
+      pseudoClass: "active",
+      description: "Active/pressed state \u2014 slight darkening + press"
+    },
+    focus: {
+      properties: {
+        outline: "2px solid $colors.primary.500",
+        outlineOffset: "2px"
+      },
+      pseudoClass: "focus-visible",
+      description: "Focus state \u2014 accessible focus ring"
+    },
+    disabled: {
+      properties: {
+        opacity: "0.5",
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      },
+      pseudoClass: "disabled",
+      description: "Disabled state \u2014 reduced opacity, no interaction"
+    },
+    loading: {
+      properties: {
+        cursor: "wait",
+        opacity: "0.7",
+        pointerEvents: "none"
+      },
+      description: "Loading state \u2014 waiting cursor, partially transparent"
+    },
+    selected: {
+      properties: {
+        backgroundColor: "$colors.primary.50",
+        color: "$colors.primary.700",
+        fontWeight: "600"
+      },
+      pseudoClass: "selected",
+      description: "Selected state \u2014 highlighted background"
+    }
+  },
+  // --- SPACING ---
+  spacing: {
+    none: {
+      properties: { padding: "0", gap: "0" },
+      description: "No spacing"
+    },
+    tight: {
+      properties: { padding: "4px 8px", gap: "4px" },
+      description: "Tight spacing \u2014 icon buttons, chips, badges"
+    },
+    compact: {
+      properties: { padding: "8px 12px", gap: "8px" },
+      description: "Compact spacing \u2014 dense lists, toolbars"
+    },
+    comfortable: {
+      properties: { padding: "12px 16px", gap: "12px" },
+      description: "Comfortable spacing \u2014 form fields, cards (default)"
+    },
+    spacious: {
+      properties: { padding: "24px 32px", gap: "24px" },
+      description: "Spacious spacing \u2014 hero sections, feature cards"
+    },
+    generous: {
+      properties: { padding: "48px 64px", gap: "32px" },
+      description: "Generous spacing \u2014 landing pages, large sections"
+    }
+  }
+};
+var DARK_OVERRIDES = {
+  surface: {
+    interactive: { backgroundColor: "$colors.primary.400", color: "$colors.white" },
+    container: { backgroundColor: "$colors.neutral.800", color: "$colors.neutral.100", border: "1px solid $colors.neutral.700" },
+    overlay: { backgroundColor: "$colors.neutral.850", color: "$colors.neutral.100" },
+    sheet: { backgroundColor: "$colors.neutral.800", color: "$colors.neutral.100" },
+    input: { backgroundColor: "$colors.neutral.800", color: "$colors.neutral.100", border: "1px solid $colors.neutral.600" }
+  },
+  text: {
+    primary: { color: "$colors.neutral.100" },
+    secondary: { color: "$colors.neutral.400" },
+    muted: { color: "$colors.neutral.500" },
+    inverse: { color: "$colors.neutral.900" },
+    code: { backgroundColor: "$colors.neutral.800", color: "$colors.neutral.200" }
+  }
+};
+var HIGH_CONTRAST_OVERRIDES = {
+  surface: {
+    interactive: { backgroundColor: "$colors.black", color: "$colors.white", border: "2px solid $colors.white" },
+    container: { backgroundColor: "$colors.white", color: "$colors.black", border: "2px solid $colors.black" },
+    input: { backgroundColor: "$colors.white", color: "$colors.black", border: "2px solid $colors.black" }
+  },
+  text: {
+    primary: { color: "$colors.black", fontWeight: "500" },
+    secondary: { color: "$colors.neutral.800", fontWeight: "500" },
+    muted: { color: "$colors.neutral.700" },
+    link: { color: "$colors.blue.800", textDecoration: "underline" }
+  }
+};
+function resolveSemantic(category, intent2, themeContext = { mode: "light" }) {
+  const baseMap = DEFAULT_THEME[category];
+  if (!baseMap) return null;
+  const mapping = baseMap[intent2];
+  if (!mapping) return null;
+  const properties = { ...mapping.properties };
+  if (themeContext.mode === "dark" && DARK_OVERRIDES[category]?.[intent2]) {
+    Object.assign(properties, DARK_OVERRIDES[category][intent2]);
+  }
+  if (themeContext.mode === "high-contrast" && HIGH_CONTRAST_OVERRIDES[category]?.[intent2]) {
+    Object.assign(properties, HIGH_CONTRAST_OVERRIDES[category][intent2]);
+  }
+  if (themeContext.containerContext === "dark" && category === "surface") {
+    if (intent2 === "interactive") {
+      properties.backgroundColor = "$colors.primary.300";
+    }
+  }
+  return {
+    properties,
+    pseudoClass: mapping.pseudoClass,
+    description: mapping.description
+  };
+}
+function getSemanticIntents(category) {
+  const map = DEFAULT_THEME[category];
+  return map ? Object.keys(map) : [];
+}
+function getSemanticDescription(category, intent2) {
+  return DEFAULT_THEME[category]?.[intent2]?.description || null;
+}
+var semanticTokensPass = (ir) => {
+  for (const rule of ir.rules) {
+    const semanticIntents = rule.meta._semantic || [];
+    for (const { category, intent: intent2, theme } of semanticIntents) {
+      const resolved = resolveSemantic(category, intent2, theme);
+      if (!resolved) continue;
+      for (const [prop, value] of Object.entries(resolved.properties)) {
+        const decl = createDeclaration(prop, value);
+        decl.history.push({
+          pass: "semantic-tokens",
+          action: "resolved-intent",
+          timestamp: Date.now(),
+          reason: category + ":" + intent2 + " \u2192 " + prop + ": " + value
+        });
+        decl.meta.semantic = { category, intent: intent2 };
+        if (resolved.pseudoClass) {
+          let pc = rule.pseudoClasses.find((p) => p.name === resolved.pseudoClass);
+          if (!pc) {
+            pc = {
+              id: "semantic-pc-" + Date.now(),
+              name: resolved.pseudoClass,
+              declarations: [],
+              source: rule.source,
+              history: []
+            };
+            rule.pseudoClasses.push(pc);
+          }
+          pc.declarations.push(decl);
+        } else {
+          rule.declarations.push(decl);
+        }
+      }
+    }
+  }
+  return ir;
+};
+var semanticTokens = {
+  resolve: resolveSemantic,
+  getIntents: getSemanticIntents,
+  getDescription: getSemanticDescription,
+  pass: semanticTokensPass,
+  theme: DEFAULT_THEME,
+  darkOverrides: DARK_OVERRIDES,
+  highContrastOverrides: HIGH_CONTRAST_OVERRIDES
+};
+
+// src/compiler/accessibility-engine.ts
+var WCAG = {
+  MIN_CONTRAST_AA: 4.5,
+  MIN_CONTRAST_AA_LARGE: 3,
+  MIN_CONTRAST_AAA: 7,
+  MIN_FONT_SIZE: 12,
+  // px
+  MIN_TOUCH_TARGET: 44,
+  // px
+  CRITERIA: {
+    contrast: "1.4.3 Contrast (Minimum) \u2014 AA",
+    fontSize: "1.4.4 Resize Text \u2014 AA",
+    touchTarget: "2.5.8 Target Size \u2014 AA",
+    focus: "2.4.7 Focus Visible \u2014 AA",
+    motion: "2.3.3 Animation from Interactions \u2014 AAA",
+    hoverOnly: "1.4.13 Content on Hover or Focus \u2014 AA",
+    colorOnly: "1.4.1 Use of Color \u2014 A"
+  }
+};
+function detectContrast(rule) {
+  const issues = [];
+  const color = rule.declarations.find(
+    (d) => d.property === "color" && typeof d.value === "string"
+  );
+  const bg = rule.declarations.find(
+    (d) => (d.property === "backgroundColor" || d.property === "background") && typeof d.value === "string"
+  );
+  if (color && bg) {
+    const ratio = contrastRatio(String(color.value), String(bg.value));
+    if (ratio > 0 && ratio < WCAG.MIN_CONTRAST_AA) {
+      issues.push({
+        ruleId: rule.id,
+        selector: rule.selector,
+        category: "contrast",
+        severity: "error",
+        wcagCriterion: WCAG.CRITERIA.contrast,
+        message: "Contrast ratio " + ratio.toFixed(1) + ":1 fails WCAG AA (needs " + WCAG.MIN_CONTRAST_AA + ":1)",
+        suggestion: "Darken text or lighten background. Current: " + color.value + " on " + bg.value,
+        autoFixable: false
+        // Can't auto-fix without knowing design intent
+      });
+    } else if (ratio > 0 && ratio < WCAG.MIN_CONTRAST_AAA) {
+      issues.push({
+        ruleId: rule.id,
+        selector: rule.selector,
+        category: "contrast",
+        severity: "warning",
+        wcagCriterion: WCAG.CRITERIA.contrast,
+        message: "Contrast ratio " + ratio.toFixed(1) + ":1 passes AA but fails AAA (" + WCAG.MIN_CONTRAST_AAA + ":1)",
+        suggestion: "Consider increasing contrast for better readability.",
+        autoFixable: false
+      });
+    }
+  }
+  return issues;
+}
+function detectMinimumFontSize(rule) {
+  const issues = [];
+  for (const decl of rule.declarations) {
+    if ((decl.property === "fontSize" || decl.property === "font-size") && typeof decl.value === "string") {
+      const pxMatch = decl.value.match(/^(\d+(\.\d+)?)px$/);
+      if (pxMatch) {
+        const px = parseFloat(pxMatch[1]);
+        if (px < WCAG.MIN_FONT_SIZE) {
+          issues.push({
+            ruleId: rule.id,
+            selector: rule.selector,
+            category: "font-size",
+            severity: "warning",
+            wcagCriterion: WCAG.CRITERIA.fontSize,
+            message: "font-size: " + decl.value + " is below WCAG minimum of " + WCAG.MIN_FONT_SIZE + "px",
+            suggestion: "font-size: max(" + WCAG.MIN_FONT_SIZE + "px, " + decl.value + ")",
+            autoFixable: true
+          });
+        }
+      }
+    }
+  }
+  return issues;
+}
+function detectTouchTargets(rule) {
+  const issues = [];
+  const isInteractive = rule.declarations.some(
+    (d) => d.property === "cursor" && d.value === "pointer"
+  );
+  const isButton = rule.selector.includes("btn") || rule.selector.includes("button");
+  const isLink = rule.selector.includes("link") || rule.selector.includes("a");
+  if (!isInteractive && !isButton && !isLink) return issues;
+  const width = rule.declarations.find(
+    (d) => (d.property === "width" || d.property === "min-width") && typeof d.value === "string"
+  );
+  const height = rule.declarations.find(
+    (d) => (d.property === "height" || d.property === "min-height") && typeof d.value === "string"
+  );
+  const hasWidthIssue = width && extractPx(String(width.value)) < WCAG.MIN_TOUCH_TARGET;
+  const hasHeightIssue = height && extractPx(String(height.value)) < WCAG.MIN_TOUCH_TARGET;
+  if (hasWidthIssue || hasHeightIssue) {
+    issues.push({
+      ruleId: rule.id,
+      selector: rule.selector,
+      category: "touch-target",
+      severity: "warning",
+      wcagCriterion: WCAG.CRITERIA.touchTarget,
+      message: 'Interactive element "' + rule.selector + '" may be too small for touch (needs \u2265 ' + WCAG.MIN_TOUCH_TARGET + "\xD7" + WCAG.MIN_TOUCH_TARGET + "px)",
+      suggestion: "Add min-width: " + WCAG.MIN_TOUCH_TARGET + "px; min-height: " + WCAG.MIN_TOUCH_TARGET + "px;",
+      autoFixable: true
+    });
+  }
+  return issues;
+}
+function detectMissingFocus(rule) {
+  const issues = [];
+  const isInteractive = rule.declarations.some(
+    (d) => d.property === "cursor" && d.value === "pointer"
+  );
+  if (!isInteractive) return issues;
+  const outline = rule.declarations.find(
+    (d) => d.property === "outline"
+  );
+  const hasFocusStyle = rule.pseudoClasses.some(
+    (pc) => (pc.name === "focus" || pc.name === "focus-visible") && pc.declarations.length > 0
+  );
+  if (outline && String(outline.value) === "none" && !hasFocusStyle) {
+    issues.push({
+      ruleId: rule.id,
+      selector: rule.selector,
+      category: "focus",
+      severity: "error",
+      wcagCriterion: WCAG.CRITERIA.focus,
+      message: '"' + rule.selector + '" has outline: none with no :focus-visible fallback',
+      suggestion: 'Add .focusVisible(c => c.outline("2px solid #3b82f6").outlineOffset("2px"))',
+      autoFixable: false
+    });
+  }
+  if (!outline && !hasFocusStyle && isInteractive) {
+    issues.push({
+      ruleId: rule.id,
+      selector: rule.selector,
+      category: "focus",
+      severity: "warning",
+      wcagCriterion: WCAG.CRITERIA.focus,
+      message: 'Interactive element "' + rule.selector + '" has no visible focus indicator',
+      suggestion: "Add :focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }",
+      autoFixable: true
+    });
+  }
+  return issues;
+}
+function detectMotionRespect(rule) {
+  const issues = [];
+  const hasAnimation = rule.declarations.some(
+    (d) => (d.property === "animation" || d.property === "animation-name") && typeof d.value === "string" && String(d.value) !== "none"
+  );
+  const hasTransition = rule.declarations.some(
+    (d) => d.property === "transition" && typeof d.value === "string"
+  );
+  const hasReducedMotionWrapper = rule.atRules.some(
+    (at) => at.type === "media" && at.query && at.query.includes("prefers-reduced-motion")
+  );
+  if ((hasAnimation || hasTransition) && !hasReducedMotionWrapper) {
+    issues.push({
+      ruleId: rule.id,
+      selector: rule.selector,
+      category: "motion",
+      severity: "warning",
+      wcagCriterion: WCAG.CRITERIA.motion,
+      message: 'Animations/transitions on "' + rule.selector + '" should respect prefers-reduced-motion',
+      suggestion: "Wrap in @media (prefers-reduced-motion: no-preference) { ... }",
+      autoFixable: true
+    });
+  }
+  return issues;
+}
+function detectHoverOnly(rule) {
+  const issues = [];
+  const hasHover = rule.pseudoClasses.some((pc) => pc.name === "hover");
+  const hasFocusVisible = rule.pseudoClasses.some(
+    (pc) => pc.name === "focus" || pc.name === "focus-visible"
+  );
+  if (hasHover && !hasFocusVisible) {
+    issues.push({
+      ruleId: rule.id,
+      selector: rule.selector,
+      category: "hover-only",
+      severity: "warning",
+      wcagCriterion: WCAG.CRITERIA.hoverOnly,
+      message: '"' + rule.selector + '" has hover styles but no :focus-visible fallback. Keyboard users cannot access this interaction.',
+      suggestion: "Add the same styles to :focus-visible for keyboard accessibility.",
+      autoFixable: true
+    });
+  }
+  return issues;
+}
+function extractPx(value) {
+  const match = value.match(/^(\d+(\.\d+)?)px$/);
+  return match ? parseFloat(match[1]) : Infinity;
+}
+function auditRule(rule) {
+  if (rule.isDead) return [];
+  return [
+    ...detectContrast(rule),
+    ...detectMinimumFontSize(rule),
+    ...detectTouchTargets(rule),
+    ...detectMissingFocus(rule),
+    ...detectMotionRespect(rule),
+    ...detectHoverOnly(rule)
+  ];
+}
+function generateAccessibilityReport(rules) {
+  const allIssues = [];
+  for (const rule of rules) {
+    allIssues.push(...auditRule(rule));
+  }
+  const errors = allIssues.filter((i) => i.severity === "error");
+  const warnings = allIssues.filter((i) => i.severity === "warning");
+  let summary;
+  if (allIssues.length === 0) {
+    summary = "\u2705 All accessibility checks passed.";
+  } else if (errors.length > 0) {
+    summary = "\u274C " + errors.length + " errors, " + warnings.length + " warnings \u2014 fix errors before shipping.";
+  } else {
+    summary = "\u26A0\uFE0F " + warnings.length + " warnings \u2014 recommended fixes available.";
+  }
+  return {
+    issues: allIssues,
+    errorCount: errors.length,
+    warningCount: warnings.length,
+    passedCount: rules.filter((r) => !r.isDead).length - allIssues.length,
+    summary
+  };
+}
+function autoFixFontSize(decl) {
+  return "max(" + WCAG.MIN_FONT_SIZE + "px, " + decl.value + ")";
+}
+function autoFixTouchTarget() {
+  return {
+    "min-width": WCAG.MIN_TOUCH_TARGET + "px",
+    "min-height": WCAG.MIN_TOUCH_TARGET + "px"
+  };
+}
+var accessibilityPass = (ir) => {
+  for (const rule of ir.rules) {
+    const issues = auditRule(rule);
+    for (const issue of issues) {
+      ir.diagnostics.push({
+        id: "a11y-" + issue.category + "-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6),
+        nodeId: issue.ruleId,
+        severity: issue.severity,
+        message: "[" + issue.wcagCriterion + "] " + issue.message,
+        suggestion: issue.suggestion,
+        pass: "accessibility"
+      });
+      if (issue.autoFixable) {
+        if (issue.category === "font-size") {
+          const decl = rule.declarations.find(
+            (d) => d.property === "fontSize" || d.property === "font-size"
+          );
+          if (decl) {
+            decl.value = autoFixFontSize(decl);
+            decl.history.push({
+              pass: "accessibility",
+              action: "auto-fix-min-font",
+              timestamp: Date.now(),
+              reason: issue.message
+            });
+          }
+        }
+        if (issue.category === "touch-target") {
+          const fixes = autoFixTouchTarget();
+          for (const [prop, value] of Object.entries(fixes)) {
+            rule.declarations.push({
+              id: "a11y-fix-" + Date.now(),
+              property: prop,
+              value,
+              history: [{
+                pass: "accessibility",
+                action: "auto-fix-touch-target",
+                timestamp: Date.now(),
+                reason: issue.message
+              }],
+              meta: { a11y: true }
+            });
+          }
+        }
+        if (issue.category === "focus" && issue.autoFixable) {
+          rule.pseudoClasses.push({
+            id: "a11y-focus-" + Date.now(),
+            name: "focus-visible",
+            declarations: [{
+              id: "a11y-focus-outline",
+              property: "outline",
+              value: "2px solid #3b82f6",
+              history: [{
+                pass: "accessibility",
+                action: "auto-fix-focus",
+                timestamp: Date.now(),
+                reason: issue.message
+              }],
+              meta: {}
+            }, {
+              id: "a11y-focus-offset",
+              property: "outlineOffset",
+              value: "2px",
+              history: [],
+              meta: {}
+            }],
+            source: rule.source,
+            history: []
+          });
+        }
+        if (issue.category === "motion" && issue.autoFixable) {
+          const motionDecls = rule.declarations.filter(
+            (d) => d.property === "animation" || d.property === "transition"
+          );
+          if (motionDecls.length > 0) {
+            rule.atRules.push({
+              id: "a11y-motion-" + Date.now(),
+              type: "media",
+              query: "(prefers-reduced-motion: no-preference)",
+              declarations: motionDecls.map((d) => ({ ...d, id: d.id + "-motion" })),
+              nestedRules: [],
+              source: rule.source,
+              history: [{
+                pass: "accessibility",
+                action: "auto-fix-motion",
+                timestamp: Date.now(),
+                reason: "Wrapped in prefers-reduced-motion query"
+              }]
+            });
+            rule.declarations = rule.declarations.filter(
+              (d) => !motionDecls.includes(d)
+            );
+          }
+        }
+      }
+    }
+  }
+  ir.meta = ir.meta || {};
+  ir.meta.accessibilityReport = generateAccessibilityReport(ir.rules);
+  return ir;
+};
+function auditAccessibility(rules) {
+  return generateAccessibilityReport(rules);
+}
+function checkRule(rule) {
+  return auditRule(rule);
+}
+var accessibilityEngine = {
+  audit: auditAccessibility,
+  checkRule,
+  pass: accessibilityPass,
+  wcag: WCAG
+};
+
+// src/compiler/intent-api.ts
+var INTENT_CATALOG = {
+  // ==========================================================================
+  // LAYOUT INTENTS
+  // ==========================================================================
+  "center-content": {
+    name: "center-content",
+    category: "layout",
+    description: "Center content both horizontally and vertically",
+    semantics: [
+      { category: "surface", intent: "container" }
+    ],
+    properties: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  },
+  "stack": {
+    name: "stack",
+    category: "layout",
+    description: "Vertical stack with consistent spacing",
+    properties: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    semantics: [
+      { category: "spacing", intent: "comfortable" }
+    ]
+  },
+  "sidebar-layout": {
+    name: "sidebar-layout",
+    category: "layout",
+    description: "Two-column layout with mobile collapse",
+    properties: {
+      display: "grid",
+      gridTemplateColumns: "280px 1fr",
+      minHeight: "100vh"
+    },
+    semantics: [
+      { category: "spacing", intent: "comfortable" }
+    ],
+    responsive: {
+      "mobile": { gridTemplateColumns: "1fr" }
+    }
+  },
+  "grid-list": {
+    name: "grid-list",
+    category: "layout",
+    description: "Responsive auto-fit grid",
+    properties: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))"
+    },
+    semantics: [
+      { category: "spacing", intent: "comfortable" }
+    ]
+  },
+  // ==========================================================================
+  // COMPONENT INTENTS
+  // ==========================================================================
+  "card": {
+    name: "card",
+    category: "component",
+    description: "Content card with shadow, radius, and hover lift",
+    semantics: [
+      { category: "surface", intent: "container" },
+      { category: "elevation", intent: "raised" },
+      { category: "spacing", intent: "comfortable" }
+    ],
+    properties: {
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      transition: "box-shadow 0.2s ease, transform 0.2s ease"
+    },
+    states: {
+      hover: {
+        boxShadow: "0 10px 30px rgba(0,0,0,0.15)",
+        transform: "translateY(-2px)"
+      }
+    },
+    responsive: {
+      "mobile": { padding: "16px" }
+    },
+    a11y: ["contrast", "focus-visible"]
+  },
+  "button-primary": {
+    name: "button-primary",
+    category: "component",
+    description: "Primary call-to-action button",
+    semantics: [
+      { category: "surface", intent: "interactive" },
+      { category: "spacing", intent: "compact" },
+      { category: "state", intent: "hover" },
+      { category: "state", intent: "focus" },
+      { category: "state", intent: "active" },
+      { category: "state", intent: "disabled" }
+    ],
+    properties: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: "600",
+      border: "none",
+      userSelect: "none"
+    },
+    a11y: ["contrast", "touch-target", "focus-visible"]
+  },
+  "button-secondary": {
+    name: "button-secondary",
+    category: "component",
+    description: "Secondary outlined button",
+    semantics: [
+      { category: "spacing", intent: "compact" },
+      { category: "state", intent: "focus" },
+      { category: "state", intent: "disabled" }
+    ],
+    properties: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: "500",
+      backgroundColor: "transparent",
+      border: "1px solid $colors.neutral.300",
+      color: "$colors.neutral.700",
+      userSelect: "none"
+    },
+    states: {
+      hover: { backgroundColor: "$colors.neutral.50" }
+    },
+    a11y: ["contrast", "touch-target", "focus-visible"]
+  },
+  "input-field": {
+    name: "input-field",
+    category: "component",
+    description: "Text input with focus and error states",
+    semantics: [
+      { category: "surface", intent: "input" },
+      { category: "spacing", intent: "compact" },
+      { category: "state", intent: "focus" },
+      { category: "state", intent: "disabled" }
+    ],
+    properties: {
+      width: "100%",
+      fontSize: "16px",
+      lineHeight: "1.5",
+      transition: "border-color 0.2s ease, box-shadow 0.2s ease"
+    },
+    a11y: ["contrast"]
+  },
+  "modal": {
+    name: "modal",
+    category: "component",
+    description: "Modal dialog with overlay backdrop",
+    semantics: [
+      { category: "surface", intent: "overlay" },
+      { category: "elevation", intent: "modal" },
+      { category: "spacing", intent: "spacious" }
+    ],
+    properties: {
+      display: "flex",
+      flexDirection: "column",
+      maxWidth: "560px",
+      margin: "auto"
+    },
+    a11y: ["contrast", "focus-visible"]
+  },
+  "tooltip": {
+    name: "tooltip",
+    category: "component",
+    description: "Hover tooltip",
+    semantics: [
+      { category: "surface", intent: "tooltip" }
+    ],
+    properties: {
+      position: "absolute",
+      zIndex: "50",
+      pointerEvents: "none"
+    },
+    a11y: ["contrast"]
+  },
+  // ==========================================================================
+  // SEMANTIC INTENTS
+  // ==========================================================================
+  "hero-section": {
+    name: "hero-section",
+    category: "semantic",
+    description: "Full-width hero banner",
+    semantics: [
+      { category: "spacing", intent: "generous" }
+    ],
+    properties: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "100%",
+      minHeight: "60vh",
+      textAlign: "center"
+    },
+    responsive: {
+      "mobile": { minHeight: "40vh", padding: "32px 16px" }
+    }
+  },
+  "sticky-header": {
+    name: "sticky-header",
+    category: "semantic",
+    description: "Sticky header with backdrop blur",
+    semantics: [
+      { category: "elevation", intent: "sticky" },
+      { category: "spacing", intent: "compact" }
+    ],
+    properties: {
+      backgroundColor: "rgba(255,255,255,0.9)",
+      backdropFilter: "blur(8px)",
+      borderBottom: "1px solid rgba(0,0,0,0.05)"
+    }
+  },
+  "call-to-action": {
+    name: "call-to-action",
+    category: "semantic",
+    description: "Attention-grabbing CTA section",
+    semantics: [
+      { category: "surface", intent: "interactive" },
+      { category: "spacing", intent: "spacious" }
+    ],
+    properties: {
+      textAlign: "center"
+    }
+  },
+  "muted-text": {
+    name: "muted-text",
+    category: "semantic",
+    description: "Secondary, less prominent text",
+    semantics: [
+      { category: "text", intent: "muted" }
+    ]
+  },
+  "visually-hidden": {
+    name: "visually-hidden",
+    category: "semantic",
+    description: "Visible only to screen readers",
+    properties: {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0, 0, 0, 0)",
+      whiteSpace: "nowrap",
+      borderWidth: "0"
+    }
+  },
+  // ==========================================================================
+  // INTERACTION INTENTS
+  // ==========================================================================
+  "hover-lift": {
+    name: "hover-lift",
+    category: "interaction",
+    description: "Subtle lift on hover",
+    states: {
+      hover: {
+        transform: "translateY(-2px)",
+        boxShadow: "0 8px 25px rgba(0,0,0,0.12)",
+        transition: "all 0.2s ease"
+      }
+    },
+    a11y: ["focus-visible"]
+  },
+  "focus-ring": {
+    name: "focus-ring",
+    category: "interaction",
+    description: "Accessible focus indicator",
+    states: {
+      "focus-visible": {
+        outline: "2px solid $colors.primary.500",
+        outlineOffset: "2px"
+      }
+    }
+  }
+};
+function resolveIntent(intentName, options) {
+  const intent2 = INTENT_CATALOG[intentName];
+  if (!intent2) return null;
+  const properties = {};
+  const states = {};
+  const responsive = {};
+  if (intent2.semantics) {
+    for (const sem of intent2.semantics) {
+      const resolved = resolveSemantic(sem.category, sem.intent, {
+        mode: options?.theme || "light"
+      });
+      if (resolved) {
+        for (const [prop, value] of Object.entries(resolved.properties)) {
+          if (resolved.pseudoClass) {
+            if (!states[resolved.pseudoClass]) states[resolved.pseudoClass] = {};
+            states[resolved.pseudoClass][prop] = value;
+          } else {
+            properties[prop] = value;
+          }
+        }
+      }
+    }
+  }
+  if (intent2.properties) {
+    Object.assign(properties, intent2.properties);
+  }
+  if (intent2.states) {
+    for (const [state, props] of Object.entries(intent2.states)) {
+      if (!states[state]) states[state] = {};
+      Object.assign(states[state], props);
+    }
+  }
+  if (intent2.responsive) {
+    Object.assign(responsive, intent2.responsive);
+  }
+  return {
+    properties,
+    states,
+    responsive,
+    a11y: intent2.a11y || [],
+    description: intent2.description
+  };
+}
+function getAvailableIntents() {
+  return Object.keys(INTENT_CATALOG);
+}
+function getIntentsByCategory(category) {
+  return Object.entries(INTENT_CATALOG).filter(([, def]) => def.category === category).map(([name]) => name);
+}
+function getIntentDescription(intentName) {
+  return INTENT_CATALOG[intentName]?.description || null;
+}
+var intentAPIPass = (ir) => {
+  for (const rule of ir.rules) {
+    const intentName = rule.meta._intent;
+    if (!intentName) continue;
+    const resolved = resolveIntent(intentName);
+    if (!resolved) continue;
+    for (const [prop, value] of Object.entries(resolved.properties)) {
+      rule.declarations.push({
+        id: "intent-prop-" + Date.now() + "-" + prop,
+        property: prop,
+        value,
+        history: [{
+          pass: "intent-api",
+          action: "resolved-intent",
+          timestamp: Date.now(),
+          reason: 'intent("' + intentName + '") \u2192 ' + prop + ": " + value
+        }],
+        meta: { intent: intentName }
+      });
+    }
+    for (const [stateName, stateProps] of Object.entries(resolved.states)) {
+      rule.pseudoClasses.push({
+        id: "intent-state-" + Date.now() + "-" + stateName,
+        name: stateName,
+        declarations: Object.entries(stateProps).map(([prop, value]) => ({
+          id: "intent-decl-" + prop,
+          property: prop,
+          value,
+          history: [{
+            pass: "intent-api",
+            action: "resolved-state",
+            timestamp: Date.now(),
+            reason: 'intent("' + intentName + '") state:' + stateName
+          }],
+          meta: {}
+        })),
+        source: rule.source,
+        history: []
+      });
+    }
+    if (Object.keys(resolved.responsive).length > 0) {
+      rule.meta._responsiveIntents = resolved.responsive;
+    }
+    if (resolved.a11y.length > 0) {
+      rule.meta._a11yRequirements = resolved.a11y;
+    }
+  }
+  return ir;
+};
+var intentAPI = {
+  resolve: resolveIntent,
+  list: getAvailableIntents,
+  byCategory: getIntentsByCategory,
+  description: getIntentDescription,
+  catalog: INTENT_CATALOG,
+  pass: intentAPIPass
+};
+
+// src/index.ts
 init_Chain();
 
 // src/compiler/math-engine.ts
@@ -7765,6 +11487,76 @@ 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" },
@@ -7774,6 +11566,222 @@ var SEMANTIC_INTENTS = [
   { 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 }],
@@ -7889,17 +11897,55 @@ var intent = {
   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];
   },
-  getIntents() {
-    return SEMANTIC_INTENTS.map((r) => ({ pattern: r.pattern.toString(), description: r.description }));
+  // 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 = [
@@ -7982,43 +12028,86 @@ export {
   CacheManager,
   ChainCSSCompiler,
   ChainCSSPrefixer,
+  DEFAULT_PIPELINE,
   DesignTokens,
+  PassManager,
   PersistentCache,
+  SCROLL_PRESETS,
   StyleAnalyzer,
   StyleGraphCompiler,
   Theme,
   VERSION2 as VERSION,
+  accessibilityEngine,
+  accessibilityPass,
   add,
+  analyzeResponsive,
   analyze as analyzeStyle,
   animationPresets,
+  applyPass,
+  applyPasses,
+  atomicExtractionPass,
+  auditAccessibility,
+  auditContrast,
   autoDetector,
+  autoFixAll,
+  autoFixIssue,
   buildChain,
   chain,
   smartChain as chainV3,
+  checkContrast,
+  checkRule,
   clearTimeline,
   compileChainCSS,
   compileGraph,
+  compileScrollAnimation,
+  compileScrollAnimations,
+  compileViaIR,
   configureAtomic,
+  constraintSolver,
+  constraintSolverPass,
+  contrastRatio,
   convert,
   correct,
+  countNodes,
   createAnimation,
+  createContextualToken,
+  createDeclaration,
   createTokens as createDesignTokens,
+  createIR,
+  createRule,
+  createScrollAnimation,
   createSmartComponent,
   createTheme,
   createThemeContract,
   createTokens2 as createTokens,
+  cssCompressionPass,
+  cssIfTranspilePass,
+  deadEliminationPass,
+  debugIR,
   index_default as default,
+  diagnosticsExportPass,
   divide,
   enableDebug,
   enableTimeline,
   expandShorthand,
   exportTimeline,
   fluidType,
+  generateCSS,
+  generateContextualCSS,
+  generateResponsiveReport,
   getAnimationPreset,
   getAnimationPresetNames,
+  getAvailableIntents,
   getAvailableShorthands,
+  getExtractionCandidates,
   getIntent,
+  getIntentDescription,
+  getIntentsByCategory,
+  getLayoutPatterns,
   getPropertySuggestion,
+  getScrollPresets,
+  getSemanticDescription,
+  getSemanticIntents,
   getShorthandSuggestion,
   getStyleChanges,
   getStyleDiff,
@@ -8031,21 +12120,56 @@ export {
   helpers,
   injectChainStyles,
   intent,
+  intentAPI,
+  intentAPIPass,
+  intentRecoveryPass,
   isShorthand,
+  layoutIntelligence,
+  layoutIntelligencePass,
+  learnPatterns,
   macros,
   math,
+  mediaQueryPackingPass,
   multiply,
+  optimizeSource,
+  orchestrator,
+  parseConstraint,
+  parseIR,
+  patternLearner,
+  patternLearningPass,
   recipe,
+  recognizeLayout,
+  resetIdCounter,
+  resolveConstraint,
+  resolveContainerQuery,
+  resolveContextual,
+  resolveIntent,
+  resolveSemantic,
+  resolveStickyUntil,
+  responsiveInference,
+  responsiveInferencePass,
+  runDefaultPipeline,
   runtimeChain,
   scale,
+  scrollTimeline,
+  semanticTokens,
+  semanticTokensPass,
   setBreakpoints,
   shorthandMap,
   smartChain,
+  sourceOptimizer,
+  sourceOptimizerPass,
+  specificitySortPass,
+  styleIR,
   subtract,
+  suggestMacro,
   toPx,
   tokens2 as tokens,
+  unitResolutionPass,
   useSmartStyles,
   validateTheme,
+  validateTokenRelationships,
   validate as validateValue,
+  validationPass,
   withSmartStyles
 };