meno-core 1.0.52 → 1.0.53

package/lib/client/fontFamiliesService.ts

@@ -0,0 +1,69 @@
+/**
+ * Client-side Font Families Service
+ * Provides cached, deduplicated access to the project's font families
+ * (read from meno.json's `fonts` array via /api/config).
+ */
+
+interface ConfigFont {
+  path?: string;
+  src?: string;
+  family?: string;
+}
+
+function extractFamilyFromPath(path: string): string {
+  const filename = path.split('/').pop() || 'Font';
+  const name = filename.replace(/\.(ttf|woff2?|otf)$/i, '');
+  return name
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function extractFamilies(fonts: ConfigFont[] | undefined): string[] {
+  if (!Array.isArray(fonts)) return [];
+  const set = new Set<string>();
+  for (const font of fonts) {
+    const path = font.path || font.src;
+    const family = font.family || (path ? extractFamilyFromPath(path) : null);
+    if (family) set.add(family);
+  }
+  return [...set];
+}
+
+let cachedFamilies: string[] | null = null;
+let inFlight: Promise<string[]> | null = null;
+
+export async function fetchFontFamilies(): Promise<string[]> {
+  if (cachedFamilies) return cachedFamilies;
+  if (inFlight) return inFlight;
+
+  inFlight = fetch('/api/config')
+    .then(res => (res.ok ? res.json() : { fonts: [] }))
+    .then(config => {
+      cachedFamilies = extractFamilies(config.fonts);
+      return cachedFamilies;
+    })
+    .catch(() => {
+      cachedFamilies = [];
+      return cachedFamilies;
+    })
+    .finally(() => {
+      inFlight = null;
+    });
+
+  return inFlight;
+}
+
+export function getCachedFontFamilies(): string[] {
+  return cachedFamilies || [];
+}
+
+export function invalidateFontFamilies(): void {
+  cachedFamilies = null;
+  inFlight = null;
+}
+
+export async function initializeFontFamilies(forceRefresh = false): Promise<void> {
+  if (forceRefresh) invalidateFontFamilies();
+  await fetchFontFamilies();
+}

package/lib/client/hmrCssReload.ts

@@ -0,0 +1,160 @@
+/**
+ * Shared CSS/asset hot-reload wiring for the preview iframes.
+ *
+ * Both the runtime client router (packages/core/entries/client-router.tsx) and
+ * the editor preview router (packages/studio/entries/client-editor-router.tsx)
+ * need the same set of HMR listeners that re-fetch and re-inject colors,
+ * variables and fonts CSS (and full-reload on library changes). This used to be
+ * duplicated in both entries — and a fix applied to only one copy is exactly how
+ * the per-breakpoint variable "flash then revert" bug survived in select mode.
+ * Keep this the single source of truth; consume it via `setupCssHmrListeners()`.
+ *
+ * Each injected `<style>` is stamped with the per-page CSP nonce (`applyNonce`):
+ * under the Electron preview's `style-src 'nonce-…'` policy Chromium silently
+ * drops any unstamped `<style>`, which breaks CSS hot-reload (incl. per-breakpoint
+ * variable edits). See styles/cspNonce.ts.
+ */
+
+import { applyNonce } from './styles/cspNonce';
+
+declare global {
+  interface Window {
+    __hmrColorsInitialized?: boolean;
+    __hmrVariablesCSSInitialized?: boolean;
+    __hmrFontsCSSInitialized?: boolean;
+    __hmrLibrariesInitialized?: boolean;
+  }
+}
+
+// Fetch and inject updated theme (color) CSS into <style id="hmr-theme-variables">
+async function injectUpdatedThemeCSS(): Promise<void> {
+  try {
+    const themesResponse = await fetch('/api/themes');
+    if (!themesResponse.ok) return;
+
+    const themesData = await themesResponse.json() as {
+      themes: Array<{ name: string; label: string }>;
+      default: string;
+    };
+
+    // Fetch colors for each theme
+    const themeColors: Record<string, any> = {};
+    for (const theme of themesData.themes) {
+      const colorResponse = await fetch(
+        `/api/colors?theme=${encodeURIComponent(theme.name)}`
+      );
+      if (colorResponse.ok) {
+        themeColors[theme.name] = (await colorResponse.json()).colors;
+      }
+    }
+
+    // Also get default theme colors
+    const defaultResponse = await fetch('/api/colors');
+    if (defaultResponse.ok) {
+      themeColors['default'] = (await defaultResponse.json()).colors;
+    }
+
+    // Generate CSS — default theme in :root, each named theme in [theme="..."]
+    let css = '';
+    if (themeColors['default']) {
+      const vars = Object.entries(themeColors['default'])
+        .map(([name, value]) => `  --${name}: ${value};`)
+        .join('\n');
+      css += `:root {\n${vars}\n}\n\n`;
+    }
+    for (const theme of themesData.themes) {
+      if (themeColors[theme.name]) {
+        const vars = Object.entries(themeColors[theme.name])
+          .map(([name, value]) => `  --${name}: ${value};`)
+          .join('\n');
+        css += `[theme="${theme.name}"] {\n${vars}\n}\n\n`;
+      }
+    }
+
+    let styleTag = document.getElementById('hmr-theme-variables');
+    if (!styleTag) {
+      styleTag = document.createElement('style');
+      styleTag.id = 'hmr-theme-variables';
+      applyNonce(styleTag);
+      document.head.appendChild(styleTag);
+    }
+    styleTag.textContent = css;
+  } catch {
+    // Silently fail - not critical if CSS injection doesn't work
+  }
+}
+
+// Fetch and inject updated variables CSS into <style id="hmr-css-variables">
+async function injectUpdatedVariablesCSS(): Promise<void> {
+  try {
+    const response = await fetch('/api/variables-css');
+    if (!response.ok) return;
+    const css = await response.text();
+
+    let styleTag = document.getElementById('hmr-css-variables');
+    if (!styleTag) {
+      styleTag = document.createElement('style');
+      styleTag.id = 'hmr-css-variables';
+      applyNonce(styleTag);
+      document.head.appendChild(styleTag);
+    }
+    styleTag.textContent = css;
+  } catch {
+    // Silently fail
+  }
+}
+
+// Fetch and inject updated fonts CSS into <style id="hmr-fonts-css">
+async function injectUpdatedFontsCSS(): Promise<void> {
+  try {
+    const response = await fetch('/api/fonts-css');
+    if (!response.ok) return;
+    const css = await response.text();
+
+    let styleTag = document.getElementById('hmr-fonts-css');
+    if (!styleTag) {
+      styleTag = document.createElement('style');
+      styleTag.id = 'hmr-fonts-css';
+      applyNonce(styleTag);
+      document.head.appendChild(styleTag);
+    }
+    styleTag.textContent = css;
+  } catch {
+    // Silently fail
+  }
+}
+
+/**
+ * Wire all CSS/asset hot-reload listeners (colors, variables, fonts, libraries).
+ * Idempotent — each channel is guarded by a `window.__hmr*Initialized` flag, so
+ * calling this more than once (e.g. across a Bun HMR re-eval) is safe.
+ *
+ * NOTE: the variables flag is `__hmrVariablesCSSInitialized`, deliberately
+ * distinct from the `__hmrVariablesInitialized` that the `useVariables` hook sets
+ * on module load. Sharing one flag let the hook win the race, skipping this
+ * listener so the per-breakpoint variable CSS never refreshed and edits appeared
+ * to revert.
+ */
+export function setupCssHmrListeners(): void {
+  if (typeof window === 'undefined') return;
+
+  if (!window.__hmrColorsInitialized) {
+    window.__hmrColorsInitialized = true;
+    document.addEventListener('hmr-colors-update', () => { void injectUpdatedThemeCSS(); });
+  }
+
+  if (!window.__hmrVariablesCSSInitialized) {
+    window.__hmrVariablesCSSInitialized = true;
+    document.addEventListener('hmr-variables-update', () => { void injectUpdatedVariablesCSS(); });
+  }
+
+  if (!window.__hmrFontsCSSInitialized) {
+    window.__hmrFontsCSSInitialized = true;
+    document.addEventListener('hmr-fonts-update', () => { void injectUpdatedFontsCSS(); });
+  }
+
+  if (!window.__hmrLibrariesInitialized) {
+    window.__hmrLibrariesInitialized = true;
+    document.addEventListener('hmr-libraries-update', () => { location.reload(); });
+  }
+}

package/lib/client/hooks/useColorVariables.ts

@@ -4,6 +4,7 @@
 
 import { useState, useEffect, useRef } from 'react';
 import type { ColorVariables, ThemeEntry, HMRMessage } from '../../shared/types';
+import { applyNonce } from '../styles/cspNonce';
 
 let cachedColors: Record<string, ColorVariables> = {};
 let cachedThemes: ThemeEntry[] | null = null;
@@ -90,6 +91,7 @@ async function injectUpdatedThemeCSS() {
     if (!themeStyleTag) {
       themeStyleTag = document.createElement('style');
       themeStyleTag.id = 'hmr-theme-variables';
+      applyNonce(themeStyleTag);
       // Insert after the main style tag
       const mainStyle = document.querySelector('style');
       if (mainStyle && mainStyle.nextSibling) {

package/lib/client/index.ts

@@ -31,6 +31,7 @@ export * from './responsiveStyleResolver';
 // Scripts and styles injection
 export { StyleInjector } from './styles/StyleInjector';
 export { ScriptExecutor } from './scripts/ScriptExecutor';
+export { setupCssHmrListeners } from './hmrCssReload';
 
 // Prefetch
 export { PrefetchService } from './services/PrefetchService';
@@ -38,6 +39,9 @@ export { PrefetchService } from './services/PrefetchService';
 // i18n
 export * from './i18nConfigService';
 
+// Font families (project config)
+export * from './fontFamiliesService';
+
 // Registries
 export { globalComponentRegistry, ComponentRegistry } from './componentRegistry';
 export { ElementRegistry, elementRegistry, setElementRegistry } from './elementRegistry';

package/lib/client/meno-filter/ui.ts

@@ -8,6 +8,7 @@
  */
 
 import { MenoFilter, type CMSItem } from './MenoFilter';
+import { applyNonce } from '../styles/cspNonce';
 
 // ============================================================================
 // Types
@@ -304,6 +305,7 @@ function injectCSS(options: Required<UIOptions>): void {
     }
   `;
 
+  applyNonce(style);
   document.head.appendChild(style);
   cssInjected = true;
 }

package/lib/client/routing/RouteLoader.test.ts

@@ -55,7 +55,7 @@ describe('RouteLoader', () => {
 
       expect(componentRegistry.get('Button')).toBeDefined();
       expect(mockFetch).toHaveBeenCalledWith(API_ROUTES.COMPONENTS, {
-        cache: 'no-store',
+        cache: 'default',
       });
     });
 
@@ -87,7 +87,7 @@ describe('RouteLoader', () => {
       await routeLoader.loadGlobalComponents();
 
       expect(mockFetch).toHaveBeenCalledWith(API_ROUTES.COMPONENTS, {
-        cache: 'no-store',
+        cache: 'default',
       });
     });
 

package/lib/client/routing/RouteLoader.ts

@@ -49,7 +49,11 @@ export class RouteLoader {
    */
   async loadGlobalComponents(signal?: AbortSignal): Promise<void> {
     try {
-      const fetchOptions: RequestInit = { cache: 'no-store' };
+      // `cache: 'default'` lets the browser keep the body and revalidate
+      // cheaply via `If-None-Match` — the server responds 304 when nothing
+      // changed (see cachedJsonResponse on `/api/components`). Repeat
+      // navigations skip the JSON download entirely.
+      const fetchOptions: RequestInit = { cache: 'default' };
       if (signal) {
         fetchOptions.signal = signal;
       }
@@ -169,8 +173,10 @@ export class RouteLoader {
         return tree;
       }
 
+      // `cache: 'default'` lets the browser revalidate via ETag — server
+      // responds 304 when the page JSON hasn't changed since last fetch.
       const response = await fetch(`${API_ROUTES.PAGE_CONTENT}?page=${encodeURIComponent(pathWithoutLocale)}`, {
-        cache: 'no-store',
+        cache: 'default',
         signal: abortController.signal,
       });
 

package/lib/client/routing/Router.tsx

@@ -24,11 +24,13 @@ import { initializeBreakpoints } from "../responsiveStyleResolver";
 import { elementRegistry } from "../elementRegistry";
 import { InteractiveStylesRegistry } from "../InteractiveStylesRegistry";
 import { UtilityClassCollector } from "../styles/UtilityClassCollector";
+import { applyNonce } from "../styles/cspNonce";
 import { initializeClient, setupEventHandlers } from "../ClientInitializer";
 import type { ComponentNode, I18nConfig, PrefetchConfig, CMSItem } from "../../shared/types";
 import { parseLocaleFromPath, setStoredLocale, DEFAULT_I18N_CONFIG } from "../../shared/i18n";
 import { fetchI18nConfig, setI18nConfig as setCachedI18nConfig } from "../i18nConfigService";
 import { IFRAME_MESSAGE_TYPES } from "../../shared/constants";
+import { rewriteViewportUnits } from "../../shared/viewportUnits";
 
 /** SSR-serialized CMS context for client-side hydration */
 interface SSRCMSContext {
@@ -146,6 +148,13 @@ export function Router(props: RouterProps = {}): ReactElement {
   const lastCommitTimestampRef = useRef(0);
   const COMMIT_GRACE_MS = 1000;
 
+  // Tracks whether the most recent commit changed tree structure (nodes
+  // added/removed/reparented) vs only edited props/styles. Leaf-only commits
+  // don't need the 100ms post-render scriptExecutor pass because no new
+  // elements appeared to bind scripts to. Default true (safe); the editor
+  // sends `structureChanged: false` on prop/style/CSS/JS edits.
+  const lastCommitStructureChangedRef = useRef(true);
+
   // Track if initial mount used SSR CMS context (to skip redundant path-based load)
   const ssrCmsHandledRef = useRef(false);
   // Track if initial load is done (to prevent currentPath effect from firing on mount)
@@ -255,9 +264,41 @@ export function Router(props: RouterProps = {}): ReactElement {
     if (typeof window === 'undefined') return;
 
     const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_UPDATE) {
-        const { name, value } = event.data as { name: string; value: string };
-        document.documentElement.style.setProperty(name, value);
+      // Live CSS variable preview. Writes the override into a managed
+      // <style id="meno-scrub-preview"> tag rather than as an inline style on
+      // <html>: inline styles outrank @media rules from `meno-styles`, which
+      // would break the responsive cascade for the rest of the session.
+      //
+      // `media` scopes the rule so it only applies at the breakpoint being
+      // edited (base → min-width above the largest non-base breakpoint;
+      // non-base → max-width of that breakpoint). When `media` is omitted (no
+      // breakpoints configured) the rule applies unconditionally. The legacy
+      // {maxWidth} payload from CSS_VARIABLE_SCOPED_UPDATE is still accepted.
+      if (event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_UPDATE
+          || event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_SCOPED_UPDATE) {
+        const { name, value, media, maxWidth } = event.data as {
+          name: string;
+          value: string;
+          media?: string;
+          maxWidth?: number;
+        };
+        const styleId = 'meno-scrub-preview';
+        let styleTag = document.getElementById(styleId) as HTMLStyleElement | null;
+        if (!styleTag) {
+          styleTag = document.createElement('style');
+          styleTag.id = styleId;
+          applyNonce(styleTag);
+          document.head.appendChild(styleTag);
+        }
+        const mediaExpr = media ?? (typeof maxWidth === 'number' ? `(max-width: ${maxWidth}px)` : null);
+        styleTag.textContent = mediaExpr
+          ? `@media ${mediaExpr} { :root { ${name}: ${value}; } }`
+          : `:root { ${name}: ${value}; }`;
+        return;
+      }
+
+      if (event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_SCOPED_CLEAR) {
+        document.getElementById('meno-scrub-preview')?.remove();
         return;
       }
 
@@ -265,19 +306,24 @@ export function Router(props: RouterProps = {}): ReactElement {
         const css = event.data.css as string;
         const styleId = 'interactive-styles';
 
-        // Remove existing interactive styles tag if it exists
-        const existingStyle = document.getElementById(styleId);
-        if (existingStyle) {
-          existingStyle.remove();
-        }
-
-        // Inject new CSS if provided
-        if (css && document.head) {
-          const styleTag = document.createElement('style');
+        // Empty payload is a no-op: an in-flight HMR transition can briefly
+        // post an empty InteractiveStylesRegistry (cleared in onLoadStart
+        // before the new tree renders), and tearing down the existing tag
+        // would drop all hover/focus/responsive CSS until the next render.
+        if (!css) return;
+        if (!document.head) return;
+
+        // Update in place when the tag already exists — avoids a
+        // remove-then-create gap during which the page renders unstyled.
+        const rewritten = rewriteViewportUnits(css);
+        let styleTag = document.getElementById(styleId) as HTMLStyleElement | null;
+        if (!styleTag) {
+          styleTag = document.createElement('style');
           styleTag.id = styleId;
-          styleTag.textContent = css;
+          applyNonce(styleTag);
           document.head.appendChild(styleTag);
         }
+        styleTag.textContent = rewritten;
       }
     };
 
@@ -285,6 +331,18 @@ export function Router(props: RouterProps = {}): ReactElement {
     return () => window.removeEventListener('message', handleMessage);
   }, []);
 
+  // Drop the live scrub-preview tag once the canonical HMR refresh lands.
+  // Defence in depth in case CSS_VARIABLE_SCOPED_CLEAR was missed (e.g. the
+  // editor unmounted mid-scrub).
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const clearScrubPreview = () => {
+      document.getElementById('meno-scrub-preview')?.remove();
+    };
+    document.addEventListener('hmr-variables-update', clearScrubPreview);
+    return () => document.removeEventListener('hmr-variables-update', clearScrubPreview);
+  }, []);
+
   // Listen for page data preview updates from parent window (editor)
   // Used for component hover preview in the components tab
   useEffect(() => {
@@ -303,6 +361,7 @@ export function Router(props: RouterProps = {}): ReactElement {
       } else if (event.data?.type === IFRAME_MESSAGE_TYPES.PAGE_DATA_COMMITTED) {
         // Update the real tree with committed editor mutations (instant preview)
         lastCommitTimestampRef.current = Date.now();
+        lastCommitStructureChangedRef.current = event.data.structureChanged !== false;
         const pageData = event.data.pageData;
         if (pageData?.root) {
           setComponentTree(pageData.root);
@@ -311,6 +370,7 @@ export function Router(props: RouterProps = {}): ReactElement {
         }
       } else if (event.data?.type === IFRAME_MESSAGE_TYPES.COMPONENT_DEFINITION_COMMITTED) {
         lastCommitTimestampRef.current = Date.now();
+        lastCommitStructureChangedRef.current = event.data.structureChanged !== false;
         const { componentName, definition } = event.data;
         if (componentName && definition) {
           services.componentRegistry.register(componentName, definition);
@@ -360,8 +420,14 @@ export function Router(props: RouterProps = {}): ReactElement {
         }, '*');
       }
 
-      // Wait for React to render before executing JavaScript (unless disabled for editor)
-      if (!disableScripts) {
+      // Wait for React to render before executing JavaScript (unless disabled for editor).
+      // Skip for leaf-only edits (prop/style changes): no new elements appeared,
+      // so there's nothing new for the scriptExecutor to bind to. Always reset
+      // the ref back to true after the effect so unrelated re-renders (e.g.
+      // cmsContext changes) keep getting their script pass.
+      const shouldRunScripts = !disableScripts && lastCommitStructureChangedRef.current;
+      lastCommitStructureChangedRef.current = true;
+      if (shouldRunScripts) {
         const timeoutId = setTimeout(() => {
           services.scriptExecutor.execute();
         }, 100);

package/lib/client/scripts/ScriptExecutor.test.ts

@@ -421,6 +421,149 @@ describe("ScriptExecutor", () => {
     });
   });
 
+  describe("per-element bind dedup (defineVars path)", () => {
+    // Helper: counter on window that the executed user JS bumps. Reset between
+    // tests so cross-test pollution can't mask a stuck observer / repeated bind.
+    const COUNTER_KEY = "__bindCounter";
+    const win = window as unknown as Record<string, unknown>;
+
+    beforeEach(() => {
+      win[COUNTER_KEY] = 0;
+      document.body.innerHTML = "";
+    });
+
+    afterEach(() => {
+      delete win[COUNTER_KEY];
+      delete (window as unknown as { __menoShouldBind?: unknown }).__menoShouldBind;
+      document.body.innerHTML = "";
+    });
+
+    const registerCounterComponent = (name = "BoundComp") => {
+      const def: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          javascript: `window.${COUNTER_KEY} = (window.${COUNTER_KEY} || 0) + 1;`,
+          defineVars: true,
+        },
+      };
+      componentRegistry.register(name, def);
+      return def;
+    };
+
+    const mountInstance = (componentName: string, propsByComponent: Record<string, unknown> = {}) => {
+      const el = document.createElement("div");
+      el.setAttribute("data-component", componentName);
+      el.setAttribute("data-props", JSON.stringify({ [componentName]: propsByComponent }));
+      document.body.appendChild(el);
+      return el;
+    };
+
+    test("re-executing execute() does not re-run JS on the same element", () => {
+      registerCounterComponent();
+      mountInstance("BoundComp");
+      // ScriptExecutor under test is the one from outer beforeEach — it
+      // installed its host hook on window during construction.
+
+      scriptExecutor.execute();
+      scriptExecutor.execute();
+      scriptExecutor.execute();
+
+      expect(win[COUNTER_KEY]).toBe(1);
+    });
+
+    test("a newly mounted element binds on the next execute(), already-bound ones don't re-run", () => {
+      registerCounterComponent();
+      mountInstance("BoundComp");
+
+      scriptExecutor.execute();
+      expect(win[COUNTER_KEY]).toBe(1);
+
+      // Simulate a structural commit that added another instance of the same component.
+      mountInstance("BoundComp");
+      scriptExecutor.execute();
+
+      // Only the new element should have run; the original is already bound.
+      expect(win[COUNTER_KEY]).toBe(2);
+    });
+
+    test("two component names on the same element each bind once independently", () => {
+      // Register A and B, each with defineVars and its own counter.
+      const defA: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          javascript: `window.__counterA = (window.__counterA || 0) + 1;`,
+          defineVars: true,
+        },
+      };
+      const defB: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          javascript: `window.__counterB = (window.__counterB || 0) + 1;`,
+          defineVars: true,
+        },
+      };
+      componentRegistry.register("A", defA);
+      componentRegistry.register("B", defB);
+
+      // Compose A and B on a single element via the space-separated data-component
+      // token list. querySelectorAll('[data-component~="A"]') matches this too.
+      const el = document.createElement("div");
+      el.setAttribute("data-component", "A B");
+      el.setAttribute("data-props", JSON.stringify({ A: {}, B: {} }));
+      document.body.appendChild(el);
+
+      scriptExecutor.execute();
+      scriptExecutor.execute();
+
+      const w = window as unknown as Record<string, number>;
+      expect(w.__counterA).toBe(1);
+      expect(w.__counterB).toBe(1);
+
+      delete (window as unknown as { __counterA?: unknown }).__counterA;
+      delete (window as unknown as { __counterB?: unknown }).__counterB;
+    });
+
+    test("executeForElement bypasses the bind dedup (prop-edit reactivity must still re-run)", () => {
+      registerCounterComponent();
+      const el = mountInstance("BoundComp");
+
+      scriptExecutor.execute();
+      expect(win[COUNTER_KEY]).toBe(1);
+
+      // Prop edit on the same element — the editor calls executeForElement
+      // to push fresh props. It MUST run the body again even though
+      // boundElements already marks (el, "BoundComp") as bound.
+      scriptExecutor.executeForElement("BoundComp", el, {});
+      expect(win[COUNTER_KEY]).toBe(2);
+
+      scriptExecutor.executeForElement("BoundComp", el, {});
+      expect(win[COUNTER_KEY]).toBe(3);
+    });
+
+    test("with no host hook installed the wrapper binds on every execute() (legacy fallback)", () => {
+      // Tear down the host hook the constructor installed. This is what
+      // direct-browser / non-runtime contexts look like — no editor host.
+      delete (window as unknown as { __menoShouldBind?: unknown }).__menoShouldBind;
+
+      registerCounterComponent();
+      mountInstance("BoundComp");
+
+      scriptExecutor.execute();
+      scriptExecutor.execute();
+
+      // Without the hook the wrapper can't dedup, so the JS body runs
+      // once per execute(). This preserves how a built site behaves when
+      // the wrapper happens to be re-evaluated.
+      expect(win[COUNTER_KEY]).toBe(2);
+    });
+  });
+
   describe("integration", () => {
     test.skip("should handle full execution cycle with multiple components and instances (requires @meno/studio ElementRegistry)", () => {
       const componentDef1: ComponentDefinition = {