meno-core 1.0.5 → 1.0.7

package/build-static.ts

@@ -1,11 +1,13 @@
 /**
  * Static Site Generation Build Script
  * Pre-generates HTML files for all pages at build time
+ * CSP-compliant: Extracts JavaScript to external files
  */
 
 import { existsSync, readdirSync, mkdirSync, rmSync, statSync, copyFileSync } from "fs";
 import { writeFile } from "fs/promises";
 import { join } from "path";
+import { createHash } from "crypto";
 import {
   loadJSONFile,
   loadComponentDirectory,
@@ -14,6 +16,7 @@ import {
   loadI18nConfig
 } from "./lib/server/jsonLoader";
 import { generateSSRHTML } from "./lib/server/ssrRenderer";
+import type { SSRHTMLResult } from "./lib/server/ssr/htmlGenerator";
 import { projectPaths } from "./lib/server/projectContext";
 import { loadProjectConfig } from "./lib/shared/fontLoader";
 import { FileSystemCMSProvider } from "./lib/server/providers/fileSystemCMSProvider";
@@ -22,6 +25,48 @@ import { isI18nValue, resolveI18nValue } from "./lib/shared/i18n";
 import type { ComponentDefinition, JSONPage, CMSSchema, CMSItem, I18nConfig } from "./lib/shared/types";
 import type { SlugMap } from "./lib/shared/slugTranslator";
 
+/**
+ * Generate short hash from content for file naming
+ */
+function hashContent(content: string): string {
+  return createHash('sha256').update(content).digest('hex').slice(0, 8);
+}
+
+/**
+ * Track JavaScript files to avoid duplicates
+ * Maps content hash -> script path
+ */
+const jsFileCache = new Map<string, string>();
+
+/**
+ * Get or create script file path for given JS content
+ * Returns the path to reference in HTML
+ */
+async function getScriptPath(jsContent: string, distDir: string): Promise<string> {
+  const hash = hashContent(jsContent);
+
+  // Check if we already wrote this content
+  if (jsFileCache.has(hash)) {
+    return jsFileCache.get(hash)!;
+  }
+
+  // Create scripts directory if needed
+  const scriptsDir = join(distDir, '_scripts');
+  if (!existsSync(scriptsDir)) {
+    mkdirSync(scriptsDir, { recursive: true });
+  }
+
+  // Write script file
+  const scriptPath = `/_scripts/${hash}.js`;
+  const fullPath = join(distDir, '_scripts', `${hash}.js`);
+  await writeFile(fullPath, jsContent, 'utf-8');
+
+  // Cache for reuse
+  jsFileCache.set(hash, scriptPath);
+
+  return scriptPath;
+}
+
 /**
  * Recursively copy directory contents
  */
@@ -235,17 +280,26 @@ async function buildCMSTemplates(
           const baseUrl = "";
           const itemPath = buildCMSItemPath(cmsSchema.urlPattern, item, cmsSchema.slugField, locale, i18nConfig);
 
-          const html = await generateSSRHTML(
+          // Generate HTML with JS returned separately (CSP-compliant)
+          const result = await generateSSRHTML({
             pageData,
             globalComponents,
-            itemPath,
+            pagePath: itemPath,
             baseUrl,
-            true,
+            useBuiltBundle: true,
             locale,
             slugMappings,
-            { cms: item },
-            cmsService
-          );
+            cmsContext: { cms: item },
+            cmsService,
+            returnSeparateJS: true
+          }) as SSRHTMLResult;
+
+          // If there's JavaScript, write to external file and update HTML
+          let finalHtml = result.html;
+          if (result.javascript) {
+            const scriptPath = await getScriptPath(result.javascript, distDir);
+            finalHtml = finalHtml.replace('</body>', `  <script src="${scriptPath}"></script>\n</body>`);
+          }
 
           const outputPath = locale === i18nConfig.defaultLocale
             ? `${distDir}${itemPath}.html`
@@ -256,7 +310,7 @@ async function buildCMSTemplates(
             mkdirSync(outputDir, { recursive: true });
           }
 
-          await writeFile(outputPath, html, 'utf-8');
+          await writeFile(outputPath, finalHtml, 'utf-8');
 
           const displayPath = locale === i18nConfig.defaultLocale ? itemPath : `/${locale}${itemPath}`;
           console.log(`   ✅ ${displayPath}`);
@@ -397,7 +451,26 @@ async function buildStaticPages(): Promise<void> {
         // Build the URL path that will be used for this locale
         const urlPath = getDisplayPath(basePath, locale, i18nConfig.defaultLocale, slugs);
 
-        const html = await generateSSRHTML(pageData, globalComponents, urlPath, baseUrl, true, locale, slugMappings, undefined, cmsService);
+        // Generate HTML with JS returned separately (CSP-compliant)
+        const result = await generateSSRHTML({
+          pageData,
+          globalComponents,
+          pagePath: urlPath,
+          baseUrl,
+          useBuiltBundle: true,
+          locale,
+          slugMappings,
+          cmsService,
+          returnSeparateJS: true
+        }) as SSRHTMLResult;
+
+        // If there's JavaScript, write to external file and update HTML
+        let finalHtml = result.html;
+        if (result.javascript) {
+          const scriptPath = await getScriptPath(result.javascript, distDir);
+          // Insert script reference before </body>
+          finalHtml = finalHtml.replace('</body>', `  <script src="${scriptPath}"></script>\n</body>`);
+        }
 
         // Determine locale-specific output path with translated slug
         const outputPath = getLocalizedOutputPath(basePath, locale, i18nConfig.defaultLocale, distDir, slugs);
@@ -408,7 +481,7 @@ async function buildStaticPages(): Promise<void> {
           mkdirSync(outputDir, { recursive: true });
         }
 
-        await writeFile(outputPath, html, "utf-8");
+        await writeFile(outputPath, finalHtml, "utf-8");
 
         console.log(`✅ Built: ${urlPath} → ${outputPath}`);
         successCount++;

package/lib/client/core/ComponentBuilder.ts

@@ -26,7 +26,7 @@ import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, type V
 import { DEFAULT_I18N_CONFIG, resolveI18nValue } from "../../shared/i18n";
 import { getChildPath, pathToString } from "../../shared/pathArrayUtils";
 import { responsiveStylesToClasses } from "../../shared/utilityClassMapper";
-import { processCMSTemplate, processCMSPropsTemplate } from "./cmsTemplateProcessor";
+import { processCMSTemplate, processCMSPropsTemplate, RAW_HTML_PREFIX } from "./cmsTemplateProcessor";
 import type { PrefetchService } from "../services/PrefetchService";
 import { generateElementClassName, type ElementClassContext } from "../../shared/elementClassName";
 import type { InteractiveStyles } from "../../shared/types/styles";
@@ -318,8 +318,10 @@ export class ComponentBuilder {
 
   /**
    * Process text node with CMS and item templates
+   * Returns a ReactElement with dangerouslySetInnerHTML for raw HTML content (rich-text),
+   * or a plain string for regular text content.
    */
-  private processTextNode(text: string, ctx: BuilderContext): string {
+  private processTextNode(text: string, ctx: BuilderContext): string | ReactElement {
     let result = text;
 
     // Process CMS templates
@@ -338,6 +340,12 @@ export class ComponentBuilder {
       result = processItemTemplate(result, effectiveTemplateContext, i18nResolver);
     }
 
+    // Check for raw HTML marker (from rich-text fields) - render with dangerouslySetInnerHTML
+    if (result.startsWith(RAW_HTML_PREFIX)) {
+      const rawHtml = result.slice(RAW_HTML_PREFIX.length);
+      return h('span', { dangerouslySetInnerHTML: { __html: rawHtml } });
+    }
+
     return result;
   }
 
@@ -536,7 +544,15 @@ export class ComponentBuilder {
       delete extractedAttributes.className;
     }
 
-    return { ...result, ...extractedAttributes };
+    // Convert boolean true to empty string for React compatibility
+    // React strips boolean true for non-standard attributes, but SSR outputs them as presence-only
+    // Using empty string makes React render the attribute (e.g., cmsrt="" matches [cmsrt] selector)
+    const normalizedAttributes: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(extractedAttributes)) {
+      normalizedAttributes[key] = value === true ? '' : value;
+    }
+
+    return { ...result, ...normalizedAttributes };
   }
 
   /**

package/lib/client/core/builders/cmsListBuilder.ts

@@ -6,7 +6,7 @@
 import { createElement as h } from "react";
 import type { ReactElement } from "react";
 import type { CMSListNode, CMSItem } from "../../../shared/types/cms";
-import type { InteractiveStyles } from "../../../shared/types";
+import type { InteractiveStyles, StyleObject, ResponsiveStyleObject } from "../../../shared/types";
 import { singularize } from "../../../shared/types/cms";
 import { buildTemplateContext, resolveItemsTemplate } from "../../../shared/itemTemplateUtils";
 import { extractAttributesFromNode } from "../../../shared/attributeNodeUtils";
@@ -14,6 +14,7 @@ import { responsiveStylesToClasses } from "../../../shared/utilityClassMapper";
 import { pathToString } from "../../../shared/pathArrayUtils";
 import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
 import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
+import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext, BuildResult, BuildChildrenContext } from "./types";
 
@@ -60,7 +61,18 @@ export function buildCMSList(
     'data-element-path': pathToString(elementPath),
     'data-cms-list': 'true',
     'data-collection': node.collection || '',
-    ref: (el: HTMLElement | null) => deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false)
+    ref: (el: HTMLElement | null) => {
+      deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
+      // Apply CSS variables for interactive styles
+      if (el) {
+        const cssVariables = InteractiveStylesRegistry.getVariables(elementPath);
+        if (cssVariables && Object.keys(cssVariables).length > 0) {
+          for (const [varName, value] of Object.entries(cssVariables)) {
+            el.style.setProperty(varName, value);
+          }
+        }
+      }
+    }
   };
 
   // Start building className
@@ -97,9 +109,32 @@ export function buildCMSList(
     // Prepend element class
     classNames.unshift(elementClass);
 
-    // Register interactive styles
+    // Register interactive styles with mapping support
     if (nodeInteractiveStyles && nodeInteractiveStyles.length > 0) {
-      InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+      if (ctx.componentResolvedProps && hasInteractiveStyleMappings(nodeInteractiveStyles)) {
+        const { resolvedStyles, mappings } = extractInteractiveStyleMappings(nodeInteractiveStyles);
+        const cssVariables = resolveExtractedMappings(mappings, ctx.componentResolvedProps);
+        InteractiveStylesRegistry.set(elementClass, resolvedStyles);
+        if (Object.keys(cssVariables).length > 0) {
+          InteractiveStylesRegistry.setVariables(elementPath, cssVariables);
+        }
+      } else {
+        InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+      }
+
+      // Apply preview classes when previewProp is set and truthy
+      if (ctx.componentResolvedProps) {
+        const previewClasses: string[] = [];
+        for (const rule of nodeInteractiveStyles) {
+          if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
+            const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject);
+            previewClasses.push(...styleClasses);
+          }
+        }
+        if (previewClasses.length > 0) {
+          classNames.push(...previewClasses);
+        }
+      }
     }
   }
 

package/lib/client/core/builders/embedBuilder.ts

@@ -11,6 +11,7 @@ import { responsiveStylesToClasses } from "../../../shared/utilityClassMapper";
 import { pathToString } from "../../../shared/pathArrayUtils";
 import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
 import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
+import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
 import DOMPurify from "isomorphic-dompurify";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext } from "./types";
@@ -60,7 +61,18 @@ export function buildEmbed(
     key,
     'data-element-path': pathToString(elementPath),
     'data-embed-node': 'true',
-    ref: (el: HTMLElement | null) => deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false),
+    ref: (el: HTMLElement | null) => {
+      deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
+      // Apply CSS variables for interactive styles
+      if (el) {
+        const cssVariables = InteractiveStylesRegistry.getVariables(elementPath);
+        if (cssVariables && Object.keys(cssVariables).length > 0) {
+          for (const [varName, value] of Object.entries(cssVariables)) {
+            el.style.setProperty(varName, value);
+          }
+        }
+      }
+    },
     dangerouslySetInnerHTML: { __html: sanitizedHtml }
   };
 
@@ -103,9 +115,32 @@ export function buildEmbed(
     // Prepend element class
     classNames.unshift(elementClass);
 
-    // Register interactive styles
+    // Register interactive styles with mapping support
     if (nodeInteractiveStyles && nodeInteractiveStyles.length > 0) {
-      InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+      if (ctx.componentResolvedProps && hasInteractiveStyleMappings(nodeInteractiveStyles)) {
+        const { resolvedStyles, mappings } = extractInteractiveStyleMappings(nodeInteractiveStyles);
+        const cssVariables = resolveExtractedMappings(mappings, ctx.componentResolvedProps);
+        InteractiveStylesRegistry.set(elementClass, resolvedStyles);
+        if (Object.keys(cssVariables).length > 0) {
+          InteractiveStylesRegistry.setVariables(elementPath, cssVariables);
+        }
+      } else {
+        InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+      }
+
+      // Apply preview classes when previewProp is set and truthy
+      if (ctx.componentResolvedProps) {
+        const previewClasses: string[] = [];
+        for (const rule of nodeInteractiveStyles) {
+          if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
+            const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject);
+            previewClasses.push(...styleClasses);
+          }
+        }
+        if (previewClasses.length > 0) {
+          classNames.push(...previewClasses);
+        }
+      }
     }
   }
 

package/lib/client/core/builders/localeListBuilder.ts

@@ -11,6 +11,7 @@ import { responsiveStylesToClasses } from "../../../shared/utilityClassMapper";
 import { pathToString } from "../../../shared/pathArrayUtils";
 import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
 import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
+import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext } from "./types";
 
@@ -49,7 +50,18 @@ export function buildLocaleList(
     key,
     'data-element-path': pathToString(elementPath),
     'data-locale-list': 'true',
-    ref: (el: HTMLElement | null) => deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false)
+    ref: (el: HTMLElement | null) => {
+      deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
+      // Apply CSS variables for interactive styles
+      if (el) {
+        const cssVariables = InteractiveStylesRegistry.getVariables(elementPath);
+        if (cssVariables && Object.keys(cssVariables).length > 0) {
+          for (const [varName, value] of Object.entries(cssVariables)) {
+            el.style.setProperty(varName, value);
+          }
+        }
+      }
+    }
   };
 
   // Add CMS item index path for elements inside CMS lists
@@ -91,9 +103,32 @@ export function buildLocaleList(
     // Prepend element class
     classNames.unshift(elementClass);
 
-    // Register interactive styles
+    // Register interactive styles with mapping support
     if (nodeInteractiveStyles && nodeInteractiveStyles.length > 0) {
-      InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+      if (ctx.componentResolvedProps && hasInteractiveStyleMappings(nodeInteractiveStyles)) {
+        const { resolvedStyles, mappings } = extractInteractiveStyleMappings(nodeInteractiveStyles);
+        const cssVariables = resolveExtractedMappings(mappings, ctx.componentResolvedProps);
+        InteractiveStylesRegistry.set(elementClass, resolvedStyles);
+        if (Object.keys(cssVariables).length > 0) {
+          InteractiveStylesRegistry.setVariables(elementPath, cssVariables);
+        }
+      } else {
+        InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+      }
+
+      // Apply preview classes when previewProp is set and truthy
+      if (ctx.componentResolvedProps) {
+        const previewClasses: string[] = [];
+        for (const rule of nodeInteractiveStyles) {
+          if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
+            const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject);
+            previewClasses.push(...styleClasses);
+          }
+        }
+        if (previewClasses.length > 0) {
+          classNames.push(...previewClasses);
+        }
+      }
     }
   }
 

package/lib/client/core/builders/objectLinkBuilder.ts

@@ -11,6 +11,7 @@ import { responsiveStylesToClasses } from "../../../shared/utilityClassMapper";
 import { pathToString } from "../../../shared/pathArrayUtils";
 import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
 import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
+import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext, BuildResult, BuildChildrenContext } from "./types";
 
@@ -55,7 +56,18 @@ export function buildObjectLink(
     key,
     'data-element-path': pathToString(elementPath),
     'data-object-link-node': 'true',
-    ref: (el: HTMLElement | null) => deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false)
+    ref: (el: HTMLElement | null) => {
+      deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
+      // Apply CSS variables for interactive styles
+      if (el) {
+        const cssVariables = InteractiveStylesRegistry.getVariables(elementPath);
+        if (cssVariables && Object.keys(cssVariables).length > 0) {
+          for (const [varName, value] of Object.entries(cssVariables)) {
+            el.style.setProperty(varName, value);
+          }
+        }
+      }
+    }
   };
 
   // Add CMS item index path for elements inside CMS lists
@@ -97,9 +109,32 @@ export function buildObjectLink(
     // Prepend element class
     classNames.unshift(elementClass);
 
-    // Register interactive styles
+    // Register interactive styles with mapping support
     if (nodeInteractiveStyles && nodeInteractiveStyles.length > 0) {
-      InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+      if (ctx.componentResolvedProps && hasInteractiveStyleMappings(nodeInteractiveStyles)) {
+        const { resolvedStyles, mappings } = extractInteractiveStyleMappings(nodeInteractiveStyles);
+        const cssVariables = resolveExtractedMappings(mappings, ctx.componentResolvedProps);
+        InteractiveStylesRegistry.set(elementClass, resolvedStyles);
+        if (Object.keys(cssVariables).length > 0) {
+          InteractiveStylesRegistry.setVariables(elementPath, cssVariables);
+        }
+      } else {
+        InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+      }
+
+      // Apply preview classes when previewProp is set and truthy
+      if (ctx.componentResolvedProps) {
+        const previewClasses: string[] = [];
+        for (const rule of nodeInteractiveStyles) {
+          if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
+            const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject);
+            previewClasses.push(...styleClasses);
+          }
+        }
+        if (previewClasses.length > 0) {
+          classNames.push(...previewClasses);
+        }
+      }
     }
   }
 

package/lib/client/core/cmsTemplateProcessor.ts

@@ -8,6 +8,12 @@
 import type { I18nValue, I18nConfig } from '../../shared/types';
 import { getI18nConfig } from '../i18nConfigService';
 import { isRichTextMarker, richTextMarkerToHtml } from '../../shared/propResolver';
+import { tiptapToHtml } from '../../shared/richtext/tiptapToHtml';
+import { isTiptapDocument } from '../../shared/richtext/types';
+import { RAW_HTML_PREFIX } from '../../shared/constants';
+
+// Re-export for backward compatibility
+export { RAW_HTML_PREFIX };
 
 /**
  * Check if a value is an I18nValue object
@@ -86,8 +92,14 @@ export function processCMSTemplate(
       return '';
     }
     // Handle rich-text markers - extract HTML content for interpolation
+    // Mark with RAW_HTML_PREFIX so renderer knows not to escape
     if (typeof value === 'object' && '__richtext__' in value && typeof (value as unknown as { html: string }).html === 'string') {
-      return (value as unknown as { html: string }).html;
+      return RAW_HTML_PREFIX + (value as unknown as { html: string }).html;
+    }
+    // Handle raw TipTap documents (fallback if not preprocessed)
+    // Mark with RAW_HTML_PREFIX so renderer knows not to escape
+    if (isTiptapDocument(value)) {
+      return RAW_HTML_PREFIX + tiptapToHtml(value);
     }
     return String(value);
   });

package/lib/client/routing/Router.tsx

@@ -29,6 +29,18 @@ import { parseLocaleFromPath, setStoredLocale, DEFAULT_I18N_CONFIG } from "../..
 import { fetchI18nConfig, setI18nConfig as setCachedI18nConfig } from "../i18nConfigService";
 import { IFRAME_MESSAGE_TYPES } from "../../shared/constants";
 
+/** SSR-serialized CMS context for client-side hydration */
+interface SSRCMSContext {
+  item: Record<string, unknown>;
+  templatePath: string;
+}
+
+declare global {
+  interface Window {
+    __MENO_CMS__?: SSRCMSContext;
+  }
+}
+
 /**
  * Router component props
  */
@@ -123,6 +135,11 @@ export function Router(props: RouterProps = {}): ReactElement {
   // Don't block rendering waiting for CMS context - render immediately and re-render when context arrives
   const [awaitingCmsContext, setAwaitingCmsContext] = useState(false);
   const [collectionItemsMap, setCollectionItemsMap] = useState<Record<string, CMSItem[]>>({});
+  // Store CMS template path for HMR reloads (so we don't lose it after initial load)
+  const [cmsTemplatePath, setCmsTemplatePath] = useState<string | null>(null);
+
+  // Track if initial mount used SSR CMS context (to skip redundant path-based load)
+  const ssrCmsHandledRef = useRef(false);
 
   // Create RouteLoader instance
   const routeLoader = useRef(new RouteLoader({
@@ -312,9 +329,11 @@ export function Router(props: RouterProps = {}): ReactElement {
   }, [componentTree, currentPath, services]);
 
   // Load components function using RouteLoader
+  // For CMS pages, use the stored template path instead of the URL path
   const loadComponents = useCallback(async (path: string) => {
-    await routeLoader.loadComponents(path);
-  }, []);
+    const pathToLoad = cmsTemplatePath || path;
+    await routeLoader.loadComponents(pathToLoad);
+  }, [cmsTemplatePath]);
 
   // Handle navigation
   useEffect(() => {
@@ -330,16 +349,37 @@ export function Router(props: RouterProps = {}): ReactElement {
   }, [loadComponents]);
 
   useEffect(() => {
+    // Check for SSR-serialized CMS context (from window.__MENO_CMS__)
+    // If present, use the template path instead of the CMS URL to avoid 404
+    const ssrCmsContext = window.__MENO_CMS__;
+    if (ssrCmsContext) {
+      // Set CMS context from SSR
+      setCmsContext(ssrCmsContext.item);
+      // Store template path for HMR reloads
+      setCmsTemplatePath(ssrCmsContext.templatePath);
+      // Mark that we're handling SSR CMS (to skip path-based load below)
+      ssrCmsHandledRef.current = true;
+      // Clear to prevent stale data on SPA navigation
+      delete window.__MENO_CMS__;
+    }
+
     // Initial load
     routeLoader.loadPages();
     routeLoader.loadGlobalComponents().then(() => {
-      loadComponents(currentPath);
+      // Use template path for CMS pages, otherwise use the current URL path
+      const pathToLoad = ssrCmsContext ? ssrCmsContext.templatePath : currentPath;
+      loadComponents(pathToLoad);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Only run on mount - currentPath handled by separate effect below
 
   // Reload when path changes
   useEffect(() => {
+    // Skip initial mount if SSR CMS context was handled (template already loading)
+    if (ssrCmsHandledRef.current) {
+      ssrCmsHandledRef.current = false;
+      return;
+    }
     setShowNotFound(false); // Reset not found state when path changes
     loadComponents(currentPath);
   }, [currentPath, loadComponents]);

package/lib/client/scripts/ScriptExecutor.test.ts

@@ -445,8 +445,8 @@ describe("ScriptExecutor", () => {
       componentRegistry.register("DynamicComponent", componentDef2);
 
       // Register multiple instances of dynamic component
-      const mockElement1 = originalDocument.createElement("div");
-      const mockElement2 = originalDocument.createElement("div");
+      const mockElement1 = document.createElement("div");
+      const mockElement2 = document.createElement("div");
       elementRegistry.register([0], mockElement1, "DynamicComponent", true, {
         id: "1",
       });
@@ -456,9 +456,9 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.execute();
 
-      // StaticComponent: 1 script tag (no templates)
-      // DynamicComponent: 2 script tags (with templates, 2 instances)
-      expect(injectedScripts.size).toBe(3);
+      // StaticComponent: 1 execution (no templates)
+      // DynamicComponent: 2 executions (with templates, 2 instances)
+      expect(executedCode.length).toBe(3);
     });
   });
 });

package/lib/client/templateEngine.ts

@@ -16,6 +16,7 @@ import { isRichTextMarker, richTextMarkerToHtml } from '../shared/propResolver';
 import { isTiptapDocument, tiptapToHtml } from '../shared/richtext';
 import { hasItemTemplates } from '../shared/itemTemplateUtils';
 import { safeEvaluate } from '../shared/expressionEvaluator';
+import { RAW_HTML_PREFIX } from '../shared/constants';
 
 // Re-export for backward compatibility
 export { isResponsiveStyle };
@@ -327,9 +328,10 @@ export function processStructure(
       // Use evaluateTemplate to preserve type (objects, arrays, numbers)
       if (/^\{\{.+\}\}$/.test(structure)) {
         const result = evaluateTemplate(structure, evalContext);
-        // Check for rich-text marker - convert to inline embed node
+        // Check for rich-text marker - extract HTML content with RAW_HTML_PREFIX
+        // The prefix signals to ComponentBuilder.processTextNode to render as HTML
         if (isRichTextMarker(result)) {
-          return { type: NODE_TYPE.EMBED, html: result.html, inline: true } as any;
+          return RAW_HTML_PREFIX + richTextMarkerToHtml(result);
         }
         if (typeof result === 'string' || typeof result === 'number') {
           return result;
@@ -391,11 +393,24 @@ export function processStructure(
         return null;
       }
       
-      // Preserve type from input structure, default to "node" if not present or invalid
+      // Check if this is a valid node structure or a plain object (like props)
       const inputNode = structure as ComponentNode;
-      const preservedType = inputNode.type && isValidNodeType(inputNode.type)
-        ? inputNode.type
-        : NODE_TYPE.NODE;
+      const hasValidNodeType = inputNode.type && isValidNodeType(inputNode.type);
+
+      // If no valid node type, treat as plain object and process values recursively
+      // This handles props objects like { text: "{{text}}", isMarginBottom: false }
+      if (!hasValidNodeType) {
+        const result: Record<string, unknown> = {};
+        for (const [key, value] of Object.entries(structure)) {
+          const processedValue = processStructure(value as any, context, viewportWidth, instanceChildren, preserveResponsiveStyles, depth + 1);
+          if (processedValue !== null && processedValue !== undefined) {
+            result[key] = processedValue;
+          }
+        }
+        return result as any;
+      }
+
+      const preservedType = inputNode.type;
 
       // Create base processed object based on type
       let processed: ComponentNode;