meno-core 1.0.47 → 1.0.49

package/lib/server/ssr/ssrRenderer.ts

@@ -9,6 +9,7 @@ import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, buildT
 import { singularize, isItemDraftForLocale } from '../../shared/types/cms';
 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 { loadBreakpointConfig, loadI18nConfig } from '../jsonLoader';
@@ -20,6 +21,7 @@ import { isComponentNode, isHtmlNode, isLinkNode, isEmbedNode, isLocaleListNode,
 import type { ListNode } from '../../shared/registry/nodeTypes/ListNodeType';
 import type { CMSService } from '../services/cmsService';
 import { extractAttributesFromNode, skipEmptyTemplateAttributes } from '../../shared/attributeNodeUtils';
+import { mergeNodeStyles } from '../../shared/styleNodeUtils';
 import { SSRRegistry } from '../../shared/registry/SSRRegistry';
 import { mergeResponsiveStyles } from '../../shared/responsiveStyleUtils';
 // Lazy-loaded: jsdom (used by isomorphic-dompurify on the server) can't be bundled by esbuild
@@ -49,7 +51,7 @@ import type { SlugMap } from '../../shared/slugTranslator';
 import { buildSlugIndex, getLocaleLinks, translatePath } from '../../shared/slugTranslator';
 
 // Import from modularized files
-import { escapeHtml, buildAttributes, styleToString } from './attributeBuilder';
+import { escapeHtml, buildAttributes, buildEditorAttrs, styleToString } from './attributeBuilder';
 import { extractPageMeta, generateMetaTags } from './metaTagGenerator';
 import { collectComponentCSS } from './cssCollector';
 import { collectComponentJavaScript } from './jsCollector';
@@ -127,6 +129,30 @@ interface SSRContext {
   processedRawHtmlCollector?: Map<string, string>;
   /** Image format: 'webp' uses plain <img>, 'avif' uses <picture> with AVIF+WebP sources */
   imageFormat?: 'webp' | 'avif';
+  /**
+   * When true, emit editor-only attributes (data-element-path, data-cms-item-index,
+   * data-cms-context, data-component-root, data-parent-component, data-component-context)
+   * so XRayOverlay and click-to-select can hook into SSR-rendered DOM.
+   * Set only in preview/dev mode — never in production builds.
+   */
+  injectEditorAttrs?: boolean;
+  /** CMS list item index path (parallel to cmsListPaths) for nested list selection support */
+  cmsItemIndexPath?: number[];
+  /** CMS list element paths (parallel to cmsItemIndexPath) — outer lists first */
+  cmsListPaths?: number[][];
+  /** Name of the enclosing component instance (for data-parent-component on descendants) */
+  parentComponentName?: string;
+  /**
+   * Element path of the current component instance's root, in the component's local
+   * (reset) coordinate space. When ctx.elementPath deeply equals this, the element
+   * being rendered is the component root and gets data-component-root="true".
+   */
+  componentRootPath?: number[];
+  /**
+   * Responsive scales config — needed for fluid-mode style transformations
+   * (e.g. `applyContainerPattern` when width === maxWidth).
+   */
+  responsiveScales?: ResponsiveScales;
 }
 
 /**
@@ -137,6 +163,21 @@ function getTemplateContext(ctx: SSRContext): TemplateContext | null {
   return ctx.templateContext || null;
 }
 
+/**
+ * Build the resolution scope for list `items` and `filter` value templates inside a
+ * component structure. Merge order (lowest → highest precedence):
+ *   componentResolvedProps → templateContext (parent list loop variables)
+ * The cmsContext stays out of this scope — it's namespaced via {{cms.X}} and resolved
+ * on its own branch in getCollectionItems. Returns undefined when no scope is available
+ * (e.g. page root with no host component and no parent list).
+ */
+function buildListResolutionScope(ctx: SSRContext): Record<string, unknown> | undefined {
+  const tplCtx = ctx.templateContext as Record<string, unknown> | undefined;
+  const props = ctx.componentResolvedProps;
+  if (!tplCtx && !props) return undefined;
+  return { ...(props ?? {}), ...(tplCtx ?? {}) };
+}
+
 /**
  * Create a value resolver for i18n resolution (for use with item templates)
  */
@@ -197,7 +238,18 @@ function processStyleToClasses(
       getI18nResolver(ctx)
     ) as StyleObject | ResponsiveStyleObject;
   }
-  return responsiveStylesToClasses(processedStyle as 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';
+
+  return responsiveStylesToClasses(
+    processedStyle as ResponsiveStyleObject,
+    { fluidActive, responsiveScales: ctx.responsiveScales }
+  );
 }
 
 /**
@@ -242,6 +294,14 @@ function evaluateIfCondition(node: ComponentNode, ctx: SSRContext): boolean {
       resolved = processCMSTemplate(resolved, ctx.cmsContext.cms, ctx.locale, ctx.i18nConfig);
     }
 
+    // Unresolved template (e.g. {{prop}} where the prop is undefined and
+    // processStructure preserved the original template per evaluateTemplate's
+    // backward-compat fallback) → treat as falsy so missing context means
+    // "don't render", matching `if: false` and unset BooleanMapping values.
+    if (resolved.includes('{{') && resolved.includes('}}')) {
+      return false;
+    }
+
     // Evaluate truthiness - false, 0, empty string are falsy
     return Boolean(resolved) && resolved !== 'false' && resolved !== '0' && resolved !== '';
   }
@@ -251,33 +311,34 @@ function evaluateIfCondition(node: ComponentNode, ctx: SSRContext): boolean {
 }
 
 /**
- * Resolve a template value like "{{category.slug}}" from template context.
+ * Resolve a template value like "{{category.slug}}" from a flat scope.
  * Returns the original value if not a template or can't be resolved.
  */
-function resolveFilterValue(value: unknown, templateContext: TemplateContext | undefined): unknown {
-  if (!templateContext || typeof value !== 'string' || !value.startsWith('{{') || !value.endsWith('}}')) {
+function resolveFilterValue(value: unknown, scope: Record<string, unknown> | undefined): unknown {
+  if (!scope || typeof value !== 'string' || !value.startsWith('{{') || !value.endsWith('}}')) {
     return value;
   }
   const path = value.slice(2, -2).trim();
-  const resolved = getNestedValue(templateContext as Record<string, unknown>, path);
+  const resolved = getNestedValue(scope, path);
   return resolved !== undefined ? resolved : value;
 }
 
 /**
  * Resolve template values in CMS filter for nested cms-list support.
- * Handles filter values like "{{category.slug}}" from parent template context.
+ * Handles filter values like "{{category.slug}}" against a flat scope built from
+ * parent template context overlaid on host-component resolved props.
  */
 function resolveFilterTemplates(
   filter: CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown> | undefined,
-  templateContext: TemplateContext | undefined
+  scope: Record<string, unknown> | undefined
 ): CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown> | undefined {
-  if (!filter || !templateContext) return filter;
+  if (!filter || !scope) return filter;
 
   // Handle array of conditions
   if (Array.isArray(filter)) {
     return filter.map(cond => ({
       ...cond,
-      value: resolveFilterValue(cond.value, templateContext)
+      value: resolveFilterValue(cond.value, scope)
     }));
   }
 
@@ -285,14 +346,14 @@ function resolveFilterTemplates(
   if ('field' in filter && 'value' in filter) {
     return {
       ...(filter as CMSFilterCondition),
-      value: resolveFilterValue((filter as CMSFilterCondition).value, templateContext)
+      value: resolveFilterValue((filter as CMSFilterCondition).value, scope)
     };
   }
 
   // Handle simple object filter: { category: "{{category.slug}}" }
   const resolved: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(filter)) {
-    resolved[key] = resolveFilterValue(value, templateContext);
+    resolved[key] = resolveFilterValue(value, scope);
   }
   return resolved;
 }
@@ -374,7 +435,8 @@ export async function buildComponentHTML(
   pagePath?: string,
   cmsContext?: CMSContext,
   cmsService?: CMSService,
-  isProductionBuild?: boolean
+  isProductionBuild?: boolean,
+  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>();
@@ -421,6 +483,8 @@ export async function buildComponentHTML(
     ssrFallbackCollector, // Collect SSR fallback HTML for complex nodes
     processedRawHtmlCollector, // Collect raw→processed HTML for Astro exporter
     imageFormat: configService.getImageFormat(),
+    injectEditorAttrs,
+    responsiveScales: configService.getResponsiveScales(),
   };
 
   const html = await renderNode(node, ctx);
@@ -473,7 +537,7 @@ async function renderNestedListPlaceholder(
   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}">` +
+  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>`;
 }
@@ -576,6 +640,8 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
     const itemCtx: SSRContext = {
       ...ctx,
       templateContext,
+      cmsItemIndexPath: [...(ctx.cmsItemIndexPath ?? []), i],
+      cmsListPaths: [...(ctx.cmsListPaths ?? []), ctx.elementPath ?? []],
     };
 
     const childrenHtml = await renderChildrenAsync(node.children || [], itemCtx);
@@ -639,8 +705,12 @@ async function getCollectionItems(node: ListNode, source: string, ctx: SSRContex
           resolvedIds = Array.isArray(value) ? value.map(v => String(v)) : String(value);
         }
       } else {
-        // Otherwise resolve from template context (for nested lists)
-        const parentContext = ctx.templateContext || { _type: 'template' as const };
+        // Otherwise resolve from a merged scope: parent list loop variables (highest precedence)
+        // overlaid on the host component's resolved props (lowest precedence). This lets
+        // {{config.tagIds}} resolve against a component prop named `config` while {{post.X}}
+        // from a parent list still wins on key collisions.
+        const mergedScope = buildListResolutionScope(ctx) ?? {};
+        const parentContext = { _type: 'template' as const, ...mergedScope } as TemplateContext;
         resolvedIds = resolveItemsTemplate(node.items, parentContext);
       }
 
@@ -659,10 +729,11 @@ async function getCollectionItems(node: ListNode, source: string, ctx: SSRContex
       items = items.filter(item => !isItemDraftForLocale(item, ctx.locale!));
     }
   } else {
-    // Build query from node props (resolve filter templates for nested list support)
+    // 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, ctx.templateContext),
+      filter: resolveFilterTemplates(node.filter as CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown> | undefined, buildListResolutionScope(ctx)),
       sort: node.sort,
       limit: node.limit,
       offset: node.offset,
@@ -748,11 +819,18 @@ function buildNodeElementClass(
     ? 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 elementClassCtx: ElementClassContext = {
     fileType: effectiveFileType,
     fileName: effectiveFileName || 'page',
     label,
-    path: ctx.elementPath || [],
+    path,
   };
   return generateElementClassName(elementClassCtx);
 }
@@ -790,6 +868,42 @@ function buildCssVariableStyleAttr(cssVariables: Record<string, string>): string
   return ` style="${escapeHtml(styleString)}"`;
 }
 
+function arraysEqual(a: number[] | undefined, b: number[] | undefined): boolean {
+  if (!a || !b || a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+
+/**
+ * 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 {
+  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);
+  // 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));
+  return buildEditorAttrs({
+    elementPath: ctx.elementPath,
+    cmsItemIndexPath: ctx.cmsItemIndexPath,
+    cmsListPaths: ctx.cmsListPaths,
+    componentContext: ctx.componentContext,
+    parentComponentName: effectiveParent,
+    isComponentRoot,
+    isSlotContent: opts.isSlotContent,
+    isCMSListContainer: opts.isCMSListContainer,
+  });
+}
+
 /**
  * Render a node (or array of nodes) to HTML string
  */
@@ -951,7 +1065,7 @@ async function renderNode(
       const classAttr = classNames.length > 0 ? ` class="${escapeHtml(classNames.filter(Boolean).join(' '))}"` : '';
 
       // Always use span for embeds - valid inside <p> and other phrasing content
-      return `<span${classAttr}${embedStyleAttr}${attrs}>${optimizedHtml}</span>`;
+      return `<span${classAttr}${embedStyleAttr}${attrs}${editorAttrs(ctx, { isSlotContent: isSlotContent(node) })}>${optimizedHtml}</span>`;
     }
 
     // Add attribute className if present (fallback when no interactive styles)
@@ -966,7 +1080,7 @@ async function renderNode(
     const classAttr = classNames.length > 0 ? ` class="${escapeHtml(classNames.filter(Boolean).join(' '))}"` : '';
 
     // Always use span for embeds - valid inside <p> and other phrasing content
-    return `<span${classAttr}${attrs}>${optimizedHtml}</span>`;
+    return `<span${classAttr}${attrs}${editorAttrs(ctx, { isSlotContent: isSlotContent(node) })}>${optimizedHtml}</span>`;
   }
 
   // Handle link nodes (render as <a> tag in SSR)
@@ -1061,7 +1175,7 @@ async function renderNode(
         }))).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}>${childrenHTML}</a>`;
+    return `<a href="${escapeHtml(String(href))}"${classAttr}${olinkStyleAttr}${attrs}${editorAttrs(ctx, { isSlotContent: isSlotContent(node) })}>${childrenHTML}</a>`;
   }
 
   // Handle locale-list node type (render locale switcher links)
@@ -1112,13 +1226,25 @@ async function renderNode(
   // Convert styles to utility classes instead of inline styles
   let utilityClasses: string[] = [];
   let resolvedStyle: StyleObject = {};
+  // For custom component instances, defer style→class conversion: forward the
+  // style object so renderComponent can deep-merge it into the structure root,
+  // then let the recursive renderNode call generate classes from the merged
+  // 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);
+  let deferredComponentStyle: StyleObject | ResponsiveStyleObject | undefined;
 
   if (nodeStyle) {
-    // Validate that all styles can generate utility classes (build-time warnings)
-    validateStyleCoverage(nodeStyle, `Node: ${nodeType || 'unknown'}`);
+    if (isCustomComponentNode) {
+      deferredComponentStyle = nodeStyle;
+    } else {
+      // Validate that all styles can generate utility classes (build-time warnings)
+      validateStyleCoverage(nodeStyle, `Node: ${nodeType || 'unknown'}`);
 
-    // Convert style object to utility class names (process templates in style values)
-    utilityClasses = processStyleToClasses(nodeStyle, ctx);
+      // Convert style object to utility class names (process templates in style values)
+      utilityClasses = processStyleToClasses(nodeStyle, ctx);
+    }
   } else if (nodeProps.style) {
     // If no node.style but props have style, keep it for backward compatibility
     if (isResponsiveStyle(nodeProps.style) && breakpoints && viewportWidth) {
@@ -1164,7 +1290,9 @@ async function renderNode(
     ...nodeProps,
     ...nodeAttributesWithoutClass,
     ...(mergedClassName ? { className: mergedClassName } : {}),
-    ...(Object.keys(resolvedStyle).length > 0 ? { style: resolvedStyle } : {})
+    ...(deferredComponentStyle
+      ? { style: deferredComponentStyle }
+      : Object.keys(resolvedStyle).length > 0 ? { style: resolvedStyle } : {})
   };
 
   // Check if this is a custom component
@@ -1250,29 +1378,12 @@ async function renderComponent(
         rootNode.props = {};
       }
 
-      // For HTML and Link root nodes, merge styles into node.style (where the renderer reads them)
-      if (isHtmlNode(rootNode) || isLinkNode(rootNode)) {
-        if (propsWithStyleAndAttrs.style) {
-          const existingStyle = rootNode.style;
-          if (existingStyle && typeof existingStyle === 'object') {
-            rootNode.style = {
-              ...(existingStyle as Record<string, any>),
-              ...(propsWithStyleAndAttrs.style as Record<string, any>)
-            };
-          } else {
-            rootNode.style = propsWithStyleAndAttrs.style as StyleObject | ResponsiveStyleObject;
-          }
-        }
-      } else {
-        // For component root nodes, merge into props.style
-        if (rootNode.props.style && typeof rootNode.props.style === 'object') {
-          rootNode.props.style = {
-            ...(rootNode.props.style as Record<string, unknown>),
-            ...(propsWithStyleAndAttrs.style as Record<string, unknown> || {})
-          };
-        } else if (propsWithStyleAndAttrs.style) {
-          rootNode.props.style = propsWithStyleAndAttrs.style;
-        }
+      // Deep-merge instance styles into the structure root (per-breakpoint for
+      // responsive styles), so an instance override of a property actually
+      // replaces the structure's value for that property instead of producing a
+      // competing utility class on the same element.
+      if (propsWithStyleAndAttrs.style) {
+        mergeNodeStyles(rootNode, propsWithStyleAndAttrs.style as StyleObject | ResponsiveStyleObject);
       }
 
       // Merge className from component instance (includes responsive utility classes)
@@ -1345,13 +1456,17 @@ async function renderComponent(
       }
     }
 
-    // Render the processed component structure with component context
-    // Reset element path to component-relative for stable class names
-    // Pass resolved props for interactive style mapping resolution
+    // Render the processed component structure with component context.
+    // elementPath stays page-absolute (matching client ComponentBuilder.ts:874) so
+    // data-element-path values match XRay's tree paths. componentRootPath captures
+    // the page-level path of this instance so buildNodeElementClass can slice it
+    // off to keep class hashes component-relative across instances.
     return await renderNode(processedStructure, {
       ...ctx,
+      // The previously-active component (if any) becomes the parent for editor attrs
+      parentComponentName: ctx.componentContext,
       componentContext: componentName,
-      elementPath: [0],
+      componentRootPath: ctx.elementPath,
       componentResolvedProps: resolvedProps,
     });
 
@@ -1388,7 +1503,7 @@ async function renderLinkNode(
       }))).join('')
     : await renderNode(children as ComponentNode, { ...ctx, elementPath: ctx.elementPath ? [...ctx.elementPath, 0] : [0] });
 
-  return `<a href="${escapeHtml(String(href))}"${linkClassAttr}${attrs}>${childrenHTML}</a>`;
+  return `<a href="${escapeHtml(String(href))}"${linkClassAttr}${attrs}${editorAttrs(ctx)}>${childrenHTML}</a>`;
 }
 
 /**
@@ -1429,25 +1544,47 @@ async function renderHtmlElement(
     ? ['style', 'className', ...imageProps]
     : ['style', 'className'];
   const attrs = buildAttributes(propsWithStyleAndAttrs, excludeProps);
-  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] });
+  // `<style>` and `<script>` are HTML "raw text" elements: their content is
+  // not parsed for entities or child elements. Running text children through
+  // `renderNode` (which calls `escapeHtml`) would convert `"`, `<`, `>` to
+  // entities — breaking CSS selectors / @font-face URLs and JS code. Emit the
+  // string children verbatim instead. This path is used by the chrome-
+  // extension import flow to inject `@font-face` rules captured from the
+  // source page (`HtmlToMenoConverter.convertHtmlStringToMeno`).
+  const isRawTextElement = tag.toLowerCase() === 'style' || tag.toLowerCase() === 'script';
+  let childrenHTML: string;
+  if (isRawTextElement) {
+    const flatten = (node: ComponentNode | ComponentNode[] | string | number | null | undefined): string => {
+      if (node == null) return '';
+      if (typeof node === 'string') return node;
+      if (typeof node === 'number') return String(node);
+      if (Array.isArray(node)) return node.map(flatten).join('');
+      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] });
+  }
+
+  const ea = editorAttrs(ctx);
 
   // Self-closing tags
   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') {
-      return renderImageElement(propsWithStyleAndAttrs, classAttr, styleAttr, attrs, ctx);
+      return renderImageElement(propsWithStyleAndAttrs, classAttr, styleAttr, attrs + ea, ctx);
     }
 
-    return `<${tag}${classAttr}${styleAttr}${attrs} />`;
+    return `<${tag}${classAttr}${styleAttr}${attrs}${ea} />`;
   }
 
-  return `<${tag}${classAttr}${styleAttr}${attrs}>${childrenHTML}</${tag}>`;
+  return `<${tag}${classAttr}${styleAttr}${attrs}${ea}>${childrenHTML}</${tag}>`;
 }
 
 /**
@@ -1578,10 +1715,16 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
       }
     }
 
+    const localeStyleOpts = {
+      fluidActive:
+        ctx.responsiveScales?.enabled === true && ctx.responsiveScales?.mode === 'fluid',
+      responsiveScales: ctx.responsiveScales,
+    };
+
     // Convert container styles to utility classes
     let containerClasses: string[] = [];
     if (nodeStyle) {
-      containerClasses = responsiveStylesToClasses(nodeStyle as ResponsiveStyleObject);
+      containerClasses = responsiveStylesToClasses(nodeStyle as ResponsiveStyleObject, localeStyleOpts);
     }
 
     // Handle interactive styles for locale-list wrapper
@@ -1607,7 +1750,7 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
     // Convert item styles to utility classes
     let itemClasses: string[] = [];
     if (node.itemStyle) {
-      itemClasses = responsiveStylesToClasses(node.itemStyle as ResponsiveStyleObject);
+      itemClasses = responsiveStylesToClasses(node.itemStyle as ResponsiveStyleObject, localeStyleOpts);
     }
     const itemClassAttr = itemClasses.length > 0
       ? ` class="${escapeHtml(itemClasses.join(' '))}"`
@@ -1616,13 +1759,13 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
     // Convert active item styles to utility classes
     let activeItemClasses: string[] = [];
     if (node.activeItemStyle) {
-      activeItemClasses = responsiveStylesToClasses(node.activeItemStyle as ResponsiveStyleObject);
+      activeItemClasses = responsiveStylesToClasses(node.activeItemStyle as ResponsiveStyleObject, localeStyleOpts);
     }
 
     // Convert separator styles to utility classes
     let separatorClasses: string[] = [];
     if (node.separatorStyle) {
-      separatorClasses = responsiveStylesToClasses(node.separatorStyle as ResponsiveStyleObject);
+      separatorClasses = responsiveStylesToClasses(node.separatorStyle as ResponsiveStyleObject, localeStyleOpts);
     }
     const separatorClassAttr = separatorClasses.length > 0
       ? ` class="${escapeHtml(separatorClasses.join(' '))}"`
@@ -1631,7 +1774,7 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
     // Convert flag styles to utility classes
     let flagClasses: string[] = [];
     if (node.flagStyle) {
-      flagClasses = responsiveStylesToClasses(node.flagStyle as ResponsiveStyleObject);
+      flagClasses = responsiveStylesToClasses(node.flagStyle as ResponsiveStyleObject, localeStyleOpts);
     }
     const flagClassAttr = flagClasses.length > 0
       ? ` class="${escapeHtml(flagClasses.join(' '))}"`
@@ -1686,7 +1829,7 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
     const nodeAttributes = extractAttributesFromNode(node);
     const attrsStr = buildAttributes(nodeAttributes);
 
-    const localeListResult = `<div data-locale-list="true"${containerClassAttr}${localeListStyleAttr}${attrsStr}>${linksHTML}</div>`;
+    const localeListResult = `<div data-locale-list="true"${containerClassAttr}${localeListStyleAttr}${attrsStr}${editorAttrs(ctx)}>${linksHTML}</div>`;
 
     // Store SSR fallback for Astro export (locale-list nodes can't be expressed as static Astro components)
     if (ctx.ssrFallbackCollector && ctx.elementPath) {
@@ -1712,7 +1855,8 @@ export async function renderPageSSR(
   slugMappings?: SlugMap[],
   cmsContext?: CMSContext,
   cmsService?: CMSService,
-  isProductionBuild?: boolean
+  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> }> {
   // Extract page content
   const rootNode = pageData?.root || undefined;
@@ -1750,7 +1894,7 @@ 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)
+    ? 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>() };
 
   // Collect JavaScript and CSS from all components

package/lib/server/utils/jsonLineMapper.test.ts

@@ -70,7 +70,27 @@ describe("jsonLineMapper", () => {
 }`;
 
       const lineMap = buildLineMap(json);
-      expect(lineMap.size).toBe(0);
+      // Only the root entry (empty-string key) is recorded; no children.
+      expect(lineMap.size).toBe(1);
+      expect(lineMap.get("")).toBeDefined();
+    });
+
+    test("records the root's own line range under the empty-string key", () => {
+      const json = `{
+  "root": {
+    "type": "node",
+    "children": [
+      {
+        "type": "node",
+        "tag": "div"
+      }
+    ]
+  }
+}`;
+
+      const lineMap = buildLineMap(json);
+      // Root value starts at line 2 and closes at line 10.
+      expect(lineMap.get("")).toEqual({ startLine: 2, endLine: 10 });
     });
 
     test("should handle JSON without root", () => {
@@ -83,6 +103,38 @@ describe("jsonLineMapper", () => {
       const lineMap = buildLineMap(json);
       expect(lineMap.size).toBe(0);
     });
+
+    test("tracks component format via component.structure", () => {
+      const json = `{
+  "component": {
+    "interface": {
+      "size": { "type": "text" }
+    },
+    "structure": {
+      "type": "node",
+      "tag": "h1",
+      "children": [
+        {
+          "type": "node",
+          "tag": "span"
+        },
+        {
+          "type": "component",
+          "component": "Icon"
+        }
+      ]
+    }
+  }
+}`;
+
+      const lineMap = buildLineMap(json);
+      // Structure spans from its opening `{` (line 6) to its closing `}` (line 19).
+      expect(lineMap.get("")).toEqual({ startLine: 6, endLine: 19 });
+      // First child: the <span>.
+      expect(lineMap.get("0")?.startLine).toBe(10);
+      // Second child: the Icon component instance.
+      expect(lineMap.get("1")?.startLine).toBe(14);
+    });
   });
 
   describe("lineMapToObject", () => {