meno-core 1.0.48 → 1.0.49

package/lib/shared/responsiveScaling.test.ts

@@ -7,6 +7,13 @@ import {
   scalePropertyValue,
   getResponsiveValues,
   DEFAULT_RESPONSIVE_SCALES,
+  DEFAULT_FLUID_RANGE,
+  DEFAULT_SITE_MARGIN,
+  buildFluidClamp,
+  buildFluidClampWithExplicitMin,
+  buildFluidPropertyValue,
+  buildSiteMarginClamp,
+  getSmallestBreakpointName,
   type ResponsiveScales,
   type CSSPropertyType,
   type BreakpointScales,
@@ -381,5 +388,141 @@ describe('responsiveScaling', () => {
         mobile: 0.4,
       });
     });
+
+    test('should default mode to "breakpoints" and provide fluidRange', () => {
+      expect(DEFAULT_RESPONSIVE_SCALES.mode).toBe('breakpoints');
+      expect(DEFAULT_RESPONSIVE_SCALES.fluidRange).toEqual({ min: 320, max: 1440 });
+      expect(DEFAULT_FLUID_RANGE).toEqual({ min: 320, max: 1440 });
+    });
+  });
+
+  describe('buildFluidClamp', () => {
+    test('px input — produces clamp(MIN, intercept + slope*100vw, MAX)', () => {
+      // base 32, scale 0.75 → MIN = 32 + (32-16)*(0.75-1) = 32 - 4 = 28
+      // slope_px = (32-28)/(1440-320) = 4/1120 ≈ 0.003571
+      // intercept_px = 28 - 0.003571*320 ≈ 26.857
+      // slope_vw = slope_px*100 ≈ 0.357
+      const result = buildFluidClamp(32, 'px', 0.75, 320, 1440);
+      expect(result.startsWith('clamp(28px,')).toBe(true);
+      expect(result.endsWith(', 32px)')).toBe(true);
+      expect(result).toContain('vw');
+    });
+
+    test('returns plain value (no clamp) when MIN === MAX', () => {
+      // 16 with scale 0.5 stays 16 because <= baseReference.
+      expect(buildFluidClamp(16, 'px', 0.5, 320, 1440)).toBe('16px');
+    });
+
+    test('returns plain value when scale === 1', () => {
+      expect(buildFluidClamp(32, 'px', 1, 320, 1440)).toBe('32px');
+    });
+
+    test('rem input — emits a clamp() with rem unit on both bounds', () => {
+      // calculateResponsiveValue rounds, so we use a large enough rem value that
+      // MIN and MAX stay distinct after rounding. base=8rem, scale=0.5, baseRef=1
+      // → MIN = round(8 + (8-1)*(-0.5)) = round(4.5) = 5
+      const result = buildFluidClamp(8, 'rem', 0.5, 20, 90, 1.0);
+      expect(result.startsWith('clamp(5rem,')).toBe(true);
+      expect(result.endsWith(', 8rem)')).toBe(true);
+      expect(result).toContain('vw');
+    });
+  });
+
+  describe('buildFluidClampWithExplicitMin', () => {
+    test('px input — MIN=94, MAX=150, fluidRange 320–1700', () => {
+      // slope_px = (150-94)/(1700-320) = 56/1380 ≈ 0.04058 → slope_vw ≈ 4.058
+      // intercept = 94 - 0.04058*320 ≈ 81.0145
+      const result = buildFluidClampWithExplicitMin(94, 150, 'px', 320, 1700);
+      expect(result).toMatch(/^clamp\(94px,\s*81\.0145px\s*\+\s*4\.058vw,\s*150px\)$/);
+    });
+
+    test('returns plain MAX when MIN === MAX', () => {
+      expect(buildFluidClampWithExplicitMin(50, 50, 'px', 320, 1700)).toBe('50px');
+    });
+
+    test('returns plain MAX when vpMin === vpMax (degenerate range)', () => {
+      expect(buildFluidClampWithExplicitMin(40, 80, 'px', 1000, 1000)).toBe('80px');
+    });
+
+    test('rem unit — bounds emitted in rem', () => {
+      const result = buildFluidClampWithExplicitMin(2, 4, 'rem', 320, 1440);
+      expect(result.startsWith('clamp(2rem,')).toBe(true);
+      expect(result.endsWith(', 4rem)')).toBe(true);
+    });
+
+    test('mobile larger than desktop (negative slope) still produces a valid clamp', () => {
+      // The function doesn't enforce min<max; it just interpolates. Useful when
+      // an author wants the value to shrink as viewport grows.
+      const result = buildFluidClampWithExplicitMin(200, 100, 'px', 320, 1700);
+      expect(result.startsWith('clamp(200px,')).toBe(true);
+      expect(result.endsWith(', 100px)')).toBe(true);
+    });
+  });
+
+  describe('buildFluidPropertyValue', () => {
+    test('single px value → single clamp()', () => {
+      const out = buildFluidPropertyValue('32px', 0.75, 320, 1440);
+      expect(out).not.toBeNull();
+      expect(out!.startsWith('clamp(')).toBe(true);
+    });
+
+    test('multi-value padding "20px 40px" → both tokens scaled', () => {
+      const out = buildFluidPropertyValue('20px 40px', 0.5, 320, 1440);
+      expect(out).not.toBeNull();
+      const parts = out!.split(' ');
+      // The two tokens get joined by space — but each clamp() also has spaces inside.
+      // Check both clamp(...) substrings present.
+      expect((out!.match(/clamp\(/g) ?? []).length).toBe(2);
+    });
+
+    test('"%" and "em" pass through verbatim', () => {
+      expect(buildFluidPropertyValue('50%', 0.5, 320, 1440)).toBeNull();
+      expect(buildFluidPropertyValue('1.5em', 0.5, 320, 1440)).toBeNull();
+    });
+
+    test('"auto" pass through (no scalable token) → null', () => {
+      expect(buildFluidPropertyValue('auto', 0.5, 320, 1440)).toBeNull();
+    });
+
+    test('mixed "20px auto" → first token clamped, second kept', () => {
+      const out = buildFluidPropertyValue('20px auto', 0.5, 320, 1440);
+      expect(out).not.toBeNull();
+      expect(out).toContain('clamp(');
+      expect(out!.endsWith(' auto')).toBe(true);
+    });
+  });
+
+  describe('buildSiteMarginClamp', () => {
+    test('emits clamp with px on both bounds', () => {
+      const out = buildSiteMarginClamp({ min: 16, max: 32 }, { min: 320, max: 1440 });
+      expect(out.startsWith('clamp(16px,')).toBe(true);
+      expect(out.endsWith(', 32px)')).toBe(true);
+      expect(out).toContain('vw');
+    });
+
+    test('returns plain px when min === max', () => {
+      expect(buildSiteMarginClamp({ min: 16, max: 16 }, { min: 320, max: 1440 }))
+        .toBe('16px');
+    });
+
+    test('default DEFAULT_SITE_MARGIN is 16/32', () => {
+      expect(DEFAULT_SITE_MARGIN).toEqual({ min: 16, max: 32 });
+    });
+  });
+
+  describe('getSmallestBreakpointName', () => {
+    test('picks the entry with smallest breakpoint value', () => {
+      const bp = {
+        tablet: { breakpoint: 1024 },
+        mobile: { breakpoint: 540 },
+        small: { breakpoint: 360 },
+      };
+      expect(getSmallestBreakpointName(bp)).toBe('small');
+    });
+
+    test('returns null for empty / undefined', () => {
+      expect(getSmallestBreakpointName(undefined)).toBeNull();
+      expect(getSmallestBreakpointName({})).toBeNull();
+    });
   });
 });

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,

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',