@myop/sdk 0.3.34 → 0.4.0-beta.0

package/dist/cjs/{_hostSDK.cdbc1f60.js → _hostSDK.0c271647.js}

@@ -1529,9 +1529,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;
@@ -1675,6 +1673,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();
@@ -1720,6 +1744,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;
@@ -1885,7 +1911,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;
     });
   }
 };
@@ -1999,1015 +2029,1366 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.3.34";
+var myop_sdk_version_default = "0.4.0-beta.0";
 
-// src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
-var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
-  constructor(messageToHost, context) {
-    super(messageToHost);
-    this.context = context;
-    __publicField(this, "executor", (event) => {
-      if (event.destination) {
-        const destination = event.destination;
-        if (this.context[destination].context) {
-          const _messageToHost = (message, replayTo) => {
-            this.messageToHost(__spreadProps(__spreadValues({}, message), {
-              source: event.destination ? event.destination : event.source,
-              destination: event.source ? event.source : event.destination
-            }), replayTo);
-          };
-          return this.innerExecutor(event, this.context[destination].context, _messageToHost);
-        } else {
-          debugger;
-        }
-      } else {
-        debugger;
-      }
-    });
+// 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;
+}
+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());
   }
 };
 
-// src/consts.ts
-var myopAttributes = {
-  id: "myop-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"
+        }
+      }
+    },
+    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
+        }
+      ],
+      defaultSkin: 0
+    },
+    name: config.name
+  };
 };
-
-// src/common/messageHandlers/helpers.ts
-var getElementsByRef = (ref, el) => {
-  return el.querySelectorAll("[".concat(myopAttributes.id, "='").concat(ref.refConfig.selector, "']"));
+var GLOBAL_KEY = "__MYOP_CLOUD_REPOSITORY_MAIN__";
+var getGlobalMain = () => {
+  if (typeof window !== "undefined") {
+    return window[GLOBAL_KEY];
+  }
+  if (typeof globalThis !== "undefined") {
+    return globalThis[GLOBAL_KEY];
+  }
+  return void 0;
 };
-
-// src/webcomponent/messageHandlers/bindOnClickHandler.ts
-var BindOnClickHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "messageType", MyopMessages.BindClickMessage);
-    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
-      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
-      const cleanupTasks = [];
-      items.forEach((item) => {
-        const handler = () => {
-          messageToHost(new ClickReplayMessage(event.handlerUniqueId));
-        };
-        item.addEventListener("click", handler);
-        cleanupTasks.push(() => {
-          item.removeEventListener("click", handler);
-        });
-      });
-      return () => {
-        cleanupTasks.forEach((task) => task());
-      };
-    });
+var setGlobalMain = (instance) => {
+  if (typeof window !== "undefined") {
+    window[GLOBAL_KEY] = instance;
+  }
+  if (typeof globalThis !== "undefined") {
+    globalThis[GLOBAL_KEY] = instance;
   }
 };
-
-// src/webcomponent/messageHandlers/changeTextHandler.ts
-var ChangeTextHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "messageType", MyopMessages.ChangeTextMessage);
-    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
-      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
-      items.forEach((item) => {
-        item.textContent = event.content;
-      });
+var _CloudRepository = class _CloudRepository {
+  constructor(_baseUrl = "https://cloud.myop.dev") {
+    this._baseUrl = _baseUrl;
+    // v2 cache - keyed by componentId:env:preview|live
+    // Each Promise is tagged with a `resolved` property after settling (see fetchComponentV2).
+    __publicField(this, "variants", {});
+    // Track which components were preloaded and with what params
+    // Key: componentId, Value: { env, preview }
+    __publicField(this, "preloadedComponents", {});
+    // v1 cache
+    __publicField(this, "userFlows", {});
+    __publicField(this, "_defaultEnv", "production");
+    __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);
   }
-};
-
-// src/webcomponent/shadowRootRef.ts
-var ShadowRootRef = class extends RootRef {
-  constructor(container, shadowRoot) {
-    super(container, shadowRoot);
-    this.container = container;
-    this.shadowRoot = shadowRoot;
+  static get Main() {
+    const globalMain = getGlobalMain();
+    if (globalMain) {
+      return globalMain;
+    }
+    if (!_CloudRepository._main) {
+      _CloudRepository._main = new _CloudRepository();
+      setGlobalMain(_CloudRepository._main);
+    }
+    return _CloudRepository._main;
   }
-};
-
-// src/webcomponent/messageHandlers/DetectMyopRefsMessageHandler.ts
-var DetectMyopRefsMessageHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
-      const allMyopItems = shadowRootRef.shadowRoot.querySelectorAll("[".concat(myopAttributes.id, "]"));
-      let myopRefs = [];
-      allMyopItems.forEach((item) => {
-        const myopId = item.getAttribute(myopAttributes.id);
-        if (myopId) {
-          myopRefs.push(new MyopElementRef(myopId, item.tagName, item.getBoundingClientRect(), item.offsetTop, item.offsetLeft));
-        }
-      });
-      this.messageToHost(new DetectedMyopRefsMessage(event.handlerUniqueId, myopRefs));
+  /**
+   * 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
     });
-    __publicField(this, "messageType", MyopMessages.DetectMyopRefsMessage);
   }
-};
-
-// src/webcomponent/messageHandlers/setAttributeHandler.ts
-var setAttributeHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "messageType", MyopMessages.SetAttributeMessage);
-    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
-      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
-      items.forEach((item) => {
-        item.setAttribute(event.name, event.value);
+  /**
+   * 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) {
+    }
   }
-};
-
-// src/webcomponent/messageHandlers/addEventListenerHandler.ts
-var AddEventListenerHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "messageType", MyopMessages.AddEventListenerMessage);
-    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
-      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
-      const cleanupTasks = [];
-      items.forEach((item) => {
-        const handler = (e) => {
-          messageToHost(new EventListenerCallbackMessage(event.handlerUniqueId, makeSerializable(e, event.serializableSkeleton)));
-        };
-        item.addEventListener(event.type, handler);
-        cleanupTasks.push(() => {
-          item.removeEventListener(event.type, handler);
-        });
-      });
-      return () => {
-        cleanupTasks.forEach((task) => task());
-      };
-    });
+  /** Where /consume should be fetched from right now. */
+  deliveryHost() {
+    return this._delivery.host || this._baseUrl;
   }
-};
-
-// src/webcomponent/messageHandlers/CreateRefComponentMessageHandler.ts
-var CreateRefComponentMessageHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "messageType", MyopMessages.CreateRefComponentMessage);
-    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
-      const createRef = async () => {
-        const allItems = shadowRootRef.shadowRoot.querySelectorAll("[".concat(myopAttributes.id, "='").concat(event.refConfig.selector, "']"));
-        if (allItems.length === 1) {
-          const hostSDK2 = HostSDK.Instance();
-          const refComponent = hostSDK2.components.find((c) => c.id === event.options.id);
-          if (refComponent) {
-            refComponent.dispose();
-          } else {
-          }
-          const index = hostSDK2.components.indexOf(refComponent);
-          if (index !== -1) {
-            hostSDK2.components.splice(index, 1);
-          } else {
-          }
-          const implementationComponent = await hostSDK2.loadComponent(
-            event.nestedComponentConfig,
-            allItems.item(0),
-            event.options
-          );
-          const nestedRefConfig = [];
-          Object.keys(implementationComponent.refs).forEach((refName) => {
-            let ref = implementationComponent.refs[refName];
-            ref = ref.__nonProxied || ref;
-            if (ref.componentDefinition) {
-              nestedRefConfig.push({
-                refName,
-                componentDefinitionId: ref.componentDefinition.id
-              });
-            }
-          });
-          messageToHost(new RefComponentCreatedMessage(event.handlerUniqueId, nestedRefConfig));
-        } else {
-          console.error("CreateRefComponentMessageHandler - DOM element not found");
-          this.messageToHost(new RefComponentCreatedMessage(event.handlerUniqueId, [], true));
-          debugger;
-        }
-      };
-      createRef().then();
-    });
+  /**
+   * 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));
   }
-};
-
-// src/common/messageHandlers/executeScriptHandler.ts
-var ExecuteScriptHandlerExecutor = (event, replier, rootRef) => {
-  const __scriptInputs = event.scriptInputs ? event.scriptInputs : {};
-  __scriptInputs.makeSerializable = makeSerializable;
-  __scriptInputs.send = replier;
-  __scriptInputs.rootRef = rootRef;
-  __scriptInputs.__scriptInputs = __scriptInputs;
-  const dynamicFunction = new Function("return (".concat(event.script, ")(...arguments)"));
-  const ret = dynamicFunction(__scriptInputs);
-  replier(ret);
-};
-
-// src/webcomponent/messageHandlers/executeScriptHandler.ts
-var ExecuteScriptHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "messageType", MyopMessages.ExecuteScriptMessage);
-    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
-      const replier = (data) => {
-        messageToHost(new ExecuteScriptReplyMessage(event.handlerUniqueId, data));
-      };
-      ExecuteScriptHandlerExecutor(event, replier, shadowRootRef);
-    });
+  /**
+   * Enable static mode for self-hosted component registries.
+   * In static mode, URLs are constructed as file paths instead of query params:
+   *   ${baseUrl}/components/${componentId}/${env}.json
+   */
+  enableStaticMode() {
+    this._staticMode = true;
   }
-};
-
-// src/webcomponent/messageHandlers/GetElementValueHandler.ts
-var getInputValue = (element) => {
-  if (!element) return null;
-  if (element.tagName === "FORM") {
-    const formData = new FormData(element);
-    const dataObject = {
-      formData: {},
-      unmappedData: []
-    };
-    const elements = element.querySelectorAll("input, select, textarea");
-    let autoNameIndexer = -1;
-    elements.forEach((element2) => {
-      if (typeof element2.value === "string") {
-        const myopId = element2.getAttribute(myopAttributes.id);
-        let key = element2.getAttribute("name");
-        const nodeData = {
-          id: element2.id,
-          name: key,
-          value: getInputValue(element2),
-          required: element2.required,
-          validity: makeSerializable(element2.validity, true),
-          myopId
-        };
-        if (!key) {
-          dataObject.unmappedData.push(nodeData);
-        } else {
-          if (dataObject.formData[key]) {
-            if (dataObject.formData[key].value) {
-              dataObject.unmappedData.push(nodeData);
-            } else {
-              dataObject.unmappedData.push(dataObject.formData[key]);
-              dataObject.formData[key] = nodeData;
-            }
-          } else {
-            dataObject.formData[key] = nodeData;
-          }
-        }
-      }
-    });
-    return dataObject;
+  /**
+   * Set query parameters to append to all fetch URLs (e.g. for CDN cache busting).
+   * Example: `setQueryParams({ lastupdate: '11112026' })`
+   */
+  setQueryParams(params) {
+    this._queryParams = params;
   }
-  if (element.type === "checkbox" || element.type === "radio") {
-    return element.checked ? element.value : null;
+  /**
+   * Set the default environment for this CloudRepository instance
+   */
+  setEnvironment(env) {
+    this._defaultEnv = env;
+    this._envExplicitlySet = true;
   }
-  if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
-    return element.value;
+  /**
+   * Get the current default environment
+   */
+  getDefaultEnvironment() {
+    return this._defaultEnv;
   }
-  if (element.tagName === "SELECT") {
-    return element.value;
+  // ============ V2 Methods (Default) ============
+  /**
+   * Check if a component is already cached/preloaded (v2)
+   * If env and preview are not provided, checks if ANY version is preloaded
+   */
+  isPreloaded(componentId, env, preview) {
+    if (env !== void 0 || preview !== void 0) {
+      const cacheKey = "".concat(componentId, ":").concat(env || this._defaultEnv, ":").concat(preview ? "preview" : "live");
+      return cacheKey in this.variants;
+    }
+    return componentId in this.preloadedComponents;
   }
-  if (element.isContentEditable) {
-    return element.innerText || element.textContent;
+  /**
+   * Get the preloaded params for a component (if preloaded)
+   * Returns undefined if not preloaded
+   */
+  getPreloadedParams(componentId) {
+    return this.preloadedComponents[componentId];
   }
-  return null;
-};
-var GetElementValueHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "messageType", MyopMessages.GetElementValueMessage);
-    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
-      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
-      items.forEach((item) => {
-        messageToHost(new ElementValueReplayMessage(getInputValue(item)), event);
-      });
-    });
+  /**
+   * Resolve a component config: fetch it once, then serve it from this
+   * repository's cache.
+   *
+   * This is the name to use. `fetchComponentV2` is the same method under its
+   * versioned name and stays for backward compatibility — note that the
+   * unversioned `fetchComponent` is a *deprecated v1* API and is NOT this.
+   *
+   * Completes the trio with {@link getResolvedConfig} (synchronous read of an
+   * already-resolved config) and {@link hydrateComponent} (seed one you
+   * already hold).
+   *
+   * Prefer the module-level `preloadComponents([id])` in app code; reach for
+   * this when you need an isolated repository instance whose cache lifetime
+   * you control — a server with its own TTL, for example.
+   */
+  async resolveComponent(componentId, env, preview) {
+    return this.fetchComponentV2(componentId, env, preview);
   }
-};
-
-// src/webcomponent/messageHandlers/setInnerHtmlHandler.ts
-var SetInnerHtmlHandler = class extends BaseWebComponentMessageHandler {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "messageType", MyopMessages.SetInnerHtml);
-    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
-      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
-      items.forEach((item) => {
-        item.innerHTML = event.content;
-      });
+  /**
+   * Fetch a v2 component config
+   * If env/preview not specified and component was preloaded, uses preloaded params
+   *
+   * @see resolveComponent — the unversioned name for this method
+   */
+  async fetchComponentV2(componentId, environmentIdentifier, preview) {
+    const { env, usePreview, cacheKey } = this.resolveParams(componentId, environmentIdentifier, preview);
+    console.log("[CloudRepository] fetchComponentV2", {
+      componentId: componentId.slice(0, 8) + "...",
+      env,
+      usePreview,
+      cacheKey,
+      cached: cacheKey in this.variants
     });
-  }
-};
-
-// src/webcomponent/WebComponentSDK.ts
-var WebComponentSDK = class extends BaseMyopSDK {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "alwaysPassEnvelopesToHost", true);
-    //when new web component created.
-    __publicField(this, "connectedCallback", (container, shadow) => {
-      container.addEventListener(myopWebcomponentConsts.webcomponent_message_key, (e) => {
-        const eventContent = e.data ? e.data : e.detail;
-        if (!eventContent || !eventContent.myop) {
-          debugger;
-          throw new Error("recvied webcomponent_message with wrong type");
-        } else {
-          const message = eventContent;
-          this.handleIncomeMessages(e);
-          if (message.messageType === MyopMessages.InitMessage) {
-            const newComponentId = message.content.id;
-            this.components[newComponentId].context = new ShadowRootRef(container, shadow);
+    if (!this.variants[cacheKey]) {
+      if (!this.preloadedComponents[componentId]) {
+        this.preloadedComponents[componentId] = { env, preview: usePreview };
+      }
+      this.variants[cacheKey] = new Promise(
+        async (resolve, reject) => {
+          try {
+            let url;
+            if (this._staticMode) {
+              const file = usePreview ? "preview" : env;
+              url = "".concat(this._baseUrl, "/components/").concat(componentId, "/").concat(file, ".json");
+              const qs = new URLSearchParams(this._queryParams).toString();
+              if (qs) url += "?".concat(qs);
+            } else {
+              url = "/consume?id=".concat(componentId, "&env=").concat(env);
+              if (usePreview) {
+                url += "&preview=true";
+              }
+              if (this._delivery.minify && !usePreview) {
+                url += "&opt=min";
+              }
+            }
+            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;
+            }
+            const json = await res.json();
+            const variant = json.item;
+            if (!variant) {
+              reject(new Error('Component "'.concat(componentId, '" not found')));
+              return;
+            }
+            if (!variant.consume_variant || !variant.consume_variant.length) {
+              reject(new Error('Component "'.concat(componentId, '" has no implementation for environment "').concat(env, '"')));
+              return;
+            }
+            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);
           }
         }
-      });
-      setTimeout(() => {
-        this.messageToHost(new InitRequest());
-      }, 1);
-    });
-    __publicField(this, "messageToHost", (message, replayTo) => {
-      message.direction = MessageDirection.up;
-      if (!message.replayToHandler && (replayTo == null ? void 0 : replayTo.handlerUniqueId))
-        message.replayToHandler = replayTo.handlerUniqueId;
-      window.myop.hostSDK.send(message);
-    });
-    __publicField(this, "supportedHandlers", [
-      new ChangeTextHandler(this.messageToHost, this.components),
-      new SetInnerHtmlHandler(this.messageToHost, this.components),
-      new BindOnClickHandler(this.messageToHost, this.components),
-      new DetectMyopRefsMessageHandler(this.messageToHost, this.components),
-      new setAttributeHandler(this.messageToHost, this.components),
-      new AddEventListenerHandler(this.messageToHost, this.components),
-      new ExecuteScriptHandler(this.messageToHost, this.components),
-      new GetElementValueHandler(this.messageToHost, this.components),
-      //
-      new CreateRefComponentMessageHandler(this.messageToHost, this.components)
-    ]);
-    __publicField(this, "init", () => {
-    });
+      );
+    }
+    return await this.variants[cacheKey];
   }
-};
-defineDynamicImport("WebComponentSDK", WebComponentSDK);
-
-// 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 Set();
-var seen2 = [];
-var sdk;
-var getInitiatedSdk = async () => {
-  if (!sdk) {
-    sdk = new WebComponentSDK();
-    sdk.init();
+  /**
+   * 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;
   }
-  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;
-      });
+  /**
+   * 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;
     }
-  };
-}
-var createCustomWebComponent = (componentName, html, ShadowRootMode) => {
-  customElements.define(componentName, createHTMLElementConstructor(html, ShadowRootMode));
-  console.log("define('".concat(componentName, "') was called, web component ready to use"));
+    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);
+  }
 };
-var toWebComponentName = (str) => {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/(\d+)/g, "-$1").toLowerCase();
+__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 toCustomElementName = (name) => {
-  name = toWebComponentName(name);
-  return name.replace(/_/g, "-");
+var deliveryRefresh = async () => {
+  await _cloudRepository.refreshDelivery();
+  return deliveryStats();
 };
-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));
+var deliveryStats = () => _cloudRepository.deliveryStats();
+var deliveryOff = () => {
+  _cloudRepository.setDelivery({ minify: false, cache: false, host: null });
+  return deliveryStats();
+};
+
+// src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
+var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
+  constructor(messageToHost, context) {
+    super(messageToHost);
+    this.context = context;
+    __publicField(this, "executor", (event) => {
+      if (event.destination) {
+        const destination = event.destination;
+        if (this.context[destination].context) {
+          const _messageToHost = (message, replayTo) => {
+            this.messageToHost(__spreadProps(__spreadValues({}, message), {
+              source: event.destination ? event.destination : event.source,
+              destination: event.source ? event.source : event.destination
+            }), replayTo);
+          };
+          return this.innerExecutor(event, this.context[destination].context, _messageToHost);
+        } else {
+          debugger;
         }
-        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";
+        debugger;
       }
-      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);
+};
+
+// src/consts.ts
+var myopAttributes = {
+  id: "myop-id"
+};
+
+// src/common/messageHandlers/helpers.ts
+var getElementsByRef = (ref, el) => {
+  return el.querySelectorAll("[".concat(myopAttributes.id, "='").concat(ref.refConfig.selector, "']"));
+};
+
+// src/webcomponent/messageHandlers/bindOnClickHandler.ts
+var BindOnClickHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.BindClickMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      const cleanupTasks = [];
+      items.forEach((item) => {
+        const handler = () => {
+          messageToHost(new ClickReplayMessage(event.handlerUniqueId));
+        };
+        item.addEventListener("click", handler);
+        cleanupTasks.push(() => {
+          item.removeEventListener("click", handler);
+        });
+      });
+      return () => {
+        cleanupTasks.forEach((task) => task());
+      };
+    });
   }
-  /**
-   * 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" };
+};
+
+// src/webcomponent/messageHandlers/changeTextHandler.ts
+var ChangeTextHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.ChangeTextMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      items.forEach((item) => {
+        item.textContent = event.content;
+      });
+    });
   }
-  /**
-   * 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>");
+};
+
+// src/webcomponent/shadowRootRef.ts
+var ShadowRootRef = class extends RootRef {
+  constructor(container, shadowRoot) {
+    super(container, shadowRoot);
+    this.container = container;
+    this.shadowRoot = shadowRoot;
   }
-  /**
-   * 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;
+};
+
+// src/webcomponent/messageHandlers/DetectMyopRefsMessageHandler.ts
+var DetectMyopRefsMessageHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
+      const allMyopItems = shadowRootRef.shadowRoot.querySelectorAll("[".concat(myopAttributes.id, "]"));
+      let myopRefs = [];
+      allMyopItems.forEach((item) => {
+        const myopId = item.getAttribute(myopAttributes.id);
+        if (myopId) {
+          myopRefs.push(new MyopElementRef(myopId, item.tagName, item.getBoundingClientRect(), item.offsetTop, item.offsetLeft));
+        }
+      });
+      this.messageToHost(new DetectedMyopRefsMessage(event.handlerUniqueId, myopRefs));
+    });
+    __publicField(this, "messageType", MyopMessages.DetectMyopRefsMessage);
   }
-  /**
-   * Execute the web component script on the host document
-   */
-  executeWebComponentScript(scriptContent, scriptId) {
-    if (extractedWebComponentScripts.has(scriptId)) {
-      console.log("[MyopWebComponent] Script already executed for ".concat(scriptId, ", skipping"));
-      return;
-    }
-    const script = document.createElement("script");
-    script.textContent = scriptContent;
-    script.id = "myop-extracted-".concat(scriptId);
-    document.head.appendChild(script);
-    extractedWebComponentScripts.add(scriptId);
-    console.log("[MyopWebComponent] Executed web component script: ".concat(scriptId));
+};
+
+// src/webcomponent/messageHandlers/setAttributeHandler.ts
+var setAttributeHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.SetAttributeMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      items.forEach((item) => {
+        item.setAttribute(event.name, event.value);
+      });
+    });
   }
-  /**
-   * 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 previousTagName = window.__MYOP_TAG_NAME__;
-    this.executeWebComponentScript(scriptContent, scriptId);
-    const tagName = window.__MYOP_TAG_NAME__;
-    if (!tagName) {
-      throw new Error("[MyopWebComponent] Script did not set window.__MYOP_TAG_NAME__");
-    }
-    if (previousTagName && previousTagName !== tagName) {
-      console.warn("[MyopWebComponent] __MYOP_TAG_NAME__ changed from ".concat(previousTagName, " to ").concat(tagName));
-    }
-    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/webcomponent/messageHandlers/addEventListenerHandler.ts
+var AddEventListenerHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.AddEventListenerMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      const cleanupTasks = [];
+      items.forEach((item) => {
+        const handler = (e) => {
+          messageToHost(new EventListenerCallbackMessage(event.handlerUniqueId, makeSerializable(e, event.serializableSkeleton)));
+        };
+        item.addEventListener(event.type, handler);
+        cleanupTasks.push(() => {
+          item.removeEventListener(event.type, handler);
+        });
+      });
+      return () => {
+        cleanupTasks.forEach((task) => task());
+      };
+    });
   }
 };
 
-// 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
+// src/webcomponent/messageHandlers/CreateRefComponentMessageHandler.ts
+var CreateRefComponentMessageHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.CreateRefComponentMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const createRef = async () => {
+        const allItems = shadowRootRef.shadowRoot.querySelectorAll("[".concat(myopAttributes.id, "='").concat(event.refConfig.selector, "']"));
+        if (allItems.length === 1) {
+          const hostSDK2 = HostSDK.Instance();
+          const refComponent = hostSDK2.components.find((c) => c.id === event.options.id);
+          if (refComponent) {
+            refComponent.dispose();
+          } else {
           }
-        },
-        {
-          id: "out_auto_v2_converted",
-          name: "myop_cta_handler",
-          type: "any",
-          behavior: {
-            type: PropConfigBehaviorTypes.code
+          const index = hostSDK2.components.indexOf(refComponent);
+          if (index !== -1) {
+            hostSDK2.components.splice(index, 1);
+          } else {
           }
+          const implementationComponent = await hostSDK2.loadComponent(
+            event.nestedComponentConfig,
+            allItems.item(0),
+            event.options
+          );
+          const nestedRefConfig = [];
+          Object.keys(implementationComponent.refs).forEach((refName) => {
+            let ref = implementationComponent.refs[refName];
+            ref = ref.__nonProxied || ref;
+            if (ref.componentDefinition) {
+              nestedRefConfig.push({
+                refName,
+                componentDefinitionId: ref.componentDefinition.id
+              });
+            }
+          });
+          messageToHost(new RefComponentCreatedMessage(event.handlerUniqueId, nestedRefConfig));
+        } else {
+          console.error("CreateRefComponentMessageHandler - DOM element not found");
+          this.messageToHost(new RefComponentCreatedMessage(event.handlerUniqueId, [], true));
+          debugger;
         }
-      ],
-      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
-    },
-    name: config.name
-  };
-};
-var GLOBAL_KEY = "__MYOP_CLOUD_REPOSITORY_MAIN__";
-var getGlobalMain = () => {
-  if (typeof window !== "undefined") {
-    return window[GLOBAL_KEY];
-  }
-  if (typeof globalThis !== "undefined") {
-    return globalThis[GLOBAL_KEY];
+      };
+      createRef().then();
+    });
   }
-  return void 0;
 };
-var setGlobalMain = (instance) => {
-  if (typeof window !== "undefined") {
-    window[GLOBAL_KEY] = instance;
-  }
-  if (typeof globalThis !== "undefined") {
-    globalThis[GLOBAL_KEY] = instance;
-  }
+
+// src/common/messageHandlers/executeScriptHandler.ts
+var ExecuteScriptHandlerExecutor = (event, replier, rootRef) => {
+  const __scriptInputs = event.scriptInputs ? event.scriptInputs : {};
+  __scriptInputs.makeSerializable = makeSerializable;
+  __scriptInputs.send = replier;
+  __scriptInputs.rootRef = rootRef;
+  __scriptInputs.__scriptInputs = __scriptInputs;
+  const dynamicFunction = new Function("return (".concat(event.script, ")(...arguments)"));
+  const ret = dynamicFunction(__scriptInputs);
+  replier(ret);
 };
-var _CloudRepository = class _CloudRepository {
-  constructor(_baseUrl = "https://cloud.myop.dev") {
-    this._baseUrl = _baseUrl;
-    // v2 cache - keyed by componentId:env:preview|live
-    // Each Promise is tagged with a `resolved` property after settling (see fetchComponentV2).
-    __publicField(this, "variants", {});
-    // Track which components were preloaded and with what params
-    // Key: componentId, Value: { env, preview }
-    __publicField(this, "preloadedComponents", {});
-    // v1 cache
-    __publicField(this, "userFlows", {});
-    __publicField(this, "_defaultEnv", "production");
-    __publicField(this, "_envExplicitlySet", false);
-    __publicField(this, "_staticMode", false);
-    __publicField(this, "_queryParams", {});
+
+// src/webcomponent/messageHandlers/executeScriptHandler.ts
+var ExecuteScriptHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.ExecuteScriptMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const replier = (data) => {
+        messageToHost(new ExecuteScriptReplyMessage(event.handlerUniqueId, data));
+      };
+      ExecuteScriptHandlerExecutor(event, replier, shadowRootRef);
+    });
   }
-  static get Main() {
-    const globalMain = getGlobalMain();
-    if (globalMain) {
-      return globalMain;
-    }
-    if (!_CloudRepository._main) {
-      _CloudRepository._main = new _CloudRepository();
-      setGlobalMain(_CloudRepository._main);
-    }
-    return _CloudRepository._main;
-  }
-  /**
-   * Enable static mode for self-hosted component registries.
-   * In static mode, URLs are constructed as file paths instead of query params:
-   *   ${baseUrl}/components/${componentId}/${env}.json
-   */
-  enableStaticMode() {
-    this._staticMode = true;
+};
+
+// src/webcomponent/messageHandlers/GetElementValueHandler.ts
+var getInputValue = (element) => {
+  if (!element) return null;
+  if (element.tagName === "FORM") {
+    const formData = new FormData(element);
+    const dataObject = {
+      formData: {},
+      unmappedData: []
+    };
+    const elements = element.querySelectorAll("input, select, textarea");
+    let autoNameIndexer = -1;
+    elements.forEach((element2) => {
+      if (typeof element2.value === "string") {
+        const myopId = element2.getAttribute(myopAttributes.id);
+        let key = element2.getAttribute("name");
+        const nodeData = {
+          id: element2.id,
+          name: key,
+          value: getInputValue(element2),
+          required: element2.required,
+          validity: makeSerializable(element2.validity, true),
+          myopId
+        };
+        if (!key) {
+          dataObject.unmappedData.push(nodeData);
+        } else {
+          if (dataObject.formData[key]) {
+            if (dataObject.formData[key].value) {
+              dataObject.unmappedData.push(nodeData);
+            } else {
+              dataObject.unmappedData.push(dataObject.formData[key]);
+              dataObject.formData[key] = nodeData;
+            }
+          } else {
+            dataObject.formData[key] = nodeData;
+          }
+        }
+      }
+    });
+    return dataObject;
   }
-  /**
-   * Set query parameters to append to all fetch URLs (e.g. for CDN cache busting).
-   * Example: `setQueryParams({ lastupdate: '11112026' })`
-   */
-  setQueryParams(params) {
-    this._queryParams = params;
+  if (element.type === "checkbox" || element.type === "radio") {
+    return element.checked ? element.value : null;
   }
-  /**
-   * Set the default environment for this CloudRepository instance
-   */
-  setEnvironment(env) {
-    this._defaultEnv = env;
-    this._envExplicitlySet = true;
+  if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
+    return element.value;
   }
-  /**
-   * Get the current default environment
-   */
-  getDefaultEnvironment() {
-    return this._defaultEnv;
+  if (element.tagName === "SELECT") {
+    return element.value;
   }
-  // ============ V2 Methods (Default) ============
-  /**
-   * Check if a component is already cached/preloaded (v2)
-   * If env and preview are not provided, checks if ANY version is preloaded
-   */
-  isPreloaded(componentId, env, preview) {
-    if (env !== void 0 || preview !== void 0) {
-      const cacheKey = "".concat(componentId, ":").concat(env || this._defaultEnv, ":").concat(preview ? "preview" : "live");
-      return cacheKey in this.variants;
-    }
-    return componentId in this.preloadedComponents;
+  if (element.isContentEditable) {
+    return element.innerText || element.textContent;
   }
-  /**
-   * Get the preloaded params for a component (if preloaded)
-   * Returns undefined if not preloaded
-   */
-  getPreloadedParams(componentId) {
-    return this.preloadedComponents[componentId];
+  return null;
+};
+var GetElementValueHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.GetElementValueMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      items.forEach((item) => {
+        messageToHost(new ElementValueReplayMessage(getInputValue(item)), event);
+      });
+    });
   }
-  /**
-   * Resolve a component config: fetch it once, then serve it from this
-   * repository's cache.
-   *
-   * This is the name to use. `fetchComponentV2` is the same method under its
-   * versioned name and stays for backward compatibility — note that the
-   * unversioned `fetchComponent` is a *deprecated v1* API and is NOT this.
-   *
-   * Completes the trio with {@link getResolvedConfig} (synchronous read of an
-   * already-resolved config) and {@link hydrateComponent} (seed one you
-   * already hold).
-   *
-   * Prefer the module-level `preloadComponents([id])` in app code; reach for
-   * this when you need an isolated repository instance whose cache lifetime
-   * you control — a server with its own TTL, for example.
-   */
-  async resolveComponent(componentId, env, preview) {
-    return this.fetchComponentV2(componentId, env, preview);
+};
+
+// src/webcomponent/messageHandlers/setInnerHtmlHandler.ts
+var SetInnerHtmlHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.SetInnerHtml);
+    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      items.forEach((item) => {
+        item.innerHTML = event.content;
+      });
+    });
   }
-  /**
-   * Fetch a v2 component config
-   * If env/preview not specified and component was preloaded, uses preloaded params
-   *
-   * @see resolveComponent — the unversioned name for this method
-   */
-  async fetchComponentV2(componentId, environmentIdentifier, preview) {
-    const { env, usePreview, cacheKey } = this.resolveParams(componentId, environmentIdentifier, preview);
-    console.log("[CloudRepository] fetchComponentV2", {
-      componentId: componentId.slice(0, 8) + "...",
-      env,
-      usePreview,
-      cacheKey,
-      cached: cacheKey in this.variants
+};
+
+// src/webcomponent/WebComponentSDK.ts
+var WebComponentSDK = class extends BaseMyopSDK {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "alwaysPassEnvelopesToHost", true);
+    //when new web component created.
+    __publicField(this, "connectedCallback", (container, shadow) => {
+      container.addEventListener(myopWebcomponentConsts.webcomponent_message_key, (e) => {
+        const eventContent = e.data ? e.data : e.detail;
+        if (!eventContent || !eventContent.myop) {
+          debugger;
+          throw new Error("recvied webcomponent_message with wrong type");
+        } else {
+          const message = eventContent;
+          this.handleIncomeMessages(e);
+          if (message.messageType === MyopMessages.InitMessage) {
+            const newComponentId = message.content.id;
+            this.components[newComponentId].context = new ShadowRootRef(container, shadow);
+          }
+        }
+      });
+      setTimeout(() => {
+        this.messageToHost(new InitRequest());
+      }, 1);
     });
-    if (!this.variants[cacheKey]) {
-      if (!this.preloadedComponents[componentId]) {
-        this.preloadedComponents[componentId] = { env, preview: usePreview };
+    __publicField(this, "messageToHost", (message, replayTo) => {
+      message.direction = MessageDirection.up;
+      if (!message.replayToHandler && (replayTo == null ? void 0 : replayTo.handlerUniqueId))
+        message.replayToHandler = replayTo.handlerUniqueId;
+      window.myop.hostSDK.send(message);
+    });
+    __publicField(this, "supportedHandlers", [
+      new ChangeTextHandler(this.messageToHost, this.components),
+      new SetInnerHtmlHandler(this.messageToHost, this.components),
+      new BindOnClickHandler(this.messageToHost, this.components),
+      new DetectMyopRefsMessageHandler(this.messageToHost, this.components),
+      new setAttributeHandler(this.messageToHost, this.components),
+      new AddEventListenerHandler(this.messageToHost, this.components),
+      new ExecuteScriptHandler(this.messageToHost, this.components),
+      new GetElementValueHandler(this.messageToHost, this.components),
+      //
+      new CreateRefComponentMessageHandler(this.messageToHost, this.components)
+    ]);
+    __publicField(this, "init", () => {
+    });
+  }
+};
+defineDynamicImport("WebComponentSDK", WebComponentSDK);
+
+// 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, '"'));
       }
-      this.variants[cacheKey] = new Promise(
-        async (resolve, reject) => {
-          try {
-            let url;
-            if (this._staticMode) {
-              const file = usePreview ? "preview" : env;
-              url = "".concat(this._baseUrl, "/components/").concat(componentId, "/").concat(file, ".json");
-              const qs = new URLSearchParams(this._queryParams).toString();
-              if (qs) url += "?".concat(qs);
-            } else {
-              url = "".concat(this._baseUrl, "/consume?id=").concat(componentId, "&env=").concat(env);
-              if (usePreview) {
-                url += "&preview=true";
-              }
-            }
-            const res = await fetch(url);
-            if (!res.ok) {
-              reject(new Error('Failed to load component "'.concat(componentId, '" (').concat(res.status).concat(this._staticMode ? " from ".concat(url) : "", ")")));
-              return;
-            }
-            const json = await res.json();
-            const variant = json.item;
-            if (!variant) {
-              reject(new Error('Component "'.concat(componentId, '" not found')));
-              return;
-            }
-            if (!variant.consume_variant || !variant.consume_variant.length) {
-              reject(new Error('Component "'.concat(componentId, '" has no implementation for environment "').concat(env, '"')));
-              return;
+      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) {
             }
-            const componentConfig = convertV2VariantToComponentConfig(variant);
-            this.variants[cacheKey].resolved = componentConfig;
-            resolve(componentConfig);
-          } catch (e) {
-            delete this.variants[cacheKey];
-            reject(e);
           }
         }
-      );
-    }
-    return await this.variants[cacheKey];
+        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);
+        }
+        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) => {
@@ -3103,8 +3484,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) {
@@ -3120,8 +3515,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;
@@ -3174,7 +3569,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(),
@@ -3185,16 +3583,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",
@@ -3204,6 +3593,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) {
@@ -3384,6 +3785,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);
 export {