meno-core 1.0.53 → 1.1.0

package/dist/lib/client/index.js

@@ -13,15 +13,17 @@ import {
   resolveLinkMapping,
   resolveStyleMapping,
   skipEmptyTemplateAttributes
-} from "../../chunks/chunk-O3NAGJP4.js";
+} from "../../chunks/chunk-NUP7H7D3.js";
 import {
-  filterCSSProperties,
-  logNetworkError,
-  logRuntimeError
-} from "../../chunks/chunk-H3GJ4H2U.js";
+  filterCSSProperties
+} from "../../chunks/chunk-XTKNX4FW.js";
 import {
   BaseComponentRegistry,
+  DEFAULT_BREAKPOINTS,
   DEFAULT_PREFETCH_CONFIG,
+  DEFAULT_REM_CONFIG,
+  DEFAULT_RESPONSIVE_SCALES,
+  breakpointClassPrefixes,
   buildTemplateContext,
   extractInteractiveStyleMappings,
   extractNodeProperties,
@@ -29,6 +31,7 @@ import {
   generateElementClassName,
   generateRuleForClass,
   generateSingleClassCSS,
+  getBreakpointValues,
   getChildPath,
   getNestedValue,
   hasChildren,
@@ -36,10 +39,13 @@ import {
   hasInteractiveStyleMappings,
   hasItemTemplates,
   init_ComponentRegistry,
+  init_errorLogger,
   isBooleanMapping,
   isComponentNode,
   isCurrentLink,
+  isCustomNode,
   isEmbedNode,
+  isIslandNode,
   isItemDraftForLocale,
   isLinkNode,
   isListNode,
@@ -47,8 +53,12 @@ import {
   isResponsiveStyle,
   isSlotContent,
   isSlotMarker,
+  isValidNodeType,
+  logNetworkError,
+  logRuntimeError,
   markAsSlotContent,
   mergeResponsiveStyles,
+  normalizeBreakpointConfig,
   pathToString,
   processItemPropsTemplate,
   processItemTemplate,
@@ -62,24 +72,19 @@ import {
   sortClassesByPropertyOrder,
   toFriendlyError,
   validatePageData
-} from "../../chunks/chunk-JGWFTO6P.js";
+} from "../../chunks/chunk-2IIQK7T3.js";
 import {
-  DEFAULT_BREAKPOINTS,
   DEFAULT_I18N_CONFIG,
-  DEFAULT_REM_CONFIG,
-  DEFAULT_RESPONSIVE_SCALES,
-  getBreakpointValues,
   isI18nValue,
   migrateI18nConfig,
-  normalizeBreakpointConfig,
   parseLocaleFromPath,
   resolveI18nValue,
   setStoredLocale
-} from "../../chunks/chunk-AZQYF6KE.js";
+} from "../../chunks/chunk-4ZRU52J2.js";
 import {
   isTiptapDocument,
   tiptapToHtml
-} from "../../chunks/chunk-UB44F4Z2.js";
+} from "../../chunks/chunk-5X4HCN7J.js";
 import {
   API_ROUTES,
   IFRAME_MESSAGE_TYPES,
@@ -87,7 +92,7 @@ import {
   NOT_FOUND_TIMEOUT_MS,
   RAW_HTML_PREFIX,
   init_constants
-} from "../../chunks/chunk-YBLHKYFF.js";
+} from "../../chunks/chunk-AR7LHIFY.js";
 import "../../chunks/chunk-KSBZ2L7C.js";
 
 // lib/client/core/ComponentBuilder.ts
@@ -113,11 +118,7 @@ var ErrorBoundary = class extends Component {
   }
   componentDidCatch(error, errorInfo) {
     const { onError, componentName, level = "component" } = this.props;
-    console.error(
-      `\u274C [${level.toUpperCase()} ERROR]${componentName ? ` in ${componentName}` : ""}:`,
-      error,
-      errorInfo
-    );
+    console.error(`\u274C [${level.toUpperCase()} ERROR]${componentName ? ` in ${componentName}` : ""}:`, error, errorInfo);
     if (onError) {
       onError(error, errorInfo);
     }
@@ -156,77 +157,101 @@ var ErrorBoundary = class extends Component {
                 padding: "24px"
               }
             },
-            h("h2", {
-              style: {
-                margin: "0 0 16px 0",
-                color: "#c00",
-                fontSize: "24px",
-                fontWeight: "600"
-              }
-            }, `\u26A0\uFE0F ${friendly.title}`),
-            h("p", {
-              style: {
-                margin: "0 0 16px 0",
-                color: "#666",
-                fontSize: "16px",
-                lineHeight: "1.5"
-              }
-            }, friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage),
             h(
-              "details",
+              "h2",
               {
                 style: {
-                  marginTop: "16px",
-                  fontSize: "14px"
+                  margin: "0 0 16px 0",
+                  color: "#c00",
+                  fontSize: "24px",
+                  fontWeight: "600"
                 }
               },
-              h("summary", {
+              `\u26A0\uFE0F ${friendly.title}`
+            ),
+            h(
+              "p",
+              {
                 style: {
-                  cursor: "pointer",
+                  margin: "0 0 16px 0",
                   color: "#666",
-                  fontWeight: "600",
-                  marginBottom: "8px"
+                  fontSize: "16px",
+                  lineHeight: "1.5"
                 }
-              }, "Technical details"),
-              h("div", {
+              },
+              friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage
+            ),
+            h(
+              "details",
+              {
                 style: {
-                  background: "#fff",
-                  border: "1px solid #ddd",
-                  borderRadius: "4px",
-                  padding: "16px",
-                  margin: "8px 0",
-                  fontFamily: "monospace",
-                  fontSize: "14px",
-                  color: "#c00",
-                  overflowX: "auto"
+                  marginTop: "16px",
+                  fontSize: "14px"
                 }
-              }, error.message),
-              process.env.NODE_ENV === "development" && errorInfo?.componentStack && h("pre", {
+              },
+              h(
+                "summary",
+                {
+                  style: {
+                    cursor: "pointer",
+                    color: "#666",
+                    fontWeight: "600",
+                    marginBottom: "8px"
+                  }
+                },
+                "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",
+                    borderRadius: "4px",
+                    padding: "12px",
+                    fontSize: "12px",
+                    overflowX: "auto",
+                    color: "#333"
+                  }
+                },
+                errorInfo.componentStack
+              )
+            ),
+            h(
+              "button",
+              {
+                onClick: () => window.location.reload(),
                 style: {
-                  background: "#f5f5f5",
-                  border: "1px solid #ddd",
+                  marginTop: "16px",
+                  padding: "10px 20px",
+                  background: "#007acc",
+                  color: "#fff",
+                  border: "none",
                   borderRadius: "4px",
-                  padding: "12px",
-                  fontSize: "12px",
-                  overflowX: "auto",
-                  color: "#333"
+                  fontSize: "14px",
+                  fontWeight: "600",
+                  cursor: "pointer"
                 }
-              }, errorInfo.componentStack)
-            ),
-            h("button", {
-              onClick: () => window.location.reload(),
-              style: {
-                marginTop: "16px",
-                padding: "10px 20px",
-                background: "#007acc",
-                color: "#fff",
-                border: "none",
-                borderRadius: "4px",
-                fontSize: "14px",
-                fontWeight: "600",
-                cursor: "pointer"
-              }
-            }, "\u{1F504} Reload Page")
+              },
+              "\u{1F504} Reload Page"
+            )
           )
         );
       }
@@ -252,37 +277,53 @@ var ErrorBoundary = class extends Component {
               marginBottom: "8px"
             }
           },
-          h("span", {
+          h(
+            "span",
+            {
+              style: {
+                fontSize: "18px"
+              }
+            },
+            "\u26A0\uFE0F"
+          ),
+          h(
+            "strong",
+            {
+              style: {
+                color: "#c00",
+                fontSize: "14px"
+              }
+            },
+            `${friendly.title}${componentName ? ` (${componentName})` : ""}`
+          )
+        ),
+        h(
+          "div",
+          {
             style: {
-              fontSize: "18px"
+              fontSize: "13px",
+              color: "#666",
+              lineHeight: "1.5"
             }
-          }, "\u26A0\uFE0F"),
-          h("strong", {
+          },
+          friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage
+        ),
+        process.env.NODE_ENV === "development" && h(
+          "div",
+          {
             style: {
-              color: "#c00",
-              fontSize: "14px"
+              marginTop: "8px",
+              fontSize: "12px",
+              color: "#666",
+              fontFamily: "monospace",
+              background: "#fff",
+              padding: "8px",
+              borderRadius: "4px",
+              border: "1px solid #fcc"
             }
-          }, `${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",
-            background: "#fff",
-            padding: "8px",
-            borderRadius: "4px",
-            border: "1px solid #fcc"
-          }
-        }, error.message)
+          },
+          error.message
+        )
       );
     }
     return children;
@@ -364,18 +405,18 @@ var InteractiveStylesRegistry = new InteractiveStylesRegistryImpl();
 
 // lib/client/responsiveStyleResolver.ts
 var breakpointConfig = null;
-var breakpointPromise = null;
+var _breakpointPromise = null;
 var responsiveScalesConfig = null;
-var responsiveScalesPromise = null;
+var _responsiveScalesPromise = null;
 var remConversionConfig = null;
 var configPromise = null;
 function clearBreakpointConfigCache() {
   breakpointConfig = null;
-  breakpointPromise = null;
+  _breakpointPromise = null;
 }
 function clearResponsiveScalesConfigCache() {
   responsiveScalesConfig = null;
-  responsiveScalesPromise = null;
+  _responsiveScalesPromise = null;
 }
 function clearRemConversionConfigCache() {
   remConversionConfig = null;
@@ -384,6 +425,7 @@ function clearAllConfigCache() {
   clearBreakpointConfigCache();
   clearResponsiveScalesConfigCache();
   clearRemConversionConfigCache();
+  clearKnownTokensCache();
   configPromise = null;
 }
 function getCachedBreakpointConfig() {
@@ -395,6 +437,46 @@ function getCachedResponsiveScalesConfig() {
 function getCachedRemConversionConfig() {
   return remConversionConfig;
 }
+var knownTokens = null;
+var _knownTokensPromise = null;
+function getCachedKnownTokens() {
+  return knownTokens;
+}
+function clearKnownTokensCache() {
+  knownTokens = null;
+  _knownTokensPromise = null;
+}
+async function loadKnownTokens() {
+  if (knownTokens) return knownTokens;
+  if (!_knownTokensPromise) {
+    _knownTokensPromise = (async () => {
+      const tokens = /* @__PURE__ */ new Set();
+      try {
+        const res = await fetch("/api/colors-config");
+        if (res.ok) {
+          const cfg = await res.json();
+          for (const theme of Object.values(cfg?.themes ?? {})) {
+            for (const name of Object.keys(theme?.colors ?? {})) tokens.add(name);
+          }
+        }
+      } catch {
+      }
+      try {
+        const res = await fetch("/api/variables-status");
+        if (res.ok) {
+          const data = await res.json();
+          for (const v of data?.config?.variables ?? []) {
+            if (v?.cssVar) tokens.add(v.cssVar.replace(/^--/, ""));
+          }
+        }
+      } catch {
+      }
+      knownTokens = tokens;
+    })();
+  }
+  await _knownTokensPromise;
+  return knownTokens ?? /* @__PURE__ */ new Set();
+}
 async function loadConfig() {
   if (breakpointConfig && responsiveScalesConfig && remConversionConfig) {
     return;
@@ -509,37 +591,37 @@ function buildResponsivePrefixMap(breakpoints) {
   const breakpointValues = getBreakpointValues(breakpoints);
   const map = {};
   for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
-    let prefix = breakpointName.charAt(0).toLowerCase();
-    if (breakpointName.toLowerCase() === "mobile") {
-      prefix = "mob";
+    for (const prefix of breakpointClassPrefixes(breakpointName)) {
+      map[prefix] = breakpointValue;
     }
-    map[prefix] = breakpointValue;
   }
   return map;
 }
-function getClassBreakpointValue(className, prefixMap) {
-  for (const prefix of Object.keys(prefixMap)) {
-    if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
-      const potentialClass = className.substring(prefix.length + 1);
-      const rule = generateRuleForClass(potentialClass);
-      if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
-        return prefixMap[prefix];
+function getClassBreakpointValue(className, prefixMap, knownTokens2) {
+  for (const [prefix, prefixValue] of Object.entries(prefixMap)) {
+    if (className.startsWith(prefix) && className.length > prefix.length) {
+      const potentialClass = className.substring(prefix.length);
+      const rule = generateRuleForClass(potentialClass, knownTokens2);
+      if (rule) {
+        return prefixValue;
       }
     }
   }
   return 0;
 }
-function sortClassesWithBreakpointOrder(classes, breakpoints) {
+function sortClassesWithBreakpointOrder(classes, breakpoints, knownTokens2) {
   const prefixMap = buildResponsivePrefixMap(breakpoints);
   const arr = Array.from(classes);
   const keys = arr.map((cls) => {
-    const bpValue = getClassBreakpointValue(cls, prefixMap);
+    const bpValue = getClassBreakpointValue(cls, prefixMap, knownTokens2);
     return { cls, isResponsive: bpValue > 0 ? 1 : 0, bpValue };
   });
   const propertySorted = sortClassesByPropertyOrder(arr);
   const propertyOrderIndex = /* @__PURE__ */ new Map();
   for (let i = 0; i < propertySorted.length; i++) {
-    propertyOrderIndex.set(propertySorted[i], i);
+    const cls = propertySorted[i];
+    if (cls === void 0) continue;
+    propertyOrderIndex.set(cls, i);
   }
   keys.sort((a, b) => {
     if (a.isResponsive !== b.isResponsive) return a.isResponsive - b.isResponsive;
@@ -554,13 +636,15 @@ var UtilityClassCollectorImpl = class {
   injectedRules = /* @__PURE__ */ new Map();
   /** Cached reference to <style id="utility-css"> */
   styleEl = null;
+  /** Guards a single async warm of the known-token set (see collect()). */
+  knownTokensPending = false;
   /**
    * Ensure we have a valid reference to the utility-css style element.
    * Returns null during SSR (no document).
    */
   ensureStyleElement() {
     if (typeof document === "undefined") return null;
-    if (this.styleEl && this.styleEl.isConnected) {
+    if (this.styleEl?.isConnected) {
       return this.styleEl;
     }
     this.styleEl = document.getElementById("utility-css");
@@ -586,23 +670,38 @@ var UtilityClassCollectorImpl = class {
     const breakpointConfig2 = getCachedBreakpointConfig() || DEFAULT_BREAKPOINTS;
     const responsiveScalesConfig2 = getCachedResponsiveScalesConfig() || DEFAULT_RESPONSIVE_SCALES;
     const remConversionConfig2 = getCachedRemConversionConfig() || void 0;
+    const knownTokens2 = getCachedKnownTokens() ?? void 0;
     let hasNew = false;
     for (const name of classNames) {
       this.classes.add(name);
       if (this.injectedRules.has(name)) continue;
-      const css = generateSingleClassCSS(name, breakpointConfig2, responsiveScalesConfig2, remConversionConfig2);
+      const css = generateSingleClassCSS(
+        name,
+        breakpointConfig2,
+        responsiveScalesConfig2,
+        remConversionConfig2,
+        knownTokens2
+      );
       if (css) {
         this.injectedRules.set(name, rewriteViewportUnits(css));
         hasNew = true;
       }
     }
     if (hasNew) {
-      const sorted = sortClassesWithBreakpointOrder(this.injectedRules.keys(), breakpointConfig2);
+      const sorted = sortClassesWithBreakpointOrder(this.injectedRules.keys(), breakpointConfig2, knownTokens2);
       const styleEl = this.ensureStyleElement();
       if (styleEl) {
         styleEl.textContent = sorted.map((name) => this.injectedRules.get(name)).join("\n");
       }
     }
+    if (!getCachedKnownTokens() && !this.knownTokensPending) {
+      this.knownTokensPending = true;
+      void loadKnownTokens().then(() => {
+        this.knownTokensPending = false;
+        const pending = Array.from(this.classes).filter((n) => !this.injectedRules.has(n));
+        if (pending.length > 0) this.collect(pending);
+      });
+    }
   }
   /**
    * Clear collected classes for route change.
@@ -619,7 +718,8 @@ var UtilityClassCollectorImpl = class {
   destroy() {
     this.classes.clear();
     this.injectedRules.clear();
-    if (this.styleEl && this.styleEl.isConnected) {
+    this.knownTokensPending = false;
+    if (this.styleEl?.isConnected) {
       this.styleEl.remove();
     }
     this.styleEl = null;
@@ -698,7 +798,7 @@ function resolveI18nValue2(value, locale, config) {
 function processCMSTemplate(template, cmsItem, locale) {
   const config = getI18nConfig();
   const effectiveLocale = locale || config.defaultLocale;
-  return template.replace(/\{\{cms\.([^}]+)\}\}/g, (match, fieldPath) => {
+  return template.replace(/\{\{cms\.([^}]+)\}\}/g, (_match, fieldPath) => {
     const parts = fieldPath.trim().split(".");
     let value = cmsItem;
     for (const part of parts) {
@@ -744,8 +844,193 @@ 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", "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"],
+  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) {
@@ -784,7 +1069,7 @@ function buildEmbed(node, ctx, deps) {
   if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
     embedProps["data-cms-item-index"] = cmsItemIndexPath.join(".");
   }
-  let classNames = ["oem"];
+  const classNames = ["oem"];
   if (node.style) {
     let processedStyle = node.style;
     if (ctx.templateContext) {
@@ -799,10 +1084,10 @@ function buildEmbed(node, ctx, deps) {
     }
     const scales = getCachedResponsiveScalesConfig();
     const fluidActive = scales?.enabled === true && scales?.mode === "fluid";
-    const utilityClasses = responsiveStylesToClasses(
-      processedStyle,
-      { fluidActive, responsiveScales: scales ?? void 0 }
-    );
+    const utilityClasses = responsiveStylesToClasses(processedStyle, {
+      fluidActive,
+      responsiveScales: scales ?? void 0
+    });
     UtilityClassCollector.collect(utilityClasses);
     classNames.push(...utilityClasses);
   }
@@ -839,10 +1124,10 @@ function buildEmbed(node, ctx, deps) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
             const previewScales = getCachedResponsiveScalesConfig();
             const previewFluidActive = previewScales?.enabled === true && previewScales?.mode === "fluid";
-            const styleClasses = responsiveStylesToClasses(
-              rule.style,
-              { fluidActive: previewFluidActive, responsiveScales: previewScales ?? void 0 }
-            );
+            const styleClasses = responsiveStylesToClasses(rule.style, {
+              fluidActive: previewFluidActive,
+              responsiveScales: previewScales ?? void 0
+            });
             UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
@@ -869,11 +1154,7 @@ function buildEmbed(node, ctx, deps) {
     const effectiveLocale = ctx.cmsLocale || ctx.locale;
     const config = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
     const i18nResolver = effectiveLocale ? (value) => resolveI18nValue(value, effectiveLocale, config) : void 0;
-    processedAttributes = processItemPropsTemplate(
-      extractedAttributes,
-      ctx.templateContext,
-      i18nResolver
-    );
+    processedAttributes = processItemPropsTemplate(extractedAttributes, ctx.templateContext, i18nResolver);
   }
   if (Object.keys(processedAttributes).length > 0) {
     Object.assign(embedProps, processedAttributes);
@@ -929,7 +1210,7 @@ function buildLinkNode(node, children, ctx, deps) {
   if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
     linkNodeProps["data-cms-item-index"] = cmsItemIndexPath.join(".");
   }
-  let classNames = [];
+  const classNames = [];
   if (node.style) {
     let processedStyle = node.style;
     if (ctx.templateContext) {
@@ -944,10 +1225,10 @@ function buildLinkNode(node, children, ctx, deps) {
     }
     const scales = getCachedResponsiveScalesConfig();
     const fluidActive = scales?.enabled === true && scales?.mode === "fluid";
-    const utilityClasses = responsiveStylesToClasses(
-      processedStyle,
-      { fluidActive, responsiveScales: scales ?? void 0 }
-    );
+    const utilityClasses = responsiveStylesToClasses(processedStyle, {
+      fluidActive,
+      responsiveScales: scales ?? void 0
+    });
     UtilityClassCollector.collect(utilityClasses);
     classNames.push(...utilityClasses);
   }
@@ -984,10 +1265,10 @@ function buildLinkNode(node, children, ctx, deps) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
             const previewScales = getCachedResponsiveScalesConfig();
             const previewFluidActive = previewScales?.enabled === true && previewScales?.mode === "fluid";
-            const styleClasses = responsiveStylesToClasses(
-              rule.style,
-              { fluidActive: previewFluidActive, responsiveScales: previewScales ?? void 0 }
-            );
+            const styleClasses = responsiveStylesToClasses(rule.style, {
+              fluidActive: previewFluidActive,
+              responsiveScales: previewScales ?? void 0
+            });
             UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
@@ -1019,11 +1300,7 @@ function buildLinkNode(node, children, ctx, deps) {
     const effectiveLocale = ctx.cmsLocale || ctx.locale;
     const config = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
     const i18nResolver = effectiveLocale ? (value) => resolveI18nValue(value, effectiveLocale, config) : void 0;
-    processedAttributes = processItemPropsTemplate(
-      extractedAttributes,
-      ctx.templateContext,
-      i18nResolver
-    );
+    processedAttributes = processItemPropsTemplate(extractedAttributes, ctx.templateContext, i18nResolver);
   }
   if (Object.keys(processedAttributes).length > 0) {
     Object.assign(linkNodeProps, processedAttributes);
@@ -1088,14 +1365,14 @@ function buildLocaleList(node, ctx, deps) {
   if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
     localeListProps["data-cms-item-index"] = cmsItemIndexPath.join(".");
   }
-  let classNames = [];
+  const classNames = [];
   const scales = getCachedResponsiveScalesConfig();
   const fluidActive = scales?.enabled === true && scales?.mode === "fluid";
   if (node.style) {
-    const utilityClasses = responsiveStylesToClasses(
-      node.style,
-      { fluidActive, responsiveScales: scales ?? void 0 }
-    );
+    const utilityClasses = responsiveStylesToClasses(node.style, {
+      fluidActive,
+      responsiveScales: scales ?? void 0
+    });
     UtilityClassCollector.collect(utilityClasses);
     classNames.push(...utilityClasses);
   }
@@ -1130,10 +1407,10 @@ function buildLocaleList(node, ctx, deps) {
         const previewClasses = [];
         for (const rule of nodeInteractiveStyles) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
-            const styleClasses = responsiveStylesToClasses(
-              rule.style,
-              { fluidActive, responsiveScales: scales ?? void 0 }
-            );
+            const styleClasses = responsiveStylesToClasses(rule.style, {
+              fluidActive,
+              responsiveScales: scales ?? void 0
+            });
             UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
@@ -1169,10 +1446,22 @@ function buildLocaleList(node, ctx, deps) {
   const showFlag = node.showFlag !== false;
   const configLocales = i18nConfig?.locales || [];
   const currentLocaleCode = locale || i18nConfig?.defaultLocale || "en";
-  const itemClasses = node.itemStyle ? responsiveStylesToClasses(node.itemStyle, { fluidActive, responsiveScales: scales ?? void 0 }) : [];
-  const activeItemClasses = node.activeItemStyle ? responsiveStylesToClasses(node.activeItemStyle, { fluidActive, responsiveScales: scales ?? void 0 }) : [];
-  const separatorClasses = node.separatorStyle ? responsiveStylesToClasses(node.separatorStyle, { fluidActive, responsiveScales: scales ?? void 0 }) : [];
-  const flagClasses = node.flagStyle ? responsiveStylesToClasses(node.flagStyle, { fluidActive, responsiveScales: scales ?? void 0 }) : [];
+  const itemClasses = node.itemStyle ? responsiveStylesToClasses(node.itemStyle, {
+    fluidActive,
+    responsiveScales: scales ?? void 0
+  }) : [];
+  const activeItemClasses = node.activeItemStyle ? responsiveStylesToClasses(node.activeItemStyle, {
+    fluidActive,
+    responsiveScales: scales ?? void 0
+  }) : [];
+  const separatorClasses = node.separatorStyle ? responsiveStylesToClasses(node.separatorStyle, {
+    fluidActive,
+    responsiveScales: scales ?? void 0
+  }) : [];
+  const flagClasses = node.flagStyle ? responsiveStylesToClasses(node.flagStyle, {
+    fluidActive,
+    responsiveScales: scales ?? void 0
+  }) : [];
   UtilityClassCollector.collect(itemClasses);
   UtilityClassCollector.collect(activeItemClasses);
   UtilityClassCollector.collect(separatorClasses);
@@ -1180,22 +1469,27 @@ function buildLocaleList(node, ctx, deps) {
   const linkElements = [];
   for (let i = 0; i < configLocales.length; i++) {
     const localeConfig = configLocales[i];
+    if (!localeConfig) continue;
     const isCurrent = localeConfig.code === currentLocaleCode;
     if (!showCurrent && isCurrent) continue;
     if (showSeparator && linkElements.length > 0) {
-      linkElements.push(h4("span", {
-        key: `sep-${i}`,
-        className: separatorClasses.length > 0 ? separatorClasses.join(" ") : void 0
-      }));
+      linkElements.push(
+        h4("span", {
+          key: `sep-${i}`,
+          className: separatorClasses.length > 0 ? separatorClasses.join(" ") : void 0
+        })
+      );
     }
     const linkContent = [];
     if (showFlag && localeConfig.icon) {
-      linkContent.push(h4("img", {
-        key: "flag",
-        src: localeConfig.icon,
-        alt: `${localeConfig.name} flag`,
-        className: flagClasses.length > 0 ? flagClasses.join(" ") : void 0
-      }));
+      linkContent.push(
+        h4("img", {
+          key: "flag",
+          src: localeConfig.icon,
+          alt: `${localeConfig.name} flag`,
+          className: flagClasses.length > 0 ? flagClasses.join(" ") : void 0
+        })
+      );
     }
     const displayType = node.displayType || "nativeName";
     let displayText;
@@ -1206,20 +1500,25 @@ function buildLocaleList(node, ctx, deps) {
       case "name":
         displayText = localeConfig.name;
         break;
-      case "nativeName":
       default:
         displayText = localeConfig.nativeName;
         break;
     }
     linkContent.push(h4("div", { key: "text" }, displayText));
     const linkClasses = isCurrent ? [...itemClasses, ...activeItemClasses] : itemClasses;
-    linkElements.push(h4("div", {
-      key: `locale-${localeConfig.code}`,
-      "data-current": isCurrent ? "true" : "false",
-      "data-locale": localeConfig.code,
-      className: linkClasses.length > 0 ? linkClasses.join(" ") : void 0,
-      style: { cursor: "pointer" }
-    }, ...linkContent));
+    linkElements.push(
+      h4(
+        "div",
+        {
+          key: `locale-${localeConfig.code}`,
+          "data-current": isCurrent ? "true" : "false",
+          "data-locale": localeConfig.code,
+          className: linkClasses.length > 0 ? linkClasses.join(" ") : void 0,
+          style: { cursor: "pointer" }
+        },
+        ...linkContent
+      )
+    );
   }
   return h4("div", localeListProps, linkElements);
 }
@@ -1248,9 +1547,14 @@ function buildList(node, children, ctx, deps) {
   const isLegacyCMSList = nodeType === "cms-list";
   const sourceType = isLegacyCMSList ? "collection" : node.sourceType || "prop";
   const isCollectionMode = sourceType === "collection";
+  const isRemoteMode = sourceType === "remote";
+  const remoteUrl = isRemoteMode && typeof node.url === "string" ? node.url : "";
+  const isSanityMode = sourceType === "sanity";
+  const sanityKey = isSanityMode && typeof node.documentType === "string" ? node.documentType : "";
   const rawSource = node.source || node.collection;
   const source = typeof rawSource === "string" ? rawSource : "";
   const sourceIsResolved = Array.isArray(rawSource);
+  const hasSource = sourceIsResolved || Boolean(source) || isRemoteMode && Boolean(remoteUrl) || isSanityMode && Boolean(sanityKey);
   const effectiveParentComponentName = deps.getEffectiveParentComponentName(componentContext, parentComponentName);
   const extractedAttributes = extractAttributesFromNode(node);
   const containerProps = {
@@ -1263,6 +1567,14 @@ function buildList(node, children, ctx, deps) {
   containerProps["data-cms-list"] = "true";
   if (isCollectionMode) {
     containerProps["data-collection"] = source || "";
+  } else if (isRemoteMode) {
+    containerProps["data-list"] = "true";
+    containerProps["data-source-type"] = "remote";
+    containerProps["data-source"] = remoteUrl;
+  } else if (isSanityMode) {
+    containerProps["data-list"] = "true";
+    containerProps["data-source-type"] = "sanity";
+    containerProps["data-source"] = sanityKey;
   } else {
     containerProps["data-list"] = "true";
     containerProps["data-source"] = source || (sourceIsResolved ? "resolved" : "");
@@ -1288,6 +1600,12 @@ function buildList(node, children, ctx, deps) {
   let itemsToRender;
   if (isCollectionMode) {
     itemsToRender = getCollectionItems(node, source, ctx);
+  } else if (isRemoteMode) {
+    itemsToRender = getCollectionItems(node, remoteUrl, ctx);
+  } else if (isSanityMode) {
+    itemsToRender = getCollectionItems(node, sanityKey, ctx);
+  } else if (sourceType === "expression") {
+    itemsToRender = [];
   } else {
     if (sourceIsResolved) {
       itemsToRender = rawSource;
@@ -1308,41 +1626,49 @@ function buildList(node, children, ctx, deps) {
   const bgColor = isCollectionMode ? "rgba(139, 92, 246, 0.05)" : "rgba(59, 130, 246, 0.05)";
   const borderColor = isCollectionMode ? "rgba(139, 92, 246, 0.3)" : "rgba(59, 130, 246, 0.3)";
   const textColor = isCollectionMode ? "#8b5cf6" : "#3b82f6";
-  const label = isCollectionMode ? "CMS List" : "List";
+  const label = isCollectionMode ? "CMS List" : isRemoteMode ? "Remote List" : isSanityMode ? "Sanity List" : "List";
   const tag = typeof node.tag === "string" ? node.tag : null;
-  if (!source && !sourceIsResolved) {
-    const emptyState = h5("div", {
-      key: "list-empty",
-      style: {
-        padding: "12px",
-        background: bgColor,
-        border: `1px dashed ${borderColor}`,
-        borderRadius: "4px",
-        color: textColor,
-        fontSize: "12px",
-        fontFamily: "system-ui, sans-serif",
-        textAlign: "center"
-      }
-    }, `${label}: No source - No items`);
+  if (!hasSource) {
+    const emptyState = h5(
+      "div",
+      {
+        key: "list-empty",
+        style: {
+          padding: "12px",
+          background: bgColor,
+          border: `1px dashed ${borderColor}`,
+          borderRadius: "4px",
+          color: textColor,
+          fontSize: "12px",
+          fontFamily: "system-ui, sans-serif",
+          textAlign: "center"
+        }
+      },
+      `${label}: No source - No items`
+    );
     if (tag === null) {
       return emptyState;
     }
     return h5(tag, containerProps, emptyState);
   }
   if (itemsToRender.length === 0) {
-    const emptyState = h5("div", {
-      key: "list-empty",
-      style: {
-        padding: "12px",
-        background: bgColor,
-        border: `1px dashed ${borderColor}`,
-        borderRadius: "4px",
-        color: textColor,
-        fontSize: "12px",
-        fontFamily: "system-ui, sans-serif",
-        textAlign: "center"
-      }
-    }, `${label}: ${source || "resolved"} - No items`);
+    const emptyState = h5(
+      "div",
+      {
+        key: "list-empty",
+        style: {
+          padding: "12px",
+          background: bgColor,
+          border: `1px dashed ${borderColor}`,
+          borderRadius: "4px",
+          color: textColor,
+          fontSize: "12px",
+          fontFamily: "system-ui, sans-serif",
+          textAlign: "center"
+        }
+      },
+      `${label}: ${source || remoteUrl || sanityKey || "resolved"} - No items`
+    );
     if (tag === null) {
       return emptyState;
     }
@@ -1389,7 +1715,10 @@ function buildList(node, children, ctx, deps) {
         }
       }
     } else if (typeof itemChildren === "object" && itemChildren !== null && "key" in itemChildren) {
-      renderedItems.push({ ...itemChildren, key: `${itemChildren.key}-item-${itemKey}` });
+      renderedItems.push({
+        ...itemChildren,
+        key: `${itemChildren.key}-item-${itemKey}`
+      });
     } else {
       renderedItems.push(itemChildren);
     }
@@ -1438,7 +1767,12 @@ function getCollectionItems(node, source, ctx) {
       itemsToRender = lookupItemsByIds(ids, collectionItems);
     }
     if (node.filter) {
-      itemsToRender = applyClientFilters(itemsToRender, node.filter, cmsContext ?? void 0, templateContext ?? void 0);
+      itemsToRender = applyClientFilters(
+        itemsToRender,
+        node.filter,
+        cmsContext ?? void 0,
+        templateContext ?? void 0
+      );
     }
     if (node.sort) {
       itemsToRender = applyClientSorting(itemsToRender, node.sort);
@@ -1446,7 +1780,12 @@ function getCollectionItems(node, source, ctx) {
   } else {
     itemsToRender = [...collectionItems];
     if (node.filter) {
-      itemsToRender = applyClientFilters(itemsToRender, node.filter, cmsContext ?? void 0, templateContext ?? void 0);
+      itemsToRender = applyClientFilters(
+        itemsToRender,
+        node.filter,
+        cmsContext ?? void 0,
+        templateContext ?? void 0
+      );
     }
     if (node.sort) {
       itemsToRender = applyClientSorting(itemsToRender, node.sort);
@@ -1504,9 +1843,7 @@ function applyClientFilters(items, filter, cmsContext, templateContext) {
     );
   }
   const conditions = Array.isArray(filter) ? filter : [filter];
-  return items.filter(
-    (item) => conditions.every((cond) => matchCondition(item, cond, cmsContext, templateContext))
-  );
+  return items.filter((item) => conditions.every((cond) => matchCondition(item, cond, cmsContext, templateContext)));
 }
 function isFilterCondition(obj) {
   return typeof obj === "object" && obj !== null && "field" in obj;
@@ -1663,49 +2000,56 @@ function buildLink(props, children, ctx, deps) {
       linkProps[propKey] = propValue;
     }
   }
-  return h6("a", {
-    ...linkProps,
-    ref: (el) => {
-      const pathKey = pathToString(elementPath);
-      if (!el) {
-        deps.prefetchService?.unobserveLinkByPath(pathKey);
-      }
-      deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
-      if (el && deps.prefetchService?.isEnabled() && isInternalLink) {
-        const strategy = prefetchAttr || deps.prefetchService.getDefaultStrategy();
-        if (strategy === "viewport") {
-          deps.prefetchService.observeLink(el, pathKey);
+  return h6(
+    "a",
+    {
+      ...linkProps,
+      ref: (el) => {
+        const pathKey = pathToString(elementPath);
+        if (!el) {
+          deps.prefetchService?.unobserveLinkByPath(pathKey);
         }
+        deps.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
+        if (el && deps.prefetchService?.isEnabled() && isInternalLink) {
+          const strategy = prefetchAttr || deps.prefetchService.getDefaultStrategy();
+          if (strategy === "viewport") {
+            deps.prefetchService.observeLink(el, pathKey);
+          }
+        }
+      },
+      onClick: navigationOnClick,
+      ...prefetchHandlers,
+      style: {
+        textDecoration: "none",
+        color: "#0070f3",
+        cursor: "pointer",
+        ...props.style && typeof props.style === "object" ? props.style : {}
       }
     },
-    onClick: navigationOnClick,
-    ...prefetchHandlers,
-    style: {
-      textDecoration: "none",
-      color: "#0070f3",
-      cursor: "pointer",
-      ...props.style && typeof props.style === "object" ? props.style : {}
-    }
-  }, deps.buildChildren(children, {
-    elementPath,
-    parentComponentName: effectiveParentComponentName,
-    viewportWidth,
-    componentContext,
-    componentRootPath,
-    locale,
-    i18nConfig,
-    cmsContext,
-    cmsLocale,
-    collectionItemsMap,
-    itemContext,
-    cmsItemIndexPath,
-    cmsListPaths,
-    templateContext,
-    componentResolvedProps
-  }));
+    deps.buildChildren(children, {
+      elementPath,
+      parentComponentName: effectiveParentComponentName,
+      viewportWidth,
+      componentContext,
+      componentRootPath,
+      locale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale,
+      collectionItemsMap,
+      itemContext,
+      cmsItemIndexPath,
+      cmsListPaths,
+      templateContext,
+      componentResolvedProps
+    })
+  );
 }
 
 // lib/client/core/ComponentBuilder.ts
+function isProcessedComponentNode(value) {
+  return typeof value.type === "string" && isValidNodeType(value.type);
+}
 var DOCUMENT_STRUCTURE_TAGS = /* @__PURE__ */ new Set(["body", "html", "head"]);
 var ComponentBuilder = class {
   componentRegistry;
@@ -1732,10 +2076,10 @@ var ComponentBuilder = class {
     if (!cached2) {
       const scales = getCachedResponsiveScalesConfig();
       const fluidActive = scales?.enabled === true && scales?.mode === "fluid";
-      cached2 = responsiveStylesToClasses(
-        style,
-        { fluidActive, responsiveScales: scales ?? void 0 }
-      );
+      cached2 = responsiveStylesToClasses(style, {
+        fluidActive,
+        responsiveScales: scales ?? void 0
+      });
       this.styleClassCache.set(style, cached2);
     }
     UtilityClassCollector.collect(cached2);
@@ -1971,6 +2315,12 @@ var ComponentBuilder = class {
     if (nodeType === NODE_TYPE.LOCALE_LIST && isLocaleListNode(node)) {
       return buildLocaleList(node, ctx, builderDeps);
     }
+    if (nodeType === NODE_TYPE.ISLAND && isIslandNode(node)) {
+      return this.buildBlackBoxNode(node, "data-island", /\.(tsx|jsx|vue|svelte)$/i, options);
+    }
+    if (nodeType === NODE_TYPE.CUSTOM && isCustomNode(node)) {
+      return this.buildBlackBoxNode(node, "data-custom", /\.astro$/i, options);
+    }
     if (isListNode(node)) {
       return buildList(node, children, ctx, builderDeps);
     }
@@ -1989,20 +2339,24 @@ var ComponentBuilder = class {
           `[Meno] Component "${componentName}" not found in registry. Registered: [${this.componentRegistry.getNames().join(", ")}]`
         );
       }
-      return h7("div", {
-        key,
-        style: {
-          border: "1px dashed #e5a00d",
-          padding: "8px 12px",
-          margin: "4px 0",
-          borderRadius: "4px",
-          color: "#b8860b",
-          fontSize: "13px",
-          fontFamily: "monospace",
-          background: "#fffbe6"
+      return h7(
+        "div",
+        {
+          key,
+          style: {
+            border: "1px dashed #e5a00d",
+            padding: "8px 12px",
+            margin: "4px 0",
+            borderRadius: "4px",
+            color: "#b8860b",
+            fontSize: "13px",
+            fontFamily: "monospace",
+            background: "#fffbe6"
+          },
+          "data-missing-component": componentName
         },
-        "data-missing-component": componentName
-      }, `Component not found: ${componentName}`);
+        `Component not found: ${componentName}`
+      );
     }
     if (tag === "Link") {
       return buildLink(finalProps, children, ctx, builderDeps);
@@ -2022,17 +2376,22 @@ var ComponentBuilder = class {
     const markerRegex = /<div\s+data-meno-component="([^"]+)"\s+data-meno-props="([^"]*)"[^>]*><\/div>/g;
     const segments = [];
     let lastIndex = 0;
-    let match;
+    let match = markerRegex.exec(html);
     let segmentIndex = 0;
-    while ((match = markerRegex.exec(html)) !== null) {
-      if (match.index > lastIndex) {
-        const chunk = html.slice(lastIndex, match.index);
+    while (match !== null) {
+      const currentMatch = match;
+      match = markerRegex.exec(html);
+      if (currentMatch.index > lastIndex) {
+        const chunk = html.slice(lastIndex, currentMatch.index);
         segments.push(h7("span", { key: `rt-${segmentIndex++}`, dangerouslySetInnerHTML: { __html: chunk } }));
       }
-      const componentName = match[1];
+      const componentName = currentMatch[1];
+      if (componentName === void 0) {
+        continue;
+      }
       let props = {};
       try {
-        const propsStr = match[2].replace(/&quot;/g, '"').replace(/&#039;/g, "'").replace(/&amp;/g, "&");
+        const propsStr = (currentMatch[2] ?? "").replace(/&quot;/g, '"').replace(/&#039;/g, "'").replace(/&amp;/g, "&");
         props = JSON.parse(propsStr);
       } catch {
       }
@@ -2066,13 +2425,15 @@ var ComponentBuilder = class {
           segments.push(rendered);
         }
       } else {
-        segments.push(h7("span", { key: `rt-${segmentIndex}`, dangerouslySetInnerHTML: { __html: match[0] } }));
+        segments.push(h7("span", { key: `rt-${segmentIndex}`, dangerouslySetInnerHTML: { __html: currentMatch[0] } }));
       }
       segmentIndex++;
-      lastIndex = match.index + match[0].length;
+      lastIndex = currentMatch.index + currentMatch[0].length;
     }
     if (lastIndex < html.length) {
-      segments.push(h7("span", { key: `rt-${segmentIndex}`, dangerouslySetInnerHTML: { __html: html.slice(lastIndex) } }));
+      segments.push(
+        h7("span", { key: `rt-${segmentIndex}`, dangerouslySetInnerHTML: { __html: html.slice(lastIndex) } })
+      );
     }
     return h7(Fragment2, null, ...segments);
   }
@@ -2196,7 +2557,11 @@ var ComponentBuilder = class {
       if (utilityClasses.length > 0) {
         const existingClassName = props.className || "";
         const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
-        return { ...props, className: [...classArray, ...utilityClasses].filter(Boolean).join(" "), style: processedStyle };
+        return {
+          ...props,
+          className: [...classArray, ...utilityClasses].filter(Boolean).join(" "),
+          style: processedStyle
+        };
       }
     }
     return props;
@@ -2287,11 +2652,13 @@ var ComponentBuilder = class {
     if (Object.keys(extractedAttributes).length === 0) {
       return props;
     }
-    let result = { ...props };
+    const result = { ...props };
     if ("class" in extractedAttributes || "className" in extractedAttributes) {
       const attrClass = extractedAttributes.class ?? extractedAttributes.className ?? "";
       const existingClassName = result.className || "";
       result.className = [existingClassName, attrClass].filter(Boolean).join(" ");
+      const classTokens = attrClass.split(/\s+/).filter(Boolean);
+      if (classTokens.length > 0) UtilityClassCollector.collect(classTokens);
       delete extractedAttributes.class;
       delete extractedAttributes.className;
     }
@@ -2301,6 +2668,69 @@ var ComponentBuilder = class {
     }
     return { ...result, ...normalizedAttributes };
   }
+  /**
+   * Build the canvas placeholder for a "black box" node (Island / Custom) that
+   * meno-core can't actually run. Renders the node's slotted children as normal
+   * content, or a quiet inline marker when there are none. The wrapper carries
+   * `data-element-path` (and CMS-list context, when inside one) via a ref so a
+   * click resolves to this node and selects it like any regular element — even
+   * though the `display:contents` wrapper itself draws no box.
+   */
+  buildBlackBoxNode(node, dataAttr, extPattern, options) {
+    const {
+      key = 0,
+      elementPath = [0],
+      parentComponentName = null,
+      viewportWidth = 1920,
+      componentContext = null,
+      componentRootPath,
+      locale,
+      i18nConfig,
+      cmsContext = null,
+      cmsLocale = null,
+      collectionItemsMap = {},
+      itemContext = null,
+      cmsItemIndexPath = null,
+      cmsListPaths = null,
+      templateContext = null,
+      componentResolvedProps = null
+    } = options;
+    const src = "src" in node && typeof node.src === "string" ? node.src : "";
+    const name = src.split("/").pop()?.replace(extPattern, "") || "?";
+    const childNodes = "children" in node ? node.children : void 0;
+    const hasChildNodes = Array.isArray(childNodes) && childNodes.length > 0 || typeof childNodes === "string" && childNodes.length > 0;
+    const inner = hasChildNodes ? this.buildChildren(childNodes, {
+      elementPath,
+      parentComponentName,
+      viewportWidth,
+      componentContext,
+      componentRootPath,
+      locale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale,
+      collectionItemsMap,
+      itemContext,
+      cmsItemIndexPath,
+      cmsListPaths,
+      templateContext,
+      componentResolvedProps
+    }) : h7("span", { style: { color: "#9ca3af", fontSize: "13px" } }, name);
+    const ref = (el) => {
+      if (!el) return;
+      el.setAttribute("data-element-path", pathToString(elementPath));
+      if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
+        el.setAttribute("data-cms-item-index", cmsItemIndexPath.join("."));
+        if (cmsListPaths && cmsListPaths.length === cmsItemIndexPath.length) {
+          el.setAttribute(
+            "data-cms-context",
+            JSON.stringify({ itemIndexPath: cmsItemIndexPath, listPaths: cmsListPaths })
+          );
+        }
+      }
+    };
+    return h7("div", { key, [dataAttr]: src, style: { display: "contents" }, ref }, inner);
+  }
   /**
    * Build a custom component
    */
@@ -2344,7 +2774,7 @@ var ComponentBuilder = class {
         const i18nResolver = effectiveLocale ? (value) => resolveI18nValue(value, effectiveLocale, config) : void 0;
         propsToResolve = processItemPropsTemplate(propsToResolve, effectiveItemContext, i18nResolver);
       }
-      let resolvedProps = resolvePropsFromDefinition(
+      const resolvedProps = resolvePropsFromDefinition(
         structuredComponentDef,
         propsToResolve,
         children,
@@ -2363,7 +2793,7 @@ var ComponentBuilder = class {
         viewportWidth,
         markedChildren
       );
-      if (!processedStructure || typeof processedStructure === "string" || typeof processedStructure === "number" || Array.isArray(processedStructure)) {
+      if (!processedStructure || typeof processedStructure === "string" || typeof processedStructure === "number" || Array.isArray(processedStructure) || !isProcessedComponentNode(processedStructure)) {
         return null;
       }
       if (finalProps.style && typeof finalProps.style === "object") {
@@ -2381,7 +2811,7 @@ var ComponentBuilder = class {
       const componentElement = this.buildComponent({
         node: processedStructure,
         key,
-        customProps: { "__componentProps": resolvedProps },
+        customProps: { __componentProps: resolvedProps },
         elementPath,
         parentComponentName: nestedParentComponentName,
         viewportWidth,
@@ -2399,7 +2829,7 @@ var ComponentBuilder = class {
         componentResolvedProps: resolvedProps
       });
       return h7(ErrorBoundary, { key, componentName, level: "component" }, componentElement);
-    } catch (error) {
+    } catch (_error) {
       return h7(ErrorBoundary, { key, componentName, level: "component" }, null);
     }
   }
@@ -2455,10 +2885,13 @@ var ComponentBuilder = class {
         if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
           el.setAttribute("data-cms-item-index", cmsItemIndexPath.join("."));
           if (cmsListPaths && cmsListPaths.length === cmsItemIndexPath.length) {
-            el.setAttribute("data-cms-context", JSON.stringify({
-              itemIndexPath: cmsItemIndexPath,
-              listPaths: cmsListPaths
-            }));
+            el.setAttribute(
+              "data-cms-context",
+              JSON.stringify({
+                itemIndexPath: cmsItemIndexPath,
+                listPaths: cmsListPaths
+              })
+            );
           }
         }
         if (isComponentRoot) el.setAttribute("data-component-root", "true");
@@ -2493,12 +2926,34 @@ var ComponentBuilder = class {
         parentComponentName: parentComponentName ?? null,
         componentContext: componentContext ?? null
       };
-      this.elementRegistry.register(elementPath, el, componentNameForRegistry, isComponentRoot, componentProps, metadata);
+      this.elementRegistry.register(
+        elementPath,
+        el,
+        componentNameForRegistry,
+        isComponentRoot,
+        componentProps,
+        metadata
+      );
     };
     if (props.onClick) {
       processedProps.onClick = this.createOnClickHandler(props.onClick);
     }
-    const VOID_ELEMENTS = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"];
+    const VOID_ELEMENTS = [
+      "area",
+      "base",
+      "br",
+      "col",
+      "embed",
+      "hr",
+      "img",
+      "input",
+      "link",
+      "meta",
+      "param",
+      "source",
+      "track",
+      "wbr"
+    ];
     if (VOID_ELEMENTS.includes(finalTag.toLowerCase())) {
       const { children: _ignored, ...voidElementProps } = processedProps;
       return h7(finalTag, voidElementProps);
@@ -2527,33 +2982,48 @@ var ComponentBuilder = class {
 // lib/client/core/ComponentRenderer.tsx
 import { createElement as h8 } from "react";
 function renderPage(options) {
-  const { tree, currentPath, viewportWidth, componentBuilder, locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, templateContext } = options;
-  if (!tree) return null;
-  return h8(ErrorBoundary, {
-    level: "page",
-    onError: (error, errorInfo) => {
-      console.error("Page rendering error:", {
-        path: currentPath,
-        error: error.message,
-        stack: error.stack,
-        componentStack: errorInfo?.componentStack
-      });
-    }
-  }, componentBuilder.buildComponent({
-    node: tree,
-    key: 0,
-    customProps: {},
-    elementPath: [0],
-    parentComponentName: null,
+  const {
+    tree,
+    currentPath,
     viewportWidth,
-    componentContext: null,
+    componentBuilder,
     locale,
     i18nConfig,
     cmsContext,
     cmsLocale,
     collectionItemsMap,
-    templateContext: templateContext ?? null
-  }));
+    templateContext
+  } = options;
+  if (!tree) return null;
+  return h8(
+    ErrorBoundary,
+    {
+      level: "page",
+      onError: (error, errorInfo) => {
+        console.error("Page rendering error:", {
+          path: currentPath,
+          error: error.message,
+          stack: error.stack,
+          componentStack: errorInfo?.componentStack
+        });
+      }
+    },
+    componentBuilder.buildComponent({
+      node: tree,
+      key: 0,
+      customProps: {},
+      elementPath: [0],
+      parentComponentName: null,
+      viewportWidth,
+      componentContext: null,
+      locale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale,
+      collectionItemsMap,
+      templateContext: templateContext ?? null
+    })
+  );
 }
 
 // lib/client/routing/Router.tsx
@@ -2561,6 +3031,7 @@ import { createElement as h10, useState as useState2, useEffect as useEffect2, u
 
 // lib/client/routing/RouteLoader.ts
 init_constants();
+init_errorLogger();
 var RouteLoader = class {
   abortController = null;
   notFoundTimeout = null;
@@ -2612,9 +3083,7 @@ var RouteLoader = class {
     try {
       const response = await fetch(API_ROUTES.PAGES);
       const data = await response.json();
-      const pages = (data.pages || []).map(
-        (p) => typeof p === "string" ? p : p.path
-      );
+      const pages = (data.pages || []).map((p) => typeof p === "string" ? p : p.path);
       if (this.config.onPagesLoaded) {
         this.config.onPagesLoaded(pages);
       }
@@ -2712,10 +3181,7 @@ var RouteLoader = class {
           this.config.onLoadComplete(errorTree);
         }
         if (this.config.onLoadError && !this.isCancelled) {
-          this.config.onLoadError(
-            parseError instanceof Error ? parseError : new Error(String(parseError)),
-            errorTree
-          );
+          this.config.onLoadError(parseError instanceof Error ? parseError : new Error(String(parseError)), errorTree);
         }
         return errorTree;
       }
@@ -2724,6 +3190,7 @@ var RouteLoader = class {
         try {
           this.config.componentRegistry.merge(parsed.components);
         } catch (componentError) {
+          logRuntimeError("RouteLoader.mergePageComponents", componentError);
         }
         tree = parsed.root || parsed;
       } else if (parsed.root) {
@@ -2752,10 +3219,7 @@ var RouteLoader = class {
         this.config.onLoadComplete(errorTree);
       }
       if (this.config.onLoadError && !this.isCancelled) {
-        this.config.onLoadError(
-          error instanceof Error ? error : new Error(String(error)),
-          errorTree
-        );
+        this.config.onLoadError(error instanceof Error ? error : new Error(String(error)), errorTree);
       }
       this.clearNotFoundTimeout();
       this.abortController = null;
@@ -2841,6 +3305,7 @@ function getInitialLoadingState(hasSSRContent) {
 import { createElement as h9, useState, useEffect, useRef } from "react";
 
 // lib/client/hmrWebSocket.ts
+init_errorLogger();
 var HMRWebSocket = class {
   ws = null;
   config;
@@ -2881,7 +3346,7 @@ var HMRWebSocket = class {
       this.ws.onmessage = (event) => this.handleMessage(event);
       this.ws.onerror = (error) => this.handleError(error);
       this.ws.onclose = (event) => this.handleClose(event);
-    } catch (error) {
+    } catch (_error) {
       this.scheduleReconnect();
     }
   }
@@ -2903,10 +3368,10 @@ var HMRWebSocket = class {
       logRuntimeError("hmrWebSocket.handleMessage", e);
     }
   }
-  handleError(error) {
+  handleError(_error) {
     this.config.onStatusChange("error");
   }
-  handleClose(event) {
+  handleClose(_event) {
     this.stopHeartbeat();
     if (!this.isIntentionallyClosed) {
       this.config.onStatusChange("disconnected");
@@ -2931,7 +3396,7 @@ var HMRWebSocket = class {
       return;
     }
     const delay = Math.min(
-      this.config.initialReconnectDelay * Math.pow(2, this.reconnectAttempts),
+      this.config.initialReconnectDelay * 2 ** this.reconnectAttempts,
       this.config.maxReconnectDelay
     );
     const jitter = delay * 0.25 * (Math.random() - 0.5);
@@ -3083,6 +3548,10 @@ function HMRManager({
       document.dispatchEvent(new CustomEvent("hmr-fonts-update"));
     } else if (data.type === "hmr:libraries-update") {
       document.dispatchEvent(new CustomEvent("hmr-libraries-update"));
+    } else if (data.type === "hmr:config-update") {
+      document.dispatchEvent(new CustomEvent("hmr-config-update"));
+    } else if (data.type === "hmr:stylesheet-update") {
+      document.dispatchEvent(new CustomEvent("hmr-stylesheet-update"));
     }
   };
   const createStatusHandler = () => (newStatus) => {
@@ -3140,25 +3609,29 @@ function HMRIndicator({ status }) {
     error: { bg: "#dc2626", text: "\u274C Connection Failed - Refresh Page", show: true }
   };
   const config = statusConfig[status];
-  return h9("div", {
-    id: "hmr-indicator",
-    style: {
-      position: "fixed",
-      top: "20px",
-      right: "20px",
-      background: config.bg,
-      color: "white",
-      padding: "12px 20px",
-      borderRadius: "8px",
-      fontSize: "14px",
-      fontWeight: "600",
-      display: config.show ? "block" : "none",
-      boxShadow: `0 4px 12px ${config.bg}40`,
-      animation: "slideIn 0.3s ease-out",
-      zIndex: 9999,
-      transition: "all 0.3s ease"
-    }
-  }, config.text);
+  return h9(
+    "div",
+    {
+      id: "hmr-indicator",
+      style: {
+        position: "fixed",
+        top: "20px",
+        right: "20px",
+        background: config.bg,
+        color: "white",
+        padding: "12px 20px",
+        borderRadius: "8px",
+        fontSize: "14px",
+        fontWeight: "600",
+        display: config.show ? "block" : "none",
+        boxShadow: `0 4px 12px ${config.bg}40`,
+        animation: "slideIn 0.3s ease-out",
+        zIndex: 9999,
+        transition: "all 0.3s ease"
+      }
+    },
+    config.text
+  );
 }
 
 // lib/client/elementRegistry.ts
@@ -3226,6 +3699,7 @@ var ComponentRegistry = class extends BaseComponentRegistry {
 var globalComponentRegistry = new ComponentRegistry();
 
 // lib/client/styles/StyleInjector.ts
+init_errorLogger();
 function simpleHash(str) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
@@ -3284,7 +3758,7 @@ var StyleInjector = class {
                 processedCSSBlocks.push(`/* Component: ${name} (instance) */
 ${processedCSS}`);
               }
-            } catch (error) {
+            } catch (_error) {
               processedCSSBlocks.push(`/* Component: ${name} */
 ${originalCSS}`);
             }
@@ -3366,6 +3840,7 @@ ${originalCSS}`);
 };
 
 // lib/client/scripts/ScriptExecutor.ts
+init_errorLogger();
 function generateDestructure(defineVars, interfaceDef) {
   const vars = defineVars === true ? Object.keys(interfaceDef || {}) : defineVars;
   if (vars.length === 0) return "";
@@ -3394,7 +3869,7 @@ var ScriptExecutor = class {
    */
   shouldBind(el, componentName) {
     let names = this.boundElements.get(el);
-    if (names && names.has(componentName)) return false;
+    if (names?.has(componentName)) return false;
     if (!names) {
       names = /* @__PURE__ */ new Set();
       this.boundElements.set(el, names);
@@ -3411,7 +3886,7 @@ var ScriptExecutor = class {
    * @private
    */
   executeWrappedJS(jsCode, componentName) {
-    if (!jsCode || !jsCode.trim()) return;
+    if (!jsCode?.trim()) return;
     const wrappedJS = `(function() {
       // Component: ${componentName}
       try {
@@ -3447,7 +3922,7 @@ var ScriptExecutor = class {
       try {
         const processedJS = processCodeTemplates(originalJS, props);
         this.executeWrappedJS(processedJS, `${componentName} (instance: ${rootPath})`);
-      } catch (templateError) {
+      } catch (_templateError) {
         this.executeWrappedJS(originalJS, `${componentName} (instance: ${rootPath})`);
       }
     } catch (e) {
@@ -3513,12 +3988,7 @@ var ScriptExecutor = class {
         const defineVars = component.component.defineVars;
         if (defineVars) {
           if (!executedComponents.has(componentName)) {
-            this.executeWithInitPattern(
-              componentName,
-              originalJS,
-              defineVars,
-              component.component.interface
-            );
+            this.executeWithInitPattern(componentName, originalJS, defineVars, component.component.interface);
             executedComponents.add(componentName);
           }
         } else if (hasTemplates(originalJS)) {
@@ -3562,12 +4032,7 @@ var ScriptExecutor = class {
       const originalJS = component.component.javascript;
       const defineVars = component.component.defineVars;
       if (defineVars) {
-        this.executeWithInitPattern(
-          componentName,
-          originalJS,
-          defineVars,
-          component.component.interface
-        );
+        this.executeWithInitPattern(componentName, originalJS, defineVars, component.component.interface);
       } else if (hasTemplates(originalJS)) {
         const componentRootPaths = this.elementRegistry.getComponentRootPaths(componentName);
         for (const rootPath of componentRootPaths) {
@@ -3695,12 +4160,12 @@ var PrefetchService = class {
    */
   enforceCacheLimit() {
     if (this.cache.size <= this.config.maxCacheSize) return;
-    const entries = Array.from(this.cache.entries()).sort(
-      (a, b) => a[1].timestamp - b[1].timestamp
-    );
+    const entries = Array.from(this.cache.entries()).sort((a, b) => a[1].timestamp - b[1].timestamp);
     const toRemove = this.cache.size - this.config.maxCacheSize;
     for (let i = 0; i < toRemove; i++) {
-      this.cache.delete(entries[i][0]);
+      const entry = entries[i];
+      if (entry === void 0) continue;
+      this.cache.delete(entry[0]);
     }
   }
   /**
@@ -3713,14 +4178,11 @@ var PrefetchService = class {
     const abortController = new AbortController();
     this.pendingPrefetches.set(path, abortController);
     try {
-      const response = await fetch(
-        `${API_ROUTES.PAGE_CONTENT}?page=${encodeURIComponent(path)}`,
-        {
-          signal: abortController.signal,
-          // Allow browser caching for prefetched content
-          cache: "default"
-        }
-      );
+      const response = await fetch(`${API_ROUTES.PAGE_CONTENT}?page=${encodeURIComponent(path)}`, {
+        signal: abortController.signal,
+        // Allow browser caching for prefetched content
+        cache: "default"
+      });
       if (!response.ok) {
         this.pendingPrefetches.delete(path);
         return;
@@ -3801,7 +4263,7 @@ var PrefetchService = class {
           if (entry.isIntersecting) {
             const link = entry.target;
             const href = link.getAttribute("href");
-            if (href && href.startsWith("/")) {
+            if (href?.startsWith("/")) {
               this.prefetch(href);
             }
           }
@@ -3852,13 +4314,19 @@ var PrefetchService = class {
    * Clear cache and cancel all pending operations
    */
   clear() {
-    this.pendingPrefetches.forEach((controller) => controller.abort());
+    this.pendingPrefetches.forEach((controller) => {
+      controller.abort();
+    });
     this.pendingPrefetches.clear();
-    this.hoverTimeouts.forEach((timeout) => clearTimeout(timeout));
+    this.hoverTimeouts.forEach((timeout) => {
+      clearTimeout(timeout);
+    });
     this.hoverTimeouts.clear();
     this.cache.clear();
     if (this.viewportObserver) {
-      this.observedLinks.forEach((link) => this.viewportObserver?.unobserve(link));
+      this.observedLinks.forEach((link) => {
+        this.viewportObserver?.unobserve(link);
+      });
       this.observedLinks.clear();
       this.linkPathMap.clear();
       this.viewportObserver.disconnect();
@@ -3954,15 +4422,13 @@ function Router(props = {}) {
   const [currentPath, setCurrentPath] = useState2(initialPath);
   const [availablePages, setAvailablePages] = useState2([]);
   const [showNotFound, setShowNotFound] = useState2(false);
-  const [viewportWidth, setViewportWidth] = useState2(
-    typeof window !== "undefined" ? window.innerWidth : 1920
-  );
+  const [viewportWidth, setViewportWidth] = useState2(typeof window !== "undefined" ? window.innerWidth : 1920);
   const [i18nConfig, setI18nConfig2] = useState2(DEFAULT_I18N_CONFIG);
   const [currentLocale, setCurrentLocale] = useState2(DEFAULT_I18N_CONFIG.defaultLocale);
   const [cmsContext, setCmsContext] = useState2(null);
   const [cmsLocale, setCmsLocale] = useState2(null);
   const [registryVersion, setRegistryVersion] = useState2(0);
-  const [awaitingCmsContext, setAwaitingCmsContext] = useState2(false);
+  const [awaitingCmsContext, _setAwaitingCmsContext] = useState2(false);
   const [collectionItemsMap, setCollectionItemsMap] = useState2({});
   const [cmsTemplatePath, setCmsTemplatePath] = useState2(null);
   const lastCommitTimestampRef = useRef2(0);
@@ -3970,33 +4436,35 @@ function Router(props = {}) {
   const lastCommitStructureChangedRef = useRef2(true);
   const ssrCmsHandledRef = useRef2(false);
   const initialLoadDoneRef = useRef2(false);
-  const routeLoader = useRef2(new RouteLoader({
-    componentRegistry: services.componentRegistry,
-    prefetchService: services.prefetchService,
-    onLoadStart: () => {
-      setLoading(true);
-      setShowNotFound(false);
-      InteractiveStylesRegistry.clear();
-      UtilityClassCollector.clear();
-      if (componentTreeRef.current) {
-        setPreviousComponentTree(componentTreeRef.current);
-      }
-    },
-    onLoadComplete: (tree) => {
-      setComponentTree(tree);
-      setLoading(false);
-      setShowNotFound(false);
-      setPreviousComponentTree(null);
-    },
-    onLoadError: (error) => {
-      setLoading(false);
-      setShowNotFound(false);
-      setPreviousComponentTree(null);
-    },
-    onNotFound: () => setShowNotFound(true),
-    onPagesLoaded: (pages) => setAvailablePages(pages),
-    onLocaleDetected: (locale) => setCurrentLocale(locale)
-  })).current;
+  const routeLoader = useRef2(
+    new RouteLoader({
+      componentRegistry: services.componentRegistry,
+      prefetchService: services.prefetchService,
+      onLoadStart: () => {
+        setLoading(true);
+        setShowNotFound(false);
+        InteractiveStylesRegistry.clear();
+        UtilityClassCollector.clear();
+        if (componentTreeRef.current) {
+          setPreviousComponentTree(componentTreeRef.current);
+        }
+      },
+      onLoadComplete: (tree) => {
+        setComponentTree(tree);
+        setLoading(false);
+        setShowNotFound(false);
+        setPreviousComponentTree(null);
+      },
+      onLoadError: (_error) => {
+        setLoading(false);
+        setShowNotFound(false);
+        setPreviousComponentTree(null);
+      },
+      onNotFound: () => setShowNotFound(true),
+      onPagesLoaded: (pages) => setAvailablePages(pages),
+      onLocaleDetected: (locale) => setCurrentLocale(locale)
+    })
+  ).current;
   useEffect2(() => {
     componentTreeRef.current = componentTree;
   }, [componentTree]);
@@ -4013,6 +4481,20 @@ function Router(props = {}) {
       setStoredLocale(locale);
     });
   }, []);
+  useEffect2(() => {
+    const handleConfigUpdate = () => {
+      invalidateI18nConfig();
+      fetchI18nConfig().then((config) => {
+        setI18nConfig2(config);
+        setI18nConfig(config);
+        routeLoader.setI18nConfig(config);
+        setShowNotFound(false);
+        loadComponentsRef.current(window.location.pathname);
+      });
+    };
+    document.addEventListener("hmr-config-update", handleConfigUpdate);
+    return () => document.removeEventListener("hmr-config-update", handleConfigUpdate);
+  }, []);
   useEffect2(() => {
     const { locale } = parseLocaleFromPath(currentPath, i18nConfig);
     setCurrentLocale(locale);
@@ -4124,9 +4606,12 @@ function Router(props = {}) {
   useEffect2(() => {
     if (typeof window === "undefined") return;
     if (window.parent === window) return;
-    window.parent.postMessage({
-      type: IFRAME_MESSAGE_TYPES.CMS_CONTEXT_REQUEST
-    }, "*");
+    window.parent.postMessage(
+      {
+        type: IFRAME_MESSAGE_TYPES.CMS_CONTEXT_REQUEST
+      },
+      "*"
+    );
   }, []);
   useLayoutEffect(() => {
     const treeToRender2 = previewComponentTree || componentTree;
@@ -4141,10 +4626,13 @@ function Router(props = {}) {
     if (treeToRender2) {
       if (typeof window !== "undefined" && window.parent !== window) {
         const registryData = Object.fromEntries(InteractiveStylesRegistry.getAll());
-        window.parent.postMessage({
-          type: IFRAME_MESSAGE_TYPES.INTERACTIVE_STYLES_UPDATE,
-          styles: registryData
-        }, "*");
+        window.parent.postMessage(
+          {
+            type: IFRAME_MESSAGE_TYPES.INTERACTIVE_STYLES_UPDATE,
+            styles: registryData
+          },
+          "*"
+        );
       }
       const shouldRunScripts = !disableScripts && lastCommitStructureChangedRef.current;
       lastCommitStructureChangedRef.current = true;
@@ -4173,17 +4661,23 @@ function Router(props = {}) {
     }, 100);
     return () => clearTimeout(timeoutId);
   }, [componentTree, currentPath, services]);
-  const loadComponents = useCallback(async (path) => {
-    const pathToLoad = cmsTemplatePath || path;
-    await routeLoader.loadComponents(pathToLoad);
-  }, [cmsTemplatePath]);
-  const loadComponentsForHMR = useCallback(async (path) => {
-    if (Date.now() - lastCommitTimestampRef.current < COMMIT_GRACE_MS) {
-      return;
-    }
-    const pathToLoad = cmsTemplatePath || path;
-    await routeLoader.loadComponents(pathToLoad);
-  }, [cmsTemplatePath]);
+  const loadComponents = useCallback(
+    async (path) => {
+      const pathToLoad = cmsTemplatePath || path;
+      await routeLoader.loadComponents(pathToLoad);
+    },
+    [cmsTemplatePath]
+  );
+  const loadComponentsForHMR = useCallback(
+    async (path) => {
+      if (Date.now() - lastCommitTimestampRef.current < COMMIT_GRACE_MS) {
+        return;
+      }
+      const pathToLoad = cmsTemplatePath || path;
+      await routeLoader.loadComponents(pathToLoad);
+    },
+    [cmsTemplatePath]
+  );
   const loadComponentsRef = useRef2(loadComponents);
   useEffect2(() => {
     loadComponentsRef.current = loadComponents;
@@ -4195,7 +4689,7 @@ function Router(props = {}) {
         const data = await response.json();
         setCollectionItemsMap((prev) => ({ ...prev, [collection]: data.items || [] }));
       }
-    } catch (error) {
+    } catch (_error) {
     }
   }, []);
   useEffect2(() => {
@@ -4217,7 +4711,8 @@ function Router(props = {}) {
       delete window.__MENO_CMS__;
     }
     routeLoader.loadPages();
-    routeLoader.loadGlobalComponents().then(() => {
+    Promise.all([routeLoader.loadGlobalComponents(), fetchI18nConfig()]).then(([, config]) => {
+      routeLoader.setI18nConfig(config);
       const pathToLoad = ssrCmsContext ? ssrCmsContext.templatePath : currentPath;
       loadComponents(pathToLoad);
     });
@@ -4318,11 +4813,7 @@ function Router(props = {}) {
         }
       },
       h10("h2", null, `Page not found: ${currentPath}`),
-      h10(
-        "p",
-        { style: { marginTop: "16px", marginBottom: "24px", color: "#666" } },
-        "Available pages:"
-      ),
+      h10("p", { style: { marginTop: "16px", marginBottom: "24px", color: "#666" } }, "Available pages:"),
       h10(
         "ul",
         {
@@ -4339,16 +4830,20 @@ function Router(props = {}) {
           (page, i) => h10(
             "li",
             { key: i },
-            h10("a", {
-              href: page,
-              onClick: createNavigationHandler(page),
-              style: {
-                color: "#0070f3",
-                textDecoration: "none",
-                fontSize: "18px",
-                fontWeight: "600"
-              }
-            }, page === "/" ? "Home (/)" : page)
+            h10(
+              "a",
+              {
+                href: page,
+                onClick: createNavigationHandler(page),
+                style: {
+                  color: "#0070f3",
+                  textDecoration: "none",
+                  fontSize: "18px",
+                  fontWeight: "600"
+                }
+              },
+              page === "/" ? "Home (/)" : page
+            )
           )
         )
       )
@@ -4520,7 +5015,9 @@ function initializeHMRListener() {
     cachedThemes = null;
     cachedDefaultTheme = null;
     await injectUpdatedThemeCSS();
-    hmrCallbacks.forEach((callback) => callback());
+    hmrCallbacks.forEach((callback) => {
+      callback();
+    });
   });
 }
 if (typeof window !== "undefined") {
@@ -4540,11 +5037,11 @@ async function injectUpdatedThemeCSS() {
     }
     const defaultResponse = await fetch("/api/colors");
     if (defaultResponse.ok) {
-      themeColors["default"] = (await defaultResponse.json()).colors;
+      themeColors.default = (await defaultResponse.json()).colors;
     }
     let css = "";
-    if (themeColors["default"]) {
-      const vars = Object.entries(themeColors["default"]).map(([name, value]) => `  --${name}: ${value};`).join("\n");
+    if (themeColors.default) {
+      const vars = Object.entries(themeColors.default).map(([name, value]) => `  --${name}: ${value};`).join("\n");
       css += `:root {
 ${vars}
 }
@@ -4552,8 +5049,9 @@ ${vars}
 `;
     }
     for (const theme of data.themes) {
-      if (themeColors[theme.name]) {
-        const vars = Object.entries(themeColors[theme.name]).map(([name, value]) => `  --${name}: ${value};`).join("\n");
+      const themeVars = themeColors[theme.name];
+      if (themeVars) {
+        const vars = Object.entries(themeVars).map(([name, value]) => `  --${name}: ${value};`).join("\n");
         css += `[theme="${theme.name}"] {
 ${vars}
 }
@@ -4567,7 +5065,7 @@ ${vars}
       themeStyleTag.id = "hmr-theme-variables";
       applyNonce(themeStyleTag);
       const mainStyle = document.querySelector("style");
-      if (mainStyle && mainStyle.nextSibling) {
+      if (mainStyle?.nextSibling) {
         document.head.insertBefore(themeStyleTag, mainStyle.nextSibling);
       } else {
         document.head.appendChild(themeStyleTag);
@@ -4579,7 +5077,9 @@ ${vars}
   }
 }
 function useColorVariables(themeName) {
-  const [colors, setColors] = useState3(themeName && cachedColors[themeName] ? cachedColors[themeName] : null);
+  const [colors, setColors] = useState3(
+    themeName && cachedColors[themeName] ? cachedColors[themeName] : null
+  );
   const [loading, setLoading] = useState3(!cachedColors[themeName || "default"]);
   const [error, setError] = useState3(null);
   const callbackRef = useRef3(null);
@@ -4731,6 +5231,7 @@ function useTheme() {
 }
 
 // lib/client/styleProcessor.ts
+init_errorLogger();
 function mergeComponentStyles(componentDef, props) {
   try {
     let mergedProps = { ...componentDef.props || {} };
@@ -4750,7 +5251,10 @@ function mergeComponentStyles(componentDef, props) {
     mergedProps = { ...mergedProps, ...effectiveInputProps };
     try {
       if (structuredComponentDef.structure) {
-        const processed = processStructure(structuredComponentDef.structure, { props: effectiveInputProps, componentDef: structuredComponentDef });
+        const processed = processStructure(structuredComponentDef.structure, {
+          props: effectiveInputProps,
+          componentDef: structuredComponentDef
+        });
         if (processed && typeof processed === "object" && !Array.isArray(processed) && "props" in processed) {
           const processedProps = processed.props;
           const structureStyle = processedProps?.style && typeof processedProps.style === "object" && processedProps.style !== null && !Array.isArray(processedProps.style) ? processedProps.style : {};
@@ -4759,6 +5263,7 @@ function mergeComponentStyles(componentDef, props) {
         }
       }
     } catch (e) {
+      logRuntimeError("styleProcessor.mergeStructureStyle", e);
     }
     const restProps = props || {};
     const normalizedMergedStyle = normalizeStyle(mergedProps.style) || {};
@@ -4772,18 +5277,33 @@ function mergeComponentStyles(componentDef, props) {
       }
     };
     return mergedProps;
-  } catch (error) {
+  } catch (_error) {
     return props || {};
   }
 }
 function mergeStyles(...styles) {
   return styles.reduce((acc, style) => {
     if (!style) return acc;
-    return { ...acc, ...style };
+    Object.assign(acc, style);
+    return acc;
   }, {});
 }
 
 // lib/client/hmrCssReload.ts
+function reloadExternalStylesheets() {
+  const links = document.querySelectorAll('link[rel="stylesheet"]');
+  for (const link of links) {
+    const href = link.getAttribute("href");
+    if (!href || href.startsWith("data:")) continue;
+    try {
+      const url = new URL(href, location.href);
+      if (url.origin !== location.origin) continue;
+      url.searchParams.set("hmr", String(Date.now()));
+      link.href = url.href;
+    } catch {
+    }
+  }
+}
 async function injectUpdatedThemeCSS2() {
   try {
     const themesResponse = await fetch("/api/themes");
@@ -4791,20 +5311,18 @@ async function injectUpdatedThemeCSS2() {
     const themesData = await themesResponse.json();
     const themeColors = {};
     for (const theme of themesData.themes) {
-      const colorResponse = await fetch(
-        `/api/colors?theme=${encodeURIComponent(theme.name)}`
-      );
+      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;
+      themeColors.default = (await defaultResponse.json()).colors;
     }
     let css = "";
-    if (themeColors["default"]) {
-      const vars = Object.entries(themeColors["default"]).map(([name, value]) => `  --${name}: ${value};`).join("\n");
+    if (themeColors.default) {
+      const vars = Object.entries(themeColors.default).map(([name, value]) => `  --${name}: ${value};`).join("\n");
       css += `:root {
 ${vars}
 }
@@ -4812,8 +5330,9 @@ ${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");
+      const themeVars = themeColors[theme.name];
+      if (themeVars) {
+        const vars = Object.entries(themeVars).map(([name, value]) => `  --${name}: ${value};`).join("\n");
         css += `[theme="${theme.name}"] {
 ${vars}
 }
@@ -4890,6 +5409,12 @@ function setupCssHmrListeners() {
       location.reload();
     });
   }
+  if (!window.__hmrStylesheetInitialized) {
+    window.__hmrStylesheetInitialized = true;
+    document.addEventListener("hmr-stylesheet-update", () => {
+      reloadExternalStylesheets();
+    });
+  }
 }
 
 // lib/client/fontFamiliesService.ts
@@ -4947,9 +5472,7 @@ function usePropertyAutocomplete(initialProperty = "") {
   const handleKeyDown = (e) => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setSelectedIndex(
-        (prev) => prev < suggestions.length - 1 ? prev + 1 : prev
-      );
+      setSelectedIndex((prev) => prev < suggestions.length - 1 ? prev + 1 : prev);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setSelectedIndex((prev) => prev > 0 ? prev - 1 : -1);
@@ -4969,7 +5492,7 @@ function usePropertyAutocomplete(initialProperty = "") {
 }
 
 // lib/client/hooks/useVariables.ts
-import { useState as useState6, useEffect as useEffect6, useRef as useRef5 } from "react";
+import { useState as useState6, useEffect as useEffect5, useRef as useRef5 } from "react";
 var cachedVariables = null;
 var hmrCallbacks2 = /* @__PURE__ */ new Set();
 function initializeHMRListener2() {
@@ -4978,7 +5501,9 @@ function initializeHMRListener2() {
   window.__hmrVariablesInitialized = true;
   document.addEventListener("hmr-variables-update", () => {
     cachedVariables = null;
-    hmrCallbacks2.forEach((callback) => callback());
+    hmrCallbacks2.forEach((callback) => {
+      callback();
+    });
   });
 }
 if (typeof window !== "undefined") {
@@ -4989,7 +5514,7 @@ function useVariables() {
   const [loading, setLoading] = useState6(!cachedVariables);
   const [error, setError] = useState6(null);
   const callbackRef = useRef5(null);
-  useEffect6(() => {
+  useEffect5(() => {
     const refreshCallback = async () => {
       try {
         const response = await fetch("/api/variables-status");
@@ -5059,6 +5584,7 @@ export {
   ThemeProvider,
   clearAllConfigCache,
   clearBreakpointConfigCache,
+  clearKnownTokensCache,
   clearRemConversionConfigCache,
   clearResponsiveScalesConfigCache,
   createNavigationHandler,
@@ -5069,6 +5595,7 @@ export {
   fetchI18nConfig,
   getCachedBreakpointConfig,
   getCachedFontFamilies,
+  getCachedKnownTokens,
   getCachedRemConversionConfig,
   getCachedResponsiveScalesConfig,
   getColorVariableSuggestions,
@@ -5089,6 +5616,7 @@ export {
   isI18nConfigLoaded,
   isLinkMapping,
   isResponsiveStyle,
+  loadKnownTokens,
   mergeComponentStyles,
   mergeStyles,
   navigateTo,