meno-core 1.0.54 → 1.1.0

package/dist/lib/client/index.js

@@ -13,14 +13,17 @@ import {
   resolveLinkMapping,
   resolveStyleMapping,
   skipEmptyTemplateAttributes
-} from "../../chunks/chunk-AE3QK5QW.js";
+} from "../../chunks/chunk-NUP7H7D3.js";
 import {
   filterCSSProperties
-} from "../../chunks/chunk-STDY3OVM.js";
+} from "../../chunks/chunk-XTKNX4FW.js";
 import {
   BaseComponentRegistry,
+  DEFAULT_BREAKPOINTS,
   DEFAULT_PREFETCH_CONFIG,
-  breakpointClassPrefix,
+  DEFAULT_REM_CONFIG,
+  DEFAULT_RESPONSIVE_SCALES,
+  breakpointClassPrefixes,
   buildTemplateContext,
   extractInteractiveStyleMappings,
   extractNodeProperties,
@@ -28,6 +31,7 @@ import {
   generateElementClassName,
   generateRuleForClass,
   generateSingleClassCSS,
+  getBreakpointValues,
   getChildPath,
   getNestedValue,
   hasChildren,
@@ -35,10 +39,13 @@ import {
   hasInteractiveStyleMappings,
   hasItemTemplates,
   init_ComponentRegistry,
+  init_errorLogger,
   isBooleanMapping,
   isComponentNode,
   isCurrentLink,
+  isCustomNode,
   isEmbedNode,
+  isIslandNode,
   isItemDraftForLocale,
   isLinkNode,
   isListNode,
@@ -47,8 +54,11 @@ import {
   isSlotContent,
   isSlotMarker,
   isValidNodeType,
+  logNetworkError,
+  logRuntimeError,
   markAsSlotContent,
   mergeResponsiveStyles,
+  normalizeBreakpointConfig,
   pathToString,
   processItemPropsTemplate,
   processItemTemplate,
@@ -62,16 +72,7 @@ import {
   sortClassesByPropertyOrder,
   toFriendlyError,
   validatePageData
-} from "../../chunks/chunk-7HWQUVTU.js";
-import {
-  DEFAULT_BREAKPOINTS,
-  DEFAULT_REM_CONFIG,
-  DEFAULT_RESPONSIVE_SCALES,
-  getBreakpointValues,
-  logNetworkError,
-  logRuntimeError,
-  normalizeBreakpointConfig
-} from "../../chunks/chunk-I2WEGYA7.js";
+} from "../../chunks/chunk-2IIQK7T3.js";
 import {
   DEFAULT_I18N_CONFIG,
   isI18nValue,
@@ -79,11 +80,11 @@ import {
   parseLocaleFromPath,
   resolveI18nValue,
   setStoredLocale
-} from "../../chunks/chunk-3XER4E5W.js";
+} from "../../chunks/chunk-4ZRU52J2.js";
 import {
   isTiptapDocument,
   tiptapToHtml
-} from "../../chunks/chunk-NVRBTSQG.js";
+} from "../../chunks/chunk-5X4HCN7J.js";
 import {
   API_ROUTES,
   IFRAME_MESSAGE_TYPES,
@@ -91,7 +92,7 @@ import {
   NOT_FOUND_TIMEOUT_MS,
   RAW_HTML_PREFIX,
   init_constants
-} from "../../chunks/chunk-HIZMY3EP.js";
+} from "../../chunks/chunk-AR7LHIFY.js";
 import "../../chunks/chunk-KSBZ2L7C.js";
 
 // lib/client/core/ComponentBuilder.ts
@@ -404,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;
@@ -424,6 +425,7 @@ function clearAllConfigCache() {
   clearBreakpointConfigCache();
   clearResponsiveScalesConfigCache();
   clearRemConversionConfigCache();
+  clearKnownTokensCache();
   configPromise = null;
 }
 function getCachedBreakpointConfig() {
@@ -435,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;
@@ -549,33 +591,37 @@ function buildResponsivePrefixMap(breakpoints) {
   const breakpointValues = getBreakpointValues(breakpoints);
   const map = {};
   for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
-    map[breakpointClassPrefix(breakpointName)] = breakpointValue;
+    for (const prefix of breakpointClassPrefixes(breakpointName)) {
+      map[prefix] = breakpointValue;
+    }
   }
   return map;
 }
-function getClassBreakpointValue(className, prefixMap) {
-  for (const prefix of Object.keys(prefixMap)) {
+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);
+      const rule = generateRuleForClass(potentialClass, knownTokens2);
       if (rule) {
-        return prefixMap[prefix];
+        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;
@@ -590,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");
@@ -622,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.
@@ -655,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;
@@ -734,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) {
@@ -1405,6 +1469,7 @@ 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) {
@@ -1435,7 +1500,6 @@ function buildLocaleList(node, ctx, deps) {
       case "name":
         displayText = localeConfig.name;
         break;
-      case "nativeName":
       default:
         displayText = localeConfig.nativeName;
         break;
@@ -1483,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 = {
@@ -1498,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" : "");
@@ -1523,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;
@@ -1543,9 +1626,9 @@ 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) {
+  if (!hasSource) {
     const emptyState = h5(
       "div",
       {
@@ -1584,7 +1667,7 @@ function buildList(node, children, ctx, deps) {
           textAlign: "center"
         }
       },
-      `${label}: ${source || "resolved"} - No items`
+      `${label}: ${source || remoteUrl || sanityKey || "resolved"} - No items`
     );
     if (tag === null) {
       return emptyState;
@@ -2232,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);
     }
@@ -2287,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 {
       }
@@ -2331,10 +2425,10 @@ 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(
@@ -2563,6 +2657,8 @@ var ComponentBuilder = class {
       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;
     }
@@ -2572,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
    */
@@ -2670,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);
     }
   }
@@ -2872,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;
@@ -3030,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) {
@@ -3144,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;
@@ -3184,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();
     }
   }
@@ -3206,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");
@@ -3388,6 +3550,8 @@ function HMRManager({
       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) => {
@@ -3445,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
@@ -3531,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++) {
@@ -3589,7 +3758,7 @@ var StyleInjector = class {
                 processedCSSBlocks.push(`/* Component: ${name} (instance) */
 ${processedCSS}`);
               }
-            } catch (error) {
+            } catch (_error) {
               processedCSSBlocks.push(`/* Component: ${name} */
 ${originalCSS}`);
             }
@@ -3671,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 "";
@@ -3699,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);
@@ -3716,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 {
@@ -3752,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) {
@@ -3993,7 +4163,9 @@ var PrefetchService = class {
     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]);
     }
   }
   /**
@@ -4091,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);
             }
           }
@@ -4142,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();
@@ -4244,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);
@@ -4260,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]);
@@ -4428,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;
@@ -4445,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;
@@ -4477,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;
@@ -4499,7 +4689,7 @@ function Router(props = {}) {
         const data = await response.json();
         setCollectionItemsMap((prev) => ({ ...prev, [collection]: data.items || [] }));
       }
-    } catch (error) {
+    } catch (_error) {
     }
   }, []);
   useEffect2(() => {
@@ -4623,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",
         {
@@ -4644,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
+            )
           )
         )
       )
@@ -4825,7 +5015,9 @@ function initializeHMRListener() {
     cachedThemes = null;
     cachedDefaultTheme = null;
     await injectUpdatedThemeCSS();
-    hmrCallbacks.forEach((callback) => callback());
+    hmrCallbacks.forEach((callback) => {
+      callback();
+    });
   });
 }
 if (typeof window !== "undefined") {
@@ -4845,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}
 }
@@ -4857,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}
 }
@@ -4872,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);
@@ -5038,6 +5231,7 @@ function useTheme() {
 }
 
 // lib/client/styleProcessor.ts
+init_errorLogger();
 function mergeComponentStyles(componentDef, props) {
   try {
     let mergedProps = { ...componentDef.props || {} };
@@ -5069,6 +5263,7 @@ function mergeComponentStyles(componentDef, props) {
         }
       }
     } catch (e) {
+      logRuntimeError("styleProcessor.mergeStructureStyle", e);
     }
     const restProps = props || {};
     const normalizedMergedStyle = normalizeStyle(mergedProps.style) || {};
@@ -5082,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");
@@ -5108,11 +5318,11 @@ async function injectUpdatedThemeCSS2() {
     }
     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}
 }
@@ -5120,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}
 }
@@ -5198,6 +5409,12 @@ function setupCssHmrListeners() {
       location.reload();
     });
   }
+  if (!window.__hmrStylesheetInitialized) {
+    window.__hmrStylesheetInitialized = true;
+    document.addEventListener("hmr-stylesheet-update", () => {
+      reloadExternalStylesheets();
+    });
+  }
 }
 
 // lib/client/fontFamiliesService.ts
@@ -5275,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() {
@@ -5284,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") {
@@ -5295,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");
@@ -5365,6 +5584,7 @@ export {
   ThemeProvider,
   clearAllConfigCache,
   clearBreakpointConfigCache,
+  clearKnownTokensCache,
   clearRemConversionConfigCache,
   clearResponsiveScalesConfigCache,
   createNavigationHandler,
@@ -5375,6 +5595,7 @@ export {
   fetchI18nConfig,
   getCachedBreakpointConfig,
   getCachedFontFamilies,
+  getCachedKnownTokens,
   getCachedRemConversionConfig,
   getCachedResponsiveScalesConfig,
   getColorVariableSuggestions,
@@ -5395,6 +5616,7 @@ export {
   isI18nConfigLoaded,
   isLinkMapping,
   isResponsiveStyle,
+  loadKnownTokens,
   mergeComponentStyles,
   mergeStyles,
   navigateTo,