meno-core 1.0.48 → 1.0.50

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';
@@ -50,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';
@@ -71,6 +72,30 @@ export interface PreloadImage {
 
 // Re-export types for external consumers
 export type { CMSContext } from './cmsSSRProcessor';
+
+/**
+ * Resolve any `_i18n` value objects inside an attributes record into the
+ * active locale's string. Authors can write `attributes: { alt: { _i18n:
+ * true, en: "Photo", pl: "Zdjęcie" } }` and the runtime substitutes a single
+ * locale-appropriate string here, before `buildAttributes` (which silently
+ * drops object-typed values to avoid `[object Object]` in HTML).
+ */
+function resolveI18nAttrs<T extends Record<string, unknown>>(
+  attrs: T,
+  locale: string | undefined,
+  i18nConfig: I18nConfig | undefined
+): T {
+  let mutated: Record<string, unknown> | null = null;
+  const config = i18nConfig ?? DEFAULT_I18N_CONFIG;
+  const effectiveLocale = locale || config.defaultLocale;
+  for (const [key, value] of Object.entries(attrs)) {
+    if (isI18nValue(value)) {
+      mutated = mutated ?? { ...attrs };
+      mutated[key] = resolveI18nValue(value, effectiveLocale, config);
+    }
+  }
+  return (mutated ?? attrs) as T;
+}
 export type { PageMeta } from './metaTagGenerator';
 export { extractPageMeta, generateMetaTags } from './metaTagGenerator';
 
@@ -128,6 +153,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;
 }
 
 /**
@@ -138,6 +187,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)
  */
@@ -198,7 +262,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 }
+  );
 }
 
 /**
@@ -260,33 +335,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)
     }));
   }
 
@@ -294,14 +370,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;
 }
@@ -383,7 +459,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>();
@@ -430,6 +507,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);
@@ -482,7 +561,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>`;
 }
@@ -585,6 +664,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);
@@ -648,8 +729,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);
       }
 
@@ -668,10 +753,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,
@@ -757,11 +843,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);
 }
@@ -799,6 +892,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
  */
@@ -863,6 +992,21 @@ async function renderNode(
 
   if (typeof node !== 'object') return '';
 
+  // Resolve `_i18n` value objects to a single string before node-shape
+  // dispatch. Authors can write a localized string anywhere `children` is
+  // accepted — on `type: "node"` elements, list templates, link children, etc.
+  // — and the runtime resolves it to the active locale here. Precedence rule:
+  // an object with both `_i18n: true` and `type`/`tag` resolves as i18n.
+  if (isI18nValue(node)) {
+    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
+    );
+  }
+
   // Check if condition - skip rendering if false
   if (!evaluateIfCondition(node as ComponentNode, ctx)) {
     return '';
@@ -922,7 +1066,7 @@ async function renderNode(
       : sanitizedHtml;
 
     // Extract attributes from node
-    const nodeAttributes = extractAttributesFromNode(node);
+    const nodeAttributes = resolveI18nAttrs(extractAttributesFromNode(node), locale, i18nConfig);
 
     // Build className array
     const classNames: string[] = ['oem'];
@@ -960,7 +1104,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)
@@ -975,7 +1119,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)
@@ -1015,7 +1159,7 @@ async function renderNode(
     href = localizeHref(href, ctx);
 
     // Extract attributes from node
-    const nodeAttributes = extractAttributesFromNode(node);
+    const nodeAttributes = resolveI18nAttrs(extractAttributesFromNode(node), locale, i18nConfig);
 
     // Build className array - start with olink base class
     const classNames: string[] = ['olink'];
@@ -1070,7 +1214,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)
@@ -1096,8 +1240,10 @@ async function renderNode(
     nodeProps = processItemPropsTemplate(nodeProps, templateCtx, i18nResolver);
   }
 
-  // Extract attributes from node
-  let nodeAttributes = extractAttributesFromNode(node);
+  // Extract attributes from node. Resolve any `_i18n` value objects on
+  // attribute values to the active locale's string before downstream
+  // processing (templates, CMS substitution, kebab-casing).
+  let nodeAttributes = resolveI18nAttrs(extractAttributesFromNode(node), locale, i18nConfig);
   const originalAttributes = { ...nodeAttributes };
 
   // Process CMS templates in attributes (e.g., href="{{cms.link}}")
@@ -1351,13 +1497,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,
     });
 
@@ -1394,7 +1544,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>`;
 }
 
 /**
@@ -1435,25 +1585,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}>`;
 }
 
 /**
@@ -1584,10 +1756,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
@@ -1613,7 +1791,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(' '))}"`
@@ -1622,13 +1800,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(' '))}"`
@@ -1637,7 +1815,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(' '))}"`
@@ -1689,10 +1867,10 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
       : links.join('');
 
     // Extract attributes from node
-    const nodeAttributes = extractAttributesFromNode(node);
+    const nodeAttributes = resolveI18nAttrs(extractAttributesFromNode(node), locale, i18nConfig);
     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) {
@@ -1718,7 +1896,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;
@@ -1756,7 +1935,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/webflow/buildWebflow.ts

@@ -456,7 +456,7 @@ export async function buildWebflowPayload(
           // the slug, so a template like `templates/blog.json` lands at
           // `/blog/<first-slug>` and doesn't collide with a sibling listing
           // page like `pages/blog.json`.
-          let itemSlug = item[cmsSchema.slugField] ?? item._slug ?? item._id;
+          let itemSlug = item[cmsSchema.slugField] ?? item._slug ?? item._filename ?? item._id;
           if (isI18nValue(itemSlug)) {
             itemSlug = resolveI18nValue(itemSlug, locale, i18nConfig) as string;
           }

package/lib/server/websocketManager.test.ts

@@ -1,9 +1,64 @@
-import { describe, test, expect } from 'bun:test';
+import { describe, test, expect, beforeEach } from 'bun:test';
+import { WebSocketManager } from './websocketManager';
+import { WEBSOCKET_STATES } from '../shared/constants';
+import type { RuntimeWSClient } from './runtime';
 
-describe('websocketManager', () => {
-  test('placeholder test for coverage', () => {
-    // WebSocket tests are complex and require server setup
-    // This placeholder ensures the file appears in coverage reports
-    expect(true).toBe(true);
+function makeMockClient(readyState: number = WEBSOCKET_STATES.OPEN): RuntimeWSClient & { sent: string[] } {
+  const sent: string[] = [];
+  return {
+    readyState,
+    send(data) {
+      sent.push(typeof data === 'string' ? data : '<binary>');
+    },
+    close() {},
+    sent,
+  } as RuntimeWSClient & { sent: string[] };
+}
+
+describe('WebSocketManager', () => {
+  let manager: WebSocketManager;
+  let client: ReturnType<typeof makeMockClient>;
+
+  beforeEach(() => {
+    manager = new WebSocketManager();
+    client = makeMockClient();
+    manager.addClient(client);
+  });
+
+  describe('broadcastCollectionsUpdate', () => {
+    test('sends hmr:cms-collections-update to OPEN clients', () => {
+      manager.broadcastCollectionsUpdate();
+      expect(client.sent).toEqual([JSON.stringify({ type: 'hmr:cms-collections-update' })]);
+    });
+
+    test('skips clients that are not OPEN', () => {
+      const closing = makeMockClient(WEBSOCKET_STATES.CLOSING);
+      manager.addClient(closing);
+      manager.broadcastCollectionsUpdate();
+      expect(client.sent.length).toBe(1);
+      expect(closing.sent.length).toBe(0);
+    });
+  });
+
+  describe('broadcastCMSUpdate', () => {
+    test('includes collection in payload', () => {
+      manager.broadcastCMSUpdate('blog');
+      expect(client.sent).toEqual([JSON.stringify({ type: 'hmr:cms-update', collection: 'blog' })]);
+    });
+  });
+
+  describe('broadcastConfigUpdate', () => {
+    test('sends hmr:config-update to OPEN clients', () => {
+      manager.broadcastConfigUpdate();
+      expect(client.sent).toEqual([JSON.stringify({ type: 'hmr:config-update' })]);
+    });
+  });
+
+  describe('client lifecycle', () => {
+    test('removed clients no longer receive broadcasts', () => {
+      manager.removeClient(client);
+      manager.broadcastCollectionsUpdate();
+      expect(client.sent.length).toBe(0);
+    });
   });
 });

package/lib/server/websocketManager.ts

@@ -103,7 +103,31 @@ export class WebSocketManager {
       collection
     });
   }
-  
+
+  /**
+   * Broadcast CMS collections-list update notification.
+   * Emitted when a template file is added, removed, or its schema changes —
+   * tells connected clients to re-fetch the collections list.
+   */
+  broadcastCollectionsUpdate(): void {
+    this.broadcast({
+      type: 'hmr:cms-collections-update'
+    });
+  }
+
+  /**
+   * Broadcast project.config.json update notification.
+   * Emitted when project.config.json changes (e.g. an AI tool adds a new
+   * locale) — tells connected clients to re-fetch config-derived state
+   * such as the i18n locale list.
+   */
+  broadcastConfigUpdate(): void {
+    this.broadcast({
+      type: 'hmr:config-update'
+    });
+  }
+
+
   /**
    * Get number of connected clients
    */