chaincss 2.1.39 → 2.2.0

package/dist/index.js

@@ -7330,6 +7330,317 @@ init_shorthands();
 init_helpers();
 init_animations();
 init_suggestions();
+
+// src/compiler/design-orchestrator.ts
+function parseColor(color) {
+  const trimmed = color.trim().toLowerCase();
+  const hexMatch = trimmed.match(/^#([a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})$/);
+  if (hexMatch) {
+    let hex = hexMatch[1];
+    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    if (hex.length === 8) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+        a: parseInt(hex.slice(6, 8), 16) / 255
+      };
+    }
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: 1
+    };
+  }
+  const rgbMatch = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);
+  if (rgbMatch) {
+    return {
+      r: parseInt(rgbMatch[1]),
+      g: parseInt(rgbMatch[2]),
+      b: parseInt(rgbMatch[3]),
+      a: rgbMatch[4] ? parseFloat(rgbMatch[4]) : 1
+    };
+  }
+  const named = {
+    white: [255, 255, 255],
+    black: [0, 0, 0],
+    red: [255, 0, 0],
+    green: [0, 128, 0],
+    blue: [0, 0, 255],
+    gray: [128, 128, 128],
+    grey: [128, 128, 128],
+    transparent: [0, 0, 0]
+  };
+  if (named[trimmed]) {
+    const [r, g, b] = named[trimmed];
+    return { r, g, b, a: trimmed === "transparent" ? 0 : 1 };
+  }
+  return null;
+}
+function relativeLuminance(r, g, b) {
+  const rsrgb = r / 255;
+  const gsrgb = g / 255;
+  const bsrgb = b / 255;
+  const rLin = rsrgb <= 0.04045 ? rsrgb / 12.92 : Math.pow((rsrgb + 0.055) / 1.055, 2.4);
+  const gLin = gsrgb <= 0.04045 ? gsrgb / 12.92 : Math.pow((gsrgb + 0.055) / 1.055, 2.4);
+  const bLin = bsrgb <= 0.04045 ? bsrgb / 12.92 : Math.pow((bsrgb + 0.055) / 1.055, 2.4);
+  return 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin;
+}
+function contrastRatio(foreground, background) {
+  const fg = parseColor(foreground);
+  const bg = parseColor(background);
+  if (!fg || !bg) return -1;
+  const lumFg = relativeLuminance(fg.r, fg.g, fg.b) + 0.05;
+  const lumBg = relativeLuminance(bg.r, bg.g, bg.b) + 0.05;
+  const lighter = Math.max(lumFg, lumBg);
+  const darker = Math.min(lumFg, lumBg);
+  return lighter / darker;
+}
+function checkContrast(foreground, background) {
+  const ratio = contrastRatio(foreground, background);
+  return {
+    foreground,
+    background,
+    ratio: Math.round(ratio * 100) / 100,
+    passes: {
+      AA: ratio >= 4.5,
+      AALarge: ratio >= 3,
+      AAA: ratio >= 7,
+      AAALarge: ratio >= 4.5
+    },
+    suggestion: ratio < 4.5 ? `Contrast ratio ${Math.round(ratio * 100) / 100} fails AA. Need ${Math.round((4.5 - ratio) * 100) / 100} more. Consider darkening/lightening.` : void 0
+  };
+}
+function auditContrast(styles) {
+  const checks = [];
+  for (const style of styles) {
+    if (style.color && style.backgroundColor) {
+      checks.push(checkContrast(style.color, style.backgroundColor));
+    }
+  }
+  const failures = checks.filter((c) => !c.passes.AA);
+  const warnings = checks.filter((c) => c.passes.AA && !c.passes.AAA);
+  return {
+    checks,
+    failures,
+    warnings,
+    passCount: checks.length - failures.length,
+    failCount: failures.length,
+    summary: failures.length === 0 ? "All " + checks.length + " contrast checks pass AA." : failures.length + " of " + checks.length + " contrast checks FAIL AA."
+  };
+}
+function createContextualToken(defaultValue, contexts = {}) {
+  const name = "ctx-" + Math.random().toString(36).slice(2, 8);
+  return { name, default: defaultValue, contexts };
+}
+function resolveContextual(token, selectorPath) {
+  let bestMatch = token.default;
+  let bestLength = 0;
+  for (const [context, value] of Object.entries(token.contexts)) {
+    if (selectorPath.includes(context) && context.length > bestLength) {
+      bestMatch = value;
+      bestLength = context.length;
+    }
+  }
+  return bestMatch;
+}
+function generateContextualCSS(propertyName, token, baseSelector) {
+  let css = "";
+  css += baseSelector + " { " + propertyName + ": " + token.default + "; }\n";
+  for (const [context, value] of Object.entries(token.contexts)) {
+    css += context + " " + baseSelector + " { " + propertyName + ": " + value + "; }\n";
+  }
+  return css;
+}
+function validateTokenRelationships(tokens3, pairs) {
+  const styles = [];
+  for (const pair of pairs) {
+    const fg = resolveTokenPath2(tokens3, pair.foreground);
+    const bg = resolveTokenPath2(tokens3, pair.background);
+    if (fg && bg) {
+      styles.push({ selector: pair.label, color: fg, backgroundColor: bg });
+    }
+  }
+  return auditContrast(styles);
+}
+function resolveTokenPath2(tokens3, path6) {
+  const parts = path6.split(".");
+  let current = tokens3;
+  for (const part of parts) {
+    if (current === void 0 || current === null) return null;
+    current = current[part];
+  }
+  return typeof current === "string" ? current : null;
+}
+var orchestrator = {
+  contrastRatio,
+  checkContrast,
+  auditContrast,
+  createContextualToken,
+  resolveContextual,
+  generateContextualCSS,
+  validateTokenRelationships,
+  parseColor
+};
+
+// src/compiler/scroll-timeline.ts
+var SCROLL_PRESETS = {
+  fadeIn: {
+    selector: "",
+    timeline: { name: "fade-in", source: "view", range: "entry" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", transform: "translateY(20px)" } },
+      { offset: "100%", properties: { opacity: "1", transform: "translateY(0)" } }
+    ]
+  },
+  fadeOut: {
+    selector: "",
+    timeline: { name: "fade-out", source: "view", range: "exit" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "1" } },
+      { offset: "100%", properties: { opacity: "0" } }
+    ]
+  },
+  scaleIn: {
+    selector: "",
+    timeline: { name: "scale-in", source: "view", range: "entry" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", transform: "scale(0.8)" } },
+      { offset: "100%", properties: { opacity: "1", transform: "scale(1)" } }
+    ]
+  },
+  slideLeft: {
+    selector: "",
+    timeline: { name: "slide-left", source: "view", range: "entry" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", transform: "translateX(-40px)" } },
+      { offset: "100%", properties: { opacity: "1", transform: "translateX(0)" } }
+    ]
+  },
+  slideRight: {
+    selector: "",
+    timeline: { name: "slide-right", source: "view", range: "entry" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", transform: "translateX(40px)" } },
+      { offset: "100%", properties: { opacity: "1", transform: "translateX(0)" } }
+    ]
+  },
+  parallax: {
+    selector: "",
+    timeline: { name: "parallax", source: "scroll", scroller: "root" },
+    keyframes: [
+      { offset: "0%", properties: { transform: "translateY(0)" } },
+      { offset: "100%", properties: { transform: "translateY(-20%)" } }
+    ]
+  },
+  stickyReveal: {
+    selector: "",
+    timeline: { name: "sticky-reveal", source: "view", range: "contain" },
+    keyframes: [
+      { offset: "0%", properties: { opacity: "0", clipPath: "inset(0 0 100% 0)" } },
+      { offset: "50%", properties: { opacity: "1", clipPath: "inset(0 0 0% 0)" } },
+      { offset: "100%", properties: { opacity: "1", clipPath: "inset(0 0 0% 0)" } }
+    ]
+  }
+};
+var animCounter = 0;
+function generateName(prefix) {
+  return prefix + "-" + (animCounter++).toString(36);
+}
+function compileScrollAnimation(animation) {
+  const animName = animation.timeline.name || generateName("scroll-anim");
+  const timelineName = "--" + animName + "-tl";
+  let css = "";
+  css += "/* Scroll Timeline: " + animName + " */\n";
+  if (animation.timeline.source === "view") {
+    const range = animation.timeline.range || "entry";
+    css += animation.selector + " {\n";
+    css += "  view-timeline-name: " + timelineName + ";\n";
+    css += "  view-timeline-axis: " + (animation.timeline.axis || "block") + ";\n";
+    if (animation.timeline.inset) {
+      const inset = typeof animation.timeline.inset === "string" ? animation.timeline.inset : animation.timeline.inset.start + " " + animation.timeline.inset.end;
+      css += "  view-timeline-inset: " + inset + ";\n";
+    }
+    css += "}\n\n";
+  } else {
+    const scroller = animation.timeline.scroller === "root" ? "root" : animation.timeline.scroller === "self" ? "self" : animation.timeline.scroller || "nearest";
+    css += animation.selector + " {\n";
+    if (scroller === "root" || scroller === "self" || scroller === "nearest") {
+      css += "  scroll-timeline-name: " + timelineName + ";\n";
+      css += "  scroll-timeline-axis: " + (animation.timeline.axis || "block") + ";\n";
+    }
+    css += "}\n\n";
+  }
+  css += "@keyframes " + animName + " {\n";
+  for (const step of animation.keyframes) {
+    css += "  " + step.offset + " {\n";
+    for (const [prop, value] of Object.entries(step.properties)) {
+      const kebabProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+      css += "    " + kebabProp + ": " + value + ";\n";
+    }
+    css += "  }\n";
+  }
+  css += "}\n\n";
+  const targetSelector = animation.selector + " > *" || animation.selector;
+  css += "/* Apply animation to children */\n";
+  css += targetSelector + " {\n";
+  css += "  animation: " + animName + " linear both;\n";
+  css += "  animation-timeline: " + timelineName + ";\n";
+  if (animation.timeline.source === "view") {
+    const range = animation.timeline.range || "entry";
+    css += "  animation-range: " + range + ";\n";
+  }
+  if (animation.delay) css += "  animation-delay: " + animation.delay + ";\n";
+  css += "}\n\n";
+  css += "/* Fallback for browsers without scroll-timeline */\n";
+  css += "@supports not (animation-timeline: scroll()) {\n";
+  css += "  " + targetSelector + " {\n";
+  css += "    /* Use JS polyfill: https://github.com/flackr/scroll-timeline */\n";
+  css += "    animation: " + animName + " 1s ease both;\n";
+  css += "  }\n";
+  css += "}\n";
+  return {
+    css,
+    animationName: animName,
+    timelineName,
+    fallback: ""
+  };
+}
+function compileScrollAnimations(animations) {
+  let css = "/* ============================================================\n";
+  css += "   ChainCSS Scroll-Driven Animations\n";
+  css += "   Generated: " + (/* @__PURE__ */ new Date()).toISOString() + "\n";
+  css += "   ============================================================ */\n\n";
+  for (const animation of animations) {
+    const result = compileScrollAnimation(animation);
+    css += result.css;
+  }
+  return css;
+}
+function createScrollAnimation(preset, selector, overrides) {
+  const base = SCROLL_PRESETS[preset];
+  if (!base) throw new Error("Unknown scroll preset: " + preset);
+  return {
+    ...base,
+    selector,
+    timeline: { ...base.timeline, ...overrides?.timeline },
+    keyframes: overrides?.keyframes || base.keyframes,
+    ...overrides
+  };
+}
+function getScrollPresets() {
+  return Object.keys(SCROLL_PRESETS);
+}
+var scrollTimeline = {
+  compile: compileScrollAnimation,
+  compileAll: compileScrollAnimations,
+  create: createScrollAnimation,
+  presets: SCROLL_PRESETS,
+  getPresets: getScrollPresets
+};
+
+// src/index.ts
 init_Chain();
 
 // src/compiler/math-engine.ts
@@ -7765,6 +8076,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 +8155,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 +8486,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 = [
@@ -7984,6 +8619,7 @@ export {
   ChainCSSPrefixer,
   DesignTokens,
   PersistentCache,
+  SCROLL_PRESETS,
   StyleAnalyzer,
   StyleGraphCompiler,
   Theme,
@@ -7991,18 +8627,25 @@ export {
   add,
   analyze as analyzeStyle,
   animationPresets,
+  auditContrast,
   autoDetector,
   buildChain,
   chain,
   smartChain as chainV3,
+  checkContrast,
   clearTimeline,
   compileChainCSS,
   compileGraph,
+  compileScrollAnimation,
+  compileScrollAnimations,
   configureAtomic,
+  contrastRatio,
   convert,
   correct,
   createAnimation,
+  createContextualToken,
   createTokens as createDesignTokens,
+  createScrollAnimation,
   createSmartComponent,
   createTheme,
   createThemeContract,
@@ -8014,11 +8657,13 @@ export {
   expandShorthand,
   exportTimeline,
   fluidType,
+  generateContextualCSS,
   getAnimationPreset,
   getAnimationPresetNames,
   getAvailableShorthands,
   getIntent,
   getPropertySuggestion,
+  getScrollPresets,
   getShorthandSuggestion,
   getStyleChanges,
   getStyleDiff,
@@ -8035,9 +8680,12 @@ export {
   macros,
   math,
   multiply,
+  orchestrator,
   recipe,
+  resolveContextual,
   runtimeChain,
   scale,
+  scrollTimeline,
   setBreakpoints,
   shorthandMap,
   smartChain,
@@ -8046,6 +8694,7 @@ export {
   tokens2 as tokens,
   useSmartStyles,
   validateTheme,
+  validateTokenRelationships,
   validate as validateValue,
   withSmartStyles
 };