meno-core 1.0.47 → 1.0.49

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,

package/lib/shared/cssProperties.test.ts

@@ -2,12 +2,32 @@ import { describe, test, expect } from 'bun:test';
 import {
   CSS_PROPERTIES,
   CSS_PROPERTIES_DEFINITION,
+  CSS_PROPERTY_GROUPS,
   filterCSSProperties,
   getPropertyValues,
   filterPropertyValues,
-  getPropertyType
+  getPropertyType,
+  VISUAL_MODE_PROPERTIES,
+  isVisualModeProperty,
+  VISUAL_MODE_RULES,
+  isVisualModeRowVisible,
+  type VisualModeRuleContext,
+  UNITLESS_PROPERTIES,
+  appendsPxByDefault,
 } from './cssProperties';
 
+const baseCtx: VisualModeRuleContext = {
+  display: 'block',
+  parentDisplay: 'block',
+  position: 'static',
+  tagName: 'div',
+  hasPaddingLonghand: false,
+  hasMarginLonghand: false,
+  hasBackgroundImage: false,
+};
+const ctx = (overrides: Partial<VisualModeRuleContext> = {}): VisualModeRuleContext =>
+  ({ ...baseCtx, ...overrides });
+
 describe('cssProperties', () => {
   describe('CSS_PROPERTIES', () => {
     test('is an array of property names', () => {
@@ -249,4 +269,230 @@ describe('cssProperties', () => {
       expect(getPropertyType('padding')).toBe('string');
     });
   });
+
+  describe('VISUAL_MODE_PROPERTIES', () => {
+    test('contains common Webflow-style groups', () => {
+      expect(VISUAL_MODE_PROPERTIES['Layout']).toContain('display');
+      expect(VISUAL_MODE_PROPERTIES['Spacing']).toContain('padding');
+      expect(VISUAL_MODE_PROPERTIES['Typography']).toContain('fontSize');
+    });
+
+    test('every group name maps to a known CSS_PROPERTY_GROUPS group', () => {
+      for (const groupName of Object.keys(VISUAL_MODE_PROPERTIES)) {
+        expect(CSS_PROPERTY_GROUPS[groupName]).toBeDefined();
+      }
+    });
+
+    test('every property in VISUAL_MODE_PROPERTIES belongs to its declared group in CSS_PROPERTY_GROUPS', () => {
+      for (const [groupName, props] of Object.entries(VISUAL_MODE_PROPERTIES)) {
+        for (const prop of props) {
+          expect(CSS_PROPERTY_GROUPS[groupName]).toContain(prop);
+        }
+      }
+    });
+  });
+
+  describe('isVisualModeProperty', () => {
+    test('returns true for properties listed in VISUAL_MODE_PROPERTIES', () => {
+      expect(isVisualModeProperty('display')).toBe(true);
+      expect(isVisualModeProperty('padding')).toBe(true);
+      expect(isVisualModeProperty('color')).toBe(true);
+    });
+
+    test('returns false for properties not in VISUAL_MODE_PROPERTIES', () => {
+      expect(isVisualModeProperty('gridTemplateRows')).toBe(false);
+      expect(isVisualModeProperty('clipPath')).toBe(false);
+      expect(isVisualModeProperty('nonExistent')).toBe(false);
+    });
+  });
+
+  describe('VISUAL_MODE_RULES — flex/grid container props', () => {
+    test('flexDirection visible only when display is flex/inline-flex', () => {
+      expect(VISUAL_MODE_RULES.flexDirection(ctx({ display: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexDirection(ctx({ display: 'inline-flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexDirection(ctx({ display: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.flexDirection(ctx({ display: 'grid' }))).toBe(false);
+    });
+
+    test('justifyContent visible for flex AND grid', () => {
+      expect(VISUAL_MODE_RULES.justifyContent(ctx({ display: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.justifyContent(ctx({ display: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.justifyContent(ctx({ display: 'block' }))).toBe(false);
+    });
+
+    test('gridTemplateColumns visible only for grid/inline-grid', () => {
+      expect(VISUAL_MODE_RULES.gridTemplateColumns(ctx({ display: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gridTemplateColumns(ctx({ display: 'inline-grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gridTemplateColumns(ctx({ display: 'flex' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.gridTemplateColumns(ctx({ display: 'block' }))).toBe(false);
+    });
+
+    test('gap visible for both flex and grid containers', () => {
+      expect(VISUAL_MODE_RULES.gap(ctx({ display: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gap(ctx({ display: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gap(ctx({ display: 'block' }))).toBe(false);
+    });
+  });
+
+  describe('VISUAL_MODE_RULES — flex/grid item props (parent display)', () => {
+    test('flexGrow visible only when parent is flex', () => {
+      expect(VISUAL_MODE_RULES.flexGrow(ctx({ parentDisplay: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexGrow(ctx({ parentDisplay: 'inline-flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexGrow(ctx({ parentDisplay: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.flexGrow(ctx({ parentDisplay: 'grid' }))).toBe(false);
+    });
+
+    test('gridArea visible only when parent is grid', () => {
+      expect(VISUAL_MODE_RULES.gridArea(ctx({ parentDisplay: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gridArea(ctx({ parentDisplay: 'inline-grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gridArea(ctx({ parentDisplay: 'flex' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.gridArea(ctx({ parentDisplay: 'block' }))).toBe(false);
+    });
+
+    test('alignSelf visible when parent is flex OR grid', () => {
+      expect(VISUAL_MODE_RULES.alignSelf(ctx({ parentDisplay: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.alignSelf(ctx({ parentDisplay: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.alignSelf(ctx({ parentDisplay: 'block' }))).toBe(false);
+    });
+
+    test('item rules ignore own display — only parent display matters', () => {
+      // Element has display:block but parent is flex → flexGrow still visible.
+      expect(VISUAL_MODE_RULES.flexGrow(ctx({ display: 'block', parentDisplay: 'flex' }))).toBe(true);
+      // Element has display:flex but parent is block → flexGrow hidden.
+      expect(VISUAL_MODE_RULES.flexGrow(ctx({ display: 'flex', parentDisplay: 'block' }))).toBe(false);
+    });
+  });
+
+  describe('VISUAL_MODE_RULES — position-dependent', () => {
+    test('top/right/bottom/left/zIndex hidden when position is static', () => {
+      const c = ctx({ position: 'static' });
+      expect(VISUAL_MODE_RULES.top(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.right(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.bottom(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.left(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.zIndex(c)).toBe(false);
+    });
+
+    test('top/right/bottom/left/zIndex visible when position is non-static', () => {
+      for (const position of ['relative', 'absolute', 'fixed', 'sticky']) {
+        const c = ctx({ position });
+        expect(VISUAL_MODE_RULES.top(c)).toBe(true);
+        expect(VISUAL_MODE_RULES.zIndex(c)).toBe(true);
+      }
+    });
+  });
+
+  describe('VISUAL_MODE_RULES — tag-based', () => {
+    test('objectFit visible only for img/video', () => {
+      expect(VISUAL_MODE_RULES.objectFit(ctx({ tagName: 'img' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.objectFit(ctx({ tagName: 'video' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.objectFit(ctx({ tagName: 'div' }))).toBe(false);
+    });
+
+    test('listStyle visible only for ul/ol/li', () => {
+      expect(VISUAL_MODE_RULES.listStyle(ctx({ tagName: 'ul' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.listStyle(ctx({ tagName: 'ol' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.listStyle(ctx({ tagName: 'li' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.listStyle(ctx({ tagName: 'div' }))).toBe(false);
+    });
+  });
+
+  describe('VISUAL_MODE_RULES — padding/margin shorthand-vs-longhand toggle', () => {
+    test('padding shown when no longhand set; longhands hidden', () => {
+      const c = ctx({ hasPaddingLonghand: false });
+      expect(VISUAL_MODE_RULES.padding(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.paddingTop(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.paddingRight(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.paddingBottom(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.paddingLeft(c)).toBe(false);
+    });
+
+    test('padding hidden when any longhand set; longhands shown', () => {
+      const c = ctx({ hasPaddingLonghand: true });
+      expect(VISUAL_MODE_RULES.padding(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.paddingTop(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.paddingRight(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.paddingBottom(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.paddingLeft(c)).toBe(true);
+    });
+
+    test('margin mirrors padding behavior', () => {
+      const noLong = ctx({ hasMarginLonghand: false });
+      expect(VISUAL_MODE_RULES.margin(noLong)).toBe(true);
+      expect(VISUAL_MODE_RULES.marginTop(noLong)).toBe(false);
+      const withLong = ctx({ hasMarginLonghand: true });
+      expect(VISUAL_MODE_RULES.margin(withLong)).toBe(false);
+      expect(VISUAL_MODE_RULES.marginTop(withLong)).toBe(true);
+    });
+  });
+
+  describe('isVisualModeRowVisible', () => {
+    test('returns true for properties without a rule', () => {
+      // width has no rule entry → always visible regardless of context.
+      expect(isVisualModeRowVisible('width', ctx())).toBe(true);
+      expect(isVisualModeRowVisible('color', ctx())).toBe(true);
+      expect(isVisualModeRowVisible('nonExistentProp', ctx())).toBe(true);
+    });
+
+    test('delegates to the rule for known properties', () => {
+      expect(isVisualModeRowVisible('flexDirection', ctx({ display: 'flex' }))).toBe(true);
+      expect(isVisualModeRowVisible('flexDirection', ctx({ display: 'block' }))).toBe(false);
+      expect(isVisualModeRowVisible('top', ctx({ position: 'absolute' }))).toBe(true);
+      expect(isVisualModeRowVisible('top', ctx({ position: 'static' }))).toBe(false);
+    });
+  });
+
+  describe('UNITLESS_PROPERTIES', () => {
+    test('contains the canonical unitless props', () => {
+      expect(UNITLESS_PROPERTIES.has('fontWeight')).toBe(true);
+      expect(UNITLESS_PROPERTIES.has('lineHeight')).toBe(true);
+      expect(UNITLESS_PROPERTIES.has('opacity')).toBe(true);
+      expect(UNITLESS_PROPERTIES.has('zIndex')).toBe(true);
+      expect(UNITLESS_PROPERTIES.has('flexGrow')).toBe(true);
+      expect(UNITLESS_PROPERTIES.has('order')).toBe(true);
+      expect(UNITLESS_PROPERTIES.has('aspectRatio')).toBe(true);
+    });
+
+    test('does not contain length-accepting props', () => {
+      expect(UNITLESS_PROPERTIES.has('width')).toBe(false);
+      expect(UNITLESS_PROPERTIES.has('padding')).toBe(false);
+      expect(UNITLESS_PROPERTIES.has('fontSize')).toBe(false);
+    });
+  });
+
+  describe('appendsPxByDefault', () => {
+    test('returns true for length-accepting props', () => {
+      expect(appendsPxByDefault('width')).toBe(true);
+      expect(appendsPxByDefault('height')).toBe(true);
+      expect(appendsPxByDefault('padding')).toBe(true);
+      expect(appendsPxByDefault('paddingTop')).toBe(true);
+      expect(appendsPxByDefault('margin')).toBe(true);
+      expect(appendsPxByDefault('gap')).toBe(true);
+      expect(appendsPxByDefault('fontSize')).toBe(true);
+      expect(appendsPxByDefault('borderRadius')).toBe(true);
+      expect(appendsPxByDefault('top')).toBe(true);
+      expect(appendsPxByDefault('left')).toBe(true);
+    });
+
+    test('returns false for unitless props', () => {
+      expect(appendsPxByDefault('lineHeight')).toBe(false);
+      expect(appendsPxByDefault('fontWeight')).toBe(false);
+      expect(appendsPxByDefault('opacity')).toBe(false);
+      expect(appendsPxByDefault('zIndex')).toBe(false);
+      expect(appendsPxByDefault('flexGrow')).toBe(false);
+      expect(appendsPxByDefault('order')).toBe(false);
+      expect(appendsPxByDefault('aspectRatio')).toBe(false);
+    });
+
+    test('returns false for keyword-only (select / boolean) props', () => {
+      expect(appendsPxByDefault('display')).toBe(false);
+      expect(appendsPxByDefault('position')).toBe(false);
+      expect(appendsPxByDefault('borderStyle')).toBe(false);
+    });
+
+    test('defaults to true for properties without a recognized unitless / keyword type', () => {
+      expect(appendsPxByDefault('inset')).toBe(true);
+      expect(appendsPxByDefault('someUnknownNewCSSProperty')).toBe(true);
+    });
+  });
 });