meno-core 1.0.47 → 1.0.49

package/lib/shared/cssProperties.ts

@@ -421,14 +421,15 @@ function getPropertyPriority(property: string): number {
  * Order determines display order in the UI
  */
 export const CSS_PROPERTY_GROUPS: Record<string, string[]> = {
-  'Layout': ['display', 'position', 'top', 'right', 'bottom', 'left', 'inset', 'zIndex'],
-  'Dimensions': ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'aspectRatio'],
-  'Spacing': ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'gap', 'rowGap', 'columnGap'],
-  'Flexbox': ['flex', 'flexDirection', 'flexWrap', 'flexFlow', 'justifyContent', 'alignItems', 'alignContent', 'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order'],
+  'Layout': ['display'],
+  'Spacing': ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
+  'Size': ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'aspectRatio'],
+  'Position': ['position', 'top', 'right', 'bottom', 'left', 'inset', 'zIndex'],
+  'Flexbox': ['flex', 'flexDirection', 'flexWrap', 'flexFlow', 'justifyContent', 'alignItems', 'alignContent', 'gap', 'rowGap', 'columnGap', 'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order'],
   'Grid': ['grid', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridGap', 'gridColumn', 'gridRow', 'gridArea', 'gridAutoFlow', 'gridAutoColumns', 'gridAutoRows', 'justifyItems', 'justifySelf', 'placeContent', 'placeItems', 'placeSelf'],
-  'Typography': ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'lineHeight', 'textAlign', 'textDecoration', 'textTransform', 'letterSpacing', 'wordSpacing', 'wordBreak', 'overflowWrap', 'textIndent', 'verticalAlign', 'color'],
+  'Typography': ['fontWeight', 'fontSize', 'fontFamily', 'fontStyle', 'lineHeight', 'color', 'textAlign', 'textDecoration', 'textTransform', 'letterSpacing', 'wordSpacing', 'wordBreak', 'overflowWrap', 'textIndent', 'verticalAlign'],
   'Background': ['background', 'backgroundColor', 'backgroundImage', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat', 'opacity'],
-  'Borders': ['border', 'borderWidth', 'borderStyle', 'borderColor', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'],
+  'Borders': ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'border', 'borderWidth', 'borderStyle', 'borderColor', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft'],
   'Outline': ['outline', 'outlineWidth', 'outlineStyle', 'outlineColor', 'outlineOffset'],
   'Effects': ['boxShadow', 'textShadow', 'filter', 'backdropFilter', 'transform', 'transformOrigin', 'transition', 'animation', 'backfaceVisibility', 'mixBlendMode', 'clipPath'],
   'Overflow': ['overflow', 'overflowX', 'overflowY', 'whiteSpace', 'textOverflow', 'visibility', 'content'],
@@ -452,6 +453,165 @@ export function getPropertyGroup(propertyName: string): string {
   return 'Other';
 }
 
+/**
+ * Subset of CSS properties shown as "always-visible" rows in the visual style
+ * editor mode (Webflow-like). Each property here renders even when unset, so
+ * the user can see at a glance which properties are available and click an
+ * empty row to start typing a value.
+ *
+ * Keys must be group names from CSS_PROPERTY_GROUPS so the visual editor can
+ * reuse the same group headers as list mode.
+ */
+export const VISUAL_MODE_PROPERTIES: Record<string, string[]> = {
+  'Layout': ['display'],
+  'Grid': ['gridTemplateColumns'],
+  'Flexbox': ['flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'gap', 'flexGrow', 'flexShrink', 'flexBasis'],
+  'Spacing': ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
+  'Size': ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'],
+  'Position': ['position', 'top', 'right', 'bottom', 'left', 'zIndex'],
+  'Typography': ['fontFamily', 'fontWeight', 'fontSize', 'lineHeight', 'color', 'letterSpacing', 'textAlign', 'textTransform', 'textDecoration'],
+  'Background': ['backgroundColor', 'backgroundImage', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat', 'opacity'],
+  'Borders': ['borderRadius', 'borderWidth', 'borderStyle', 'borderColor'],
+  'Effects': ['boxShadow', 'transform', 'transition', 'filter'],
+  'Overflow': ['overflow', 'whiteSpace'],
+  'Interaction': ['cursor', 'pointerEvents'],
+};
+
+const VISUAL_MODE_PROPERTIES_SET = new Set(
+  Object.values(VISUAL_MODE_PROPERTIES).flat()
+);
+
+/**
+ * True if `prop` belongs to the always-visible visual-mode list.
+ */
+export function isVisualModeProperty(prop: string): boolean {
+  return VISUAL_MODE_PROPERTIES_SET.has(prop);
+}
+
+/**
+ * Context used by visual-mode visibility rules. Captures everything a rule
+ * needs to decide whether a property row is meaningful for the currently
+ * selected element. Built once per render in `StyleEditor`.
+ */
+export interface VisualModeRuleContext {
+  /** Effective `display` of the selected element — getComputedStyle().display
+   *  with declared (instance/inherited/effective) merge as fallback when the
+   *  iframe hasn't loaded yet. Defaults to 'block'. */
+  display: string;
+  /** Effective `display` of the DOM parent — used for flex/grid item props
+   *  whose applicability depends on the parent's layout mode. '' when no
+   *  parent is reachable (root element, iframe missing). */
+  parentDisplay: string;
+  /** Effective `position` of the selected element. Defaults to 'static'. */
+  position: string;
+  /** Lowercase HTML tag name of the selected element ('div', 'img', 'ul'…). */
+  tagName: string;
+  /** True if any of paddingTop / paddingRight / paddingBottom / paddingLeft
+   *  is set anywhere in the cascade (instance + inherited + effective).
+   *  When true, the panel shows the four longhand rows and hides `padding`. */
+  hasPaddingLonghand: boolean;
+  /** Same as `hasPaddingLonghand` for the four `margin*` longhands. */
+  hasMarginLonghand: boolean;
+  /** True if `backgroundImage` (or the `background` shorthand) is set anywhere
+   *  in the cascade. Drives visibility of background-image-only properties
+   *  like `backgroundPosition` / `backgroundSize` / `backgroundRepeat`. */
+  hasBackgroundImage: boolean;
+}
+
+export type VisualModeRule = (ctx: VisualModeRuleContext) => boolean;
+
+const isFlexDisplay = (d: string) => d === 'flex' || d === 'inline-flex';
+const isGridDisplay = (d: string) => d === 'grid' || d === 'inline-grid';
+const isListTag = (t: string) => t === 'ul' || t === 'ol' || t === 'li';
+const isMediaTag = (t: string) => t === 'img' || t === 'video';
+
+/**
+ * Visibility rules for the visual-mode style panel. Each entry is a predicate
+ * that returns true when the row should be rendered for the current element
+ * context. Properties without an entry are always visible. Properties that
+ * are *explicitly set* on the element bypass these rules (the explicit-value
+ * override is enforced by the caller, not here).
+ */
+export const VISUAL_MODE_RULES: Record<string, VisualModeRule> = {
+  // Flex/Grid CONTAINER props — own display must be flex/grid.
+  flexDirection:       ctx => isFlexDisplay(ctx.display),
+  flexWrap:            ctx => isFlexDisplay(ctx.display),
+  justifyContent:      ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  alignItems:          ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  alignContent:        ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  gap:                 ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  rowGap:              ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  columnGap:           ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  gridTemplateColumns: ctx => isGridDisplay(ctx.display),
+  gridTemplateRows:    ctx => isGridDisplay(ctx.display),
+  gridTemplateAreas:   ctx => isGridDisplay(ctx.display),
+  gridGap:             ctx => isGridDisplay(ctx.display),
+  gridAutoFlow:        ctx => isGridDisplay(ctx.display),
+  gridAutoColumns:     ctx => isGridDisplay(ctx.display),
+  gridAutoRows:        ctx => isGridDisplay(ctx.display),
+  justifyItems:        ctx => isGridDisplay(ctx.display),
+  placeItems:          ctx => isGridDisplay(ctx.display),
+  placeContent:        ctx => isGridDisplay(ctx.display),
+
+  // Flex/Grid ITEM props — PARENT display must be flex/grid.
+  flex:        ctx => isFlexDisplay(ctx.parentDisplay),
+  flexFlow:    ctx => isFlexDisplay(ctx.parentDisplay),
+  flexGrow:    ctx => isFlexDisplay(ctx.parentDisplay),
+  flexShrink:  ctx => isFlexDisplay(ctx.parentDisplay),
+  flexBasis:   ctx => isFlexDisplay(ctx.parentDisplay),
+  alignSelf:   ctx => isFlexDisplay(ctx.parentDisplay) || isGridDisplay(ctx.parentDisplay),
+  justifySelf: ctx => isGridDisplay(ctx.parentDisplay),
+  placeSelf:   ctx => isGridDisplay(ctx.parentDisplay),
+  order:       ctx => isFlexDisplay(ctx.parentDisplay) || isGridDisplay(ctx.parentDisplay),
+  gridArea:    ctx => isGridDisplay(ctx.parentDisplay),
+  gridColumn:  ctx => isGridDisplay(ctx.parentDisplay),
+  gridRow:     ctx => isGridDisplay(ctx.parentDisplay),
+
+  // Position-dependent inset properties.
+  top:    ctx => ctx.position !== 'static',
+  right:  ctx => ctx.position !== 'static',
+  bottom: ctx => ctx.position !== 'static',
+  left:   ctx => ctx.position !== 'static',
+  inset:  ctx => ctx.position !== 'static',
+  zIndex: ctx => ctx.position !== 'static',
+
+  // Tag-based.
+  objectFit:         ctx => isMediaTag(ctx.tagName),
+  objectPosition:    ctx => isMediaTag(ctx.tagName),
+  listStyle:         ctx => isListTag(ctx.tagName),
+  listStyleType:     ctx => isListTag(ctx.tagName),
+  listStylePosition: ctx => isListTag(ctx.tagName),
+
+  // Padding/margin shorthand-vs-longhand auto-toggle.
+  // When ANY longhand is set, hide shorthand; otherwise hide longhands.
+  padding:       ctx => !ctx.hasPaddingLonghand,
+  paddingTop:    ctx => ctx.hasPaddingLonghand,
+  paddingRight:  ctx => ctx.hasPaddingLonghand,
+  paddingBottom: ctx => ctx.hasPaddingLonghand,
+  paddingLeft:   ctx => ctx.hasPaddingLonghand,
+  margin:        ctx => !ctx.hasMarginLonghand,
+  marginTop:     ctx => ctx.hasMarginLonghand,
+  marginRight:   ctx => ctx.hasMarginLonghand,
+  marginBottom:  ctx => ctx.hasMarginLonghand,
+  marginLeft:    ctx => ctx.hasMarginLonghand,
+
+  // Background-image-only props — meaningless without a background image.
+  backgroundPosition: ctx => ctx.hasBackgroundImage,
+  backgroundSize:     ctx => ctx.hasBackgroundImage,
+  backgroundRepeat:   ctx => ctx.hasBackgroundImage,
+};
+
+/**
+ * True if `prop` should be visible in the visual-mode panel given `ctx`.
+ * Properties without an entry in `VISUAL_MODE_RULES` default to visible.
+ * Callers are responsible for the explicit-value override (a property that
+ * the user has set must remain visible regardless of the rule outcome).
+ */
+export function isVisualModeRowVisible(prop: string, ctx: VisualModeRuleContext): boolean {
+  const rule = VISUAL_MODE_RULES[prop];
+  return rule ? rule(ctx) : true;
+}
+
 /**
  * Check if property matches the abbreviation pattern
  * For example, "bC" matches "backgroundColor" (b→b, C→C capital letter)
@@ -563,3 +723,33 @@ export function filterPropertyValues(propertyName: string, input: string): strin
 export function getPropertyType(propertyName: string): 'string' | 'select' | 'boolean' | 'number' | undefined {
   return CSS_PROPERTIES_DEFINITION[propertyName]?.type;
 }
+
+/**
+ * CSS properties whose numeric values are unitless by spec — `font-weight: 400`,
+ * `line-height: 1.5`, `opacity: 0.8`, `z-index: 10`, etc. The auto-px commit
+ * normalizer must NOT append `px` to bare numbers for these.
+ */
+export const UNITLESS_PROPERTIES: ReadonlySet<string> = new Set([
+  'fontWeight', 'lineHeight',
+  'opacity', 'fillOpacity', 'strokeOpacity', 'stopOpacity',
+  'zIndex', 'order',
+  'flexGrow', 'flexShrink', 'flex',
+  'columnCount', 'columns', 'tabSize', 'orphans', 'widows',
+  'gridRow', 'gridColumn', 'gridRowStart', 'gridRowEnd',
+  'gridColumnStart', 'gridColumnEnd',
+  'animationIterationCount',
+  'aspectRatio',
+  'scale',
+]);
+
+/**
+ * Whether bare numeric values for `propertyName` should be treated as pixels at
+ * commit time (e.g. typing `52` for `width` becomes `52px`). Unitless props,
+ * `select`/`boolean` keyword props, and existing `number`-typed entries return false.
+ */
+export function appendsPxByDefault(propertyName: string): boolean {
+  if (UNITLESS_PROPERTIES.has(propertyName)) return false;
+  const def = CSS_PROPERTIES_DEFINITION[propertyName];
+  if (def?.type === 'select' || def?.type === 'boolean' || def?.type === 'number') return false;
+  return true;
+}

package/lib/shared/elementClassName.test.ts

@@ -164,6 +164,21 @@ describe("generateElementClassName", () => {
 
       expect(className1).not.toBe(className2);
     });
+
+    test("should generate different hashes for sibling paths (only last index differs)", () => {
+      // Regression: a 5-char hash truncated from the high-order digits
+      // collapsed to one value when only the final path index changed,
+      // making every set of siblings share a class in the Webflow export.
+      const base = ["Layout", [0, 0, 1, 0, 0]] as const;
+      const siblings = [0, 1, 2, 3, 4].map((i) =>
+        generateElementClassName({
+          fileType: "component",
+          fileName: base[0],
+          path: [...base[1], i],
+        })
+      );
+      expect(new Set(siblings).size).toBe(siblings.length);
+    });
   });
 
   describe("Component-relative paths", () => {

package/lib/shared/elementClassName.ts

@@ -33,13 +33,17 @@ export interface ElementClassContext {
  * Simple djb2 hash function that works in browser and server
  * Returns a short alphanumeric string
  */
-function shortHash(input: string): string {
+export function shortHash(input: string): string {
   let hash = 5381;
   for (let i = 0; i < input.length; i++) {
     hash = ((hash << 5) + hash) ^ input.charCodeAt(i);
   }
-  // Convert to base36 (alphanumeric) and take first 5 chars
-  return Math.abs(hash).toString(36).slice(0, 5);
+  // Take the LAST 5 base36 chars: the low-order digits change with every
+  // input byte, so sibling paths that share a long prefix and differ only
+  // in their final index still produce distinct hashes. Slicing from the
+  // start kept the high-order digits, which barely move when only the
+  // last char of the input changes — every set of siblings collided.
+  return Math.abs(hash).toString(36).slice(-5);
 }
 
 /**

package/lib/shared/interfaces/contentProvider.ts

@@ -99,26 +99,59 @@ export interface CMSSchemaInfo {
  * CMS Provider Interface
  * Abstracts CMS data loading from the underlying storage mechanism
  * (follows same pattern as PageProvider)
+ *
+ * Draft model: each item may have a published version (`{filename}.json`)
+ * and/or a draft version (`{filename}.draft.json`). The published-facing
+ * methods (`getItems`, `getItemByFilename`, `getItemBySlug`, `getItemById`)
+ * return ONLY published items. Draft access goes through the `*Draft`
+ * methods. SSR and the static export must never read drafts.
  */
 export interface CMSProvider {
   /** Load all CMS schemas (extracted from page files with source: 'cms') */
   getAllSchemas(): Promise<Map<string, CMSSchemaInfo>>;
 
-  /** Load all items for a collection */
+  /** Load all PUBLISHED items for a collection */
   getItems(collection: string): Promise<CMSItem[]>;
 
-  /** Get single item by filename (stable identifier) */
+  /** Get single PUBLISHED item by filename (stable identifier) */
   getItemByFilename(collection: string, filename: string): Promise<CMSItem | null>;
 
-  /** Get single item by slug (backward compat - maps to filename lookup) */
+  /** Get single PUBLISHED item by slug (backward compat - maps to filename lookup) */
   getItemBySlug(collection: string, slug: string): Promise<CMSItem | null>;
 
-  /** Get single item by ID */
+  /** Get single PUBLISHED item by ID */
   getItemById(collection: string, id: string): Promise<CMSItem | null>;
 
-  /** Save item (for editor) - saves to cms/<collection>/<_filename>.json */
+  /** Save item (published) - writes to cms/<collection>/<_filename>.json */
   saveItem(collection: string, item: CMSItem): Promise<void>;
 
-  /** Delete item by filename */
+  /**
+   * Delete item by filename. Removes both the published file and any
+   * accompanying draft file.
+   */
   deleteItem(collection: string, filename: string): Promise<void>;
+
+  // ---- Draft-version methods --------------------------------------------
+
+  /** Get the draft version of an item, or null if no draft exists */
+  getDraft(collection: string, filename: string): Promise<CMSItem | null>;
+
+  /** List all drafts in a collection (used by Studio item list for badges) */
+  getAllDrafts(collection: string): Promise<CMSItem[]>;
+
+  /** Whether a draft file exists for the given filename */
+  hasDraft(collection: string, filename: string): Promise<boolean>;
+
+  /** Save the draft version of an item to cms/<collection>/<_filename>.draft.json */
+  saveDraft(collection: string, item: CMSItem): Promise<void>;
+
+  /** Discard the draft version of an item (no-op if no draft exists) */
+  discardDraft(collection: string, filename: string): Promise<void>;
+
+  /**
+   * Promote a draft to published. Reads `{filename}.draft.json`, writes its
+   * content to `{filename}.json`, then removes the draft file.
+   * Returns the newly published item. Throws if no draft exists.
+   */
+  publishDraft(collection: string, filename: string): Promise<CMSItem>;
 }

package/lib/shared/pathSecurity.ts

@@ -93,3 +93,19 @@ export const SAFE_IDENTIFIER_REGEX = /^[a-zA-Z0-9_-]+$/;
 export function isValidIdentifier(name: string): boolean {
   return SAFE_IDENTIFIER_REGEX.test(name);
 }
+
+/**
+ * Suffix used for CMS draft files: `{filename}.draft.json`. The provider must
+ * never accept user-supplied filenames ending in `.draft`, because that would
+ * clash with the draft-suffix convention and let a user shadow another item's
+ * draft file.
+ */
+export const CMS_DRAFT_SUFFIX = '.draft';
+
+/**
+ * True when a user-supplied CMS filename collides with the reserved `.draft`
+ * suffix. Use as a hard reject in CMS provider write paths.
+ */
+export function isReservedDraftFilename(filename: string): boolean {
+  return filename.endsWith(CMS_DRAFT_SUFFIX);
+}

package/lib/shared/registry/nodeTypes/ListNodeType.ts

@@ -107,7 +107,7 @@ export const ListNodeType = createNodeType({
   },
 
   treeDisplay: {
-    icon: 'HTML_ELEMENT',
+    icon: 'ARRAY',
     getLabel: (node) => {
       const listNode = node as ListNode;
       const sourceType = listNode.sourceType || 'prop';

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();
+    });
   });
 });