meno-core 1.0.48 → 1.0.49

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

@@ -28,6 +28,9 @@ const mockConfigService = {
   load: mock(async () => {}),
   getLibraries: mock(() => undefined),
   getResponsiveScales: mock(() => ({ enabled: false, baseReference: 16 })),
+  getCustomCode: mock(() => ({})),
+  getShowMenoBadge: mock(() => false),
+  getRemConversion: mock(() => ({ enabled: false, baseFontSize: 16 })),
 };
 
 mock.module('../services/configService', () => ({
@@ -673,6 +676,116 @@ describe('generateSSRHTML', () => {
       const result = (await generateSSRHTML(minimalPage)) as string;
       expect(result).not.toContain('GET_SCROLL_POSITION');
     });
+
+    // Content-aware hotReload: each section should only be rebuilt when its
+    // serialized content actually differs from the freshly-fetched HTML. The
+    // `/_scripts/{hash}.js` URL is content-addressed, so an unchanged hash is
+    // the explicit signal that user JS has not changed — in that case the
+    // script tag is left in place and DOMContentLoaded is NOT re-dispatched,
+    // which is what preserves runtime JS state (e.g. open dropdowns) across
+    // pure style edits in the editor.
+    describe('hotReload is content-aware', () => {
+      test('compares meno-styles textContent before replacing', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        expect(result).toContain('os.textContent!==ns.textContent');
+      });
+
+      test('compares /_scripts/ src (cache-buster stripped) before reloading', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // strip() removes ?_r=... so reloads triggered only by content-hash change
+        expect(result).toContain('strip(oscr.getAttribute');
+        expect(result).toContain('strip(nscr.getAttribute');
+        expect(result).toContain('oss===nss');
+      });
+
+      test('falls back to innerHTML replace only on structural changes', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // smartUpdate's fallback branch (different element counts or
+        // unmatched data-element-path) is the only place innerHTML is touched.
+        expect(result).toContain('curR.innerHTML!==srvR.innerHTML');
+      });
+
+      test('patches #root in place via smartUpdate (not innerHTML replace)', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // smartUpdate is what runs on every hot reload; it walks the tree by
+        // data-element-path and updates attrs in place so event handlers and
+        // DOM identity survive.
+        expect(result).toContain('smartUpdate(or,nr,lastSrvRoot)');
+        expect(result).toContain('querySelectorAll(\'[data-element-path]\')');
+      });
+
+      test('preserves runtime-added classes against cached server snapshot', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // Runtime classes = current classes that weren't in the previous
+        // server snapshot. They get re-applied on top of the new server class
+        // list so JS-controlled state (e.g. `nav-dropdown-open`) survives.
+        expect(result).toContain('cc.filter(function(c){return !oc.has(c)})');
+      });
+
+      test('caches root snapshot at script init for first-HMR class diff', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // Without this seed the very first HMR has no oldRoot to diff against,
+        // so any class JS added before the first edit would be wiped.
+        expect(result).toContain("var iR=document.getElementById('root');if(iR)lastSrvRoot=iR.cloneNode(true)");
+      });
+
+      test('preserves server-side attribute removals (does not treat them as runtime)', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // For non-class attrs: only remove from current DOM if the attr was
+        // present in the previous server snapshot — that way we don't strip
+        // runtime-added attrs (e.g. `data-nav-dropdown-initialized`).
+        expect(result).toContain('!srv.hasAttribute(a.name)&&cur.hasAttribute(a.name)');
+      });
+
+      test('compares CMS inline scripts before replacing', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        expect(result).toContain('script[id^="meno-cms-"]');
+        expect(result).toContain('ock!==nck');
+      });
+
+      test('compares /libraries/ script srcs before replacing', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        expect(result).toContain('script[src^="/libraries/"]');
+        expect(result).toContain('olk!==nlk');
+      });
+
+      test('does NOT unconditionally remove and re-append /_scripts/ tag', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // Must not contain the old unconditional pattern where oscr is removed
+        // outside of a hash-mismatch branch.
+        expect(result).not.toContain('if(nscr){var src=nscr.getAttribute(\'src\');if(oscr)oscr.remove()');
+      });
+    });
   });
 
   describe('Options object vs legacy positional args', () => {

package/lib/server/ssr/htmlGenerator.ts

@@ -47,8 +47,16 @@ function minifyCSS(code: string): string {
   return code
     // Remove CSS comments
     .replace(/\/\*[\s\S]*?\*\//g, '')
-    // Remove whitespace around special characters
-    .replace(/\s*([{};:,>~+])\s*/g, '$1')
+    // Remove whitespace around block / declaration delimiters and selector
+    // combinators. We deliberately exclude `+` and `-` from this set: they
+    // are selector combinators (e.g. `a + b`, but `~` is also rare; siblings)
+    // AND arithmetic operators inside `calc()` / `clamp()` / `min()` / `max()`,
+    // where they REQUIRE surrounding spaces. Stripping there produces invalid
+    // CSS like `padding-top: clamp(.5*16px,((.5 - .5)/(90 - 20))*16px+(...))`,
+    // which the browser silently drops, collapsing paddings/margins to 0.
+    // The cost of leaving spaces around `+` selectors is a few extra bytes;
+    // the cost of stripping them is broken layout.
+    .replace(/\s*([{};:,>~])\s*/g, '$1')
     // Collapse multiple spaces/newlines into single space
     .replace(/\s+/g, ' ')
     // Remove space after opening brace
@@ -126,6 +134,15 @@ export interface GenerateSSRHTMLOptions {
    * When true, adds a WebSocket client that reloads the page on HMR messages.
    */
   injectLiveReload?: boolean;
+  /**
+   * Emit selection-tracking 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 the SSR DOM.
+   * Should ONLY be true when the request originates from the editor preview iframe
+   * (the studio's /__static__/ proxy sends an `x-meno-editor` header).
+   * Direct browser access to the SSR preview server must produce clean output.
+   */
+  injectEditorAttrs?: boolean;
   /** Whether this is the visual editor (studio). Affects library filtering. */
   isEditor?: boolean;
   /** Actual bound server port for live reload WS (connects directly to SSR server) */
@@ -214,11 +231,16 @@ export async function generateSSRHTML(
     pageCustomCode,
     clientDataCollections,
     injectLiveReload = false,
+    injectEditorAttrs = false,
     isEditor = false,
     isProductionBuild = false,
     serverPort,
   } = options;
-  const rendered = await renderPageSSR(pageData, components, path, base, loc, undefined, slugs, cms, cmsServ, isProductionBuild);
+  // 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).
+  // Direct hits to the SSR preview server (e.g., http://localhost:8082/) get clean output.
+  const rendered = await renderPageSSR(pageData, components, path, base, loc, undefined, slugs, cms, cmsServ, isProductionBuild, injectEditorAttrs);
 
   // Auto-inject data for nested collections (detected during SSR)
   // This enables client-side hydration for nested cms-list placeholders
@@ -489,8 +511,33 @@ picture {
   const wsUrl = serverPort
     ? `'ws://localhost:${serverPort}/hmr'`
     : `location.origin.replace('http','ws')+'/hmr'`;
+  // True hot reload for the studio's static preview iframe.
+  //
+  // hotReload() is content-aware on every level — sections are rebuilt only
+  // when their serialized content actually differs from the freshly fetched
+  // HTML, and #root is patched in place via smartUpdate() instead of being
+  // wholesale-replaced. That means:
+  //   * DOM elements keep their identity across edits, so attached event
+  //     listeners (e.g. NavDropdown's click handler) survive.
+  //   * Classes/attributes that user JS added at runtime (e.g.
+  //     `nav-dropdown-open`) are preserved by diffing the live DOM against
+  //     a cached snapshot of the previous server HTML — anything in current
+  //     that wasn't in that snapshot is treated as a runtime addition and
+  //     re-applied on top of the new server attrs.
+  //   * The `/_scripts/{hash}.js` URL is content-addressed (see
+  //     scriptCache.hashContent), so an unchanged hash means user JS hasn't
+  //     changed — we skip both the script reload and the DOMContentLoaded
+  //     re-dispatch, leaving JS module state (closures, isOpen flags, etc.)
+  //     intact.
+  //
+  // Element identity for the smartUpdate() walk relies on
+  // `data-element-path`, which the SSR pipeline emits on every element when
+  // the request comes through the studio's `/__static__/` proxy (which sets
+  // `x-meno-editor: 1`). On structural changes that smartUpdate can't safely
+  // 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;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');var nr=d.getElementById('root');if(or&&nr)or.innerHTML=nr.innerHTML;var os=document.getElementById('meno-styles');var ns=d.getElementById('meno-styles');if(os&&ns){os.parentNode.replaceChild(ns.cloneNode(true),os)}var nh=d.documentElement;if(nh){document.documentElement.setAttribute('lang',nh.getAttribute('lang')||'en');document.documentElement.setAttribute('theme',nh.getAttribute('theme')||'light')}document.querySelectorAll('script[id^="meno-cms-"]').forEach(function(s){s.remove()});d.querySelectorAll('script[id^="meno-cms-"]').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;document.querySelectorAll('body > script[src^="/libraries/"]').forEach(function(o){o.remove()});d.querySelectorAll('body > script[src^="/libraries/"]').forEach(function(n){var ls=document.createElement('script');ls.src=n.getAttribute('src')+(n.getAttribute('src').indexOf('?')>-1?'&':'?')+'_r='+Date.now();document.body.appendChild(ls)});var oscr=document.querySelector('script[src^="/_scripts/"]');var nscr=d.querySelector('script[src^="/_scripts/"]');if(nscr){var src=nscr.getAttribute('src');if(oscr)oscr.remove();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{if(oscr)oscr.remove();document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)}}).catch(function(){location.reload()})}connect()})()</script>`
+    ? `<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>`
     : '';
 
   // Scroll position handlers for preview mode iframe switching

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

@@ -0,0 +1,209 @@
+/**
+ * Behavioural tests for the inlined live-reload IIFE in htmlGenerator.ts.
+ *
+ * These tests load the script source out of the file, undo the TS template
+ * literal escaping (so `\\s+` reads back as `\s+`), and execute the IIFE inside
+ * a happy-dom window with stubbed WebSocket / fetch / location. They verify the
+ * end-to-end hotReload() behaviour rather than just asserting on substrings of
+ * the generated HTML.
+ */
+
+import { test, expect, describe } from 'bun:test';
+import { Window } from 'happy-dom';
+import * as fs from 'fs';
+import * as path from 'path';
+
+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>/);
+  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.
+  return match[1]
+    .split('\\\\').join('\\')
+    .replace(/\$\{wsUrl\}/g, "'ws://localhost:3000/hmr'");
+}
+
+interface Harness {
+  window: Window;
+  document: Document;
+  capturedHandler: ((e: { data: string }) => void) | null;
+  setFetch(fn: () => Promise<{ text: () => Promise<string> }>): void;
+  triggerHmr(): void;
+  flush(): Promise<void>;
+  reloadCalls: number;
+  dispatchedDOMContentLoaded: number;
+}
+
+function setupHarness(initialBodyHtml: string): Harness {
+  const script = loadLiveReloadScript();
+  const window = new Window({ url: 'http://localhost/' });
+  const document = window.document as unknown as Document;
+  document.documentElement.setAttribute('lang', 'en');
+  document.documentElement.setAttribute('theme', 'light');
+  (document.body as unknown as HTMLElement).innerHTML = initialBodyHtml;
+
+  const harness: Harness = {
+    window,
+    document,
+    capturedHandler: null,
+    setFetch: (fn) => { (window as any).fetch = fn; },
+    triggerHmr: () => {
+      if (!harness.capturedHandler) throw new Error('WebSocket handler not captured');
+      harness.capturedHandler({ data: JSON.stringify({ type: 'hmr:update' }) });
+    },
+    flush: () => new Promise(r => setTimeout(r, 100)),
+    reloadCalls: 0,
+    dispatchedDOMContentLoaded: 0,
+  };
+
+  (window as any).WebSocket = class {
+    constructor() {}
+    set onmessage(fn: any) { harness.capturedHandler = fn; }
+    get onmessage() { return harness.capturedHandler; }
+    onclose: any = null;
+  };
+
+  // Track dispatched DOMContentLoaded (the IIFE fires this on document)
+  document.addEventListener('DOMContentLoaded', () => { harness.dispatchedDOMContentLoaded += 1; });
+
+  const dynamicFetch = (...args: any[]) => (window as any).fetch(...args);
+  const fn = new Function(
+    'document', 'WebSocket', 'fetch', 'setTimeout', 'clearTimeout',
+    'DOMParser', 'Event', 'window', 'location',
+    script
+  );
+  fn(
+    document, (window as any).WebSocket, dynamicFetch,
+    setTimeout, clearTimeout,
+    (window as any).DOMParser, (window as any).Event, window,
+    {
+      href: 'http://localhost/',
+      reload: () => { harness.reloadCalls += 1; },
+    }
+  );
+
+  return harness;
+}
+
+function makeServerHtml(rootInner: string, scriptHash = 'abc'): string {
+  return [
+    '<!DOCTYPE html><html lang="en" theme="light"><head></head><body>',
+    '<div id="root">', rootInner, '</div>',
+    '<style id="meno-styles">.dummy{color:red}</style>',
+    `<script src="/_scripts/${scriptHash}.js" defer></script>`,
+    '</body></html>',
+  ].join('');
+}
+
+describe('live reload IIFE', () => {
+  test('preserves dropdown DOM identity, runtime classes, and runtime attrs across a style edit', async () => {
+    const initialRootInner = `
+      <header data-element-path="0">
+        <div data-element-path="0,0" class="nav-dropdown t-bg-red" data-nav-dropdown="container">
+          <span data-element-path="0,0,0">Menu</span>
+          <ul data-element-path="0,0,1" data-nav-dropdown="menu" class="nav-dropdown-menu">
+            <li data-element-path="0,0,1,0">Item 1</li>
+          </ul>
+        </div>
+      </header>
+    `;
+    const harness = setupHarness(`<div id="root">${initialRootInner}</div><style id="meno-styles">.t-bg-red{background:red}</style><script src="/_scripts/v1.js" defer></script>`);
+
+    // User opens dropdown via JS — adds runtime class + initialization marker.
+    const container = harness.document.querySelector('[data-element-path="0,0"]')!;
+    container.classList.add('nav-dropdown-open');
+    container.setAttribute('data-nav-dropdown-initialized', 'true');
+    const menu = harness.document.querySelector('[data-element-path="0,0,1"]')!;
+    menu.classList.add('nav-dropdown-menu-visible');
+
+    const beforeContainerRef = container;
+    const beforeMenuRef = menu;
+
+    // Editor edit: t-bg-red -> t-bg-blue. Same /_scripts/ hash (user JS unchanged).
+    const newRootInner = `<header data-element-path="0"><div data-element-path="0,0" class="nav-dropdown t-bg-blue" data-nav-dropdown="container"><span data-element-path="0,0,0">Menu</span><ul data-element-path="0,0,1" data-nav-dropdown="menu" class="nav-dropdown-menu"><li data-element-path="0,0,1,0">Item 1</li></ul></div></header>`;
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(makeServerHtml(newRootInner, 'v1')) }));
+
+    harness.triggerHmr();
+    await harness.flush();
+
+    const containerAfter = harness.document.querySelector('[data-element-path="0,0"]')!;
+    const menuAfter = harness.document.querySelector('[data-element-path="0,0,1"]')!;
+
+    expect(containerAfter).toBe(beforeContainerRef);
+    expect(containerAfter.classList.contains('nav-dropdown-open')).toBe(true);
+    expect(containerAfter.getAttribute('data-nav-dropdown-initialized')).toBe('true');
+    expect(containerAfter.classList.contains('t-bg-blue')).toBe(true);
+    expect(containerAfter.classList.contains('t-bg-red')).toBe(false);
+    expect(menuAfter).toBe(beforeMenuRef);
+    expect(menuAfter.classList.contains('nav-dropdown-menu-visible')).toBe(true);
+    // /_scripts/ hash unchanged → no DOMContentLoaded re-dispatch
+    expect(harness.dispatchedDOMContentLoaded).toBe(0);
+    expect(harness.reloadCalls).toBe(0);
+  });
+
+  test('re-dispatches DOMContentLoaded only when /_scripts/ hash changes', async () => {
+    const initialRootInner = `<header data-element-path="0"><span data-element-path="0,0">hi</span></header>`;
+    const harness = setupHarness(`<div id="root">${initialRootInner}</div><style id="meno-styles">.x{}</style><script src="/_scripts/v1.js" defer></script>`);
+
+    // Edit that changes user JS → new content-hash on /_scripts/
+    const newRootInner = `<header data-element-path="0"><span data-element-path="0,0">hi</span></header>`;
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(makeServerHtml(newRootInner, 'v2')) }));
+
+    harness.triggerHmr();
+    await harness.flush();
+    // Wait a beat for the dynamically-appended script's onload to (try to) fire.
+    await new Promise(r => setTimeout(r, 50));
+
+    // The hash changed, so the IIFE removed the old /_scripts/ tag and appended
+    // a new one. happy-dom's appended <script src> won't actually load over the
+    // network in a unit test, so onload doesn't fire and DOMContentLoaded isn't
+    // dispatched here. The behavioural guarantee we care about — that the IIFE
+    // *would* dispatch on load — is covered by the structural test in
+    // htmlGenerator.test.ts ("compares /_scripts/ src ... before reloading").
+    // This test asserts the negative side: the old script tag is gone and a
+    // new one was appended.
+    const scripts = Array.from(harness.document.querySelectorAll('script[src^="/_scripts/"]'));
+    expect(scripts.length).toBe(1);
+    expect(scripts[0].getAttribute('src') || '').toContain('/_scripts/v2.js');
+    expect(harness.reloadCalls).toBe(0);
+  });
+
+  test('falls back to innerHTML replace on structural changes (different element count)', async () => {
+    const initialRootInner = `<header data-element-path="0"><span data-element-path="0,0">a</span></header>`;
+    const harness = setupHarness(`<div id="root">${initialRootInner}</div><style id="meno-styles">.x{}</style><script src="/_scripts/v1.js" defer></script>`);
+
+    // New HTML has an additional element (different count of [data-element-path])
+    const newRootInner = `<header data-element-path="0"><span data-element-path="0,0">a</span><span data-element-path="0,1">b</span></header>`;
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(makeServerHtml(newRootInner, 'v1')) }));
+
+    harness.triggerHmr();
+    await harness.flush();
+
+    const root = harness.document.getElementById('root')!;
+    expect(root.querySelectorAll('[data-element-path]').length).toBe(3);
+    expect(root.querySelector('[data-element-path="0,1"]')?.textContent).toBe('b');
+    expect(harness.reloadCalls).toBe(0);
+  });
+
+  test('updates lang/theme only when they actually differ', async () => {
+    const initialRootInner = `<span data-element-path="0">hi</span>`;
+    const harness = setupHarness(`<div id="root">${initialRootInner}</div><style id="meno-styles">.x{}</style><script src="/_scripts/v1.js" defer></script>`);
+    const beforeLang = harness.document.documentElement.getAttribute('lang');
+
+    // Same lang/theme as initial document
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(makeServerHtml(initialRootInner, 'v1')) }));
+    harness.triggerHmr();
+    await harness.flush();
+    expect(harness.document.documentElement.getAttribute('lang')).toBe(beforeLang);
+
+    // Now change theme → should update
+    const themeChangedHtml = makeServerHtml(initialRootInner, 'v1').replace('theme="light"', 'theme="dark"');
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(themeChangedHtml) }));
+    harness.triggerHmr();
+    await harness.flush();
+    expect(harness.document.documentElement.getAttribute('theme')).toBe('dark');
+  });
+});