meno-core 1.0.49 → 1.0.51

package/lib/server/ssr/htmlGenerator.ts

@@ -147,6 +147,15 @@ export interface GenerateSSRHTMLOptions {
   isEditor?: boolean;
   /** Actual bound server port for live reload WS (connects directly to SSR server) */
   serverPort?: number;
+  /**
+   * Per-request CSP nonce. When set, every inline `<script>` emitted by this
+   * generator carries `nonce="${nonce}"`. The HTTP route handler must send
+   * the same nonce in the `script-src` directive of the response CSP header
+   * (and the Electron main process splices it into the BrowserWindow CSP).
+   * When unset, scripts are emitted without a nonce attribute — callers that
+   * still rely on `'unsafe-inline'` (legacy / direct CLI usage) keep working.
+   */
+  cspNonce?: string;
 }
 
 /**
@@ -235,7 +244,12 @@ export async function generateSSRHTML(
     isEditor = false,
     isProductionBuild = false,
     serverPort,
+    cspNonce,
   } = options;
+
+  // Attribute fragment for stamping nonce on inline <script> tags. Empty when
+  // no nonce is supplied so legacy ('unsafe-inline') paths keep working.
+  const nonceAttr = cspNonce ? ` nonce="${cspNonce}"` : '';
   // Editor selection attributes (data-element-path, data-cms-context, ...) are gated
   // on injectEditorAttrs — set ONLY when the request comes from the editor preview iframe
   // via the studio's /__static__/ proxy (which sends an `x-meno-editor` header).
@@ -285,8 +299,13 @@ export async function generateSSRHTML(
   await configService.load();
   const globalLibraries = configService.getLibraries() || { js: [], css: [] };
   const globalCustomCode = configService.getCustomCode();
+  // The Meno badge previously used inline event handlers (onmouseenter /
+  // onmouseleave) to drive its opacity hover, which CSP with `'nonce-…'` and
+  // no `'unsafe-inline'` rejects. Move the hover to a stylesheet rule using a
+  // dedicated class so nonces aren't needed for this purely-presentational
+  // effect.
   const menoBadgeHtml = configService.getShowMenoBadge()
-    ? `<a href="https://meno.so" target="_blank" rel="noopener" style="position:fixed;bottom:12px;left:12px;z-index:9999;background:#000;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-family:system-ui,sans-serif;text-decoration:none;opacity:0.8;transition:opacity 0.2s" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">Made in Meno</a>`
+    ? `<style>.meno-badge{position:fixed;bottom:12px;left:12px;z-index:9999;background:#000;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-family:system-ui,sans-serif;text-decoration:none;opacity:0.8;transition:opacity 0.2s}.meno-badge:hover,.meno-badge:focus{opacity:1}</style><a class="meno-badge" href="https://meno.so" target="_blank" rel="noopener">Made in Meno</a>`
     : '';
   const mergedCustomCode = {
     head: [globalCustomCode.head, pageCustomCode?.head].filter(Boolean).join('\n'),
@@ -378,7 +397,7 @@ export async function generateSSRHTML(
       // Legacy inline mode (dev server)
       // Escape </script> sequences to prevent premature script tag closure
       const escapedJavaScript = allJavaScript.replace(/<\/script>/gi, '<\\/script>');
-      componentScript = `\n  <script>\n${escapedJavaScript}\n  </script>`;
+      componentScript = `\n  <script${nonceAttr}>\n${escapedJavaScript}\n  </script>`;
     }
   }
 
@@ -472,7 +491,7 @@ picture {
   // Config script - inline for dev, include in external JS for static build
   const hasConfig = Object.keys(menoConfig).length > 0;
   const configInlineScript = hasConfig && !extScriptPath && !returnSeparateJS
-    ? `<script>window.__MENO_CONFIG__=${JSON.stringify(menoConfig)}</script>\n  `
+    ? `<script${nonceAttr}>window.__MENO_CONFIG__=${JSON.stringify(menoConfig)}</script>\n  `
     : '';
   // Add config to external JS if using external scripts
   if (hasConfig && externalJavaScript !== null) {
@@ -482,7 +501,7 @@ picture {
   // CMS context script - needed when a client-side Router is present (dev mode or studio preview)
   // Production builds are pure HTML with no client routing, so excluded
   const cmsInlineScript = cmsTemplatePath && cms && (!useBundled || injectLiveReload)
-    ? `<script>window.__MENO_CMS__=${JSON.stringify({ item: cms.cms, templatePath: cmsTemplatePath })}</script>\n  `
+    ? `<script${nonceAttr}>window.__MENO_CMS__=${JSON.stringify({ item: cms.cms, templatePath: cmsTemplatePath })}</script>\n  `
     : '';
 
   // Client data scripts - inline JSON for MenoFilter (production builds only)
@@ -490,14 +509,22 @@ picture {
     ? generateAllInlineDataScripts(finalClientDataCollections) + '\n  '
     : '';
 
-  // Generate favicon and apple touch icon link tags
+  // Generate favicon and apple touch icon link tags.
+  // When a dark-mode favicon is configured alongside the default, scope the
+  // default to `(prefers-color-scheme: light)` and emit a second tag scoped to
+  // `(prefers-color-scheme: dark)` so the browser swaps automatically.
+  // Note: apple-touch-icon does not honor prefers-color-scheme on iOS.
+  const hasDarkFavicon = !!(iconsConfig.favicon && iconsConfig.faviconDark);
   const faviconTag = iconsConfig.favicon
-    ? `<link rel="icon" href="${escapeHtml(iconsConfig.favicon)}" />`
+    ? `<link rel="icon" href="${escapeHtml(iconsConfig.favicon)}"${hasDarkFavicon ? ' media="(prefers-color-scheme: light)"' : ''} />`
+    : '';
+  const faviconDarkTag = iconsConfig.faviconDark
+    ? `<link rel="icon" href="${escapeHtml(iconsConfig.faviconDark)}" media="(prefers-color-scheme: dark)" />`
     : '';
   const appleTouchIconTag = iconsConfig.appleTouchIcon
     ? `<link rel="apple-touch-icon" href="${escapeHtml(iconsConfig.appleTouchIcon)}" />`
     : '';
-  const iconTags = [faviconTag, appleTouchIconTag].filter(Boolean).join('\n  ');
+  const iconTags = [faviconTag, faviconDarkTag, appleTouchIconTag].filter(Boolean).join('\n  ');
 
   // Script preload tag - eliminates critical request chain by discovering script early
   const scriptPreloadTag = extScriptPath
@@ -537,12 +564,12 @@ picture {
   // diff (different element counts or unknown paths) it falls back to a
   // straight innerHTML replace.
   const liveReloadScript = injectLiveReload
-    ? `<script>(function(){var ws,timer,gen=0,lastSrvRoot=null;function strip(s){return s?s.replace(/[?&]_r=\\d+/,''):''}function classList(el){return (el.getAttribute('class')||'').split(/\\s+/).filter(Boolean)}function syncEl(cur,srv,old){var cc=classList(cur),sc=classList(srv),oc=old?new Set(classList(old)):new Set();var rt=cc.filter(function(c){return !oc.has(c)});var seen=new Set(),fin=[];sc.concat(rt).forEach(function(c){if(!seen.has(c)){seen.add(c);fin.push(c)}});var fs=fin.join(' ');if((cur.getAttribute('class')||'')!==fs){if(fs)cur.setAttribute('class',fs);else cur.removeAttribute('class')}for(var i=0;i<srv.attributes.length;i++){var a=srv.attributes[i];if(a.name==='class')continue;if(cur.getAttribute(a.name)!==a.value)cur.setAttribute(a.name,a.value)}if(old){for(var i=0;i<old.attributes.length;i++){var a=old.attributes[i];if(a.name==='class')continue;if(!srv.hasAttribute(a.name)&&cur.hasAttribute(a.name))cur.removeAttribute(a.name)}}}function syncText(cur,srv){var cc=cur.childNodes,sc=srv.childNodes;for(var i=0;i<sc.length;i++){var s=sc[i],c=cc[i];if(s.nodeType===3&&c&&c.nodeType===3){if(c.textContent!==s.textContent)c.textContent=s.textContent}}}function smartUpdate(curR,srvR,oldR){var ce=curR.querySelectorAll('[data-element-path]'),se=srvR.querySelectorAll('[data-element-path]');if(ce.length!==se.length){if(curR.innerHTML!==srvR.innerHTML)curR.innerHTML=srvR.innerHTML;return}var sbp={};for(var i=0;i<se.length;i++)sbp[se[i].getAttribute('data-element-path')]=se[i];var obp={};if(oldR){var oe=oldR.querySelectorAll('[data-element-path]');for(var i=0;i<oe.length;i++)obp[oe[i].getAttribute('data-element-path')]=oe[i]}for(var i=0;i<ce.length;i++){var c=ce[i],p=c.getAttribute('data-element-path'),s=sbp[p];if(!s){if(curR.innerHTML!==srvR.innerHTML)curR.innerHTML=srvR.innerHTML;return}syncEl(c,s,obp[p]);syncText(c,s)}syncText(curR,srvR)}function connect(){ws=new WebSocket(${wsUrl});ws.onmessage=function(e){var d=JSON.parse(e.data);if(d.type==='hmr:libraries-update'){location.reload()}else if(d.type==='hmr:update'||d.type==='hmr:cms-update'||d.type==='hmr:colors-update'||d.type==='hmr:variables-update')hotReload()};ws.onclose=function(){clearTimeout(timer);timer=setTimeout(connect,1000)}}function hotReload(){var g=++gen;var sx=window.scrollX,sy=window.scrollY;fetch(location.href,{cache:'no-store'}).then(function(r){return r.text()}).then(function(html){if(g!==gen)return;var p=new DOMParser();var d=p.parseFromString(html,'text/html');var or=document.getElementById('root'),nr=d.getElementById('root');if(or&&nr)smartUpdate(or,nr,lastSrvRoot);if(nr)lastSrvRoot=nr.cloneNode(true);var os=document.getElementById('meno-styles'),ns=d.getElementById('meno-styles');if(os&&ns&&os.textContent!==ns.textContent)os.parentNode.replaceChild(ns.cloneNode(true),os);var nh=d.documentElement;if(nh){var nl=nh.getAttribute('lang')||'en',nt=nh.getAttribute('theme')||'light';if(document.documentElement.getAttribute('lang')!==nl)document.documentElement.setAttribute('lang',nl);if(document.documentElement.getAttribute('theme')!==nt)document.documentElement.setAttribute('theme',nt)}var ocms=document.querySelectorAll('script[id^="meno-cms-"]'),ncms=d.querySelectorAll('script[id^="meno-cms-"]');var ock=JSON.stringify(Array.prototype.map.call(ocms,function(s){return [s.id,s.textContent]}));var nck=JSON.stringify(Array.prototype.map.call(ncms,function(s){return [s.id,s.textContent]}));if(ock!==nck){ocms.forEach(function(s){s.remove()});ncms.forEach(function(s){var c=document.createElement('script');c.type=s.type;c.id=s.id;c.textContent=s.textContent;document.head.appendChild(c)})}window.__menoHotReload=true;var olib=document.querySelectorAll('body > script[src^="/libraries/"]'),nlib=d.querySelectorAll('body > script[src^="/libraries/"]');var olk=JSON.stringify(Array.prototype.map.call(olib,function(s){return strip(s.getAttribute('src'))}).sort());var nlk=JSON.stringify(Array.prototype.map.call(nlib,function(s){return strip(s.getAttribute('src'))}).sort());if(olk!==nlk){olib.forEach(function(o){o.remove()});nlib.forEach(function(n){var src=n.getAttribute('src');var ls=document.createElement('script');ls.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();document.body.appendChild(ls)})}var oscr=document.querySelector('script[src^="/_scripts/"]'),nscr=d.querySelector('script[src^="/_scripts/"]');var oss=oscr?strip(oscr.getAttribute('src')):'',nss=nscr?strip(nscr.getAttribute('src')):'';if(oss===nss){window.scrollTo(sx,sy)}else{if(oscr)oscr.remove();if(nscr){var src=nscr.getAttribute('src');var s=document.createElement('script');s.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();s.onload=function(){document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)};s.onerror=function(){window.scrollTo(sx,sy)};document.body.appendChild(s)}else{document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)}}}).catch(function(){location.reload()})}var iR=document.getElementById('root');if(iR)lastSrvRoot=iR.cloneNode(true);connect()})()</script>`
+    ? `<script${nonceAttr}>(function(){var ws,timer,gen=0,lastSrvRoot=null;function strip(s){return s?s.replace(/[?&]_r=\\d+/,''):''}function classList(el){return (el.getAttribute('class')||'').split(/\\s+/).filter(Boolean)}function syncEl(cur,srv,old){var cc=classList(cur),sc=classList(srv),oc=old?new Set(classList(old)):new Set();var rt=cc.filter(function(c){return !oc.has(c)});var seen=new Set(),fin=[];sc.concat(rt).forEach(function(c){if(!seen.has(c)){seen.add(c);fin.push(c)}});var fs=fin.join(' ');if((cur.getAttribute('class')||'')!==fs){if(fs)cur.setAttribute('class',fs);else cur.removeAttribute('class')}for(var i=0;i<srv.attributes.length;i++){var a=srv.attributes[i];if(a.name==='class')continue;if(cur.getAttribute(a.name)!==a.value)cur.setAttribute(a.name,a.value)}if(old){for(var i=0;i<old.attributes.length;i++){var a=old.attributes[i];if(a.name==='class')continue;if(!srv.hasAttribute(a.name)&&cur.hasAttribute(a.name))cur.removeAttribute(a.name)}}}function syncText(cur,srv){var cc=cur.childNodes,sc=srv.childNodes;for(var i=0;i<sc.length;i++){var s=sc[i],c=cc[i];if(s.nodeType===3&&c&&c.nodeType===3){if(c.textContent!==s.textContent)c.textContent=s.textContent}}}function smartUpdate(curR,srvR,oldR){var ce=curR.querySelectorAll('[data-element-path]'),se=srvR.querySelectorAll('[data-element-path]');if(ce.length!==se.length){if(curR.innerHTML!==srvR.innerHTML)curR.innerHTML=srvR.innerHTML;return}var sbp={};for(var i=0;i<se.length;i++)sbp[se[i].getAttribute('data-element-path')]=se[i];var obp={};if(oldR){var oe=oldR.querySelectorAll('[data-element-path]');for(var i=0;i<oe.length;i++)obp[oe[i].getAttribute('data-element-path')]=oe[i]}for(var i=0;i<ce.length;i++){var c=ce[i],p=c.getAttribute('data-element-path'),s=sbp[p];if(!s){if(curR.innerHTML!==srvR.innerHTML)curR.innerHTML=srvR.innerHTML;return}syncEl(c,s,obp[p]);syncText(c,s)}syncText(curR,srvR)}function connect(){ws=new WebSocket(${wsUrl});ws.onmessage=function(e){var d=JSON.parse(e.data);if(d.type==='hmr:libraries-update'){location.reload()}else if(d.type==='hmr:update'||d.type==='hmr:cms-update'||d.type==='hmr:colors-update'||d.type==='hmr:variables-update')hotReload()};ws.onclose=function(){clearTimeout(timer);timer=setTimeout(connect,1000)}}function hotReload(){var g=++gen;var sx=window.scrollX,sy=window.scrollY;fetch(location.href,{cache:'no-store'}).then(function(r){return r.text()}).then(function(html){if(g!==gen)return;var p=new DOMParser();var d=p.parseFromString(html,'text/html');var or=document.getElementById('root'),nr=d.getElementById('root');if(or&&nr)smartUpdate(or,nr,lastSrvRoot);if(nr)lastSrvRoot=nr.cloneNode(true);var os=document.getElementById('meno-styles'),ns=d.getElementById('meno-styles');if(os&&ns&&os.textContent!==ns.textContent)os.parentNode.replaceChild(ns.cloneNode(true),os);var nh=d.documentElement;if(nh){var nl=nh.getAttribute('lang')||'en',nt=nh.getAttribute('theme')||'light';if(document.documentElement.getAttribute('lang')!==nl)document.documentElement.setAttribute('lang',nl);if(document.documentElement.getAttribute('theme')!==nt)document.documentElement.setAttribute('theme',nt)}var ocms=document.querySelectorAll('script[id^="meno-cms-"]'),ncms=d.querySelectorAll('script[id^="meno-cms-"]');var ock=JSON.stringify(Array.prototype.map.call(ocms,function(s){return [s.id,s.textContent]}));var nck=JSON.stringify(Array.prototype.map.call(ncms,function(s){return [s.id,s.textContent]}));if(ock!==nck){ocms.forEach(function(s){s.remove()});ncms.forEach(function(s){var c=document.createElement('script');c.type=s.type;c.id=s.id;c.textContent=s.textContent;document.head.appendChild(c)})}window.__menoHotReload=true;var olib=document.querySelectorAll('body > script[src^="/libraries/"]'),nlib=d.querySelectorAll('body > script[src^="/libraries/"]');var olk=JSON.stringify(Array.prototype.map.call(olib,function(s){return strip(s.getAttribute('src'))}).sort());var nlk=JSON.stringify(Array.prototype.map.call(nlib,function(s){return strip(s.getAttribute('src'))}).sort());if(olk!==nlk){olib.forEach(function(o){o.remove()});nlib.forEach(function(n){var src=n.getAttribute('src');var ls=document.createElement('script');ls.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();document.body.appendChild(ls)})}var oscr=document.querySelector('script[src^="/_scripts/"]'),nscr=d.querySelector('script[src^="/_scripts/"]');var oss=oscr?strip(oscr.getAttribute('src')):'',nss=nscr?strip(nscr.getAttribute('src')):'';if(oss===nss){window.scrollTo(sx,sy)}else{if(oscr)oscr.remove();if(nscr){var src=nscr.getAttribute('src');var s=document.createElement('script');s.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();s.onload=function(){document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)};s.onerror=function(){window.scrollTo(sx,sy)};document.body.appendChild(s)}else{document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)}}}).catch(function(){location.reload()})}var iR=document.getElementById('root');if(iR)lastSrvRoot=iR.cloneNode(true);connect()})()</script>`
     : '';
 
   // Scroll position handlers for preview mode iframe switching
   const scrollHandlerScript = injectLiveReload
-    ? `<script>(function(){window.addEventListener('message',function(e){if(e.data.type==='GET_SCROLL_POSITION'){window.parent.postMessage({type:'SCROLL_POSITION_RESPONSE',scrollX:window.scrollX,scrollY:window.scrollY},'*')}else if(e.data.type==='SET_SCROLL_POSITION'){window.scrollTo(e.data.scrollX,e.data.scrollY)}})})()</script>`
+    ? `<script${nonceAttr}>(function(){window.addEventListener('message',function(e){if(e.data.type==='GET_SCROLL_POSITION'){window.parent.postMessage({type:'SCROLL_POSITION_RESPONSE',scrollX:window.scrollX,scrollY:window.scrollY},'*')}else if(e.data.type==='SET_SCROLL_POSITION'){window.scrollTo(e.data.scrollX,e.data.scrollY)}})})()</script>`
     : '';
 
   // In production, output minified CSS on single line; in dev, preserve formatting

package/lib/server/ssr/liveReloadIntegration.test.ts

@@ -17,7 +17,9 @@ function loadLiveReloadScript(): string {
   const src = fs.readFileSync(path.join(import.meta.dir, 'htmlGenerator.ts'), 'utf8');
   const idx = src.indexOf('const liveReloadScript');
   if (idx === -1) throw new Error('liveReloadScript not found');
-  const match = src.slice(idx).match(/<script>([\s\S]*?)<\/script>/);
+  // The live-reload script tag may carry a per-request CSP nonce attribute
+  // — `<script${nonceAttr}>` in the source. Match either form.
+  const match = src.slice(idx).match(/<script(?:\$\{nonceAttr\})?>([\s\S]*?)<\/script>/);
   if (!match) throw new Error('liveReloadScript script tag not found');
   // The script lives inside a TS template literal; reverse the template's
   // runtime transformations so the executable form matches what a browser sees.

package/lib/server/ssr/metaTagGenerator.ts

@@ -40,12 +40,20 @@ export function extractPageMeta(pageData: JSONPage): PageMeta {
 }
 
 /**
- * Options for hreflang tag generation
+ * Site-wide social configuration
  */
-export interface HreflangOptions {
+export interface SocialOptions {
+  twitterHandle?: string;
+}
+
+/**
+ * Options for meta tag generation (hreflang + social)
+ */
+export interface MetaTagOptions {
   slugMappings?: SlugMap[];
   pagePath?: string;
   baseUrl?: string;
+  social?: SocialOptions;
 }
 
 /**
@@ -58,7 +66,7 @@ export function generateMetaTags(
   url: string = '',
   locale: string = 'en',
   config: I18nConfig = DEFAULT_I18N_CONFIG,
-  hreflangOptions?: HreflangOptions
+  options?: MetaTagOptions
 ): string {
   const tags: string[] = [];
 
@@ -109,14 +117,36 @@ export function generateMetaTags(
     tags.push(`<meta property="og:url" content="${escapeHtml(url)}" />`);
   }
 
+  // Twitter Card tags - Twitter falls back to og:image/og:title/og:description when twitter:* is absent
+  const hasAnyMeta = title || description || ogImage || ogTitle || ogDescription;
+  if (hasAnyMeta) {
+    const cardType = ogImage ? 'summary_large_image' : 'summary';
+    tags.push(`<meta name="twitter:card" content="${cardType}" />`);
+  }
+
+  if (ogTitle) {
+    tags.push(`<meta name="twitter:title" content="${escapeHtml(ogTitle)}" />`);
+  }
+
+  if (ogDescription) {
+    tags.push(`<meta name="twitter:description" content="${escapeHtml(ogDescription)}" />`);
+  }
+
+  const rawHandle = options?.social?.twitterHandle?.trim();
+  if (rawHandle) {
+    const handle = rawHandle.startsWith('@') ? rawHandle : `@${rawHandle}`;
+    tags.push(`<meta name="twitter:site" content="${escapeHtml(handle)}" />`);
+    tags.push(`<meta name="twitter:creator" content="${escapeHtml(handle)}" />`);
+  }
+
   // Canonical URL
   if (url) {
     tags.push(`<link rel="canonical" href="${escapeHtml(url)}" />`);
   }
 
   // Hreflang tags for multilingual pages
-  if (hreflangOptions?.slugMappings && hreflangOptions.slugMappings.length > 0 && config.locales.length > 1) {
-    const { slugMappings, pagePath = '/', baseUrl = '' } = hreflangOptions;
+  if (options?.slugMappings && options.slugMappings.length > 0 && config.locales.length > 1) {
+    const { slugMappings, pagePath = '/', baseUrl = '' } = options;
     const slugIndex = buildSlugIndex(slugMappings);
     const localeLinks = getLocaleLinks(pagePath, locale, config, slugIndex);
 

package/lib/server/ssr/ssrRenderer.test.ts

@@ -441,6 +441,82 @@ describe('ssrRenderer', () => {
     });
   });
 
+  // -----------------------------------------------------------------------
+  // 6b. _i18n value resolution on node children + attributes
+  // -----------------------------------------------------------------------
+  describe('buildComponentHTML - _i18n on children and attributes', () => {
+    const en = { _i18n: true, en: 'Hello', pl: 'Cześć' };
+    const i18nConfig = {
+      defaultLocale: 'en',
+      locales: [
+        { code: 'en', name: 'EN', nativeName: 'English', langTag: 'en-US' },
+        { code: 'pl', name: 'PL', nativeName: 'Polski', langTag: 'pl-PL' },
+      ],
+    };
+
+    test('resolves _i18n object as direct children for the default locale', async () => {
+      const node = { type: 'node', tag: 'h1', children: en };
+      const html = await render(node, { i18nConfig });
+      expect(html).toContain('Hello');
+      expect(html).not.toContain('Cześć');
+    });
+
+    test('resolves _i18n object as direct children for an explicit locale', async () => {
+      const node = { type: 'node', tag: 'h1', children: en };
+      const html = await render(node, { locale: 'pl', i18nConfig });
+      expect(html).toContain('Cześć');
+      expect(html).not.toContain('Hello');
+    });
+
+    test('resolves _i18n objects inside an array of children, preserving siblings', async () => {
+      const node = {
+        type: 'node',
+        tag: 'p',
+        children: [
+          en,
+          ' literal ',
+          { type: 'node', tag: 'span', children: 'static' },
+        ],
+      };
+      const html = await render(node, { i18nConfig });
+      expect(html).toContain('Hello');
+      expect(html).toContain(' literal ');
+      expect(html).toContain('<span');
+      expect(html).toContain('static');
+    });
+
+    test('resolves _i18n object on attribute values', async () => {
+      const node = {
+        type: 'node',
+        tag: 'img',
+        attributes: {
+          src: '/x.png',
+          alt: { _i18n: true, en: 'Photo', pl: 'Zdjęcie' },
+        },
+      };
+      const html = await render(node, { locale: 'pl', i18nConfig });
+      expect(html).toContain('alt="Zdjęcie"');
+    });
+
+    test('falls back to defaultLocale when the active locale key is missing', async () => {
+      const valueWithoutDe = { _i18n: true, en: 'Hello', pl: 'Cześć' };
+      const node = { type: 'node', tag: 'h1', children: valueWithoutDe };
+      const html = await render(node, { locale: 'de', i18nConfig });
+      // resolveTranslation falls back to defaultLocale (en)
+      expect(html).toContain('Hello');
+    });
+
+    test('precedence: _i18n: true wins over a stray type/tag on the same object', async () => {
+      // If someone accidentally writes both _i18n and type on the same object,
+      // i18n wins — the renderer treats it as a localized string, not a node.
+      const ambiguous = { _i18n: true, type: 'node', tag: 'div', en: 'X', pl: 'Y' };
+      const node = { type: 'node', tag: 'h1', children: ambiguous };
+      const html = await render(node, { locale: 'pl', i18nConfig });
+      expect(html).toContain('Y');
+      expect(html).not.toContain('<div');
+    });
+  });
+
   // -----------------------------------------------------------------------
   // 7. Link nodes
   // -----------------------------------------------------------------------
@@ -4060,6 +4136,188 @@ describe('ssrRenderer', () => {
     });
   });
 
+  // ---------------------------------------------------------------------------
+  // List with sourceType: 'prop' placed inside another component's slot
+  // ---------------------------------------------------------------------------
+  describe('buildComponentHTML - prop-source list inside slotted component', () => {
+    test('list with bare prop-name source resolves against host props when inside a slot', async () => {
+      // Section: a simple slot host (mirrors the user's Section component)
+      const Section: ComponentDefinition = {
+        component: {
+          interface: {
+            theme: { type: 'string', default: 'blue' },
+          },
+          structure: {
+            type: 'node',
+            tag: 'section',
+            children: [
+              { type: 'slot' },
+            ],
+          },
+        },
+      };
+
+      // Host: defines `testimonials`, renders a Section whose slot contains
+      // a list bound to the host's `testimonials` prop with a bare name.
+      const Host: ComponentDefinition = {
+        component: {
+          interface: {
+            testimonials: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'node',
+            tag: 'div',
+            children: [
+              {
+                type: 'component',
+                component: 'Section',
+                props: { theme: 'blue' },
+                children: [
+                  {
+                    type: 'list',
+                    sourceType: 'prop',
+                    source: 'testimonials',
+                    children: [
+                      { type: 'node', tag: 'p', children: '{{item.name}}' },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Host',
+        props: {
+          testimonials: [
+            { name: 'Alice' },
+            { name: 'Bob' },
+            { name: 'Carol' },
+          ],
+        },
+      };
+
+      const html = await render(node, { globalComponents: { Host, Section } });
+      expect(html).toContain('<section');
+      expect(html).toContain('Alice');
+      expect(html).toContain('Bob');
+      expect(html).toContain('Carol');
+    });
+
+    test('list with {{template}} source also resolves inside a slot', async () => {
+      const Section: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: {
+            type: 'node',
+            tag: 'section',
+            children: [{ type: 'slot' }],
+          },
+        },
+      };
+
+      const Host: ComponentDefinition = {
+        component: {
+          interface: {
+            testimonials: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'component',
+            component: 'Section',
+            children: [
+              {
+                type: 'list',
+                sourceType: 'prop',
+                source: '{{testimonials}}',
+                children: [
+                  { type: 'node', tag: 'p', children: '{{item.name}}' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Host',
+        props: { testimonials: [{ name: 'Dana' }] },
+      };
+
+      const html = await render(node, { globalComponents: { Host, Section } });
+      expect(html).toContain('Dana');
+    });
+
+    test('bare prop-name source still works when list is in component own structure (no slot)', async () => {
+      const Direct: ComponentDefinition = {
+        component: {
+          interface: {
+            items: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'list',
+            sourceType: 'prop',
+            source: 'items',
+            children: [
+              { type: 'node', tag: 'li', children: '{{item.label}}' },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Direct',
+        props: { items: [{ label: 'Eve' }, { label: 'Frank' }] },
+      };
+
+      const html = await render(node, { globalComponents: { Direct } });
+      expect(html).toContain('Eve');
+      expect(html).toContain('Frank');
+    });
+
+    test('list source stays a string and renders empty when host has no matching prop', async () => {
+      const Section: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: {
+            type: 'node',
+            tag: 'section',
+            children: [{ type: 'slot' }],
+          },
+        },
+      };
+
+      const Host: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: {
+            type: 'component',
+            component: 'Section',
+            children: [
+              {
+                type: 'list',
+                sourceType: 'prop',
+                source: 'missing',
+                children: [
+                  { type: 'node', tag: 'p', children: '{{item}}' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const node = { type: 'component', component: 'Host' };
+      const html = await render(node, { globalComponents: { Host, Section } });
+      // No items - list renders empty
+      expect(html).not.toContain('<p');
+    });
+  });
+
   describe('CMS link localization', () => {
     const i18nConfig = {
       defaultLocale: 'en',

package/lib/server/ssr/ssrRenderer.ts

@@ -72,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';
 
@@ -968,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 '';
@@ -1027,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'];
@@ -1120,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'];
@@ -1201,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}}")
@@ -1826,7 +1867,7 @@ 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}${editorAttrs(ctx)}>${linksHTML}</div>`;
@@ -1909,6 +1950,7 @@ export async function renderPageSSR(
     slugMappings,
     pagePath,
     baseUrl,
+    social: configService.getSocial(),
   });
 
   // Resolve title for use in HTML template