meno-core 1.0.53 → 1.1.0

package/lib/server/ssr/ssrRenderer.ts

@@ -3,21 +3,51 @@
  * Converts JSON component structures to HTML strings for SEO-friendly initial page loads
  */
 
-import type { ComponentNode, ComponentDefinition, JSONPage, CMSItem, EmbedNode, LinkNode, LocaleListNode, CMSFilterCondition } from '../../shared/types';
+import type { ComponentNode, ComponentDefinition, JSONPage, CMSItem, CMSFilterCondition } from '../../shared/types';
 import type { TemplateContext, NestedCMSListConfig } from '../../shared/types/cms';
-import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, buildTemplateContext, resolveItemsTemplate, resolveTemplateRawValue, addItemUrl, getNestedValue, type ValueResolver } from '../../shared/itemTemplateUtils';
+import {
+  processItemTemplate,
+  processItemPropsTemplate,
+  hasItemTemplates,
+  buildTemplateContext,
+  resolveItemsTemplate,
+  resolveTemplateRawValue,
+  addItemUrl,
+  getNestedValue,
+  type ValueResolver,
+} from '../../shared/itemTemplateUtils';
 import { singularize, isItemDraftForLocale } from '../../shared/types/cms';
+import { applyCmsFilters, applyCmsSorting } from '../../shared/cmsQuery';
 import type { ResponsiveStyleObject, StyleObject } from '../../shared/types';
 import type { BreakpointConfig } from '../../shared/breakpoints';
 import type { ResponsiveScales } from '../../shared/responsiveScaling';
-import { evaluateTemplate, processStructure, isResponsiveStyle, isHtmlMapping, resolveHtmlMapping } from '../../client/templateEngine';
-import { resolvePropsFromDefinition, isRichTextMarker, richTextMarkerToHtml } from '../../shared/propResolver';
+import { processStructure, isResponsiveStyle, isHtmlMapping, resolveHtmlMapping } from '../../client/templateEngine';
+import { resolvePropsFromDefinition } from '../../shared/propResolver';
 import { loadBreakpointConfig, loadI18nConfig } from '../jsonLoader';
 import { configService } from '../services/configService';
 import type { I18nConfig } from '../../shared/types/components';
-import { extractLocaleFromPath, DEFAULT_I18N_CONFIG, resolveI18nValue, buildLocalizedPath, isI18nValue } from '../../shared/i18n';
+import {
+  extractLocaleFromPath,
+  DEFAULT_I18N_CONFIG,
+  resolveI18nValue,
+  buildLocalizedPath,
+  isI18nValue,
+} from '../../shared/i18n';
 import { NODE_TYPE } from '../../shared/constants';
-import { isComponentNode, isHtmlNode, isLinkNode, isEmbedNode, isLocaleListNode, isListNode, markAsSlotContent, isBooleanMapping, hasIf, isSlotContent, hasChildren } from '../../shared/nodeUtils';
+import {
+  isComponentNode,
+  isHtmlNode,
+  isLinkNode,
+  isEmbedNode,
+  isLocaleListNode,
+  isListNode,
+  isIslandNode,
+  isCustomNode,
+  markAsSlotContent,
+  isBooleanMapping,
+  hasIf,
+  isSlotContent,
+} from '../../shared/nodeUtils';
 import type { ListNode } from '../../shared/registry/nodeTypes/ListNodeType';
 import type { CMSService } from '../services/cmsService';
 import { extractAttributesFromNode, skipEmptyTemplateAttributes } from '../../shared/attributeNodeUtils';
@@ -28,14 +58,18 @@ import { mergeResponsiveStyles } from '../../shared/responsiveStyleUtils';
 // Lazy-loaded: jsdom (used by isomorphic-dompurify on the server) can't be bundled by esbuild
 // because it reads CSS files relative to __dirname at init time. When the module is unavailable
 // (packaged Electron app), embed HTML is returned unsanitized — acceptable since content is local.
-let _DOMPurify: any = null;
+/** The one DOMPurify method the renderer calls. */
+interface DOMPurifyLike {
+  sanitize: (html: string, opts?: Record<string, unknown>) => string;
+}
+let _DOMPurify: DOMPurifyLike | null = null;
 let _DOMPurifyLoaded = false;
-function getDOMPurify() {
+function getDOMPurify(): DOMPurifyLike | null {
   if (!_DOMPurifyLoaded) {
     _DOMPurifyLoaded = true;
     try {
-      _DOMPurify = require('isomorphic-dompurify');
-      if (_DOMPurify.default) _DOMPurify = _DOMPurify.default;
+      const mod = require('isomorphic-dompurify') as DOMPurifyLike & { default?: DOMPurifyLike };
+      _DOMPurify = mod.default ?? mod;
     } catch {
       // Not available in bundled environment
     }
@@ -46,20 +80,31 @@ import { responsiveStylesToClasses } from '../../shared/utilityClassMapper';
 import { validateStyleCoverage } from '../validateStyleCoverage';
 import { generateElementClassName, type ElementClassContext } from '../../shared/elementClassName';
 import type { InteractiveStyles } from '../../shared/types/styles';
-import { extractInteractiveStyleMappings, resolveExtractedMappings, hasInteractiveStyleMappings } from '../../shared/interactiveStyleMappings';
+import {
+  extractInteractiveStyleMappings,
+  resolveExtractedMappings,
+  hasInteractiveStyleMappings,
+} from '../../shared/interactiveStyleMappings';
 import { isCurrentLink } from '../../shared/linkUtils';
 import type { SlugMap } from '../../shared/slugTranslator';
 import { buildSlugIndex, getLocaleLinks, translatePath } from '../../shared/slugTranslator';
 
 // Import from modularized files
 import { escapeHtml, buildAttributes, buildEditorAttrs, styleToString } from './attributeBuilder';
+import { logRuntimeError } from '../../shared/errorLogger';
 import { toFriendlyError } from '../../shared/friendlyError';
 import { rewriteViewportUnits } from '../../shared/viewportUnits';
 import { extractPageMeta, generateMetaTags } from './metaTagGenerator';
 import { collectComponentCSS } from './cssCollector';
 import { collectComponentJavaScript } from './jsCollector';
-import { CMSContext, processCMSTemplate, processCMSPropsTemplate, createI18nResolver, RAW_HTML_PREFIX } from './cmsSSRProcessor';
-import { ImageMetadataMap, DEFAULT_SIZES, buildImageMetadataMap, rewriteRichTextImages } from './imageMetadata';
+import {
+  type CMSContext,
+  processCMSTemplate,
+  processCMSPropsTemplate,
+  createI18nResolver,
+  RAW_HTML_PREFIX,
+} from './cmsSSRProcessor';
+import { type ImageMetadataMap, DEFAULT_SIZES, buildImageMetadataMap, rewriteRichTextImages } from './imageMetadata';
 
 /**
  * Image preload info for generating <link rel="preload"> tags in head
@@ -86,7 +131,7 @@ export type { CMSContext } from './cmsSSRProcessor';
 function resolveI18nAttrs<T extends Record<string, unknown>>(
   attrs: T,
   locale: string | undefined,
-  i18nConfig: I18nConfig | undefined
+  i18nConfig: I18nConfig | undefined,
 ): T {
   let mutated: Record<string, unknown> | null = null;
   const config = i18nConfig ?? DEFAULT_I18N_CONFIG;
@@ -243,47 +288,37 @@ function localizeHref(href: string, ctx: SSRContext): string {
  */
 function localizeRichTextLinks(html: string, ctx: SSRContext): string {
   if (ctx.templateMode || !ctx.locale || !ctx.i18nConfig) return html;
-  return html.replace(
-    /<a\b([^>]*?)href=(["'])([^"']*?)\2([^>]*?)>/gi,
-    (match, before, quote, href, after) => {
-      if (!href.startsWith('/') || href.startsWith('//')) return match;
-      const localized = localizeHref(href, ctx);
-      return localized === href ? match : `<a${before}href=${quote}${localized}${quote}${after}>`;
-    }
-  );
+  return html.replace(/<a\b([^>]*?)href=(["'])([^"']*?)\2([^>]*?)>/gi, (match, before, quote, href, after) => {
+    if (!href.startsWith('/') || href.startsWith('//')) return match;
+    const localized = localizeHref(href, ctx);
+    return localized === href ? match : `<a${before}href=${quote}${localized}${quote}${after}>`;
+  });
 }
 
 /**
  * Process style templates and convert to utility classes.
  * Handles {{item.field}} patterns within list contexts.
  */
-function processStyleToClasses(
-  style: StyleObject | ResponsiveStyleObject | undefined,
-  ctx: SSRContext
-): string[] {
+function processStyleToClasses(style: StyleObject | ResponsiveStyleObject | undefined, ctx: SSRContext): string[] {
   if (!style) return [];
 
   let processedStyle = style;
   const templateCtx = getTemplateContext(ctx);
   if (templateCtx && !ctx.templateMode) {
-    processedStyle = processItemPropsTemplate(
-      style as Record<string, unknown>,
-      templateCtx,
-      getI18nResolver(ctx)
-    ) as StyleObject | ResponsiveStyleObject;
+    processedStyle = processItemPropsTemplate(style as Record<string, unknown>, templateCtx, getI18nResolver(ctx)) as
+      | StyleObject
+      | ResponsiveStyleObject;
   }
 
   // Fluid container pattern: in fluid mode `responsiveStylesToClasses` rewrites
   // any tier whose `width === maxWidth` to use `calc(100% - var(--site-margin)*2)`
   // with auto margins.
-  const fluidActive =
-    ctx.responsiveScales?.enabled === true &&
-    ctx.responsiveScales?.mode === 'fluid';
+  const fluidActive = ctx.responsiveScales?.enabled === true && ctx.responsiveScales?.mode === 'fluid';
 
-  return responsiveStylesToClasses(
-    processedStyle as ResponsiveStyleObject,
-    { fluidActive, responsiveScales: ctx.responsiveScales }
-  );
+  return responsiveStylesToClasses(processedStyle as ResponsiveStyleObject, {
+    fluidActive,
+    responsiveScales: ctx.responsiveScales,
+  });
 }
 
 /**
@@ -344,50 +379,88 @@ function evaluateIfCondition(node: ComponentNode, ctx: SSRContext): boolean {
   return true;
 }
 
+/**
+ * Sentinel returned by resolveFilterValue when a {{...}} template value can't
+ * be resolved from the available scope. Lets resolveFilterTemplates tell
+ * "resolved to a real value" apart from "unresolvable" so the condition can be
+ * dropped from the CMS query instead of being sent as a literal template
+ * string — which would never match a real value and silently return nothing.
+ */
+const UNRESOLVED_FILTER_VALUE = Symbol('unresolved-filter-value');
+
 /**
  * Resolve a template value like "{{category.slug}}" from a flat scope.
- * Returns the original value if not a template or can't be resolved.
+ * Returns the original value for non-template values, and
+ * UNRESOLVED_FILTER_VALUE when a template can't be resolved.
  */
 function resolveFilterValue(value: unknown, scope: Record<string, unknown> | undefined): unknown {
-  if (!scope || typeof value !== 'string' || !value.startsWith('{{') || !value.endsWith('}}')) {
+  if (typeof value !== 'string' || !value.startsWith('{{') || !value.endsWith('}}')) {
     return value;
   }
   const path = value.slice(2, -2).trim();
-  const resolved = getNestedValue(scope, path);
-  return resolved !== undefined ? resolved : value;
+  const resolved = scope ? getNestedValue(scope, path) : undefined;
+  return resolved !== undefined ? resolved : UNRESOLVED_FILTER_VALUE;
 }
 
 /**
  * Resolve template values in CMS filter for nested cms-list support.
  * Handles filter values like "{{category.slug}}" against a flat scope built from
  * parent template context overlaid on host-component resolved props.
+ *
+ * Conditions whose template value can't be resolved are dropped from the query
+ * (a verbatim "{{x.y}}" string would match nothing) and surfaced via
+ * logRuntimeError — dropping a condition changes results, so users must be
+ * able to see why.
  */
 function resolveFilterTemplates(
   filter: CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown> | undefined,
-  scope: Record<string, unknown> | undefined
+  scope: Record<string, unknown> | undefined,
+  collection: string,
 ): CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown> | undefined {
-  if (!filter || !scope) return filter;
+  if (!filter) return filter;
+
+  const reportDropped = (field: unknown, template: unknown): void => {
+    logRuntimeError(
+      'ssrRenderer.resolveFilterTemplates',
+      new Error(`Unresolved filter template ${String(template)} — condition dropped from "${collection}" query`),
+      { collection, field: String(field), template: String(template) },
+    );
+  };
 
   // Handle array of conditions
   if (Array.isArray(filter)) {
-    return filter.map(cond => ({
-      ...cond,
-      value: resolveFilterValue(cond.value, scope)
-    }));
+    const conditions: CMSFilterCondition[] = [];
+    for (const cond of filter) {
+      const value = resolveFilterValue(cond.value, scope);
+      if (value === UNRESOLVED_FILTER_VALUE) {
+        reportDropped(cond.field, cond.value);
+        continue;
+      }
+      conditions.push({ ...cond, value } as CMSFilterCondition);
+    }
+    return conditions;
   }
 
   // Handle single condition object with field/value
   if ('field' in filter && 'value' in filter) {
-    return {
-      ...(filter as CMSFilterCondition),
-      value: resolveFilterValue((filter as CMSFilterCondition).value, scope)
-    };
+    const cond = filter as CMSFilterCondition;
+    const value = resolveFilterValue(cond.value, scope);
+    if (value === UNRESOLVED_FILTER_VALUE) {
+      reportDropped(cond.field, cond.value);
+      return undefined;
+    }
+    return { ...cond, value } as CMSFilterCondition;
   }
 
   // Handle simple object filter: { category: "{{category.slug}}" }
   const resolved: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(filter)) {
-    resolved[key] = resolveFilterValue(value, scope);
+    const resolvedValue = resolveFilterValue(value, scope);
+    if (resolvedValue === UNRESOLVED_FILTER_VALUE) {
+      reportDropped(key, value);
+      continue;
+    }
+    resolved[key] = resolvedValue;
   }
   return resolved;
 }
@@ -405,38 +478,47 @@ async function expandRichTextComponents(html: string, ctx: SSRContext): Promise<
   const markerRegex = /<div\s+data-meno-component="([^"]+)"\s+data-meno-props="([^"]*)"[^>]*><\/div>/g;
   const parts: (string | Promise<string>)[] = [];
   let lastIndex = 0;
-  let match: RegExpExecArray | null;
+  let match: RegExpExecArray | null = markerRegex.exec(html);
 
-  while ((match = markerRegex.exec(html)) !== null) {
+  while (match !== null) {
+    const currentMatch = match;
+    match = markerRegex.exec(html);
     // Add text before this match
-    if (match.index > lastIndex) {
-      parts.push(html.slice(lastIndex, match.index));
+    if (currentMatch.index > lastIndex) {
+      parts.push(html.slice(lastIndex, currentMatch.index));
     }
 
-    const componentName = match[1];
+    const componentName = currentMatch[1];
+    if (componentName === undefined) {
+      // Keep marker; mirror the unknown-component fallback below.
+      parts.push(currentMatch[0]);
+      lastIndex = currentMatch.index + currentMatch[0].length;
+      continue;
+    }
     let props: Record<string, unknown> = {};
     try {
       // Unescape HTML entities in the JSON
-      const propsStr = match[2]
+      const propsStr = (currentMatch[2] ?? '')
         .replace(/&quot;/g, '"')
         .replace(/&#039;/g, "'")
         .replace(/&amp;/g, '&');
       props = JSON.parse(propsStr);
-    } catch {
-      // ignore parse errors
+    } catch (error) {
+      // Malformed data-meno-props JSON: fall back to interface defaults so the
+      // marker never crashes the page, but surface the parse failure — the
+      // component silently losing its instance props is otherwise invisible.
+      logRuntimeError('ssrRenderer.expandRichTextComponents', error, { component: componentName });
     }
 
     // Render the component using SSR registry
     if (ssrComponentRegistry.has(componentName)) {
-      parts.push(
-        renderComponent(componentName, props, [], {}, ctx)
-      );
+      parts.push(renderComponent(componentName, props, [], {}, ctx));
     } else {
       // Keep marker for unknown components
-      parts.push(match[0]);
+      parts.push(currentMatch[0]);
     }
 
-    lastIndex = match.index + match[0].length;
+    lastIndex = currentMatch.index + currentMatch[0].length;
   }
 
   // Add remaining text
@@ -470,8 +552,15 @@ export async function buildComponentHTML(
   cmsContext?: CMSContext,
   cmsService?: CMSService,
   isProductionBuild?: boolean,
-  injectEditorAttrs?: boolean
-): Promise<{ html: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string>; ssrFallbackCollector: Map<string, string>; processedRawHtmlCollector: Map<string, string> }> {
+  injectEditorAttrs?: boolean,
+): Promise<{
+  html: string;
+  interactiveStylesMap: Map<string, InteractiveStyles>;
+  preloadImages: PreloadImage[];
+  neededCollections: Set<string>;
+  ssrFallbackCollector: Map<string, string>;
+  processedRawHtmlCollector: Map<string, string>;
+}> {
   // Create map to collect interactive styles during render
   const interactiveStylesMap = new Map<string, InteractiveStyles>();
   // Create array to collect high-priority images for preloading
@@ -483,7 +572,15 @@ export async function buildComponentHTML(
   // Create map to collect raw-HTML → processed-HTML for Astro exporter parity
   const processedRawHtmlCollector = new Map<string, string>();
 
-  if (!node) return { html: '', interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector, processedRawHtmlCollector };
+  if (!node)
+    return {
+      html: '',
+      interactiveStylesMap,
+      preloadImages,
+      neededCollections,
+      ssrFallbackCollector,
+      processedRawHtmlCollector,
+    };
 
   // Register components for this render
   ssrComponentRegistry.merge(globalComponents);
@@ -523,7 +620,14 @@ export async function buildComponentHTML(
 
   const html = await renderNode(node, ctx);
 
-  return { html, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector, processedRawHtmlCollector };
+  return {
+    html,
+    interactiveStylesMap,
+    preloadImages,
+    neededCollections,
+    ssrFallbackCollector,
+    processedRawHtmlCollector,
+  };
 }
 
 /**
@@ -531,10 +635,7 @@ export async function buildComponentHTML(
  * Used when parent list has emitTemplate: true.
  * The placeholder contains the configuration and template for MenoFilter to hydrate.
  */
-async function renderNestedListPlaceholder(
-  node: ListNode,
-  ctx: SSRContext
-): Promise<string> {
+async function renderNestedListPlaceholder(node: ListNode, ctx: SSRContext): Promise<string> {
   // Get source - handle both string and pre-resolved array sources
   const sourceValue = node.source || node.collection;
   const sourceStr = typeof sourceValue === 'string' ? sourceValue : '';
@@ -563,17 +664,17 @@ async function renderNestedListPlaceholder(
     templateContext: undefined, // Clear context for inner item templates
     nestedCMSListMode: false, // Reset for deeper nesting levels
   };
-  const templateContent = node.children
-    ? await renderChildrenAsync(node.children, childTemplateCtx)
-    : '';
+  const templateContent = node.children ? await renderChildrenAsync(node.children, childTemplateCtx) : '';
 
   // Escape config for attribute
   const configJson = escapeHtml(JSON.stringify(config));
 
   // Emit placeholder with embedded config and template
-  return `<div data-cms-list-nested="true" data-collection="${escapeHtml(sourceStr)}" data-cms-config="${configJson}"${editorAttrs(ctx, { isCMSListContainer: true })}>` +
+  return (
+    `<div data-cms-list-nested="true" data-collection="${escapeHtml(sourceStr)}" data-cms-config="${configJson}"${editorAttrs(ctx, { isCMSListContainer: true })}>` +
     `<template data-nested-template>${templateContent}</template>` +
-    `</div>`;
+    `</div>`
+  );
 }
 
 /**
@@ -606,7 +707,7 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
   // Determine source type (default to 'prop', but handle legacy 'cms-list' type)
   const nodeType = node.type as string;
   const isLegacyCMSList = nodeType === 'cms-list';
-  const sourceType = isLegacyCMSList ? 'collection' : (node.sourceType || 'prop');
+  const sourceType = isLegacyCMSList ? 'collection' : node.sourceType || 'prop';
 
   // For collection mode, check CMS service availability
   if (sourceType === 'collection' && !ctx.cmsService) {
@@ -642,6 +743,19 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
   if (sourceType === 'collection') {
     // Collection mode: Query from CMS service
     items = await getCollectionItems(node, source, ctx);
+  } else if (sourceType === 'remote') {
+    // Remote mode: fetch the endpoint and apply the query (filter/sort/offset/limit), mirroring
+    // the meno-astro runtime's getRemoteData so the editor SSR matches the real Astro build.
+    items = await getRemoteItems(node, ctx);
+  } else if (sourceType === 'sanity') {
+    // Sanity mode: fetch the document type via GROQ and apply the query, mirroring the
+    // meno-astro runtime's getSanityData so the editor SSR matches the real Astro build.
+    items = await getSanityItems(node);
+  } else if (sourceType === 'expression') {
+    // Expression mode: the source is a verbatim JS expression (e.g. an Astro Action / supabase
+    // result) the editor has no data for — it resolves only in the real Astro build/play. Render
+    // empty here (the design-canvas SSR) rather than guessing. Real Astro play renders it for real.
+    items = [];
   } else {
     // Prop mode: Read from component props or template context
     // If source was already resolved to an array by processStructure (e.g., from {{features}}),
@@ -676,26 +790,16 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
   }
 
   // Get schema for URL computation (collection mode only)
-  const schema = sourceType === 'collection' && ctx.cmsService
-    ? ctx.cmsService.getSchema(source)
-    : undefined;
+  const schema = sourceType === 'collection' && ctx.cmsService ? ctx.cmsService.getSchema(source) : undefined;
 
   // Render children for each item
   const renderedItems: string[] = [];
 
   for (let i = 0; i < items.length; i++) {
     const rawItem = items[i] as Record<string, unknown>;
-    const item = schema
-      ? addItemUrl(rawItem as CMSItem, schema, ctx.locale, ctx.i18nConfig)
-      : rawItem;
-
-    const templateContext = buildTemplateContext(
-      variableName,
-      item as CMSItem,
-      i,
-      items.length,
-      ctx.templateContext
-    );
+    const item = schema ? addItemUrl(rawItem as CMSItem, schema, ctx.locale, ctx.i18nConfig) : rawItem;
+
+    const templateContext = buildTemplateContext(variableName, item as CMSItem, i, items.length, ctx.templateContext);
 
     const itemCtx: SSRContext = {
       ...ctx,
@@ -762,7 +866,7 @@ async function getCollectionItems(node: ListNode, source: string, ctx: SSRContex
           }
         }
         if (value !== null && value !== undefined) {
-          resolvedIds = Array.isArray(value) ? value.map(v => String(v)) : String(value);
+          resolvedIds = Array.isArray(value) ? value.map((v) => String(v)) : String(value);
         }
       } else {
         // Otherwise resolve from a merged scope: parent list loop variables (highest precedence)
@@ -786,14 +890,18 @@ async function getCollectionItems(node: ListNode, source: string, ctx: SSRContex
     }
     // Filter draft items from ID-based queries
     if (ctx.locale) {
-      items = items.filter(item => !isItemDraftForLocale(item, ctx.locale!));
+      items = items.filter((item) => !isItemDraftForLocale(item, ctx.locale!));
     }
   } else {
     // Build query from node props (resolve filter templates against parent loop variables
     // overlaid on host-component resolved props, with parent loop variables winning).
     const query = {
       collection: source,
-      filter: resolveFilterTemplates(node.filter as CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown> | undefined, buildListResolutionScope(ctx)),
+      filter: resolveFilterTemplates(
+        node.filter as CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown> | undefined,
+        buildListResolutionScope(ctx),
+        source,
+      ),
       sort: node.sort,
       limit: node.limit,
       offset: node.offset,
@@ -805,12 +913,140 @@ async function getCollectionItems(node: ListNode, source: string, ctx: SSRContex
   // Exclude current item if option is set and we have a current CMS context
   if (node.excludeCurrentItem && ctx.cmsContext?.cms?._id) {
     const currentId = ctx.cmsContext.cms._id as string;
-    items = items.filter(item => item._id !== currentId);
+    items = items.filter((item) => item._id !== currentId);
+  }
+
+  return items;
+}
+
+/**
+ * Get items for a remote-data list (`sourceType: 'remote'`). Fetches the endpoint at render
+ * time, navigates the optional dot-`path` to the items array, synthesizes a stable `_id` per
+ * item, and applies the node's filter/sort/offset/limit. This mirrors the meno-astro runtime's
+ * `getRemoteData` (the build/preview rendering path) so the editor's own SSR matches the real
+ * Astro output. Graceful `[]` on any network/parse error, exactly like the runtime.
+ */
+async function getRemoteItems(node: ListNode, _ctx: SSRContext): Promise<CMSItem[]> {
+  const url = typeof node.url === 'string' ? node.url : '';
+  if (!url) return [];
+
+  let payload: unknown;
+  try {
+    const res = await fetch(url, { headers: { accept: 'application/json' } });
+    if (!res.ok) return [];
+    payload = await res.json();
+  } catch {
+    return [];
+  }
+
+  // Navigate the dot-path (e.g. "data.items"); empty/absent = the response is the array.
+  let raw: unknown = payload;
+  if (node.path) {
+    for (const seg of node.path.split('.')) {
+      if (raw && typeof raw === 'object') raw = (raw as Record<string, unknown>)[seg];
+      else {
+        raw = undefined;
+        break;
+      }
+    }
+  }
+  if (!Array.isArray(raw)) return [];
+
+  // Synthesize `_id` (item id/_id else index; primitives → { _id, value }) so card bindings
+  // ({{item._id}}) and React keys resolve — same shape getRemoteData produces.
+  let items: CMSItem[] = raw.map((it, i) => {
+    if (it && typeof it === 'object' && !Array.isArray(it)) {
+      const rec = it as Record<string, unknown>;
+      return { ...rec, _id: String(rec._id ?? rec.id ?? i) } as CMSItem;
+    }
+    return { _id: String(i), value: it } as unknown as CMSItem;
+  });
+
+  // Apply the query in the same order as the runtime (filter → sort → offset → limit).
+  if (node.filter) {
+    items = applyCmsFilters(items, node.filter as CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown>);
+  }
+  if (node.sort) items = applyCmsSorting(items, node.sort);
+  if (node.offset && node.offset > 0) items = items.slice(node.offset);
+  if (node.limit && node.limit > 0) items = items.slice(0, node.limit);
+
+  return items;
+}
+
+/**
+ * Get items for a Sanity list (`sourceType: 'sanity'`). Reads the project's Sanity connection
+ * (`integrations.sanity`) from the config service, fetches the document type via GROQ at render
+ * time, reads `payload.result`, flattens slug-typed fields, synthesizes `_id`, and applies the
+ * node's filter/sort/offset/limit. Mirrors the meno-astro runtime's `getSanityData` so the
+ * editor's own SSR matches the real Astro build. Graceful `[]` on missing config / any error.
+ */
+async function getSanityItems(node: ListNode): Promise<CMSItem[]> {
+  const documentType = typeof node.documentType === 'string' ? node.documentType : '';
+  if (!documentType) return [];
+  const cfg = configService.getSanity();
+  if (!cfg) return [];
+
+  const host = cfg.useCdn === false ? 'api' : 'apicdn';
+  const version = (cfg.apiVersion ?? '2024-01-01').replace(/^v/, '');
+  const groq = `*[_type == ${JSON.stringify(documentType)}]`;
+  const url = `https://${cfg.projectId}.${host}.sanity.io/v${version}/data/query/${cfg.dataset}?query=${encodeURIComponent(groq)}`;
+
+  let payload: unknown;
+  try {
+    const res = await fetch(url, { headers: { accept: 'application/json' } });
+    if (!res.ok) return [];
+    payload = await res.json();
+  } catch {
+    return [];
   }
 
+  const raw = (payload as { result?: unknown } | null)?.result;
+  if (!Array.isArray(raw)) return [];
+
+  let items: CMSItem[] = raw.map((it, i) => {
+    if (it && typeof it === 'object' && !Array.isArray(it)) {
+      const rec = resolveSanityScalars(cfg.projectId, cfg.dataset, it) as Record<string, unknown>;
+      return { ...rec, _id: String(rec._id ?? i) } as CMSItem;
+    }
+    return { _id: String(i), value: it } as unknown as CMSItem;
+  });
+
+  if (node.filter) {
+    items = applyCmsFilters(items, node.filter as CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown>);
+  }
+  if (node.sort) items = applyCmsSorting(items, node.sort);
+  if (node.offset && node.offset > 0) items = items.slice(node.offset);
+  if (node.limit && node.limit > 0) items = items.slice(0, node.limit);
+
   return items;
 }
 
+/**
+ * Resolve Sanity scalar shapes for the editor's SSR LIST preview: slug → `current`, image/file
+ * asset → cdn URL (deterministic from the ref + projectId/dataset). Recursive. Mirrors meno-astro's
+ * `resolveScalars`, minus Portable Text (no serializer dep in core) and reference joins (no extra
+ * fetch) — the authoritative build/CMS-template paths in meno-astro do the full resolution.
+ */
+function resolveSanityScalars(projectId: string, dataset: string, value: unknown): unknown {
+  if (Array.isArray(value)) return value.map((v) => resolveSanityScalars(projectId, dataset, v));
+  if (value !== null && typeof value === 'object') {
+    const o = value as Record<string, unknown>;
+    if (o._type === 'slug' && typeof o.current === 'string') return o.current;
+    if ((o._type === 'image' || o._type === 'file') && o.asset && typeof o.asset === 'object') {
+      const ref = (o.asset as { _ref?: unknown })._ref;
+      if (typeof ref === 'string') {
+        const m = /^(image|file)-(.+)-([a-z0-9]+)$/i.exec(ref);
+        if (m)
+          return `https://cdn.sanity.io/${m[1] === 'image' ? 'images' : 'files'}/${projectId}/${dataset}/${m[2]}.${m[3]}`;
+      }
+    }
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(o)) out[k] = resolveSanityScalars(projectId, dataset, v);
+    return out;
+  }
+  return value;
+}
+
 /**
  * Get items from component props or template context (for sourceType: 'prop')
  */
@@ -866,25 +1102,21 @@ async function renderChildrenAsync(children: unknown[], ctx: SSRContext): Promis
  * Build element class name for a node based on its SSR context.
  * Used by embed, link, locale-list, and regular HTML nodes.
  */
-function buildNodeElementClass(
-  ctx: SSRContext,
-  label: string | undefined,
-  isSlotContent?: boolean
-): string {
+function buildNodeElementClass(ctx: SSRContext, label: string | undefined, isSlotContent?: boolean): string {
   const { pagePath } = ctx;
   // Slot content uses page context (defined in page, not component)
   const useComponentContext = !isSlotContent && Boolean(ctx.componentContext);
   const effectiveFileType = useComponentContext ? 'component' : 'page';
-  const effectiveFileName = useComponentContext ? ctx.componentContext : (pagePath
-    ? pagePath.replace(/^\//, '').replace(/\//g, '_') || 'index'
-    : 'page');
+  const effectiveFileName = useComponentContext
+    ? ctx.componentContext
+    : pagePath
+      ? pagePath.replace(/^\//, '').replace(/\//g, '_') || 'index'
+      : 'page';
 
   // Slice off the component-instance prefix so class hashes stay stable across
   // instances of the same component (mirrors ComponentBuilder.ts:678-680).
   const rawPath = ctx.elementPath || [];
-  const path = useComponentContext && ctx.componentRootPath
-    ? rawPath.slice(ctx.componentRootPath.length)
-    : rawPath;
+  const path = useComponentContext && ctx.componentRootPath ? rawPath.slice(ctx.componentRootPath.length) : rawPath;
 
   const elementClassCtx: ElementClassContext = {
     fileType: effectiveFileType,
@@ -902,7 +1134,7 @@ function buildNodeElementClass(
 function registerInteractiveStyles(
   ctx: SSRContext,
   elementClass: string,
-  interactiveStyles: InteractiveStyles
+  interactiveStyles: InteractiveStyles,
 ): Record<string, string> {
   if (!ctx.interactiveStylesMap) return {};
 
@@ -939,20 +1171,18 @@ function arraysEqual(a: number[] | undefined, b: number[] | undefined): boolean
  * Compute editor-only attributes for the current context.
  * Returns '' when injectEditorAttrs is off — preview-only feature.
  */
-function editorAttrs(
-  ctx: SSRContext,
-  opts: { isSlotContent?: boolean; isCMSListContainer?: boolean } = {}
-): string {
+function editorAttrs(ctx: SSRContext, opts: { isSlotContent?: boolean; isCMSListContainer?: boolean } = {}): string {
   if (!ctx.injectEditorAttrs) return '';
   // Component root: inside a component instance and at the path the instance was reset to.
-  const isComponentRoot = !!ctx.componentContext
-    && !opts.isSlotContent
-    && arraysEqual(ctx.elementPath, ctx.componentRootPath);
+  const isComponentRoot =
+    !!ctx.componentContext && !opts.isSlotContent && arraysEqual(ctx.elementPath, ctx.componentRootPath);
   // Mirror client semantics: at component root, parent is the outer component;
   // for descendants of a component, parent is the current component itself.
   const effectiveParent = opts.isSlotContent
     ? ctx.parentComponentName
-    : (isComponentRoot ? ctx.parentComponentName : (ctx.componentContext ?? ctx.parentComponentName));
+    : isComponentRoot
+      ? ctx.parentComponentName
+      : (ctx.componentContext ?? ctx.parentComponentName);
   return buildEditorAttrs({
     elementPath: ctx.elementPath,
     cmsItemIndexPath: ctx.cmsItemIndexPath,
@@ -970,9 +1200,9 @@ function editorAttrs(
  */
 async function renderNode(
   node: ComponentNode | ComponentNode[] | string | number | null | undefined,
-  ctx: SSRContext
+  ctx: SSRContext,
 ): Promise<string> {
-  const { breakpoints, viewportWidth, locale, i18nConfig, slugMappings, pagePath } = ctx;
+  const { breakpoints, viewportWidth, locale, i18nConfig, slugMappings: _slugMappings, pagePath } = ctx;
 
   if (node === null || node === undefined) return '';
 
@@ -1028,10 +1258,14 @@ async function renderNode(
   }
 
   if (Array.isArray(node)) {
-    return (await Promise.all(node.map((child, index) => {
-      const childPath = ctx.elementPath ? [...ctx.elementPath.slice(0, -1), index] : [index];
-      return renderNode(child, { ...ctx, elementPath: childPath });
-    }))).join('');
+    return (
+      await Promise.all(
+        node.map((child, index) => {
+          const childPath = ctx.elementPath ? [...ctx.elementPath.slice(0, -1), index] : [index];
+          return renderNode(child, { ...ctx, elementPath: childPath });
+        }),
+      )
+    ).join('');
   }
 
   if (typeof node !== 'object') return '';
@@ -1045,10 +1279,7 @@ async function renderNode(
     const i18nResolveConfig = i18nConfig ?? DEFAULT_I18N_CONFIG;
     const i18nEffectiveLocale = locale || i18nResolveConfig.defaultLocale;
     const resolved = resolveI18nValue(node, i18nEffectiveLocale, i18nResolveConfig);
-    return renderNode(
-      resolved as ComponentNode | string | number | null | undefined,
-      ctx
-    );
+    return renderNode(resolved as ComponentNode | string | number | null | undefined, ctx);
   }
 
   // Check if condition - skip rendering if false
@@ -1069,8 +1300,33 @@ async function renderNode(
   }
 
   const nodeType = 'type' in node ? node.type : undefined;
-  const nodeStyle = ('style' in node) ? node.style as StyleObject | ResponsiveStyleObject | undefined : undefined;
-  const children = ('children' in node) ? (node.children || []) : [];
+  const nodeStyle = 'style' in node ? (node.style as StyleObject | ResponsiveStyleObject | undefined) : undefined;
+  const children = 'children' in node ? node.children || [] : [];
+
+  // Islands (BYO framework components) and Custom nodes (opaque hand-authored
+  // `.astro` black boxes) can't run in meno-core's SSR — real rendering happens
+  // only in a real `astro build` / play preview (the meno-astro codec emits the
+  // `<Component client:* />` / `<Fancy />` markup). On the design canvas we render
+  // their slotted children as normal content (so pages built from them read
+  // cleanly) and fall back to a quiet inline marker when there are none. The
+  // wrapper carries `data-element-path` (via editorAttrs) so a click selects the
+  // node like any other, plus `data-island`/`data-custom` for identification —
+  // no loud highlight box.
+  if (isIslandNode(node) || isCustomNode(node)) {
+    const src = typeof node.src === 'string' ? node.src : '';
+    const extPattern = isIslandNode(node) ? /\.(tsx|jsx|vue|svelte)$/i : /\.astro$/i;
+    const name = src.split('/').pop()?.replace(extPattern, '') || '?';
+    const dataAttr = isIslandNode(node) ? 'data-island' : 'data-custom';
+    const blackBoxChildren = Array.isArray(node.children)
+      ? node.children
+      : typeof node.children === 'string'
+        ? [node.children]
+        : [];
+    const inner = blackBoxChildren.length
+      ? await renderChildrenAsync(blackBoxChildren, ctx)
+      : `<span style="color:#9ca3af;font-size:13px">${escapeHtml(name)}</span>`;
+    return `<div ${dataAttr}="${escapeHtml(src)}" style="display:contents"${editorAttrs(ctx, { isSlotContent: isSlotContent(node) })}>${inner}</div>`;
+  }
 
   // Handle embed nodes - render custom HTML content
   if (isEmbedNode(node)) {
@@ -1106,11 +1362,198 @@ async function renderNode(
 
     // Sanitize HTML with allowlist for SVG, rich-text formatting, and common elements (same as client)
     const purify = getDOMPurify();
-    const purifiedHtml = purify ? purify.sanitize(htmlContent, {
-      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', 'style', 'animate', 'animateTransform', 'animateMotion', 'set', 'filter', 'feGaussianBlur', 'feOffset', 'feMerge', 'feMergeNode', 'feColorMatrix', 'feComposite', 'feFlood', 'feMorphology', 'feBlend', 'feDropShadow', 'feTurbulence', 'feDisplacementMap', 'foreignObject'],
-      ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'xmlns:xlink', 'xlink:href', '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', 'fill-rule', 'clip-rule', 'clip-path', 'clipPathUnits', 'mask', 'mask-type', 'maskUnits', 'maskContentUnits', 'patternUnits', 'patternContentUnits', 'patternTransform', 'gradientUnits', 'gradientTransform', 'spreadMethod', 'preserveAspectRatio', 'marker-start', 'marker-mid', 'marker-end', 'markerUnits', 'markerWidth', 'markerHeight', 'refX', 'refY', 'orient', 'paint-order', 'vector-effect', 'filter', 'filterUnits', 'primitiveUnits', 'in', 'in2', 'result', 'stdDeviation', 'flood-color', 'flood-opacity', 'stroke-opacity', 'font-size', 'font-family', 'font-weight', 'font-style', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity', 'frameborder', 'allowfullscreen', 'allow', 'title', 'attributeName', 'values', 'dur', 'begin', 'end', 'repeatCount', 'repeatDur', 'keyTimes', 'keySplines', 'calcMode', 'from', 'to', 'by', 'additive', 'accumulate', 'type', 'rotate', 'keyPoints', 'path'],
-      KEEP_CONTENT: true
-    }) : htmlContent;
+    const purifiedHtml = purify
+      ? purify.sanitize(htmlContent, {
+          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',
+            'style',
+            'animate',
+            'animateTransform',
+            'animateMotion',
+            'set',
+            'filter',
+            'feGaussianBlur',
+            'feOffset',
+            'feMerge',
+            'feMergeNode',
+            'feColorMatrix',
+            'feComposite',
+            'feFlood',
+            'feMorphology',
+            'feBlend',
+            'feDropShadow',
+            'feTurbulence',
+            'feDisplacementMap',
+            'foreignObject',
+          ],
+          ALLOWED_ATTR: [
+            'class',
+            'id',
+            'style',
+            'width',
+            'height',
+            'viewBox',
+            'xmlns',
+            'xmlns:xlink',
+            'xlink:href',
+            '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',
+            'fill-rule',
+            'clip-rule',
+            'clip-path',
+            'clipPathUnits',
+            'mask',
+            'mask-type',
+            'maskUnits',
+            'maskContentUnits',
+            'patternUnits',
+            'patternContentUnits',
+            'patternTransform',
+            'gradientUnits',
+            'gradientTransform',
+            'spreadMethod',
+            'preserveAspectRatio',
+            'marker-start',
+            'marker-mid',
+            'marker-end',
+            'markerUnits',
+            'markerWidth',
+            'markerHeight',
+            'refX',
+            'refY',
+            'orient',
+            'paint-order',
+            'vector-effect',
+            'filter',
+            'filterUnits',
+            'primitiveUnits',
+            'in',
+            'in2',
+            'result',
+            'stdDeviation',
+            'flood-color',
+            'flood-opacity',
+            'stroke-opacity',
+            'font-size',
+            'font-family',
+            'font-weight',
+            'font-style',
+            'text-anchor',
+            'dominant-baseline',
+            'offset',
+            'stop-color',
+            'stop-opacity',
+            'frameborder',
+            'allowfullscreen',
+            'allow',
+            'title',
+            'attributeName',
+            'values',
+            'dur',
+            'begin',
+            'end',
+            'repeatCount',
+            'repeatDur',
+            'keyTimes',
+            'keySplines',
+            'calcMode',
+            'from',
+            'to',
+            'by',
+            'additive',
+            'accumulate',
+            'type',
+            'rotate',
+            'keyPoints',
+            'path',
+          ],
+          KEEP_CONTENT: true,
+        })
+      : htmlContent;
     // Inline simple SVG <style> rules as style="" attributes — class-scoped
     // declarations don't survive the editor preview's HMR `innerHTML` reparse
     // path (`htmlGenerator.ts:574`), but inline attributes always render.
@@ -1144,7 +1587,7 @@ async function renderNode(
         embedCssVariables = registerInteractiveStyles(ctx, elementClass, embedInteractiveStyles);
       }
 
-      let embedStyleAttr = buildCssVariableStyleAttr(embedCssVariables);
+      const embedStyleAttr = buildCssVariableStyleAttr(embedCssVariables);
 
       // Add attribute className if present
       const attrClassName = (nodeAttributes.className || nodeAttributes.class || '') as string;
@@ -1191,7 +1634,11 @@ async function renderNode(
         // Link object - extract href and target
         // Unwrap nested link objects (e.g., {href: {href: "/path"}} from double-wrapped list item templates)
         let linkObj = rawValue as { href: unknown; target?: string };
-        while (typeof linkObj.href === 'object' && linkObj.href !== null && 'href' in (linkObj.href as Record<string, unknown>)) {
+        while (
+          typeof linkObj.href === 'object' &&
+          linkObj.href !== null &&
+          'href' in (linkObj.href as Record<string, unknown>)
+        ) {
           const nested = linkObj.href as { href: unknown; target?: string };
           if (!linkObj.target && nested.target) linkObj = { ...linkObj, target: nested.target };
           linkObj = { ...linkObj, href: nested.href };
@@ -1262,11 +1709,18 @@ async function renderNode(
     const classAttr = ` class="${escapeHtml(classNames.filter(Boolean).join(' '))}"`;
 
     const childrenHTML = Array.isArray(children)
-      ? (await Promise.all(children.map((child, index) => {
-          const childPath = ctx.elementPath ? [...ctx.elementPath, index] : [index];
-          return renderNode(child, { ...ctx, elementPath: childPath });
-        }))).join('')
-      : await renderNode(children as ComponentNode | string | number | null | undefined, { ...ctx, elementPath: ctx.elementPath ? [...ctx.elementPath, 0] : [0] });
+      ? (
+          await Promise.all(
+            children.map((child, index) => {
+              const childPath = ctx.elementPath ? [...ctx.elementPath, index] : [index];
+              return renderNode(child, { ...ctx, elementPath: childPath });
+            }),
+          )
+        ).join('')
+      : await renderNode(children as ComponentNode | string | number | null | undefined, {
+          ...ctx,
+          elementPath: ctx.elementPath ? [...ctx.elementPath, 0] : [0],
+        });
 
     return `<a href="${escapeHtml(String(href))}"${classAttr}${olinkStyleAttr}${attrs}${editorAttrs(ctx, { isSlotContent: isSlotContent(node) })}>${childrenHTML}</a>`;
   }
@@ -1277,9 +1731,9 @@ async function renderNode(
   }
 
   // Extract tag or component name based on node type
-  let tag = isHtmlNode(node) ? node.tag : undefined;
+  const tag = isHtmlNode(node) ? node.tag : undefined;
   const componentName = isComponentNode(node) ? node.component : undefined;
-  let nodeProps = isComponentNode(node) ? (node.props || {}) : {};
+  let nodeProps = isComponentNode(node) ? node.props || {} : {};
 
   // Process CMS templates in props
   if (ctx.cmsContext?.cms && Object.keys(nodeProps).length > 0) {
@@ -1302,18 +1756,29 @@ async function renderNode(
 
   // Process CMS templates in attributes (e.g., href="{{cms.link}}")
   if (ctx.cmsContext?.cms && Object.keys(nodeAttributes).length > 0) {
-    nodeAttributes = processCMSPropsTemplate(nodeAttributes as Record<string, unknown>, ctx.cmsContext.cms, locale, i18nConfig) as Record<string, string | number | boolean>;
+    nodeAttributes = processCMSPropsTemplate(
+      nodeAttributes as Record<string, unknown>,
+      ctx.cmsContext.cms,
+      locale,
+      i18nConfig,
+    ) as Record<string, string | number | boolean>;
   }
 
   // Process item templates in attributes (for CMSList context)
   // Skip when in templateMode to preserve {{item.field}} placeholders
   if (!ctx.templateMode && templateCtx && Object.keys(nodeAttributes).length > 0) {
-    nodeAttributes = processItemPropsTemplate(nodeAttributes, templateCtx, i18nResolver) as Record<string, string | number | boolean>;
+    nodeAttributes = processItemPropsTemplate(nodeAttributes, templateCtx, i18nResolver) as Record<
+      string,
+      string | number | boolean
+    >;
   }
 
   // Auto-skip attributes that were entirely template expressions and resolved to ""
   if (Object.keys(nodeAttributes).length > 0) {
-    nodeAttributes = skipEmptyTemplateAttributes(originalAttributes, nodeAttributes) as Record<string, string | number | boolean>;
+    nodeAttributes = skipEmptyTemplateAttributes(originalAttributes, nodeAttributes) as Record<
+      string,
+      string | number | boolean
+    >;
   }
 
   if (!tag && !componentName) return '';
@@ -1327,7 +1792,8 @@ async function renderNode(
   // result. This matches the client (ComponentBuilder.mergeNodeStyles) so that
   // an instance override of e.g. marginBottom actually replaces the structure's
   // marginBottom instead of fighting it as a same-specificity utility class.
-  const isCustomComponentNode = nodeType === NODE_TYPE.COMPONENT && isComponentNode(node) && ssrComponentRegistry.has(node.component);
+  const isCustomComponentNode =
+    nodeType === NODE_TYPE.COMPONENT && isComponentNode(node) && ssrComponentRegistry.has(node.component);
   let deferredComponentStyle: StyleObject | ResponsiveStyleObject | undefined;
 
   if (nodeStyle) {
@@ -1343,16 +1809,23 @@ async function renderNode(
   } else if (nodeProps.style) {
     // If no node.style but props have style, keep it for backward compatibility
     if (isResponsiveStyle(nodeProps.style) && breakpoints && viewportWidth) {
-      resolvedStyle = mergeResponsiveStyles(nodeProps.style as ResponsiveStyleObject, 'viewport', viewportWidth, breakpoints);
+      resolvedStyle = mergeResponsiveStyles(
+        nodeProps.style as ResponsiveStyleObject,
+        'viewport',
+        viewportWidth,
+        breakpoints,
+      );
     } else {
       resolvedStyle = nodeProps.style as StyleObject;
     }
   }
 
   // Generate element-specific class if node has interactive styles or generateElementClass flag
-  const nodeInteractiveStyles = 'interactiveStyles' in node ? node.interactiveStyles as InteractiveStyles | undefined : undefined;
-  const nodeGenerateElementClass = 'generateElementClass' in node ? node.generateElementClass as boolean | undefined : undefined;
-  const nodeLabel = 'label' in node ? node.label as string | undefined : undefined;
+  const nodeInteractiveStyles =
+    'interactiveStyles' in node ? (node.interactiveStyles as InteractiveStyles | undefined) : undefined;
+  const nodeGenerateElementClass =
+    'generateElementClass' in node ? (node.generateElementClass as boolean | undefined) : undefined;
+  const nodeLabel = 'label' in node ? (node.label as string | undefined) : undefined;
   let elementClass = '';
 
   if ((nodeInteractiveStyles && nodeInteractiveStyles.length > 0) || nodeGenerateElementClass) {
@@ -1387,7 +1860,9 @@ async function renderNode(
     ...(mergedClassName ? { className: mergedClassName } : {}),
     ...(deferredComponentStyle
       ? { style: deferredComponentStyle }
-      : Object.keys(resolvedStyle).length > 0 ? { style: resolvedStyle } : {})
+      : Object.keys(resolvedStyle).length > 0
+        ? { style: resolvedStyle }
+        : {}),
   };
 
   // Check if this is a custom component
@@ -1406,13 +1881,11 @@ async function renderNode(
     return renderLinkNode(propsWithStyleAndAttrs, children, ctx);
   }
 
-  // Regular HTML element (must have tag)
-  if (!tag) {
-    console.error('Missing tag for HTML element in SSR');
-    return '';
-  }
-
-  return renderHtmlElement(tag, propsWithStyleAndAttrs, children, ctx);
+  // Regular HTML element. `tag` is necessarily set here: the `!tag &&
+  // !componentName` case returned at the top of this section, and every
+  // `componentName` path has already returned (isComponentNode ⇒ type ===
+  // 'component', which the two component branches above handle exhaustively).
+  return renderHtmlElement(tag as string, propsWithStyleAndAttrs, children, ctx);
 }
 
 /**
@@ -1423,9 +1896,9 @@ async function renderComponent(
   propsWithStyleAndAttrs: Record<string, unknown>,
   children: unknown,
   nodeAttributes: Record<string, unknown>,
-  ctx: SSRContext
+  ctx: SSRContext,
 ): Promise<string> {
-  const { locale, i18nConfig, pagePath } = ctx;
+  const { locale, i18nConfig, pagePath: _pagePath } = ctx;
   const componentDef = ssrComponentRegistry.get(componentName);
   if (!componentDef) return '';
 
@@ -1439,7 +1912,7 @@ async function renderComponent(
       propsWithStyleAndAttrs,
       children as Array<ComponentNode | string> | string | ComponentNode | null | undefined,
       locale,
-      i18nConfig
+      i18nConfig,
     );
 
     // Process the structure with resolved props
@@ -1447,7 +1920,9 @@ async function renderComponent(
     // Use preserveResponsiveStyles: true to keep responsive styles intact for SSR rendering
     // Mark children as slot content so they use page context for element class generation
     // Pass parent template context (itemContext) for nested cms-list template resolution
-    const markedChildren = children ? markAsSlotContent(children as ComponentNode | ComponentNode[] | string | number | null | undefined) : undefined;
+    const markedChildren = children
+      ? markAsSlotContent(children as ComponentNode | ComponentNode[] | string | number | null | undefined)
+      : undefined;
 
     const processedStructure = processStructure(
       structuredComponentDef.structure,
@@ -1464,20 +1939,28 @@ async function renderComponent(
       },
       undefined,
       markedChildren,
-      true
+      true,
     );
 
     if (!processedStructure) return '';
 
     // Type guard: ensure processedStructure is a ComponentNode
-    if (typeof processedStructure === 'string' || typeof processedStructure === 'number' || Array.isArray(processedStructure)) {
+    if (
+      typeof processedStructure === 'string' ||
+      typeof processedStructure === 'number' ||
+      Array.isArray(processedStructure)
+    ) {
       return await renderNode(processedStructure as string | number | ComponentNode[], ctx);
     }
 
     // Merge instance style overrides, className, and attributes
     // processedStructure is typically an HTML node (the component's root element)
     // Handle component nodes, HTML nodes, and Link nodes (Link and HTML share top-level style/attributes)
-    const rootNode = processedStructure as ComponentNode & { props?: Record<string, unknown>; style?: any; attributes?: Record<string, string | number | boolean> };
+    const rootNode = processedStructure as ComponentNode & {
+      props?: Record<string, unknown>;
+      style?: Record<string, unknown>;
+      attributes?: Record<string, string | number | boolean>;
+    };
     if (isComponentNode(rootNode) || isHtmlNode(rootNode) || isLinkNode(rootNode)) {
       if (!rootNode.props) {
         rootNode.props = {};
@@ -1499,7 +1982,7 @@ async function renderComponent(
           const existingClass = (rootNode.attributes.class || '') as string;
           rootNode.attributes.class = existingClass
             ? `${existingClass} ${propsWithStyleAndAttrs.className}`
-            : propsWithStyleAndAttrs.className as string;
+            : (propsWithStyleAndAttrs.className as string);
         } else {
           const existingClassName = rootNode.props.className || '';
           rootNode.props.className = existingClassName
@@ -1527,9 +2010,7 @@ async function renderComponent(
       // Add defineVars data attributes for JS prop injection
       const defineVars = structuredComponentDef.defineVars;
       if (defineVars && componentName) {
-        const varsToExpose = defineVars === true
-          ? Object.keys(structuredComponentDef.interface || {})
-          : defineVars;
+        const varsToExpose = defineVars === true ? Object.keys(structuredComponentDef.interface || {}) : defineVars;
 
         const propsForJS: Record<string, unknown> = {};
         for (const varName of varsToExpose) {
@@ -1543,18 +2024,25 @@ async function renderComponent(
         if (!processedRoot.attributes) {
           processedRoot.attributes = {};
         }
-        const existingComponent = (processedRoot.attributes?.['data-component'] as string)
-          || (processedRoot.props?.['data-component'] as string)
-          || '';
+        const existingComponent =
+          (processedRoot.attributes?.['data-component'] as string) ||
+          (processedRoot.props?.['data-component'] as string) ||
+          '';
         processedRoot.attributes['data-component'] = existingComponent
           ? `${existingComponent} ${componentName}`
           : componentName;
 
         let existingPropsMap: Record<string, unknown> = {};
-        const existingPropsStr = (processedRoot.attributes?.['data-props'] as string)
-          || (processedRoot.props?.['data-props'] as string);
+        const existingPropsStr =
+          (processedRoot.attributes?.['data-props'] as string) || (processedRoot.props?.['data-props'] as string);
         if (existingPropsStr) {
-          try { existingPropsMap = JSON.parse(existingPropsStr); } catch {}
+          try {
+            existingPropsMap = JSON.parse(existingPropsStr);
+          } catch (e) {
+            // Malformed existing data-props — recover with an empty map, but log it
+            // (otherwise a sibling component's hydration props vanish silently).
+            logRuntimeError('ssrRenderer.parseExistingDataProps', e);
+          }
         }
         existingPropsMap[componentName] = propsForJS;
         processedRoot.attributes['data-props'] = JSON.stringify(existingPropsMap);
@@ -1593,7 +2081,6 @@ async function renderComponent(
       componentRootPath: ctx.elementPath,
       componentResolvedProps: resolvedProps,
     });
-
   } catch (error) {
     return renderNodeFallback(ctx, error, `component ${componentName}`);
   }
@@ -1605,7 +2092,7 @@ async function renderComponent(
 async function renderLinkNode(
   propsWithStyleAndAttrs: Record<string, unknown>,
   children: unknown,
-  ctx: SSRContext
+  ctx: SSRContext,
 ): Promise<string> {
   const to = 'to' in propsWithStyleAndAttrs ? propsWithStyleAndAttrs.to : undefined;
   const restProps: Record<string, unknown> = { ...propsWithStyleAndAttrs };
@@ -1614,17 +2101,22 @@ async function renderLinkNode(
   const href = localizeHref(rawHref, ctx);
 
   // Build class attribute from utility classes
-  const linkClassAttr = restProps.className
-    ? ` class="${escapeHtml(String(restProps.className))}"`
-    : '';
+  const linkClassAttr = restProps.className ? ` class="${escapeHtml(String(restProps.className))}"` : '';
 
   const attrs = buildAttributes(restProps, ['style', 'className', 'to']);
   const childrenHTML = Array.isArray(children)
-    ? (await Promise.all((children as (ComponentNode | string)[]).map((child, index) => {
-        const childPath = ctx.elementPath ? [...ctx.elementPath, index] : [index];
-        return renderNode(child, { ...ctx, elementPath: childPath });
-      }))).join('')
-    : await renderNode(children as ComponentNode, { ...ctx, elementPath: ctx.elementPath ? [...ctx.elementPath, 0] : [0] });
+    ? (
+        await Promise.all(
+          (children as (ComponentNode | string)[]).map((child, index) => {
+            const childPath = ctx.elementPath ? [...ctx.elementPath, index] : [index];
+            return renderNode(child, { ...ctx, elementPath: childPath });
+          }),
+        )
+      ).join('')
+    : await renderNode(children as ComponentNode, {
+        ...ctx,
+        elementPath: ctx.elementPath ? [...ctx.elementPath, 0] : [0],
+      });
 
   return `<a href="${escapeHtml(String(href))}"${linkClassAttr}${attrs}${editorAttrs(ctx)}>${childrenHTML}</a>`;
 }
@@ -1636,7 +2128,7 @@ async function renderHtmlElement(
   tag: string,
   propsWithStyleAndAttrs: Record<string, unknown>,
   children: unknown,
-  ctx: SSRContext
+  ctx: SSRContext,
 ): Promise<string> {
   // Build class attribute from utility classes
   let classValue = propsWithStyleAndAttrs.className ? String(propsWithStyleAndAttrs.className) : '';
@@ -1663,9 +2155,7 @@ async function renderHtmlElement(
 
   // For img tags, exclude image-specific props (handled specially in renderImageElement)
   const imageProps = ['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority'];
-  const excludeProps = tag.toLowerCase() === 'img'
-    ? ['style', 'className', ...imageProps]
-    : ['style', 'className'];
+  const excludeProps = tag.toLowerCase() === 'img' ? ['style', 'className', ...imageProps] : ['style', 'className'];
   const attrs = buildAttributes(propsWithStyleAndAttrs, excludeProps);
   // `<style>` and `<script>` are HTML "raw text" elements: their content is
   // not parsed for entities or child elements. Running text children through
@@ -1682,22 +2172,55 @@ async function renderHtmlElement(
       if (typeof node === 'string') return node;
       if (typeof node === 'number') return String(node);
       if (Array.isArray(node)) return node.map(flatten).join('');
+      // Verbatim-code markers ({ _code, expr }) are silent by design — they
+      // render natively in the Astro build and have nothing to emit in
+      // meno-core SSR (mirrors the renderNode top-level handling).
+      if ((node as { _code?: unknown })._code === true) return '';
+      // Raw-text elements can't contain child elements, so any other object
+      // child is dropped from the output — correct per HTML semantics, but
+      // authored content vanishing should be visible, so surface the drop.
+      logRuntimeError(
+        'ssrRenderer.renderHtmlElement',
+        new Error(`Element child dropped inside <${tag}> — raw-text elements render only string content`),
+        { tag, droppedNodeType: String((node as { type?: unknown }).type ?? typeof node) },
+      );
       return '';
     };
     childrenHTML = flatten(children as any);
   } else {
     childrenHTML = Array.isArray(children)
-      ? (await Promise.all((children as (ComponentNode | string)[]).map((child, index) => {
-          const childPath = ctx.elementPath ? [...ctx.elementPath, index] : [index];
-          return renderNode(child, { ...ctx, elementPath: childPath });
-        }))).join('')
-      : await renderNode(children as ComponentNode, { ...ctx, elementPath: ctx.elementPath ? [...ctx.elementPath, 0] : [0] });
+      ? (
+          await Promise.all(
+            (children as (ComponentNode | string)[]).map((child, index) => {
+              const childPath = ctx.elementPath ? [...ctx.elementPath, index] : [index];
+              return renderNode(child, { ...ctx, elementPath: childPath });
+            }),
+          )
+        ).join('')
+      : await renderNode(children as ComponentNode, {
+          ...ctx,
+          elementPath: ctx.elementPath ? [...ctx.elementPath, 0] : [0],
+        });
   }
 
   const ea = editorAttrs(ctx);
 
   // Self-closing tags
-  const voidElements = ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'];
+  const voidElements = [
+    'img',
+    'input',
+    'br',
+    'hr',
+    'meta',
+    'link',
+    'area',
+    'base',
+    'col',
+    'embed',
+    'source',
+    'track',
+    'wbr',
+  ];
   if (voidElements.includes(tag.toLowerCase())) {
     // Special handling for img tags - inject srcset and render as <picture> when AVIF available
     if (tag.toLowerCase() === 'img') {
@@ -1718,7 +2241,7 @@ function renderImageElement(
   classAttr: string,
   styleAttr: string,
   attrs: string,
-  ctx: SSRContext
+  ctx: SSRContext,
 ): string {
   const imgProps = propsWithStyleAndAttrs;
   const src = imgProps.src as string | undefined;
@@ -1726,8 +2249,8 @@ function renderImageElement(
   const loading = imgProps.loading as string | undefined;
   const sizes = imgProps.sizes as string | undefined;
   const fetchpriority = imgProps.fetchpriority as string | undefined;
-  let width = imgProps.width as string | number | undefined;
-  let height = imgProps.height as string | number | undefined;
+  const width = imgProps.width as string | number | undefined;
+  const height = imgProps.height as string | number | undefined;
 
   // Get image metadata from manifest
   const metadata = src ? ctx.imageMetadataMap?.get(src) : undefined;
@@ -1766,44 +2289,51 @@ function renderImageElement(
   if (width !== undefined) imgAttrs += ` width="${escapeHtml(String(width))}"`;
   if (height !== undefined) imgAttrs += ` height="${escapeHtml(String(height))}"`;
 
-
   // Render as <picture> element if AVIF is available and imageFormat is 'avif'
   // Layout classes go on <picture> (block container), image-specific classes on <img>
   if (metadata?.avifSrcset && ctx.imageFormat !== 'webp') {
     // Image-specific class prefixes that should stay on <img>
     const imgClassPrefixes = [
-      'objf-', 'objp-', 'flt-', 'tm-', 'bs-',
-      'br-', 'bt-', 'bb-', 'bl-', 'border-r-', 'bc-', 'b-'
+      'objf-',
+      'objp-',
+      'flt-',
+      'tm-',
+      'bs-',
+      'br-',
+      'bt-',
+      'bb-',
+      'bl-',
+      'border-r-',
+      'bc-',
+      'b-',
     ];
     // Opacity classes (o-NUMBER) go on img, but overflow (o-h, o-a, o-s, o-v) stays on picture
     const opacityPattern = /^o-\d/;
 
     const classMatch = classAttr.match(/class="([^"]*)"/);
-    const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
+    const allClasses = classMatch ? (classMatch[1] ?? '').split(/\s+/).filter(Boolean) : [];
 
     const imgClasses: string[] = [];
     const pictureClasses: string[] = [];
 
     for (const cls of allClasses) {
-      if (imgClassPrefixes.some(prefix => cls.startsWith(prefix)) || opacityPattern.test(cls)) {
+      if (imgClassPrefixes.some((prefix) => cls.startsWith(prefix)) || opacityPattern.test(cls)) {
         imgClasses.push(cls);
       } else {
         pictureClasses.push(cls);
       }
     }
 
-    const pictureClassAttr = pictureClasses.length > 0
-      ? ` class="${escapeHtml(pictureClasses.join(' '))}"`
-      : '';
-    const imgClassAttr = imgClasses.length > 0
-      ? ` class="${escapeHtml(imgClasses.join(' '))}"`
-      : '';
+    const pictureClassAttr = pictureClasses.length > 0 ? ` class="${escapeHtml(pictureClasses.join(' '))}"` : '';
+    const imgClassAttr = imgClasses.length > 0 ? ` class="${escapeHtml(imgClasses.join(' '))}"` : '';
 
-    return `<picture${pictureClassAttr}${styleAttr}>` +
+    return (
+      `<picture${pictureClassAttr}${styleAttr}>` +
       `<source type="image/avif" srcset="${escapeHtml(metadata.avifSrcset)}" sizes="${escapeHtml(sizesAttr)}" />` +
       `<source type="image/webp" srcset="${escapeHtml(metadata.srcset)}" sizes="${escapeHtml(sizesAttr)}" />` +
       `<img${imgClassAttr}${imgAttrs}${attrs} />` +
-      `</picture>`;
+      `</picture>`
+    );
   }
 
   // Fallback: regular img with WebP srcset
@@ -1839,8 +2369,7 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
     }
 
     const localeStyleOpts = {
-      fluidActive:
-        ctx.responsiveScales?.enabled === true && ctx.responsiveScales?.mode === 'fluid',
+      fluidActive: ctx.responsiveScales?.enabled === true && ctx.responsiveScales?.mode === 'fluid',
       responsiveScales: ctx.responsiveScales,
     };
 
@@ -1866,18 +2395,14 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
       localeListStyleAttr = buildCssVariableStyleAttr(localeListCssVariables);
     }
 
-    const containerClassAttr = containerClasses.length > 0
-      ? ` class="${escapeHtml(containerClasses.join(' '))}"`
-      : '';
+    const containerClassAttr = containerClasses.length > 0 ? ` class="${escapeHtml(containerClasses.join(' '))}"` : '';
 
     // Convert item styles to utility classes
     let itemClasses: string[] = [];
     if (node.itemStyle) {
       itemClasses = responsiveStylesToClasses(node.itemStyle as ResponsiveStyleObject, localeStyleOpts);
     }
-    const itemClassAttr = itemClasses.length > 0
-      ? ` class="${escapeHtml(itemClasses.join(' '))}"`
-      : '';
+    const itemClassAttr = itemClasses.length > 0 ? ` class="${escapeHtml(itemClasses.join(' '))}"` : '';
 
     // Convert active item styles to utility classes
     let activeItemClasses: string[] = [];
@@ -1890,24 +2415,19 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
     if (node.separatorStyle) {
       separatorClasses = responsiveStylesToClasses(node.separatorStyle as ResponsiveStyleObject, localeStyleOpts);
     }
-    const separatorClassAttr = separatorClasses.length > 0
-      ? ` class="${escapeHtml(separatorClasses.join(' '))}"`
-      : '';
+    const separatorClassAttr = separatorClasses.length > 0 ? ` class="${escapeHtml(separatorClasses.join(' '))}"` : '';
 
     // Convert flag styles to utility classes
     let flagClasses: string[] = [];
     if (node.flagStyle) {
       flagClasses = responsiveStylesToClasses(node.flagStyle as ResponsiveStyleObject, localeStyleOpts);
     }
-    const flagClassAttr = flagClasses.length > 0
-      ? ` class="${escapeHtml(flagClasses.join(' '))}"`
-      : '';
+    const flagClassAttr = flagClasses.length > 0 ? ` class="${escapeHtml(flagClasses.join(' '))}"` : '';
 
     // Current item gets both itemStyle + activeItemStyle (additive/override)
     const currentItemClasses = [...itemClasses, ...activeItemClasses];
-    const currentItemClassAttr = currentItemClasses.length > 0
-      ? ` class="${escapeHtml(currentItemClasses.join(' '))}"`
-      : '';
+    const currentItemClassAttr =
+      currentItemClasses.length > 0 ? ` class="${escapeHtml(currentItemClasses.join(' '))}"` : '';
 
     // Build links HTML
     const links: string[] = [];
@@ -1933,20 +2453,19 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
         case 'name':
           displayText = link.name;
           break;
-        case 'nativeName':
         default:
           displayText = link.nativeName;
           break;
       }
       linkContent += `<div>${escapeHtml(displayText)}</div>`;
 
-      links.push(`<a href="${escapeHtml(link.path)}"${hreflangAttr}${currentAttr} data-locale="${escapeHtml(link.locale)}"${classAttrForLink}>${linkContent}</a>`);
+      links.push(
+        `<a href="${escapeHtml(link.path)}"${hreflangAttr}${currentAttr} data-locale="${escapeHtml(link.locale)}"${classAttrForLink}>${linkContent}</a>`,
+      );
     }
 
     // Join links with separator (empty span styled via separatorStyle) or concatenate directly
-    const linksHTML = showSeparator
-      ? links.join(`<span${separatorClassAttr}></span>`)
-      : links.join('');
+    const linksHTML = showSeparator ? links.join(`<span${separatorClassAttr}></span>`) : links.join('');
 
     // Extract attributes from node
     const nodeAttributes = resolveI18nAttrs(extractAttributesFromNode(node), locale, i18nConfig);
@@ -1979,8 +2498,20 @@ export async function renderPageSSR(
   cmsContext?: CMSContext,
   cmsService?: CMSService,
   isProductionBuild?: boolean,
-  injectEditorAttrs?: boolean
-): Promise<{ html: string; meta: string; title: string; javascript: string; componentCSS?: string; locale: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string>; ssrFallbackCollector: Map<string, string>; processedRawHtmlCollector: Map<string, string> }> {
+  injectEditorAttrs?: boolean,
+): Promise<{
+  html: string;
+  meta: string;
+  title: string;
+  javascript: string;
+  componentCSS?: string;
+  locale: string;
+  interactiveStylesMap: Map<string, InteractiveStyles>;
+  preloadImages: PreloadImage[];
+  neededCollections: Set<string>;
+  ssrFallbackCollector: Map<string, string>;
+  processedRawHtmlCollector: Map<string, string>;
+}> {
   // Extract page content
   const rootNode = pageData?.root || undefined;
   if (!rootNode) {
@@ -1988,10 +2519,10 @@ export async function renderPageSSR(
   }
 
   // Load i18n config if not provided
-  const config = i18nConfig || await loadI18nConfig();
+  const config = i18nConfig || (await loadI18nConfig());
 
   // Extract locale from path if not explicitly provided
-  const { locale: pathLocale, pathWithoutLocale } = extractLocaleFromPath(pagePath, config);
+  const { locale: pathLocale, pathWithoutLocale: _pathWithoutLocale } = extractLocaleFromPath(pagePath, config);
   const effectiveLocale = locale || pathLocale || config.defaultLocale;
 
   // Extract meta information and process CMS templates in meta
@@ -2008,7 +2539,10 @@ export async function renderPageSSR(
       meta = { ...meta, ogTitle: processCMSTemplate(meta.ogTitle, cmsContext.cms, effectiveLocale, config) };
     }
     if (typeof meta.ogDescription === 'string') {
-      meta = { ...meta, ogDescription: processCMSTemplate(meta.ogDescription, cmsContext.cms, effectiveLocale, config) };
+      meta = {
+        ...meta,
+        ogDescription: processCMSTemplate(meta.ogDescription, cmsContext.cms, effectiveLocale, config),
+      };
     }
     if (typeof meta.ogImage === 'string') {
       meta = { ...meta, ogImage: processCMSTemplate(meta.ogImage, cmsContext.cms, effectiveLocale, config) };
@@ -2019,9 +2553,27 @@ export async function renderPageSSR(
 
   // Render the component tree to HTML with i18n and CMS support
   // Also collect interactive styles, preload images, and needed collections during render
-  const { html: contentHTML, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector, processedRawHtmlCollector } = rootNode
-    ? await buildComponentHTML(rootNode, globalComponents, pageComponents, effectiveLocale, config, slugMappings, pagePath, cmsContext, cmsService, isProductionBuild, injectEditorAttrs)
-    : { html: '', interactiveStylesMap: new Map<string, InteractiveStyles>(), preloadImages: [], neededCollections: new Set<string>(), ssrFallbackCollector: new Map<string, string>(), processedRawHtmlCollector: new Map<string, string>() };
+  // (rootNode is guaranteed non-null — the guard at the top of this function throws otherwise)
+  const {
+    html: contentHTML,
+    interactiveStylesMap,
+    preloadImages,
+    neededCollections,
+    ssrFallbackCollector,
+    processedRawHtmlCollector,
+  } = await buildComponentHTML(
+    rootNode,
+    globalComponents,
+    pageComponents,
+    effectiveLocale,
+    config,
+    slugMappings,
+    pagePath,
+    cmsContext,
+    cmsService,
+    isProductionBuild,
+    injectEditorAttrs,
+  );
 
   // Collect JavaScript and CSS from all components
   const javascript = await collectComponentJavaScript(globalComponents, pageComponents);