meno-core 1.0.6 → 1.0.7

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/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;

package/lib/server/fileWatcher.ts

@@ -13,12 +13,14 @@ export interface FileWatchCallbacks {
   onComponentChange?: () => Promise<void>;
   onPageChange?: (pagePath: string) => Promise<void>;
   onColorsChange?: () => Promise<void>;
+  onCMSChange?: (collection: string) => Promise<void>;
 }
 
 export class FileWatcher {
   private componentsWatcher: FSWatcher | null = null;
   private pagesWatcher: FSWatcher | null = null;
   private colorsWatcher: FSWatcher | null = null;
+  private cmsWatcher: FSWatcher | null = null;
   
   constructor(private callbacks: FileWatchCallbacks) {}
   
@@ -98,12 +100,37 @@ export class FileWatcher {
   }
 
   /**
-   * Start watching both directories
+   * Start watching CMS directory
+   * Watches for changes in CMS content files (cms/{collection}/*.json)
+   */
+  watchCMS(dirPath: string = projectPaths.cms()): void {
+    if (!existsSync(dirPath)) {
+      return;
+    }
+
+    this.cmsWatcher = watch(
+      dirPath,
+      { recursive: true },
+      async (event, filename) => {
+        if (filename && filename.endsWith('.json')) {
+          // Extract collection from path: "blog/my-post.json" -> "blog"
+          const collection = filename.split('/')[0];
+          if (this.callbacks.onCMSChange) {
+            await this.callbacks.onCMSChange(collection);
+          }
+        }
+      }
+    );
+  }
+
+  /**
+   * Start watching all directories
    */
   watchAll(): void {
     this.watchComponents();
     this.watchPages();
     this.watchColors();
+    this.watchCMS();
   }
   
   /**
@@ -124,13 +151,18 @@ export class FileWatcher {
       this.colorsWatcher.close();
       this.colorsWatcher = null;
     }
+
+    if (this.cmsWatcher) {
+      this.cmsWatcher.close();
+      this.cmsWatcher = null;
+    }
   }
   
   /**
    * Check if watchers are active
    */
   isWatching(): boolean {
-    return this.componentsWatcher !== null || this.pagesWatcher !== null;
+    return this.componentsWatcher !== null || this.pagesWatcher !== null || this.cmsWatcher !== null;
   }
 }
 

package/lib/server/routes/pages.ts

@@ -7,7 +7,7 @@ import type { RouteContext } from './index';
 import { generateSSRHTML } from '../ssrRenderer';
 import { getStaticFilePath } from '../../shared/pathUtils';
 import { parseJSON, loadI18nConfig } from '../jsonLoader';
-import { packagePaths } from '../projectContext';
+import { packagePaths, projectPaths } from '../projectContext';
 import { parseLocaleFromPath } from '../../shared/i18n';
 import { buildSlugIndex, resolveSlugToPageId } from '../../shared/slugTranslator';
 import type { CMSItem } from '../../shared/types';
@@ -48,19 +48,27 @@ export async function handlePageRoute(
           // Convert global components Map to Record for SSR
           const globalComponentsRecord = componentService.getAllComponents();
 
+          // Convert absolute template path to URL path for client-side hydration
+          // e.g., /Users/.../pages/templates/posts.json -> /templates/posts
+          const pagesDir = projectPaths.pages();
+          const cmsTemplatePath = cmsMatch.pagePath
+            .replace(pagesDir, '')        // Remove pages directory prefix
+            .replace(/\.json$/, '');      // Remove .json extension
+
           // Generate SSR HTML with CMS context
           const baseUrl = `${url.protocol}//${url.host}`;
-          const ssrHTML = await generateSSRHTML(
-            pageData as import('../../shared/types').JSONPage,
-            globalComponentsRecord,
+          const ssrHTML = await generateSSRHTML({
+            pageData: pageData as import('../../shared/types').JSONPage,
+            globalComponents: globalComponentsRecord,
             pagePath,
             baseUrl,
-            false,
+            useBuiltBundle: false,
             locale,
             slugMappings,
-            { cms: cmsMatch.item },  // Pass CMS item as context
-            cmsService  // Pass CMS service for CMSList rendering
-          );
+            cmsContext: { cms: cmsMatch.item },
+            cmsService,
+            cmsTemplatePath,
+          });
 
           return new Response(ssrHTML, {
             headers: {