meno-core 1.0.47 → 1.0.49

package/lib/server/services/cmsService.ts

@@ -7,6 +7,7 @@ import type { CMSProvider, CMSSchemaInfo } from '../../shared/interfaces/content
 import type {
   CMSSchema,
   CMSItem,
+  CMSItemVersions,
   CMSRouteMatch,
   CMSListQuery,
   CMSFilterCondition,
@@ -30,6 +31,19 @@ interface CachedItems {
   timestamp: number;
 }
 
+export interface CMSServiceOptions {
+  /**
+   * When true, the SSR-facing read methods (`queryItems`, `getItemsByIds`,
+   * `matchRoute`) merge drafts over published content so the editor preview /
+   * dev server reflects unpublished edits. The editor management methods
+   * (`getItemVersions`, `listItemsWithDraftFlag`) keep strict published
+   * semantics regardless of this flag — they need to surface both versions
+   * separately. Static builds and production runtimes leave this off so
+   * deployed sites only ever serve published content.
+   */
+  previewMode?: boolean;
+}
+
 /**
  * CMS Service
  * Manages CMS schemas, route matching, and content querying
@@ -38,6 +52,7 @@ export class CMSService {
   private schemaCache = new Map<string, CMSSchemaInfo>();
   private routePatterns: RoutePattern[] = [];
   private provider?: CMSProvider;
+  private readonly previewMode: boolean;
 
   /** Item cache with TTL-based expiration */
   private itemsCache = new Map<string, CachedItems>();
@@ -47,9 +62,11 @@ export class CMSService {
   /**
    * Creates a new CMSService instance
    * @param provider - Optional CMSProvider for loading data (enables DI for testing)
+   * @param options - Service-level flags (preview mode for dev server)
    */
-  constructor(provider?: CMSProvider) {
+  constructor(provider?: CMSProvider, options: CMSServiceOptions = {}) {
     this.provider = provider;
+    this.previewMode = options.previewMode === true;
   }
 
   /**
@@ -62,9 +79,14 @@ export class CMSService {
   }
 
   /**
-   * Get items with caching
-   * Returns cached items if available and not expired, otherwise fetches fresh data
-   * Rich-text fields are automatically preprocessed to HTML for template interpolation
+   * Get items with caching, used by SSR-facing read methods.
+   *
+   * In preview mode (dev server) drafts are merged over published — drafts
+   * win on a per-`_filename` basis and draft-only items are included — so
+   * the editor preview reflects unpublished edits. Returns published-only
+   * otherwise. Rich-text fields are preprocessed to HTML for template
+   * interpolation either way.
+   *
    * @param collection - Collection ID to fetch items for
    * @returns Array of CMSItems with rich-text fields converted to HTML markers
    */
@@ -78,7 +100,21 @@ export class CMSService {
     }
 
     // Fetch fresh items
-    const rawItems = await this.provider!.getItems(collection);
+    let rawItems = await this.provider!.getItems(collection);
+
+    if (this.previewMode) {
+      const drafts = await this.provider!.getAllDrafts(collection);
+      if (drafts.length > 0) {
+        const byFilename = new Map<string, CMSItem>();
+        for (const item of rawItems) {
+          if (item._filename) byFilename.set(item._filename, item);
+        }
+        for (const draft of drafts) {
+          if (draft._filename) byFilename.set(draft._filename, draft);
+        }
+        rawItems = Array.from(byFilename.values());
+      }
+    }
 
     // Preprocess rich-text fields for template interpolation
     const items = this.preprocessRichTextFields(collection, rawItems);
@@ -405,6 +441,87 @@ export class CMSService {
    * Only clears items cache and provider cache before re-initializing.
    * Schema/route caches are swapped atomically inside initialize().
    */
+  // ----------------------------------------------------------------------
+  // Draft-version methods (Studio-only — never used by SSR / static export)
+  // ----------------------------------------------------------------------
+
+  /**
+   * Load both published and draft versions of an item, used by the editor.
+   * Returns `{}` when neither version exists.
+   */
+  async getItemVersions(collection: string, filename: string): Promise<CMSItemVersions> {
+    if (!this.provider) return {};
+    const [published, draft] = await Promise.all([
+      this.provider.getItemByFilename(collection, filename),
+      this.provider.getDraft(collection, filename),
+    ]);
+    const result: CMSItemVersions = {};
+    if (published) result.published = published;
+    if (draft) result.draft = draft;
+    return result;
+  }
+
+  /**
+   * List all items in a collection for the Studio item list:
+   * - Published items annotated with `_hasDraft: true` when a draft sibling exists.
+   * - Draft-only items (no published file yet) returned with `_isDraft: true`.
+   */
+  async listItemsWithDraftFlag(collection: string): Promise<CMSItem[]> {
+    if (!this.provider) return [];
+
+    const [published, drafts] = await Promise.all([
+      this.provider.getItems(collection),
+      this.provider.getAllDrafts(collection),
+    ]);
+
+    const draftFilenames = new Set(drafts.map(d => d._filename).filter(Boolean) as string[]);
+
+    const annotatedPublished: CMSItem[] = published.map(item => {
+      if (item._filename && draftFilenames.has(item._filename)) {
+        return { ...item, _hasDraft: true };
+      }
+      return item;
+    });
+
+    const publishedFilenames = new Set(published.map(i => i._filename).filter(Boolean) as string[]);
+    const draftOnly = drafts.filter(d => d._filename && !publishedFilenames.has(d._filename));
+
+    return [...annotatedPublished, ...draftOnly];
+  }
+
+  /** Pass-through to provider; no caching (drafts are read fresh in the editor). */
+  async getDraft(collection: string, filename: string): Promise<CMSItem | null> {
+    if (!this.provider) return null;
+    return this.provider.getDraft(collection, filename);
+  }
+
+  async hasDraft(collection: string, filename: string): Promise<boolean> {
+    if (!this.provider) return false;
+    return this.provider.hasDraft(collection, filename);
+  }
+
+  async saveDraft(collection: string, item: CMSItem): Promise<void> {
+    if (!this.provider) throw new Error('CMS provider not configured');
+    await this.provider.saveDraft(collection, item);
+    // Drafts don't enter the published items cache, but we invalidate it anyway
+    // so listItemsWithDraftFlag reflects the new draft on the next read.
+    this.itemsCache.delete(collection);
+  }
+
+  async discardDraft(collection: string, filename: string): Promise<void> {
+    if (!this.provider) throw new Error('CMS provider not configured');
+    await this.provider.discardDraft(collection, filename);
+    this.itemsCache.delete(collection);
+  }
+
+  async publishDraft(collection: string, filename: string): Promise<CMSItem> {
+    if (!this.provider) throw new Error('CMS provider not configured');
+    const item = await this.provider.publishDraft(collection, filename);
+    // Promotion changes the published file → invalidate cached items.
+    this.itemsCache.delete(collection);
+    return item;
+  }
+
   async refreshSchemas(): Promise<void> {
     if (!this.provider) {
       return;

package/lib/server/services/configService.ts

@@ -175,7 +175,12 @@ export class ConfigService {
 
     return {
       enabled: userScales.enabled ?? DEFAULT_RESPONSIVE_SCALES.enabled,
+      mode: (userScales as { mode?: 'breakpoints' | 'fluid' }).mode ?? DEFAULT_RESPONSIVE_SCALES.mode,
       baseReference: userScales.baseReference ?? DEFAULT_RESPONSIVE_SCALES.baseReference,
+      fluidRange: (userScales as { fluidRange?: { min: number; max: number } }).fluidRange
+        ?? (DEFAULT_RESPONSIVE_SCALES.fluidRange ? { ...DEFAULT_RESPONSIVE_SCALES.fluidRange } : undefined),
+      siteMargin: (userScales as { siteMargin?: { min: number; max: number } }).siteMargin
+        ?? (DEFAULT_RESPONSIVE_SCALES.siteMargin ? { ...DEFAULT_RESPONSIVE_SCALES.siteMargin } : undefined),
       fontSize: this.mergeScaleCategory(
         userScales.fontSize as BreakpointScales | undefined,
         DEFAULT_RESPONSIVE_SCALES.fontSize

package/lib/server/ssr/attributeBuilder.ts

@@ -75,6 +75,47 @@ export function buildAttributes(props: Record<string, unknown>, exclude: string[
   return attrs.length > 0 ? ' ' + attrs.join(' ') : '';
 }
 
+/**
+ * Build the editor-only attribute string used by XRay and selection sync.
+ * Mirrors what client-side ComponentBuilder.ts writes via ref callbacks.
+ * Returns a leading-space-prefixed attribute string, or '' when there's
+ * nothing to emit (or no elementPath supplied).
+ */
+export function buildEditorAttrs(opts: {
+  elementPath?: number[];
+  cmsItemIndexPath?: number[];
+  cmsListPaths?: number[][];
+  componentContext?: string;
+  parentComponentName?: string;
+  isComponentRoot?: boolean;
+  isSlotContent?: boolean;
+  isCMSListContainer?: boolean;
+}): string {
+  const { elementPath } = opts;
+  if (!elementPath) return '';
+
+  const parts: string[] = [`data-element-path="${escapeHtml(elementPath.join(','))}"`];
+
+  if (opts.cmsItemIndexPath && opts.cmsItemIndexPath.length > 0) {
+    parts.push(`data-cms-item-index="${escapeHtml(opts.cmsItemIndexPath.join('.'))}"`);
+    if (opts.cmsListPaths && opts.cmsListPaths.length === opts.cmsItemIndexPath.length) {
+      const ctx = JSON.stringify({ itemIndexPath: opts.cmsItemIndexPath, listPaths: opts.cmsListPaths });
+      parts.push(`data-cms-context="${escapeHtml(ctx)}"`);
+    }
+  }
+
+  if (opts.isCMSListContainer) parts.push(`data-cms-list="true"`);
+  if (opts.isComponentRoot) parts.push(`data-component-root="true"`);
+  if (opts.parentComponentName) {
+    parts.push(`data-parent-component="${escapeHtml(opts.parentComponentName)}"`);
+  }
+  if (opts.componentContext && !opts.isSlotContent) {
+    parts.push(`data-component-context="${escapeHtml(opts.componentContext)}"`);
+  }
+
+  return ' ' + parts.join(' ');
+}
+
 /**
  * Convert a style object to inline CSS string
  * Handles CSS variables (--is-0: value) and regular properties

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

@@ -27,6 +27,10 @@ mock.module('./ssrRenderer', () => ({
 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', () => ({
@@ -34,13 +38,11 @@ mock.module('../services/configService', () => ({
 }));
 
 const mockLoadBreakpointConfig = mock(async () => ({ breakpoints: [] }));
-const mockLoadResponsiveScalesConfig = mock(async () => ({}));
 const mockLoadIconsConfig = mock(async () => ({ favicon: '', appleTouchIcon: '' }));
 const mockLoadPrefetchConfig = mock(async () => ({ enabled: false }));
 
 mock.module('../jsonLoader', () => ({
   loadBreakpointConfig: mockLoadBreakpointConfig,
-  loadResponsiveScalesConfig: mockLoadResponsiveScalesConfig,
   loadIconsConfig: mockLoadIconsConfig,
   loadPrefetchConfig: mockLoadPrefetchConfig,
 }));
@@ -674,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

@@ -8,7 +8,7 @@ import type { ComponentDefinition, JSONPage, PageLibrariesConfig, CustomCodeConf
 import type { SlugMap } from '../../shared/slugTranslator';
 import type { CMSService } from '../services/cmsService';
 import { configService } from '../services/configService';
-import { loadBreakpointConfig, loadResponsiveScalesConfig, loadIconsConfig, loadPrefetchConfig } from '../jsonLoader';
+import { loadBreakpointConfig, loadIconsConfig, loadPrefetchConfig } from '../jsonLoader';
 import { generateFontCSS, generateFontPreloadTags, loadProjectConfig } from '../../shared/fontLoader';
 import { colorService } from '../services/ColorService';
 import { generateThemeColorVariablesCSS, generateVariablesCSS } from '../cssGenerator';
@@ -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
@@ -378,7 +400,7 @@ export async function generateSSRHTML(
   // Extract and generate utility CSS from rendered HTML
   const usedUtilityClasses = extractUtilityClassesFromHTML(rendered.html);
   const breakpointConfig = await loadBreakpointConfig();
-  const responsiveScalesConfig = await loadResponsiveScalesConfig();
+  const responsiveScalesConfig = configService.getResponsiveScales();
 
   // Load and generate CSS custom properties from variables.json
   const variablesConfig = await variableService.loadConfig();
@@ -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