@vvfx/sdk 0.2.5 → 0.2.7

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.5
+ * Version: v0.2.7
  */
 
 import { spec, math, generateGUID, SpriteComponent, TextComponent, assertExist as assertExist$1, version, VFXItem, PrecompositionManager, AssetManager, FrameComponent, glContext, CompositionComponent, Texture as Texture$1, getStandardJSON, EffectComponent, Geometry as Geometry$1, Material, Player, EventEmitter as EventEmitter$1 } from '@galacean/effects';
@@ -69615,16 +69615,41 @@ function createAutoHeightMessageListener(iframe, options) {
         };
     }
     var handleMessage = function handleMessage(event) {
-        if (event.source !== iframe.contentWindow || !isCardHTMLAutoHeightMessage(event.data, options.autoHeightId)) {
+        if (event.source !== iframe.contentWindow) {
             return;
         }
-        options.onAutoHeight == null ? void 0 : options.onAutoHeight.call(options, event.data.height);
+        if (isCardHTMLAutoHeightMessage(event.data, options.autoHeightId)) {
+            options.onAutoHeight == null ? void 0 : options.onAutoHeight.call(options, event.data.height);
+            return;
+        }
+        var phase = getCardHTMLStreamRuntimePhase(event.data);
+        if (phase) {
+            options.onStreamRuntimePhase == null ? void 0 : options.onStreamRuntimePhase.call(options, phase);
+        }
     };
     window.addEventListener('message', handleMessage);
     return function() {
         window.removeEventListener('message', handleMessage);
     };
 }
+function getCardHTMLStreamRuntimePhase(data) {
+    if ((typeof data === "undefined" ? "undefined" : _type_of(data)) !== 'object' || data === null) {
+        return undefined;
+    }
+    var message = data;
+    if (message.type !== 'huamei:html-stream-runtime-status' || _type_of(message.payload) !== 'object' || message.payload === null) {
+        return undefined;
+    }
+    var phase = message.payload.phase;
+    return [
+        'parsing',
+        'draining',
+        'complete',
+        'finalizing',
+        'disposed',
+        'error'
+    ].includes(String(phase)) ? phase : undefined;
+}
 function isCardHTMLAutoHeightMessage(data, id) {
     if ((typeof data === "undefined" ? "undefined" : _type_of(data)) !== 'object' || data === null) {
         return false;
@@ -69643,7 +69668,7 @@ function withCardHTMLAutoHeightBridge(html, id) {
     if (!id) {
         return html;
     }
-    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + JSON.stringify(id) + ";\n  let frame = 0;\n  const getNodeHeight = (node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      const rect = node.getBoundingClientRect();\n      return rect.bottom + window.scrollY;\n    }\n    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      const rects = Array.from(range.getClientRects());\n      range.detach();\n      return rects.reduce((height, rect) => Math.max(height, rect.bottom + window.scrollY), 0);\n    }\n\n    return 0;\n  };\n  const getContentHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.childNodes).reduce((height, child) => {\n      return Math.max(height, getNodeHeight(child));\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const contentHeight = getContentHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(contentHeight > 0 ? contentHeight : scrollHeight);\n  };\n  const postHeight = () => {\n    frame = 0;\n    window.parent.postMessage({\n      source: 'vvfx-card-html-auto-height',\n      id,\n      height: getHeight(),\n    }, '*');\n  };\n  const schedule = () => {\n    if (frame) return;\n    frame = requestAnimationFrame(postHeight);\n  };\n  window.addEventListener('message', (event) => {\n    const message = event.data;\n    if (!message || message.source !== 'vvfx-card-html-auto-height-request' || message.id !== id) {\n      return;\n    }\n\n    schedule();\n  });\n  window.addEventListener('load', schedule);\n  window.addEventListener('resize', schedule);\n  new ResizeObserver(schedule).observe(document.documentElement);\n  if (document.body) {\n    new ResizeObserver(schedule).observe(document.body);\n    new MutationObserver(schedule).observe(document.body, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  schedule();\n})();\n</script>";
+    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + JSON.stringify(id) + ";\n  let frame = 0;\n  const getNodeHeight = (node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      if (window.getComputedStyle(node).position === 'fixed') {\n        return 0;\n      }\n      const rect = node.getBoundingClientRect();\n      return rect.bottom + window.scrollY;\n    }\n    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      const rects = Array.from(range.getClientRects());\n      range.detach();\n      return rects.reduce((height, rect) => Math.max(height, rect.bottom + window.scrollY), 0);\n    }\n\n    return 0;\n  };\n  const getContentHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.childNodes).reduce((height, child) => {\n      return Math.max(height, getNodeHeight(child));\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const contentHeight = getContentHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(contentHeight > 0 ? contentHeight : scrollHeight);\n  };\n  const postHeight = () => {\n    frame = 0;\n    window.parent.postMessage({\n      source: 'vvfx-card-html-auto-height',\n      id,\n      height: getHeight(),\n    }, '*');\n  };\n  const schedule = () => {\n    if (frame) return;\n    frame = requestAnimationFrame(postHeight);\n  };\n  window.addEventListener('message', (event) => {\n    const message = event.data;\n    if (!message || message.source !== 'vvfx-card-html-auto-height-request' || message.id !== id) {\n      return;\n    }\n\n    schedule();\n  });\n  window.addEventListener('load', schedule);\n  window.addEventListener('resize', schedule);\n  new ResizeObserver(schedule).observe(document.documentElement);\n  if (document.body) {\n    new ResizeObserver(schedule).observe(document.body);\n    new MutationObserver(schedule).observe(document.body, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  schedule();\n})();\n</script>";
     if (/<\/body>/i.test(html)) {
         return html.replace(/<\/body>/i, "" + script + "</body>");
     }
@@ -69927,6 +69952,442 @@ function syncElementStackOrder(_container, elements) {
     });
 }
 
+var CAPTURE_TIMEOUT = 5000;
+var MOTION_PROPERTIES = /^(animation|transition)(?:-|$)/i;
+var RUNTIME_SELECTOR = [
+    '[data-hm-stream-runtime]',
+    '[data-vvfx-card-html-auto-height]',
+    '[data-vvfx-card-html-anchor-navigation-guard]',
+    'script',
+    'noscript',
+    'template'
+].join(',');
+function captureViewportSize(logicalSize, _displayedBounds) {
+    return {
+        width: Math.max(1, logicalSize.width),
+        height: Math.max(1, logicalSize.height)
+    };
+}
+function serializeComputedCaptureStyle(style) {
+    var declarations = [];
+    for(var _iterator = _create_for_of_iterator_helper_loose(style), _step; !(_step = _iterator()).done;){
+        var property = _step.value;
+        if (MOTION_PROPERTIES.test(property)) {
+            continue;
+        }
+        var value = style.getPropertyValue(property);
+        if (!value) {
+            continue;
+        }
+        var priority = style.getPropertyPriority(property);
+        declarations.push(property + ":" + value + (priority ? "!" + priority : ''));
+    }
+    declarations.push('animation:none!important', 'transition:none!important');
+    return declarations.join(';');
+}
+function createHTMLCaptureReplica(ownerDocument, html, logicalSize) {
+    return _async_to_generator(function() {
+        var size, iframe, loaded, sourceDocument, replica;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    size = captureViewportSize(logicalSize);
+                    iframe = ownerDocument.createElement('iframe');
+                    Object.assign(iframe.style, {
+                        position: 'fixed',
+                        left: '-100000px',
+                        top: '0',
+                        width: "" + size.width + "px",
+                        height: "" + size.height + "px",
+                        border: '0',
+                        pointerEvents: 'none',
+                        opacity: '1',
+                        zIndex: '-1'
+                    });
+                    iframe.srcdoc = html;
+                    loaded = waitForNextLoad(iframe);
+                    ownerDocument.body.appendChild(iframe);
+                    return [
+                        4,
+                        withCaptureTimeout(loaded)
+                    ];
+                case 1:
+                    _state.sent();
+                    sourceDocument = iframe.contentDocument;
+                    if (!(sourceDocument == null ? void 0 : sourceDocument.documentElement) || !sourceDocument.body) {
+                        iframe.remove();
+                        return [
+                            2,
+                            undefined
+                        ];
+                    }
+                    return [
+                        4,
+                        createHTMLCaptureReplicaFromDocument(ownerDocument, sourceDocument, size)
+                    ];
+                case 2:
+                    replica = _state.sent();
+                    if (!replica) {
+                        iframe.remove();
+                        return [
+                            2,
+                            undefined
+                        ];
+                    }
+                    return [
+                        2,
+                        {
+                            target: replica.target,
+                            cleanup: function cleanup() {
+                                replica.cleanup();
+                                iframe.remove();
+                            }
+                        }
+                    ];
+            }
+        });
+    })();
+}
+function createHTMLCaptureReplicaFromDocument(ownerDocument, sourceDocument, logicalSize) {
+    return _async_to_generator(function() {
+        var target;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    if (!sourceDocument.documentElement || !sourceDocument.body || !sourceDocument.defaultView) {
+                        return [
+                            2,
+                            undefined
+                        ];
+                    }
+                    return [
+                        4,
+                        withCaptureTimeout(waitForCaptureReady(sourceDocument))
+                    ];
+                case 1:
+                    _state.sent();
+                    target = createComputedCaptureTarget(ownerDocument, sourceDocument, captureViewportSize(logicalSize));
+                    return [
+                        2,
+                        {
+                            target: target,
+                            cleanup: function cleanup() {
+                                target.remove();
+                            }
+                        }
+                    ];
+            }
+        });
+    })();
+}
+function createComputedCaptureTarget(ownerDocument, sourceDocument, size) {
+    var sourceWindow = sourceDocument.defaultView;
+    if (!sourceWindow) {
+        throw new Error('HTML capture replica has no window');
+    }
+    var frame = ownerDocument.createElement('div');
+    frame.setAttribute('data-vvfx-html-capture-replica', 'true');
+    frame.style.cssText = serializeComputedCaptureStyle(sourceWindow.getComputedStyle(sourceDocument.documentElement));
+    Object.assign(frame.style, {
+        position: 'fixed',
+        left: '-100000px',
+        top: '0',
+        width: "" + size.width + "px",
+        height: "" + size.height + "px",
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        opacity: '1',
+        zIndex: '-1',
+        transform: 'none'
+    });
+    appendDocumentFontSurface(frame, sourceDocument, ownerDocument);
+    var sourceBody = sourceDocument.body;
+    var bodyClone = sourceBody.cloneNode(true);
+    bodyClone.querySelectorAll(RUNTIME_SELECTOR).forEach(function(node) {
+        node.remove();
+    });
+    if (bodyClone.matches(RUNTIME_SELECTOR)) {
+        bodyClone.replaceChildren();
+    }
+    frame.appendChild(bodyClone);
+    ownerDocument.body.appendChild(frame);
+    var sources = [].concat([
+        sourceBody
+    ], Array.from(sourceBody.querySelectorAll('*'))).filter(isStylableElement).filter(function(node) {
+        return !node.matches(RUNTIME_SELECTOR) && !node.closest(RUNTIME_SELECTOR);
+    });
+    var clones = [].concat([
+        bodyClone
+    ], Array.from(bodyClone.querySelectorAll('*'))).filter(isStylableElement).filter(function(node) {
+        return !node.matches(RUNTIME_SELECTOR) && !node.closest(RUNTIME_SELECTOR);
+    });
+    var pseudoRules = [];
+    sources.forEach(function(source, index) {
+        var clone = clones[index];
+        if (!clone) {
+            return;
+        }
+        clone.style.cssText = serializeComputedCaptureStyle(sourceWindow.getComputedStyle(source));
+        freezeViewportPosition(source, clone, sourceWindow);
+        preserveLiveElementState(source, clone, ownerDocument);
+        appendPseudoRule(source, clone, sourceWindow, pseudoRules, index);
+    });
+    if (pseudoRules.length) {
+        var style = ownerDocument.createElement('style');
+        style.setAttribute('data-vvfx-html-capture-pseudo', 'true');
+        style.textContent = pseudoRules.join('\n');
+        frame.prepend(style);
+    }
+    return frame;
+}
+function appendDocumentFontSurface(frame, sourceDocument, ownerDocument) {
+    var _sourceDocument_defaultView;
+    var fontRules = [];
+    var SourceCSSFontFaceRule = (_sourceDocument_defaultView = sourceDocument.defaultView) == null ? void 0 : _sourceDocument_defaultView.CSSFontFaceRule;
+    Array.from(sourceDocument.styleSheets).forEach(function(sheet) {
+        try {
+            Array.from(sheet.cssRules).forEach(function(rule) {
+                if (SourceCSSFontFaceRule && _instanceof(rule, SourceCSSFontFaceRule)) {
+                    fontRules.push(rule.cssText);
+                }
+            });
+        } catch (unused) {
+        // Cross-origin font stylesheets are already loaded in the replica but cannot be read.
+        }
+    });
+    if (!fontRules.length) {
+        return;
+    }
+    var style = ownerDocument.createElement('style');
+    style.setAttribute('data-vvfx-html-capture-fonts', 'true');
+    style.textContent = fontRules.join('\n');
+    frame.appendChild(style);
+}
+function isStylableElement(element) {
+    return 'style' in element;
+}
+function freezeViewportPosition(source, clone, sourceWindow) {
+    if (sourceWindow.getComputedStyle(source).position !== 'fixed') {
+        return;
+    }
+    var rect = source.getBoundingClientRect();
+    Object.assign(clone.style, {
+        position: 'absolute',
+        left: "" + rect.left + "px",
+        top: "" + rect.top + "px",
+        right: 'auto',
+        bottom: 'auto',
+        width: "" + rect.width + "px",
+        height: "" + rect.height + "px"
+    });
+}
+function preserveLiveElementState(source, clone, ownerDocument) {
+    if (_instanceof(source, source.ownerDocument.defaultView.HTMLImageElement) && _instanceof(clone, ownerDocument.defaultView.HTMLImageElement)) {
+        clone.src = source.currentSrc || source.src;
+    }
+    if (_instanceof(source, source.ownerDocument.defaultView.HTMLInputElement) && _instanceof(clone, ownerDocument.defaultView.HTMLInputElement)) {
+        clone.value = source.value;
+        clone.checked = source.checked;
+    }
+    if (_instanceof(source, source.ownerDocument.defaultView.HTMLTextAreaElement) && _instanceof(clone, ownerDocument.defaultView.HTMLTextAreaElement)) {
+        clone.value = source.value;
+        clone.textContent = source.value;
+    }
+    if (_instanceof(source, source.ownerDocument.defaultView.HTMLCanvasElement) && _instanceof(clone, ownerDocument.defaultView.HTMLCanvasElement)) {
+        clone.width = source.width;
+        clone.height = source.height;
+        try {
+            var _clone_getContext;
+            (_clone_getContext = clone.getContext('2d')) == null ? void 0 : _clone_getContext.drawImage(source, 0, 0);
+        } catch (unused) {
+        // Tainted canvases remain empty; snapdom cannot legally read them either.
+        }
+    }
+}
+function appendPseudoRule(source, clone, sourceWindow, rules, index) {
+    var attribute = "capture-" + index;
+    clone.setAttribute('data-vvfx-capture-node', attribute);
+    [
+        '::before',
+        '::after'
+    ].forEach(function(pseudo) {
+        var style = sourceWindow.getComputedStyle(source, pseudo);
+        if (!style.content || style.content === 'none' || style.content === 'normal') {
+            return;
+        }
+        rules.push('[data-vvfx-capture-node="' + attribute + '"]' + pseudo + "{" + serializeComputedCaptureStyle(style) + "}");
+    });
+}
+function waitForCaptureReady(document) {
+    return _async_to_generator(function() {
+        var _document_fonts;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    return [
+                        4,
+                        (_document_fonts = document.fonts) == null ? void 0 : _document_fonts.ready
+                    ];
+                case 1:
+                    _state.sent();
+                    return [
+                        4,
+                        Promise.all(Array.from(document.images).map(function(image) {
+                            return _async_to_generator(function() {
+                                return _ts_generator(this, function(_state) {
+                                    switch(_state.label){
+                                        case 0:
+                                            _state.trys.push([
+                                                0,
+                                                4,
+                                                ,
+                                                5
+                                            ]);
+                                            if (!!image.complete) return [
+                                                3,
+                                                2
+                                            ];
+                                            return [
+                                                4,
+                                                new Promise(function(resolve) {
+                                                    image.addEventListener('load', function() {
+                                                        resolve();
+                                                    }, {
+                                                        once: true
+                                                    });
+                                                    image.addEventListener('error', function() {
+                                                        resolve();
+                                                    }, {
+                                                        once: true
+                                                    });
+                                                })
+                                            ];
+                                        case 1:
+                                            _state.sent();
+                                            _state.label = 2;
+                                        case 2:
+                                            return [
+                                                4,
+                                                image.decode == null ? void 0 : image.decode.call(image)
+                                            ];
+                                        case 3:
+                                            _state.sent();
+                                            return [
+                                                3,
+                                                5
+                                            ];
+                                        case 4:
+                                            _state.sent();
+                                            return [
+                                                3,
+                                                5
+                                            ];
+                                        case 5:
+                                            return [
+                                                2
+                                            ];
+                                    }
+                                });
+                            })();
+                        }))
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        4,
+                        waitForStableLayout(document)
+                    ];
+                case 3:
+                    _state.sent();
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function waitForStableLayout(document) {
+    return _async_to_generator(function() {
+        var view, startedAt, previous, stableFrames, _ref, _ref1, _document_body, _document_body1, current;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    view = document.defaultView;
+                    if (!view) {
+                        return [
+                            2
+                        ];
+                    }
+                    startedAt = performance.now();
+                    previous = '';
+                    stableFrames = 0;
+                    _state.label = 1;
+                case 1:
+                    if (!(performance.now() - startedAt < CAPTURE_TIMEOUT && stableFrames < 3)) return [
+                        3,
+                        3
+                    ];
+                    return [
+                        4,
+                        new Promise(function(resolve) {
+                            return view.requestAnimationFrame(function() {
+                                resolve();
+                            });
+                        })
+                    ];
+                case 2:
+                    _state.sent();
+                    current = [
+                        document.documentElement.scrollWidth,
+                        document.documentElement.scrollHeight,
+                        (_ref = (_document_body = document.body) == null ? void 0 : _document_body.scrollWidth) != null ? _ref : 0,
+                        (_ref1 = (_document_body1 = document.body) == null ? void 0 : _document_body1.scrollHeight) != null ? _ref1 : 0,
+                        document.styleSheets.length,
+                        document.querySelectorAll('style').length
+                    ].join(':');
+                    stableFrames = current === previous ? stableFrames + 1 : 0;
+                    previous = current;
+                    return [
+                        3,
+                        1
+                    ];
+                case 3:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function waitForNextLoad(iframe) {
+    return new Promise(function(resolve) {
+        iframe.addEventListener('load', function() {
+            resolve();
+        }, {
+            once: true
+        });
+        iframe.addEventListener('error', function() {
+            resolve();
+        }, {
+            once: true
+        });
+    });
+}
+function withCaptureTimeout(promise) {
+    return new Promise(function(resolve) {
+        var timer = globalThis.setTimeout(function() {
+            resolve(undefined);
+        }, CAPTURE_TIMEOUT);
+        promise.then(function(value) {
+            globalThis.clearTimeout(timer);
+            resolve(value);
+        }, function() {
+            globalThis.clearTimeout(timer);
+            resolve(undefined);
+        });
+    });
+}
+
 function getCardOverlayBoxStyle(box, width, height, offsetX, offsetY, _autoScale) {
     if (offsetX === void 0) offsetX = 0;
     if (offsetY === void 0) offsetY = 0;
@@ -70073,7 +70534,8 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             cleanups: new Map(),
             autoHeightModes: new Map(),
             autoHeightCleanups: new Map(),
-            autoHeightFrames: new Map()
+            autoHeightFrames: new Map(),
+            autoHeightStreamPhases: new Map()
         };
         this.handleContainerDoubleClick = function(event) {
             var _this_state_editing;
@@ -70167,7 +70629,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 metaKey: event.metaKey
             }));
         };
-        this.isAutoHeightMessage = isCardHTMLAutoHeightMessage;
     }
     var _proto = HTMLOverlayManager.prototype;
     _proto.attach = function attach() {
@@ -70226,6 +70687,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             cancelHTMLOverlayFrame(frame);
         });
         this.state.autoHeightFrames.clear();
+        this.state.autoHeightStreamPhases.clear();
         this.eventCleanups.forEach(function(cleanup) {
             cleanup();
         });
@@ -70321,7 +70783,10 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                         _state.sent();
                         return [
                             4,
-                            createCardCaptureTarget(contentOverlay, this.state.contents.get(id))
+                            createCardCaptureTarget(contentOverlay, this.state.contents.get(id), {
+                                width: options.width,
+                                height: options.height
+                            })
                         ];
                     case 3:
                         capture = _state.sent();
@@ -70338,9 +70803,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                             I.toPng(capture.target, _extends({
                                 embedFonts: true,
                                 backgroundColor: 'transparent',
-                                dpr: (_ref = (_options_pixelRatio = options.pixelRatio) != null ? _options_pixelRatio : window.devicePixelRatio) != null ? _ref : 2,
-                                width: options.width,
-                                height: options.height
+                                dpr: (_ref = (_options_pixelRatio = options.pixelRatio) != null ? _options_pixelRatio : window.devicePixelRatio) != null ? _ref : 2
                             }, options.snapdomOptions))
                         ];
                     case 5:
@@ -71268,6 +71731,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                     autoHeightId: (options == null ? void 0 : options.autoHeight) ? options.id : undefined,
                     onAutoHeight: (options == null ? void 0 : options.autoHeight) ? function(height) {
                         _this.applyAutoHeight(options.id, height);
+                    } : undefined,
+                    onStreamRuntimePhase: (options == null ? void 0 : options.autoHeight) ? function(phase) {
+                        _this.setAutoHeightStreamPhase(options.id, phase);
                     } : undefined
                 }));
             case 'dom':
@@ -71293,6 +71759,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                     autoHeightId: (options == null ? void 0 : options.autoHeight) ? options.id : undefined,
                     onAutoHeight: (options == null ? void 0 : options.autoHeight) ? function(height) {
                         _this.applyAutoHeight(options.id, height);
+                    } : undefined,
+                    onStreamRuntimePhase: (options == null ? void 0 : options.autoHeight) ? function(phase) {
+                        _this.setAutoHeightStreamPhase(options.id, phase);
                     } : undefined
                 }));
         }
@@ -71323,6 +71792,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.state.contents.delete(id);
         this.state.contentMountElements.delete(id);
         this.state.autoHeightModes.delete(id);
+        this.state.autoHeightStreamPhases.delete(id);
         this.invalidateContentInteractionZones(id);
         (_this_state_contentInteractionZoneCleanups_get = this.state.contentInteractionZoneCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionZoneCleanups_get();
         this.state.contentInteractionZoneCleanups.delete(id);
@@ -71344,10 +71814,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             return;
         }
         this.ensureAutoHeightMode(id);
-        if (this.state.autoHeightModes.get(id) === 'message') {
-            this.cleanupAutoHeight(id);
-            return;
-        }
         if (!this.state.autoHeightCleanups.has(id)) {
             this.state.autoHeightCleanups.set(id, this.createAutoHeightObserver(id));
         }
@@ -71394,16 +71860,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var mount = this.state.contentMountElements.get(id);
         observeElement(mount);
         mount == null ? void 0 : mount.querySelectorAll('iframe').forEach(function(iframe) {
-            var handleAutoHeightMessage = function handleAutoHeightMessage(event) {
-                if (event.source !== iframe.contentWindow || !_this.isAutoHeightMessage(event.data, id)) {
-                    return;
-                }
-                _this.applyAutoHeight(id, event.data.height);
-            };
-            window.addEventListener('message', handleAutoHeightMessage);
-            cleanupFns.push(function() {
-                window.removeEventListener('message', handleAutoHeightMessage);
-            });
             var syncIframeDocument = function syncIframeDocument() {
                 var doc = null;
                 try {
@@ -71414,12 +71870,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 if (!doc) {
                     return;
                 }
-                doc.documentElement.style.height = 'auto';
-                doc.documentElement.style.minHeight = '0';
-                if (doc.body) {
-                    doc.body.style.height = 'auto';
-                    doc.body.style.minHeight = '0';
-                }
                 observeElement(doc.documentElement);
                 observeElement(doc.body);
                 _this.scheduleAutoHeightMeasure(id);
@@ -71486,6 +71936,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         var body = doc.body;
         var documentElement = doc.documentElement;
+        if (!documentElement) {
+            return undefined;
+        }
         var childHeight = body ? this.getChildrenNaturalHeight(body) : 0;
         if (childHeight > 0) {
             return childHeight;
@@ -71502,6 +71955,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 if (!includeIframes && childElement.tagName === 'IFRAME') {
                     return height;
                 }
+                if (globalThis.getComputedStyle(childElement).position === 'fixed') {
+                    return height;
+                }
                 return Math.max(height, childElement.offsetTop + childElement.offsetHeight);
             }
             if (child.nodeType === Node.TEXT_NODE && ((_child_textContent = child.textContent) == null ? void 0 : _child_textContent.trim())) {
@@ -71540,6 +71996,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             return;
         }
         var nextHeight = Math.ceil(this.getAutoHeightItemHeight(item, height));
+        if (this.isAutoHeightStreamActive(id) && nextHeight < item.property.height) {
+            return;
+        }
         if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
@@ -71548,6 +72007,16 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             previousHeight: item.property.height
         });
     };
+    _proto.setAutoHeightStreamPhase = function setAutoHeightStreamPhase(id, phase) {
+        if (phase === 'parsing' || phase === 'draining' || phase === 'finalizing') {
+            this.state.autoHeightStreamPhases.set(id, phase);
+            return;
+        }
+        this.state.autoHeightStreamPhases.delete(id);
+    };
+    _proto.isAutoHeightStreamActive = function isAutoHeightStreamActive(id) {
+        return this.state.autoHeightStreamPhases.has(id);
+    };
     _proto.getAutoHeightAnchor = function getAutoHeightAnchor(item) {
         var _ref;
         var _this_options_resolveCardTypeConfig;
@@ -71777,52 +72246,56 @@ function waitForIframeLoad(iframe) {
         });
     });
 }
-function createCardCaptureTarget(root, html) {
+function createCardCaptureTarget(root, html, logicalSize) {
     return _async_to_generator(function() {
-        var previewHTML, preview, isDirectIframe, directTarget, shellTarget, flattenedTarget;
+        var _root_querySelector, liveDocument, liveReplica, previewHTML, preview, flattenedTarget;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    previewHTML = createCardPreviewHTML(html == null ? void 0 : html.content);
-                    if (!previewHTML) return [
+                    liveDocument = (_root_querySelector = root.querySelector('iframe')) == null ? void 0 : _root_querySelector.contentDocument;
+                    if (!liveDocument) return [
                         3,
                         2
                     ];
                     return [
                         4,
-                        createPreviewDocumentCaptureTarget(root, previewHTML)
+                        createHTMLCaptureReplicaFromDocument(root.ownerDocument, liveDocument, logicalSize)
                     ];
                 case 1:
-                    preview = _state.sent();
-                    if (preview) {
-                        isDirectIframe = root.children.length === 1 && _instanceof(root.children[0], HTMLIFrameElement);
-                        if (isDirectIframe) {
-                            directTarget = createDirectCaptureTarget(root, preview.target);
-                            return [
-                                2,
-                                {
-                                    target: directTarget,
-                                    cleanup: function cleanup() {
-                                        directTarget.remove();
-                                        preview.cleanup();
-                                    }
-                                }
-                            ];
-                        }
-                        shellTarget = createShellCaptureTarget(root, preview.target);
+                    liveReplica = _state.sent();
+                    if (liveReplica) {
                         return [
                             2,
                             {
-                                target: shellTarget,
-                                cleanup: function cleanup() {
-                                    shellTarget.remove();
-                                    preview.cleanup();
-                                }
+                                target: liveReplica.target,
+                                cleanup: liveReplica.cleanup
                             }
                         ];
                     }
                     _state.label = 2;
                 case 2:
+                    previewHTML = createCardPreviewHTML(html == null ? void 0 : html.content);
+                    if (!previewHTML) return [
+                        3,
+                        4
+                    ];
+                    return [
+                        4,
+                        createHTMLCaptureReplica(root.ownerDocument, previewHTML, logicalSize)
+                    ];
+                case 3:
+                    preview = _state.sent();
+                    if (preview) {
+                        return [
+                            2,
+                            {
+                                target: preview.target,
+                                cleanup: preview.cleanup
+                            }
+                        ];
+                    }
+                    _state.label = 4;
+                case 4:
                     flattenedTarget = createFlattenedExistingIframeTarget(root);
                     return [
                         2,
@@ -71880,182 +72353,6 @@ function createCardPreviewHTML(content) {
     }
     return undefined;
 }
-function createPreviewDocumentCaptureTarget(root, html) {
-    return _async_to_generator(function() {
-        var _ref, iframe, rect, loadPromise, doc, target;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    iframe = root.ownerDocument.createElement('iframe');
-                    rect = root.getBoundingClientRect();
-                    iframe.style.position = 'fixed';
-                    iframe.style.left = '-100000px';
-                    iframe.style.top = '0';
-                    iframe.style.width = "" + Math.max(1, rect.width) + "px";
-                    iframe.style.height = "" + Math.max(1, rect.height) + "px";
-                    iframe.style.border = '0';
-                    iframe.style.pointerEvents = 'none';
-                    iframe.style.opacity = '1';
-                    iframe.style.zIndex = '-1';
-                    loadPromise = waitForNextIframeLoad(iframe);
-                    root.ownerDocument.body.appendChild(iframe);
-                    iframe.srcdoc = html;
-                    return [
-                        4,
-                        loadPromise
-                    ];
-                case 1:
-                    _state.sent();
-                    return [
-                        4,
-                        waitForIframeContent(iframe)
-                    ];
-                case 2:
-                    _state.sent();
-                    doc = iframe.contentDocument;
-                    target = (_ref = doc == null ? void 0 : doc.body) != null ? _ref : doc == null ? void 0 : doc.documentElement;
-                    if (!target) {
-                        iframe.remove();
-                        return [
-                            2,
-                            undefined
-                        ];
-                    }
-                    return [
-                        4,
-                        waitForDocumentFonts(target.ownerDocument)
-                    ];
-                case 3:
-                    _state.sent();
-                    return [
-                        4,
-                        waitForImages(target)
-                    ];
-                case 4:
-                    _state.sent();
-                    return [
-                        4,
-                        nextAnimationFrame()
-                    ];
-                case 5:
-                    _state.sent();
-                    return [
-                        2,
-                        {
-                            target: target,
-                            cleanup: function cleanup() {
-                                iframe.remove();
-                            }
-                        }
-                    ];
-            }
-        });
-    })();
-}
-function waitForNextIframeLoad(iframe) {
-    return new Promise(function(resolve) {
-        iframe.addEventListener('load', function() {
-            resolve();
-        }, {
-            once: true
-        });
-        iframe.addEventListener('error', function() {
-            resolve();
-        }, {
-            once: true
-        });
-    });
-}
-function waitForIframeContent(iframe) {
-    return _async_to_generator(function() {
-        var start, doc;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    start = performance.now();
-                    _state.label = 1;
-                case 1:
-                    if (!(performance.now() - start < CARD_RASTERIZE_READY_TIMEOUT)) return [
-                        3,
-                        3
-                    ];
-                    doc = iframe.contentDocument;
-                    if ((doc == null ? void 0 : doc.body) && doc.body.children.length > 0) {
-                        return [
-                            2
-                        ];
-                    }
-                    return [
-                        4,
-                        nextAnimationFrame()
-                    ];
-                case 2:
-                    _state.sent();
-                    return [
-                        3,
-                        1
-                    ];
-                case 3:
-                    return [
-                        2
-                    ];
-            }
-        });
-    })();
-}
-function createShellCaptureTarget(root, contentTarget) {
-    var clone = root.cloneNode(true);
-    clone.style.position = 'fixed';
-    clone.style.left = '-100000px';
-    clone.style.top = '0';
-    clone.style.pointerEvents = 'none';
-    clone.style.opacity = '1';
-    clone.style.zIndex = '-1';
-    var clonedIframe = clone.querySelector('iframe');
-    if (clonedIframe) {
-        clonedIframe.replaceWith(createFlattenedContent(contentTarget, getComputedStyle(clonedIframe), root.ownerDocument));
-    }
-    root.ownerDocument.body.appendChild(clone);
-    return clone;
-}
-function createDirectCaptureTarget(root, contentTarget) {
-    var rect = root.getBoundingClientRect();
-    var frame = root.ownerDocument.createElement('div');
-    frame.style.position = 'fixed';
-    frame.style.left = '-100000px';
-    frame.style.top = '0';
-    frame.style.width = "" + Math.max(1, rect.width) + "px";
-    frame.style.height = "" + Math.max(1, rect.height) + "px";
-    frame.style.pointerEvents = 'none';
-    frame.style.opacity = '1';
-    frame.style.zIndex = '-1';
-    frame.style.overflow = 'hidden';
-    var flattenedContent = createFlattenedContent(contentTarget, getComputedStyle(contentTarget), root.ownerDocument);
-    flattenedContent.style.width = '100%';
-    flattenedContent.style.height = '100%';
-    frame.appendChild(flattenedContent);
-    root.ownerDocument.body.appendChild(frame);
-    return frame;
-}
-function createFlattenedContent(target, frameStyle, ownerDocument) {
-    var replacement = ownerDocument.createElement('div');
-    Object.assign(replacement.style, {
-        width: frameStyle.width,
-        height: frameStyle.height,
-        display: frameStyle.display === 'none' ? 'block' : frameStyle.display,
-        overflow: 'hidden',
-        border: frameStyle.border,
-        boxSizing: frameStyle.boxSizing,
-        background: frameStyle.background
-    });
-    Array.from(target.ownerDocument.head.children).forEach(function(child) {
-        replacement.appendChild(child.cloneNode(true));
-    });
-    Array.from(target.children).forEach(function(child) {
-        replacement.appendChild(child.cloneNode(true));
-    });
-    return replacement;
-}
 function isMouseEventInsideRect(event, rect) {
     return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
 }