meno-core 1.0.47 → 1.0.49

package/lib/shared/utilityClassMapper.ts

@@ -13,7 +13,14 @@ import {
   gradientPresets,
   borderPresets,
 } from './utilityClassConfig';
-import { registerStyleValue, registerDynamicStyle } from './styleValueRegistry';
+import { registerStyleValue, registerDynamicStyle, getStyleValue } from './styleValueRegistry';
+import {
+  SCALABLE_CSS_PROPERTIES,
+  buildFluidClampWithExplicitMin,
+  parseValue,
+  DEFAULT_FLUID_RANGE,
+  type ResponsiveScales,
+} from './responsiveScaling';
 
 // Function name abbreviations for shorter class names
 const functionAbbreviations: Record<string, string> = {
@@ -54,6 +61,34 @@ function sanitizeClassValue(value: string): string {
     .replace(/[^\w-]/g, '');     // remove other special chars
 }
 
+/**
+ * 32-bit FNV-1a hash, encoded as base36 (6-7 chars). Deterministic — same
+ * input always produces the same hash, so duplicate complex values across
+ * elements share a single class definition.
+ */
+function shortHash(input: string): string {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+/**
+ * True if a class name contains characters illegal in CSS selectors. We
+ * generate dynamic class names from CSS values; complex values (especially
+ * Webflow `clamp(2*1rem, ((..2)/(90 - 20)*20)*1rem + ..*100vw, 4*1rem)`)
+ * end up with `*`, `(`, `)`, `+`, `,` baked into the class name, none of
+ * which are valid in CSS selectors. Browser silently drops the rule and
+ * the styled property reverts to UA defaults. Hash-fallback gives us a
+ * short, valid-CSS class name, with the actual value resolved via the
+ * style-value registry at CSS generation time.
+ */
+function hasIllegalClassChars(className: string): boolean {
+  return /[^\w-]/.test(className);
+}
+
 /**
  * Converts a CSS property value to a utility class name
  * Example: { prop: "padding", value: "10px" } → "p-10px"
@@ -191,6 +226,18 @@ function propertyValueToClass(prop: string, value: string | number): string | nu
     className = `${prefix}-${stringValue}`;
   }
 
+  // Hash-fallback for class names with illegal CSS selector chars. Webflow's
+  // fluid `clamp(2*1rem, ((2 - .5)/70*20)*1rem + ..*100vw, 4*1rem)` would
+  // otherwise produce `pt-cl2*1rem-((2-.5)/70*20)*1rem+..*100vw-4*1rem`,
+  // with `*`, `(`, `)`, `+`, `,` — none of which are valid in CSS selectors.
+  // Browser drops the rule, the styled element reverts to defaults
+  // (paddings collapse to 0, etc.). Short FNV-1a hash + style-value
+  // registry preserves the original value for the CSS generator without
+  // baking it into the selector.
+  if (hasIllegalClassChars(className)) {
+    className = `${prefix}-h${shortHash(stringValue)}`;
+  }
+
   // Register original value for CSS generation (single registration point)
   registerStyleValue(className, value);
   return className;
@@ -245,10 +292,95 @@ export function stylesToClasses(
  * Also handles flat merged style objects:
  * Example: { padding: "10px", display: "flex" } → ["p-10px", "flex"]
  */
+/** Values that don't make sense in a fluid container pattern. Mirrors cssGeneration.ts. */
+const CONTAINER_RESERVED_VALUES = new Set(['auto', 'inherit', 'initial', 'unset', '']);
+
+/**
+ * Detect "container intent" (width === maxWidth) on a flat StyleObject and
+ * rewrite into the fluid container pattern. Used by `responsiveStylesToClasses`
+ * when its caller signals fluid mode is active.
+ *
+ * Mirrors `applyContainerPattern` in cssGeneration.ts — kept as a private
+ * helper here to avoid a cross-module import in this hot path.
+ */
+function transformContainerIntent(style: StyleObject): StyleObject {
+  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',
+  };
+}
+
+/**
+ * In fluid mode, consume per-node mobile overrides for scalable properties
+ * into the base's `clamp()` value. The mobile value becomes the clamp's MIN
+ * (small-viewport endpoint), the base stays as MAX. The mobile property is
+ * then stripped from the mobile slice so no `.mob-*` @media rule is emitted
+ * for it — avoiding the jump at the mobile breakpoint that a hard override
+ * would create.
+ *
+ * Non-scalable mobile properties (display, flex-direction, etc.) are left
+ * alone. Tablet is also untouched — explicit per-tablet overrides keep their
+ * @media behavior for now.
+ *
+ * Bails out when units mismatch, parsing fails, or the registered values
+ * aren't plain numeric+unit strings — those cases fall back to today's
+ * behavior (mobile emits its own .mob-* rule).
+ */
+function consumeMobileIntoBaseClamp(
+  base: StyleObject,
+  mobile: StyleObject,
+  responsiveScales: ResponsiveScales
+): { patchedBase: StyleObject; patchedMobile: StyleObject } {
+  const fluidRange = responsiveScales.fluidRange ?? DEFAULT_FLUID_RANGE;
+  const patchedBase: StyleObject = { ...base };
+  const patchedMobile: StyleObject = { ...mobile };
+
+  for (const prop of Object.keys(base)) {
+    if (!SCALABLE_CSS_PROPERTIES.has(prop)) continue;
+    const mobileRaw = mobile[prop];
+    if (mobileRaw == null || mobileRaw === '') continue;
+
+    const baseRaw = base[prop];
+    if (baseRaw == null || baseRaw === '') continue;
+    if (typeof baseRaw !== 'string' && typeof baseRaw !== 'number') continue;
+    if (typeof mobileRaw !== 'string' && typeof mobileRaw !== 'number') continue;
+
+    const baseParsed = parseValue(String(baseRaw));
+    const mobileParsed = parseValue(String(mobileRaw));
+    if (!baseParsed || !mobileParsed) continue;
+    if (baseParsed.unit !== mobileParsed.unit) continue;
+    if (baseParsed.unit === '%' || baseParsed.unit === 'em') continue;
+
+    const clampValue = buildFluidClampWithExplicitMin(
+      mobileParsed.value,
+      baseParsed.value,
+      baseParsed.unit,
+      fluidRange.min,
+      fluidRange.max
+    );
+
+    patchedBase[prop] = clampValue;
+    delete patchedMobile[prop];
+  }
+
+  return { patchedBase, patchedMobile };
+}
+
 export function responsiveStylesToClasses(
-  styles: StyleObject | ResponsiveStyleObject | null | undefined
+  styles: StyleObject | ResponsiveStyleObject | null | undefined,
+  options?: { fluidActive?: boolean; responsiveScales?: ResponsiveScales }
 ): string[] {
   if (!styles) return [];
+  const fluidActive = options?.fluidActive === true;
+  const responsiveScales = options?.responsiveScales;
 
   const classes: string[] = [];
 
@@ -256,25 +388,53 @@ export function responsiveStylesToClasses(
   if ('base' in styles || 'tablet' in styles || 'mobile' in styles) {
     const responsiveStyles = styles as ResponsiveStyleObject;
 
+    // In fluid mode, fold per-node scalable mobile overrides into the base's
+    // clamp() so they become the small-viewport endpoint instead of a hard
+    // @media jump. Falls back to original base/mobile when prerequisites
+    // aren't met.
+    let baseSource = responsiveStyles.base;
+    let mobileSource = responsiveStyles.mobile;
+    if (fluidActive && responsiveScales?.enabled === true && baseSource && mobileSource) {
+      const { patchedBase, patchedMobile } = consumeMobileIntoBaseClamp(
+        baseSource,
+        mobileSource,
+        responsiveScales
+      );
+      baseSource = patchedBase;
+      mobileSource = patchedMobile;
+    }
+
     // Base styles (no prefix)
-    if (responsiveStyles.base) {
-      classes.push(...stylesToClasses(responsiveStyles.base));
+    if (baseSource) {
+      const base = fluidActive
+        ? transformContainerIntent(baseSource)
+        : baseSource;
+      classes.push(...stylesToClasses(base));
     }
 
     // Tablet styles (t- prefix)
     if (responsiveStyles.tablet) {
-      const tabletClasses = stylesToClasses(responsiveStyles.tablet);
+      const tablet = fluidActive
+        ? transformContainerIntent(responsiveStyles.tablet)
+        : responsiveStyles.tablet;
+      const tabletClasses = stylesToClasses(tablet);
       classes.push(...tabletClasses.map((cls) => `t-${cls}`));
     }
 
     // Mobile styles (mob- prefix to avoid conflict with margin)
-    if (responsiveStyles.mobile) {
-      const mobileClasses = stylesToClasses(responsiveStyles.mobile);
+    if (mobileSource && Object.keys(mobileSource).length > 0) {
+      const mobile = fluidActive
+        ? transformContainerIntent(mobileSource)
+        : mobileSource;
+      const mobileClasses = stylesToClasses(mobile);
       classes.push(...mobileClasses.map((cls) => `mob-${cls}`));
     }
   } else {
     // Flat style object - treat all as base classes
-    classes.push(...stylesToClasses(styles as StyleObject));
+    const flat = fluidActive
+      ? transformContainerIntent(styles as StyleObject)
+      : (styles as StyleObject);
+    classes.push(...stylesToClasses(flat));
   }
 
   return classes;
@@ -319,6 +479,17 @@ export function classToStyle(className: string): { prop: string; value: string }
 
   if (!prop) return null;
 
+  // Hash-fallback class — value is `h<base36>`, the real CSS value lives in
+  // the style-value registry (set when the class was minted from a complex
+  // `clamp()` / `calc()` value that wouldn't fit in a CSS selector). Pull
+  // the real value back out so editor reads see the original expression.
+  if (/^h[0-9a-z]+$/.test(value)) {
+    const registered = getStyleValue(cleanClass);
+    if (registered != null) {
+      return { prop, value: String(registered) };
+    }
+  }
+
   // Handle CSS variables
   if (value.includes('background') || value.includes('text') || value.includes('border')) {
     return { prop, value: `var(--${value})` };

package/lib/shared/validation/schemas.ts

@@ -553,7 +553,7 @@ export const CMSSchemaSchema = z.object({
 }).passthrough();
 
 /**
- * CMS item schema (content entry)
+ * CMS item schema (content entry, strict — used at publish/save time).
  */
 export const CMSItemSchema = z.object({
   _id: z.string(),
@@ -562,6 +562,20 @@ export const CMSItemSchema = z.object({
   _createdAt: z.string().optional(),
 }).passthrough();
 
+/**
+ * CMS draft item schema (loose — used at draft-write time).
+ *
+ * Drafts can be partial work-in-progress, so even system-managed identifiers
+ * are optional at this stage. Strict validation runs when promoting the draft
+ * to published (see `publishDraft` in `FileSystemCMSProvider`).
+ */
+export const CMSDraftItemSchema = z.object({
+  _id: z.string().optional(),
+  _slug: z.string().optional(),
+  _filename: z.string().optional(),
+  _createdAt: z.string().optional(),
+}).passthrough();
+
 /**
  * CMS filter condition schema
  */

package/lib/shared/validation/validators.ts

@@ -19,6 +19,7 @@ import {
   PageMetaDataSchema,
   CMSSchemaSchema,
   CMSItemSchema,
+  CMSDraftItemSchema,
 } from './schemas';
 
 /**
@@ -279,7 +280,7 @@ export function validateCMSSchema(data: unknown): ValidationResult<CMSSchema> {
 }
 
 /**
- * Validate a CMS item
+ * Validate a CMS item (strict — used for published items and at publish time)
  * @returns ValidationResult with error details on failure
  */
 export function validateCMSItem(data: unknown): ValidationResult<CMSItem> {
@@ -301,4 +302,28 @@ export function validateCMSItem(data: unknown): ValidationResult<CMSItem> {
   }
 }
 
+/**
+ * Validate a CMS draft item (loose — used at draft-write time).
+ * Drafts may be partial; even system identifiers are optional. Strict
+ * validation re-runs on Publish.
+ */
+export function validateCMSDraftItem(data: unknown): ValidationResult<CMSItem> {
+  try {
+    const result = CMSDraftItemSchema.safeParse(data);
+    if (result.success) {
+      return { valid: true, data: result.data as CMSItem };
+    }
+    return { valid: false, errors: zodToValidationErrors(result.error) };
+  } catch (error) {
+    return {
+      valid: false,
+      errors: [{
+        path: 'root',
+        message: error instanceof Error ? error.message : 'Unknown validation error',
+        code: 'UNKNOWN',
+      }],
+    };
+  }
+}
+
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"