meno-core 1.0.52 → 1.0.53

package/dist/lib/client/index.js

@@ -2,6 +2,7 @@ import {
   evaluateTemplate,
   extractAttributesFromNode,
   hasTemplates,
+  inlineSvgStyleRules,
   isHtmlMapping,
   isLinkMapping,
   mergeNodeStyles,
@@ -12,12 +13,12 @@ import {
   resolveLinkMapping,
   resolveStyleMapping,
   skipEmptyTemplateAttributes
-} from "../../chunks/chunk-EDQSMAMP.js";
+} from "../../chunks/chunk-O3NAGJP4.js";
 import {
   filterCSSProperties,
   logNetworkError,
   logRuntimeError
-} from "../../chunks/chunk-LPVETICS.js";
+} from "../../chunks/chunk-H3GJ4H2U.js";
 import {
   BaseComponentRegistry,
   DEFAULT_PREFETCH_CONFIG,
@@ -55,11 +56,13 @@ import {
   resolveItemsTemplate,
   resolvePropsFromDefinition,
   responsiveStylesToClasses,
+  rewriteViewportUnits,
   setGlobalTemplateContext,
   singularize,
   sortClassesByPropertyOrder,
+  toFriendlyError,
   validatePageData
-} from "../../chunks/chunk-7NIC4I3V.js";
+} from "../../chunks/chunk-JGWFTO6P.js";
 import {
   DEFAULT_BREAKPOINTS,
   DEFAULT_I18N_CONFIG,
@@ -84,7 +87,7 @@ import {
   NOT_FOUND_TIMEOUT_MS,
   RAW_HTML_PREFIX,
   init_constants
-} from "../../chunks/chunk-2QK6U5UK.js";
+} from "../../chunks/chunk-YBLHKYFF.js";
 import "../../chunks/chunk-KSBZ2L7C.js";
 
 // lib/client/core/ComponentBuilder.ts
@@ -129,6 +132,9 @@ var ErrorBoundary = class extends Component {
       if (fallback) {
         return fallback(error, errorInfo);
       }
+      const friendly = toFriendlyError(error);
+      const friendlyMessage = friendly.friendlyMessage.replace(/`/g, "");
+      const friendlyHint = friendly.hint?.replace(/`/g, "");
       if (level === "page") {
         return h(
           "div",
@@ -157,7 +163,7 @@ var ErrorBoundary = class extends Component {
                 fontSize: "24px",
                 fontWeight: "600"
               }
-            }, "\u26A0\uFE0F Page Rendering Error"),
+            }, `\u26A0\uFE0F ${friendly.title}`),
             h("p", {
               style: {
                 margin: "0 0 16px 0",
@@ -165,21 +171,8 @@ var ErrorBoundary = class extends Component {
                 fontSize: "16px",
                 lineHeight: "1.5"
               }
-            }, "An error occurred while rendering this page. Please check your JSON configuration."),
-            h("div", {
-              style: {
-                background: "#fff",
-                border: "1px solid #ddd",
-                borderRadius: "4px",
-                padding: "16px",
-                marginBottom: "16px",
-                fontFamily: "monospace",
-                fontSize: "14px",
-                color: "#c00",
-                overflowX: "auto"
-              }
-            }, error.message),
-            process.env.NODE_ENV === "development" && errorInfo?.componentStack && h(
+            }, friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage),
+            h(
               "details",
               {
                 style: {
@@ -194,8 +187,21 @@ var ErrorBoundary = class extends Component {
                   fontWeight: "600",
                   marginBottom: "8px"
                 }
-              }, "Stack Trace"),
-              h("pre", {
+              }, "Technical details"),
+              h("div", {
+                style: {
+                  background: "#fff",
+                  border: "1px solid #ddd",
+                  borderRadius: "4px",
+                  padding: "16px",
+                  margin: "8px 0",
+                  fontFamily: "monospace",
+                  fontSize: "14px",
+                  color: "#c00",
+                  overflowX: "auto"
+                }
+              }, error.message),
+              process.env.NODE_ENV === "development" && errorInfo?.componentStack && h("pre", {
                 style: {
                   background: "#f5f5f5",
                   border: "1px solid #ddd",
@@ -256,10 +262,18 @@ var ErrorBoundary = class extends Component {
               color: "#c00",
               fontSize: "14px"
             }
-          }, `Component Error${componentName ? `: ${componentName}` : ""}`)
+          }, `${friendly.title}${componentName ? ` (${componentName})` : ""}`)
         ),
         h("div", {
           style: {
+            fontSize: "13px",
+            color: "#666",
+            lineHeight: "1.5"
+          }
+        }, friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage),
+        process.env.NODE_ENV === "development" && h("div", {
+          style: {
+            marginTop: "8px",
             fontSize: "12px",
             color: "#666",
             fontFamily: "monospace",
@@ -467,6 +481,29 @@ async function initializeBreakpoints(forceRefresh = false) {
 }
 var initializeConfig = initializeBreakpoints;
 
+// lib/client/styles/cspNonce.ts
+var cached;
+function getCspNonce() {
+  if (cached !== void 0) return cached;
+  if (typeof document === "undefined") {
+    cached = null;
+    return cached;
+  }
+  try {
+    const meta = document.querySelector('meta[name="csp-nonce"]');
+    cached = meta?.getAttribute("content") ?? null;
+  } catch {
+    cached = null;
+  }
+  return cached;
+}
+function applyNonce(el) {
+  const n = getCspNonce();
+  if (n) {
+    el.nonce = n;
+  }
+}
+
 // lib/client/styles/UtilityClassCollector.ts
 function buildResponsivePrefixMap(breakpoints) {
   const breakpointValues = getBreakpointValues(breakpoints);
@@ -531,6 +568,7 @@ var UtilityClassCollectorImpl = class {
     if (document.head) {
       this.styleEl = document.createElement("style");
       this.styleEl.id = "utility-css";
+      applyNonce(this.styleEl);
       document.head.appendChild(this.styleEl);
     }
     return this.styleEl;
@@ -554,7 +592,7 @@ var UtilityClassCollectorImpl = class {
       if (this.injectedRules.has(name)) continue;
       const css = generateSingleClassCSS(name, breakpointConfig2, responsiveScalesConfig2, remConversionConfig2);
       if (css) {
-        this.injectedRules.set(name, css);
+        this.injectedRules.set(name, rewriteViewportUnits(css));
         hasNew = true;
       }
     }
@@ -706,8 +744,8 @@ function hasCMSTemplate(text) {
 import { createElement as h2 } from "react";
 import DOMPurify from "isomorphic-dompurify";
 var SANITIZE_CONFIG = {
-  ALLOWED_TAGS: ["svg", "path", "circle", "rect", "line", "polyline", "polygon", "g", "text", "tspan", "image", "defs", "use", "linearGradient", "radialGradient", "stop", "clipPath", "mask", "pattern", "marker", "symbol", "a", "div", "span", "p", "br", "button", "img", "iframe", "video", "audio", "source", "canvas", "b", "i", "u", "strong", "em", "sub", "sup", "mark", "s", "small", "del", "ins", "q", "abbr", "code", "pre", "blockquote", "ul", "ol", "li", "h1", "h2", "h3", "h4", "h5", "h6", "style", "animate", "animateTransform", "animateMotion", "set"],
-  ALLOWED_ATTR: ["class", "id", "style", "width", "height", "viewBox", "xmlns", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray", "stroke-dashoffset", "d", "cx", "cy", "r", "x", "y", "x1", "y1", "x2", "y2", "points", "href", "src", "alt", "target", "rel", "data-*", "aria-*", "transform", "opacity", "fill-opacity", "stroke-opacity", "font-size", "font-family", "text-anchor", "dominant-baseline", "offset", "stop-color", "stop-opacity", "frameborder", "allowfullscreen", "allow", "title", "attributeName", "values", "dur", "begin", "end", "repeatCount", "repeatDur", "keyTimes", "keySplines", "calcMode", "from", "to", "by", "additive", "accumulate", "type", "rotate", "keyPoints", "path"],
+  ALLOWED_TAGS: ["svg", "path", "circle", "rect", "line", "polyline", "polygon", "g", "text", "tspan", "image", "defs", "use", "linearGradient", "radialGradient", "stop", "clipPath", "mask", "pattern", "marker", "symbol", "a", "div", "span", "p", "br", "button", "img", "iframe", "video", "audio", "source", "canvas", "b", "i", "u", "strong", "em", "sub", "sup", "mark", "s", "small", "del", "ins", "q", "abbr", "code", "pre", "blockquote", "ul", "ol", "li", "h1", "h2", "h3", "h4", "h5", "h6", "style", "animate", "animateTransform", "animateMotion", "set", "filter", "feGaussianBlur", "feOffset", "feMerge", "feMergeNode", "feColorMatrix", "feComposite", "feFlood", "feMorphology", "feBlend", "feDropShadow", "feTurbulence", "feDisplacementMap", "foreignObject"],
+  ALLOWED_ATTR: ["class", "id", "style", "width", "height", "viewBox", "xmlns", "xmlns:xlink", "xlink:href", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray", "stroke-dashoffset", "d", "cx", "cy", "r", "x", "y", "x1", "y1", "x2", "y2", "points", "href", "src", "alt", "target", "rel", "data-*", "aria-*", "transform", "opacity", "fill-opacity", "fill-rule", "clip-rule", "clip-path", "clipPathUnits", "mask", "mask-type", "maskUnits", "maskContentUnits", "patternUnits", "patternContentUnits", "patternTransform", "gradientUnits", "gradientTransform", "spreadMethod", "preserveAspectRatio", "marker-start", "marker-mid", "marker-end", "markerUnits", "markerWidth", "markerHeight", "refX", "refY", "orient", "paint-order", "vector-effect", "filter", "filterUnits", "primitiveUnits", "in", "in2", "result", "stdDeviation", "flood-color", "flood-opacity", "stroke-opacity", "font-size", "font-family", "font-weight", "font-style", "text-anchor", "dominant-baseline", "offset", "stop-color", "stop-opacity", "frameborder", "allowfullscreen", "allow", "title", "attributeName", "values", "dur", "begin", "end", "repeatCount", "repeatDur", "keyTimes", "keySplines", "calcMode", "from", "to", "by", "additive", "accumulate", "type", "rotate", "keyPoints", "path"],
   KEEP_CONTENT: true
 };
 function buildEmbed(node, ctx, deps) {
@@ -723,7 +761,7 @@ function buildEmbed(node, ctx, deps) {
     const effectiveLocale = ctx.cmsLocale || ctx.locale;
     htmlContent = processCMSTemplate(htmlContent, ctx.cmsContext, effectiveLocale);
   }
-  const sanitizedHtml = DOMPurify.sanitize(htmlContent, SANITIZE_CONFIG);
+  const sanitizedHtml = inlineSvgStyleRules(DOMPurify.sanitize(htmlContent, SANITIZE_CONFIG));
   const effectiveParentComponentName = deps.getEffectiveParentComponentName(componentContext, parentComponentName);
   const extractedAttributes = extractAttributesFromNode(node);
   const embedProps = {
@@ -1229,6 +1267,15 @@ function buildList(node, children, ctx, deps) {
     containerProps["data-list"] = "true";
     containerProps["data-source"] = source || (sourceIsResolved ? "resolved" : "");
   }
+  if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
+    containerProps["data-cms-item-index"] = cmsItemIndexPath.join(".");
+    if (cmsListPaths && cmsListPaths.length === cmsItemIndexPath.length) {
+      containerProps["data-cms-context"] = JSON.stringify({
+        itemIndexPath: cmsItemIndexPath,
+        listPaths: cmsListPaths
+      });
+    }
+  }
   if (Object.keys(extractedAttributes).length > 0) {
     Object.assign(containerProps, extractedAttributes);
   }
@@ -1330,17 +1377,19 @@ function buildList(node, children, ctx, deps) {
       templateContext: itemTemplateContext,
       componentResolvedProps
     });
+    const cmsItem = item;
+    const itemKey = cmsItem?._id ?? cmsItem?._filename ?? index;
     if (itemChildren === null) continue;
     if (Array.isArray(itemChildren)) {
       for (const child of itemChildren) {
         if (typeof child === "object" && child !== null && "key" in child) {
-          renderedItems.push({ ...child, key: `${child.key}-item-${index}` });
+          renderedItems.push({ ...child, key: `${child.key}-item-${itemKey}` });
         } else {
           renderedItems.push(child);
         }
       }
     } else if (typeof itemChildren === "object" && itemChildren !== null && "key" in itemChildren) {
-      renderedItems.push({ ...itemChildren, key: `${itemChildren.key}-item-${index}` });
+      renderedItems.push({ ...itemChildren, key: `${itemChildren.key}-item-${itemKey}` });
     } else {
       renderedItems.push(itemChildren);
     }
@@ -1679,18 +1728,18 @@ var ComponentBuilder = class {
    * Get cached utility classes for a style object
    */
   getCachedStyleClasses(style) {
-    let cached = this.styleClassCache.get(style);
-    if (!cached) {
+    let cached2 = this.styleClassCache.get(style);
+    if (!cached2) {
       const scales = getCachedResponsiveScalesConfig();
       const fluidActive = scales?.enabled === true && scales?.mode === "fluid";
-      cached = responsiveStylesToClasses(
+      cached2 = responsiveStylesToClasses(
         style,
         { fluidActive, responsiveScales: scales ?? void 0 }
       );
-      this.styleClassCache.set(style, cached);
+      this.styleClassCache.set(style, cached2);
     }
-    UtilityClassCollector.collect(cached);
-    return cached;
+    UtilityClassCollector.collect(cached2);
+    return cached2;
   }
   /**
    * Helper function to create onClick handlers from JSON-defined onClick values
@@ -1861,6 +1910,9 @@ var ComponentBuilder = class {
       componentResolvedProps = null
     } = options;
     if (!node) return null;
+    if (typeof node === "object" && node._code === true) {
+      return null;
+    }
     if (isI18nValue(node)) {
       const i18nResolveConfig = i18nConfig ?? DEFAULT_I18N_CONFIG;
       const i18nEffectiveLocale = locale || i18nResolveConfig.defaultLocale;
@@ -2267,7 +2319,12 @@ var ComponentBuilder = class {
       itemContext = null,
       cmsItemIndexPath = null,
       cmsListPaths = null,
-      templateContext = null
+      templateContext = null,
+      // The host (outer) component's resolved props. Forwarded to
+      // `processStructure` as `parentProps` so a `{{x}}` in this
+      // component's structure falls back to the host's `x` when this
+      // component's interface doesn't declare it.
+      componentResolvedProps: parentResolvedProps = null
     } = options;
     const componentDef = this.componentRegistry.get(componentName);
     if (!componentDef) return null;
@@ -2298,7 +2355,11 @@ var ComponentBuilder = class {
       const markedChildren = typedChildren ? markAsSlotContent(typedChildren) : void 0;
       const processedStructure = processStructure(
         structuredComponentDef.structure,
-        { props: resolvedProps, componentDef: structuredComponentDef },
+        {
+          props: resolvedProps,
+          componentDef: structuredComponentDef,
+          parentProps: parentResolvedProps ?? void 0
+        },
         viewportWidth,
         markedChildren
       );
@@ -2523,7 +2584,7 @@ var RouteLoader = class {
    */
   async loadGlobalComponents(signal) {
     try {
-      const fetchOptions = { cache: "no-store" };
+      const fetchOptions = { cache: "default" };
       if (signal) {
         fetchOptions.signal = signal;
       }
@@ -2586,10 +2647,10 @@ var RouteLoader = class {
       if (this.config.onLocaleDetected && !this.isCancelled) {
         this.config.onLocaleDetected(locale);
       }
-      const cached = this.prefetchService?.getFromCache(pathWithoutLocale);
-      if (cached) {
+      const cached2 = this.prefetchService?.getFromCache(pathWithoutLocale);
+      if (cached2) {
         let tree2 = null;
-        const parsed2 = cached.data;
+        const parsed2 = cached2.data;
         if (parsed2.components) {
           this.config.componentRegistry.merge(parsed2.components);
           tree2 = parsed2.root || parsed2;
@@ -2606,7 +2667,7 @@ var RouteLoader = class {
         return tree2;
       }
       const response = await fetch(`${API_ROUTES.PAGE_CONTENT}?page=${encodeURIComponent(pathWithoutLocale)}`, {
-        cache: "no-store",
+        cache: "default",
         signal: abortController.signal
       });
       if (abortController.signal.aborted || this.isCancelled) {
@@ -3235,15 +3296,17 @@ ${originalCSS}`);
       }
     }
     if (processedCSSBlocks.length === 0) return;
-    const combinedCSS = processedCSSBlocks.join("\n\n");
+    const combinedCSS = rewriteViewportUnits(processedCSSBlocks.join("\n\n"));
     const hash = simpleHash(combinedCSS);
-    if (hash === this.previousComponentCSSHash) return;
+    const existing = typeof document !== "undefined" ? document.getElementById(this.styleId) : null;
+    if (hash === this.previousComponentCSSHash && existing) return;
     this.previousComponentCSSHash = hash;
     if (document.head) {
-      let styleTag = document.getElementById(this.styleId);
+      let styleTag = existing;
       if (!styleTag) {
         styleTag = document.createElement("style");
         styleTag.id = this.styleId;
+        applyNonce(styleTag);
         document.head.appendChild(styleTag);
       }
       styleTag.textContent = combinedCSS;
@@ -3261,13 +3324,16 @@ ${originalCSS}`);
       const breakpointConfig2 = getCachedBreakpointConfig() || DEFAULT_BREAKPOINTS;
       const remConversionConfig2 = getCachedRemConversionConfig() || void 0;
       const responsiveScalesConfig2 = getCachedResponsiveScalesConfig() || void 0;
-      const interactiveCSS = generateAllInteractiveCSS(interactiveStylesMap, breakpointConfig2, remConversionConfig2, responsiveScalesConfig2);
+      const interactiveCSS = rewriteViewportUnits(
+        generateAllInteractiveCSS(interactiveStylesMap, breakpointConfig2, remConversionConfig2, responsiveScalesConfig2)
+      );
       if (!interactiveCSS) return;
       if (document.head) {
         let styleTag = document.getElementById(interactiveStyleId);
         if (!styleTag) {
           styleTag = document.createElement("style");
           styleTag.id = interactiveStyleId;
+          applyNonce(styleTag);
           document.head.appendChild(styleTag);
         }
         styleTag.textContent = interactiveCSS;
@@ -3308,9 +3374,33 @@ function generateDestructure(defineVars, interfaceDef) {
 var ScriptExecutor = class {
   componentRegistry;
   elementRegistry;
+  // Tracks which (element, componentName) pairs have already had their user
+  // JS executed. Prevents stacking side effects (IntersectionObservers,
+  // event listeners, intervals) when execute() is re-called on the same
+  // DOM nodes after a structural commit. WeakMap stays out of the DOM and
+  // GCs cleanly when React unmounts elements.
+  boundElements = /* @__PURE__ */ new WeakMap();
   constructor(config) {
     this.componentRegistry = config.componentRegistry;
     this.elementRegistry = config.elementRegistry;
+    if (typeof window !== "undefined") {
+      window.__menoShouldBind = (el, name) => this.shouldBind(el, name);
+    }
+  }
+  /**
+   * Check whether (element, componentName) has already been bound this
+   * session. Records the bind on first call. Returns `true` if the caller
+   * should run the user JS, `false` if it should skip.
+   */
+  shouldBind(el, componentName) {
+    let names = this.boundElements.get(el);
+    if (names && names.has(componentName)) return false;
+    if (!names) {
+      names = /* @__PURE__ */ new Set();
+      this.boundElements.set(el, names);
+    }
+    names.add(componentName);
+    return true;
   }
   /**
    * Execute JavaScript code via new Function() with error isolation
@@ -3350,6 +3440,10 @@ var ScriptExecutor = class {
       if (!props) {
         return;
       }
+      const instanceEl = this.elementRegistry.get(rootPath);
+      if (instanceEl && !this.shouldBind(instanceEl, componentName)) {
+        return;
+      }
       try {
         const processedJS = processCodeTemplates(originalJS, props);
         this.executeWrappedJS(processedJS, `${componentName} (instance: ${rootPath})`);
@@ -3375,10 +3469,20 @@ var ScriptExecutor = class {
       // Component: ${componentName} (defineVars)
       try {
         var elements = document.querySelectorAll('[data-component~="${componentName}"]');
+        var shouldBind = (typeof window !== 'undefined' && typeof window.__menoShouldBind === 'function')
+          ? window.__menoShouldBind
+          : null;
         elements.forEach(function(el) {
+          // Skip elements already bound for this component. When the host
+          // hook is absent (direct <script> use, test harness), bind
+          // unconditionally \u2014 preserves legacy "runs once at page load"
+          // semantics for non-runtime contexts.
+          if (shouldBind && !shouldBind(el, ${JSON.stringify(componentName)})) {
+            return;
+          }
           var propsStr = el.getAttribute('data-props');
           var allProps = propsStr ? JSON.parse(propsStr) : {};
-          var props = allProps["${componentName}"] || {};
+          var props = allProps[${JSON.stringify(componentName)}] || {};
           (function(el, props) {
             ${destructure}
             ${js}
@@ -3478,7 +3582,12 @@ var ScriptExecutor = class {
   }
   /**
    * Re-execute JavaScript for a specific element instance (used for editor reactivity)
-   * Updates data-props attribute and re-runs the component JS for that element
+   * Updates data-props attribute and re-runs the component JS for that element.
+   *
+   * NOTE: This path intentionally bypasses the per-element bind dedup
+   * (`boundElements` / `shouldBind`). It exists so live prop edits in the
+   * editor can re-run the user JS on demand with new prop values — the
+   * caller is signaling "re-bind this element now," not "bind once."
    * @param componentName - Component name
    * @param element - The DOM element to re-execute for
    * @param newProps - New props to inject
@@ -3858,6 +3967,7 @@ function Router(props = {}) {
   const [cmsTemplatePath, setCmsTemplatePath] = useState2(null);
   const lastCommitTimestampRef = useRef2(0);
   const COMMIT_GRACE_MS = 1e3;
+  const lastCommitStructureChangedRef = useRef2(true);
   const ssrCmsHandledRef = useRef2(false);
   const initialLoadDoneRef = useRef2(false);
   const routeLoader = useRef2(new RouteLoader({
@@ -3934,29 +4044,51 @@ function Router(props = {}) {
   useEffect2(() => {
     if (typeof window === "undefined") return;
     const handleMessage = (event) => {
-      if (event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_UPDATE) {
-        const { name, value } = event.data;
-        document.documentElement.style.setProperty(name, value);
+      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;
+        const styleId = "meno-scrub-preview";
+        let styleTag = document.getElementById(styleId);
+        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;
       }
       if (event.data?.type === IFRAME_MESSAGE_TYPES.INTERACTIVE_CSS_UPDATE) {
         const css = event.data.css;
         const styleId = "interactive-styles";
-        const existingStyle = document.getElementById(styleId);
-        if (existingStyle) {
-          existingStyle.remove();
-        }
-        if (css && document.head) {
-          const styleTag = document.createElement("style");
+        if (!css) return;
+        if (!document.head) return;
+        const rewritten = rewriteViewportUnits(css);
+        let styleTag = document.getElementById(styleId);
+        if (!styleTag) {
+          styleTag = document.createElement("style");
           styleTag.id = styleId;
-          styleTag.textContent = css;
+          applyNonce(styleTag);
           document.head.appendChild(styleTag);
         }
+        styleTag.textContent = rewritten;
       }
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, []);
+  useEffect2(() => {
+    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);
+  }, []);
   useEffect2(() => {
     if (typeof window === "undefined") return;
     const handleMessage = (event) => {
@@ -3969,6 +4101,7 @@ function Router(props = {}) {
         setPreviewComponentTree(null);
       } else if (event.data?.type === IFRAME_MESSAGE_TYPES.PAGE_DATA_COMMITTED) {
         lastCommitTimestampRef.current = Date.now();
+        lastCommitStructureChangedRef.current = event.data.structureChanged !== false;
         const pageData = event.data.pageData;
         if (pageData?.root) {
           setComponentTree(pageData.root);
@@ -3977,6 +4110,7 @@ function Router(props = {}) {
         }
       } 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);
@@ -4012,7 +4146,9 @@ function Router(props = {}) {
           styles: registryData
         }, "*");
       }
-      if (!disableScripts) {
+      const shouldRunScripts = !disableScripts && lastCommitStructureChangedRef.current;
+      lastCommitStructureChangedRef.current = true;
+      if (shouldRunScripts) {
         const timeoutId = setTimeout(() => {
           services.scriptExecutor.execute();
         }, 100);
@@ -4429,6 +4565,7 @@ ${vars}
     if (!themeStyleTag) {
       themeStyleTag = document.createElement("style");
       themeStyleTag.id = "hmr-theme-variables";
+      applyNonce(themeStyleTag);
       const mainStyle = document.querySelector("style");
       if (mainStyle && mainStyle.nextSibling) {
         document.head.insertBefore(themeStyleTag, mainStyle.nextSibling);
@@ -4646,6 +4783,159 @@ function mergeStyles(...styles) {
   }, {});
 }
 
+// lib/client/hmrCssReload.ts
+async function injectUpdatedThemeCSS2() {
+  try {
+    const themesResponse = await fetch("/api/themes");
+    if (!themesResponse.ok) return;
+    const themesData = await themesResponse.json();
+    const themeColors = {};
+    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;
+      }
+    }
+    const defaultResponse = await fetch("/api/colors");
+    if (defaultResponse.ok) {
+      themeColors["default"] = (await defaultResponse.json()).colors;
+    }
+    let css = "";
+    if (themeColors["default"]) {
+      const vars = Object.entries(themeColors["default"]).map(([name, value]) => `  --${name}: ${value};`).join("\n");
+      css += `:root {
+${vars}
+}
+
+`;
+    }
+    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}"] {
+${vars}
+}
+
+`;
+      }
+    }
+    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 {
+  }
+}
+async function injectUpdatedVariablesCSS() {
+  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 {
+  }
+}
+async function injectUpdatedFontsCSS() {
+  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 {
+  }
+}
+function setupCssHmrListeners() {
+  if (typeof window === "undefined") return;
+  if (!window.__hmrColorsInitialized) {
+    window.__hmrColorsInitialized = true;
+    document.addEventListener("hmr-colors-update", () => {
+      void injectUpdatedThemeCSS2();
+    });
+  }
+  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();
+    });
+  }
+}
+
+// lib/client/fontFamiliesService.ts
+function extractFamilyFromPath(path) {
+  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) {
+  if (!Array.isArray(fonts)) return [];
+  const set = /* @__PURE__ */ new Set();
+  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];
+}
+var cachedFamilies = null;
+var inFlight = null;
+async function fetchFontFamilies() {
+  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;
+}
+function getCachedFontFamilies() {
+  return cachedFamilies || [];
+}
+function invalidateFontFamilies() {
+  cachedFamilies = null;
+  inFlight = null;
+}
+async function initializeFontFamilies(forceRefresh = false) {
+  if (forceRefresh) invalidateFontFamilies();
+  await fetchFontFamilies();
+}
+
 // lib/client/hooks/usePropertyAutocomplete.ts
 import { useState as useState5, useRef as useRef4 } from "react";
 function usePropertyAutocomplete(initialProperty = "") {
@@ -4775,8 +5065,10 @@ export {
   detectSSRContent,
   elementRegistry,
   evaluateTemplate,
+  fetchFontFamilies,
   fetchI18nConfig,
   getCachedBreakpointConfig,
+  getCachedFontFamilies,
   getCachedRemConversionConfig,
   getCachedResponsiveScalesConfig,
   getColorVariableSuggestions,
@@ -4789,6 +5081,8 @@ export {
   hasTemplates,
   initializeBreakpoints,
   initializeConfig,
+  initializeFontFamilies,
+  invalidateFontFamilies,
   invalidateI18nConfig,
   isColorVariableValue,
   isHtmlMapping,
@@ -4811,6 +5105,7 @@ export {
   resolveStyleMapping,
   setElementRegistry,
   setI18nConfig,
+  setupCssHmrListeners,
   useColorVariables,
   usePropertyAutocomplete,
   useTheme,