meno-core 1.0.48 → 1.0.50

package/dist/chunks/{chunk-3FHJUHAS.js → chunk-7NIC4I3V.js}

@@ -1,17 +1,23 @@
 import {
   DEFAULT_BREAKPOINTS,
+  DEFAULT_FLUID_RANGE,
   DEFAULT_I18N_CONFIG,
+  SCALABLE_CSS_PROPERTIES,
   applyRemConversion,
+  buildFluidClampWithExplicitMin,
+  buildFluidPropertyValue,
   convertPxToRem,
   getBreakpointName,
   getBreakpointValues,
   getScaleMultiplier,
+  getSmallestBreakpointName,
   isI18nValue,
+  parseValue,
   resolveI18nInProps,
   resolveI18nValue,
   scalePropertyValue,
   shouldConvertProperty
-} from "./chunk-B2RTLDXY.js";
+} from "./chunk-AZQYF6KE.js";
 import {
   isTiptapDocument,
   tiptapToHtml
@@ -28,16 +34,25 @@ import {
 
 // lib/shared/validation/schemas.ts
 import { z } from "zod";
-var BasePropTypeSchema, PropTypeSchema, BasePropDefinitionSchema, EnumsConfigSchema, ListItemSchemaSchema, ListPropDefinitionSchema, PropDefinitionSchema, StyleMappingSchema, BooleanMappingSchema, IfConditionSchema, LinkMappingSchema, HtmlMappingSchema, StyleObjectSchema, ResponsiveStyleObjectSchema, StyleValueSchema, InteractiveStyleRuleSchema, InteractiveStylesSchema, SlotMarkerSchema, ComponentNodeSchema, HtmlNodeSchema, ComponentInstanceNodeSchema, EmbedNodeSchema, LinkNodeSchema, LocaleListNodeSchema, ListNodeSchemaBasic, ScriptLoadModeSchema, LibraryPositionSchema, ScriptTypeSchema, JSLibraryConfigSchema, CSSLibraryConfigSchema, LibrariesConfigSchema, StructuredComponentDefinitionSchema, ComponentDefinitionSchema, I18nOrStringSchema, LibraryMergeModeSchema, PageLibrariesConfigSchema, CustomCodeConfigSchema, PageMetaDataBaseSchema, PageMetaDataSchema, LineRangeSchema, JSONPageSchema, PageDataWithComponentSchema, PageDataSchema, CMSFieldTypeSchema, CMSFieldDefinitionSchema, CMSClientDataStrategySchema, CMSClientDataConfigSchema, CMSSchemaSchema, CMSItemSchema, CMSFilterConditionSchema, CMSSortConfigSchema, CMSListQuerySchema, CMSListNodeSchema, PageCmsConfigSchema, PageMetaDataWithCMSSchema;
+var BasePropTypeSchema, PropTypeSchema, I18nValueObjectSchema, BasePropDefinitionSchema, EnumsConfigSchema, ListItemSchemaSchema, ListPropDefinitionSchema, PropDefinitionSchema, StyleMappingSchema, BooleanMappingSchema, IfConditionSchema, LinkMappingSchema, HtmlMappingSchema, StyleObjectSchema, ResponsiveStyleObjectSchema, StyleValueSchema, InteractiveStyleRuleSchema, InteractiveStylesSchema, SlotMarkerSchema, ComponentNodeSchema, HtmlNodeSchema, ComponentInstanceNodeSchema, EmbedNodeSchema, LinkNodeSchema, LocaleListNodeSchema, ListNodeSchemaBasic, ScriptLoadModeSchema, LibraryPositionSchema, ScriptTypeSchema, JSLibraryConfigSchema, CSSLibraryConfigSchema, LibrariesConfigSchema, StructuredComponentDefinitionSchema, ComponentDefinitionSchema, I18nOrStringSchema, LibraryMergeModeSchema, PageLibrariesConfigSchema, CustomCodeConfigSchema, PageMetaDataBaseSchema, PageMetaDataSchema, LineRangeSchema, JSONPageSchema, PageDataWithComponentSchema, PageDataSchema, CMSFieldTypeSchema, CMSFieldDefinitionSchema, CMSClientDataStrategySchema, CMSClientDataConfigSchema, CMSSchemaSchema, CMSItemSchema, CMSDraftItemSchema, CMSFilterConditionSchema, CMSSortConfigSchema, CMSListQuerySchema, CMSListNodeSchema, PageCmsConfigSchema, PageMetaDataWithCMSSchema;
 var init_schemas = __esm({
   "lib/shared/validation/schemas.ts"() {
     "use strict";
     init_constants();
     BasePropTypeSchema = z.enum(["string", "select", "boolean", "number", "link", "file", "rich-text", "embed"]);
     PropTypeSchema = z.enum(["string", "select", "boolean", "number", "link", "file", "rich-text", "embed", "list"]);
+    I18nValueObjectSchema = z.object({
+      _i18n: z.literal(true)
+    }).passthrough();
     BasePropDefinitionSchema = z.object({
       type: BasePropTypeSchema,
-      default: z.union([z.string(), z.number(), z.boolean(), z.object({ href: z.string(), target: z.string().optional() })]).optional(),
+      default: z.union([
+        z.string(),
+        z.number(),
+        z.boolean(),
+        z.object({ href: z.string(), target: z.string().optional() }),
+        I18nValueObjectSchema
+      ]).optional(),
       options: z.array(z.string()).readonly().optional(),
       enumName: z.string().optional(),
       // For 'select' type: reference to project-level enum
@@ -51,7 +66,16 @@ var init_schemas = __esm({
     ListPropDefinitionSchema = z.object({
       type: z.literal("list"),
       itemSchema: ListItemSchemaSchema,
-      default: z.array(z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), z.object({ href: z.string(), target: z.string().optional() }), z.null()]))).optional()
+      // List-item field values can be any primitive, a link object, an `_i18n`
+      // object (resolved by the SSR pipeline), or null.
+      default: z.array(z.record(z.string(), z.union([
+        z.string(),
+        z.number(),
+        z.boolean(),
+        z.object({ href: z.string(), target: z.string().optional() }),
+        I18nValueObjectSchema,
+        z.null()
+      ]))).optional()
     }).passthrough();
     PropDefinitionSchema = z.union([
       ListPropDefinitionSchema,
@@ -113,8 +137,9 @@ var init_schemas = __esm({
     SlotMarkerSchema = z.lazy(() => z.object({
       type: z.literal(NODE_TYPE.SLOT),
       default: z.union([
-        z.array(z.union([ComponentNodeSchema, z.string()])),
-        z.string()
+        z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+        z.string(),
+        I18nValueObjectSchema
       ]).optional()
     }).passthrough());
     HtmlNodeSchema = z.lazy(() => z.object({
@@ -125,12 +150,13 @@ var init_schemas = __esm({
       style: StyleValueSchema.optional(),
       interactiveStyles: InteractiveStylesSchema.optional(),
       generateElementClass: z.boolean().optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
       props: z.record(z.string(), z.any()).optional(),
       // Allow props for backward compatibility
       children: z.union([
-        z.array(z.union([ComponentNodeSchema, z.string()])),
-        z.string()
+        z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+        z.string(),
+        I18nValueObjectSchema
       ]).optional()
     }).passthrough());
     ComponentInstanceNodeSchema = z.lazy(() => z.object({
@@ -142,34 +168,36 @@ var init_schemas = __esm({
       style: StyleValueSchema.optional(),
       interactiveStyles: InteractiveStylesSchema.optional(),
       generateElementClass: z.boolean().optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
       children: z.union([
-        z.array(z.union([ComponentNodeSchema, z.string()])),
-        z.string()
+        z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+        z.string(),
+        I18nValueObjectSchema
       ]).optional()
     }).passthrough());
     EmbedNodeSchema = z.lazy(() => z.object({
       type: z.literal(NODE_TYPE.EMBED),
-      html: z.union([z.string(), HtmlMappingSchema]),
+      html: z.union([z.string(), HtmlMappingSchema, I18nValueObjectSchema]),
       label: z.string().optional(),
       if: IfConditionSchema.optional(),
       style: StyleValueSchema.optional(),
       interactiveStyles: InteractiveStylesSchema.optional(),
       generateElementClass: z.boolean().optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional()
+      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional()
     }).passthrough());
     LinkNodeSchema = z.lazy(() => z.object({
       type: z.literal(NODE_TYPE.LINK),
-      href: z.union([z.string(), LinkMappingSchema]),
+      href: z.union([z.string(), LinkMappingSchema, I18nValueObjectSchema]),
       label: z.string().optional(),
       if: IfConditionSchema.optional(),
       style: StyleValueSchema.optional(),
       interactiveStyles: InteractiveStylesSchema.optional(),
       generateElementClass: z.boolean().optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
       children: z.union([
-        z.array(z.union([ComponentNodeSchema, z.string()])),
-        z.string()
+        z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+        z.string(),
+        I18nValueObjectSchema
       ]).optional()
     }).passthrough());
     LocaleListNodeSchema = z.lazy(() => z.object({
@@ -186,7 +214,7 @@ var init_schemas = __esm({
       showSeparator: z.boolean().optional(),
       showFlag: z.boolean().optional(),
       flagStyle: StyleValueSchema.optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional()
+      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional()
     }).passthrough());
     ListNodeSchemaBasic = z.lazy(() => z.object({
       type: z.union([z.literal(NODE_TYPE.LIST), z.literal("cms-list")]),
@@ -208,7 +236,7 @@ var init_schemas = __esm({
       offset: z.number().optional(),
       excludeCurrentItem: z.boolean().optional(),
       emitTemplate: z.boolean().optional(),
-      children: z.array(z.union([ComponentNodeSchema, z.string()])).optional()
+      children: z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])).optional()
     }).passthrough());
     ComponentNodeSchema = z.union([
       HtmlNodeSchema,
@@ -361,6 +389,12 @@ var init_schemas = __esm({
       _filename: z.string().optional(),
       _createdAt: z.string().optional()
     }).passthrough();
+    CMSDraftItemSchema = z.object({
+      _id: z.string().optional(),
+      _slug: z.string().optional(),
+      _filename: z.string().optional(),
+      _createdAt: z.string().optional()
+    }).passthrough();
     CMSFilterConditionSchema = z.object({
       field: z.string(),
       operator: z.enum(["eq", "neq", "gt", "gte", "lt", "lte", "contains", "in"]).optional(),
@@ -1867,6 +1901,24 @@ function validateCMSItem(data) {
     };
   }
 }
+function validateCMSDraftItem(data) {
+  try {
+    const result = CMSDraftItemSchema.safeParse(data);
+    if (result.success) {
+      return { valid: true, data: result.data };
+    }
+    return { valid: false, errors: zodToValidationErrors(result.error) };
+  } catch (error) {
+    return {
+      valid: false,
+      errors: [{
+        path: "root",
+        message: error instanceof Error ? error.message : "Unknown validation error",
+        code: "UNKNOWN"
+      }]
+    };
+  }
+}
 
 // lib/shared/types/cms.ts
 var IRREGULAR_PLURALS = {
@@ -3020,6 +3072,8 @@ var prefixToCSSProperty = {
   lst: "list-style",
   lstt: "list-style-type",
   lstp: "list-style-position",
+  // Display
+  d: "display",
   // Flexbox
   fd: "flex-direction",
   jc: "justify-content",
@@ -3254,6 +3308,17 @@ function isStyleMapping(value) {
 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) {
@@ -3331,6 +3396,9 @@ function propertyValueToClass(prop, value) {
   if (!className) {
     className = `${prefix}-${stringValue}`;
   }
+  if (hasIllegalClassChars(className)) {
+    className = `${prefix}-h${shortHash(stringValue)}`;
+  }
   registerStyleValue(className, value);
   return className;
 }
@@ -3355,24 +3423,85 @@ function stylesToClasses(styles) {
   }
   return classes;
 }
-function responsiveStylesToClasses(styles) {
+var CONTAINER_RESERVED_VALUES = /* @__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_VALUES.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 = parseValue(String(baseRaw));
+    const mobileParsed = parseValue(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;
-    if (responsiveStyles.base) {
-      classes.push(...stylesToClasses(responsiveStyles.base));
+    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 tabletClasses = stylesToClasses(responsiveStyles.tablet);
+      const tablet = fluidActive ? transformContainerIntent(responsiveStyles.tablet) : responsiveStyles.tablet;
+      const tabletClasses = stylesToClasses(tablet);
       classes.push(...tabletClasses.map((cls) => `t-${cls}`));
     }
-    if (responsiveStyles.mobile) {
-      const mobileClasses = stylesToClasses(responsiveStyles.mobile);
+    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 {
-    classes.push(...stylesToClasses(styles));
+    const flat = fluidActive ? transformContainerIntent(styles) : styles;
+    classes.push(...stylesToClasses(flat));
   }
   return classes;
 }
@@ -3400,6 +3529,12 @@ function classToStyle(className) {
     }
   }
   if (!prop) return null;
+  if (/^h[0-9a-z]+$/.test(value)) {
+    const registered = getStyleValue(cleanClass);
+    if (registered != null) {
+      return { prop, value: String(registered) };
+    }
+  }
   if (value.includes("background") || value.includes("text") || value.includes("border")) {
     return { prop, value: `var(--${value})` };
   }
@@ -3643,7 +3778,7 @@ function convertComponentPathToPagePath(componentPath, componentInstancePath, co
 }
 
 // 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);
@@ -3660,7 +3795,7 @@ function generateElementClassName(ctx) {
     return `${prefix}_${sanitizedFileName}_${sanitizeName(ctx.label)}`;
   }
   const pathString = pathToString(ctx.path);
-  const hash = shortHash(`${ctx.fileName}:${pathString}`);
+  const hash = shortHash2(`${ctx.fileName}:${pathString}`);
   return `${prefix}_${sanitizedFileName}_${hash}`;
 }
 function isElementClassName(className) {
@@ -4019,6 +4154,9 @@ function getClassPropertyOrder(className) {
 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",
@@ -4115,12 +4253,30 @@ function extractPropertyAndValue(className) {
       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];
@@ -4253,6 +4409,80 @@ function generateRuleForClass(className) {
   }
   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;
+  const smallest = getSmallestBreakpointName(breakpoints);
+  if (!smallest) return style;
+  const out = {};
+  for (const [prop, value] of Object.entries(style)) {
+    if (typeof value === "object" && value !== null && "_mapping" in value) {
+      out[prop] = value;
+      continue;
+    }
+    if (value == null || value === "") {
+      out[prop] = value;
+      continue;
+    }
+    const scale = getScaleMultiplier(
+      responsiveScales,
+      prop,
+      smallest
+    );
+    if (scale == null || scale === 1) {
+      out[prop] = value;
+      continue;
+    }
+    const fluidValue = buildFluidPropertyValue(
+      String(value),
+      scale,
+      range.min,
+      range.max,
+      baseRef
+    );
+    out[prop] = fluidValue ?? value;
+  }
+  return out;
+}
+var CONTAINER_RESERVED_VALUES2 = /* @__PURE__ */ new Set(["auto", "inherit", "initial", "unset", ""]);
+function applyContainerPattern(style, fluidActive) {
+  if (!fluidActive) return 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 generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, responsiveScales, remConfig) {
   const css = [];
   const baseClasses = /* @__PURE__ */ new Set();
@@ -4286,7 +4516,7 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
     if (!matched) {
       baseClasses.add(className);
       if (responsiveScales?.enabled) {
-        const propValue = extractPropertyAndValue(className);
+        const propValue = resolveScalablePropertyValue(className);
         if (propValue) {
           const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
           if (category && responsiveScales[category]) {
@@ -4296,18 +4526,23 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
       }
     }
   }
+  const mode = getResponsiveMode(responsiveScales);
+  const fluidActive = responsiveScales?.enabled === true && mode === "fluid";
   for (const className of sortClassesByPropertyOrder(baseClasses)) {
-    const rule = generateRuleForClass(className);
+    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) {
+  if (responsiveScales?.enabled && !fluidActive) {
     for (const className of autoResponsiveClasses) {
-      const propValue = extractPropertyAndValue(className);
+      const propValue = resolveScalablePropertyValue(className);
       if (!propValue) continue;
       const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
       if (!category) continue;
@@ -4392,13 +4627,21 @@ function generateSingleClassCSS(className, breakpoints = DEFAULT_BREAKPOINTS, re
     }
   }
   if (!matched) {
-    const rule = generateRuleForClass(className);
+    let rule = generateRuleForClass(className);
     if (!rule) return "";
+    const mode = getResponsiveMode(responsiveScales);
+    const fluidActive = responsiveScales?.enabled === true && mode === "fluid";
+    if (fluidActive) {
+      const propValue = resolveScalablePropertyValue(className);
+      if (propValue && AUTO_RESPONSIVE_TYPE_MAP[propValue.property]) {
+        rule = applyFluidToUtilityRule(rule, className, responsiveScales, breakpoints);
+      }
+    }
     const escapedClassName = escapeCSSClassName(className);
     const finalRule = applyRemConversion(rule, remConfig);
     css.push(`.${escapedClassName} { ${finalRule} }`);
-    if (responsiveScales?.enabled) {
-      const propValue = extractPropertyAndValue(className);
+    if (responsiveScales?.enabled && !fluidActive) {
+      const propValue = resolveScalablePropertyValue(className);
       if (propValue) {
         const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
         if (category) {
@@ -4536,6 +4779,8 @@ function generateInteractiveCSS(elementClass, interactiveStyles, breakpoints = D
   const css = [];
   const breakpointValues = getBreakpointValues(breakpoints);
   const scalingEnabled = responsiveScales?.enabled === true;
+  const mode = getResponsiveMode(responsiveScales);
+  const fluidActive = scalingEnabled && mode === "fluid";
   for (const rule of interactiveStyles) {
     const { prefix, postfix, style } = rule;
     const fullSelector = `${prefix || ""}.${elementClass}${postfix || ""}`;
@@ -4545,7 +4790,12 @@ function generateInteractiveCSS(elementClass, interactiveStyles, breakpoints = D
     if (isResponsiveStyle2(style)) {
       const responsive = style;
       if (responsive.base && Object.keys(responsive.base).length > 0) {
-        const properties = applyRemConversion(styleObjectToCSS(responsive.base), remConfig);
+        let baseStyle = responsive.base;
+        if (fluidActive) {
+          baseStyle = applyContainerPattern(baseStyle, true);
+          baseStyle = applyFluidToStyle(baseStyle, responsiveScales, breakpoints);
+        }
+        const properties = applyRemConversion(styleObjectToCSS(baseStyle), remConfig);
         if (properties) {
           css.push(`${fullSelector} { ${properties}; }`);
         }
@@ -4554,9 +4804,9 @@ function generateInteractiveCSS(elementClass, interactiveStyles, breakpoints = D
         const explicit = responsive[breakpointName];
         let merged = null;
         if (explicit && Object.keys(explicit).length > 0) {
-          merged = { ...explicit };
+          merged = fluidActive ? applyContainerPattern({ ...explicit }, true) : { ...explicit };
         }
-        if (scalingEnabled && responsive.base) {
+        if (scalingEnabled && !fluidActive && responsive.base) {
           const scaled = scaleStyleForBreakpoint(
             responsive.base,
             responsiveScales,
@@ -4579,11 +4829,16 @@ function generateInteractiveCSS(elementClass, interactiveStyles, breakpoints = D
     } else {
       const flatStyle = style;
       if (Object.keys(flatStyle).length > 0) {
-        const properties = applyRemConversion(styleObjectToCSS(flatStyle), remConfig);
+        let baseFlat = flatStyle;
+        if (fluidActive) {
+          baseFlat = applyContainerPattern(baseFlat, true);
+          baseFlat = applyFluidToStyle(baseFlat, responsiveScales, breakpoints);
+        }
+        const properties = applyRemConversion(styleObjectToCSS(baseFlat), remConfig);
         if (properties) {
           css.push(`${fullSelector} { ${properties}; }`);
         }
-        if (scalingEnabled) {
+        if (scalingEnabled && !fluidActive) {
           for (const [breakpointName, breakpointValue] of sortedBreakpoints) {
             const scaled = scaleStyleForBreakpoint(
               flatStyle,
@@ -4665,6 +4920,7 @@ export {
   validatePageMetaData,
   validateCMSSchema,
   validateCMSItem,
+  validateCMSDraftItem,
   singularize,
   isItemDraftForLocale,
   isItemFullyPublished,
@@ -4789,7 +5045,7 @@ export {
   pathsEqual,
   convertPagePathToComponentPath,
   convertComponentPathToPagePath,
-  shortHash,
+  shortHash2 as shortHash,
   generateElementClassName,
   isElementClassName,
   parseElementClassName,
@@ -4805,10 +5061,11 @@ export {
   isCssNamedColor,
   sortClassesByPropertyOrder,
   generateRuleForClass,
+  applyContainerPattern,
   generateUtilityCSS,
   generateSingleClassCSS,
   extractUtilityClassesFromHTML,
   generateInteractiveCSS,
   generateAllInteractiveCSS
 };
-//# sourceMappingURL=chunk-3FHJUHAS.js.map
+//# sourceMappingURL=chunk-7NIC4I3V.js.map