meno-core 1.0.40 → 1.0.41

package/dist/lib/shared/index.js

@@ -23,7 +23,7 @@ import {
   isValidIdentifier,
   resolvePaletteColor,
   resolveSafePath
-} from "../../chunks/chunk-LOJLO2EY.js";
+} from "../../chunks/chunk-S2HXJTAF.js";
 import {
   CSS_PROPERTIES,
   CSS_PROPERTIES_DEFINITION,
@@ -201,7 +201,7 @@ import {
   validatePath,
   validatePropDefinition,
   validateStructuredComponentDefinition
-} from "../../chunks/chunk-OJ5SROQN.js";
+} from "../../chunks/chunk-IGVQF5GY.js";
 import {
   DEFAULT_BREAKPOINTS,
   DEFAULT_I18N_CONFIG,
@@ -255,7 +255,7 @@ import {
   TREE_SCROLL_DELAY_MS,
   WEBSOCKET_STATES,
   init_constants
-} from "../../chunks/chunk-Z7SAOCDG.js";
+} from "../../chunks/chunk-LBWIHPN7.js";
 import "../../chunks/chunk-KSBZ2L7C.js";
 
 // lib/shared/index.ts

package/dist/lib/test-utils/index.js

@@ -1,7 +1,7 @@
 import {
   NODE_TYPE,
   init_constants
-} from "../../chunks/chunk-Z7SAOCDG.js";
+} from "../../chunks/chunk-LBWIHPN7.js";
 import "../../chunks/chunk-KSBZ2L7C.js";
 
 // lib/test-utils/mocks.ts

package/lib/client/core/ComponentBuilder.ts

@@ -637,7 +637,7 @@ export class ComponentBuilder {
       if (utilityClasses.length > 0) {
         const existingClassName = (props.className || '') as string;
         const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
-        return { ...props, className: [...classArray, ...utilityClasses].filter(Boolean).join(' ') };
+        return { ...props, className: [...classArray, ...utilityClasses].filter(Boolean).join(' '), style: processedStyle };
       }
     }
 

package/lib/client/routing/Router.tsx

@@ -255,6 +255,12 @@ export function Router(props: RouterProps = {}): ReactElement {
     if (typeof window === 'undefined') return;
 
     const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_UPDATE) {
+        const { name, value } = event.data as { name: string; value: string };
+        document.documentElement.style.setProperty(name, value);
+        return;
+      }
+
       if (event.data?.type === IFRAME_MESSAGE_TYPES.INTERACTIVE_CSS_UPDATE) {
         const css = event.data.css as string;
         const styleId = 'interactive-styles';

package/lib/client/templateEngine.test.ts

@@ -807,3 +807,181 @@ describe("Template Engine - normalizeStyle", () => {
     expect(result).toBeNull();
   });
 });
+
+// ==========================================================================
+// Targeted tests for `as any` code paths in processStructure
+// These exercise specific type-cast paths to ensure safety before refactoring
+// ==========================================================================
+
+describe("Template Engine - processStructure as-any paths", () => {
+  const baseContext: TemplateContext = {
+    props: { text: "Hello", size: "lg", variant: "primary" },
+    componentDef: {} as StructuredComponentDefinition,
+  };
+
+  describe("Boolean preservation (line 429)", () => {
+    test("should preserve false boolean values in structure", () => {
+      // processStructure should return false as-is, not convert to null
+      const result = processStructure(false as any, baseContext);
+      expect(result).toBe(false);
+    });
+
+    test("should preserve true boolean values in structure", () => {
+      const result = processStructure(true as any, baseContext);
+      expect(result).toBe(true);
+    });
+  });
+
+  describe("Object template evaluation returning objects (line 454)", () => {
+    test("should return object result from full template expression", () => {
+      const context: TemplateContext = {
+        props: { link: { href: "/about", target: "_blank" } },
+        componentDef: {} as StructuredComponentDefinition,
+      };
+      // Full template {{link}} should return the object as-is
+      const result = processStructure("{{link}}", context);
+      expect(result).toEqual({ href: "/about", target: "_blank" });
+    });
+  });
+
+  describe("Slot default content via 'default' property (lines 483-486, 516-517)", () => {
+    test("should render slot default array when no instance children", () => {
+      // Slot markers use type: "slot" (NODE_TYPE.SLOT)
+      const structure = [
+        { type: "node", tag: "div", children: [
+          { type: "slot", default: [{ type: "node", tag: "span", children: "fallback" }] }
+        ]}
+      ] as unknown as ComponentNode[];
+      const result = processStructure(structure, baseContext);
+      expect(Array.isArray(result)).toBe(true);
+      const root = (result as any[])[0];
+      expect(root.tag).toBe("div");
+      // The slot default should have been rendered
+      expect(root.children.length).toBe(1);
+      expect(root.children[0].tag).toBe("span");
+    });
+
+    test("should render slot default string when no instance children", () => {
+      const structure = [
+        { type: "node", tag: "div", children: [
+          { type: "slot", default: "Default text" }
+        ]}
+      ] as unknown as ComponentNode[];
+      const result = processStructure(structure, baseContext);
+      const root = (result as any[])[0];
+      expect(root.children[0]).toBe("Default text");
+    });
+
+    test("should use instance children over slot default", () => {
+      const structure = [
+        { type: "node", tag: "div", children: [
+          { type: "slot", default: [{ type: "node", tag: "span", children: "fallback" }] }
+        ]}
+      ] as unknown as ComponentNode[];
+      const instanceChildren = [
+        { type: "node", tag: "b", children: "override" }
+      ] as unknown as ComponentNode[];
+      const result = processStructure(structure, baseContext, undefined, instanceChildren);
+      const root = (result as any[])[0];
+      expect(root.children[0].tag).toBe("b");
+    });
+
+    test("should handle slot marker as standalone object with default", () => {
+      const slotMarker = {
+        type: "slot",
+        default: [{ type: "node", tag: "div", children: "content" }],
+      };
+      const result = processStructure(slotMarker as any, baseContext);
+      expect(result).toBeDefined();
+    });
+  });
+
+  describe("Plain object processing (lines 538, 543)", () => {
+    test("should process plain objects recursively and resolve templates", () => {
+      // An object without a valid node type gets treated as a plain props object
+      const structure = { label: "{{text}}", visible: true } as any;
+      const result = processStructure(structure, baseContext);
+      expect(result).toBeDefined();
+      expect((result as any).label).toBe("Hello");
+      expect((result as any).visible).toBe(true);
+    });
+
+    test("should strip null/undefined values from plain objects", () => {
+      const context: TemplateContext = {
+        props: { defined: "value" },
+        componentDef: {} as StructuredComponentDefinition,
+      };
+      const structure = { a: "{{defined}}", b: "{{missing}}" } as any;
+      const result = processStructure(structure, context);
+      expect((result as any).a).toBe("value");
+      // Missing props resolve to empty string, not null
+    });
+  });
+
+  describe("Embed node creation (line 562)", () => {
+    test("should process embed node with html content", () => {
+      const node: ComponentNode = {
+        type: "embed" as any,
+        html: "<script>alert('test')</script>",
+      } as any;
+      const result = processStructure(node, baseContext);
+      expect(result).toBeDefined();
+      expect((result as any).type).toBe("embed");
+      expect((result as any).html).toBe("<script>alert('test')</script>");
+    });
+  });
+
+  describe("Link node creation (line 569)", () => {
+    test("should process link node with href", () => {
+      const node = {
+        type: "link",
+        href: "/about",
+        children: ["About us"],
+      } as any;
+      const result = processStructure(node, baseContext);
+      expect(result).toBeDefined();
+      expect((result as any).type).toBe("link");
+    });
+
+    test("should process link node with template href", () => {
+      const context: TemplateContext = {
+        props: { url: "/contact" },
+        componentDef: {} as StructuredComponentDefinition,
+      };
+      const node = {
+        type: "link",
+        href: "{{url}}",
+        children: ["Contact"],
+      } as any;
+      const result = processStructure(node, context);
+      expect(result).toBeDefined();
+      expect((result as any).type).toBe("link");
+    });
+  });
+
+  describe("Locale-list node creation (line 574)", () => {
+    test("should process locale-list node", () => {
+      const node = {
+        type: "locale-list",
+        style: { display: "flex" },
+      } as any;
+      const result = processStructure(node, baseContext);
+      expect(result).toBeDefined();
+      expect((result as any).type).toBe("locale-list");
+    });
+  });
+
+  describe("List node with legacy cms-list type (line 575)", () => {
+    test("should process list node", () => {
+      const node = {
+        type: "list",
+        source: "items",
+        sourceType: "prop",
+        children: [{ type: "html" as const, tag: "div", children: [] }],
+      } as any;
+      const result = processStructure(node, baseContext);
+      expect(result).toBeDefined();
+      expect((result as any).type).toBe("list");
+    });
+  });
+});

package/lib/client/templateEngine.ts

@@ -814,8 +814,7 @@ export function processStructure(
         if (isResponsiveStyle(resolvedStyle)) {
           // Apply responsive styles directly to node.style or props.style
           if (isComponentNode(processed)) {
-            processed.props = processed.props || {};
-            processed.props.style = resolvedStyle as ResponsiveStyleObject;
+            (processed as any).style = resolvedStyle as ResponsiveStyleObject;
           } else if (isHtmlNode(processed) || isEmbedNode(processed) || isLocaleListNode(processed) || isLinkNode(processed) || isListNode(processed)) {
             processed.style = resolvedStyle as ResponsiveStyleObject;
           }

package/lib/server/astro/cmsPageEmitter.ts

@@ -54,6 +54,8 @@ export interface CMSPageEmitOptions {
   isMultiLocale: boolean;
   /** Slug mappings for translating internal link hrefs */
   slugMappings?: SlugMap[];
+  /** Image format: 'webp' uses plain <img>, 'avif' uses <picture> */
+  imageFormat?: 'webp' | 'avif';
 }
 
 // ---------------------------------------------------------------------------
@@ -295,6 +297,7 @@ export function emitCMSPage(options: CMSPageEmitOptions): string {
     cmsWrapFn: wrapFn,
     slugMappings,
     i18nDefaultLocale: i18nConfig.defaultLocale,
+    imageFormat: options.imageFormat,
   };
 
   // Emit the template body

package/lib/server/astro/componentEmitter.ts

@@ -76,6 +76,47 @@ function formatDefault(def: PropDefinition): string | null {
   return JSON.stringify(val);
 }
 
+/**
+ * Merge the `className` variable onto the root element's class attribute.
+ * Handles: class="existing", class:list={[...]}, class={expr}, or no class at all.
+ */
+function mergeClassNameOntoRoot(template: string): string {
+  // Find the first opening tag (skip whitespace/newlines)
+  const tagMatch = template.match(/^(\s*<)(\w[\w-]*)([\s\S]*?)(\/?>)/);
+  if (!tagMatch) return template;
+
+  const [fullMatch, prefix, tagName, attrs, close] = tagMatch;
+
+  // Check for existing class:list
+  const classListMatch = attrs.match(/\s+class:list=\{(\[[\s\S]*?\])\}/);
+  if (classListMatch) {
+    const existingList = classListMatch[1];
+    // Append className to the array
+    const newList = existingList.replace(/\]$/, `, className]`);
+    const newAttrs = attrs.replace(classListMatch[0], ` class:list={${newList}}`);
+    return prefix + tagName + newAttrs + close + template.slice(fullMatch.length);
+  }
+
+  // Check for existing class="..." (static)
+  const classStaticMatch = attrs.match(/\s+class="([^"]*)"/);
+  if (classStaticMatch) {
+    const existing = classStaticMatch[1];
+    const newAttrs = attrs.replace(classStaticMatch[0], ` class:list={["${existing}", className]}`);
+    return prefix + tagName + newAttrs + close + template.slice(fullMatch.length);
+  }
+
+  // Check for existing class={expr} (dynamic)
+  const classDynMatch = attrs.match(/\s+class=\{([^}]+)\}/);
+  if (classDynMatch) {
+    const expr = classDynMatch[1];
+    const newAttrs = attrs.replace(classDynMatch[0], ` class:list={[${expr}, className]}`);
+    return prefix + tagName + newAttrs + close + template.slice(fullMatch.length);
+  }
+
+  // No existing class — add class={className}
+  return prefix + tagName + ` class={className}` + attrs + close + template.slice(fullMatch.length);
+}
+
 // ---------------------------------------------------------------------------
 // Main emitter
 // ---------------------------------------------------------------------------
@@ -115,9 +156,12 @@ export function emitAstroComponent(
   };
 
   // Emit the template body
-  const templateBody = nodeToAstro(structure, ctx);
+  let templateBody = nodeToAstro(structure, ctx);
 
-  // Build frontmatter
+  // Merge instance className onto the root element (for acceptsStyles support)
+  templateBody = mergeClassNameOntoRoot(templateBody);
+
+  // Build frontmatter (includes class prop for instance style support)
   const frontmatter = buildFrontmatter(name, propDefs, ctx.imports, ctx.dynamicTags, ctx.needsI18nResolver ? defaultLocale : undefined);
 
   // Build style/script sections
@@ -150,7 +194,8 @@ function buildFrontmatter(
 
   const propEntries = Object.entries(propDefs);
 
-  if (propEntries.length > 0) {
+  // Always generate Props interface and destructuring (at minimum for class prop)
+  {
     // Interface
     lines.push('interface Props {');
     for (const [propName, propDef] of propEntries) {
@@ -159,6 +204,8 @@ function buildFrontmatter(
       const optional = 'default' in propDef && propDef.default !== undefined;
       lines.push(`  ${propName}${optional ? '?' : ''}: ${tsType};`);
     }
+    // Always include class prop for instance style support
+    lines.push('  class?: string;');
     lines.push('}');
     lines.push('');
 
@@ -176,16 +223,17 @@ function buildFrontmatter(
       }
     }
 
-    if (destructParts.length > 0) {
-      if (destructParts.length <= 3 && destructParts.join(', ').length < 80) {
-        lines.push(`const { ${destructParts.join(', ')} } = Astro.props;`);
-      } else {
-        lines.push('const {');
-        for (const part of destructParts) {
-          lines.push(`  ${part},`);
-        }
-        lines.push('} = Astro.props;');
+    // Always include class prop (renamed to className to avoid reserved word)
+    destructParts.push('class: className = ""');
+
+    if (destructParts.length <= 3 && destructParts.join(', ').length < 80) {
+      lines.push(`const { ${destructParts.join(', ')} } = Astro.props;`);
+    } else {
+      lines.push('const {');
+      for (const part of destructParts) {
+        lines.push(`  ${part},`);
       }
+      lines.push('} = Astro.props;');
     }
   }