meno-core 1.0.48 → 1.0.49

package/lib/shared/cssGeneration.test.ts

@@ -1,8 +1,9 @@
 import { describe, expect, test } from 'bun:test';
-import { generateRuleForClass, generateUtilityCSS, generateSingleClassCSS, extractUtilityClassesFromHTML, generateInteractiveCSS } from './cssGeneration';
+import { generateRuleForClass, generateUtilityCSS, generateSingleClassCSS, extractUtilityClassesFromHTML, generateInteractiveCSS, applyContainerPattern } from './cssGeneration';
 import { DEFAULT_BREAKPOINTS } from './breakpoints';
 import type { ResponsiveScales } from './responsiveScaling';
 import type { InteractiveStyles } from './types/styles';
+import { registerStyleValue, clearRegistry } from './styleValueRegistry';
 
 describe('extractUtilityClassesFromHTML', () => {
   test('extracts ins- classes', () => {
@@ -135,6 +136,20 @@ describe('cssGeneration', () => {
     });
   });
 
+  describe('display (d-) prefix for non-special values', () => {
+    test('d-contents generates display: contents', () => {
+      expect(generateRuleForClass('d-contents')).toBe('display: contents;');
+    });
+
+    test('d-flow-root generates display: flow-root', () => {
+      expect(generateRuleForClass('d-flow-root')).toBe('display: flow-root;');
+    });
+
+    test('d-table generates display: table', () => {
+      expect(generateRuleForClass('d-table')).toBe('display: table;');
+    });
+  });
+
   describe('bc- and bt- combination', () => {
     test('bc- controls color independently from bt-', () => {
       // bt- should NOT set color, allowing bc- to control it
@@ -296,3 +311,254 @@ describe('generateInteractiveCSS — auto-responsive scaling', () => {
     expect(cssNoScales).not.toContain('@media');
   });
 });
+
+describe('fluid mode — clamp() emission', () => {
+  const fluidScales: ResponsiveScales = {
+    enabled: true,
+    mode: 'fluid',
+    baseReference: 16,
+    fluidRange: { min: 320, max: 1440 },
+    fontSize: { tablet: 0.88, mobile: 0.75 },
+    padding: { tablet: 0.75, mobile: 0.5 },
+  };
+
+  test('generateUtilityCSS emits a single clamp() rule with no @media for auto-responsive class', () => {
+    const classes = new Set(['fs-32px']);
+    const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, fluidScales);
+    // mobile.breakpoint=540 is the smallest in DEFAULT_BREAKPOINTS, mobile scale=0.75
+    // so MIN = 32 + (32-16)*(0.75-1) = 32 - 4 = 28; MAX = 32
+    expect(css).toContain('.fs-32px');
+    expect(css).toContain('clamp(28px,');
+    expect(css).toContain(', 32px)');
+    expect(css).not.toContain('@media');
+  });
+
+  test('generateUtilityCSS leaves non-scalable class unchanged in fluid mode', () => {
+    const classes = new Set(['z-2']);
+    const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, fluidScales);
+    expect(css).toContain('z-index: 2');
+    expect(css).not.toContain('clamp(');
+  });
+
+  test('generateSingleClassCSS emits clamp() in fluid mode', () => {
+    const css = generateSingleClassCSS('p-40px', DEFAULT_BREAKPOINTS, fluidScales);
+    // mobile padding scale=0.5 → MIN = 40 + (40-16)*(0.5-1) = 40 - 12 = 28
+    expect(css).toContain('clamp(28px,');
+    expect(css).toContain(', 40px)');
+    expect(css).not.toContain('@media');
+  });
+
+  test('breakpoints mode (default when mode is undefined) keeps existing @media behavior', () => {
+    const breakpointScales: ResponsiveScales = { ...fluidScales, mode: undefined };
+    const classes = new Set(['fs-32px']);
+    const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, breakpointScales);
+    expect(css).toContain('@media (max-width: 1024px)');
+    expect(css).toContain('@media (max-width: 540px)');
+    expect(css).not.toContain('clamp(');
+  });
+
+  test('generateInteractiveCSS encodes scaling as clamp() on base rule, no @media', () => {
+    const styles: InteractiveStyles = [
+      { prefix: '', postfix: ':hover', style: { fontSize: '100px' } },
+    ];
+    const css = generateInteractiveCSS('c_heading', styles, DEFAULT_BREAKPOINTS, undefined, fluidScales);
+    // mobile fontSize scale=0.75 → MIN = 100 + (100-16)*(0.75-1) = 79
+    expect(css).toContain('clamp(79px,');
+    expect(css).toContain(', 100px)');
+    expect(css).not.toContain('@media');
+  });
+
+  test('size category (max-width / width / height) IS fluidly scaled in fluid mode', () => {
+    const fluidWithSize: ResponsiveScales = {
+      ...fluidScales,
+      size: { tablet: 0.9, mobile: 0.75 },
+    };
+    const classes = new Set(['mw-1200px']);
+    const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, fluidWithSize);
+    // mobile size scale=0.75 → MIN = 1200 + (1200-16)*(0.75-1) = 1200 - 296 = 904
+    expect(css).toContain('clamp(904px,');
+    expect(css).toContain(', 1200px)');
+    expect(css).not.toContain('@media');
+  });
+
+  test('generateInteractiveCSS keeps explicit per-breakpoint override as @media in fluid mode', () => {
+    const styles: InteractiveStyles = [
+      {
+        prefix: '',
+        postfix: ':hover',
+        style: {
+          base: { fontSize: '100px' },
+          mobile: { fontSize: '60px' },
+        },
+      },
+    ];
+    const css = generateInteractiveCSS('c_btn', styles, DEFAULT_BREAKPOINTS, undefined, fluidScales);
+    // base rule has clamp from auto-scale
+    expect(css).toContain('clamp(79px,');
+    // explicit mobile override stays as a media-query rule with the user's value
+    expect(css).toMatch(/@media \(max-width: 540px\) \{[^}]*font-size:\s*60px/);
+  });
+
+  // Hash-fallback utility classes (e.g. `fs-h1glej9a` for `222.3px` — the `.`
+  // is illegal in CSS selectors, so utilityClassMapper generates a hashed name
+  // and stores the real value in styleValueRegistry). The scaling pipeline
+  // previously bailed on these because extractPropertyAndValue returns null
+  // for hashed classes. resolveScalablePropertyValue now consults the registry.
+  describe('hash-fallback classes', () => {
+    test('fluid mode: hashed fs- class with px value gets clamp()', () => {
+      clearRegistry();
+      registerStyleValue('fs-h1glej9a', '222.3px');
+      const css = generateUtilityCSS(new Set(['fs-h1glej9a']), DEFAULT_BREAKPOINTS, fluidScales);
+      // mobile fontSize scale=0.75, baseRef=16
+      // MIN = 222.3 + (222.3 - 16)*(0.75 - 1) = 222.3 - 51.575 = 170.725 → round 171
+      expect(css).toMatch(/\.fs-h1glej9a\s*\{\s*font-size:\s*clamp\(171px,/);
+      expect(css).toContain(', 222.3px)');
+      expect(css).not.toContain('@media');
+    });
+
+    test('fluid mode: hashed class at baseReference renders plain (MIN===MAX, no clamp)', () => {
+      clearRegistry();
+      registerStyleValue('fs-hatref', '16px');
+      const css = generateUtilityCSS(new Set(['fs-hatref']), DEFAULT_BREAKPOINTS, fluidScales);
+      // 16 === baseReference → calculateResponsiveValue returns 16 → MIN===MAX → no clamp
+      expect(css).toContain('font-size: 16px');
+      expect(css).not.toContain('clamp(');
+    });
+
+    test('fluid mode: hashed class with fractional px value above baseReference clamps with rounded MIN', () => {
+      clearRegistry();
+      registerStyleValue('fs-hfrac', '14.4px');
+      const css = generateUtilityCSS(new Set(['fs-hfrac']), DEFAULT_BREAKPOINTS, fluidScales);
+      // 14.4 < baseRef (16) → calculateResponsiveValue floors to round(14.4) = 14
+      // MIN=14, MAX=14.4 → small clamp emitted
+      expect(css).toMatch(/font-size:\s*clamp\(14px,/);
+      expect(css).toContain(', 14.4px)');
+    });
+
+    test('fluid mode: hashed class with already-clamped Webflow value passes through unchanged', () => {
+      clearRegistry();
+      const webflowClamp = 'clamp(2*1rem, ((2 - 1)/70*20)*1rem + ((2 - 1)/70)*100vw, 4*1rem)';
+      registerStyleValue('p-hwebflow', webflowClamp);
+      const css = generateUtilityCSS(new Set(['p-hwebflow']), DEFAULT_BREAKPOINTS, fluidScales);
+      // buildFluidPropertyValue returns null for unparseable inputs → rule stays as-is
+      expect(css).toContain(webflowClamp);
+      // no double-clamping
+      const clampCount = (css.match(/clamp\(/g) || []).length;
+      expect(clampCount).toBe(1);
+    });
+
+    test('breakpoints mode: hashed class with px value gets @media-scaled', () => {
+      clearRegistry();
+      registerStyleValue('p-h1glej9a', '40px');
+      const breakpointScales: ResponsiveScales = { ...fluidScales, mode: 'breakpoints' };
+      const css = generateUtilityCSS(new Set(['p-h1glej9a']), DEFAULT_BREAKPOINTS, breakpointScales);
+      // Base rule
+      expect(css).toContain('padding: 40px');
+      // mobile padding scale=0.5 → 40 + (40-16)*(0.5-1) = 28
+      expect(css).toMatch(/@media \(max-width: 540px\) \{[^}]*padding:\s*28px/);
+    });
+
+    test('generateSingleClassCSS handles hashed class in fluid mode', () => {
+      clearRegistry();
+      registerStyleValue('fs-htest1', '100px');
+      const css = generateSingleClassCSS('fs-htest1', DEFAULT_BREAKPOINTS, fluidScales);
+      // mobile fontSize 0.75 → MIN = 100 + (100-16)*(0.75-1) = 79
+      expect(css).toContain('clamp(79px,');
+      expect(css).toContain(', 100px)');
+    });
+  });
+});
+
+describe('applyContainerPattern', () => {
+  test('width === maxWidth in fluid mode → calc + auto margins, maxWidth retained', () => {
+    const result = applyContainerPattern({ width: '1200px', maxWidth: '1200px' }, true);
+    expect(result.width).toBe('calc(100% - var(--site-margin) * 2)');
+    expect(result.maxWidth).toBe('1200px');
+    expect(result.marginLeft).toBe('auto');
+    expect(result.marginRight).toBe('auto');
+  });
+
+  test('width === maxWidth in breakpoints mode → unchanged', () => {
+    const input = { width: '1200px', maxWidth: '1200px' };
+    const result = applyContainerPattern(input, false);
+    expect(result).toBe(input);
+  });
+
+  test('width !== maxWidth → unchanged', () => {
+    const input = { width: '1200px', maxWidth: '800px' };
+    const result = applyContainerPattern(input, true);
+    expect(result).toBe(input);
+  });
+
+  test('only width set, no maxWidth → unchanged', () => {
+    const input = { width: '1200px' };
+    const result = applyContainerPattern(input, true);
+    expect(result).toBe(input);
+  });
+
+  test('width === maxWidth === "auto" → unchanged (RESERVED)', () => {
+    const input = { width: 'auto', maxWidth: 'auto' };
+    const result = applyContainerPattern(input, true);
+    expect(result).toBe(input);
+  });
+
+  test('width === maxWidth === "100%" → trigger fires (legitimate use)', () => {
+    const result = applyContainerPattern({ width: '100%', maxWidth: '100%' }, true);
+    expect(result.width).toBe('calc(100% - var(--site-margin) * 2)');
+    expect(result.marginLeft).toBe('auto');
+    expect(result.marginRight).toBe('auto');
+  });
+
+  test('explicit marginLeft is overwritten with auto (per spec)', () => {
+    const result = applyContainerPattern(
+      { width: '1200px', maxWidth: '1200px', marginLeft: '0', marginRight: '12px' },
+      true
+    );
+    expect(result.marginLeft).toBe('auto');
+    expect(result.marginRight).toBe('auto');
+  });
+
+  test('preserves unrelated properties (padding, font-size)', () => {
+    const result = applyContainerPattern(
+      { width: '1200px', maxWidth: '1200px', padding: '20px', fontSize: '16px' },
+      true
+    );
+    expect(result.padding).toBe('20px');
+    expect(result.fontSize).toBe('16px');
+  });
+});
+
+describe('generateInteractiveCSS — container pattern integration', () => {
+  test('flat hover style with width === maxWidth in fluid mode emits container CSS', () => {
+    const fluidScales: ResponsiveScales = {
+      enabled: true,
+      mode: 'fluid',
+      baseReference: 16,
+      fluidRange: { min: 320, max: 1440 },
+      siteMargin: { min: 16, max: 32 },
+    };
+    const styles: InteractiveStyles = [
+      { prefix: '', postfix: ':hover', style: { width: '1200px', maxWidth: '1200px' } },
+    ];
+    const css = generateInteractiveCSS('c_card', styles, DEFAULT_BREAKPOINTS, undefined, fluidScales);
+    expect(css).toContain('width: calc(100% - var(--site-margin) * 2)');
+    expect(css).toContain('max-width: 1200px');
+    expect(css).toContain('margin-left: auto');
+    expect(css).toContain('margin-right: auto');
+  });
+
+  test('breakpoints mode emits raw width and maxWidth, no container pattern', () => {
+    const breakpointsScales: ResponsiveScales = {
+      enabled: true,
+      mode: 'breakpoints',
+      baseReference: 16,
+    };
+    const styles: InteractiveStyles = [
+      { prefix: '', postfix: ':hover', style: { width: '1200px', maxWidth: '1200px' } },
+    ];
+    const css = generateInteractiveCSS('c_card', styles, DEFAULT_BREAKPOINTS, undefined, breakpointsScales);
+    expect(css).not.toContain('calc(');
+    expect(css).toContain('width: 1200px');
+    expect(css).toContain('max-width: 1200px');
+  });
+});

package/lib/shared/cssGeneration.ts

@@ -9,8 +9,14 @@ import { getStyleValue, getDynamicStyle, isDynamicClass } from './styleValueRegi
 import { isCssNamedColor } from './cssNamedColors';
 import type { BreakpointConfig, LegacyBreakpointConfig } from './breakpoints';
 import { DEFAULT_BREAKPOINTS, getBreakpointValues } from './breakpoints';
-import type { ResponsiveScales, CSSPropertyType } from './responsiveScaling';
-import { scalePropertyValue, getScaleMultiplier } from './responsiveScaling';
+import type { ResponsiveScales, CSSPropertyType, ResponsiveMode } from './responsiveScaling';
+import {
+  scalePropertyValue,
+  getScaleMultiplier,
+  buildFluidPropertyValue,
+  getSmallestBreakpointName,
+  DEFAULT_FLUID_RANGE,
+} from './responsiveScaling';
 import type { InteractiveStyles, StyleObject, ResponsiveStyleObject, StyleValue } from './types/styles';
 import type { RemConversionConfig } from './pxToRem';
 import { applyRemConversion, convertPxToRem, shouldConvertProperty } from './pxToRem';
@@ -69,6 +75,14 @@ export function sortClassesByPropertyOrder(classes: Iterable<string>): string[]
   return Array.from(classes).sort((a, b) => getClassPropertyOrder(a) - getClassPropertyOrder(b));
 }
 
+/**
+ * Pick the active responsive mode. Defaults to 'breakpoints' when missing,
+ * preserving behavior for projects saved before the 'fluid' option existed.
+ */
+function getResponsiveMode(scales: ResponsiveScales | undefined | null): ResponsiveMode {
+  return (scales?.mode as ResponsiveMode | undefined) ?? 'breakpoints';
+}
+
 /** CSS property → responsive scale category mapping (used by generateUtilityCSS and generateSingleClassCSS) */
 const AUTO_RESPONSIVE_TYPE_MAP: Record<string, string> = {
   'padding': 'padding',
@@ -192,6 +206,15 @@ function extractPropertyAndValue(className: string): { property: string; value:
       const classValue = className.substring(knownPrefix.length + 1);
       const cssProp = prefixToCSSProperty[knownPrefix];
       if (cssProp) {
+        // Hash-fallback class (e.g. `pt-h1y9pr6i`): the part after the
+        // prefix is a hash, not a real CSS value. Returning `value: 'h1y9pr6i'`
+        // would make auto-responsive scaling and other downstream consumers
+        // emit broken rules like `padding-top: h1y9pr6i;`. The class IS
+        // resolvable via the style-value registry — `generateRuleForClass`
+        // handles it directly. Skip the dynamic-extraction path here.
+        if (/^h[0-9a-z]+$/.test(classValue)) {
+          return null;
+        }
         return { property: cssProp, value: classValue };
       }
     }
@@ -200,6 +223,39 @@ function extractPropertyAndValue(className: string): { property: string; value:
   return null;
 }
 
+/**
+ * Resolve `{ property, value }` for a utility class, consulting the style-value
+ * registry for hash-fallback classes (e.g. `fs-h1glej9a` for `222.3px`).
+ *
+ * Used by the auto-responsive scaling path so hashed classes don't silently
+ * bypass `clamp()` / `@media` rewriting. `extractPropertyAndValue` itself
+ * intentionally returns null for hashed classes because its other consumers
+ * would emit broken `${prop}: ${hash};` rules.
+ *
+ * Returns the registered value as-is (no parsing). Downstream helpers
+ * (`buildFluidPropertyValue`, `scalePropertyValue`) already null out
+ * unparseable / `%` / `em` / `var()` / clamp-blob inputs, so a Webflow-style
+ * already-clamped value will pass through untouched via the existing
+ * `if (!fluidValue) return rule;` guards.
+ */
+function resolveScalablePropertyValue(className: string): { property: string; value: string } | null {
+  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;
+}
+
 /**
  * Generate CSS rule for a utility class
  * Handles dynamic classes like p-10px, m-20px, fs-48px, etc.
@@ -409,6 +465,139 @@ export function generateRuleForClass(className: string): string | null {
   return `${cssProp}: ${value};`;
 }
 
+/**
+ * In fluid mode, return a CSS declaration string with the value replaced by
+ * `clamp(...)` when the property is auto-responsive AND has a small-end scale.
+ * Otherwise returns the original `rule` unchanged.
+ *
+ * The MIN of the clamp comes from the smallest configured breakpoint's
+ * multiplier, matching the user-confirmed mapping (mobile multiplier ⇒ MIN,
+ * base value ⇒ MAX, tablet ignored in fluid mode).
+ */
+function applyFluidToUtilityRule(
+  rule: string,
+  className: string,
+  responsiveScales: ResponsiveScales,
+  breakpoints: BreakpointConfig
+): string {
+  const propValue = resolveScalablePropertyValue(className);
+  if (!propValue) return rule;
+
+  const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
+  if (!category) return rule;
+
+  const scaleConfig = responsiveScales[category as keyof ResponsiveScales] as
+    | Record<string, number>
+    | undefined;
+  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};`;
+}
+
+/**
+ * In fluid mode, transform a flat StyleObject by replacing each scalable
+ * property's value with a `clamp(...)` expression. Properties without a
+ * matching scale category pass through unchanged.
+ */
+function applyFluidToStyle(
+  style: StyleObject,
+  responsiveScales: ResponsiveScales,
+  breakpoints: BreakpointConfig
+): StyleObject {
+  const range = responsiveScales.fluidRange ?? DEFAULT_FLUID_RANGE;
+  const baseRef = responsiveScales.baseReference ?? 16;
+  const smallest = getSmallestBreakpointName(breakpoints);
+  if (!smallest) return style;
+
+  const out: StyleObject = {};
+  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 as CSSPropertyType,
+      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;
+}
+
+/** Values that don't make sense in a fluid container pattern. */
+const CONTAINER_RESERVED_VALUES = new Set(['auto', 'inherit', 'initial', 'unset', '']);
+
+/**
+ * Detect "container intent" on a flat StyleObject and rewrite it into the
+ * fluid container pattern. Trigger: `width === maxWidth` (both set, equal).
+ *
+ * Transformation:
+ *   { width: '1200px', maxWidth: '1200px' }
+ *   → { width: 'calc(100% - var(--site-margin) * 2)', maxWidth: '1200px',
+ *       marginLeft: 'auto', marginRight: 'auto' }
+ *
+ * No-op when fluid mode is inactive (`fluidActive === false`) — the
+ * `--site-margin` CSS variable is only emitted in fluid mode, so emitting the
+ * calc() in breakpoints mode would reference an undefined variable.
+ *
+ * Margins are ALWAYS overwritten with `auto` (per user spec), even if the
+ * caller had set explicit values.
+ */
+export function applyContainerPattern(
+  style: StyleObject,
+  fluidActive: boolean
+): StyleObject {
+  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_VALUES.has(w.trim())) return style;
+
+  return {
+    ...style,
+    width: 'calc(100% - var(--site-margin) * 2)',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  };
+}
+
 /**
  * Generate CSS for all utility classes used in the application
  * Scans through all classes and generates the necessary CSS rules
@@ -473,7 +662,7 @@ export function generateUtilityCSS(
 
       // Check if this class should get auto-responsive scaling
       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 as keyof ResponsiveScales]) {
@@ -484,10 +673,17 @@ export function generateUtilityCSS(
     }
   }
 
+  const mode = getResponsiveMode(responsiveScales);
+  const fluidActive = responsiveScales?.enabled === true && mode === 'fluid';
+
   // Generate base rules — sorted so shorthands (border) appear before longhands (border-color)
   for (const className of sortClassesByPropertyOrder(baseClasses)) {
-    const rule = generateRuleForClass(className);
+    let rule = generateRuleForClass(className);
     if (rule) {
+      // In fluid mode, replace auto-responsive raw values with clamp() expressions.
+      if (fluidActive && autoResponsiveClasses.has(className)) {
+        rule = applyFluidToUtilityRule(rule, className, responsiveScales!, breakpoints);
+      }
       // Escape special characters in class name for CSS selector
       const escapedClassName = escapeCSSClassName(className);
       const finalRule = applyRemConversion(rule, remConfig);
@@ -499,10 +695,11 @@ export function generateUtilityCSS(
   type MediaQueryMap = Record<string, { classes: Array<{ className: string; rule: string }>; value: number }>;
   const autoResponsiveMediaQueries: MediaQueryMap = {};
 
-  // Generate auto-responsive rules for classes with enabled scaling
-  if (responsiveScales?.enabled) {
+  // Generate auto-responsive rules for classes with enabled scaling.
+  // In fluid mode the base rule already encodes scaling via clamp(), so skip @media.
+  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];
@@ -640,16 +837,27 @@ export function generateSingleClassCSS(
 
   if (!matched) {
     // Base (non-responsive) class
-    const rule = generateRuleForClass(className);
+    let rule = generateRuleForClass(className);
     if (!rule) return '';
 
+    const mode = getResponsiveMode(responsiveScales);
+    const fluidActive = responsiveScales?.enabled === true && mode === 'fluid';
+
+    // In fluid mode, replace auto-responsive raw values with clamp().
+    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} }`);
 
-    // Auto-responsive scaling
-    if (responsiveScales?.enabled) {
-      const propValue = extractPropertyAndValue(className);
+    // Auto-responsive scaling via @media — only in 'breakpoints' mode.
+    if (responsiveScales?.enabled && !fluidActive) {
+      const propValue = resolveScalablePropertyValue(className);
       if (propValue) {
         const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
         if (category) {
@@ -862,6 +1070,8 @@ export function generateInteractiveCSS(
   // Extract breakpoint values for CSS media queries
   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;
@@ -878,9 +1088,15 @@ export function generateInteractiveCSS(
       // Generate responsive rules
       const responsive = style as ResponsiveStyleObject;
 
-      // Base styles
+      // Base styles — in fluid mode rewrite scalable values to clamp()
+      // and rewrite width===maxWidth into the container pattern.
       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}; }`);
         }
@@ -891,12 +1107,13 @@ export function generateInteractiveCSS(
 
         // Merge explicit breakpoint styles with auto-scaled values derived
         // from the base, skipping any property the author explicitly set.
+        // In fluid mode skip the auto-scaled portion — base already has clamp().
         let merged: StyleObject | null = 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!,
@@ -921,13 +1138,18 @@ export function generateInteractiveCSS(
       // Flat style object
       const flatStyle = style as StyleObject;
       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}; }`);
         }
 
-        // Auto-scale the flat style into each enabled breakpoint.
-        if (scalingEnabled) {
+        // Auto-scale the flat style into each enabled breakpoint — breakpoints mode only.
+        if (scalingEnabled && !fluidActive) {
           for (const [breakpointName, breakpointValue] of sortedBreakpoints) {
             const scaled = scaleStyleForBreakpoint(
               flatStyle,