meno-astro 0.1.2 → 0.1.3

package/dist/chunks/{chunk-OT56NX4T.js → chunk-I57UVB4P.js}

@@ -2520,6 +2520,261 @@ var prefixToCSSProperty = {
   scb: "scroll-behavior",
   acc: "accent-color"
 };
+var specialValueMappings = {
+  display: {
+    flex: "f",
+    grid: "g",
+    block: "b",
+    inline: "i",
+    "inline-block": "ib",
+    none: "h",
+    "inline-flex": "if",
+    "inline-grid": "ig"
+  },
+  flexDirection: {
+    column: "fd-col",
+    row: "fd-row"
+  },
+  justifyContent: {
+    center: "jc-c",
+    "flex-start": "jc-s",
+    "flex-end": "jc-e",
+    "space-between": "jc-b",
+    "space-around": "jc-a",
+    "space-evenly": "jc-ev"
+  },
+  alignItems: {
+    center: "ai-c",
+    "flex-start": "ai-s",
+    "flex-end": "ai-e",
+    stretch: "ai-st",
+    baseline: "ai-b"
+  },
+  overflow: {
+    hidden: "o-h",
+    auto: "o-a",
+    scroll: "o-s",
+    visible: "o-v"
+  },
+  cursor: {
+    pointer: "cursor-pointer",
+    default: "cursor-default"
+  },
+  pointerEvents: {
+    none: "pe-none",
+    auto: "pe-auto"
+  },
+  userSelect: {
+    none: "us-none",
+    auto: "us-auto",
+    text: "us-text",
+    all: "us-all"
+  },
+  whiteSpace: {
+    normal: "whs-normal",
+    nowrap: "whs-nowrap",
+    pre: "whs-pre",
+    "pre-wrap": "whs-pre-wrap",
+    "pre-line": "whs-pre-line"
+  }
+  // Note: CSS functions (blur, translateY, scale, rotate, repeat) are now handled
+  // dynamically in utilityClassMapper.ts - no need to hardcode specific values here
+};
+var shadowPresets = {
+  "0": "none",
+  "1": "0 1px 2px rgba(0, 0, 0, 0.05)",
+  "2": "0 4px 12px rgba(0, 0, 0, 0.1)",
+  "3": "0 8px 24px rgba(0, 0, 0, 0.15)",
+  "4": "0 12px 32px rgba(0, 0, 0, 0.2)"
+};
+var gradientPresets = {
+  "1": "linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%)",
+  "2": "linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%)"
+};
+var borderPresets = {
+  "0": "1px solid var(--border)",
+  "1": "1px solid var(--border-light)"
+};
+
+// ../core/lib/shared/styleValueRegistry.ts
+var registry = /* @__PURE__ */ new Map();
+var dynamicRegistry = /* @__PURE__ */ new Map();
+function registerStyleValue(className, value) {
+  registry.set(className, value);
+}
+function registerDynamicStyle(className, property, value) {
+  dynamicRegistry.set(className, { property, value });
+}
+function getStyleValue(className) {
+  return registry.get(className);
+}
+function getDynamicStyle(className) {
+  return dynamicRegistry.get(className);
+}
+
+// ../core/lib/shared/cssNamedColors.ts
+var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
+  // CSS Level 4 named colors
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen",
+  // CSS color keywords
+  "transparent",
+  "currentcolor",
+  // CSS-wide keywords (should never be wrapped in var())
+  "inherit",
+  "initial",
+  "unset",
+  "revert"
+]);
+function isCssNamedColor(value) {
+  return CSS_NAMED_COLORS.has(value.toLowerCase());
+}
 
 // ../core/lib/shared/responsiveScaling.ts
 var DEFAULT_FLUID_RANGE = { min: 320, max: 1440 };
@@ -2542,6 +2797,53 @@ function parseValue2(valueStr) {
     unit: match[2]
   };
 }
+var SCALABLE_CSS_PROPERTIES = /* @__PURE__ */ new Set([
+  "padding",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "padding-bottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  "paddingBottom",
+  "margin",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "margin-bottom",
+  "marginLeft",
+  "marginRight",
+  "marginTop",
+  "marginBottom",
+  "font-size",
+  "fontSize",
+  "gap",
+  "row-gap",
+  "column-gap",
+  "rowGap",
+  "columnGap",
+  "border-radius",
+  "borderRadius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "width",
+  "height",
+  "max-width",
+  "max-height",
+  "min-width",
+  "min-height",
+  "maxWidth",
+  "maxHeight",
+  "minWidth",
+  "minHeight"
+]);
 function calculateResponsiveValue(baseValue, baseReference, scale) {
   if (Math.abs(baseValue) <= baseReference) {
     return Math.round(baseValue);
@@ -2609,6 +2911,19 @@ function buildFluidClamp(baseValue, unit, scale, vpMin, vpMax, baseReference = 1
   const slopeVw = slopePx * 100;
   return `clamp(${formatNumber(min)}${unit}, ${formatNumber(interceptInUnit)}${unit} + ${formatNumber(slopeVw)}vw, ${formatNumber(max)}${unit})`;
 }
+function buildFluidClampWithExplicitMin(minValue, maxValue, unit, vpMin, vpMax) {
+  if (minValue === maxValue || vpMax === vpMin) {
+    return `${formatNumber(maxValue)}${unit}`;
+  }
+  const unitToPx = unit === "rem" ? 16 : 1;
+  const minPx = minValue * unitToPx;
+  const maxPx = maxValue * unitToPx;
+  const slopePx = (maxPx - minPx) / (vpMax - vpMin);
+  const interceptPx = minPx - slopePx * vpMin;
+  const interceptInUnit = interceptPx / unitToPx;
+  const slopeVw = slopePx * 100;
+  return `clamp(${formatNumber(minValue)}${unit}, ${formatNumber(interceptInUnit)}${unit} + ${formatNumber(slopeVw)}vw, ${formatNumber(maxValue)}${unit})`;
+}
 function formatNumber(n) {
   if (Number.isInteger(n)) return String(n);
   return Number(n.toFixed(4)).toString();
@@ -2711,9 +3026,305 @@ var cssPropertyOrderMap = (() => {
   }
   return map;
 })();
+function getClassPropertyOrder(className) {
+  const extracted = extractPropertyAndValue(className);
+  if (extracted) {
+    const idx = cssPropertyOrderMap.get(extracted.property);
+    if (idx !== void 0) return idx;
+  }
+  const rule = utilityClassRules[className];
+  if (rule) {
+    const propMatch = rule.match(/^([a-z-]+):/);
+    if (propMatch) {
+      const idx = cssPropertyOrderMap.get(propMatch[1]);
+      if (idx !== void 0) return idx;
+    }
+  }
+  return Infinity;
+}
+function sortClassesByPropertyOrder(classes) {
+  return Array.from(classes).sort((a, b) => getClassPropertyOrder(a) - getClassPropertyOrder(b));
+}
 function getResponsiveMode(scales) {
   return scales?.mode ?? "breakpoints";
 }
+var AUTO_RESPONSIVE_TYPE_MAP = {
+  "padding": "padding",
+  "padding-left": "padding",
+  "padding-right": "padding",
+  "padding-top": "padding",
+  "padding-bottom": "padding",
+  "margin": "margin",
+  "margin-left": "margin",
+  "margin-right": "margin",
+  "margin-top": "margin",
+  "margin-bottom": "margin",
+  "font-size": "fontSize",
+  "gap": "gap",
+  "row-gap": "gap",
+  "column-gap": "gap",
+  "border-radius": "borderRadius",
+  "border-top-left-radius": "borderRadius",
+  "border-top-right-radius": "borderRadius",
+  "border-bottom-left-radius": "borderRadius",
+  "border-bottom-right-radius": "borderRadius",
+  "width": "size",
+  "height": "size",
+  "max-width": "size",
+  "max-height": "size",
+  "min-width": "size",
+  "min-height": "size"
+};
+function escapeCSSClassName(className) {
+  return className.replace(/[.#[\](){};<>+~:,%\/\s]/g, "\\$&");
+}
+var utilityClassRules = {
+  // Display utilities (short forms from specialValueMappings)
+  f: "display: flex;",
+  "fd-col": "flex-direction: column;",
+  "fd-row": "flex-direction: row;",
+  g: "display: grid;",
+  b: "display: block;",
+  i: "display: inline;",
+  ib: "display: inline-block;",
+  h: "display: none;",
+  "if": "display: inline-flex;",
+  ig: "display: inline-grid;",
+  // Justify Content (short forms)
+  "jc-c": "justify-content: center;",
+  "jc-s": "justify-content: flex-start;",
+  "jc-e": "justify-content: flex-end;",
+  "jc-b": "justify-content: space-between;",
+  "jc-a": "justify-content: space-around;",
+  "jc-ev": "justify-content: space-evenly;",
+  // Align Items (short forms)
+  "ai-c": "align-items: center;",
+  "ai-s": "align-items: flex-start;",
+  "ai-e": "align-items: flex-end;",
+  "ai-st": "align-items: stretch;",
+  "ai-b": "align-items: baseline;",
+  // Overflow (short forms)
+  "o-h": "overflow: hidden;",
+  "o-a": "overflow: auto;",
+  "o-s": "overflow: scroll;",
+  "o-v": "overflow: visible;",
+  // Cursor (full forms)
+  "cursor-pointer": "cursor: pointer;",
+  "cursor-default": "cursor: default;",
+  // Pointer events
+  "pe-none": "pointer-events: none;",
+  "pe-auto": "pointer-events: auto;",
+  // User select
+  "us-none": "user-select: none;",
+  "us-auto": "user-select: auto;",
+  "us-text": "user-select: text;",
+  "us-all": "user-select: all;",
+  // White space
+  "whs-normal": "white-space: normal;",
+  "whs-nowrap": "white-space: nowrap;",
+  "whs-pre": "white-space: pre;",
+  "whs-pre-wrap": "white-space: pre-wrap;",
+  "whs-pre-line": "white-space: pre-line;",
+  // Shadow presets
+  "sh-0": "box-shadow: none;",
+  "sh-1": "box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);",
+  "sh-2": "box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);",
+  "sh-3": "box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);",
+  "sh-4": "box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);",
+  // Gradient presets
+  "gr-1": "background: linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%);",
+  "gr-2": "background: linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%);",
+  // Border presets
+  "bd-0": "border: 1px solid var(--border);",
+  "bd-1": "border: 1px solid var(--border-light);"
+  // Note: CSS functions (blur, translateY, scale, rotate, repeat) are now handled
+  // dynamically via the styleValueRegistry - no need to hardcode specific values here
+};
+function extractPropertyAndValue(className) {
+  for (const knownPrefix of SORTED_PREFIXES) {
+    if (className.startsWith(knownPrefix + "-")) {
+      const classValue = className.substring(knownPrefix.length + 1);
+      const cssProp = prefixToCSSProperty[knownPrefix];
+      if (cssProp) {
+        if (/^h[0-9a-z]+$/.test(classValue)) {
+          return null;
+        }
+        return { property: cssProp, value: classValue };
+      }
+    }
+  }
+  return null;
+}
+function resolveScalablePropertyValue(className) {
+  const direct = extractPropertyAndValue(className);
+  if (direct) return direct;
+  for (const knownPrefix of SORTED_PREFIXES) {
+    if (!className.startsWith(knownPrefix + "-")) continue;
+    const classValue = className.substring(knownPrefix.length + 1);
+    if (!/^h[0-9a-z]+$/.test(classValue)) continue;
+    const cssProp = prefixToCSSProperty[knownPrefix];
+    if (!cssProp) continue;
+    const registered = getStyleValue(className);
+    if (registered == null || registered === "") continue;
+    return { property: cssProp, value: String(registered) };
+  }
+  return null;
+}
+function generateRuleForClass(className) {
+  if (utilityClassRules[className]) {
+    return utilityClassRules[className];
+  }
+  let prefix = "";
+  let classValue = "";
+  for (const knownPrefix of SORTED_PREFIXES) {
+    if (className.startsWith(knownPrefix + "-")) {
+      prefix = knownPrefix;
+      classValue = className.substring(knownPrefix.length + 1);
+      break;
+    }
+  }
+  if (!prefix || !classValue) {
+    const dynamicStyle = getDynamicStyle(className);
+    if (dynamicStyle) {
+      return `${dynamicStyle.property}: ${dynamicStyle.value};`;
+    }
+    return null;
+  }
+  const cssProp = prefixToCSSProperty[prefix];
+  if (!cssProp) {
+    const dynamicStyle = getDynamicStyle(className);
+    if (dynamicStyle) {
+      return `${dynamicStyle.property}: ${dynamicStyle.value};`;
+    }
+    return null;
+  }
+  const borderSideMap = {
+    "bt": "border-top",
+    "bb": "border-bottom",
+    "bl": "border-left",
+    "border-r": "border-right"
+  };
+  if (borderSideMap[prefix] && classValue.includes("-")) {
+    const parts = classValue.split("-");
+    const width = parts[0];
+    const borderStyle = parts[1] || "solid";
+    const side = borderSideMap[prefix];
+    return `${side}-width: ${width}; ${side}-style: ${borderStyle};`;
+  }
+  const originalValue = getStyleValue(className);
+  if (originalValue !== void 0) {
+    return `${cssProp}: ${originalValue};`;
+  }
+  if (prefix === "b" && classValue.includes("-")) {
+    const parts = classValue.split("-");
+    const width = parts[0];
+    const borderStyle = parts[1] || "solid";
+    const borderColor = parts[2] ? `var(--${parts[2]})` : "currentColor";
+    return `border: ${width} ${borderStyle} ${borderColor};`;
+  }
+  if (prefix === "br" && classValue.includes("-") && !classValue.match(/^\d+px$/)) {
+    return `border-radius: var(--${classValue});`;
+  }
+  let value = classValue;
+  const valuePattern = /\d|auto|inherit|initial|unset|solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden|minmax|repeat|clamp|calc|min|max|fit-content|var/;
+  const hasParentheses = value.includes("(");
+  if (hasParentheses) {
+    let result = "";
+    let depth = 0;
+    let afterComma = false;
+    for (let i = 0; i < value.length; i++) {
+      const char = value[i];
+      if (char === "(") {
+        depth++;
+        result += char;
+        afterComma = false;
+      } else if (char === ")") {
+        depth--;
+        result += char;
+        afterComma = false;
+      } else if (char === ",") {
+        result += char;
+        afterComma = true;
+      } else if (char === "-" && afterComma && depth > 0) {
+        if (value[i + 1] === "-") {
+          result += " ";
+        } else {
+          result += " ";
+        }
+        afterComma = false;
+      } else if (char === "-" && depth > 0 && i > 0) {
+        const rest = value.substring(i + 1);
+        if (valuePattern.test(rest[0] || "")) {
+          result += " ";
+        } else {
+          result += char;
+        }
+        afterComma = false;
+      } else if (char === "-" && depth === 0 && i > 0) {
+        const rest = value.substring(i + 1);
+        if (valuePattern.test(rest[0] || "")) {
+          result += " ";
+        } else {
+          result += char;
+        }
+        afterComma = false;
+      } else {
+        result += char;
+        afterComma = false;
+      }
+    }
+    value = result;
+  } else if (value.startsWith("-")) {
+    value = value[0] + value.substring(1).replace(new RegExp(`-(?=${valuePattern.source})`, "g"), " ");
+  } else {
+    value = value.replace(new RegExp(`-(?=${valuePattern.source})`, "g"), " ");
+  }
+  value = value.replace(/(\d+)p(?!\w)/g, "$1%");
+  if (prefix === "px") {
+    return `padding-left: ${value}; padding-right: ${value};`;
+  }
+  if (prefix === "py") {
+    return `padding-top: ${value}; padding-bottom: ${value};`;
+  }
+  if (prefix === "mx") {
+    return `margin-left: ${value}; margin-right: ${value};`;
+  }
+  if (prefix === "my") {
+    return `margin-top: ${value}; margin-bottom: ${value};`;
+  }
+  if (prefix === "bgc" || prefix === "bg" || prefix === "c" || prefix === "bc") {
+    if (!value.startsWith("#") && !value.includes("rgb") && !value.includes("px")) {
+      if (isCssNamedColor(value)) {
+        return `${cssProp}: ${value};`;
+      }
+      return `${cssProp}: var(--${value});`;
+    }
+  }
+  return `${cssProp}: ${value};`;
+}
+function applyFluidToUtilityRule(rule, className, responsiveScales, breakpoints) {
+  const propValue = resolveScalablePropertyValue(className);
+  if (!propValue) return rule;
+  const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
+  if (!category) return rule;
+  const scaleConfig = responsiveScales[category];
+  if (!scaleConfig) return rule;
+  const smallest = getSmallestBreakpointName(breakpoints);
+  if (!smallest) return rule;
+  const scale = scaleConfig[smallest];
+  if (scale == null || scale === 1) return rule;
+  const range = responsiveScales.fluidRange ?? DEFAULT_FLUID_RANGE;
+  const baseRef = responsiveScales.baseReference ?? 16;
+  const fluidValue = buildFluidPropertyValue(
+    propValue.value,
+    scale,
+    range.min,
+    range.max,
+    baseRef
+  );
+  if (!fluidValue) return rule;
+  return `${propValue.property}: ${fluidValue};`;
+}
 function applyFluidToStyle(style, responsiveScales, breakpoints) {
   const range = responsiveScales.fluidRange ?? DEFAULT_FLUID_RANGE;
   const baseRef = responsiveScales.baseReference ?? 16;
@@ -2765,6 +3376,120 @@ function applyContainerPattern(style, fluidActive) {
     marginRight: "auto"
   };
 }
+function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, responsiveScales, remConfig) {
+  const css = [];
+  const baseClasses = /* @__PURE__ */ new Set();
+  const autoResponsiveClasses = /* @__PURE__ */ new Set();
+  const breakpointValues = getBreakpointValues(breakpoints);
+  const responsiveClasses = {};
+  for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
+    let prefix = breakpointName.charAt(0).toLowerCase();
+    if (breakpointName.toLowerCase() === "mobile") {
+      prefix = "mob";
+    }
+    responsiveClasses[prefix] = {
+      classes: /* @__PURE__ */ new Set(),
+      breakpointName,
+      value: breakpointValue
+    };
+  }
+  for (const className of usedClasses) {
+    let matched = false;
+    for (const prefix of Object.keys(responsiveClasses)) {
+      if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
+        const potentialClass = className.substring(prefix.length + 1);
+        const rule = generateRuleForClass(potentialClass);
+        if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
+          responsiveClasses[prefix].classes.add(potentialClass);
+          matched = true;
+          break;
+        }
+      }
+    }
+    if (!matched) {
+      baseClasses.add(className);
+      if (responsiveScales?.enabled) {
+        const propValue = resolveScalablePropertyValue(className);
+        if (propValue) {
+          const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
+          if (category && responsiveScales[category]) {
+            autoResponsiveClasses.add(className);
+          }
+        }
+      }
+    }
+  }
+  const mode = getResponsiveMode(responsiveScales);
+  const fluidActive = responsiveScales?.enabled === true && mode === "fluid";
+  for (const className of sortClassesByPropertyOrder(baseClasses)) {
+    let rule = generateRuleForClass(className);
+    if (rule) {
+      if (fluidActive && autoResponsiveClasses.has(className)) {
+        rule = applyFluidToUtilityRule(rule, className, responsiveScales, breakpoints);
+      }
+      const escapedClassName = escapeCSSClassName(className);
+      const finalRule = applyRemConversion(rule, remConfig);
+      css.push(`.${escapedClassName} { ${finalRule} }`);
+    }
+  }
+  const autoResponsiveMediaQueries = {};
+  if (responsiveScales?.enabled && !fluidActive) {
+    for (const className of autoResponsiveClasses) {
+      const propValue = resolveScalablePropertyValue(className);
+      if (!propValue) continue;
+      const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
+      if (!category) continue;
+      const scaleConfig = responsiveScales[category];
+      if (!scaleConfig) continue;
+      const baseRef = responsiveScales.baseReference || 16;
+      const escapedClassName = escapeCSSClassName(className);
+      for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
+        const scale = scaleConfig[breakpointName];
+        if (!scale) continue;
+        const scaledValue = scalePropertyValue(propValue.value, baseRef, scale);
+        if (!scaledValue) continue;
+        if (!autoResponsiveMediaQueries[breakpointName]) {
+          autoResponsiveMediaQueries[breakpointName] = {
+            classes: [],
+            value: breakpointValue
+          };
+        }
+        const finalScaledValue = remConfig?.enabled && shouldConvertProperty(propValue.property) ? convertPxToRem(scaledValue, remConfig.baseFontSize) : scaledValue;
+        autoResponsiveMediaQueries[breakpointName].classes.push({
+          className: escapedClassName,
+          rule: `${propValue.property}: ${finalScaledValue};`
+        });
+      }
+    }
+  }
+  const sortedAutoResponsive = Object.entries(autoResponsiveMediaQueries).sort(([, a], [, b]) => b.value - a.value);
+  for (const [breakpointName, mq] of sortedAutoResponsive) {
+    if (mq.classes.length === 0) continue;
+    css.push(`@media (max-width: ${mq.value}px) {`);
+    for (const { className, rule } of mq.classes) {
+      css.push(`  .${className} { ${rule} }`);
+    }
+    css.push("}");
+  }
+  const sortedManualResponsive = Object.entries(responsiveClasses).filter(([, info]) => info.classes.size > 0).sort(([, a], [, b]) => b.value - a.value);
+  for (const [prefix, breakpointInfo] of sortedManualResponsive) {
+    const rules = [];
+    for (const className of breakpointInfo.classes) {
+      const rule = generateRuleForClass(className);
+      if (rule) {
+        const escapedClassName = escapeCSSClassName(className);
+        const finalRule = applyRemConversion(rule, remConfig);
+        rules.push(`  .${prefix}-${escapedClassName} { ${finalRule} }`);
+      }
+    }
+    if (rules.length > 0) {
+      css.push(`@media (max-width: ${breakpointInfo.value}px) {`);
+      css.push(...rules);
+      css.push("}");
+    }
+  }
+  return css.join("\n");
+}
 function isResponsiveStyle(style) {
   return typeof style === "object" && style !== null && ("base" in style || "tablet" in style || "mobile" in style);
 }
@@ -2890,10 +3615,228 @@ function scaleStyleForBreakpoint(baseStyle, responsiveScales, breakpointName, sk
 }
 
 // ../core/lib/shared/utilityClassMapper.ts
+var functionAbbreviations = {
+  blur: "bl",
+  translateY: "ty",
+  translateX: "tx",
+  translate: "t",
+  scale: "sc",
+  scaleX: "scx",
+  scaleY: "scy",
+  rotate: "ro",
+  skew: "sk",
+  skewX: "skx",
+  skewY: "sky",
+  repeat: "re",
+  minmax: "mm",
+  calc: "ca"
+};
+function isStyleMapping(value) {
+  return typeof value === "object" && value !== null && "_mapping" in value && value._mapping === true;
+}
+function sanitizeClassValue(value) {
+  return value.replace(/\s+/g, "-").replace(/[()]/g, "").replace(/,/g, "_").replace(/%/g, "p").replace(/\./g, "d").replace(/[^\w-]/g, "");
+}
+function shortHash(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+}
+function hasIllegalClassChars(className) {
+  return /[^\w-]/.test(className);
+}
+function propertyValueToClass(prop, value) {
+  const prefix = propertyMap[prop];
+  if (!prefix) {
+    const stringValue2 = String(value);
+    const dynamicPrefix = prop.replace(/([A-Z])/g, "-$1").toLowerCase().split("-").filter(Boolean).map((word) => word.slice(0, 2)).join("");
+    const sanitizedValue = sanitizeClassValue(stringValue2);
+    const className2 = `${dynamicPrefix}-${sanitizedValue}`;
+    const cssProperty = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+    registerDynamicStyle(className2, cssProperty, value);
+    return className2;
+  }
+  let stringValue = String(value);
+  if (prop === "fontFamily") {
+    stringValue = stringValue.split(",").map((font) => {
+      const trimmed = font.trim();
+      if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+        return trimmed.slice(1, -1);
+      }
+      return trimmed;
+    }).join(", ");
+  }
+  let className = null;
+  if (specialValueMappings[prop]) {
+    const mapping = specialValueMappings[prop];
+    if (mapping[stringValue]) {
+      className = mapping[stringValue];
+    }
+  }
+  if (!className && prop === "boxShadow" && shadowPresets[stringValue]) {
+    className = `sh-${stringValue}`;
+  }
+  if (!className && (prop === "background" || prop === "backgroundImage") && gradientPresets[stringValue]) {
+    className = `gr-${stringValue}`;
+  }
+  if (!className && prop === "border" && borderPresets[stringValue]) {
+    className = `bd-${stringValue}`;
+  }
+  if (!className && stringValue.includes("(") && stringValue.includes(")")) {
+    const funcMatch = stringValue.match(/^([a-zA-Z]+)\((.+)\)$/);
+    if (funcMatch) {
+      const [, funcName, args] = funcMatch;
+      const abbrev = functionAbbreviations[funcName] || funcName.slice(0, 2);
+      const argNormalized = args.replace(/,\s*/g, "-").replace(/\s+/g, "").replace(/-(\d)/g, "n$1").replace(/px$/i, "").replace(/%$/, "p");
+      className = `${prefix}-${abbrev}${argNormalized}`;
+    }
+  }
+  if (!className && stringValue.includes("var(")) {
+    const varMatch = stringValue.match(/var\((--[\w-]+)\)/);
+    if (varMatch) {
+      const varName = varMatch[1].replace("--", "");
+      className = `${prefix}-${varName}`;
+    }
+  }
+  if (!className && (prop === "color" || prop === "backgroundColor" || prop === "borderColor") && !stringValue.match(/^\d/) && !stringValue.includes("#") && !stringValue.includes("rgb")) {
+    className = `${prefix}-${stringValue}`;
+  }
+  if (!className && (stringValue.match(/^\d+px$/) || stringValue.match(/^\d+em$/))) {
+    className = `${prefix}-${stringValue}`;
+  }
+  if (!className && stringValue.match(/^\d+%$/)) {
+    const percentValue = stringValue.replace("%", "p");
+    className = `${prefix}-${percentValue}`;
+  }
+  if (!className && stringValue.includes(" ")) {
+    const spacedValue = stringValue.replace(/\s+/g, "-");
+    className = `${prefix}-${spacedValue}`;
+  }
+  if (!className && stringValue === "auto") {
+    className = `${prefix}-auto`;
+  }
+  if (!className && stringValue.includes("/")) {
+    const slashValue = stringValue.replace(/\//g, "s");
+    className = `${prefix}-${slashValue}`;
+  }
+  if (!className) {
+    className = `${prefix}-${stringValue}`;
+  }
+  if (hasIllegalClassChars(className)) {
+    className = `${prefix}-h${shortHash(stringValue)}`;
+  }
+  registerStyleValue(className, value);
+  return className;
+}
 var propertyOrder = Object.keys(propertyMap);
+function stylesToClasses(styles) {
+  if (!styles) return [];
+  const sortedProps = Object.keys(styles).sort((a, b) => {
+    const indexA = propertyOrder.indexOf(a);
+    const indexB = propertyOrder.indexOf(b);
+    const orderA = indexA === -1 ? Infinity : indexA;
+    const orderB = indexB === -1 ? Infinity : indexB;
+    return orderA - orderB;
+  });
+  const classes = [];
+  for (const prop of sortedProps) {
+    const value = styles[prop];
+    if (isStyleMapping(value)) continue;
+    const className = propertyValueToClass(prop, value);
+    if (className) {
+      classes.push(className);
+    }
+  }
+  return classes;
+}
+var CONTAINER_RESERVED_VALUES2 = /* @__PURE__ */ new Set(["auto", "inherit", "initial", "unset", ""]);
+function transformContainerIntent(style) {
+  const w = style.width;
+  const mw = style.maxWidth;
+  if (w == null || mw == null) return style;
+  if (typeof w !== "string" || typeof mw !== "string") return style;
+  if (w !== mw) return style;
+  if (CONTAINER_RESERVED_VALUES2.has(w.trim())) return style;
+  return {
+    ...style,
+    width: "calc(100% - var(--site-margin) * 2)",
+    marginLeft: "auto",
+    marginRight: "auto"
+  };
+}
+function consumeMobileIntoBaseClamp(base, mobile, responsiveScales) {
+  const fluidRange = responsiveScales.fluidRange ?? DEFAULT_FLUID_RANGE;
+  const patchedBase = { ...base };
+  const patchedMobile = { ...mobile };
+  for (const prop of Object.keys(base)) {
+    if (!SCALABLE_CSS_PROPERTIES.has(prop)) continue;
+    const mobileRaw = mobile[prop];
+    if (mobileRaw == null || mobileRaw === "") continue;
+    const baseRaw = base[prop];
+    if (baseRaw == null || baseRaw === "") continue;
+    if (typeof baseRaw !== "string" && typeof baseRaw !== "number") continue;
+    if (typeof mobileRaw !== "string" && typeof mobileRaw !== "number") continue;
+    const baseParsed = parseValue2(String(baseRaw));
+    const mobileParsed = parseValue2(String(mobileRaw));
+    if (!baseParsed || !mobileParsed) continue;
+    if (baseParsed.unit !== mobileParsed.unit) continue;
+    if (baseParsed.unit === "%" || baseParsed.unit === "em") continue;
+    const clampValue = buildFluidClampWithExplicitMin(
+      mobileParsed.value,
+      baseParsed.value,
+      baseParsed.unit,
+      fluidRange.min,
+      fluidRange.max
+    );
+    patchedBase[prop] = clampValue;
+    delete patchedMobile[prop];
+  }
+  return { patchedBase, patchedMobile };
+}
+function responsiveStylesToClasses(styles, options) {
+  if (!styles) return [];
+  const fluidActive = options?.fluidActive === true;
+  const responsiveScales = options?.responsiveScales;
+  const classes = [];
+  if ("base" in styles || "tablet" in styles || "mobile" in styles) {
+    const responsiveStyles = styles;
+    let baseSource = responsiveStyles.base;
+    let mobileSource = responsiveStyles.mobile;
+    if (fluidActive && responsiveScales?.enabled === true && baseSource && mobileSource) {
+      const { patchedBase, patchedMobile } = consumeMobileIntoBaseClamp(
+        baseSource,
+        mobileSource,
+        responsiveScales
+      );
+      baseSource = patchedBase;
+      mobileSource = patchedMobile;
+    }
+    if (baseSource) {
+      const base = fluidActive ? transformContainerIntent(baseSource) : baseSource;
+      classes.push(...stylesToClasses(base));
+    }
+    if (responsiveStyles.tablet) {
+      const tablet = fluidActive ? transformContainerIntent(responsiveStyles.tablet) : responsiveStyles.tablet;
+      const tabletClasses = stylesToClasses(tablet);
+      classes.push(...tabletClasses.map((cls) => `t-${cls}`));
+    }
+    if (mobileSource && Object.keys(mobileSource).length > 0) {
+      const mobile = fluidActive ? transformContainerIntent(mobileSource) : mobileSource;
+      const mobileClasses = stylesToClasses(mobile);
+      classes.push(...mobileClasses.map((cls) => `mob-${cls}`));
+    }
+  } else {
+    const flat = fluidActive ? transformContainerIntent(styles) : styles;
+    classes.push(...stylesToClasses(flat));
+  }
+  return classes;
+}
 
 // ../core/lib/shared/elementClassName.ts
-function shortHash(input) {
+function shortHash2(input) {
   let hash = 5381;
   for (let i = 0; i < input.length; i++) {
     hash = (hash << 5) + hash ^ input.charCodeAt(i);
@@ -2965,25 +3908,79 @@ var defaultValues = {
 var globalContext = { ...defaultValues };
 
 // ../core/lib/shared/interactiveStyleMappings.ts
-function isStyleMapping(value) {
+function isStyleMapping2(value) {
   return typeof value === "object" && value !== null && "_mapping" in value && value._mapping === true;
 }
 
+// ../core/lib/shared/fontCss.ts
+function getFontFormat(path) {
+  if (path.endsWith(".woff2")) return "woff2";
+  if (path.endsWith(".woff")) return "woff";
+  if (path.endsWith(".ttf")) return "truetype";
+  if (path.endsWith(".otf")) return "opentype";
+  return "truetype";
+}
+function getFontMimeType(path) {
+  if (path.endsWith(".woff2")) return "font/woff2";
+  if (path.endsWith(".woff")) return "font/woff";
+  if (path.endsWith(".ttf")) return "font/ttf";
+  if (path.endsWith(".otf")) return "font/otf";
+  return "font/ttf";
+}
+function extractFamilyName(path) {
+  const filename = path.split("/").pop() || "Font";
+  const name = filename.replace(/\.(ttf|woff2?|otf)$/i, "");
+  return name.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function fontFaceCss(fonts) {
+  return (fonts || []).filter((font) => font.path || font.src).map((font) => {
+    const fontPath = font.path || font.src;
+    const format = getFontFormat(fontPath);
+    const family = font.family || extractFamilyName(fontPath);
+    const weight = font.weight ?? 400;
+    const weightMax = font.weightMax;
+    const style = font.style ?? "normal";
+    const fontDisplay = font.fontDisplay;
+    const fontWeight = weightMax != null ? `${weight} ${weightMax}` : weight;
+    const unicodeRange = font.unicodeRange;
+    return `@font-face {
+  font-family: '${family}';
+  src: url('${fontPath}') format('${format}');
+  font-weight: ${fontWeight};
+  font-style: ${style};${fontDisplay ? `
+  font-display: ${fontDisplay};` : ""}${unicodeRange ? `
+  unicode-range: ${unicodeRange};` : ""}
+}`;
+  }).join("\n\n");
+}
+function fontPreloadLinks(fonts) {
+  if (!fonts || fonts.length === 0) return "";
+  return fonts.filter((font) => font.path || font.src).map((font) => {
+    const fontPath = font.path || font.src;
+    const mimeType = getFontMimeType(fontPath);
+    return `<link rel="preload" href="${fontPath}" as="font" type="${mimeType}" crossorigin>`;
+  }).join("\n  ");
+}
+
 export {
   singularize,
   DEFAULT_BREAKPOINTS,
+  generateUtilityCSS,
   generateInteractiveCSS,
-  shortHash,
+  responsiveStylesToClasses,
+  shortHash2 as shortHash,
   DEFAULT_I18N_CONFIG,
   migrateI18nConfig,
   isI18nValue,
   resolveI18nValue,
   extractLocaleFromPath,
   buildLocalizedPath,
-  isStyleMapping,
+  isStyleMapping2 as isStyleMapping,
   parseSortExpression,
   serializeSortExpression,
   parseFilterExpression,
-  serializeFilterExpression
+  serializeFilterExpression,
+  fontFaceCss,
+  fontPreloadLinks
 };
-//# sourceMappingURL=chunk-OT56NX4T.js.map
+//# sourceMappingURL=chunk-I57UVB4P.js.map