meno-core 1.0.21 → 1.0.23

package/lib/client/core/ComponentBuilder.ts

@@ -4,7 +4,7 @@
  * responsive styles, event handlers, and element registration.
  */
 
-import { createElement as h } from "react";
+import { createElement as h, Fragment } from "react";
 import type { ReactElement } from "react";
 
 // Component registry and utilities
@@ -15,6 +15,7 @@ import { ErrorBoundary } from "../ErrorBoundary";
 import type { ComponentNode, StyleValue } from "../../shared/types";
 import { isComponentNode, extractNodeProperties, isSlotMarker, isEmbedNode, isLinkNode, isLocaleListNode, isListNode, markAsSlotContent, evaluateNodeIf, isBooleanMapping } from "../../shared/nodeUtils";
 import { mergeNodeStyles } from "../../shared/styleNodeUtils";
+import { isCurrentLink } from "../../shared/linkUtils";
 import { extractAttributesFromNode } from "../../shared/attributeNodeUtils";
 import { resolvePropsFromDefinition } from "../../shared/propResolver";
 import { ElementRegistry } from "../elementRegistry";
@@ -56,6 +57,8 @@ export interface ComponentBuilderConfig {
   getCurrentPageName?: () => string;
   /** Optional getter for current file type (for interactive styles class generation) */
   getCurrentFileType?: () => 'page' | 'component';
+  /** Optional getter for current page URL path (for is-current class on link nodes) */
+  getCurrentPagePath?: () => string;
 }
 
 // Re-export types for backward compatibility
@@ -70,6 +73,7 @@ export class ComponentBuilder {
   private prefetchService?: PrefetchService;
   private getCurrentPageName?: () => string;
   private getCurrentFileType?: () => 'page' | 'component';
+  private getCurrentPagePath?: () => string;
   // Cache for utility classes computed from style objects (avoids recomputation for same styles)
   private styleClassCache: WeakMap<object, string[]> = new WeakMap();
 
@@ -79,6 +83,7 @@ export class ComponentBuilder {
     this.prefetchService = config.prefetchService;
     this.getCurrentPageName = config.getCurrentPageName;
     this.getCurrentFileType = config.getCurrentFileType;
+    this.getCurrentPagePath = config.getCurrentPagePath;
   }
 
   /**
@@ -306,6 +311,7 @@ export class ComponentBuilder {
       getEffectiveParentComponentName: this.getEffectiveParentComponentName.bind(this),
       getCurrentPageName: this.getCurrentPageName,
       getCurrentFileType: this.getCurrentFileType,
+      getCurrentPagePath: this.getCurrentPagePath,
     };
 
     // Handle text nodes - process CMS templates and item templates
@@ -362,7 +368,7 @@ export class ComponentBuilder {
     const processedProps = this.processPropsTemplates(props, ctx);
 
     // Convert styles to utility classes
-    const propsWithClasses = this.applyStyleClasses(processedProps, node);
+    const propsWithClasses = this.applyStyleClasses(processedProps, node, ctx);
 
     // Apply interactive styles
     const propsWithInteractive = this.applyInteractiveStyles(propsWithClasses, node, ctx);
@@ -375,6 +381,30 @@ export class ComponentBuilder {
       return this.buildCustomComponent(componentName, nodeProps, children, finalProps, options);
     }
 
+    // Component not found in registry - warn and show placeholder
+    if (nodeType === NODE_TYPE.COMPONENT && componentName) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(
+          `[Meno] Component "${componentName}" not found in registry. ` +
+          `Registered: [${this.componentRegistry.getNames().join(', ')}]`
+        );
+      }
+      return h('div', {
+        key,
+        style: {
+          border: '1px dashed #e5a00d',
+          padding: '8px 12px',
+          margin: '4px 0',
+          borderRadius: '4px',
+          color: '#b8860b',
+          fontSize: '13px',
+          fontFamily: 'monospace',
+          background: '#fffbe6',
+        },
+        'data-missing-component': componentName,
+      }, `Component not found: ${componentName}`);
+    }
+
     // Handle Link component
     if (tag === 'Link') {
       return buildLink(finalProps, children, ctx, builderDeps);
@@ -385,6 +415,90 @@ export class ComponentBuilder {
     return this.buildHtmlElement(tag, finalProps, children, customProps, htmlElementOptions);
   }
 
+  /**
+   * Expand Meno component markers in rich-text HTML into rendered React components.
+   * Mirrors the SSR expandRichTextComponents() function but produces React elements
+   * instead of HTML strings.
+   */
+  private expandRichTextComponents(html: string, ctx: BuilderContext): ReactElement {
+    // Quick bail-out if no component markers
+    if (!html.includes('data-meno-component')) {
+      return h('span', { dangerouslySetInnerHTML: { __html: html } });
+    }
+
+    const markerRegex = /<div\s+data-meno-component="([^"]+)"\s+data-meno-props="([^"]*)"[^>]*><\/div>/g;
+    const segments: ReactElement[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+    let segmentIndex = 0;
+
+    while ((match = markerRegex.exec(html)) !== null) {
+      // Add HTML before this match
+      if (match.index > lastIndex) {
+        const chunk = html.slice(lastIndex, match.index);
+        segments.push(h('span', { key: `rt-${segmentIndex++}`, dangerouslySetInnerHTML: { __html: chunk } }));
+      }
+
+      const componentName = match[1];
+      let props: Record<string, unknown> = {};
+      try {
+        const propsStr = match[2]
+          .replace(/&quot;/g, '"')
+          .replace(/&#039;/g, "'")
+          .replace(/&amp;/g, '&');
+        props = JSON.parse(propsStr);
+      } catch {
+        // ignore parse errors
+      }
+
+      if (this.componentRegistry.has(componentName)) {
+        const componentNode: ComponentNode = {
+          type: NODE_TYPE.COMPONENT as 'component',
+          component: componentName,
+          props,
+        };
+
+        const rendered = this.buildComponent({
+          node: componentNode,
+          key: segmentIndex,
+          customProps: {},
+          elementPath: ctx.elementPath,
+          parentComponentName: ctx.parentComponentName,
+          viewportWidth: ctx.viewportWidth,
+          componentContext: ctx.componentContext,
+          componentRootPath: ctx.componentRootPath,
+          locale: ctx.locale,
+          i18nConfig: ctx.i18nConfig,
+          cmsContext: ctx.cmsContext,
+          cmsLocale: ctx.cmsLocale,
+          collectionItemsMap: ctx.collectionItemsMap || {},
+          itemContext: ctx.itemContext,
+          cmsItemIndexPath: ctx.cmsItemIndexPath,
+          cmsListPaths: ctx.cmsListPaths,
+          templateContext: ctx.templateContext,
+          componentResolvedProps: ctx.componentResolvedProps,
+        });
+
+        if (rendered !== null) {
+          segments.push(rendered as ReactElement);
+        }
+      } else {
+        // Keep marker as-is for unregistered components
+        segments.push(h('span', { key: `rt-${segmentIndex}`, dangerouslySetInnerHTML: { __html: match[0] } }));
+      }
+
+      segmentIndex++;
+      lastIndex = match.index + match[0].length;
+    }
+
+    // Add remaining HTML
+    if (lastIndex < html.length) {
+      segments.push(h('span', { key: `rt-${segmentIndex}`, dangerouslySetInnerHTML: { __html: html.slice(lastIndex) } }));
+    }
+
+    return h(Fragment, null, ...segments);
+  }
+
   /**
    * Process text node with CMS and item templates
    * Returns a ReactElement with dangerouslySetInnerHTML for raw HTML content (rich-text),
@@ -412,7 +526,7 @@ export class ComponentBuilder {
     // 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 this.expandRichTextComponents(rawHtml, ctx);
     }
 
     return result;
@@ -502,11 +616,22 @@ export class ComponentBuilder {
   /**
    * Apply style classes to props
    */
-  private applyStyleClasses(props: Record<string, unknown>, node: ComponentNode): Record<string, unknown> {
+  private applyStyleClasses(props: Record<string, unknown>, node: ComponentNode, ctx: BuilderContext): Record<string, unknown> {
     const nodeStyle = node.style || (isComponentNode(node) ? node.props?.style : undefined);
 
     if (nodeStyle && typeof nodeStyle === 'object') {
-      const utilityClasses = this.getCachedStyleClasses(nodeStyle);
+      // Process item templates in style values (for List context)
+      let processedStyle = nodeStyle as Record<string, unknown>;
+      const templateCtx = ctx.templateContext || ctx.itemContext;
+      if (templateCtx) {
+        const effectiveLocale = ctx.cmsLocale || ctx.locale;
+        const config = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
+        const i18nResolver: ValueResolver | undefined = effectiveLocale
+          ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
+          : undefined;
+        processedStyle = processItemPropsTemplate(processedStyle, templateCtx, i18nResolver);
+      }
+      const utilityClasses = this.getCachedStyleClasses(processedStyle);
       if (utilityClasses.length > 0) {
         const existingClassName = (props.className || '') as string;
         const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
@@ -651,20 +776,16 @@ export class ComponentBuilder {
         return h(ErrorBoundary, { key, componentName, level: 'component' }, null);
       }
 
-      // Resolve props
-      let resolvedProps = resolvePropsFromDefinition(
-        structuredComponentDef,
-        nodeProps,
-        children as ComponentNode | string | (ComponentNode | string)[] | null | undefined,
-        locale,
-        i18nConfig
-      );
+      // Process templates on raw nodeProps BEFORE coercion/defaults
+      // This matches the SSR path where templates are resolved before resolvePropsFromDefinition
+      let propsToResolve = nodeProps;
 
-      // Process templates
+      // CMS templates first (matching SSR: ssrRenderer.ts processes CMS before coercion)
       if (cmsContext) {
-        resolvedProps = processCMSPropsTemplate(resolvedProps, cmsContext, cmsLocale || locale);
+        propsToResolve = processCMSPropsTemplate(propsToResolve, cmsContext, cmsLocale || locale);
       }
 
+      // Item templates second
       const effectiveItemContext = templateContext || itemContext;
       if (effectiveItemContext) {
         const effectiveLocale = cmsLocale || locale;
@@ -672,9 +793,18 @@ export class ComponentBuilder {
         const i18nResolver: ValueResolver | undefined = effectiveLocale
           ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
           : undefined;
-        resolvedProps = processItemPropsTemplate(resolvedProps, effectiveItemContext, i18nResolver);
+        propsToResolve = processItemPropsTemplate(propsToResolve, effectiveItemContext, i18nResolver);
       }
 
+      // Resolve props (validate, coerce types, apply defaults) AFTER templates are resolved
+      let resolvedProps = resolvePropsFromDefinition(
+        structuredComponentDef,
+        propsToResolve,
+        children as ComponentNode | string | (ComponentNode | string)[] | null | undefined,
+        locale,
+        i18nConfig
+      );
+
       // Process structure
       const typedChildren = children as ComponentNode | ComponentNode[] | string | number | null | undefined;
       const markedChildren = typedChildren ? markAsSlotContent(typedChildren) : undefined;
@@ -766,6 +896,15 @@ export class ComponentBuilder {
       key
     };
 
+    // Add is-current class for <a> tags when href matches current page path
+    if (finalTag === 'a' && this.getCurrentPagePath) {
+      const href = processedProps.href as string | undefined;
+      if (href && typeof href === 'string' && isCurrentLink(href, this.getCurrentPagePath())) {
+        const existing = (processedProps.className || '') as string;
+        processedProps.className = existing ? `${existing} is-current` : 'is-current';
+      }
+    }
+
     // Register element via ref callback
     processedProps.ref = (el: HTMLElement | null) => {
       if (el) {

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

@@ -15,7 +15,9 @@ import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveEx
 import DOMPurify from "isomorphic-dompurify";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext } from "./types";
-import { hasItemTemplates, processItemTemplate } from "../../../shared/itemTemplateUtils";
+import { hasItemTemplates, processItemTemplate, processItemPropsTemplate, type ValueResolver } from "../../../shared/itemTemplateUtils";
+import { resolveI18nValue, DEFAULT_I18N_CONFIG } from "../../../shared/i18n";
+import { processCMSTemplate } from "../cmsTemplateProcessor";
 
 export interface EmbedBuilderDeps {
   elementRegistry: ElementRegistry;
@@ -36,7 +38,7 @@ export interface EmbedBuilderDeps {
  */
 const SANITIZE_CONFIG = {
   ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'text', 'tspan', 'image', 'defs', 'use', 'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'symbol', 'a', 'div', 'span', 'p', 'br', 'button', 'img', 'iframe', 'video', 'audio', 'source', 'canvas', 'b', 'i', 'u', 'strong', 'em', 'sub', 'sup', 'mark', 's', 'small', 'del', 'ins', 'q', 'abbr', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-  ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity'],
+  ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity', 'frameborder', 'allowfullscreen', 'allow', 'title'],
   KEEP_CONTENT: true
 };
 
@@ -55,7 +57,19 @@ export function buildEmbed(
 
   // Process item template strings (for List context) - e.g., {{item.icon}}, {{feature.title}}
   if (ctx.templateContext && hasItemTemplates(htmlContent)) {
-    htmlContent = processItemTemplate(htmlContent, ctx.templateContext);
+    // Create i18n resolver for template processing (matching SSR behavior)
+    const effectiveLocale = ctx.cmsLocale || ctx.locale;
+    const i18nConfig = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
+    const i18nResolver: ValueResolver | undefined = effectiveLocale
+      ? (value: unknown) => resolveI18nValue(value, effectiveLocale, i18nConfig)
+      : undefined;
+    htmlContent = processItemTemplate(htmlContent, ctx.templateContext, i18nResolver);
+  }
+
+  // Process CMS template strings (for CMS page context) - e.g., {{cms.title}}, {{cms.description}}
+  if (ctx.cmsContext && htmlContent.includes('{{cms.')) {
+    const effectiveLocale = ctx.cmsLocale || ctx.locale;
+    htmlContent = processCMSTemplate(htmlContent, ctx.cmsContext, effectiveLocale);
   }
 
   // Sanitize HTML with allowlist
@@ -95,7 +109,22 @@ export function buildEmbed(
 
   // Convert embed styles to utility classes
   if (node.style) {
-    const utilityClasses = responsiveStylesToClasses(node.style as StyleObject | ResponsiveStyleObject);
+    // Process item templates in style values (for List context)
+    let processedStyle = node.style;
+    if (ctx.templateContext) {
+      // Create i18n resolver for style template processing (matching SSR behavior)
+      const effectiveLocale = ctx.cmsLocale || ctx.locale;
+      const i18nConfig = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
+      const i18nResolver: ValueResolver | undefined = effectiveLocale
+        ? (value: unknown) => resolveI18nValue(value, effectiveLocale, i18nConfig)
+        : undefined;
+      processedStyle = processItemPropsTemplate(
+        node.style as Record<string, unknown>,
+        ctx.templateContext,
+        i18nResolver
+      ) as StyleObject | ResponsiveStyleObject;
+    }
+    const utilityClasses = responsiveStylesToClasses(processedStyle as StyleObject | ResponsiveStyleObject);
     classNames.push(...utilityClasses);
   }
 
@@ -165,9 +194,22 @@ export function buildEmbed(
     embedProps.className = classNames.filter(Boolean).join(' ');
   }
 
+  // Process item templates in extracted attributes (for List context)
+  let processedAttributes = extractedAttributes;
+  if (ctx.templateContext && Object.keys(extractedAttributes).length > 0) {
+    const effectiveLocale = ctx.cmsLocale || ctx.locale;
+    const config = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
+    const i18nResolver: ValueResolver | undefined = effectiveLocale
+      ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
+      : undefined;
+    processedAttributes = processItemPropsTemplate(
+      extractedAttributes, ctx.templateContext, i18nResolver
+    ) as Record<string, string | number | boolean>;
+  }
+
   // Add extracted attributes (like class, id, data-*, aria-*, etc.)
-  if (Object.keys(extractedAttributes).length > 0) {
-    Object.assign(embedProps, extractedAttributes);
+  if (Object.keys(processedAttributes).length > 0) {
+    Object.assign(embedProps, processedAttributes);
   }
 
   // Add parent component context

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

@@ -37,7 +37,7 @@ export function buildLink(
   const {
     key, elementPath, parentComponentName, viewportWidth, componentContext, componentRootPath,
     locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap,
-    itemContext, cmsItemIndexPath, templateContext, componentResolvedProps
+    itemContext, cmsItemIndexPath, cmsListPaths, templateContext, componentResolvedProps
   } = ctx;
 
   const { to, prefetch: prefetchAttr, ...restProps } = props;
@@ -131,6 +131,6 @@ export function buildLink(
     }
   }, deps.buildChildren(children, {
     elementPath, parentComponentName: effectiveParentComponentName, viewportWidth, componentContext, componentRootPath,
-    locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, itemContext, cmsItemIndexPath, templateContext, componentResolvedProps
+    locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, itemContext, cmsItemIndexPath, cmsListPaths, templateContext, componentResolvedProps
   }));
 }

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

@@ -12,6 +12,9 @@ import { pathToString } from "../../../shared/pathArrayUtils";
 import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
 import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
 import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
+import { processItemPropsTemplate, type ValueResolver } from "../../../shared/itemTemplateUtils";
+import { resolveI18nValue, DEFAULT_I18N_CONFIG } from "../../../shared/i18n";
+import { isCurrentLink } from "../../../shared/linkUtils";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext, BuildResult, BuildChildrenContext } from "./types";
 
@@ -29,6 +32,8 @@ export interface LinkNodeBuilderDeps {
   getCurrentPageName?: () => string;
   /** Optional getter for current file type (for interactive styles class generation) */
   getCurrentFileType?: () => 'page' | 'component';
+  /** Optional getter for current page path (for is-current class on link nodes) */
+  getCurrentPagePath?: () => string;
 }
 
 /**
@@ -43,7 +48,7 @@ export function buildLinkNode(
   const {
     key, elementPath, parentComponentName, viewportWidth, componentContext, componentRootPath,
     locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap,
-    itemContext, cmsItemIndexPath, templateContext, componentResolvedProps
+    itemContext, cmsItemIndexPath, cmsListPaths, templateContext, componentResolvedProps
   } = ctx;
 
   const effectiveParentComponentName = deps.getEffectiveParentComponentName(componentContext, parentComponentName);
@@ -80,7 +85,22 @@ export function buildLinkNode(
 
   // Convert link node styles to utility classes
   if (node.style) {
-    const utilityClasses = responsiveStylesToClasses(node.style as StyleObject | ResponsiveStyleObject);
+    // Process item templates in style values (for List context)
+    let processedStyle = node.style;
+    if (ctx.templateContext) {
+      // Create i18n resolver for style template processing (matching SSR behavior)
+      const effectiveLocale = ctx.cmsLocale || ctx.locale;
+      const i18nConfig = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
+      const i18nResolver: ValueResolver | undefined = effectiveLocale
+        ? (value: unknown) => resolveI18nValue(value, effectiveLocale, i18nConfig)
+        : undefined;
+      processedStyle = processItemPropsTemplate(
+        node.style as Record<string, unknown>,
+        ctx.templateContext,
+        i18nResolver
+      ) as StyleObject | ResponsiveStyleObject;
+    }
+    const utilityClasses = responsiveStylesToClasses(processedStyle as StyleObject | ResponsiveStyleObject);
     classNames.push(...utilityClasses);
   }
 
@@ -145,14 +165,34 @@ export function buildLinkNode(
     delete extractedAttributes.className;
   }
 
+  // Add is-current class when link href matches current page path
+  if (deps.getCurrentPagePath && typeof node.href === 'string') {
+    if (isCurrentLink(node.href, deps.getCurrentPagePath())) {
+      classNames.push('is-current');
+    }
+  }
+
   // Set final className
   if (classNames.length > 0) {
     linkNodeProps.className = classNames.filter(Boolean).join(' ');
   }
 
+  // Process item templates in extracted attributes (for List context)
+  let processedAttributes = extractedAttributes;
+  if (ctx.templateContext && Object.keys(extractedAttributes).length > 0) {
+    const effectiveLocale = ctx.cmsLocale || ctx.locale;
+    const config = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
+    const i18nResolver: ValueResolver | undefined = effectiveLocale
+      ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
+      : undefined;
+    processedAttributes = processItemPropsTemplate(
+      extractedAttributes, ctx.templateContext, i18nResolver
+    ) as Record<string, string | number | boolean>;
+  }
+
   // Add extracted attributes (like class, id, data-*, aria-*, etc.)
-  if (Object.keys(extractedAttributes).length > 0) {
-    Object.assign(linkNodeProps, extractedAttributes);
+  if (Object.keys(processedAttributes).length > 0) {
+    Object.assign(linkNodeProps, processedAttributes);
   }
 
   // Add parent component context
@@ -166,7 +206,7 @@ export function buildLinkNode(
   // Build children recursively
   const linkNodeChildren = deps.buildChildren(children, {
     elementPath, parentComponentName: effectiveParentComponentName, viewportWidth, componentContext, componentRootPath,
-    locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, itemContext, cmsItemIndexPath, templateContext, componentResolvedProps
+    locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, itemContext, cmsItemIndexPath, cmsListPaths, templateContext, componentResolvedProps
   });
 
   return h('div', linkNodeProps, linkNodeChildren);

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

@@ -5,7 +5,7 @@
  * - CMS collections (sourceType: 'collection')
  */
 
-import { createElement as h } from "react";
+import { createElement as h, Fragment } from "react";
 import type { ReactElement } from "react";
 import type { ListNode } from "../../../shared/registry/nodeTypes/ListNodeType";
 import type { CMSItem, CMSFilterCondition, CMSSortConfig, CMSFilterOperator } from "../../../shared/types/cms";
@@ -221,8 +221,8 @@ export function buildList(
   const textColor = isCollectionMode ? '#8b5cf6' : '#3b82f6';
   const label = isCollectionMode ? 'CMS List' : 'List';
 
-  // Use configurable tag (defaults to 'div') - declared early for all return paths
-  const tag = node.tag || 'div';
+  // Use configurable tag (defaults to 'div') - null means fragment mode (no wrapper)
+  const tag = node.tag === false ? null : (node.tag || 'div');
 
   if (!source && !sourceIsResolved) {
     // No source - render empty container with placeholder
@@ -239,6 +239,9 @@ export function buildList(
         textAlign: 'center'
       }
     }, `${label}: No source - No items`);
+    if (tag === null) {
+      return emptyState;
+    }
     return h(tag, containerProps, emptyState);
   }
 
@@ -257,6 +260,9 @@ export function buildList(
         textAlign: 'center'
       }
     }, `${label}: ${source || 'resolved'} - No items`);
+    if (tag === null) {
+      return emptyState;
+    }
     return h(tag, containerProps, emptyState);
   }
 
@@ -316,6 +322,9 @@ export function buildList(
     }
   }
 
+  if (tag === null) {
+    return h(Fragment, null, renderedItems);
+  }
   return h(tag, containerProps, renderedItems);
 }
 

package/lib/client/routing/Router.tsx

@@ -142,6 +142,8 @@ export function Router(props: RouterProps = {}): ReactElement {
 
   // Track if initial mount used SSR CMS context (to skip redundant path-based load)
   const ssrCmsHandledRef = useRef(false);
+  // Track if initial load is done (to prevent currentPath effect from firing on mount)
+  const initialLoadDoneRef = useRef(false);
 
   // Create RouteLoader instance
   const routeLoader = useRef(new RouteLoader({
@@ -424,7 +426,12 @@ export function Router(props: RouterProps = {}): ReactElement {
 
   // Reload when path changes
   useEffect(() => {
-    // Skip initial mount if SSR CMS context was handled (template already loading)
+    // Skip initial mount - handled by mount effect above
+    if (!initialLoadDoneRef.current) {
+      initialLoadDoneRef.current = true;
+      return;
+    }
+    // Skip if SSR CMS context was just handled (template already loading)
     if (ssrCmsHandledRef.current) {
       ssrCmsHandledRef.current = false;
       return;