@myop/sdk 0.3.36 → 0.4.0-beta.0

package/dist/cjs/{_WebComponentSDK.e84be6ea.js → _WebComponentSDK.e9e877db.js}

@@ -1674,9 +1674,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       const iframe = this.IframeElement;
       const doc = iframe.contentDocument;
       if (!doc) {
-        console.warn("[MyopIframeComponent] Cannot observe auto size: contentDocument not accessible");
-        return () => {
-        };
+        return this.observeHeightViaBridge();
       }
       const clamp = (value, min, max) => {
         if (min !== void 0 && value < min) return min;
@@ -1820,6 +1818,32 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       this._autoSizeCleanup = cleanup;
       return cleanup;
     });
+    __publicField(this, "_bridgeSizeCleanup");
+    /**
+     * Auto-height for a frame the host can't read (cross-origin). Runs after the IframeSDK
+     * handshake: the frame reports body resizes and the host re-reads the scroll height.
+     */
+    __publicField(this, "observeHeightViaBridge", () => {
+      if (this._bridgeSizeCleanup) return this._bridgeSizeCleanup;
+      let observerCleanup;
+      let stopped = false;
+      const cleanup = () => {
+        stopped = true;
+        observerCleanup == null ? void 0 : observerCleanup();
+        this._bridgeSizeCleanup = void 0;
+      };
+      this._bridgeSizeCleanup = cleanup;
+      this.initiated().then(() => {
+        if (stopped || this.markedForDisposed) return;
+        this.IframeElement.style.position = "relative";
+        this.IframeElement.style.inset = "auto";
+        this.IframeElement.style.width = "100%";
+        this.setHeightBasedOnScrollHeight();
+        observerCleanup = this.send(new SetResizeObserverMessage());
+      }).catch(() => {
+      });
+      return cleanup;
+    });
     __publicField(this, "setSizeBasedOnDocumentElement", () => {
       const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
         const { height, width } = document.documentElement.getBoundingClientRect();
@@ -1865,6 +1889,8 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       return cleanupHandler;
     });
     __publicField(this, "dispose", () => {
+      var _a;
+      (_a = this._bridgeSizeCleanup) == null ? void 0 : _a.call(this);
       if (this._autoSizeCleanup) {
         this._autoSizeCleanup();
         this._autoSizeCleanup = void 0;
@@ -2030,7 +2056,11 @@ var MyopIframeLoader = class extends BaseMyopLoader {
           container.innerHTML = "";
         IframeElement = this.appendChild(container, IframeElement, options);
       }
-      return new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
+      const component = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
+      if (typedLoaderConfig.autoHeight && (options == null ? void 0 : options.autoSize) !== false) {
+        component.observeHeightViaBridge();
+      }
+      return component;
     });
   }
 };
@@ -2139,365 +2169,161 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.36";
-
-// src/host/embeddedSDK.ts
-var EMBEDDED_SDK_CONTENT = "";
-var HAS_EMBEDDED_SDK = false;
+var myop_sdk_version_default = "0.4.0-beta.0";
 
-// src/host/loaders/HTMLComponentLoader.ts
-var MYOP_WEB_COMPONENT_MARKER = "<!-- myop-web-component -->";
-var MYOP_WEB_COMPONENT_SCRIPT_ID = "myop-web-component";
-var extractedWebComponentScripts = /* @__PURE__ */ new Map();
-var seen2 = [];
-var sdk;
-var getInitiatedSdk = async () => {
-  if (!sdk) {
-    sdk = new WebComponentSDK();
-    sdk.init();
-  }
-  return sdk;
-};
-function createHTMLElementConstructor(htmlString, ShadowRootMode) {
-  return class extends HTMLElement {
-    connectedCallback() {
-      const mode = ShadowRootMode === ShadowRootModeType.open ? "open" : "closed";
-      const shadow = this.attachShadow({ mode });
-      getInitiatedSdk().then((sdk2) => {
-        sdk2.connectedCallback(this, shadow);
-        shadow.innerHTML = htmlString;
-      });
+// src/helpers/deliveryStore.ts
+var DB_NAME = "myop-delivery";
+var STORE = "components";
+var DB_VERSION = 1;
+var dbPromise = null;
+function openDb() {
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve) => {
+    try {
+      if (typeof indexedDB === "undefined") return resolve(null);
+      const req = indexedDB.open(DB_NAME, DB_VERSION);
+      req.onupgradeneeded = () => {
+        const db = req.result;
+        if (!db.objectStoreNames.contains(STORE)) db.createObjectStore(STORE, { keyPath: "key" });
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => resolve(null);
+      req.onblocked = () => resolve(null);
+    } catch (e) {
+      resolve(null);
     }
-  };
+  });
+  return dbPromise;
 }
-var createCustomWebComponent = (componentName, html, ShadowRootMode) => {
-  customElements.define(componentName, createHTMLElementConstructor(html, ShadowRootMode));
-  console.log("define('".concat(componentName, "') was called, web component ready to use"));
-};
-var toWebComponentName = (str) => {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/(\d+)/g, "-$1").toLowerCase();
-};
-var toCustomElementName = (name) => {
-  name = toWebComponentName(name);
-  return name.replace(/_/g, "-");
+function tx(mode, fn) {
+  return openDb().then((db) => new Promise((resolve) => {
+    if (!db) return resolve(null);
+    try {
+      const t = db.transaction(STORE, mode);
+      const req = fn(t.objectStore(STORE));
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => resolve(null);
+      t.onabort = () => resolve(null);
+    } catch (e) {
+      resolve(null);
+    }
+  }));
+}
+var HINT_PREFIX = "myop.d.";
+function writeHint(key, tag, expiresAt) {
+  try {
+    localStorage.setItem(HINT_PREFIX + key, JSON.stringify({ t: tag, e: expiresAt }));
+  } catch (e) {
+  }
+}
+function clearHint(key) {
+  try {
+    localStorage.removeItem(HINT_PREFIX + key);
+  } catch (e) {
+  }
+}
+var memory = /* @__PURE__ */ new Map();
+var deliveryStore = {
+  key(host, componentId, env, preview, opt) {
+    return "".concat(host, "|").concat(componentId, "|").concat(env, "|").concat(preview ? "preview" : "live", "|").concat(opt || "raw");
+  },
+  async get(key) {
+    const m = memory.get(key);
+    if (m) return m;
+    const e = await tx("readonly", (s) => s.get(key));
+    if (e) {
+      memory.set(key, e);
+      writeHint(key, e.tag, e.storedAt + e.windowMs);
+    }
+    return e;
+  },
+  async put(entry) {
+    memory.set(entry.key, entry);
+    writeHint(entry.key, entry.tag, entry.storedAt + entry.windowMs);
+    await tx("readwrite", (s) => s.put(entry));
+  },
+  async drop(key) {
+    memory.delete(key);
+    clearHint(key);
+    await tx("readwrite", (s) => s.delete(key));
+  },
+  /** Still usable without asking the server? */
+  fresh(e) {
+    return !!e && Date.now() - e.storedAt < e.windowMs;
+  },
+  /**
+   * The window this response licenses: the server's freshness minus what a CDN already
+   * spent. Returns 0 when the server said nothing about caching, which means "do not
+   * hold this" — the safe reading, and what production sends today.
+   */
+  windowFrom(headers) {
+    const cc = headers.get("cache-control") || "";
+    if (/no-store|no-cache/i.test(cc)) return 0;
+    const m = /s-maxage\s*=\s*(\d+)/i.exec(cc) || /max-age\s*=\s*(\d+)/i.exec(cc);
+    if (!m) return 0;
+    const total = Number(m[1]);
+    const age = Number(headers.get("age") || 0);
+    return Math.max(0, total - (isNaN(age) ? 0 : age)) * 1e3;
+  },
+  /** For tests and for `refresh()`: forget everything this browser holds. */
+  async clear() {
+    memory.clear();
+    try {
+      for (let i = localStorage.length - 1; i >= 0; i--) {
+        const k = localStorage.key(i);
+        if (k && k.startsWith(HINT_PREFIX)) localStorage.removeItem(k);
+      }
+    } catch (e) {
+    }
+    await tx("readwrite", (s) => s.clear());
+  }
 };
-var HTMLComponentLoader = class extends BaseMyopLoader {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "type", SkinLoaders.HTMLLoader);
-    __publicField(this, "load", async (componentDefinition, skin, container, options) => {
-      const loaderConfig = skin.loader;
-      const isWC = this.isMyopWebComponent(loaderConfig.HTML);
-      const { mode, isolate } = await this.resolveRenderMode(componentDefinition, skin, loaderConfig, isWC, options);
-      if (mode === false) {
-        throw new Error('[Myop] Rendering blocked by render policy for component "'.concat(componentDefinition.id, '"'));
-      }
-      if (isWC) {
-        if (mode !== "webComponent") {
-          throw new Error('[Myop] Web-component rendering denied by render policy for component "'.concat(componentDefinition.id, '"'));
+
+// src/helpers/CloudRepository.ts
+var convertV2VariantToComponentConfig = (config) => {
+  return {
+    instance: {
+      id: "auto",
+      componentId: config.componentId,
+      componentName: config.name,
+      skinSelector: {
+        type: "Dedicated",
+        skin: {
+          id: "skin_auto_v2_converted"
         }
-        return this.loadExtractedWebComponent(componentDefinition, skin, container, loaderConfig.HTML, options);
       }
-      let domId = "myop-comp-".concat(uuidv4());
-      let element;
-      if (loaderConfig.shadowRootMode === ShadowRootModeType.localFrame) {
-        const uniqId = uuidv4();
-        const domId2 = "myop-comp-".concat(uniqId);
-        let IframeElement = document.createElement("iframe");
-        IframeElement.id = domId2;
-        if (isolate) {
-          IframeElement.setAttribute("sandbox", "allow-scripts allow-forms allow-popups");
-        }
-        IframeElement.style.cssText = "\n                display: block;\n                padding: 0;\n                margin: 0;\n                position: absolute;\n                inset: 0;\n                overflow: hidden;\n                border: none;\n                opacity: ".concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                width: 100%;\n                height: 100%;\n                pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ";\n            ");
-        if (!container.querySelector('[id^="myop-comp-"]'))
-          container.innerHTML = "";
-        IframeElement = this.appendChild(container, IframeElement, options);
-        const __srcParts = [];
-        const doc = isolate ? {
-          open() {
-          },
-          writeln(s) {
-            __srcParts.push(s);
-          },
-          close() {
-            IframeElement.srcdoc = __srcParts.join("\n");
-          }
-        } : (() => {
-          const d = IframeElement.contentDocument || IframeElement.contentWindow.document;
-          d.open();
-          return d;
-        })();
-        let parsedSizeMeta = null;
+    },
+    type: {
+      id: config.id,
+      name: config.name,
+      description: config.description,
+      props: [
         {
-          const _preParser = new DOMParser();
-          const _preDoc = _preParser.parseFromString(loaderConfig.HTML, "text/html");
-          const sizeMeta = _preDoc.querySelector('meta[name="myop:size"]');
-          if (sizeMeta) {
-            try {
-              parsedSizeMeta = JSON.parse(sizeMeta.getAttribute("content") || "{}");
-            } catch (e) {
-            }
-          }
-        }
-        let HTML2Render = loaderConfig.HTML;
-        if (options == null ? void 0 : options._inspection) {
-          const parser = new DOMParser();
-          const _doc = parser.parseFromString(loaderConfig.HTML, "text/html");
-          const myop_preview_script = _doc.getElementById("myop_preview");
-          myop_preview_script == null ? void 0 : myop_preview_script.removeAttribute("type");
-          const temp = _doc.implementation.createHTMLDocument();
-          temp.body.innerHTML = "<script>\n                        const beforeKeysWindow = new Set(Object.keys(window));\n                        window.myopState = {\n                            beforeKeysWindow,\n                        };\n                <\/script>";
-          const node = temp.body.firstChild;
-          if (node && _doc.head) {
-            _doc.head.insertBefore(_doc.importNode(node, true), _doc.head.firstChild);
+          id: "in_auto_v2_converted",
+          name: "myop_init_interface",
+          type: "any",
+          behavior: {
+            type: PropConfigBehaviorTypes.code
           }
-          HTML2Render = "<!DOCTYPE html>" + _doc.documentElement.outerHTML;
-        } else if ((options == null ? void 0 : options.data) !== void 0) {
-          const parser = new DOMParser();
-          const _doc = parser.parseFromString(loaderConfig.HTML, "text/html");
-          const myop_preview_script = _doc.getElementById("myop_preview");
-          if (myop_preview_script) {
-            myop_preview_script.remove();
-            HTML2Render = "<!DOCTYPE html>" + _doc.documentElement.outerHTML;
+        },
+        {
+          id: "out_auto_v2_converted",
+          name: "myop_cta_handler",
+          type: "any",
+          behavior: {
+            type: PropConfigBehaviorTypes.code
           }
         }
-        if (options == null ? void 0 : options.injectCss) {
-          const parser = new DOMParser();
-          const _doc = parser.parseFromString(HTML2Render, "text/html");
-          const styleTag = _doc.createElement("style");
-          styleTag.setAttribute("data-myop-injected", "true");
-          styleTag.textContent = options.injectCss.replace(/<\s*\/\s*style/gi, "<\\/style");
-          (_doc.head || _doc.documentElement).appendChild(styleTag);
-          HTML2Render = "<!DOCTYPE html>" + _doc.documentElement.outerHTML;
-        }
-        doc.writeln(HTML2Render);
-        const sdkScript = HAS_EMBEDDED_SDK ? "<script>".concat(EMBEDDED_SDK_CONTENT, "<\/script>") : '<script src="'.concat(window.myop.__ROOT_SDK_PUBLIC_URL__, '"><\/script>');
-        const initScript = HAS_EMBEDDED_SDK ? "<script>\n                   const __myop_init = async () => {\n                        const iframeModule = await MyopSDK.getIframeModule();\n                        const IframeSDK = iframeModule.IframeSDK;\n                        const sdk = new IframeSDK();\n                        sdk.init();\n                   }\n                   __myop_init().then();\n                <\/script>" : "<script>\n                   window.__federation__.__public_path__ = window.__federation__.__public_path__;\n                   const __myop_init = async () => {\n                        const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());\n                        const sdk = new IframeSDK();\n                        sdk.init();\n                   }\n                   __myop_init().then();\n                <\/script>";
-        if (!isolate) {
-          doc.writeln("".concat(sdkScript).concat(initScript));
-        }
-        if (!isolate && (options == null ? void 0 : options.data) !== void 0) {
-          const ctaQueueScript = "<script>\n                    window.__myop_cta_queue = [];\n                    window.myop_cta_handler = function(action, payload) {\n                        window.__myop_cta_queue.push({action: action, payload: payload});\n                    };\n                <\/script>";
-          const escapedData = JSON.stringify(options.data).replace(/<\/script/gi, "\\u003c/script");
-          const dataScript = '<script id="__myop_init_data_script">\n                    (function() {\n                        var data = '.concat(escapedData, ";\n                        var scriptEl = document.getElementById('__myop_init_data_script');\n\n                        var callInitInterface = function(fn) {\n                            var startTime = performance.now();\n                            // Mark as pre-injected data call for extension tracking\n                            window.__myop_init_preinjected = true;\n                            try {\n                                fn(data);\n                            } finally {\n                                window.__myop_init_preinjected = false;\n                            }\n                            var duration = performance.now() - startTime;\n\n                            // Notify extension via postMessage (init* = pre-injected)\n                            try {\n                                window.parent.postMessage({\n                                    type: 'MYOP_PREINJECTED_INIT',\n                                    payload: {\n                                        data: data,\n                                        duration: duration,\n                                        timestamp: Date.now()\n                                    }\n                                }, '*');\n                            } catch (e) {}\n\n                            // Cleanup: remove script tag and stored data\n                            if (scriptEl && scriptEl.parentNode) {\n                                scriptEl.parentNode.removeChild(scriptEl);\n                            }\n                            delete window.__myop_init_data;\n                        };\n\n                        if (typeof window.myop_init_interface === 'function') {\n                            // Function already exists - call immediately\n                            callInitInterface(window.myop_init_interface);\n                        } else {\n                            // Function not yet defined - store data and watch for definition\n                            window.__myop_init_data = data;\n\n                            var _original;\n                            Object.defineProperty(window, 'myop_init_interface', {\n                                configurable: true,\n                                enumerable: true,\n                                set: function(fn) {\n                                    _original = fn;\n                                    if (window.__myop_init_data !== undefined) {\n                                        var storedData = window.__myop_init_data;\n                                        delete window.__myop_init_data;\n                                        callInitInterface(fn);\n                                    }\n                                },\n                                get: function() {\n                                    return _original;\n                                }\n                            });\n                        }\n                    })();\n                <\/script>");
-          doc.writeln(ctaQueueScript + dataScript);
-        }
-        if (isolate) {
-          const escapedData = (options == null ? void 0 : options.data) !== void 0 ? JSON.stringify(options.data).replace(/<\/script/gi, "\\u003c/script") : "undefined";
-          doc.writeln(this.buildIsolationBridge(escapedData));
-        }
-        doc.close();
-        const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
-        if (isolate) comp.enableIsolation();
-        comp.sizeMeta = parsedSizeMeta;
-        comp.initiated().then(() => {
-          if ((options == null ? void 0 : options.autoSize) === false) {
-            return;
-          }
-          let shown = false;
-          comp.observeAutoSize({
-            forceAutoSize: true,
-            onSizeChange: () => {
-              if (!shown && !(options == null ? void 0 : options.hidden)) {
-                shown = true;
-                comp.show();
-              }
-            }
-          });
-        });
-        return comp;
-      }
-      if (loaderConfig.shadowRootMode === ShadowRootModeType.none) {
-        const template = document.createElement("template");
-        template.innerHTML = loaderConfig.HTML;
-        element = template.content.firstElementChild;
-        getInitiatedSdk().then((sdk2) => {
-          sdk2.connectedCallback(element, element);
-        });
-      } else {
-        const customElementName = toCustomElementName(componentDefinition.name + skin.id);
-        if (!seen2.includes(customElementName)) {
-          createCustomWebComponent(customElementName, loaderConfig.HTML, loaderConfig.shadowRootMode);
-          seen2.push(customElementName);
-        }
-        element = document.createElement(customElementName);
-      }
-      if (!container.querySelector('[id^="myop-comp-"]'))
-        container.innerHTML = "";
-      element.id = domId;
-      if (options == null ? void 0 : options.hidden) {
-        element.style.opacity = "0";
-        element.style.position = "absolute";
-        element.style.height = "0";
-        element.style.width = "0";
-        element.style.pointerEvents = "none";
-        element.style.visibility = "hidden";
-      }
-      this.appendChild(container, element, options);
-      return new MyopWebComponent(componentDefinition, skin, container, element, options);
-    });
-  }
-  /**
-   * Detect if HTML is a Myop Web Component (starts with marker comment)
-   */
-  isMyopWebComponent(html) {
-    return html.trimStart().startsWith(MYOP_WEB_COMPONENT_MARKER);
-  }
-  /**
-   * Resolve how this component should render, applying the host render policy.
-   * Precedence: options.renderPolicy (per-call) fully replaces the global
-   * hostSDK.setRenderPolicy — so an app can restrict globally and allow specifics.
-   * With no policy set, behavior is unchanged from before (marker ⇒ web component).
-   */
-  async resolveRenderMode(componentDefinition, skin, loaderConfig, isWebComponent, options) {
-    var _a, _b, _c, _d;
-    const requestedMode = isWebComponent ? "webComponent" : loaderConfig.isolation || (options == null ? void 0 : options.isolation) ? "isolatedIframe" : "iframe";
-    const policy = (_d = options == null ? void 0 : options.renderPolicy) != null ? _d : (_c = (_b = (_a = window == null ? void 0 : window.myop) == null ? void 0 : _a.hostSDK) == null ? void 0 : _b.getRenderPolicy) == null ? void 0 : _c.call(_b);
-    const mode = policy ? await policy({ componentDefinition, skin, requestedMode, isWebComponent }) : requestedMode;
-    return { mode, isolate: mode === "isolatedIframe" };
-  }
-  /**
-   * The in-frame bridge for isolated components. Runs inside the sandboxed
-   * (opaque-origin) iframe, translating the same author-facing contract to/from
-   * postMessage since the host has no same-origin access:
-   *   • data-in : parent posts {type:'myop:init'} → calls window.myop_init_interface
-   *               (plus a baked initial value for the first render)
-   *   • data-out: window.myop_cta_handler → parent.postMessage({type:'myop:cta'})
-   *   • resize  : ResizeObserver → parent.postMessage({type:'myop:size'})
-   *
-   * TODO(dev-extension): the isolated path deliberately skips the same-origin
-   * dataScript, so it never posts the `MYOP_PREINJECTED_INIT` message the Myop dev
-   * extension listens for to log the INITIAL render (`init*`). Later init updates and
-   * all CTAs are still tracked (the extension wraps `comp.props`, which our isolated
-   * connectProps branch routes through), so only the first-render payload is missing
-   * from the extension's activity log for isolated components. Closing this would be a
-   * ~1-line `parent.postMessage({type:'MYOP_PREINJECTED_INIT', payload:{data}})` inside
-   * flushInitial() below — intentionally NOT done for now to avoid adding extension-only
-   * traffic to the component runtime. Web components have the same initial-init gap
-   * (initWithData is called on the element, not via comp.props) and it predates this.
-   */
-  buildIsolationBridge(initialDataLiteral) {
-    return "<script>\n            (function () {\n                var __initial = ".concat(initialDataLiteral, ";\n                var __pending;\n                // data-out (cta)\n                window.myop_cta_handler = function (action, payload) {\n                    try { parent.postMessage({ __myop: true, type: 'myop:cta', action: action, payload: payload }, '*'); } catch (e) {}\n                };\n                function callInit(data) {\n                    if (typeof window.myop_init_interface === 'function') { window.myop_init_interface(data); return true; }\n                    return false;\n                }\n                // data-in (init updates)\n                window.addEventListener('message', function (e) {\n                    var d = e.data;\n                    if (!d || d.__myop !== true) return;\n                    if (d.type === 'myop:init') { if (!callInit(d.data)) __pending = d.data; }\n                });\n                // first render: use a pending update if one arrived, else the baked initial data\n                (function flushInitial() {\n                    var data = (__pending !== undefined) ? __pending : __initial;\n                    if (data === undefined) return;\n                    if (callInit(data)) { __pending = undefined; __initial = undefined; }\n                    else requestAnimationFrame(flushInitial);\n                })();\n                // resize (report content size)\n                function contentHeight() {\n                    // Measure the BODY (content box). documentElement.scrollHeight includes\n                    // the iframe viewport \u2014 which we're driving \u2014 so it would report the\n                    // current frame height, not the content, and never shrink.\n                    var b = document.body;\n                    if (b) return Math.max(b.scrollHeight, b.offsetHeight);\n                    return document.documentElement.scrollHeight;\n                }\n                function postSize() {\n                    try {\n                        parent.postMessage({\n                            __myop: true, type: 'myop:size',\n                            height: contentHeight(),\n                            width: document.documentElement.scrollWidth\n                        }, '*');\n                    } catch (e) {}\n                }\n                // Observe the BODY (reflows with content) \u2014 not documentElement, whose box is\n                // the iframe viewport and would feed back into a resize loop. A MutationObserver\n                // catches content swaps (e.g. innerHTML re-render) that don't change body's box.\n                if (window.ResizeObserver) {\n                    try { var __ro = new ResizeObserver(postSize); if (document.body) __ro.observe(document.body); } catch (e) {}\n                }\n                if (window.MutationObserver && document.body) {\n                    try { new MutationObserver(postSize).observe(document.body, { childList: true, subtree: true, attributes: true, characterData: true }); } catch (e) {}\n                }\n                window.addEventListener('load', postSize);\n                postSize();\n            })();\n        <\/script>");
-  }
-  /**
-   * Extract the web component script content from HTML
-   */
-  extractWebComponentScript(html) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, "text/html");
-    const script = doc.getElementById(MYOP_WEB_COMPONENT_SCRIPT_ID);
-    return (script == null ? void 0 : script.textContent) || null;
-  }
-  /**
-   * Execute the web component script on the host document.
-   * Returns the custom element tag name this script registered.
-   */
-  executeWebComponentScript(scriptContent, scriptId) {
-    const cachedTagName = extractedWebComponentScripts.get(scriptId);
-    if (cachedTagName) {
-      console.log("[MyopWebComponent] Script already executed for ".concat(scriptId, ", reusing <").concat(cachedTagName, ">"));
-      return cachedTagName;
-    }
-    const script = document.createElement("script");
-    script.textContent = scriptContent;
-    script.id = "myop-extracted-".concat(scriptId);
-    document.head.appendChild(script);
-    const tagName = window.__MYOP_TAG_NAME__;
-    if (tagName) {
-      extractedWebComponentScripts.set(scriptId, tagName);
-    }
-    console.log("[MyopWebComponent] Executed web component script: ".concat(scriptId, " -> <").concat(tagName, ">"));
-    return tagName;
-  }
-  /**
-   * Load a Myop Web Component (extracted and run on host document)
-   */
-  async loadExtractedWebComponent(componentDefinition, skin, container, html, options) {
-    const scriptContent = this.extractWebComponentScript(html);
-    if (!scriptContent) {
-      throw new Error('[MyopWebComponent] No <script id="myop-web-component"> found in HTML');
-    }
-    const scriptId = "".concat(componentDefinition.id, "-").concat(skin.id);
-    const tagName = this.executeWebComponentScript(scriptContent, scriptId);
-    if (!tagName) {
-      throw new Error("[MyopWebComponent] Script did not set window.__MYOP_TAG_NAME__");
-    }
-    const domId = "myop-comp-".concat(uuidv4());
-    const element = document.createElement(tagName);
-    element.id = domId;
-    if (options == null ? void 0 : options.hidden) {
-      element.style.opacity = "0";
-      element.style.position = "absolute";
-      element.style.height = "0";
-      element.style.width = "0";
-      element.style.pointerEvents = "none";
-      element.style.visibility = "hidden";
-    }
-    if (!container.querySelector('[id^="myop-comp-"]')) {
-      container.innerHTML = "";
-    }
-    this.appendChild(container, element, options);
-    const component = new MyopExtractedWebComponent(
-      componentDefinition,
-      skin,
-      container,
-      element,
-      tagName,
-      options
-    );
-    if ((options == null ? void 0 : options.data) !== void 0) {
-      component.initWithData(options.data);
-    }
-    console.log("[MyopWebComponent] Loaded <".concat(tagName, "> into container"));
-    return component;
-  }
-};
-
-// src/helpers/CloudRepository.ts
-var convertV2VariantToComponentConfig = (config) => {
-  return {
-    instance: {
-      id: "auto",
-      componentId: config.componentId,
-      componentName: config.name,
-      skinSelector: {
-        type: "Dedicated",
-        skin: {
-          id: "skin_auto_v2_converted"
-        }
-      }
-    },
-    type: {
-      id: config.id,
-      name: config.name,
-      description: config.description,
-      props: [
-        {
-          id: "in_auto_v2_converted",
-          name: "myop_init_interface",
-          type: "any",
-          behavior: {
-            type: PropConfigBehaviorTypes.code
-          }
-        },
-        {
-          id: "out_auto_v2_converted",
-          name: "myop_cta_handler",
-          type: "any",
-          behavior: {
-            type: PropConfigBehaviorTypes.code
-          }
-        }
-      ],
-      refs: [],
-      skins: [
-        {
-          id: "skin_auto_v2_converted",
-          name: "auto_v2_converted",
-          description: "",
-          //TODO : handle empty :
-          // @ts-ignore
-          loader: config.consume_variant[0].loader
+      ],
+      refs: [],
+      skins: [
+        {
+          id: "skin_auto_v2_converted",
+          name: "auto_v2_converted",
+          description: "",
+          //TODO : handle empty :
+          // @ts-ignore
+          loader: config.consume_variant[0].loader
         }
       ],
       defaultSkin: 0
@@ -2538,6 +2364,45 @@ var _CloudRepository = class _CloudRepository {
     __publicField(this, "_envExplicitlySet", false);
     __publicField(this, "_staticMode", false);
     __publicField(this, "_queryParams", {});
+    /**
+     * Opt-in delivery settings, set by myop.delivery(). Off means: this file behaves
+     * EXACTLY as it did before — same host, same URL, same everything.
+     */
+    __publicField(this, "_delivery", { minify: false, host: null, cache: false });
+    /**
+     * What actually happened, for myop.delivery.stats(). `fellBack` is the number that
+     * matters: it is how you find out the lane is unhealthy without waiting for a
+     * bug report, because a fallback is INVISIBLE to the page (it still renders).
+     */
+    __publicField(this, "_deliveryStats", {
+      requests: 0,
+      viaDelivery: 0,
+      fellBack: 0,
+      lastError: null,
+      /** where the last loads were answered from — the number the client window exists to move */
+      fromMemory: 0,
+      fromStorage: 0,
+      fromNetwork: 0,
+      /** re-checks after the window ended, and how many were answered "nothing changed" */
+      revalidations: 0,
+      unchanged: 0,
+      bytesSaved: 0
+    });
+    /**
+     * Local serves waiting to be reported: componentId -> {env, count}.
+     *
+     * THE MEASUREMENT PROBLEM THIS SOLVES. The better this cache works, the more usage
+     * vanishes: a visitor inside their freshness window renders the page with no request,
+     * so neither the server nor the CDN can see them. Left alone, a successful rollout
+     * looks in the ledger exactly like customers leaving.
+     *
+     * So local serves are counted here and reported afterwards, batched, on a path that
+     * never blocks rendering: flushed when the page is hidden (keepalive, so it survives
+     * the tab closing) and opportunistically whenever the SDK is talking to the server
+     * anyway. Nothing is sent while the page is loading, which is the point of the window.
+     */
+    __publicField(this, "_localServes", /* @__PURE__ */ new Map());
+    __publicField(this, "_flushBound", false);
   }
   static get Main() {
     const globalMain = getGlobalMain();
@@ -2550,6 +2415,120 @@ var _CloudRepository = class _CloudRepository {
     }
     return _CloudRepository._main;
   }
+  /**
+   * How big the component we are NOT re-downloading is. Deliberately measured from what
+   * we hold rather than from Content-Length: once a response is compressed the header is
+   * not readable cross-origin, so reading it there reported 0 every single time.
+   */
+  static sizeOfHeld(e) {
+    var _a, _b, _c, _d, _e;
+    try {
+      return (((_e = (_d = (_c = (_b = (_a = e == null ? void 0 : e.config) == null ? void 0 : _a.type) == null ? void 0 : _b.skins) == null ? void 0 : _c[0]) == null ? void 0 : _d.loader) == null ? void 0 : _e.HTML) || "").length;
+    } catch (e2) {
+      return 0;
+    }
+  }
+  /**
+   * Turn on the opt-in delivery path.
+   *
+   * Opting in IS choosing the delivery stack: this points /consume at `host` (a second,
+   * complete stack reading the same data) and asks for the minified artifact. Leave this
+   * uncalled and nothing about the SDK changes.
+   *
+   * Deliberately mutates THIS instance rather than constructing a new repository:
+   * CloudRepository.Main is a global singleton shared across bundles (see getGlobalMain),
+   * so a second instance would be ignored by every component already using the first.
+   */
+  setDelivery(opts = {}) {
+    if (opts.minify !== void 0) this._delivery.minify = !!opts.minify;
+    if (opts.host !== void 0) this._delivery.host = opts.host;
+    if (opts.cache !== void 0) this._delivery.cache = !!opts.cache;
+  }
+  deliveryStats() {
+    var _a;
+    return __spreadProps(__spreadValues({}, this._deliveryStats), {
+      host: (_a = this._delivery.host) != null ? _a : _CloudRepository.DEFAULT_HOST,
+      minify: this._delivery.minify,
+      cache: this._delivery.cache
+    });
+  }
+  /**
+   * Forget what this browser holds, so the next load asks the server.
+   * `refresh()` with no ids drops everything; the counterpart to the window for the case
+   * where a change has to be visible on THIS load — right after someone publishes.
+   */
+  async refreshDelivery() {
+    await deliveryStore.clear();
+  }
+  noteLocalServe(componentId, env) {
+    const cur = this._localServes.get(componentId);
+    if (cur) cur.count++;
+    else this._localServes.set(componentId, { env, count: 1 });
+    this.bindFlush();
+  }
+  /** Report on page-hide, which is the only event that reliably fires on mobile. */
+  bindFlush() {
+    if (this._flushBound || typeof document === "undefined") return;
+    this._flushBound = true;
+    const onHide = () => {
+      if (document.visibilityState === "hidden") this.flushLocalServes();
+    };
+    document.addEventListener("visibilitychange", onHide);
+    window.addEventListener("pagehide", () => this.flushLocalServes());
+  }
+  /**
+   * Send what we have. `keepalive` is what makes this work at page-hide: the request
+   * outlives the document. Failure is ignored — a lost usage report must never be
+   * visible to a visitor, and the next page load will report its own.
+   */
+  flushLocalServes() {
+    if (!this._localServes.size) return;
+    const batch = [...this._localServes.entries()].map(([id, v]) => "".concat(id, ":").concat(v.env, ":").concat(v.count)).join(",");
+    this._localServes.clear();
+    try {
+      const url = "".concat(this.deliveryHost(), "/clientUsage?b=").concat(encodeURIComponent(batch));
+      fetch(url, { keepalive: true, mode: "cors", credentials: "omit" }).catch(() => {
+      });
+    } catch (e) {
+    }
+  }
+  /** Where /consume should be fetched from right now. */
+  deliveryHost() {
+    return this._delivery.host || this._baseUrl;
+  }
+  /**
+   * Fetch a delivery URL with ONE fallback to the default host.
+   *
+   * The fallback is the kill switch: break or disable the lane and every client drifts
+   * back to cloud.myop.dev on its own, with no customer deploy. It must therefore be
+   * genuinely silent to the page and genuinely LOUD in stats() — a fallback that nobody
+   * counts is an outage nobody notices.
+   *
+   * Only transport failures and 5xx fall back. A 404 is an answer: the component really
+   * is missing, and retrying elsewhere would only hide it.
+   */
+  async deliveryFetch(path) {
+    var _a;
+    if (this._localServes.size) this.flushLocalServes();
+    const host = this.deliveryHost();
+    const primary = "".concat(host).concat(path);
+    this._deliveryStats.requests++;
+    const usingLane = host !== this._baseUrl;
+    try {
+      const res = await fetch(primary);
+      if (res.ok || res.status < 500 || !usingLane) {
+        if (usingLane && res.ok) this._deliveryStats.viaDelivery++;
+        return res;
+      }
+      this._deliveryStats.lastError = "HTTP ".concat(res.status, " from ").concat(host);
+    } catch (e) {
+      if (!usingLane) throw e;
+      this._deliveryStats.lastError = String((_a = e == null ? void 0 : e.message) != null ? _a : e);
+    }
+    this._deliveryStats.fellBack++;
+    console.warn("[myop] delivery host failed (".concat(this._deliveryStats.lastError, ") \u2014 falling back to ").concat(this._baseUrl));
+    return await fetch("".concat(this._baseUrl).concat(path));
+  }
   /**
    * Enable static mode for self-hosted component registries.
    * In static mode, URLs are constructed as file paths instead of query params:
@@ -2645,12 +2624,68 @@ var _CloudRepository = class _CloudRepository {
               const qs = new URLSearchParams(this._queryParams).toString();
               if (qs) url += "?".concat(qs);
             } else {
-              url = "".concat(this._baseUrl, "/consume?id=").concat(componentId, "&env=").concat(env);
+              url = "/consume?id=".concat(componentId, "&env=").concat(env);
               if (usePreview) {
                 url += "&preview=true";
               }
+              if (this._delivery.minify && !usePreview) {
+                url += "&opt=min";
+              }
             }
-            const res = await fetch(url);
+            const cacheable = this._delivery.cache && !this._staticMode && !usePreview;
+            const storeKey = cacheable ? deliveryStore.key(
+              this.deliveryHost(),
+              componentId,
+              env,
+              usePreview,
+              this._delivery.minify ? "min" : "raw"
+            ) : "";
+            let held = cacheable ? await deliveryStore.get(storeKey) : null;
+            if (held && deliveryStore.fresh(held)) {
+              this._deliveryStats.fromStorage++;
+              this.noteLocalServe(componentId, env);
+              this.variants[cacheKey].resolved = held.config;
+              resolve(held.config);
+              return;
+            }
+            if (held && held.tag) {
+              const checkUrl = "/consume?ids=".concat(componentId, "&env=").concat(env) + (this._delivery.minify ? "&opt=min" : "") + "&have=".concat(encodeURIComponent(held.tag));
+              this._deliveryStats.revalidations++;
+              try {
+                const check = await this.deliveryFetch(checkUrl);
+                if (check.ok) {
+                  const body = await check.json();
+                  if ((body.unchanged || []).includes(componentId)) {
+                    this._deliveryStats.unchanged++;
+                    this._deliveryStats.bytesSaved += _CloudRepository.sizeOfHeld(held);
+                    held.storedAt = Date.now();
+                    held.windowMs = deliveryStore.windowFrom(check.headers) || held.windowMs;
+                    await deliveryStore.put(held);
+                    this.variants[cacheKey].resolved = held.config;
+                    resolve(held.config);
+                    return;
+                  }
+                  const item = (body.items || [])[0];
+                  if (item) {
+                    const cfg = convertV2VariantToComponentConfig(item);
+                    this._deliveryStats.fromNetwork++;
+                    await deliveryStore.put({
+                      key: storeKey,
+                      config: cfg,
+                      tag: item.tag || null,
+                      storedAt: Date.now(),
+                      windowMs: deliveryStore.windowFrom(check.headers),
+                      host: this.deliveryHost()
+                    });
+                    this.variants[cacheKey].resolved = cfg;
+                    resolve(cfg);
+                    return;
+                  }
+                }
+              } catch (e) {
+              }
+            }
+            const res = this._staticMode ? await fetch(url) : await this.deliveryFetch(url);
             if (!res.ok) {
               reject(new Error('Failed to load component "'.concat(componentId, '" (').concat(res.status).concat(this._staticMode ? " from ".concat(url) : "", ")")));
               return;
@@ -2665,145 +2700,490 @@ var _CloudRepository = class _CloudRepository {
               reject(new Error('Component "'.concat(componentId, '" has no implementation for environment "').concat(env, '"')));
               return;
             }
-            const componentConfig = convertV2VariantToComponentConfig(variant);
-            this.variants[cacheKey].resolved = componentConfig;
-            resolve(componentConfig);
-          } catch (e) {
-            delete this.variants[cacheKey];
-            reject(e);
-          }
+            const componentConfig = convertV2VariantToComponentConfig(variant);
+            this._deliveryStats.fromNetwork++;
+            if (cacheable) {
+              await deliveryStore.put({
+                key: storeKey,
+                config: componentConfig,
+                tag: variant.tag || null,
+                storedAt: Date.now(),
+                windowMs: deliveryStore.windowFrom(res.headers),
+                host: this.deliveryHost()
+              });
+            }
+            this.variants[cacheKey].resolved = componentConfig;
+            resolve(componentConfig);
+          } catch (e) {
+            delete this.variants[cacheKey];
+            reject(e);
+          }
+        }
+      );
+    }
+    return await this.variants[cacheKey];
+  }
+  /**
+   * Synchronous version of fetchComponentV2 — returns the config only if
+   * the fetch already completed, null otherwise.
+   *
+   * Uses the same `this.variants` cache that fetchComponentV2/preloadComponents
+   * populate. Each cached Promise is tagged with a `.resolved` property when
+   * it settles — this method just reads that property. No separate cache.
+   *
+   * Why this exists: React Native needs the config at render time to embed it
+   * in the WebView HTML (can't await in useState). If preloadComponents ran
+   * earlier and the fetch completed, this returns the result synchronously,
+   * skipping the WEBVIEW_READY → fetch → inject round trip entirely.
+   */
+  getResolvedConfig(componentId, env, preview) {
+    var _a;
+    const { cacheKey } = this.resolveParams(componentId, env, preview);
+    return ((_a = this.variants[cacheKey]) == null ? void 0 : _a.resolved) || null;
+  }
+  /**
+   * Resolve which (env, preview) pair — and therefore which cache key — a call
+   * for `componentId` refers to.
+   *
+   * Single source of truth for fetchComponentV2, getResolvedConfig and
+   * hydrateComponent, so a hydrated config always lands on the key a later
+   * fetch will look under.
+   */
+  resolveParams(componentId, environmentIdentifier, preview) {
+    const preloaded = this.preloadedComponents[componentId];
+    const hasExplicitParams = environmentIdentifier !== void 0 || preview !== void 0;
+    let env;
+    let usePreview;
+    if (!hasExplicitParams && preloaded) {
+      env = preloaded.env;
+      usePreview = preloaded.preview;
+    } else {
+      env = environmentIdentifier || this._defaultEnv;
+      const hasEffectiveEnv = environmentIdentifier || this._envExplicitlySet;
+      usePreview = preview === true ? true : preview === false ? false : !hasEffectiveEnv;
+    }
+    return { env, usePreview, cacheKey: "".concat(componentId, ":").concat(env, ":").concat(usePreview ? "preview" : "live") };
+  }
+  /**
+   * Seed an already-resolved component config into the cache, without any
+   * network request.
+   *
+   * The counterpart to {@link fetchComponentV2}: use it when the config was
+   * resolved somewhere else — most often on a server, then embedded in the
+   * page — so the browser can render the component with no round trip.
+   *
+   * After hydrating, `fetchComponentV2`, `getResolvedConfig` and `isPreloaded`
+   * all answer for this component from memory.
+   *
+   * Pass the same `env` / `preview` the config was resolved with; the defaults
+   * match what a plain `fetchComponentV2(componentId)` would have used.
+   */
+  hydrateComponent(componentId, config, env, preview) {
+    const { env: resolvedEnv, usePreview, cacheKey } = this.resolveParams(componentId, env, preview);
+    const promise = Promise.resolve(config);
+    promise.resolved = config;
+    this.variants[cacheKey] = promise;
+    this.preloadedComponents[componentId] = { env: resolvedEnv, preview: usePreview };
+  }
+  // ============ V1 Methods (Legacy) ============
+  /**
+   * Fetch a v1 component from a flow
+   */
+  async fetchComponentV1(componentId, flowId) {
+    if (flowId) {
+      const flow = await this.fetchFlow(flowId);
+      return flow.components.find((c) => c.type.id === componentId);
+    } else {
+      const flow = await this.fetchAutoFlow(componentId);
+      return flow.components[0];
+    }
+  }
+  async fetchAutoFlow(componentId) {
+    if (!this.userFlows[componentId]) {
+      this.userFlows[componentId] = new Promise(
+        async (resolve, reject) => {
+          try {
+            const res = await fetch(
+              "".concat(this._baseUrl, "/flow?id=").concat(componentId, "&auto=true")
+            );
+            const json = await res.json();
+            resolve(json.item);
+          } catch (e) {
+            delete this.userFlows[componentId];
+            reject(e);
+          }
+        }
+      );
+    }
+    return await this.userFlows[componentId];
+  }
+  async fetchFlow(flowId) {
+    if (!this.userFlows[flowId]) {
+      this.userFlows[flowId] = new Promise(
+        async (resolve, reject) => {
+          try {
+            const res = await fetch(
+              "".concat(this._baseUrl, "/flow?id=").concat(flowId, "&resolve=components")
+            );
+            const json = await res.json();
+            resolve(json.item);
+          } catch (e) {
+            delete this.userFlows[flowId];
+            reject(e);
+          }
+        }
+      );
+    }
+    return await this.userFlows[flowId];
+  }
+  // ============ Backward Compatibility ============
+  /**
+   * @deprecated Use fetchComponentV2 or fetchComponentV1 explicitly
+   * Defaults to v1 behavior for backward compatibility with existing code
+   */
+  async fetchComponent(componentId, flowId) {
+    return this.fetchComponentV1(componentId, flowId);
+  }
+};
+__publicField(_CloudRepository, "_main", null);
+/** The host every request goes to unless delivery() moved it. Never changes. */
+__publicField(_CloudRepository, "DEFAULT_HOST", "https://cloud.myop.dev");
+var CloudRepository = _CloudRepository;
+
+// src/helpers/cloudRepositoryHelpers.ts
+var _cloudRepository = CloudRepository.Main;
+var DELIVERY_HOST = "https://delivery.myop.dev";
+var delivery = (opts = {}) => {
+  var _a, _b;
+  const wantsLane = opts.minify !== false || opts.cache === true;
+  _cloudRepository.setDelivery({
+    minify: (_a = opts.minify) != null ? _a : false,
+    cache: (_b = opts.cache) != null ? _b : false,
+    host: opts.host !== void 0 ? opts.host : wantsLane ? DELIVERY_HOST : null
+  });
+  return deliveryStats();
+};
+var deliveryRefresh = async () => {
+  await _cloudRepository.refreshDelivery();
+  return deliveryStats();
+};
+var deliveryStats = () => _cloudRepository.deliveryStats();
+var deliveryOff = () => {
+  _cloudRepository.setDelivery({ minify: false, cache: false, host: null });
+  return deliveryStats();
+};
+
+// src/host/embeddedSDK.ts
+var EMBEDDED_SDK_CONTENT = "";
+var HAS_EMBEDDED_SDK = false;
+
+// src/host/loaders/HTMLComponentLoader.ts
+var MYOP_WEB_COMPONENT_MARKER = "<!-- myop-web-component -->";
+var MYOP_WEB_COMPONENT_SCRIPT_ID = "myop-web-component";
+var extractedWebComponentScripts = /* @__PURE__ */ new Map();
+var seen2 = [];
+var sdk;
+var getInitiatedSdk = async () => {
+  if (!sdk) {
+    sdk = new WebComponentSDK();
+    sdk.init();
+  }
+  return sdk;
+};
+function createHTMLElementConstructor(htmlString, ShadowRootMode) {
+  return class extends HTMLElement {
+    connectedCallback() {
+      const mode = ShadowRootMode === ShadowRootModeType.open ? "open" : "closed";
+      const shadow = this.attachShadow({ mode });
+      getInitiatedSdk().then((sdk2) => {
+        sdk2.connectedCallback(this, shadow);
+        shadow.innerHTML = htmlString;
+      });
+    }
+  };
+}
+var createCustomWebComponent = (componentName, html, ShadowRootMode) => {
+  customElements.define(componentName, createHTMLElementConstructor(html, ShadowRootMode));
+  console.log("define('".concat(componentName, "') was called, web component ready to use"));
+};
+var toWebComponentName = (str) => {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/(\d+)/g, "-$1").toLowerCase();
+};
+var toCustomElementName = (name) => {
+  name = toWebComponentName(name);
+  return name.replace(/_/g, "-");
+};
+var HTMLComponentLoader = class extends BaseMyopLoader {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", SkinLoaders.HTMLLoader);
+    __publicField(this, "load", async (componentDefinition, skin, container, options) => {
+      const loaderConfig = skin.loader;
+      const isWC = this.isMyopWebComponent(loaderConfig.HTML);
+      const { mode, isolate } = await this.resolveRenderMode(componentDefinition, skin, loaderConfig, isWC, options);
+      if (mode === false) {
+        throw new Error('[Myop] Rendering blocked by render policy for component "'.concat(componentDefinition.id, '"'));
+      }
+      if (isWC) {
+        if (mode !== "webComponent") {
+          throw new Error('[Myop] Web-component rendering denied by render policy for component "'.concat(componentDefinition.id, '"'));
+        }
+        return this.loadExtractedWebComponent(componentDefinition, skin, container, loaderConfig.HTML, options);
+      }
+      let domId = "myop-comp-".concat(uuidv4());
+      let element;
+      if (loaderConfig.shadowRootMode === ShadowRootModeType.localFrame) {
+        const uniqId = uuidv4();
+        const domId2 = "myop-comp-".concat(uniqId);
+        let IframeElement = document.createElement("iframe");
+        IframeElement.id = domId2;
+        if (isolate) {
+          IframeElement.setAttribute("sandbox", "allow-scripts allow-forms allow-popups");
+        }
+        IframeElement.style.cssText = "\n                display: block;\n                padding: 0;\n                margin: 0;\n                position: absolute;\n                inset: 0;\n                overflow: hidden;\n                border: none;\n                opacity: ".concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                width: 100%;\n                height: 100%;\n                pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ";\n            ");
+        if (!container.querySelector('[id^="myop-comp-"]'))
+          container.innerHTML = "";
+        IframeElement = this.appendChild(container, IframeElement, options);
+        const __srcParts = [];
+        const doc = isolate ? {
+          open() {
+          },
+          writeln(s) {
+            __srcParts.push(s);
+          },
+          close() {
+            IframeElement.srcdoc = __srcParts.join("\n");
+          }
+        } : (() => {
+          const d = IframeElement.contentDocument || IframeElement.contentWindow.document;
+          d.open();
+          return d;
+        })();
+        let parsedSizeMeta = null;
+        {
+          const _preParser = new DOMParser();
+          const _preDoc = _preParser.parseFromString(loaderConfig.HTML, "text/html");
+          const sizeMeta = _preDoc.querySelector('meta[name="myop:size"]');
+          if (sizeMeta) {
+            try {
+              parsedSizeMeta = JSON.parse(sizeMeta.getAttribute("content") || "{}");
+            } catch (e) {
+            }
+          }
+        }
+        let HTML2Render = loaderConfig.HTML;
+        if (options == null ? void 0 : options._inspection) {
+          const parser = new DOMParser();
+          const _doc = parser.parseFromString(loaderConfig.HTML, "text/html");
+          const myop_preview_script = _doc.getElementById("myop_preview");
+          myop_preview_script == null ? void 0 : myop_preview_script.removeAttribute("type");
+          const temp = _doc.implementation.createHTMLDocument();
+          temp.body.innerHTML = "<script>\n                        const beforeKeysWindow = new Set(Object.keys(window));\n                        window.myopState = {\n                            beforeKeysWindow,\n                        };\n                <\/script>";
+          const node = temp.body.firstChild;
+          if (node && _doc.head) {
+            _doc.head.insertBefore(_doc.importNode(node, true), _doc.head.firstChild);
+          }
+          HTML2Render = "<!DOCTYPE html>" + _doc.documentElement.outerHTML;
+        } else if ((options == null ? void 0 : options.data) !== void 0) {
+          const parser = new DOMParser();
+          const _doc = parser.parseFromString(loaderConfig.HTML, "text/html");
+          const myop_preview_script = _doc.getElementById("myop_preview");
+          if (myop_preview_script) {
+            myop_preview_script.remove();
+            HTML2Render = "<!DOCTYPE html>" + _doc.documentElement.outerHTML;
+          }
+        }
+        if (options == null ? void 0 : options.injectCss) {
+          const parser = new DOMParser();
+          const _doc = parser.parseFromString(HTML2Render, "text/html");
+          const styleTag = _doc.createElement("style");
+          styleTag.setAttribute("data-myop-injected", "true");
+          styleTag.textContent = options.injectCss.replace(/<\s*\/\s*style/gi, "<\\/style");
+          (_doc.head || _doc.documentElement).appendChild(styleTag);
+          HTML2Render = "<!DOCTYPE html>" + _doc.documentElement.outerHTML;
+        }
+        doc.writeln(HTML2Render);
+        const sdkScript = HAS_EMBEDDED_SDK ? "<script>".concat(EMBEDDED_SDK_CONTENT, "<\/script>") : '<script src="'.concat(window.myop.__ROOT_SDK_PUBLIC_URL__, '"><\/script>');
+        const initScript = HAS_EMBEDDED_SDK ? "<script>\n                   const __myop_init = async () => {\n                        const iframeModule = await MyopSDK.getIframeModule();\n                        const IframeSDK = iframeModule.IframeSDK;\n                        const sdk = new IframeSDK();\n                        sdk.init();\n                   }\n                   __myop_init().then();\n                <\/script>" : "<script>\n                   window.__federation__.__public_path__ = window.__federation__.__public_path__;\n                   const __myop_init = async () => {\n                        const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());\n                        const sdk = new IframeSDK();\n                        sdk.init();\n                   }\n                   __myop_init().then();\n                <\/script>";
+        if (!isolate) {
+          doc.writeln("".concat(sdkScript).concat(initScript));
+        }
+        if (!isolate && (options == null ? void 0 : options.data) !== void 0) {
+          const ctaQueueScript = "<script>\n                    window.__myop_cta_queue = [];\n                    window.myop_cta_handler = function(action, payload) {\n                        window.__myop_cta_queue.push({action: action, payload: payload});\n                    };\n                <\/script>";
+          const escapedData = JSON.stringify(options.data).replace(/<\/script/gi, "\\u003c/script");
+          const dataScript = '<script id="__myop_init_data_script">\n                    (function() {\n                        var data = '.concat(escapedData, ";\n                        var scriptEl = document.getElementById('__myop_init_data_script');\n\n                        var callInitInterface = function(fn) {\n                            var startTime = performance.now();\n                            // Mark as pre-injected data call for extension tracking\n                            window.__myop_init_preinjected = true;\n                            try {\n                                fn(data);\n                            } finally {\n                                window.__myop_init_preinjected = false;\n                            }\n                            var duration = performance.now() - startTime;\n\n                            // Notify extension via postMessage (init* = pre-injected)\n                            try {\n                                window.parent.postMessage({\n                                    type: 'MYOP_PREINJECTED_INIT',\n                                    payload: {\n                                        data: data,\n                                        duration: duration,\n                                        timestamp: Date.now()\n                                    }\n                                }, '*');\n                            } catch (e) {}\n\n                            // Cleanup: remove script tag and stored data\n                            if (scriptEl && scriptEl.parentNode) {\n                                scriptEl.parentNode.removeChild(scriptEl);\n                            }\n                            delete window.__myop_init_data;\n                        };\n\n                        if (typeof window.myop_init_interface === 'function') {\n                            // Function already exists - call immediately\n                            callInitInterface(window.myop_init_interface);\n                        } else {\n                            // Function not yet defined - store data and watch for definition\n                            window.__myop_init_data = data;\n\n                            var _original;\n                            Object.defineProperty(window, 'myop_init_interface', {\n                                configurable: true,\n                                enumerable: true,\n                                set: function(fn) {\n                                    _original = fn;\n                                    if (window.__myop_init_data !== undefined) {\n                                        var storedData = window.__myop_init_data;\n                                        delete window.__myop_init_data;\n                                        callInitInterface(fn);\n                                    }\n                                },\n                                get: function() {\n                                    return _original;\n                                }\n                            });\n                        }\n                    })();\n                <\/script>");
+          doc.writeln(ctaQueueScript + dataScript);
+        }
+        if (isolate) {
+          const escapedData = (options == null ? void 0 : options.data) !== void 0 ? JSON.stringify(options.data).replace(/<\/script/gi, "\\u003c/script") : "undefined";
+          doc.writeln(this.buildIsolationBridge(escapedData));
+        }
+        doc.close();
+        const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
+        if (isolate) comp.enableIsolation();
+        comp.sizeMeta = parsedSizeMeta;
+        comp.initiated().then(() => {
+          if ((options == null ? void 0 : options.autoSize) === false) {
+            return;
+          }
+          let shown = false;
+          comp.observeAutoSize({
+            forceAutoSize: true,
+            onSizeChange: () => {
+              if (!shown && !(options == null ? void 0 : options.hidden)) {
+                shown = true;
+                comp.show();
+              }
+            }
+          });
+        });
+        return comp;
+      }
+      if (loaderConfig.shadowRootMode === ShadowRootModeType.none) {
+        const template = document.createElement("template");
+        template.innerHTML = loaderConfig.HTML;
+        element = template.content.firstElementChild;
+        getInitiatedSdk().then((sdk2) => {
+          sdk2.connectedCallback(element, element);
+        });
+      } else {
+        const customElementName = toCustomElementName(componentDefinition.name + skin.id);
+        if (!seen2.includes(customElementName)) {
+          createCustomWebComponent(customElementName, loaderConfig.HTML, loaderConfig.shadowRootMode);
+          seen2.push(customElementName);
         }
-      );
-    }
-    return await this.variants[cacheKey];
+        element = document.createElement(customElementName);
+      }
+      if (!container.querySelector('[id^="myop-comp-"]'))
+        container.innerHTML = "";
+      element.id = domId;
+      if (options == null ? void 0 : options.hidden) {
+        element.style.opacity = "0";
+        element.style.position = "absolute";
+        element.style.height = "0";
+        element.style.width = "0";
+        element.style.pointerEvents = "none";
+        element.style.visibility = "hidden";
+      }
+      this.appendChild(container, element, options);
+      return new MyopWebComponent(componentDefinition, skin, container, element, options);
+    });
   }
   /**
-   * Synchronous version of fetchComponentV2 — returns the config only if
-   * the fetch already completed, null otherwise.
-   *
-   * Uses the same `this.variants` cache that fetchComponentV2/preloadComponents
-   * populate. Each cached Promise is tagged with a `.resolved` property when
-   * it settles — this method just reads that property. No separate cache.
-   *
-   * Why this exists: React Native needs the config at render time to embed it
-   * in the WebView HTML (can't await in useState). If preloadComponents ran
-   * earlier and the fetch completed, this returns the result synchronously,
-   * skipping the WEBVIEW_READY → fetch → inject round trip entirely.
+   * Detect if HTML is a Myop Web Component (starts with marker comment)
    */
-  getResolvedConfig(componentId, env, preview) {
-    var _a;
-    const { cacheKey } = this.resolveParams(componentId, env, preview);
-    return ((_a = this.variants[cacheKey]) == null ? void 0 : _a.resolved) || null;
+  isMyopWebComponent(html) {
+    return html.trimStart().startsWith(MYOP_WEB_COMPONENT_MARKER);
   }
   /**
-   * Resolve which (env, preview) pair — and therefore which cache key — a call
-   * for `componentId` refers to.
-   *
-   * Single source of truth for fetchComponentV2, getResolvedConfig and
-   * hydrateComponent, so a hydrated config always lands on the key a later
-   * fetch will look under.
+   * Resolve how this component should render, applying the host render policy.
+   * Precedence: options.renderPolicy (per-call) fully replaces the global
+   * hostSDK.setRenderPolicy — so an app can restrict globally and allow specifics.
+   * With no policy set, behavior is unchanged from before (marker ⇒ web component).
    */
-  resolveParams(componentId, environmentIdentifier, preview) {
-    const preloaded = this.preloadedComponents[componentId];
-    const hasExplicitParams = environmentIdentifier !== void 0 || preview !== void 0;
-    let env;
-    let usePreview;
-    if (!hasExplicitParams && preloaded) {
-      env = preloaded.env;
-      usePreview = preloaded.preview;
-    } else {
-      env = environmentIdentifier || this._defaultEnv;
-      const hasEffectiveEnv = environmentIdentifier || this._envExplicitlySet;
-      usePreview = preview === true ? true : preview === false ? false : !hasEffectiveEnv;
-    }
-    return { env, usePreview, cacheKey: "".concat(componentId, ":").concat(env, ":").concat(usePreview ? "preview" : "live") };
+  async resolveRenderMode(componentDefinition, skin, loaderConfig, isWebComponent, options) {
+    var _a, _b, _c, _d;
+    const requestedMode = isWebComponent ? "webComponent" : loaderConfig.isolation || (options == null ? void 0 : options.isolation) ? "isolatedIframe" : "iframe";
+    const policy = (_d = options == null ? void 0 : options.renderPolicy) != null ? _d : (_c = (_b = (_a = window == null ? void 0 : window.myop) == null ? void 0 : _a.hostSDK) == null ? void 0 : _b.getRenderPolicy) == null ? void 0 : _c.call(_b);
+    const mode = policy ? await policy({ componentDefinition, skin, requestedMode, isWebComponent }) : requestedMode;
+    return { mode, isolate: mode === "isolatedIframe" };
   }
   /**
-   * Seed an already-resolved component config into the cache, without any
-   * network request.
-   *
-   * The counterpart to {@link fetchComponentV2}: use it when the config was
-   * resolved somewhere else — most often on a server, then embedded in the
-   * page — so the browser can render the component with no round trip.
-   *
-   * After hydrating, `fetchComponentV2`, `getResolvedConfig` and `isPreloaded`
-   * all answer for this component from memory.
+   * The in-frame bridge for isolated components. Runs inside the sandboxed
+   * (opaque-origin) iframe, translating the same author-facing contract to/from
+   * postMessage since the host has no same-origin access:
+   *   • data-in : parent posts {type:'myop:init'} → calls window.myop_init_interface
+   *               (plus a baked initial value for the first render)
+   *   • data-out: window.myop_cta_handler → parent.postMessage({type:'myop:cta'})
+   *   • resize  : ResizeObserver → parent.postMessage({type:'myop:size'})
    *
-   * Pass the same `env` / `preview` the config was resolved with; the defaults
-   * match what a plain `fetchComponentV2(componentId)` would have used.
+   * TODO(dev-extension): the isolated path deliberately skips the same-origin
+   * dataScript, so it never posts the `MYOP_PREINJECTED_INIT` message the Myop dev
+   * extension listens for to log the INITIAL render (`init*`). Later init updates and
+   * all CTAs are still tracked (the extension wraps `comp.props`, which our isolated
+   * connectProps branch routes through), so only the first-render payload is missing
+   * from the extension's activity log for isolated components. Closing this would be a
+   * ~1-line `parent.postMessage({type:'MYOP_PREINJECTED_INIT', payload:{data}})` inside
+   * flushInitial() below — intentionally NOT done for now to avoid adding extension-only
+   * traffic to the component runtime. Web components have the same initial-init gap
+   * (initWithData is called on the element, not via comp.props) and it predates this.
    */
-  hydrateComponent(componentId, config, env, preview) {
-    const { env: resolvedEnv, usePreview, cacheKey } = this.resolveParams(componentId, env, preview);
-    const promise = Promise.resolve(config);
-    promise.resolved = config;
-    this.variants[cacheKey] = promise;
-    this.preloadedComponents[componentId] = { env: resolvedEnv, preview: usePreview };
+  buildIsolationBridge(initialDataLiteral) {
+    return "<script>\n            (function () {\n                var __initial = ".concat(initialDataLiteral, ";\n                var __pending;\n                // data-out (cta)\n                window.myop_cta_handler = function (action, payload) {\n                    try { parent.postMessage({ __myop: true, type: 'myop:cta', action: action, payload: payload }, '*'); } catch (e) {}\n                };\n                function callInit(data) {\n                    if (typeof window.myop_init_interface === 'function') { window.myop_init_interface(data); return true; }\n                    return false;\n                }\n                // data-in (init updates)\n                window.addEventListener('message', function (e) {\n                    var d = e.data;\n                    if (!d || d.__myop !== true) return;\n                    if (d.type === 'myop:init') { if (!callInit(d.data)) __pending = d.data; }\n                });\n                // first render: use a pending update if one arrived, else the baked initial data\n                (function flushInitial() {\n                    var data = (__pending !== undefined) ? __pending : __initial;\n                    if (data === undefined) return;\n                    if (callInit(data)) { __pending = undefined; __initial = undefined; }\n                    else requestAnimationFrame(flushInitial);\n                })();\n                // resize (report content size)\n                function contentHeight() {\n                    // Measure the BODY (content box). documentElement.scrollHeight includes\n                    // the iframe viewport \u2014 which we're driving \u2014 so it would report the\n                    // current frame height, not the content, and never shrink.\n                    var b = document.body;\n                    if (b) return Math.max(b.scrollHeight, b.offsetHeight);\n                    return document.documentElement.scrollHeight;\n                }\n                function postSize() {\n                    try {\n                        parent.postMessage({\n                            __myop: true, type: 'myop:size',\n                            height: contentHeight(),\n                            width: document.documentElement.scrollWidth\n                        }, '*');\n                    } catch (e) {}\n                }\n                // Observe the BODY (reflows with content) \u2014 not documentElement, whose box is\n                // the iframe viewport and would feed back into a resize loop. A MutationObserver\n                // catches content swaps (e.g. innerHTML re-render) that don't change body's box.\n                if (window.ResizeObserver) {\n                    try { var __ro = new ResizeObserver(postSize); if (document.body) __ro.observe(document.body); } catch (e) {}\n                }\n                if (window.MutationObserver && document.body) {\n                    try { new MutationObserver(postSize).observe(document.body, { childList: true, subtree: true, attributes: true, characterData: true }); } catch (e) {}\n                }\n                window.addEventListener('load', postSize);\n                postSize();\n            })();\n        <\/script>");
   }
-  // ============ V1 Methods (Legacy) ============
   /**
-   * Fetch a v1 component from a flow
+   * Extract the web component script content from HTML
    */
-  async fetchComponentV1(componentId, flowId) {
-    if (flowId) {
-      const flow = await this.fetchFlow(flowId);
-      return flow.components.find((c) => c.type.id === componentId);
-    } else {
-      const flow = await this.fetchAutoFlow(componentId);
-      return flow.components[0];
-    }
+  extractWebComponentScript(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const script = doc.getElementById(MYOP_WEB_COMPONENT_SCRIPT_ID);
+    return (script == null ? void 0 : script.textContent) || null;
   }
-  async fetchAutoFlow(componentId) {
-    if (!this.userFlows[componentId]) {
-      this.userFlows[componentId] = new Promise(
-        async (resolve, reject) => {
-          try {
-            const res = await fetch(
-              "".concat(this._baseUrl, "/flow?id=").concat(componentId, "&auto=true")
-            );
-            const json = await res.json();
-            resolve(json.item);
-          } catch (e) {
-            delete this.userFlows[componentId];
-            reject(e);
-          }
-        }
-      );
+  /**
+   * Execute the web component script on the host document.
+   * Returns the custom element tag name this script registered.
+   */
+  executeWebComponentScript(scriptContent, scriptId) {
+    const cachedTagName = extractedWebComponentScripts.get(scriptId);
+    if (cachedTagName) {
+      console.log("[MyopWebComponent] Script already executed for ".concat(scriptId, ", reusing <").concat(cachedTagName, ">"));
+      return cachedTagName;
     }
-    return await this.userFlows[componentId];
-  }
-  async fetchFlow(flowId) {
-    if (!this.userFlows[flowId]) {
-      this.userFlows[flowId] = new Promise(
-        async (resolve, reject) => {
-          try {
-            const res = await fetch(
-              "".concat(this._baseUrl, "/flow?id=").concat(flowId, "&resolve=components")
-            );
-            const json = await res.json();
-            resolve(json.item);
-          } catch (e) {
-            delete this.userFlows[flowId];
-            reject(e);
-          }
-        }
-      );
+    const script = document.createElement("script");
+    script.textContent = scriptContent;
+    script.id = "myop-extracted-".concat(scriptId);
+    document.head.appendChild(script);
+    const tagName = window.__MYOP_TAG_NAME__;
+    if (tagName) {
+      extractedWebComponentScripts.set(scriptId, tagName);
     }
-    return await this.userFlows[flowId];
+    console.log("[MyopWebComponent] Executed web component script: ".concat(scriptId, " -> <").concat(tagName, ">"));
+    return tagName;
   }
-  // ============ Backward Compatibility ============
   /**
-   * @deprecated Use fetchComponentV2 or fetchComponentV1 explicitly
-   * Defaults to v1 behavior for backward compatibility with existing code
+   * Load a Myop Web Component (extracted and run on host document)
    */
-  async fetchComponent(componentId, flowId) {
-    return this.fetchComponentV1(componentId, flowId);
+  async loadExtractedWebComponent(componentDefinition, skin, container, html, options) {
+    const scriptContent = this.extractWebComponentScript(html);
+    if (!scriptContent) {
+      throw new Error('[MyopWebComponent] No <script id="myop-web-component"> found in HTML');
+    }
+    const scriptId = "".concat(componentDefinition.id, "-").concat(skin.id);
+    const tagName = this.executeWebComponentScript(scriptContent, scriptId);
+    if (!tagName) {
+      throw new Error("[MyopWebComponent] Script did not set window.__MYOP_TAG_NAME__");
+    }
+    const domId = "myop-comp-".concat(uuidv4());
+    const element = document.createElement(tagName);
+    element.id = domId;
+    if (options == null ? void 0 : options.hidden) {
+      element.style.opacity = "0";
+      element.style.position = "absolute";
+      element.style.height = "0";
+      element.style.width = "0";
+      element.style.pointerEvents = "none";
+      element.style.visibility = "hidden";
+    }
+    if (!container.querySelector('[id^="myop-comp-"]')) {
+      container.innerHTML = "";
+    }
+    this.appendChild(container, element, options);
+    const component = new MyopExtractedWebComponent(
+      componentDefinition,
+      skin,
+      container,
+      element,
+      tagName,
+      options
+    );
+    if ((options == null ? void 0 : options.data) !== void 0) {
+      component.initWithData(options.data);
+    }
+    console.log("[MyopWebComponent] Loaded <".concat(tagName, "> into container"));
+    return component;
   }
 };
-__publicField(_CloudRepository, "_main", null);
-var CloudRepository = _CloudRepository;
-
-// src/helpers/cloudRepositoryHelpers.ts
-var _cloudRepository = CloudRepository.Main;
 
 // src/host/myopOverride.ts
 var checkMyopOverride = async (componentConfig) => {
@@ -2899,8 +3279,22 @@ var HostSDK = class {
         }
       });
     });
+    // A component's origin is whatever its iframe URL is, so an origin allowlist can't work here.
+    // Instead only frames this SDK created (or adopted) may talk to it. `send()` dispatches
+    // synthetic events, which have no source.
+    __publicField(this, "isTrustedSource", (source) => {
+      if (!source || source === window) return true;
+      const isOwnFrame = (component) => {
+        const element = component.element;
+        return (element == null ? void 0 : element.nodeName) === "IFRAME" && element.contentWindow === source;
+      };
+      return this.components.some(isOwnFrame) || this.components2init.some(isOwnFrame);
+    });
     __publicField(this, "incomingMessageHandler", (event) => {
-      if (event.origin === document.location.origin) {
+      var _a;
+      if (!((_a = event.data) == null ? void 0 : _a.myop)) return;
+      if (!this.isTrustedSource(event.source)) {
+        return;
       }
       if (event.data.myop) {
         if (event.data.direction !== MessageDirection.up && event.data.messageType !== MyopMessages.EnvelopedMessage) {
@@ -2916,8 +3310,8 @@ var HostSDK = class {
         if (myopMessage.messageType === MyopMessages.InitResponse) {
           this.components2init = this.components2init.filter((component2) => component2.id !== myopMessage.content.id);
           const initiatedComponent = this.components.find((component2) => {
-            var _a;
-            return component2.id === ((_a = myopMessage.content) == null ? void 0 : _a.id);
+            var _a2;
+            return component2.id === ((_a2 = myopMessage.content) == null ? void 0 : _a2.id);
           });
           initiatedComponent == null ? void 0 : initiatedComponent.setInitiated();
           return;
@@ -2970,7 +3364,10 @@ var HostSDK = class {
     });
     __publicField(this, "init", (customComponentLoaderCreators) => {
       if (this.initiated) {
-        throw new Error("hostSDK already initiated");
+        if (customComponentLoaderCreators == null ? void 0 : customComponentLoaderCreators.length) {
+          this._registerLoaders(customComponentLoaderCreators);
+        }
+        return;
       }
       const basicLoaders = [
         new MyopIframeLoader(),
@@ -2981,16 +3378,7 @@ var HostSDK = class {
         ...basicLoaders
       ];
       if (customComponentLoaderCreators) {
-        const loaderByType = {};
-        customComponentLoaderCreators.forEach((customComponentLoaderCreator) => {
-          const customLoader = new customComponentLoaderCreator(this.componentsLoaders);
-          loaderByType[customLoader.type] = customLoader;
-        });
-        this.componentsLoaders.forEach((loader) => {
-          if (!loaderByType[loader.type])
-            loaderByType[loader.type] = loader;
-        });
-        this.componentsLoaders = Object.values(loaderByType);
+        this._registerLoaders(customComponentLoaderCreators);
       }
       window.addEventListener(
         "message",
@@ -3000,6 +3388,18 @@ var HostSDK = class {
       console.log("myop hostSDK initiated", document.location.href);
       this.initiated = true;
     });
+    __publicField(this, "_registerLoaders", (customComponentLoaderCreators) => {
+      const loaderByType = {};
+      customComponentLoaderCreators.forEach((customComponentLoaderCreator) => {
+        const customLoader = new customComponentLoaderCreator(this.componentsLoaders);
+        loaderByType[customLoader.type] = customLoader;
+      });
+      this.componentsLoaders.forEach((loader) => {
+        if (!loaderByType[loader.type])
+          loaderByType[loader.type] = loader;
+      });
+      this.componentsLoaders = Object.values(loaderByType);
+    });
     __publicField(this, "_getSkinIdBySkinSelector", async (skinSelector, experiences = [], hooks) => {
       var _a;
       async function asyncFind(array, predicate) {
@@ -3180,6 +3580,13 @@ if (!window.myop.hostSDK) {
   }
   window.myop.hostSDK = _hostSDK;
 }
+if (window.myop && !window.myop.delivery) {
+  const api = (opts) => delivery(opts);
+  api.stats = deliveryStats;
+  api.off = deliveryOff;
+  api.refresh = deliveryRefresh;
+  window.myop.delivery = api;
+}
 var hostSDK = window.myop.hostSDK;
 defineDynamicImport("hostSDK", hostSDK);