@myop/sdk 0.4.0-beta.3 → 0.4.0-beta.5

package/dist/cjs/{_WebComponentSDK.3728ca8b.js → _WebComponentSDK.4085389a.js}

@@ -1190,6 +1190,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", () => {
     });
     /**
@@ -2186,7 +2247,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.4.0-beta.3";
+var myop_sdk_version_default = "0.4.0-beta.5";
 
 // src/helpers/deliveryStore.ts
 var DB_NAME = "myop-delivery";
@@ -3025,14 +3086,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();
@@ -3087,10 +3148,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.
@@ -3185,7 +3265,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,
@@ -3194,7 +3273,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"));