meno-core 1.0.52 → 1.0.53

package/lib/server/services/pageService.ts

@@ -147,6 +147,46 @@ export class PageService {
     this.pageCache.set(path, content, lineMap);
   }
 
+  /**
+   * Re-read a single page from disk via the provider and refresh the cache.
+   *
+   * Used by the file watcher for live reload. Provider-based (not a hardcoded
+   * JSON read), so it works for any format — the FileSystem provider returns the
+   * raw JSON and the Astro provider returns the parsed model serialized to JSON.
+   *
+   * @returns true if the cache changed (page updated or confirmed-deleted) and a
+   *   reload broadcast is warranted; false if the read failed transiently (e.g. a
+   *   partial mid-write or parse error), in which case the cache is left intact and
+   *   the next watcher event retries.
+   */
+  async reloadPageFromDisk(path: string): Promise<boolean> {
+    if (!this.provider) return false;
+
+    let content: string | null = null;
+    try {
+      content = await this.provider.get(path);
+    } catch {
+      // Transient (mid-write / partial .astro parse error) — keep the cache as-is.
+      return false;
+    }
+
+    if (content) {
+      this.pageCache.set(path, content, buildLineMap(content));
+      return true;
+    }
+
+    // No content: only drop from cache if the page is truly gone, not mid-write.
+    try {
+      if (!(await this.provider.exists(path))) {
+        this.pageCache.delete(path);
+        return true;
+      }
+    } catch {
+      /* leave cache intact */
+    }
+    return false;
+  }
+
   /**
    * Delete page from cache and optionally from storage
    *
@@ -230,6 +270,21 @@ export class PageService {
     return this.pageCache.getLineMap(path);
   }
 
+  /**
+   * Pages base directory — provider-aware (e.g. `src/pages` for astro projects),
+   * falling back to `projectPaths.pages()` when the provider doesn't expose
+   * `baseDir()` (or no provider is set). Used by the folder/move/rename ops that
+   * touch the filesystem directly.
+   */
+  private pagesBaseDir(): string {
+    return this.provider?.baseDir?.() ?? projectPaths.pages();
+  }
+
+  /** Page file extension (e.g. `.astro` for astro projects), defaulting to `.json`. */
+  private pageExt(): string {
+    return this.provider?.extension?.() ?? '.json';
+  }
+
   /**
    * Get all page folders
    *
@@ -238,7 +293,7 @@ export class PageService {
    * @returns Sorted array of folder names
    */
   getAllFolders(): string[] {
-    const pagesDir = projectPaths.pages();
+    const pagesDir = this.pagesBaseDir();
     if (!existsSync(pagesDir)) {
       return [];
     }
@@ -284,7 +339,7 @@ export class PageService {
       }
     }
 
-    const pagesDir = projectPaths.pages();
+    const pagesDir = this.pagesBaseDir();
     const folderPath = join(pagesDir, trimmed);
 
     if (existsSync(folderPath)) {
@@ -305,7 +360,8 @@ export class PageService {
    */
   async movePage(pagePath: string, newFolder: string): Promise<void> {
     const { rename } = await import('fs/promises');
-    const pagesDir = projectPaths.pages();
+    const pagesDir = this.pagesBaseDir();
+    const ext = this.pageExt();
 
     // Convert page path to file name: "/blog/post" -> "blog/post", "/" -> "index"
     const pageName = pagePath === '/' ? 'index' : pagePath.substring(1);
@@ -313,10 +369,10 @@ export class PageService {
     const slashIndex = pageName.lastIndexOf('/');
     const baseName = slashIndex >= 0 ? pageName.substring(slashIndex + 1) : pageName;
 
-    const sourceFile = join(pagesDir, `${pageName}.json`);
+    const sourceFile = join(pagesDir, `${pageName}${ext}`);
     const targetFile = newFolder
-      ? join(pagesDir, newFolder, `${baseName}.json`)
-      : join(pagesDir, `${baseName}.json`);
+      ? join(pagesDir, newFolder, `${baseName}${ext}`)
+      : join(pagesDir, `${baseName}${ext}`);
 
     // Create target directory if needed
     if (newFolder) {
@@ -359,6 +415,68 @@ export class PageService {
     }
   }
 
+  /**
+   * Rename a page (file rename + cache update).
+   *
+   * Renames the underlying .json file from `oldPath`'s filename to `newPath`'s
+   * filename, keeping the same folder. Updates the in-memory cache so the
+   * page is now keyed at `newPath`. Folder moves stay with `movePage()` —
+   * this is purely "change the URL slug of an existing page" for
+   * single-locale projects.
+   *
+   * @param oldPath - Current page path (e.g., "/about" or "/blog/post")
+   * @param newPath - New page path with same folder (e.g., "/about-us" or "/blog/new-slug")
+   * @throws {Error} If oldPath doesn't exist, newPath already exists, or paths
+   *   reference different folders.
+   */
+  async renamePage(oldPath: string, newPath: string): Promise<void> {
+    if (oldPath === newPath) return;
+    if (newPath === '/') {
+      throw new Error('Cannot rename a page to the index path');
+    }
+    if (!newPath.startsWith('/')) {
+      throw new Error('newPath must start with "/"');
+    }
+
+    const oldName = oldPath === '/' ? 'index' : oldPath.substring(1);
+    const newName = newPath.substring(1);
+
+    const oldSlash = oldName.lastIndexOf('/');
+    const newSlash = newName.lastIndexOf('/');
+    const oldFolder = oldSlash >= 0 ? oldName.substring(0, oldSlash) : '';
+    const newFolder = newSlash >= 0 ? newName.substring(0, newSlash) : '';
+    if (oldFolder !== newFolder) {
+      throw new Error('renamePage only changes the filename; use movePage to change folder');
+    }
+
+    const baseSegment = newSlash >= 0 ? newName.substring(newSlash + 1) : newName;
+    if (!/^[a-z0-9][a-z0-9-_]*$/.test(baseSegment)) {
+      throw new Error('Page slug can only contain lowercase letters, numbers, dashes, and underscores');
+    }
+
+    const { rename } = await import('fs/promises');
+    const pagesDir = this.pagesBaseDir();
+    const ext = this.pageExt();
+    const sourceFile = join(pagesDir, `${oldName}${ext}`);
+    const targetFile = join(pagesDir, `${newName}${ext}`);
+
+    if (!existsSync(sourceFile)) {
+      throw new Error(`Page not found: ${oldPath}`);
+    }
+    if (existsSync(targetFile)) {
+      throw new Error(`Page already exists: ${newPath}`);
+    }
+
+    await rename(sourceFile, targetFile);
+
+    const content = this.pageCache.getContent(oldPath);
+    if (content) {
+      this.pageCache.delete(oldPath);
+      const lineMap = buildLineMap(content);
+      this.pageCache.set(newPath, content, lineMap);
+    }
+  }
+
   /**
    * Get slug mappings for all pages
    *

package/lib/server/ssr/attributeBuilder.ts

@@ -3,6 +3,8 @@
  * Pure functions with no external dependencies
  */
 
+import { rewriteViewportUnits } from '../../shared/viewportUnits';
+
 /**
  * Escape HTML special characters to prevent XSS
  */
@@ -127,13 +129,17 @@ export function styleToString(style: Record<string, string | number> | undefined
   for (const [key, value] of Object.entries(style)) {
     if (value === null || value === undefined) continue;
 
+    // Route every value through the viewport-unit rewriter so design-canvas
+    // mode can pin vh/vw to a stable px value. See viewportUnits.ts.
+    const rewritten = rewriteViewportUnits(String(value));
+
     // Handle CSS variables (already in kebab-case with -- prefix)
     if (key.startsWith('--')) {
-      declarations.push(`${key}: ${escapeHtml(String(value))}`);
+      declarations.push(`${key}: ${escapeHtml(rewritten)}`);
     } else {
       // Convert camelCase to kebab-case for regular CSS properties
       const cssProperty = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-      declarations.push(`${cssProperty}: ${escapeHtml(String(value))}`);
+      declarations.push(`${cssProperty}: ${escapeHtml(rewritten)}`);
     }
   }
 

package/lib/server/ssr/buildErrorOverlay.ts

@@ -73,7 +73,7 @@ export function generateBuildErrorPage(data: BuildErrorsData, cspNonce?: string)
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Build Failed</title>
-  <style>
+  <style${nonceAttr}>
     * { margin: 0; padding: 0; box-sizing: border-box; }
 
     body {

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

@@ -49,12 +49,31 @@ describe('generateErrorPage', () => {
     expect(html).toContain('[object Object]');
   });
 
-  it('includes stack trace toggle when error has stack', () => {
+  it('includes technical-details toggle when error has stack', () => {
     const error = new Error('Test error');
     const html = generateErrorPage(error);
 
     expect(html).toContain('stackToggle');
-    expect(html).toContain('Show Stack Trace');
+    expect(html).toContain('Show technical details');
+  });
+
+  it('shows a friendly title/message and keeps the raw message available', () => {
+    const html = generateErrorPage(new Error("Cannot read properties of null (reading 'length')"));
+
+    // Friendly, plain-language copy is shown...
+    expect(html).toContain("A section couldn't load its content");
+    expect(html).toContain('error-friendly');
+    // ...while the raw message is still present (under technical details / copy).
+    expect(html).toContain("Cannot read properties of null (reading 'length')");
+  });
+
+  it('sends friendly + raw fields in the PREVIEW_ERROR payload', () => {
+    const html = generateErrorPage(new Error("Cannot read properties of null (reading 'length')"));
+
+    expect(html).toContain('"title"');
+    expect(html).toContain('"raw"');
+    // The visible message field carries the friendly text, not the raw JS error.
+    expect(html).toContain("A section couldn't load its content");
   });
 
   it('sends postMessage to parent window', () => {

package/lib/server/ssr/errorOverlay.ts

@@ -4,6 +4,8 @@
  * Also sends error details to parent editor via postMessage
  */
 
+import { toFriendlyError } from '../../shared/friendlyError';
+
 interface ErrorInfo {
   message: string;
   stack?: string;
@@ -60,15 +62,27 @@ function safeJsonForScript(data: unknown): string {
  */
 export function generateErrorPage(error: unknown, context?: string, cspNonce?: string): string {
   const errorInfo = extractErrorInfo(error);
+  const friendly = toFriendlyError(errorInfo.message);
   const errorMessage = escapeHtml(errorInfo.message);
   const errorStack = errorInfo.stack ? escapeHtml(errorInfo.stack) : '';
+  // Escape first (XSS-safe), then turn `backtick` spans into <code> for display.
+  const renderInline = (s: string) =>
+    escapeHtml(s).replace(/`([^`]+)`/g, '<code>$1</code>');
+  const friendlyTitle = escapeHtml(friendly.title);
+  const friendlyMessage = renderInline(friendly.friendlyMessage);
+  const friendlyHint = friendly.hint ? renderInline(friendly.hint) : '';
   const nonceAttr = cspNonce ? ` nonce="${cspNonce}"` : '';
 
-  // Safely encode error data for script
+  // Safely encode error data for script. Includes friendly fields so the parent
+  // editor can show plain-language text without re-mapping, plus the raw message
+  // and stack so "Copy" still yields the exact original for debugging.
   const errorDataJson = safeJsonForScript({
     type: 'PREVIEW_ERROR',
     error: {
-      message: errorInfo.message,
+      message: friendly.friendlyMessage,
+      title: friendly.title,
+      hint: friendly.hint,
+      raw: errorInfo.message,
       stack: errorInfo.stack,
       context,
     },
@@ -85,7 +99,7 @@ export function generateErrorPage(error: unknown, context?: string, cspNonce?: s
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Preview Error</title>
-  <style>
+  <style${nonceAttr}>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -122,6 +136,21 @@ export function generateErrorPage(error: unknown, context?: string, cspNonce?: s
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
+    .error-friendly {
+      font-size: 15px;
+      line-height: 1.6;
+      color: #e8e8e8;
+      margin-bottom: 16px;
+    }
+    .error-friendly code {
+      font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
+      font-size: 13px;
+      background: #1a1a1a;
+      border: 1px solid #444;
+      border-radius: 4px;
+      padding: 1px 5px;
+      color: #ffb86b;
+    }
     .error-message {
       background: #1a1a1a;
       border: 1px solid #444;
@@ -199,25 +228,23 @@ export function generateErrorPage(error: unknown, context?: string, cspNonce?: s
   <div class="error-container">
     <div class="error-header">
       <span class="error-icon">⚠️</span>
-      <span class="error-title">Render Error</span>
+      <span class="error-title">${friendlyTitle}</span>
     </div>
     <div class="error-body">
       ${context ? `<div class="error-context">${escapeHtml(context)}</div>` : ''}
-      <div class="error-message">${errorMessage}</div>
-      ${errorStack ? `
+      <p class="error-friendly">${friendlyMessage}</p>
       <div class="error-stack">
         <button class="stack-toggle" id="stackToggle">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polyline points="9 18 15 12 9 6"></polyline>
           </svg>
-          <span>Show Stack Trace</span>
+          <span>Show technical details</span>
         </button>
-        <div class="stack-content" id="stackContent">${errorStack}</div>
+        <div class="stack-content" id="stackContent"><div class="error-message">${errorMessage}</div>${errorStack ? `\n${errorStack}` : ''}</div>
       </div>
-      ` : ''}
     </div>
     <div class="error-footer">
-      <span class="error-hint">Check your component JavaScript for errors</span>
+      <span class="error-hint">${friendlyHint}</span>
       <button class="copy-btn" id="copyBtn">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
@@ -245,7 +272,7 @@ export function generateErrorPage(error: unknown, context?: string, cspNonce?: s
         stackToggle.addEventListener('click', function() {
           var isVisible = stackContent.classList.toggle('visible');
           stackToggle.classList.toggle('expanded', isVisible);
-          stackToggle.querySelector('span').textContent = isVisible ? 'Hide Stack Trace' : 'Show Stack Trace';
+          stackToggle.querySelector('span').textContent = isVisible ? 'Hide technical details' : 'Show technical details';
         });
       }
 

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

@@ -685,44 +685,84 @@ describe('generateSSRHTML', () => {
     // 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 () => {
+      test('updates #meno-styles in place, never replacing the node (CSP nonce safety)', async () => {
         const result = (await generateSSRHTML({
           pageData: minimalPage as any,
           injectLiveReload: true,
         })) as string;
+        // Only swap when the CSS actually changed...
         expect(result).toContain('os.textContent!==ns.textContent');
+        // ...and do it by mutating the existing (CSP-approved) node's text.
+        expect(result).toContain('os.textContent=ns.textContent');
+        // Replacing the <style> node would insert one carrying the freshly
+        // fetched request's rotated nonce, which the iframe's locked-in CSP
+        // rejects — dropping all CSS. Guard against a regression to node swap.
+        expect(result).not.toContain('replaceChild(ns.cloneNode');
       });
 
-      test('compares /_scripts/ src (cache-buster stripped) before reloading', async () => {
+      test('stamps the original document nonce on recreated CMS context scripts', async () => {
         const result = (await generateSSRHTML({
           pageData: minimalPage as any,
           injectLiveReload: true,
         })) as string;
-        // strip() removes ?_r=... so reloads triggered only by content-hash change
+        // Read the original page nonce once from the SSR-emitted meta tag...
+        expect(result).toContain(`document.querySelector('meta[name="csp-nonce"]')`);
+        // ...and stamp it on the inline <script id="meno-cms-*"> nodes the
+        // hot-reload recreates, so nonce-only script-src doesn't drop them
+        // (which would silently break CMS data hot-reload in the preview).
+        expect(result).toContain('if(docNonce)c.nonce=docNonce');
+      });
+
+      test('compares /_scripts/ src (cache-buster stripped) to detect a JS edit', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // strip() removes ?_r=... so a script reload is keyed on a real content-hash change
         expect(result).toContain('strip(oscr.getAttribute');
         expect(result).toContain('strip(nscr.getAttribute');
-        expect(result).toContain('oss===nss');
+        // a changed hash is one of the two triggers for a hard reset
+        expect(result).toContain('oss!==nss');
+      });
+
+      test('hard-resets #root via innerHTML only on a server-structure or JS change', async () => {
+        const result = (await generateSSRHTML({
+          pageData: minimalPage as any,
+          injectLiveReload: true,
+        })) as string;
+        // Structure is judged old-server vs new-server (structKey), NOT live-vs-server,
+        // so runtime DOM mutations (slider clones, injected backdrops) don't trigger a
+        // rebuild. The wholesale innerHTML replace lives only in the hard-reset branch.
+        expect(result).toContain('structKey(lastSrvRoot)!==structKey(nr)');
+        expect(result).toContain('or.innerHTML=nr.innerHTML');
+        expect(result).toContain('hardReset');
       });
 
-      test('falls back to innerHTML replace only on structural changes', async () => {
+      test('keys the diff on data-element-path + data-cms-item-index (CMS list disambiguation)', 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');
+        // CMS list items share a data-element-path; the item index must be
+        // folded into the diff key or one item's data leaks into siblings.
+        expect(result).toContain('data-cms-item-index');
+        // ek() composes path + item-index; the map is built and read via ek().
+        expect(result).toContain("getAttribute('data-cms-item-index')");
+        expect(result).toContain('sbp[ek(se[i])]=se[i]');
+        expect(result).toContain('p=ek(c)');
+        // Must NOT regress to keying the server map on path alone.
+        expect(result).not.toContain("sbp[se[i].getAttribute('data-element-path')]");
       });
 
-      test('patches #root in place via smartUpdate (not innerHTML replace)', async () => {
+      test('soft-patches #root in place via softSync (no 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)');
+        // On a pure style/content edit softSync walks the tree by data-element-path
+        // and updates attrs/classes/text in place, so event handlers, DOM identity
+        // and JS-built nodes survive.
+        expect(result).toContain('softSync(or,nr,lastSrvRoot)');
         expect(result).toContain('querySelectorAll(\'[data-element-path]\')');
       });
 

package/lib/server/ssr/htmlGenerator.ts

@@ -14,6 +14,7 @@ import { colorService } from '../services/ColorService';
 import { generateThemeColorVariablesCSS, generateVariablesCSS } from '../cssGenerator';
 import { variableService } from '../services/VariableService';
 import { generateUtilityCSS, extractUtilityClassesFromHTML, generateAllInteractiveCSS } from '../../shared/cssGeneration';
+import { rewriteViewportUnits } from '../../shared/viewportUnits';
 import { printMissingStyleWarnings } from '../validateStyleCoverage';
 import { formHandlerScript, needsFormHandler } from '../../client/scripts/formHandler';
 import { menoFilterScript, needsMenoFilter } from '../../client/meno-filter/script.generated';
@@ -305,7 +306,7 @@ export async function generateSSRHTML(
   // dedicated class so nonces aren't needed for this purely-presentational
   // effect.
   const menoBadgeHtml = configService.getShowMenoBadge()
-    ? `<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>`
+    ? `<style${nonceAttr}>.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'),
@@ -481,8 +482,14 @@ picture {
     interactiveCSS
   ].filter(Boolean).join('\n');
 
+  // Rewrite vh/vw to calc(var(--design-vh, 1vh) * N) so the studio's design
+  // canvas can pin viewport units to a stable height (avoids the
+  // iframe.height ↔ 100vh feedback loop). var() fallback to 1vh means this
+  // is a no-op in production / page mode where --design-vh is unset.
+  const cssWithStableViewport = rewriteViewportUnits(combinedCSS);
+
   // Minify CSS in production mode
-  const finalCSS = useBundled ? minifyCSS(combinedCSS) : combinedCSS;
+  const finalCSS = useBundled ? minifyCSS(cssWithStableViewport) : cssWithStableViewport;
 
   // Load prefetch config for client-side prefetching
   const prefetchConfig = await loadPrefetchConfig();
@@ -540,31 +547,68 @@ picture {
     : `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.
+  // The central question on every edit is: did the EDITOR change page
+  // *structure*, or only styles/content? We answer it by comparing the
+  // previous server render (lastSrvRoot) against the freshly fetched one via
+  // structKey() — the sorted set of `data-element-path` keys. This is
+  // deliberately independent of the LIVE DOM, which user JS routinely mutates
+  // at runtime (a slider clones slides, a nav injects a backdrop); those
+  // runtime mutations must NOT be mistaken for editor structural changes.
+  //
+  //   * SOFT update (server structure unchanged AND /_scripts hash unchanged):
+  //     a pure style/content/attribute edit. softSync() patches matching
+  //     elements in place (attributes, classes, text) WITHOUT replacing #root
+  //     and WITHOUT re-running component JS. DOM identity, event listeners,
+  //     JS-built children (slider clones) and runtime state (open menus,
+  //     carousel position, counters) all survive. `#meno-styles` is updated in
+  //     place so the new CSS applies live. This is what lets you tweak styles
+  //     with the navigation open without it snapping shut.
+  //   * HARD reset (server structure changed — nodes added/removed/reparented —
+  //     OR the /_scripts/{hash}.js URL changed because user JS was edited; the
+  //     URL is content-addressed, see scriptCache.hashContent): #root is
+  //     wholesale `innerHTML`-replaced from the server markup and the component
+  //     script is re-run (old `/_scripts` tag removed, cache-busted copy
+  //     appended, DOMContentLoaded re-dispatched). Interactive state resets,
+  //     which is expected when structure or behavior actually changed. Because
+  //     the whole subtree is replaced first there are no surviving listeners to
+  //     double-bind, so the re-run is clean.
+  //
+  // softSync() preserves runtime mutations the same way for classes AND
+  // attributes: a value that differs from the previous server snapshot but
+  // that the new server render left unchanged is treated as a runtime addition
+  // (e.g. `nav-dropdown-open`, `aria-expanded="true"`, a JS-set inline `style`)
+  // and kept; a value the server itself changed is an editor edit and wins.
+  // Element identity relies on `data-element-path`, emitted on every element
+  // when the request comes through the studio's `/__static__/` proxy (which
+  // sets `x-meno-editor: 1`).
+  //
+  // CMS list items all share the SAME `data-element-path` — processList()
+  // advances the per-item index in `cmsItemIndexPath`, not in `elementPath` —
+  // so keying the diff on path alone collapses every card onto the LAST item
+  // sharing that path, and editing one item leaks its data into its siblings'
+  // cards. ek() therefore composes the path with `data-cms-item-index` (the
+  // disambiguator the SSR already emits per item) so each card patches from
+  // its own server counterpart, regardless of any client-side (MenoFilter)
+  // reordering of the live list DOM. Non-list elements have no item-index, so
+  // their key — and behavior — is unchanged.
+  //
+  // The `#meno-styles` stylesheet is updated IN PLACE (`os.textContent=...`),
+  // never by replacing the node. Under the editor preview's hardened CSP,
+  // `style-src` is nonce-only and the nonce rotates every request (see
+  // pages.ts / cspNonce.ts). Swapping in a `<style>` parsed from the freshly
+  // fetched HTML would carry that request's new nonce — which no longer
+  // matches the iframe document's locked-in CSP — so Chromium would drop the
+  // node and ALL CSS would vanish. Mutating the already-approved node's text
+  // doesn't re-trigger nonce validation (same trick StyleInjector uses in dev).
   //
-  // 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.
+  // For the same reason, the `<script id="meno-cms-*">` context scripts (which
+  // ARE recreated, since an inline script must be a fresh node to re-execute)
+  // are stamped with `docNonce` — the ORIGINAL page nonce read once from
+  // `<meta name="csp-nonce">`, not the rotated nonce in the freshly fetched
+  // HTML. Without it, nonce-only `script-src` would drop the recreated script
+  // and CMS hot-reload (updated `window.__MENO_CMS__` data) would silently fail.
   const liveReloadScript = injectLiveReload
-    ? `<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>`
+    ? `<script${nonceAttr}>(function(){var ws,timer,gen=0,lastSrvRoot=null,dn=document.querySelector('meta[name="csp-nonce"]'),docNonce=dn?dn.getAttribute('content'):'';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;var ov=old?old.getAttribute(a.name):null;if(a.value!==ov){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 ek(el){var p=el.getAttribute('data-element-path'),ci=el.getAttribute('data-cms-item-index');return ci?p+'|'+ci:p}function structKey(root){var e=root.querySelectorAll('[data-element-path]'),k=[];for(var i=0;i<e.length;i++)k.push(ek(e[i]));return k.sort().join('~')}function softSync(curR,srvR,oldR){var ce=curR.querySelectorAll('[data-element-path]');var sbp={},se=srvR.querySelectorAll('[data-element-path]');for(var i=0;i<se.length;i++)sbp[ek(se[i])]=se[i];var obp={};if(oldR){var oe=oldR.querySelectorAll('[data-element-path]');for(var i=0;i<oe.length;i++)obp[ek(oe[i])]=oe[i]}for(var i=0;i<ce.length;i++){var c=ce[i],p=ek(c),s=sbp[p];if(!s)continue;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');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')):'';var hardReset=(oss!==nss)||!lastSrvRoot||!or||!nr||structKey(lastSrvRoot)!==structKey(nr);if(or&&nr){if(hardReset){if(or.innerHTML!==nr.innerHTML)or.innerHTML=nr.innerHTML}else{softSync(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.textContent=ns.textContent;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;if(docNonce)c.nonce=docNonce;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)})}if(!hardReset){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
@@ -582,8 +626,8 @@ picture {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  ${iconTags ? iconTags + '\n  ' : ''}${scriptPreloadTag ? scriptPreloadTag + '\n  ' : ''}${imagePreloadTags ? imagePreloadTags + '\n  ' : ''}${fontPreloadTags ? fontPreloadTags + '\n  ' : ''}${libraryTags.headCSS ? libraryTags.headCSS + '\n  ' : ''}${libraryTags.headJS ? libraryTags.headJS + '\n  ' : ''}${rendered.meta}
-  ${configInlineScript}${cmsInlineScript}${clientDataScripts}<style id="meno-styles">${styleContent}</style>${mergedCustomCode.head ? '\n  ' + mergedCustomCode.head : ''}
+  ${cspNonce ? `<meta name="csp-nonce" content="${cspNonce}">\n  ` : ''}${iconTags ? iconTags + '\n  ' : ''}${scriptPreloadTag ? scriptPreloadTag + '\n  ' : ''}${imagePreloadTags ? imagePreloadTags + '\n  ' : ''}${fontPreloadTags ? fontPreloadTags + '\n  ' : ''}${libraryTags.headCSS ? libraryTags.headCSS + '\n  ' : ''}${libraryTags.headJS ? libraryTags.headJS + '\n  ' : ''}${rendered.meta}
+  ${configInlineScript}${cmsInlineScript}${clientDataScripts}<style id="meno-styles"${nonceAttr}>${styleContent}</style>${mergedCustomCode.head ? '\n  ' + mergedCustomCode.head : ''}
 </head>
 <body>${mergedCustomCode.bodyStart ? '\n  ' + mergedCustomCode.bodyStart : ''}
   <div id="root">