@myop/sdk 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/bundled-declarations.d.ts

@@ -683,7 +683,7 @@ declare module "@myop/sdk/host/componentCore" {
     };
 }
 declare module "@myop/sdk/host/components/myopExtractedWebComponent" {
-    import { BaseMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
+    import { AutoSizeOptions, BaseMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
     import { BaseMyopMessage } from "@myop/sdk/messages";
     import { CleanupHandler, IComponentDefinitionConfig, ISkinConfig } from "@myop/sdk/common";
     import { loaderOptions } from "@myop/sdk/host/hostSDK";
@@ -703,6 +703,29 @@ declare module "@myop/sdk/host/components/myopExtractedWebComponent" {
         private _ctaQueue;
         private _ctaListener;
         constructor(componentDefinition: IComponentDefinitionConfig, skin: ISkinConfig, container: HTMLElement, customElement: HTMLElement, tagName: string, options?: loaderOptions);
+        private _autoSizeOptions?;
+        /**
+         * Data-out for size — the extracted counterpart of the iframe implementation.
+         *
+         * THIS EXISTED ONLY ON MyopIframeComponent, and that was invisible for as long as
+         * minification was sending every v2 component down the iframe path. Restoring v2
+         * detection moves them to this class, and `@myop/react` drives both through one
+         * wrapper: in content mode it hides its loader from the FIRST onSizeChange, so a
+         * component whose class has no observeAutoSize leaves a React host on a loader
+         * forever. Pic-Time's sizeMeta is width:100% with no height, which is exactly content
+         * mode. Caught by v2-data-contract D8 (API parity).
+         *
+         * It REPORTS rather than imposes. An iframe has no intrinsic size and must be
+         * measured inside and then set from outside; a custom element sizes itself from its
+         * own content, so the honest thing is to measure it and tell the host, and let the
+         * host decide. React then uses width:100% and the measured height.
+         *
+         * The one thing it does impose is `display: block` when the element computes to
+         * `inline`, which is the default for a custom element and measures as zero height no
+         * matter what it contains. The iframe path forces width:100% for the same reason —
+         * without it the first measurement is 0 and the host sizes the component to nothing.
+         */
+        observeAutoSize: (options?: AutoSizeOptions) => CleanupHandler;
         cleanupInspect: CleanupHandler;
         inspect(): CleanupHandler;
         hide(): void;
@@ -1262,6 +1285,9 @@ declare module "@myop/sdk/host/components/IMyopComponent" {
         initiated: () => Promise<any>;
         private sendCleanupMessage;
         send(message: BaseMyopMessage): CleanupHandler;
+        /** Runs the 'onDispose' handlers once. hostSDK registers the one that unregisters
+         *  this component, so it has to run on EVERY dispose path, initiated or not. */
+        private runDisposeHandlers;
         dispose(): void;
         props: P;
         refs: R;
@@ -1483,41 +1509,37 @@ declare module "@myop/sdk/Iframe/IframeSDK" {
         messageToHost: (message: MyopBindReplayMessage, replayTo?: MyopBindMessage) => void;
         supportedHandlers: BaseMessageHandler[];
         /**
-         * Announce this frame until the host answers, not once.
-         *
-         * The host only learns a component exists AFTER `await componentLoader.load(...)`
-         * resolves (hostSDK.ts:433-437 — the line above it already calls this a race). A frame
-         * that boots inside that await announces itself to a host whose components2init is
-         * still empty: the host iterates nothing, sends no InitMessage, and a single-shot
-         * announce leaves the frame waiting forever. The visible symptom is initiated()
-         * rejecting with timeout_<ms>, with exactly one message on the wire -- InitRequest,
-         * never InitResponse.
+         * The window this frame answers to. Defaults to the parent, which is correct for a
+         * component mounted directly by the page's own host.
          *
-         * Minification made it common rather than rare: a smaller payload boots the frame
-         * sooner, landing it deeper inside the window. Reported by a customer 2026-10-17.
+         * IT IS NOT ALWAYS THE PARENT. A host can mount a component into a container that
+         * lives inside ANOTHER component's document -- Pic-Time's reel templates are mounted
+         * by the top-level host into `#reelSlot` inside the reel dialog's frame. The real host
+         * is then a GRANDparent, and `window.parent` is a frame that knows nothing about this
+         * component: its nested hostSDK has no entry for it and its IframeSDK drops messages
+         * from a child. Replies sent to the parent are simply lost.
          *
-         * Re-announcing is safe and idempotent. The host replies to InitRequest by sending
-         * InitMessage to every component still awaiting init; a frame that has already
-         * registered that id ignores the repeat (BaseMyopSDK: `if (this.components[id]) return`).
-         * So a late answer costs one extra round trip and nothing else.
-         *
-         * Backs off 50ms -> 1s and stops the moment any component registers, so the common
-         * case sends exactly one message.
+         * So we adopt whoever actually talks to us, the first time an ancestor does.
+         */
+        private hostWindow;
+        /**
+         * Commands (including ExecuteScript) must come from a window this frame is actually
+         * nested inside -- never from an opener or a sibling that merely holds a reference.
          *
-         * THE CAP IS A CONSTANT, and it should ideally be the host's own `options.timeout`
-         * so the frame never gives up before the host does. That was tried on 2026-10-17 and
-         * REVERTED: the budget has to reach the frame through the init script that
-         * HTMLComponentLoader generates, and `${...}` interpolated into that template does
-         * not survive the build -- the transpiled `.concat()` leaks into the emitted script
-         * as literal text, the frame parses no number, and it silently falls back to the
-         * default. It looked correct in source and in the bundle, and only the e2e caught it.
+         * THIS USED TO COMPARE AGAINST `window.parent` ALONE, and that was a regression I
+         * shipped in 0.4.0-beta: it silently dropped the host's InitMessage for any component
+         * mounted cross-document, because the host is a grandparent there. The frame then
+         * announced for its full 10s budget into a parent that never answers and rejected with
+         * timeout_10000 having registered nothing. Reproduced live on Pic-Time's QA page
+         * 2026-10-17: 15 InitRequests, 0 InitResponses, `IframeSDK.components` empty.
+         * 0.3.36 had no guard at all, which is why it worked.
          *
-         * 10s is chosen to exceed BaseMyopComponent's 5s default, so the frame outlives the
-         * common host deadline. This only matters in the pathological case: with the host now
-         * sending InitMessage on registration (hostSDK.ts), the retry is a backstop that in
-         * practice never fires.
+         * Walking the ancestor chain keeps the security property -- an opener or a sibling is
+         * not an ancestor -- while allowing a host any number of frames up. The walk is
+         * bounded, and reading `.parent` across origins is allowed (only the reference is
+         * compared, never touched).
          */
-        private announceUntilAnswered;
+        private isFromHostChain;
         init: () => void;
     }
 }
@@ -2109,7 +2131,25 @@ declare module "@myop/sdk/host/loaders/HTMLComponentLoader" {
     export class HTMLComponentLoader extends BaseMyopLoader {
         type: "HTMLLoader";
         /**
-         * Detect if HTML is a Myop Web Component (starts with marker comment)
+         * Detect if HTML is a Myop Web Component.
+         *
+         * THE MARKER COMMENT ALONE IS NOT A SAFE SIGNAL, BECAUSE MINIFIERS DELETE COMMENTS.
+         *
+         * This used to be `startsWith(MYOP_WEB_COMPONENT_MARKER)` and nothing else. The
+         * delivery lane minifies with `removeComments: true` (myop-server derive.ts MIN_CFG),
+         * so the stored `min` artifact of every v2 web component loses its leading
+         * `<!-- myop-web-component -->`. Detection then returned false, the component fell
+         * back to plain iframe rendering, and the whole authored document was shown --
+         * including the v2 authoring wrapper, so Pic-Time's production dashboard displayed the
+         * preview chrome ("Web Component v2", a tag-name badge reading `loading...`, SIZE /
+         * OVERFLOW / BG controls) instead of their component. Reported 2026-10-18; the served
+         * HTML measured 328,071 bytes against 951,130 at origin, with zero `<!--` left in it.
+         *
+         * The script id is the signal that survives, and it is the one `extractWebComponentScript`
+         * already depends on: if that element is present, extraction works, so detection
+         * should agree. Checked with a regex rather than DOMParser -- this runs for every
+         * HTML component, and parsing a 300 KB document to answer a yes/no question is not
+         * worth it.
          */
         private isMyopWebComponent;
         /**

package/dist/cjs/{_IframeSDK.a43cfa7d.js → _IframeSDK.3a412cd4.js}

@@ -1008,6 +1008,7 @@ var BaseMyopComponent = class {
     setTimeout(() => {
       if (!this.isInitiated && this._whenInitiatedReject && !this._markedForDisposed) {
         this._whenInitiatedReject("timeout_".concat(timeout, " ").concat(this.id));
+        this.dispose();
       }
     }, timeout);
     this.initiated().then(() => {
@@ -1091,19 +1092,27 @@ var BaseMyopComponent = class {
       };
     }
   }
+  /** Runs the 'onDispose' handlers once. hostSDK registers the one that unregisters
+   *  this component, so it has to run on EVERY dispose path, initiated or not. */
+  runDisposeHandlers() {
+    const onDisposeHandlers = this.messageHandlers["onDispose"];
+    if (onDisposeHandlers) {
+      onDisposeHandlers.forEach((disposeHandler) => {
+        disposeHandler(null);
+      });
+    }
+  }
   dispose() {
     this.markedForDisposed = true;
     if (!this.isInitiated) {
+      this.runDisposeHandlers();
+      this.messageHandlers = {};
+      this.id += "_disposed";
       return;
     }
     console.log("disposing component", this.id);
     this.send(new DisposeMessage());
-    const onDisposeHandlers = this.messageHandlers["onDispose"];
-    if (onDisposeHandlers) {
-      onDisposeHandlers.forEach((disposeHandler) => {
-        disposeHandler(null);
-      });
-    }
+    this.runDisposeHandlers();
     this.messageHandlers = {};
     this.id += "_disposed";
     this.isInitiated = false;
@@ -1179,6 +1188,67 @@ var MyopExtractedWebComponent = class extends BaseMyopComponent {
         this._ctaQueue.push({ action: detail.action, payload: detail.payload });
       }
     });
+    __publicField(this, "_autoSizeOptions");
+    /**
+     * Data-out for size — the extracted counterpart of the iframe implementation.
+     *
+     * THIS EXISTED ONLY ON MyopIframeComponent, and that was invisible for as long as
+     * minification was sending every v2 component down the iframe path. Restoring v2
+     * detection moves them to this class, and `@myop/react` drives both through one
+     * wrapper: in content mode it hides its loader from the FIRST onSizeChange, so a
+     * component whose class has no observeAutoSize leaves a React host on a loader
+     * forever. Pic-Time's sizeMeta is width:100% with no height, which is exactly content
+     * mode. Caught by v2-data-contract D8 (API parity).
+     *
+     * It REPORTS rather than imposes. An iframe has no intrinsic size and must be
+     * measured inside and then set from outside; a custom element sizes itself from its
+     * own content, so the honest thing is to measure it and tell the host, and let the
+     * host decide. React then uses width:100% and the measured height.
+     *
+     * The one thing it does impose is `display: block` when the element computes to
+     * `inline`, which is the default for a custom element and measures as zero height no
+     * matter what it contains. The iframe path forces width:100% for the same reason —
+     * without it the first measurement is 0 and the host sizes the component to nothing.
+     */
+    __publicField(this, "observeAutoSize", (options) => {
+      this._autoSizeOptions = options;
+      const el = this.customElement;
+      try {
+        if (getComputedStyle(el).display === "inline") el.style.display = "block";
+      } catch (e) {
+      }
+      const parse = (v) => {
+        if (v === void 0) return void 0;
+        if (typeof v === "number") return v;
+        const n = parseFloat(v);
+        return isNaN(n) ? void 0 : n;
+      };
+      const clamp = (v, min, max) => min !== void 0 && v < min ? min : max !== void 0 && v > max ? max : v;
+      const report = () => {
+        var _a;
+        const opts = this._autoSizeOptions;
+        const rect = el.getBoundingClientRect();
+        const autoHeight = (opts == null ? void 0 : opts.explicitHeight) === void 0;
+        (_a = opts == null ? void 0 : opts.onSizeChange) == null ? void 0 : _a.call(opts, {
+          width: rect.width,
+          height: autoHeight ? clamp(rect.height, parse(opts == null ? void 0 : opts.minHeight), parse(opts == null ? void 0 : opts.maxHeight)) : rect.height,
+          autoSizingWidth: false,
+          // a web component fills its container's width
+          autoSizingHeight: autoHeight
+        });
+      };
+      let ro;
+      try {
+        ro = new ResizeObserver(() => report());
+        ro.observe(el);
+      } catch (e) {
+      }
+      report();
+      return () => {
+        ro == null ? void 0 : ro.disconnect();
+        this._autoSizeOptions = void 0;
+      };
+    });
     __publicField(this, "cleanupInspect", () => {
     });
     /**
@@ -1506,8 +1576,13 @@ var createRefComponent = async (ref, componentConfig, components, options) => {
   return new Promise(async (resolve, reject) => {
     const refComponent = new MyopRefComponent(componentConfig.type, component, options);
     components.push(refComponent);
+    const unregister = () => {
+      const at = components.indexOf(refComponent);
+      if (at !== -1) components.splice(at, 1);
+    };
     await component.initiated();
     const timeout = setTimeout(() => {
+      unregister();
       reject("timeout");
     }, 5e3);
     component.send(new CreateRefComponentMessage(
@@ -1520,11 +1595,13 @@ var createRefComponent = async (ref, componentConfig, components, options) => {
       async (message) => {
         clearTimeout(timeout);
         if (message.failed) {
+          unregister();
           reject("CreateRefComponentMessage failed");
           return;
         }
         const implementationComponent = components.find((c) => c.id == refComponent.id);
-        if (implementationComponent !== refComponent) {
+        if (implementationComponent && implementationComponent !== refComponent) {
+          unregister();
           component.refs[ref.refConfig.name] = implementationComponent;
           resolve(implementationComponent);
           return;
@@ -1888,7 +1965,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       return cleanupHandler;
     });
     __publicField(this, "dispose", () => {
-      var _a;
+      var _a, _b;
       (_a = this._bridgeSizeCleanup) == null ? void 0 : _a.call(this);
       if (this._autoSizeCleanup) {
         this._autoSizeCleanup();
@@ -1901,7 +1978,7 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       if (this.cleanupInspect)
         this.cleanupInspect();
       super.dispose();
-      this.IframeElement.parentNode.removeChild(this.IframeElement);
+      (_b = this.IframeElement.parentNode) == null ? void 0 : _b.removeChild(this.IframeElement);
     });
     this.element = this.IframeElement;
     this._lastData = options == null ? void 0 : options.data;
@@ -2173,7 +2250,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.4.0-beta.2";
+var myop_sdk_version_default = "0.4.0-beta.4";
 
 // src/helpers/deliveryStore.ts
 var DB_NAME = "myop-delivery";
@@ -3335,14 +3412,14 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         if (!isolate) {
           doc.writeln("".concat(sdkScript).concat(initScript));
         }
-        if (!isolate && (options == null ? void 0 : options.data) !== void 0) {
+        if (!isolate && (options == null ? void 0 : options.data) !== void 0 && (options == null ? void 0 : options.data) !== null) {
           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";
+          const escapedData = (options == null ? void 0 : options.data) !== void 0 && (options == null ? void 0 : options.data) !== null ? JSON.stringify(options.data).replace(/<\/script/gi, "\\u003c/script") : "undefined";
           doc.writeln(this.buildIsolationBridge(escapedData));
         }
         doc.close();
@@ -3397,10 +3474,29 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
     });
   }
   /**
-   * Detect if HTML is a Myop Web Component (starts with marker comment)
+   * Detect if HTML is a Myop Web Component.
+   *
+   * THE MARKER COMMENT ALONE IS NOT A SAFE SIGNAL, BECAUSE MINIFIERS DELETE COMMENTS.
+   *
+   * This used to be `startsWith(MYOP_WEB_COMPONENT_MARKER)` and nothing else. The
+   * delivery lane minifies with `removeComments: true` (myop-server derive.ts MIN_CFG),
+   * so the stored `min` artifact of every v2 web component loses its leading
+   * `<!-- myop-web-component -->`. Detection then returned false, the component fell
+   * back to plain iframe rendering, and the whole authored document was shown --
+   * including the v2 authoring wrapper, so Pic-Time's production dashboard displayed the
+   * preview chrome ("Web Component v2", a tag-name badge reading `loading...`, SIZE /
+   * OVERFLOW / BG controls) instead of their component. Reported 2026-10-18; the served
+   * HTML measured 328,071 bytes against 951,130 at origin, with zero `<!--` left in it.
+   *
+   * The script id is the signal that survives, and it is the one `extractWebComponentScript`
+   * already depends on: if that element is present, extraction works, so detection
+   * should agree. Checked with a regex rather than DOMParser -- this runs for every
+   * HTML component, and parsing a 300 KB document to answer a yes/no question is not
+   * worth it.
    */
   isMyopWebComponent(html) {
-    return html.trimStart().startsWith(MYOP_WEB_COMPONENT_MARKER);
+    if (html.trimStart().startsWith(MYOP_WEB_COMPONENT_MARKER)) return true;
+    return new RegExp("<script[^>]*\\sid=[\"']?".concat(MYOP_WEB_COMPONENT_SCRIPT_ID, "[\"'\\s>]"), "i").test(html);
   }
   /**
    * Resolve how this component should render, applying the host render policy.
@@ -3495,7 +3591,6 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
     if (!container.querySelector('[id^="myop-comp-"]')) {
       container.innerHTML = "";
     }
-    this.appendChild(container, element, options);
     const component = new MyopExtractedWebComponent(
       componentDefinition,
       skin,
@@ -3504,7 +3599,8 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
       tagName,
       options
     );
-    if ((options == null ? void 0 : options.data) !== void 0) {
+    this.appendChild(container, element, options);
+    if ((options == null ? void 0 : options.data) !== void 0 && (options == null ? void 0 : options.data) !== null) {
       component.initWithData(options.data);
     }
     console.log("[MyopWebComponent] Loaded <".concat(tagName, "> into container"));
@@ -3629,7 +3725,12 @@ var HostSDK = class {
         }
         const myopMessage = event.data;
         if (myopMessage.messageType === MyopMessages.InitRequest) {
-          this.components2init.forEach((component2) => {
+          const fromAskingFrame = this.components2init.filter((component2) => {
+            const element = component2.element;
+            return (element == null ? void 0 : element.nodeName) === "IFRAME" && element.contentWindow === event.source;
+          });
+          const targets = fromAskingFrame.length ? fromAskingFrame : this.components2init;
+          targets.forEach((component2) => {
             component2.send(new InitMessage(component2.id));
           });
           return;
@@ -3846,7 +3947,6 @@ var HostSDK = class {
       let component = await componentLoader.load(componentConfig.type, selectedSkin, container, options);
       if (!component.isInitiated) {
         this.components2init.push(component);
-        component.send(new InitMessage(component.id));
       }
       component.bind("onDispose", () => {
         this.components = this.components.filter((c) => c !== component);
@@ -3854,6 +3954,9 @@ var HostSDK = class {
         return true;
       });
       this.components.push(component);
+      if (!component.isInitiated) {
+        component.send(new InitMessage(component.id));
+      }
       if (!options || options.connectProps !== false) {
         component = connectProps(component, componentConfig.type.props, selectedSkin);
       }
@@ -4107,7 +4210,7 @@ var IframeSDK = class extends BaseMyopSDK {
     super();
     __publicField(this, "version", myop_sdk_version_default);
     __publicField(this, "messageToHost", (message, replayTo) => {
-      var _a;
+      var _a, _b;
       if (!message.replayToHandler && (replayTo == null ? void 0 : replayTo.handlerUniqueId))
         message.replayToHandler = replayTo.handlerUniqueId;
       const componentIds = Object.keys(this.components);
@@ -4121,7 +4224,7 @@ var IframeSDK = class extends BaseMyopSDK {
       if (!message.source)
         message.source = componentIds[0];
       message.direction = MessageDirection.up;
-      (_a = window.parent) == null ? void 0 : _a.postMessage(__spreadValues({}, message), "*");
+      (_b = (_a = this.hostWindow) != null ? _a : window.parent) == null ? void 0 : _b.postMessage(__spreadValues({}, message), "*");
     });
     __publicField(this, "supportedHandlers", [
       new ChangeTextHandler(this.messageToHost),
@@ -4139,59 +4242,58 @@ var IframeSDK = class extends BaseMyopSDK {
       new CreateRefComponentMessageHandler2(this.messageToHost)
     ]);
     /**
-     * Announce this frame until the host answers, not once.
-     *
-     * The host only learns a component exists AFTER `await componentLoader.load(...)`
-     * resolves (hostSDK.ts:433-437 — the line above it already calls this a race). A frame
-     * that boots inside that await announces itself to a host whose components2init is
-     * still empty: the host iterates nothing, sends no InitMessage, and a single-shot
-     * announce leaves the frame waiting forever. The visible symptom is initiated()
-     * rejecting with timeout_<ms>, with exactly one message on the wire -- InitRequest,
-     * never InitResponse.
-     *
-     * Minification made it common rather than rare: a smaller payload boots the frame
-     * sooner, landing it deeper inside the window. Reported by a customer 2026-10-17.
+     * The window this frame answers to. Defaults to the parent, which is correct for a
+     * component mounted directly by the page's own host.
      *
-     * Re-announcing is safe and idempotent. The host replies to InitRequest by sending
-     * InitMessage to every component still awaiting init; a frame that has already
-     * registered that id ignores the repeat (BaseMyopSDK: `if (this.components[id]) return`).
-     * So a late answer costs one extra round trip and nothing else.
+     * IT IS NOT ALWAYS THE PARENT. A host can mount a component into a container that
+     * lives inside ANOTHER component's document -- Pic-Time's reel templates are mounted
+     * by the top-level host into `#reelSlot` inside the reel dialog's frame. The real host
+     * is then a GRANDparent, and `window.parent` is a frame that knows nothing about this
+     * component: its nested hostSDK has no entry for it and its IframeSDK drops messages
+     * from a child. Replies sent to the parent are simply lost.
      *
-     * Backs off 50ms -> 1s and stops the moment any component registers, so the common
-     * case sends exactly one message.
+     * So we adopt whoever actually talks to us, the first time an ancestor does.
+     */
+    __publicField(this, "hostWindow", window.parent);
+    /**
+     * Commands (including ExecuteScript) must come from a window this frame is actually
+     * nested inside -- never from an opener or a sibling that merely holds a reference.
      *
-     * THE CAP IS A CONSTANT, and it should ideally be the host's own `options.timeout`
-     * so the frame never gives up before the host does. That was tried on 2026-10-17 and
-     * REVERTED: the budget has to reach the frame through the init script that
-     * HTMLComponentLoader generates, and `${...}` interpolated into that template does
-     * not survive the build -- the transpiled `.concat()` leaks into the emitted script
-     * as literal text, the frame parses no number, and it silently falls back to the
-     * default. It looked correct in source and in the bundle, and only the e2e caught it.
+     * THIS USED TO COMPARE AGAINST `window.parent` ALONE, and that was a regression I
+     * shipped in 0.4.0-beta: it silently dropped the host's InitMessage for any component
+     * mounted cross-document, because the host is a grandparent there. The frame then
+     * announced for its full 10s budget into a parent that never answers and rejected with
+     * timeout_10000 having registered nothing. Reproduced live on Pic-Time's QA page
+     * 2026-10-17: 15 InitRequests, 0 InitResponses, `IframeSDK.components` empty.
+     * 0.3.36 had no guard at all, which is why it worked.
      *
-     * 10s is chosen to exceed BaseMyopComponent's 5s default, so the frame outlives the
-     * common host deadline. This only matters in the pathological case: with the host now
-     * sending InitMessage on registration (hostSDK.ts), the retry is a backstop that in
-     * practice never fires.
+     * Walking the ancestor chain keeps the security property -- an opener or a sibling is
+     * not an ancestor -- while allowing a host any number of frames up. The walk is
+     * bounded, and reading `.parent` across origins is allowed (only the reference is
+     * compared, never touched).
      */
-    __publicField(this, "announceUntilAnswered", (budgetMs = 1e4) => {
-      let wait2 = 50;
-      let waited = 0;
-      const tick = () => {
-        if (Object.keys(this.components).length > 0) return;
-        if (waited > budgetMs) return;
-        this.messageToHost(new InitRequest());
-        waited += wait2;
-        wait2 = Math.min(wait2 * 2, 1e3);
-        setTimeout(tick, wait2);
-      };
-      tick();
+    __publicField(this, "isFromHostChain", (source) => {
+      if (!source) return true;
+      if (source === window) return true;
+      let current = window;
+      for (let depth = 0; depth < 32; depth++) {
+        const parent = current.parent;
+        if (!parent || parent === current) return false;
+        if (source === parent) return true;
+        current = parent;
+      }
+      return false;
     });
     __publicField(this, "init", () => {
       window.onmessage = (event) => {
-        if (event.source && event.source !== window.parent && event.source !== window) return;
+        var _a;
+        if (!this.isFromHostChain(event.source)) return;
+        if (event.source && event.source !== window && ((_a = event.data) == null ? void 0 : _a.messageType) === MyopMessages.InitMessage) {
+          this.hostWindow = event.source;
+        }
         this.handleIncomeMessages(event);
       };
-      this.announceUntilAnswered();
+      this.messageToHost(new InitRequest());
     });
     if (!window.myop) {
       window.myop = {};