meno-core 1.0.47 → 1.0.49

package/lib/shared/responsiveScaling.ts

@@ -11,18 +11,47 @@
  */
 export type BreakpointScales = Record<string, number>;
 
+export type ResponsiveMode = 'breakpoints' | 'fluid';
+
+export interface FluidRange {
+  /** Lower viewport bound in pixels (e.g. 320) */
+  min: number;
+  /** Upper viewport bound in pixels (e.g. 1440) */
+  max: number;
+}
+
+export interface SiteMarginConfig {
+  /** Lower bound of the side margin at smallest viewport (px). */
+  min: number;
+  /** Upper bound of the side margin at largest viewport (px). */
+  max: number;
+}
+
 export interface ResponsiveScales {
   enabled: boolean;
+  /** Scaling strategy. Missing → 'breakpoints' (back-compat with old configs). */
+  mode?: ResponsiveMode;
   baseReference: number;
+  /** Viewport bounds used when `mode === 'fluid'`. Defaults to 320 / 1440 px. */
+  fluidRange?: FluidRange;
+  /**
+   * Container side margin range, in fluid mode emitted as a CSS variable
+   * `--site-margin: clamp(min, …, max)` on `:root`. Lets users write
+   * `width: calc(100% - var(--site-margin) * 2)` for the container pattern.
+   */
+  siteMargin?: SiteMarginConfig;
   fontSize?: BreakpointScales;
   padding?: BreakpointScales;
   margin?: BreakpointScales;
   gap?: BreakpointScales;
   borderRadius?: BreakpointScales;
   size?: BreakpointScales;
-  [key: string]: boolean | number | BreakpointScales | undefined;
+  [key: string]: boolean | number | string | BreakpointScales | FluidRange | SiteMarginConfig | undefined;
 }
 
+export const DEFAULT_FLUID_RANGE: FluidRange = { min: 320, max: 1440 };
+export const DEFAULT_SITE_MARGIN: SiteMarginConfig = { min: 16, max: 32 };
+
 export type CSSPropertyType = 'fontSize' | 'padding' | 'margin' | 'gap' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'rowGap' | 'columnGap' | 'borderRadius' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'width' | 'height' | 'maxWidth' | 'maxHeight' | 'minWidth' | 'minHeight';
 
 /**
@@ -44,7 +73,7 @@ function getScaleCategory(property: CSSPropertyType): keyof ResponsiveScales | n
  * Extract numeric value and unit from a CSS value string
  * e.g., "67px" -> { value: 67, unit: "px" }
  */
-function parseValue(valueStr: string): { value: number; unit: string } | null {
+export function parseValue(valueStr: string): { value: number; unit: string } | null {
   const match = valueStr.trim().match(/^(-?[\d.]+)(px|rem|em|%|pt)$/);
   if (!match) return null;
   return {
@@ -53,6 +82,59 @@ function parseValue(valueStr: string): { value: number; unit: string } | null {
   };
 }
 
+/**
+ * CSS properties that get fluid `clamp()` / breakpoint scaling. Mirrors the
+ * `AUTO_RESPONSIVE_TYPE_MAP` keys in `cssGeneration.ts`; centralized here so
+ * `utilityClassMapper.ts` can consult it without a cross-module import cycle.
+ */
+export const SCALABLE_CSS_PROPERTIES: ReadonlySet<string> = 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',
+]);
+
 /**
  * Calculate responsive value using the formula:
  * responsive_value = base_value + (base_value - base_reference) * (scale - 1)
@@ -224,12 +306,181 @@ export function resolveVariableValueAtBreakpoint(
   return variable.value;
 }
 
+/**
+ * Pick the smallest (most restrictive) breakpoint name from a config object,
+ * by `breakpoint` field. Used in fluid mode to choose which scale multiplier
+ * defines the MIN of the clamp.
+ *
+ * Returns null if there are no entries.
+ */
+export function getSmallestBreakpointName(
+  breakpoints: Record<string, { breakpoint: number }> | undefined | null
+): string | null {
+  if (!breakpoints) return null;
+  const entries = Object.entries(breakpoints);
+  if (entries.length === 0) return null;
+  let smallestName = entries[0][0];
+  let smallestWidth = entries[0][1].breakpoint;
+  for (const [name, cfg] of entries) {
+    if (cfg.breakpoint < smallestWidth) {
+      smallestWidth = cfg.breakpoint;
+      smallestName = name;
+    }
+  }
+  return smallestName;
+}
+
+/**
+ * Build a `clamp(MIN, intercept + slope*100vw, MAX)` expression that interpolates
+ * linearly between (vpMin, MIN) and (vpMax, MAX).
+ *
+ * - `baseValue` is the desktop/MAX value in CSS units.
+ * - `unit` is the CSS unit ("px", "rem", etc.) used for both bounds.
+ * - `scale` is the multiplier applied at the small end (mobile). Reuses
+ *   `calculateResponsiveValue` so the same multipliers used in 'breakpoints'
+ *   mode produce the same MIN endpoint in 'fluid' mode.
+ * - `vpMin` / `vpMax` are viewport widths in pixels.
+ *
+ * If MIN === MAX (e.g. value at or below baseReference, or scale === 1),
+ * returns a plain `${baseValue}${unit}` — no clamp emitted.
+ */
+export function buildFluidClamp(
+  baseValue: number,
+  unit: string,
+  scale: number,
+  vpMin: number,
+  vpMax: number,
+  baseReference = 16
+): string {
+  const max = baseValue;
+  const min = calculateResponsiveValue(baseValue, baseReference, scale);
+
+  if (min === max || vpMax === vpMin) {
+    return `${formatNumber(max)}${unit}`;
+  }
+
+  // Convert viewport bounds into the same unit as the value, so the
+  // intercept term stays in `unit`. For px / rem we keep px throughout vw maths
+  // but emit the intercept in the value's unit by converting (1rem = 16px).
+  const unitToPx = unit === 'rem' ? 16 : 1;
+  const minPx = min * unitToPx;
+  const maxPx = max * unitToPx;
+  const slopePx = (maxPx - minPx) / (vpMax - vpMin); // px per px-of-viewport
+  const interceptPx = minPx - slopePx * vpMin; // px
+  const interceptInUnit = interceptPx / unitToPx;
+  const slopeVw = slopePx * 100; // because 1vw = viewport_width / 100 px
+
+  return `clamp(${formatNumber(min)}${unit}, ${formatNumber(interceptInUnit)}${unit} + ${formatNumber(slopeVw)}vw, ${formatNumber(max)}${unit})`;
+}
+
+/**
+ * Build a `clamp(MIN, intercept + slope*100vw, MAX)` expression where MIN is
+ * supplied directly (e.g. from an authored mobile override) rather than
+ * derived from `responsiveScales` × `baseReference`.
+ *
+ * Used when a node has both `style.base.<prop>` and `style.mobile.<prop>` in
+ * fluid mode — the mobile value is consumed as the clamp's small end so the
+ * smooth interpolation lands exactly on the authored mobile value at the
+ * narrow viewport, avoiding the jump that a separate @media override would
+ * create.
+ *
+ * Same units / vw math as `buildFluidClamp`. Returns plain `${max}${unit}`
+ * when MIN === MAX or the viewport range degenerates.
+ */
+export function buildFluidClampWithExplicitMin(
+  minValue: number,
+  maxValue: number,
+  unit: string,
+  vpMin: number,
+  vpMax: number
+): string {
+  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})`;
+}
+
+/**
+ * Trim noisy floating-point output (e.g. 21.81818181818182 → 21.8182).
+ */
+function formatNumber(n: number): string {
+  if (Number.isInteger(n)) return String(n);
+  return Number(n.toFixed(4)).toString();
+}
+
+/**
+ * Build the CSS value for the `--site-margin` variable in fluid mode.
+ * Always emits a clamp() going from `siteMargin.min` to `siteMargin.max` (px),
+ * interpolated linearly across `fluidRange.min`..`fluidRange.max`.
+ *
+ * If `min === max` the function returns the plain value (no clamp).
+ */
+export function buildSiteMarginClamp(
+  siteMargin: SiteMarginConfig,
+  fluidRange: FluidRange
+): string {
+  const { min, max } = siteMargin;
+  const { min: vpMin, max: vpMax } = fluidRange;
+
+  if (min === max || vpMax === vpMin) {
+    return `${formatNumber(max)}px`;
+  }
+
+  const slopePx = (max - min) / (vpMax - vpMin);
+  const interceptPx = min - slopePx * vpMin;
+  const slopeVw = slopePx * 100;
+
+  return `clamp(${formatNumber(min)}px, ${formatNumber(interceptPx)}px + ${formatNumber(slopeVw)}vw, ${formatNumber(max)}px)`;
+}
+
+/**
+ * Build a fluid clamp() value for a CSS string value (e.g. "32px", "2rem").
+ * Multi-value strings ("20px 40px") are scaled per-token, like
+ * `scalePropertyValue` does for breakpoint mode. Tokens without a unit
+ * (`0`, `auto`, `inherit`) are kept verbatim.
+ *
+ * Returns null if no token is scalable.
+ */
+export function buildFluidPropertyValue(
+  valueStr: string,
+  scale: number,
+  vpMin: number,
+  vpMax: number,
+  baseReference = 16
+): string | null {
+  const parts = parseMultiValue(valueStr);
+  if (parts.length === 0) return null;
+
+  let anyScaled = false;
+  const out = parts.map(part => {
+    const parsed = parseValue(part);
+    if (!parsed) return part;
+    if (parsed.unit === '%' || parsed.unit === 'em') return part;
+    anyScaled = true;
+    return buildFluidClamp(parsed.value, parsed.unit, scale, vpMin, vpMax, baseReference);
+  });
+
+  return anyScaled ? out.join(' ') : null;
+}
+
 /**
  * Default responsive scales configuration
  */
 export const DEFAULT_RESPONSIVE_SCALES: ResponsiveScales = {
   enabled: false,
+  mode: 'breakpoints',
   baseReference: 16,
+  fluidRange: { ...DEFAULT_FLUID_RANGE },
+  siteMargin: { ...DEFAULT_SITE_MARGIN },
   fontSize: {
     tablet: 0.88,
     mobile: 0.75,

package/lib/shared/themeDefaults.test.ts

@@ -82,9 +82,9 @@ describe('themeDefaults', () => {
     });
 
     test('should have text colors', () => {
-      expect(DEFAULT_PROPS_PANEL_COLORS.text).toBe('#cccccc');
+      expect(DEFAULT_PROPS_PANEL_COLORS.text).toBe('#ebebeb');
       expect(DEFAULT_PROPS_PANEL_COLORS.textSecondary).toBe('#cccccc');
-      expect(DEFAULT_PROPS_PANEL_COLORS.textMuted).toBe('#888888');
+      expect(DEFAULT_PROPS_PANEL_COLORS.textMuted).toBe('#b0b0b0');
     });
 
     test('should have code syntax colors', () => {
@@ -127,7 +127,7 @@ describe('themeDefaults', () => {
     test('should have text colors', () => {
       expect(LIGHT_PROPS_PANEL_COLORS.text).toBe('#1a1a1a');
       expect(LIGHT_PROPS_PANEL_COLORS.textSecondary).toBe('#333333');
-      expect(LIGHT_PROPS_PANEL_COLORS.textMuted).toBe('#666666');
+      expect(LIGHT_PROPS_PANEL_COLORS.textMuted).toBe('#525a63');
     });
 
     test('should have code syntax colors', () => {

package/lib/shared/themeDefaults.ts

@@ -85,9 +85,9 @@ export const DEFAULT_PROPS_PANEL_COLORS: PropsPanelColors = {
   backgroundTertiary: '#252525',
   border: '#333333',
   borderSecondary: '#444444',
-  text: '#cccccc',
+  text: '#ebebeb',
   textSecondary: '#cccccc',
-  textMuted: '#888888',
+  textMuted: '#b0b0b0',
   codeString: '#ffffff',
   codeNumber: '#b5cea8',
   codeKey: '#9cdcfe',
@@ -114,7 +114,7 @@ export const LIGHT_PROPS_PANEL_COLORS: PropsPanelColors = {
   borderSecondary: '#d0d0d0',
   text: '#1a1a1a',
   textSecondary: '#333333',
-  textMuted: '#666666',
+  textMuted: '#525a63',
   codeString: '#a31515',
   codeNumber: '#098658',
   codeKey: '#0451a5',

package/lib/shared/types/cms.ts

@@ -96,9 +96,14 @@ export interface CMSItem {
   /** ISO timestamp when item was created */
   _createdAt?: string;
   /**
-   * Locale codes where this item is in draft state.
-   * undefined or [] = published for all locales (backward compatible).
-   * ['fr', 'de'] = French and German are draft, other locales published.
+   * Locale codes where this item is hidden from the live site.
+   * undefined or [] = visible for all locales (backward compatible).
+   * ['fr', 'de'] = French and German are hidden, other locales visible.
+   *
+   * NOTE: this is locale-level visibility ("Hidden" in the UI), NOT the WIP
+   * draft-version concept. The draft version of an item is stored in a
+   * sibling `{filename}.draft.json` file. The legacy `_draftLocales` name
+   * is preserved for backward compatibility.
    */
   _draftLocales?: string[];
   /**
@@ -107,10 +112,30 @@ export interface CMSItem {
    * Example: "/blog/my-post" for urlPattern "/blog/{{slug}}"
    */
   _url?: string;
+  /**
+   * Transient flag set when an item was loaded from a `{filename}.draft.json`
+   * file (i.e. it is the draft version, not the published one). Never persisted.
+   */
+  _isDraft?: boolean;
+  /**
+   * Transient flag set on a published item when a draft sibling exists.
+   * Used by the Studio item list to render a "Has draft" badge. Never persisted.
+   */
+  _hasDraft?: boolean;
   /** User-defined fields based on schema */
   [field: string]: unknown;
 }
 
+/**
+ * Bundle of both versions of a CMS item, returned by editor APIs.
+ * - `published` is omitted for draft-only items (new items not yet published).
+ * - `draft` is omitted when there are no pending changes.
+ */
+export interface CMSItemVersions {
+  published?: CMSItem;
+  draft?: CMSItem;
+}
+
 /** CMS Collection - schema + items */
 export interface CMSCollection {
   schema: CMSSchema;

package/lib/shared/types/index.ts

@@ -82,6 +82,7 @@ export type {
   CMSClientDataConfig,
   CMSSchema,
   CMSItem,
+  CMSItemVersions,
   CMSCollection,
   CMSRouteMatch,
   CMSFilterOperator,
@@ -153,6 +154,7 @@ export {
   VARIABLE_GROUPS,
   VARIABLE_GROUP_VALUES,
   VARIABLE_TYPES,
+  VARIABLE_TYPE_VALUES,
   getGroupForProperty,
   getGroupAbbreviation,
   getDefaultScalingType,

package/lib/shared/types/variables.ts

@@ -19,7 +19,13 @@ export type VariableGroup =
   | 'line-height' | 'letter-spacing'
   | 'margin' | 'padding' | 'gap'
   | 'size'
+  | 'position'
   | 'border-radius' | 'border-width'
+  | 'outline'
+  | 'shadow'
+  | 'filter'
+  | 'duration'
+  | 'aspect-ratio'
   | 'opacity' | 'z-index'
   | 'text-align'
   | 'other';
@@ -35,8 +41,14 @@ export const VARIABLE_GROUPS: { value: VariableGroup; label: string }[] = [
   { value: 'padding', label: 'Padding' },
   { value: 'gap', label: 'Gap' },
   { value: 'size', label: 'Size' },
+  { value: 'position', label: 'Position' },
   { value: 'border-radius', label: 'Border Radius' },
   { value: 'border-width', label: 'Border Width' },
+  { value: 'outline', label: 'Outline' },
+  { value: 'shadow', label: 'Shadow' },
+  { value: 'filter', label: 'Filter' },
+  { value: 'duration', label: 'Duration' },
+  { value: 'aspect-ratio', label: 'Aspect Ratio' },
   { value: 'opacity', label: 'Opacity' },
   { value: 'z-index', label: 'Z-Index' },
   { value: 'text-align', label: 'Text Align' },
@@ -56,6 +68,26 @@ const CSS_PROPERTY_TO_GROUP: Record<string, VariableGroup> = {
   'text-align': 'text-align',
   'opacity': 'opacity',
   'z-index': 'z-index',
+  'top': 'position',
+  'right': 'position',
+  'bottom': 'position',
+  'left': 'position',
+  'inset': 'position',
+  'inset-block': 'position',
+  'inset-inline': 'position',
+  'inset-block-start': 'position',
+  'inset-block-end': 'position',
+  'inset-inline-start': 'position',
+  'inset-inline-end': 'position',
+  'box-shadow': 'shadow',
+  'text-shadow': 'shadow',
+  'filter': 'filter',
+  'backdrop-filter': 'filter',
+  'aspect-ratio': 'aspect-ratio',
+  'transition-duration': 'duration',
+  'animation-duration': 'duration',
+  'transition-delay': 'duration',
+  'animation-delay': 'duration',
 };
 
 /** Prefix-based mappings for CSS properties */
@@ -81,6 +113,8 @@ const CSS_PROPERTY_PREFIX_GROUPS: { prefix: string; group: VariableGroup }[] = [
   { prefix: 'border-right-width', group: 'border-width' },
   { prefix: 'border-bottom-width', group: 'border-width' },
   { prefix: 'border-left-width', group: 'border-width' },
+  { prefix: 'outline-width', group: 'outline' },
+  { prefix: 'outline-offset', group: 'outline' },
 ];
 
 /**
@@ -142,6 +176,9 @@ export const VARIABLE_TYPES: { value: VariableType; label: string }[] = [
   { value: 'none', label: 'None' },
 ];
 
+/** All valid variable scaling type values */
+export const VARIABLE_TYPE_VALUES: VariableType[] = VARIABLE_TYPES.map(t => t.value);
+
 /**
  * Returns an abbreviation for a variable group by taking the first letter of each word.
  * e.g. 'letter-spacing' -> 'ls', 'font-size' -> 'fs', 'spacing' -> 's'

package/lib/shared/utilityClassConfig.ts

@@ -221,6 +221,9 @@ export const prefixToCSSProperty: Record<string, string> = {
   lstt: 'list-style-type',
   lstp: 'list-style-position',
 
+  // Display
+  d: 'display',
+
   // Flexbox
   fd: 'flex-direction',
   jc: 'justify-content',

package/lib/shared/utilityClassMapper.test.ts

@@ -1,5 +1,7 @@
 import { describe, test, expect } from 'bun:test';
 import { stylesToClasses, responsiveStylesToClasses, classToStyle, classesToStyles } from './utilityClassMapper';
+import { getStyleValue, clearRegistry } from './styleValueRegistry';
+import type { ResponsiveScales } from './responsiveScaling';
 
 describe('utilityClassMapper', () => {
   describe('stylesToClasses', () => {
@@ -93,6 +95,127 @@ describe('utilityClassMapper', () => {
       expect(responsiveStylesToClasses(null)).toEqual([]);
       expect(responsiveStylesToClasses(undefined)).toEqual([]);
     });
+
+    describe('fluid mode — mobile-as-MIN consumption', () => {
+      const fluidScales: ResponsiveScales = {
+        enabled: true,
+        mode: 'fluid',
+        baseReference: 16,
+        fluidRange: { min: 320, max: 1700 },
+        fontSize: { tablet: 0.8, mobile: 0.5 },
+        padding: { tablet: 0.75, mobile: 0.5 },
+      };
+
+      test('consumes scalable mobile override into base clamp; no mob- class emitted', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          { base: { fontSize: '150px' }, mobile: { fontSize: '94px' } },
+          { fluidActive: true, responsiveScales: fluidScales }
+        );
+        // base became a hashed class wrapping clamp(94px, ..., 150px)
+        const hashed = classes.find((c) => /^fs-h[0-9a-z]+$/.test(c));
+        expect(hashed).toBeDefined();
+        expect(getStyleValue(hashed!)).toMatch(/^clamp\(94px,/);
+        expect(getStyleValue(hashed!)).toContain(', 150px)');
+        // no .mob-fs-* emitted
+        expect(classes.some((c) => c.startsWith('mob-fs-'))).toBe(false);
+      });
+
+      test('mobile-only non-scalable property (display) stays as mob- class', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          {
+            base: { fontSize: '150px' },
+            mobile: { fontSize: '94px', display: 'none' },
+          },
+          { fluidActive: true, responsiveScales: fluidScales }
+        );
+        // fontSize consumed into base clamp
+        const hashed = classes.find((c) => /^fs-h[0-9a-z]+$/.test(c));
+        expect(hashed).toBeDefined();
+        expect(getStyleValue(hashed!)).toMatch(/^clamp\(94px,/);
+        // display:none survives on mobile
+        expect(classes).toContain('mob-h');
+      });
+
+      test('tablet override stays as .t-* class (unchanged behavior)', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          {
+            base: { fontSize: '150px' },
+            tablet: { fontSize: '120px' },
+            mobile: { fontSize: '94px' },
+          },
+          { fluidActive: true, responsiveScales: fluidScales }
+        );
+        expect(classes).toContain('t-fs-120px');
+        // mobile consumed
+        expect(classes.some((c) => c.startsWith('mob-fs-'))).toBe(false);
+      });
+
+      test('no mobile override → base passes through unchanged (no consumption)', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          { base: { fontSize: '150px' } },
+          { fluidActive: true, responsiveScales: fluidScales }
+        );
+        expect(classes).toContain('fs-150px');
+        expect(classes.some((c) => /^fs-h/.test(c))).toBe(false);
+      });
+
+      test('mismatched units (rem vs px) → falls back, mob- class still emitted', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          { base: { fontSize: '10rem' }, mobile: { fontSize: '94px' } },
+          { fluidActive: true, responsiveScales: fluidScales }
+        );
+        expect(classes).toContain('fs-10rem');
+        expect(classes).toContain('mob-fs-94px');
+      });
+
+      test('non-scalable mobile override (display) is not consumed', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          { base: { display: 'flex' }, mobile: { display: 'block' } },
+          { fluidActive: true, responsiveScales: fluidScales }
+        );
+        expect(classes).toContain('f');
+        expect(classes).toContain('mob-b');
+      });
+
+      test('fluidActive off → no consumption, mob- class emitted', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          { base: { fontSize: '150px' }, mobile: { fontSize: '94px' } },
+          { fluidActive: false, responsiveScales: fluidScales }
+        );
+        expect(classes).toContain('fs-150px');
+        expect(classes).toContain('mob-fs-94px');
+      });
+
+      test('fluidActive on but responsiveScales disabled → no consumption', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          { base: { fontSize: '150px' }, mobile: { fontSize: '94px' } },
+          { fluidActive: true, responsiveScales: { ...fluidScales, enabled: false } }
+        );
+        expect(classes).toContain('fs-150px');
+        expect(classes).toContain('mob-fs-94px');
+      });
+
+      test('clamp math: MIN=94px, MAX=150px, fluidRange 320–1700', () => {
+        clearRegistry();
+        const classes = responsiveStylesToClasses(
+          { base: { fontSize: '150px' }, mobile: { fontSize: '94px' } },
+          { fluidActive: true, responsiveScales: fluidScales }
+        );
+        const hashed = classes.find((c) => /^fs-h[0-9a-z]+$/.test(c))!;
+        const value = String(getStyleValue(hashed));
+        // slope = (150-94)/(1700-320) = 56/1380 ≈ 0.04058 px/px → slopeVw ≈ 4.058vw
+        // intercept = 94 - 0.04058*320 = 94 - 12.9855 ≈ 81.0145px
+        expect(value).toMatch(/clamp\(94px,\s*81\.0145px\s*\+\s*4\.058vw,\s*150px\)/);
+      });
+    });
   });
 
   describe('classToStyle', () => {