meno-core 1.0.48 → 1.0.50

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', () => {

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.test.ts

@@ -28,6 +28,99 @@ describe('Schema Validation', () => {
       }
     });
 
+    test('prop default accepts an _i18n value object', () => {
+      // Regression: the SSR pipeline resolves `_i18n` objects in prop defaults
+      // (see resolveI18nInProps) and CLAUDE.md tells AI to write them. The
+      // schema must accept this shape — otherwise the editor's component-load
+      // route rejects the file with a misleading JSONPage error.
+      const propDef = {
+        type: 'string',
+        default: { _i18n: true, en: 'Hello', pl: 'Cześć' },
+      };
+
+      const result = PropDefinitionSchema.safeParse(propDef);
+      expect(result.success).toBe(true);
+    });
+
+    test('list prop default accepts _i18n value objects on item fields', () => {
+      const propDef = {
+        type: 'list',
+        itemSchema: { title: { type: 'string' } },
+        default: [
+          { title: { _i18n: true, en: 'Hello', pl: 'Cześć' } },
+        ],
+      };
+
+      const result = PropDefinitionSchema.safeParse(propDef);
+      expect(result.success).toBe(true);
+    });
+
+    test('HTML node accepts an _i18n object as direct children', () => {
+      // Regression: previously the validator rejected `{type: "node", tag:
+      // "h1", children: {_i18n: true, en: "Blog", pl: "Blog"}}` with a
+      // misleading JSONPage error. After widening ComponentNodeSchema this
+      // shape validates and the runtime resolves it to a locale-string.
+      const page = {
+        root: {
+          type: 'node',
+          tag: 'h1',
+          children: { _i18n: true, en: 'Blog', pl: 'Blog' },
+        },
+      };
+      const result = PageDataSchema.safeParse(page);
+      expect(result.success).toBe(true);
+    });
+
+    test('HTML node accepts an _i18n object inside attribute values', () => {
+      const page = {
+        root: {
+          type: 'node',
+          tag: 'img',
+          attributes: {
+            src: '/x.png',
+            alt: { _i18n: true, en: 'Photo', pl: 'Zdjęcie' },
+          },
+        },
+      };
+      const result = PageDataSchema.safeParse(page);
+      expect(result.success).toBe(true);
+    });
+
+    test('HTML node accepts an _i18n object inside a children array', () => {
+      const page = {
+        root: {
+          type: 'node',
+          tag: 'p',
+          children: [
+            { _i18n: true, en: 'Hello', pl: 'Cześć' },
+            ' literal ',
+            { type: 'node', tag: 'span', children: 'static' },
+          ],
+        },
+      };
+      const result = PageDataSchema.safeParse(page);
+      expect(result.success).toBe(true);
+    });
+
+    test('component file with localized prop defaults validates as PageData', () => {
+      // End-to-end regression: a real component shape written by AI with
+      // localized defaults must pass PageDataSchema so the editor can open it.
+      const componentFile = {
+        component: {
+          interface: {
+            title: {
+              type: 'string',
+              default: { _i18n: true, en: 'From the blog', pl: 'Z bloga' },
+            },
+          },
+          structure: { type: 'node', tag: 'section', children: [] },
+        },
+      };
+
+      const result = PageDataSchema.safeParse(componentFile);
+      expect(result.success).toBe(true);
+    });
+
     test('valid select prop definition', () => {
       const propDef = {
         type: 'select',

package/lib/shared/validation/schemas.ts

@@ -23,11 +23,39 @@ export const BasePropTypeSchema = z.enum(['string', 'select', 'boolean', 'number
 export const PropTypeSchema = z.enum(['string', 'select', 'boolean', 'number', 'link', 'file', 'rich-text', 'embed', 'list']);
 
 /**
- * Base prop definition schema (for non-list props)
+ * `_i18n` value object schema. Used wherever a localizable string can appear:
+ *   - Prop defaults (`BasePropDefinitionSchema.default`)
+ *   - Node `children` (text content on `type: "node"`, `"link"`, `"component"`,
+ *     and basic list nodes)
+ *   - Attribute values (`attributes` records on every node type)
+ *
+ * The runtime resolves these objects to the active locale's string at the
+ * earliest dispatch point in both the SSR renderer (`renderNode`) and the
+ * client builder (`ComponentBuilder.buildComponent`). The schema accepts the
+ * shape so the editor's load path doesn't reject files that contain it.
+ */
+export const I18nValueObjectSchema = z.object({
+  _i18n: z.literal(true),
+}).passthrough();
+
+/**
+ * Base prop definition schema (for non-list props).
+ * `default` accepts a literal value (string/number/boolean/link) OR an
+ * `_i18n` value object — the SSR pipeline resolves the latter to the active
+ * locale's string via `resolveI18nInProps` at render time, so localized prop
+ * defaults are first-class. The `I18nOrStringSchema` proper is defined later
+ * in this file; we inline the matching shape here to keep the validator
+ * tolerant of localized defaults.
  */
 export const BasePropDefinitionSchema = z.object({
   type: BasePropTypeSchema,
-  default: z.union([z.string(), z.number(), z.boolean(), z.object({ href: z.string(), target: z.string().optional() })]).optional(),
+  default: z.union([
+    z.string(),
+    z.number(),
+    z.boolean(),
+    z.object({ href: z.string(), target: z.string().optional() }),
+    I18nValueObjectSchema,
+  ]).optional(),
   options: z.array(z.string()).readonly().optional(),
   enumName: z.string().optional(), // For 'select' type: reference to project-level enum
   accept: z.string().optional(), // For 'file' type: MIME pattern like "image/*", "video/*"
@@ -51,7 +79,16 @@ export const ListItemSchemaSchema = z.record(z.string(), BasePropDefinitionSchem
 export const ListPropDefinitionSchema = z.object({
   type: z.literal('list'),
   itemSchema: ListItemSchemaSchema,
-  default: z.array(z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), z.object({ href: z.string(), target: z.string().optional() }), z.null()]))).optional(),
+  // List-item field values can be any primitive, a link object, an `_i18n`
+  // object (resolved by the SSR pipeline), or null.
+  default: z.array(z.record(z.string(), z.union([
+    z.string(),
+    z.number(),
+    z.boolean(),
+    z.object({ href: z.string(), target: z.string().optional() }),
+    I18nValueObjectSchema,
+    z.null(),
+  ]))).optional(),
 }).passthrough();
 
 /**
@@ -175,8 +212,9 @@ export const InteractiveStylesSchema = z.array(InteractiveStyleRuleSchema);
 export const SlotMarkerSchema: z.ZodType<any> = z.lazy(() => z.object({
   type: z.literal(NODE_TYPE.SLOT),
   default: z.union([
-    z.array(z.union([ComponentNodeSchema, z.string()])),
+    z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
     z.string(),
+    I18nValueObjectSchema,
   ]).optional(),
 }).passthrough());
 
@@ -197,11 +235,12 @@ export const HtmlNodeSchema: z.ZodType<any> = z.lazy(() => z.object({
   style: StyleValueSchema.optional(),
   interactiveStyles: InteractiveStylesSchema.optional(),
   generateElementClass: z.boolean().optional(),
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
   props: z.record(z.string(), z.any()).optional(), // Allow props for backward compatibility
   children: z.union([
-    z.array(z.union([ComponentNodeSchema, z.string()])),
+    z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
     z.string(),
+    I18nValueObjectSchema,
   ]).optional(),
 }).passthrough());
 
@@ -217,10 +256,11 @@ export const ComponentInstanceNodeSchema: z.ZodType<any> = z.lazy(() => z.object
   style: StyleValueSchema.optional(),
   interactiveStyles: InteractiveStylesSchema.optional(),
   generateElementClass: z.boolean().optional(),
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
   children: z.union([
-    z.array(z.union([ComponentNodeSchema, z.string()])),
+    z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
     z.string(),
+    I18nValueObjectSchema,
   ]).optional(),
 }).passthrough());
 
@@ -229,13 +269,13 @@ export const ComponentInstanceNodeSchema: z.ZodType<any> = z.lazy(() => z.object
  */
 export const EmbedNodeSchema: z.ZodType<any> = z.lazy(() => z.object({
   type: z.literal(NODE_TYPE.EMBED),
-  html: z.union([z.string(), HtmlMappingSchema]),
+  html: z.union([z.string(), HtmlMappingSchema, I18nValueObjectSchema]),
   label: z.string().optional(),
   if: IfConditionSchema.optional(),
   style: StyleValueSchema.optional(),
   interactiveStyles: InteractiveStylesSchema.optional(),
   generateElementClass: z.boolean().optional(),
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
 }).passthrough());
 
 /**
@@ -243,16 +283,17 @@ export const EmbedNodeSchema: z.ZodType<any> = z.lazy(() => z.object({
  */
 export const LinkNodeSchema: z.ZodType<any> = z.lazy(() => z.object({
   type: z.literal(NODE_TYPE.LINK),
-  href: z.union([z.string(), LinkMappingSchema]),
+  href: z.union([z.string(), LinkMappingSchema, I18nValueObjectSchema]),
   label: z.string().optional(),
   if: IfConditionSchema.optional(),
   style: StyleValueSchema.optional(),
   interactiveStyles: InteractiveStylesSchema.optional(),
   generateElementClass: z.boolean().optional(),
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
   children: z.union([
-    z.array(z.union([ComponentNodeSchema, z.string()])),
+    z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
     z.string(),
+    I18nValueObjectSchema,
   ]).optional(),
 }).passthrough());
 
@@ -273,7 +314,7 @@ export const LocaleListNodeSchema: z.ZodType<any> = z.lazy(() => z.object({
   showSeparator: z.boolean().optional(),
   showFlag: z.boolean().optional(),
   flagStyle: StyleValueSchema.optional(),
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
 }).passthrough());
 
 /**
@@ -298,7 +339,7 @@ export const ListNodeSchemaBasic: z.ZodType<any> = z.lazy(() => z.object({
   offset: z.number().optional(),
   excludeCurrentItem: z.boolean().optional(),
   emitTemplate: z.boolean().optional(),
-  children: z.array(z.union([ComponentNodeSchema, z.string()])).optional(),
+  children: z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])).optional(),
 }).passthrough());
 
 /**
@@ -553,7 +594,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 +603,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
  */