@vvfx/sdk 0.2.3 → 0.2.4

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.3
+ * Version: v0.2.4
  */
 
 'use strict';
@@ -47185,7 +47185,7 @@ var SelectorGizmo = /*#__PURE__*/ function(Gizmo) {
         var preSelectedItem = this.pageDataUtils.getPreSelectedItem();
         var preSelectedItemBox = this.pageDataUtils.getViewBoxById((_ref = preSelectedItem == null ? void 0 : preSelectedItem.id) != null ? _ref : '');
         var _SDK_config_gestureHandlerConfig_selectorGizmoConfig = SDK.config.gestureHandlerConfig.selectorGizmoConfig, regionBoxColor = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionBoxColor, regionBoxAlpha = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionBoxAlpha, preSelectedWidth = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.preSelectedWidth, preSelectedColor = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.preSelectedColor, regionWireframeWidth = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionWireframeWidth, regionWireframeColor = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionWireframeColor, regionWireframeAlpha = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionWireframeAlpha;
-        if (!(preSelectedItemBox == null ? void 0 : preSelectedItemBox.isEmpty())) {
+        if (!(preSelectedItemBox == null ? void 0 : preSelectedItemBox.isEmpty()) && !isCardItem(preSelectedItem)) {
             this.graphics.lineStyle(preSelectedWidth, preSelectedColor);
             this.graphics.drawBox(preSelectedItemBox);
         }
@@ -55371,7 +55371,9 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
                         return;
                     }
                     var selectedItem = (_selectedItems_ = selectedItems[0]) != null ? _selectedItems_ : undefined;
-                    var isShfitLockScale = selectedItem && selectedItems.length === 1 && isFrameItem(selectedItem) ? !this.isShiftDown : this.isShiftDown;
+                    // html卡片内容在非自动缩放的情况下，拖动的时候内容自适应，因此与智能画板一样，需要默认是自由缩放（即自由改大小）
+                    var isSingleAutoFitContentCardItem = selectedItems.length === 1 && selectedItem && isCardItem(selectedItem) && !selectedItem.isAutoScale;
+                    var isShiftLockScale = selectedItem && selectedItems.length === 1 && (isFrameItem(selectedItem) || isSingleAutoFitContentCardItem) ? !this.isShiftDown : this.isShiftDown;
                     var farthestCorner = this.scaleParam.farthestCorner;
                     var isValidScale = (scaleCorner.x - farthestCorner.x) * (this.cursorPoint.x - farthestCorner.x) > 0 && (scaleCorner.y - farthestCorner.y) * (this.cursorPoint.y - farthestCorner.y) > 0;
                     if (!isValidScale && this.isLockScale && !this.isShiftDown) {
@@ -55388,7 +55390,7 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
                         var currentStartScale = startScale.clone().multiply(lastScalar);
                         var currentScale = worldPosition1.clone().subtract(cornerShift).subtract(center1).applyMatrix(rotationMatrix);
                         var scalar = new Vector3(1, 1, 1);
-                        if (!this.isLockScale || isShfitLockScale) {
+                        if (!this.isLockScale || isShiftLockScale) {
                             scalar.x = isEqual$1(currentStartScale.x, 0) ? 1 : currentScale.x / currentStartScale.x;
                             scalar.y = isEqual$1(currentStartScale.y, 0) ? 1 : currentScale.y / currentStartScale.y;
                             scalar.z = isEqual$1(currentStartScale.z, 0) ? 1 : currentScale.z / currentStartScale.z;
@@ -55445,6 +55447,23 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
                                 newWidth,
                                 newHeight
                             ], translation1);
+                        } else if (isSingleAutoFitContentCardItem && selectedItem && isCardItem(selectedItem)) {
+                            var currentWidth1 = selectedItem.pixelWidth;
+                            var currentHeight1 = selectedItem.pixelHeight;
+                            var newWidth1 = currentWidth1 * resultScalar1.x;
+                            var newHeight1 = currentHeight1 * resultScalar1.y;
+                            this._pageDataUtils.resizeCardItem(selectedItem.id, [
+                                newWidth1,
+                                newHeight1
+                            ], translation1);
+                            void this._pageDataUtils.setItemProperty({
+                                itemId: selectedItem.id,
+                                type: SDKItemType.CARD,
+                                property: {
+                                    width: newWidth1,
+                                    height: newHeight1
+                                }
+                            });
                         } else {
                             // 普通元素的缩放逻辑
                             selectedItems.forEach(function(item) {
@@ -55769,6 +55788,7 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
         var selectedItems = this._pageDataUtils.getSelectedItems();
         var isTemplateMode = SDK.config.mode === 'template';
         var selectedItem = selectedItems.length === 1 ? selectedItems[0] : undefined;
+        var isSingleCardItem = isCardItem(selectedItem);
         var isGeneratorItem = (selectedItem == null ? void 0 : selectedItem.type) === SDKItemType.GENERATOR;
         var isAutoLayoutFrame = (selectedItem == null ? void 0 : selectedItem.type) === SDKItemType.FRAME && (selectedItem == null ? void 0 : selectedItem.layoutMode) === FrameLayoutMode.AUTO;
         var canScale = selectedItems.length === 1 && (selectedItem == null ? void 0 : selectedItem.type) !== SDKItemType.GROUP && !isAutoLayoutFrame && !isGeneratorItem;
@@ -55808,9 +55828,11 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
         this.wireframe.totalBox.copyFrom(box).expandByScalar(totalBoxExpandScalar);
         // 根据box获取边缘线
         var corners = this.wireframe.box.corners;
-        corners.forEach(function(corner, i) {
-            _this.wireframe.edges.push(new Line2(new Vector2().copyFrom(corner), new Vector2().copyFrom(corners[(i + 1) % 4])));
-        });
+        if (!isSingleCardItem) {
+            corners.forEach(function(corner, i) {
+                _this.wireframe.edges.push(new Line2(new Vector2().copyFrom(corner), new Vector2().copyFrom(corners[(i + 1) % 4])));
+            });
+        }
         var _SDK_config_gestureHandlerConfig_transformGizmoConfig = SDK.config.gestureHandlerConfig.transformGizmoConfig, scaleCircleSize = _SDK_config_gestureHandlerConfig_transformGizmoConfig.scaleCircleSize, rotationCircleSize = _SDK_config_gestureHandlerConfig_transformGizmoConfig.rotationCircleSize;
         // 成组暂不支持缩放
         if (selectedItems.length === 1) {
@@ -59665,12 +59687,6 @@ var MAX_ITEM_DISTANCE_THRESHOLD = 100000;
 /**
  * @description SDKItem position 属性的数字精度（保留小数位数）
  */ var POSITION_PRECISION = 4;
-function isCardHTMLContentValue(value) {
-    return (value == null ? void 0 : value.kind) === 'inline' || (value == null ? void 0 : value.kind) === 'dom' || (value == null ? void 0 : value.kind) === 'document';
-}
-function isCardHTMLValue(value) {
-    return isCardHTMLContentValue(value == null ? void 0 : value.content);
-}
 var PageDataUtils = /*#__PURE__*/ function() {
     function PageDataUtils(player, container, emitter, sdk) {
         this.player = player;
@@ -60433,6 +60449,8 @@ var PageDataUtils = /*#__PURE__*/ function() {
                 }
         }
         var isLocked = (_this_getSDKItem = this.getSDKItem(playerItem.getInstanceId())) == null ? void 0 : _this_getSDKItem.isLocked;
+        // 优先通过 ID 查找现有 SDKItem，获取其 SDKItemType
+        var existingSDKItem = this.getSDKItem(playerItem.getInstanceId());
         // 创建基础选项
         var baseOptions = {
             id: playerItem.getInstanceId(),
@@ -60444,12 +60462,11 @@ var PageDataUtils = /*#__PURE__*/ function() {
             endBehavior: playerItem.endBehavior,
             visible: isVisible,
             isLocked: isLocked,
-            isCoreEditable: isCoreEditable
+            isCoreEditable: isCoreEditable,
+            extension: existingSDKItem == null ? void 0 : existingSDKItem.extension
         };
         // 根据类型创建对应的 SDKItem 类实例
         var sdkItem;
-        // 优先通过 ID 查找现有 SDKItem，获取其 SDKItemType
-        var existingSDKItem = this.getSDKItem(playerItem.getInstanceId());
         // 如果找到了现有 SDKItem，根据 SDKItemType 创建
         // 将类型转换为 string 进行比较
         if ((existingSDKItem == null ? void 0 : existingSDKItem.type) === SDKItemType.GENERATOR) {
@@ -60488,11 +60505,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                 property: property
             }));
         } else if ((existingSDKItem == null ? void 0 : existingSDKItem.type) == SDKItemType.CARD) {
-            var cardType = existingSDKItem.cardType, html = existingSDKItem.html;
+            var cardType = existingSDKItem.cardType;
             sdkItem = new CardItem(_extends({}, baseOptions, {
                 property: _extends({}, property, {
-                    cardType: cardType,
-                    html: html
+                    cardType: cardType
                 })
             }));
         } else {
@@ -60719,6 +60735,19 @@ var PageDataUtils = /*#__PURE__*/ function() {
         }).call(this);
     };
     /**
+   * @description 设置元素extension字段
+   */ _proto.setItemExtension = function setItemExtension(itemId, extension) {
+        var item = this.getSDKItem(itemId);
+        if (!item) {
+            console.warn('setItemExtension: item not found');
+            return;
+        }
+        for(var _iterator = _create_for_of_iterator_helper_loose(Object.entries(extension)), _step; !(_step = _iterator()).done;){
+            var _step_value = _step.value, key = _step_value[0], value = _step_value[1];
+            item.extension.set(key, value);
+        }
+    };
+    /**
    * @description 场景 1: 设置单个元素的单个属性
    */ _proto.setSingleItemSingleProperty = function setSingleItemSingleProperty(param) {
         return _async_to_generator(function() {
@@ -61076,40 +61105,35 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                     3,
                                     31
                                 ];
-                            case 'html':
-                                return [
-                                    3,
-                                    32
-                                ];
                             case 'position':
                                 return [
                                     3,
-                                    33
+                                    32
                                 ];
                             case 'rotation':
                                 return [
                                     3,
-                                    34
+                                    33
                                 ];
                             case 'scale':
                                 return [
                                     3,
-                                    35
+                                    34
                                 ];
                             case 'layoutMode':
                                 return [
                                     3,
-                                    36
+                                    35
                                 ];
                             case 'visible':
                                 return [
                                     3,
-                                    37
+                                    36
                                 ];
                         }
                         return [
                             3,
-                            38
+                            37
                         ];
                     case 1:
                         {
@@ -61122,7 +61146,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 2:
@@ -61133,7 +61157,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 3:
@@ -61165,7 +61189,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 5:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 6:
                         {
@@ -61182,7 +61206,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 7:
@@ -61196,7 +61220,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 8:
@@ -61209,7 +61233,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 9:
@@ -61223,7 +61247,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 10:
@@ -61236,7 +61260,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 11:
@@ -61249,7 +61273,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 12:
@@ -61269,7 +61293,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 13:
@@ -61311,7 +61335,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 14:
@@ -61346,7 +61370,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 15:
@@ -61360,7 +61384,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 16:
@@ -61392,7 +61416,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 20:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 21:
                         if (!(typeof propertyValue === 'string' && playerItem.type === EFFECTS.spec.ItemType.video)) return [
@@ -61423,7 +61447,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 25:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 26:
                         if (!(playerItem.type === EFFECTS.spec.ItemType.null)) return [
@@ -61471,7 +61495,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 28:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 29:
                         {
@@ -61483,7 +61507,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 30:
@@ -61496,7 +61520,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 31:
@@ -61509,20 +61533,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 32:
-                        {
-                            if (isCardItem(targetItem)) {
-                                targetItem.html = isCardHTMLValue(propertyValue) ? propertyValue : undefined;
-                            }
-                            return [
-                                3,
-                                39
-                            ];
-                        }
-                    case 33:
                         {
                             if (Array.isArray(propertyValue) && propertyValue.length === 2) {
                                 pixelTranslation = propertyValue.map(function(v, i) {
@@ -61535,10 +61549,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 34:
+                    case 33:
                         {
                             if (Array.isArray(propertyValue) && propertyValue.length === 3) {
                                 rotation = propertyValue.map(function(v, i) {
@@ -61549,10 +61563,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 35:
+                    case 34:
                         {
                             if (Array.isArray(propertyValue) && propertyValue.length === 2) {
                                 currentScale = targetItem.property.scale;
@@ -61566,10 +61580,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 36:
+                    case 35:
                         {
                             if (propertyValue === FrameLayoutMode.AUTO || propertyValue === FrameLayoutMode.FREE) {
                                 frameComponent = playerItem.getComponent(EFFECTS.FrameComponent);
@@ -61579,10 +61593,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 37:
+                    case 36:
                         {
                             if (typeof propertyValue === 'boolean') {
                                 playerItem.setVisible(propertyValue);
@@ -61595,10 +61609,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 38:
+                    case 37:
                         {
                             console.log('ignore property name ', propertyName);
                             // 对于未明确处理的属性，尝试直接设置到 property 对象
@@ -61606,8 +61620,8 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                 targetItem.property[propertyName] = propertyValue;
                             }
                         }
-                        _state.label = 39;
-                    case 39:
+                        _state.label = 38;
+                    case 38:
                         // 非位置属性需要刷新播放器
                         // template 模式下保持暂停态以避免播放器自动播放，editor 模式继续推进
                         if (![
@@ -62490,6 +62504,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     }
                     break;
                 }
+            case 'cardType':
+                {
+                    break;
+                }
             default:
                 {
                     console.warn("Target property " + propertyName + " can not be changed.");
@@ -63082,12 +63100,15 @@ var PageDataUtils = /*#__PURE__*/ function() {
         var _cardInfo_name = cardInfo.name, name = _cardInfo_name === void 0 ? '卡片' : _cardInfo_name, _cardInfo_property = cardInfo.property, width = _cardInfo_property.width, height = _cardInfo_property.height, _cardInfo_property_scale = _cardInfo_property.scale, scale = _cardInfo_property_scale === void 0 ? [
             1,
             1
-        ] : _cardInfo_property_scale, cardType = _cardInfo_property.cardType, tmp = _cardInfo_property.rotation, sourceRotation = tmp === void 0 ? 0 : tmp, sourcePosition = _cardInfo_property.position, autoHeight = _cardInfo_property.autoHeight, html = _cardInfo_property.html, parentId = cardInfo.parentId, _cardInfo_id = cardInfo.id, id = _cardInfo_id === void 0 ? EFFECTS.generateGUID() : _cardInfo_id, extension = cardInfo.extension;
+        ] : _cardInfo_property_scale, cardType = _cardInfo_property.cardType, tmp = _cardInfo_property.rotation, sourceRotation = tmp === void 0 ? 0 : tmp, sourcePosition = _cardInfo_property.position, parentId = cardInfo.parentId, _cardInfo_id = cardInfo.id, id = _cardInfo_id === void 0 ? EFFECTS.generateGUID() : _cardInfo_id, extension = cardInfo.extension;
         // 校验 cardType 是否已在配置中注册
+        var cardTypeConfig = SDK.config.itemConfig.cardConfig.cardTypes.find(function(t) {
+            return t.type === cardType;
+        });
         var registeredTypes = SDK.config.itemConfig.cardConfig.cardTypes.map(function(t) {
             return t.type;
         });
-        if (!registeredTypes.includes(cardType)) {
+        if (!cardTypeConfig) {
             console.warn('CardItem cardType "' + cardType + '" is not registered. Registered types: ' + registeredTypes.join(', '));
             return;
         }
@@ -63131,9 +63152,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                 width: width,
                 height: height,
                 scale: [].concat(scale),
-                cardType: cardType,
-                autoHeight: autoHeight,
-                html: html
+                cardType: cardType
             },
             extension: extension
         });
@@ -64515,8 +64534,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                 scalar.y
                             ],
                             rotation: [].concat(rotation),
-                            position: [].concat(resultPosition),
-                            html: sdkItem.html
+                            position: [].concat(resultPosition)
                         },
                         extension: extension
                     };
@@ -65562,7 +65580,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                         _this = this;
                         changeProeprty = function changeProeprty(targetCreateInfo) {
                             return _async_to_generator(function() {
-                                var currentCreateInfo;
+                                var currentCreateInfo, itemId;
                                 return _ts_generator(this, function(_state) {
                                     switch(_state.label){
                                         case 0:
@@ -65573,16 +65591,20 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                                     2
                                                 ];
                                             }
+                                            itemId = targetCreateInfo.id;
                                             return [
                                                 4,
                                                 this.setItemProperty({
-                                                    itemId: currentCreateInfo.id,
+                                                    itemId: itemId,
                                                     type: currentCreateInfo.type,
                                                     property: targetCreateInfo.property
                                                 })
                                             ];
                                         case 1:
                                             _state.sent();
+                                            if (targetCreateInfo.extension) {
+                                                this.setItemExtension(itemId, targetCreateInfo.extension);
+                                            }
                                             return [
                                                 2
                                             ];
@@ -65945,35 +65967,56 @@ var PageDataUtils = /*#__PURE__*/ function() {
     };
     _proto.asyncAddItemByCreateInfos = function asyncAddItemByCreateInfos(createInfos) {
         return _async_to_generator(function() {
-            var _this, createInfoWithIds, itemToTextureInfo, _iterator, _step, createInfo, id, type, url, textureId, toAddedCreateInfo, groupCreateInfos, frameCreateInfos, ids, composition, loadTexture;
+            var _loop, _this, createInfoWithIds, itemToTextureInfo, _iterator, _step, toAddedCreateInfo, groupCreateInfos, frameCreateInfos, ids, composition, loadTexture;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        _this = this;
-                        createInfoWithIds = createInfos.map(function(createInfo) {
-                            return Object.assign({}, createInfo, createInfo.id ? {} : {
-                                id: EFFECTS.generateGUID()
-                            });
-                        });
-                        itemToTextureInfo = new Map();
-                        // 预处理所有 createInfo，分配 textureId
-                        for(_iterator = _create_for_of_iterator_helper_loose(createInfoWithIds); !(_step = _iterator()).done;){
-                            createInfo = _step.value;
-                            id = createInfo.id;
-                            type = createInfo.type;
-                            url = type === SDKItemType.SPRITE ? createInfo.property.image : type === SDKItemType.VIDEO ? createInfo.property.video : undefined;
-                            if ((type === SDKItemType.SPRITE || type === SDKItemType.VIDEO) && url) {
-                                textureId = EFFECTS.generateGUID();
-                                itemToTextureInfo.set(id, {
+                        _loop = function() {
+                            var createInfo = _step.value;
+                            var _ref = function() {
+                                switch(createInfo.type){
+                                    case SDKItemType.SPRITE:
+                                        {
+                                            return {
+                                                url: createInfo.property.image,
+                                                type: 'image'
+                                            };
+                                        }
+                                    case SDKItemType.VIDEO:
+                                        {
+                                            return {
+                                                url: createInfo.property.video,
+                                                type: 'video'
+                                            };
+                                        }
+                                    default:
+                                        {
+                                            return {};
+                                        }
+                                }
+                            }(), url = _ref.url, type = _ref.type;
+                            if (url && type) {
+                                var textureId = EFFECTS.generateGUID();
+                                itemToTextureInfo.set(createInfo.id, {
                                     id: textureId,
                                     url: url,
-                                    type: type === SDKItemType.SPRITE ? 'image' : 'video'
+                                    type: type
                                 });
                                 Object.assign(createInfo, {
                                     textureId: textureId
                                 });
                             }
-                        }
+                        };
+                        _this = this;
+                        createInfoWithIds = createInfos.map(function(createInfo) {
+                            var _createInfo_id;
+                            return Object.assign({}, createInfo, {
+                                id: (_createInfo_id = createInfo.id) != null ? _createInfo_id : EFFECTS.generateGUID()
+                            });
+                        });
+                        itemToTextureInfo = new Map();
+                        // 预处理所有 createInfo，分配 textureId
+                        for(_iterator = _create_for_of_iterator_helper_loose(createInfoWithIds); !(_step = _iterator()).done;)_loop();
                         // 并行创建所有 item
                         toAddedCreateInfo = createInfoWithIds.filter(function(createInfo) {
                             return ![
@@ -66942,6 +66985,51 @@ var PageDataUtils = /*#__PURE__*/ function() {
    * @param id 元素id
    * @param size 目标大小 [width, height]
    * @param translation 位置偏移补偿（可选，用于保持拖拽角点固定）
+   */ _proto.resizeCardItem = function resizeCardItem(id, size, translation) {
+        var _frameController_children;
+        var frameItem = this.getSDKItem(id);
+        if (!frameItem) {
+            return;
+        }
+        var newWidth = size[0], newHeight = size[1];
+        // const originalWidth = frameItem.property.width
+        // 计算世界尺寸（供后续使用）
+        var viewSize = this.interactionUtils.getViewSizeByPixelSize(new Vector2(newWidth, newHeight));
+        var worldSize = this.interactionUtils.getWorldSizeByViewSize(viewSize).abs();
+        // 1 更新 Player 层的预合成和子元素
+        // 1.1 更新 Player Item（空节点控制器）的大小
+        var frameController = this.getPlayerItemById(id);
+        if (frameController) {
+            frameController.transform.setSize(worldSize.x, worldSize.y);
+            // 如果有位移，更新位置
+            if (translation && (translation.x !== 0 || translation.y !== 0)) {
+                var currentPosition = frameController.transform.position;
+                frameController.setPosition(currentPosition.x + translation.x, currentPosition.y + translation.y, currentPosition.z);
+            }
+        }
+        // 1.2 更新 Player Children Item 的大小
+        var subCompositionItem = frameController == null ? void 0 : (_frameController_children = frameController.children) == null ? void 0 : _frameController_children[0];
+        if (subCompositionItem && translation) {
+            // 更新子元素
+            subCompositionItem.children.forEach(function(item) {
+                var _item;
+                var _item_transform_getParentMatrix;
+                var parentMatrix = new Matrix4().copyFrom((_item_transform_getParentMatrix = item.transform.getParentMatrix()) != null ? _item_transform_getParentMatrix : new Matrix4());
+                parentMatrix.setPosition(new Vector3());
+                var result = translation.clone().applyMatrix(parentMatrix.invert()).negate();
+                (_item = item).translate.apply(_item, [].concat(result.toArray()));
+                item.transform.updateLocalMatrix();
+            });
+        }
+        // 2: 刷新 SDKItem 数据
+        // 更新 FrameItem 的 property
+        this.refreshSDKItem(frameItem.id);
+    };
+    /**
+   * @description 修改画板元素大小
+   * @param id 元素id
+   * @param size 目标大小 [width, height]
+   * @param translation 位置偏移补偿（可选，用于保持拖拽角点固定）
    */ _proto.resizeFrameItem = function resizeFrameItem(id, size, translation) {
         var _this = this;
         var _frameController_children;
@@ -83274,43 +83362,12 @@ var BaseConfig = {
         },
         cardConfig: {
             backgroundColor: [
-                0.6,
-                0.6,
-                0.6,
-                0.12
+                1,
+                1,
+                1,
+                0
             ],
-            cardTypes: [
-                {
-                    type: 'character',
-                    label: '角色图',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'environment',
-                    label: '环境图',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'storyboard',
-                    label: '分镜图',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'scene-clip',
-                    label: '场景剪辑',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'video-compose',
-                    label: '视频合成',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'video-generate',
-                    label: '生成视频',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                }
-            ]
+            cardTypes: []
         }
     }
 };
@@ -91639,11 +91696,18 @@ function isCardHTMLAutoHeightMessage(data, id) {
     var message = data;
     return message.source === 'vvfx-card-html-auto-height' && message.id === id && typeof message.height === 'number';
 }
+function requestCardHTMLAutoHeight(iframe, id) {
+    var _iframe_contentWindow;
+    (_iframe_contentWindow = iframe.contentWindow) == null ? void 0 : _iframe_contentWindow.postMessage({
+        source: 'vvfx-card-html-auto-height-request',
+        id: id
+    }, '*');
+}
 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 getChildrenHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.children).reduce((height, child) => {\n      const rect = child.getBoundingClientRect();\n      return Math.max(height, rect.bottom + window.scrollY);\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const childHeight = getChildrenHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(Math.max(childHeight, 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('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      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>");
     }
@@ -91841,6 +91905,17 @@ function withCardHTMLViewportStyle(html) {
     return "<!doctype html><html><head>" + viewportStyle + "</head><body>" + html + "</body></html>";
 }
 
+function withCardHTMLAnchorNavigationGuard(html, allowAnchorNavigation) {
+    if (allowAnchorNavigation === true) {
+        return html;
+    }
+    var script = "\n<script data-vvfx-card-html-anchor-navigation-guard>\n(() => {\n  document.addEventListener('click', event => {\n    const target = event.target;\n    if (!(target instanceof Element)) {\n      return;\n    }\n\n    const anchor = target.closest('a[href]');\n    if (!anchor) {\n      return;\n    }\n\n    event.preventDefault();\n  }, true);\n})();\n</script>";
+    if (/<\/body>/i.test(html)) {
+        return html.replace(/<\/body>/i, "" + script + "</body>");
+    }
+    return "" + html + script;
+}
+
 function renderDocumentContent(overlay, content, options) {
     var _files_get;
     var iframe = document.createElement('iframe');
@@ -91859,7 +91934,7 @@ function renderDocumentContent(overlay, content, options) {
         iframe.setAttribute('sandbox', content.sandbox);
     }
     var entryHtml = (_files_get = files.get(entry)) != null ? _files_get : '';
-    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), options == null ? void 0 : options.autoHeightId);
+    iframe.srcdoc = withCardHTMLAutoHeightBridge(withCardHTMLAnchorNavigationGuard(withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl)), content.allowAnchorNavigation), options == null ? void 0 : options.autoHeightId);
     overlay.appendChild(iframe);
     return function() {
         messageCleanup();
@@ -91916,30 +91991,38 @@ function syncElementStackOrder(_container, elements) {
     });
 }
 
-function getCardOverlayBoxStyle(box, width, height, offsetX, offsetY) {
+function getCardOverlayBoxStyle(box, width, height, offsetX, offsetY, _autoScale) {
     if (offsetX === void 0) offsetX = 0;
     if (offsetY === void 0) offsetY = 0;
     if (box.corners.length === 4 && width > 0 && height > 0) {
         var _box_corners = box.corners, rightTop = _box_corners[0], leftBottom = _box_corners[2], leftTop = _box_corners[3];
-        var a = (rightTop.x - leftTop.x) / width;
-        var b = (rightTop.y - leftTop.y) / width;
-        var c = (leftBottom.x - leftTop.x) / height;
-        var d = (leftBottom.y - leftTop.y) / height;
+        var contentWidth = width;
+        var contentHeight = height;
+        var a = (rightTop.x - leftTop.x) / contentWidth;
+        var b = (rightTop.y - leftTop.y) / contentWidth;
+        var c = (leftBottom.x - leftTop.x) / contentHeight;
+        var d = (leftBottom.y - leftTop.y) / contentHeight;
         var e = leftTop.x - offsetX;
         var f = leftTop.y - offsetY;
         return {
             left: '0px',
             top: '0px',
-            width: "" + width + "px",
-            height: "" + height + "px",
+            width: "" + formatPixelNumber(contentWidth) + "px",
+            height: "" + formatPixelNumber(contentHeight) + "px",
+            contentWidth: contentWidth,
+            contentHeight: contentHeight,
             transform: "matrix(" + formatMatrixNumber(a) + ", " + formatMatrixNumber(b) + ", " + formatMatrixNumber(c) + ", " + formatMatrixNumber(d) + ", " + formatMatrixNumber(e) + ", " + formatMatrixNumber(f) + ")"
         };
     }
+    var contentWidth1 = box.max.x - box.min.x;
+    var contentHeight1 = box.max.y - box.min.y;
     return {
         left: "" + (box.min.x - offsetX) + "px",
         top: "" + (box.min.y - offsetY) + "px",
-        width: "" + (box.max.x - box.min.x) + "px",
-        height: "" + (box.max.y - box.min.y) + "px",
+        width: "" + contentWidth1 + "px",
+        height: "" + contentHeight1 + "px",
+        contentWidth: contentWidth1,
+        contentHeight: contentHeight1,
         transform: ''
     };
 }
@@ -91962,6 +92045,10 @@ function formatMatrixNumber(value) {
     var normalized = Object.is(value, -0) ? 0 : value;
     return Number(normalized.toFixed(6)).toString();
 }
+function formatPixelNumber(value) {
+    var normalized = Object.is(value, -0) ? 0 : value;
+    return Number(normalized.toFixed(6)).toString();
+}
 
 function mountHTMLShell(container, content, shell) {
     if (!shell) {
@@ -91982,23 +92069,73 @@ function mountHTMLShell(container, content, shell) {
 
 var SHELL_INTERACTIVE_SELECTOR = '[data-vvfx-html-shell-interactive="true"]';
 var EDITING_INTERACTIVE_SELECTOR = '[data-vvfx-html-editing-interactive="true"]';
+var CONTENT_INTERACTIVE_SELECTOR = [
+    '[data-vvfx-html-interaction-zone="self"]',
+    '[data-vvfx-html-interaction-zone="subtree"]',
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    'summary',
+    'video[controls]',
+    'audio[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="textbox"]',
+    '[tabindex]:not([tabindex="-1"])'
+].join(', ');
+var CONTENT_INTERACTION_NONE_SELECTOR = [
+    '[data-vvfx-html-interaction-zone="none"]'
+].join(', ');
 var EDITING_VIEWPORT_PADDING = 48;
 var EDITING_VIEWPORT_BOX_SCALE = 1.1;
 var AUTO_HEIGHT_EPSILON = 0.5;
 var CARD_RASTERIZE_READY_TIMEOUT = 3000;
+var CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
+var requestHTMLOverlayFrame = function requestHTMLOverlayFrame(callback) {
+    if (typeof requestAnimationFrame === 'function') {
+        try {
+            return requestAnimationFrame(callback);
+        } catch (unused) {
+        // Some non-browser test runtimes install a RAF polyfill that depends on window.
+        }
+    }
+    return setTimeout(function() {
+        callback(Date.now());
+    }, 16);
+};
+var cancelHTMLOverlayFrame = function cancelHTMLOverlayFrame(frame) {
+    if (typeof cancelAnimationFrame === 'function') {
+        try {
+            cancelAnimationFrame(frame);
+            return;
+        } catch (unused) {
+        // Fall back to clearTimeout for frames created by requestHTMLOverlayFrame.
+        }
+    }
+    clearTimeout(frame);
+};
 var HTMLOverlayManager = /*#__PURE__*/ function() {
     function HTMLOverlayManager(options) {
         var _this = this;
         this.options = options;
         this.eventCleanups = [];
+        this.htmlRootConfigCleanups = new WeakMap();
         this.state = {
             frameElements: new Map(),
             elements: new Map(),
+            selectionElements: new Map(),
             contentScaleElements: new Map(),
             contentElements: new Map(),
             contentMountElements: new Map(),
+            contentInteractionZones: new Map(),
+            contentInteractionZoneCleanups: new Map(),
+            contentInteractionResizeCleanups: new Map(),
             contents: new Map(),
             cleanups: new Map(),
+            autoHeightModes: new Map(),
             autoHeightCleanups: new Map(),
             autoHeightFrames: new Map()
         };
@@ -92015,12 +92152,18 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 }
                 return;
             }
+            if (!_this.isEditableCard(targetId)) {
+                return;
+            }
             event.preventDefault();
             event.stopPropagation();
             _this.enterEditing(targetId);
         };
         this.handleContainerMouseDown = function(event) {
             var _this_state_editing;
+            if (event.button === 0) {
+                _this.selectHTMLInteractionCard(event);
+            }
             var editingId = (_this_state_editing = _this.state.editing) == null ? void 0 : _this_state_editing.id;
             if (!editingId || _this.isEventInsideOverlay(editingId, event)) {
                 return;
@@ -92030,6 +92173,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             _this.exitEditing();
         };
         this.handleContainerMouseMove = function(event) {
+            _this.scheduleActiveContentInteractionSync(event);
             var hoverShellInteractiveId = _this.getHoverShellInteractiveIdByEvent(event);
             if (_this.state.hoverShellInteractiveId === hoverShellInteractiveId) {
                 return;
@@ -92043,7 +92187,16 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 _this.syncContentInteraction(hoverShellInteractiveId);
             }
         };
-        this.handleContainerMouseLeave = function() {
+        this.handleContainerMouseLeave = function(event) {
+            if (_this.isMouseLeaveWithinContainer(event)) {
+                return;
+            }
+            if (_this.contentInteractionFrame !== undefined) {
+                cancelHTMLOverlayFrame(_this.contentInteractionFrame);
+                _this.contentInteractionFrame = undefined;
+            }
+            _this.pendingContentInteractionEvent = undefined;
+            _this.setActiveContentInteraction(undefined);
             var previousId = _this.state.hoverShellInteractiveId;
             if (!previousId) {
                 return;
@@ -92051,6 +92204,33 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             _this.state.hoverShellInteractiveId = undefined;
             _this.syncContentInteraction(previousId);
         };
+        this.handleContainerContextMenu = function(event) {
+            var activeInteraction = _this.state.activeContentInteraction;
+            if (!activeInteraction || !_this.isEventInsideOverlay(activeInteraction.id, event) || _this.isHTMLContextMenuEvent(event)) {
+                return;
+            }
+            var canvas = _this.options.getCanvasEventTarget == null ? void 0 : _this.options.getCanvasEventTarget.call(_this.options);
+            if (!canvas) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            _this.setActiveContentInteraction(undefined);
+            canvas.dispatchEvent(new MouseEvent('contextmenu', {
+                bubbles: true,
+                cancelable: true,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                screenX: event.screenX,
+                screenY: event.screenY,
+                button: event.button,
+                buttons: event.buttons,
+                ctrlKey: event.ctrlKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+                metaKey: event.metaKey
+            }));
+        };
         this.isAutoHeightMessage = isCardHTMLAutoHeightMessage;
     }
     var _proto = HTMLOverlayManager.prototype;
@@ -92064,7 +92244,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         layer.style.position = 'absolute';
         layer.style.inset = '0';
         layer.style.pointerEvents = 'none';
-        layer.style.zIndex = '1';
         container.appendChild(layer);
         this.state.layer = layer;
         this.initDOMEvents();
@@ -92074,25 +92253,41 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     _proto.dispose = function dispose() {
         var _this_state_layer;
         if (this.state.updateFrame !== undefined) {
-            cancelAnimationFrame(this.state.updateFrame);
+            cancelHTMLOverlayFrame(this.state.updateFrame);
             this.state.updateFrame = undefined;
         }
+        if (this.contentInteractionFrame !== undefined) {
+            cancelHTMLOverlayFrame(this.contentInteractionFrame);
+            this.contentInteractionFrame = undefined;
+        }
+        this.pendingContentInteractionEvent = undefined;
         this.state.cleanups.forEach(function(cleanup) {
             cleanup();
         });
         this.state.frameElements.clear();
         this.state.elements.clear();
+        this.state.selectionElements.clear();
         this.state.contentScaleElements.clear();
         this.state.contentElements.clear();
         this.state.contentMountElements.clear();
+        this.state.contentInteractionZones.clear();
+        this.state.contentInteractionZoneCleanups.forEach(function(cleanup) {
+            cleanup();
+        });
+        this.state.contentInteractionZoneCleanups.clear();
+        this.state.contentInteractionResizeCleanups.forEach(function(cleanup) {
+            cleanup();
+        });
+        this.state.contentInteractionResizeCleanups.clear();
         this.state.contents.clear();
         this.state.cleanups.clear();
+        this.state.autoHeightModes.clear();
         this.state.autoHeightCleanups.forEach(function(cleanup) {
             cleanup();
         });
         this.state.autoHeightCleanups.clear();
         this.state.autoHeightFrames.forEach(function(frame) {
-            cancelAnimationFrame(frame);
+            cancelHTMLOverlayFrame(frame);
         });
         this.state.autoHeightFrames.clear();
         this.eventCleanups.forEach(function(cleanup) {
@@ -92101,21 +92296,61 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.eventCleanups = [];
         (_this_state_layer = this.state.layer) == null ? void 0 : _this_state_layer.remove();
         this.state.layer = undefined;
+        this.state.selectionLayer = undefined;
         this.options.container.removeEventListener('dblclick', this.handleContainerDoubleClick, true);
         this.options.container.removeEventListener('mousedown', this.handleContainerMouseDown, true);
         this.options.container.removeEventListener('mousemove', this.handleContainerMouseMove, true);
         this.options.container.removeEventListener('mouseleave', this.handleContainerMouseLeave, true);
+        this.options.container.removeEventListener('contextmenu', this.handleContainerContextMenu, true);
     };
     _proto.scheduleRender = function scheduleRender() {
         var _this = this;
         if (this.state.updateFrame !== undefined) {
-            cancelAnimationFrame(this.state.updateFrame);
+            cancelHTMLOverlayFrame(this.state.updateFrame);
         }
-        this.state.updateFrame = requestAnimationFrame(function() {
+        this.state.updateFrame = requestHTMLOverlayFrame(function() {
             _this.state.updateFrame = undefined;
             _this.render();
         });
     };
+    _proto.invalidateCardHTML = function invalidateCardHTML(id) {
+        this.cleanupOverlayContent(id);
+        this.invalidateContentInteractionZones(id);
+    };
+    _proto.getHtmlCardWindow = function getHtmlCardWindow(id) {
+        var contentOverlay = this.state.contentElements.get(id);
+        var iframe = contentOverlay == null ? void 0 : contentOverlay.querySelector('iframe');
+        return iframe == null ? void 0 : iframe.contentWindow;
+    };
+    _proto.patchCardHTML = function patchCardHTML(id, patch) {
+        var html = this.state.contents.get(id);
+        if (!html) {
+            return false;
+        }
+        var patchHandler = html.content.patch;
+        if (!patchHandler) {
+            return false;
+        }
+        var context = this.createPatchContext(id, html);
+        return patchHandler(patch, context) !== false;
+    };
+    _proto.dispatchHtmlCardEvent = function dispatchHtmlCardEvent(id, type, detail) {
+        var targetWindow = this.getHtmlCardWindow(id);
+        try {
+            if (!targetWindow || typeof targetWindow.postMessage !== 'function') {
+                return false;
+            }
+            targetWindow.postMessage({
+                detail: detail,
+                payload: detail,
+                source: CARD_HTML_EVENT_MESSAGE_SOURCE,
+                type: type
+            }, '*');
+            return true;
+        } catch (unused) {
+            return false;
+        }
+    };
     _proto.rasterizeCard = function rasterizeCard(id, options) {
         return _async_to_generator(function() {
             var contentOverlay, capture, _ref, _options_pixelRatio, image, error;
@@ -92123,7 +92358,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 switch(_state.label){
                     case 0:
                         if (this.state.updateFrame !== undefined) {
-                            cancelAnimationFrame(this.state.updateFrame);
+                            cancelHTMLOverlayFrame(this.state.updateFrame);
                             this.state.updateFrame = undefined;
                         }
                         this.render();
@@ -92208,6 +92443,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var events = [
             'pageDataChange',
             'selectedItemChange',
+            'preSelectedItemChange',
             'itemPropertyChange',
             'viewportTransform',
             'viewRebuildFinish'
@@ -92217,6 +92453,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 if (event === 'viewportTransform') {
                     _this.handleViewportTransform();
                 }
+                _this.invalidateContentInteractionZones();
                 _this.scheduleRender();
             });
         });
@@ -92226,6 +92463,33 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.options.container.addEventListener('mousedown', this.handleContainerMouseDown, true);
         this.options.container.addEventListener('mousemove', this.handleContainerMouseMove, true);
         this.options.container.addEventListener('mouseleave', this.handleContainerMouseLeave, true);
+        this.options.container.addEventListener('contextmenu', this.handleContainerContextMenu, true);
+    };
+    _proto.selectHTMLInteractionCard = function selectHTMLInteractionCard(event) {
+        var decision = this.resolveHTMLInteractionTarget(event);
+        if (decision.kind !== 'html') {
+            return;
+        }
+        this.options.setSelectedItemIds([
+            decision.interaction.id
+        ]);
+    };
+    _proto.isMouseLeaveWithinContainer = function isMouseLeaveWithinContainer(event) {
+        var relatedTarget = event.relatedTarget;
+        if (!relatedTarget) {
+            return false;
+        }
+        try {
+            return this.options.container.contains(relatedTarget);
+        } catch (unused) {
+            return false;
+        }
+    };
+    _proto.isHTMLContextMenuEvent = function isHTMLContextMenuEvent(event) {
+        if (typeof Element !== 'function' || !_instanceof(event.target, Element)) {
+            return false;
+        }
+        return !!event.target.closest('[data-interaction-contextmenu="self"], [data-vvfx-html-contextmenu="self"]');
     };
     _proto.handleViewportTransform = function handleViewportTransform() {
         var editing = this.state.editing;
@@ -92245,11 +92509,16 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         var items = this.options.getItems();
         var frameByChildId = this.renderFrameOverlays(items, layer);
+        var selectionLayer = this.getOrCreateSelectionLayer(layer);
         var visibleCardIds = new Set();
         var editingVisible = false;
         items.forEach(function(item) {
             var _this_state_editing;
-            if (!isCardItem(item) || !item.visible || item.html === undefined) {
+            if (!isCardItem(item) || !item.visible) {
+                return;
+            }
+            var html = _this.options.resolveCardHTML(item);
+            if (html === undefined) {
                 return;
             }
             var itemBox = _this.options.getViewBoxById(item.id);
@@ -92264,21 +92533,32 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             var frameBox = frameId ? _this.options.getViewBoxById(frameId) : undefined;
             var overlay = _this.getOrCreateOverlay(item.id, parentOverlay, elements);
             var contentOverlay = _this.getOrCreateContentOverlay(item.id, overlay);
-            var html = item.html;
-            if (html && _this.state.contents.get(item.id) !== html) {
-                _this.renderOverlayHTML(item.id, contentOverlay, html);
-            }
+            var selectionOverlay = _this.getOrCreateSelectionOverlay(item.id, selectionLayer);
             var offsetX = frameBox && !frameBox.isEmpty() ? frameBox.min.x : 0;
             var offsetY = frameBox && !frameBox.isEmpty() ? frameBox.min.y : 0;
-            var boxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, offsetX, offsetY);
+            var boxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, offsetX, offsetY, _this.isAutoScaleEnabled(item));
+            _this.applyHTMLRootConfig(overlay, html);
             overlay.style.left = boxStyle.left;
             overlay.style.top = boxStyle.top;
             overlay.style.width = boxStyle.width;
             overlay.style.height = boxStyle.height;
             overlay.style.transform = boxStyle.transform;
             overlay.style.transformOrigin = '0 0';
-            _this.syncContentScale(item.id, item.property.width, item.property.height);
-            _this.syncAutoHeight(item.id, item.property.autoHeight === true);
+            var selectionBoxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, 0, 0, _this.isAutoScaleEnabled(item));
+            selectionOverlay.style.left = selectionBoxStyle.left;
+            selectionOverlay.style.top = selectionBoxStyle.top;
+            selectionOverlay.style.width = selectionBoxStyle.width;
+            selectionOverlay.style.height = selectionBoxStyle.height;
+            selectionOverlay.style.transform = selectionBoxStyle.transform;
+            selectionOverlay.style.transformOrigin = '0 0';
+            _this.applyHTMLRootConfig(selectionOverlay, html);
+            _this.makeSelectionOverlayTransparent(selectionOverlay);
+            _this.syncOverlaySelection(item.id, overlay, selectionOverlay);
+            _this.syncContentScale(item.id, boxStyle.contentWidth, boxStyle.contentHeight);
+            if (!_this.state.contents.has(item.id)) {
+                _this.renderOverlayHTML(item.id, contentOverlay, html);
+            }
+            _this.syncAutoHeight(item.id, _this.isAutoHeightEnabled(item));
             _this.syncContentInteraction(item.id);
         });
         elements.forEach(function(_overlay, id) {
@@ -92317,6 +92597,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             }
         }
         syncElementStackOrder(layer, rootElements);
+        if (this.state.selectionLayer) {
+            this.state.selectionLayer.style.zIndex = "" + (rootElements.length + 1);
+        }
         this.state.frameElements.forEach(function(frameOverlay, frameId) {
             var frameElements = [];
             for(var _iterator = _create_for_of_iterator_helper_loose(items), _step; !(_step = _iterator()).done;){
@@ -92332,6 +92615,28 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             syncElementStackOrder(frameOverlay, frameElements);
         });
     };
+    _proto.getOrCreateSelectionLayer = function getOrCreateSelectionLayer(layer) {
+        var _layer_ownerDocument;
+        if (this.state.selectionLayer) {
+            if (this.state.selectionLayer.parentElement !== layer) {
+                layer.appendChild(this.state.selectionLayer);
+            }
+            return this.state.selectionLayer;
+        }
+        var ownerDocument = (_layer_ownerDocument = layer.ownerDocument) != null ? _layer_ownerDocument : typeof document === 'undefined' ? undefined : document;
+        if (!ownerDocument) {
+            return layer;
+        }
+        var selectionLayer = ownerDocument.createElement('div');
+        selectionLayer.className = 'vvfx-card-html-overlay-selection-layer';
+        selectionLayer.style.position = 'absolute';
+        selectionLayer.style.inset = '0';
+        selectionLayer.style.pointerEvents = 'none';
+        selectionLayer.style.zIndex = '1';
+        layer.appendChild(selectionLayer);
+        this.state.selectionLayer = selectionLayer;
+        return selectionLayer;
+    };
     _proto.renderFrameOverlays = function renderFrameOverlays(items, layer) {
         var _this = this;
         var visibleFrameIds = new Set();
@@ -92396,6 +92701,41 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         elements.set(id, overlay);
         return overlay;
     };
+    _proto.getOrCreateSelectionOverlay = function getOrCreateSelectionOverlay(id, parent) {
+        var selectionOverlay = this.state.selectionElements.get(id);
+        if (selectionOverlay) {
+            if (selectionOverlay.parentElement !== parent) {
+                parent.appendChild(selectionOverlay);
+            }
+            return selectionOverlay;
+        }
+        selectionOverlay = document.createElement('div');
+        selectionOverlay.className = 'vvfx-card-html-overlay-selection';
+        selectionOverlay.dataset.itemId = id;
+        selectionOverlay.style.position = 'absolute';
+        selectionOverlay.style.pointerEvents = 'none';
+        selectionOverlay.style.zIndex = '1';
+        parent.appendChild(selectionOverlay);
+        this.state.selectionElements.set(id, selectionOverlay);
+        return selectionOverlay;
+    };
+    _proto.syncOverlaySelection = function syncOverlaySelection(id, overlay, selectionOverlay) {
+        var isSelected = this.options.getSelectedItemIds().includes(id);
+        var isPreSelected = !isSelected && this.options.getPreSelectedItemId() === id;
+        overlay.dataset.selected = isSelected ? 'true' : 'false';
+        overlay.dataset.preSelected = isPreSelected ? 'true' : 'false';
+        selectionOverlay.dataset.selected = isSelected ? 'true' : 'false';
+        selectionOverlay.dataset.preSelected = isPreSelected ? 'true' : 'false';
+        selectionOverlay.style.boxShadow = isSelected ? this.getSelectionBoxShadow() : isPreSelected ? this.getPreSelectionBoxShadow() : '';
+    };
+    _proto.getSelectionBoxShadow = function getSelectionBoxShadow() {
+        var _this_options_getSelectionEdgeStyle = this.options.getSelectionEdgeStyle(), color = _this_options_getSelectionEdgeStyle.color, alpha = _this_options_getSelectionEdgeStyle.alpha, width = _this_options_getSelectionEdgeStyle.width;
+        return "inset 0 0 0 " + formatCssNumber(width) + "px " + formatCssColor(color, alpha);
+    };
+    _proto.getPreSelectionBoxShadow = function getPreSelectionBoxShadow() {
+        var _this_options_getPreSelectionEdgeStyle = this.options.getPreSelectionEdgeStyle(), color = _this_options_getPreSelectionEdgeStyle.color, alpha = _this_options_getPreSelectionEdgeStyle.alpha, width = _this_options_getPreSelectionEdgeStyle.width;
+        return "inset 0 0 0 " + formatCssNumber(width) + "px " + formatCssColor(color, alpha);
+    };
     _proto.getHTMLCardIdByEvent = function getHTMLCardIdByEvent(event) {
         var layer = this.state.layer;
         if (!layer) {
@@ -92405,7 +92745,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var items = this.options.getItems();
         for(var i = items.length - 1; i >= 0; i--){
             var item = items[i];
-            if (!isCardItem(item) || !item.visible || item.html === undefined) {
+            if (!isCardItem(item) || !item.visible || this.options.resolveCardHTML(item) === undefined) {
                 continue;
             }
             var box = this.options.getViewBoxById(item.id);
@@ -92424,7 +92764,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var items = this.options.getItems();
         for(var i = items.length - 1; i >= 0; i--){
             var item = items[i];
-            if (!isCardItem(item) || !item.visible || item.html === undefined) {
+            if (!isCardItem(item) || !item.visible || this.options.resolveCardHTML(item) === undefined) {
                 continue;
             }
             var box = this.options.getViewBoxById(item.id);
@@ -92434,13 +92774,212 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             var contentOverlay = this.state.contentElements.get(item.id);
             var interactiveElements = contentOverlay ? Array.from(contentOverlay.querySelectorAll(SHELL_INTERACTIVE_SELECTOR)) : [];
             var isHoveringShellInteractive = interactiveElements.some(function(element) {
-                var rect = element.getBoundingClientRect();
-                return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+                return isMouseEventInsideRect(event, element.getBoundingClientRect());
             });
             return isHoveringShellInteractive ? item.id : undefined;
         }
         return undefined;
     };
+    _proto.syncActiveContentInteraction = function syncActiveContentInteraction(event) {
+        var decision = this.resolveHTMLInteractionTarget(event);
+        if (decision.kind === 'canvas' && this.shouldKeepActiveContentInteractionForFocusedElement()) {
+            return;
+        }
+        this.setActiveContentInteraction(decision.kind === 'html' ? decision.interaction : undefined);
+    };
+    _proto.scheduleActiveContentInteractionSync = function scheduleActiveContentInteractionSync(event) {
+        var _this = this;
+        if (typeof requestAnimationFrame !== 'function') {
+            this.syncActiveContentInteraction(event);
+            return;
+        }
+        this.pendingContentInteractionEvent = event;
+        if (this.contentInteractionFrame !== undefined) {
+            return;
+        }
+        try {
+            this.contentInteractionFrame = requestAnimationFrame(function() {
+                _this.contentInteractionFrame = undefined;
+                var pendingEvent = _this.pendingContentInteractionEvent;
+                _this.pendingContentInteractionEvent = undefined;
+                if (pendingEvent) {
+                    _this.syncActiveContentInteraction(pendingEvent);
+                }
+            });
+        } catch (unused) {
+            this.contentInteractionFrame = undefined;
+            this.pendingContentInteractionEvent = undefined;
+            this.syncActiveContentInteraction(event);
+        }
+    };
+    _proto.setActiveContentInteraction = function setActiveContentInteraction(zone) {
+        var _this = this;
+        var previous = this.state.activeContentInteraction;
+        if ((previous == null ? void 0 : previous.id) === (zone == null ? void 0 : zone.id) && (previous == null ? void 0 : previous.element) === (zone == null ? void 0 : zone.element) && (previous == null ? void 0 : previous.zone) === (zone == null ? void 0 : zone.zone)) {
+            return;
+        }
+        this.state.activeContentInteraction = zone;
+        var changedIds = new Set();
+        if (previous) {
+            changedIds.add(previous.id);
+        }
+        if (zone) {
+            changedIds.add(zone.id);
+        }
+        changedIds.forEach(function(id) {
+            _this.syncContentInteraction(id);
+        });
+    };
+    _proto.shouldKeepActiveContentInteractionForFocusedElement = function shouldKeepActiveContentInteractionForFocusedElement() {
+        var activeInteraction = this.state.activeContentInteraction;
+        if (!activeInteraction || typeof document === 'undefined') {
+            return false;
+        }
+        var activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return false;
+        }
+        var interactionElement = activeInteraction.element;
+        return interactionElement === activeElement || typeof interactionElement.contains === 'function' && interactionElement.contains(activeElement);
+    };
+    _proto.resolveHTMLInteractionTarget = function resolveHTMLInteractionTarget(event) {
+        var id = this.getHTMLCardIdByEvent(event);
+        if (!id || this.isEditableCard(id)) {
+            return {
+                kind: 'canvas',
+                id: id
+            };
+        }
+        var contentOverlay = this.state.contentElements.get(id);
+        if (!contentOverlay) {
+            return {
+                kind: 'canvas',
+                id: id
+            };
+        }
+        var activeSubtree = this.getActiveSubtreeInteractionAtEvent(id, event);
+        if (activeSubtree) {
+            return {
+                kind: 'html',
+                interaction: activeSubtree
+            };
+        }
+        var matchedZones = this.getContentInteractionZones(id, contentOverlay).filter(function(zone) {
+            return isMouseEventInsideRect(event, zone.rect);
+        });
+        var zone = this.resolveContentInteractionZone(matchedZones);
+        if (zone) {
+            return {
+                kind: 'html',
+                interaction: {
+                    id: id,
+                    element: zone.element,
+                    zone: zone.zone
+                }
+            };
+        }
+        return {
+            kind: 'canvas',
+            id: id
+        };
+    };
+    _proto.getActiveSubtreeInteractionAtEvent = function getActiveSubtreeInteractionAtEvent(id, event) {
+        var activeInteraction = this.state.activeContentInteraction;
+        if ((activeInteraction == null ? void 0 : activeInteraction.id) !== id || activeInteraction.zone !== 'subtree') {
+            return undefined;
+        }
+        var rect = activeInteraction.element.getBoundingClientRect();
+        return isMouseEventInsideRect(event, rect) ? activeInteraction : undefined;
+    };
+    _proto.resolveContentInteractionZone = function resolveContentInteractionZone(zones) {
+        if (zones.length <= 1) {
+            return zones[0];
+        }
+        var subtreeRoot = zones.find(function(candidate) {
+            return candidate.zone === 'subtree' && typeof candidate.element.contains === 'function' && zones.some(function(zone) {
+                return zone.element !== candidate.element && candidate.element.contains(zone.element);
+            });
+        });
+        return subtreeRoot != null ? subtreeRoot : zones[0];
+    };
+    _proto.getContentInteractionZones = function getContentInteractionZones(id, contentOverlay) {
+        var _this = this;
+        var cachedZones = this.state.contentInteractionZones.get(id);
+        if (cachedZones) {
+            return cachedZones;
+        }
+        var zones = Array.from(contentOverlay.querySelectorAll(this.getContentInteractiveSelector(id))).filter(function(element) {
+            return !_this.isContentInteractionDisabled(element);
+        }).map(function(element) {
+            return {
+                element: element,
+                rect: element.getBoundingClientRect(),
+                zone: _this.getContentInteractionZoneMode(element)
+            };
+        });
+        this.state.contentInteractionZones.set(id, zones);
+        this.observeContentInteractionZoneResizes(id, zones);
+        return zones;
+    };
+    _proto.getContentInteractiveSelector = function getContentInteractiveSelector(id) {
+        var _ref;
+        var _this_options_resolveCardTypeConfig_htmlInteractionSelectors, _this_options_resolveCardTypeConfig;
+        var item = this.options.getItems().find(function(item) {
+            return item.id === id;
+        });
+        if (!item) {
+            return CONTENT_INTERACTIVE_SELECTOR;
+        }
+        var selectors = (_ref = (_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : (_this_options_resolveCardTypeConfig_htmlInteractionSelectors = _this_options_resolveCardTypeConfig.htmlInteractionSelectors) == null ? void 0 : _this_options_resolveCardTypeConfig_htmlInteractionSelectors.filter(Boolean)) != null ? _ref : [];
+        if (selectors.length === 0) {
+            return CONTENT_INTERACTIVE_SELECTOR;
+        }
+        return [].concat([
+            CONTENT_INTERACTIVE_SELECTOR
+        ], selectors).join(', ');
+    };
+    _proto.isContentInteractionDisabled = function isContentInteractionDisabled(element) {
+        if (typeof element.closest !== 'function') {
+            return false;
+        }
+        return !!element.closest(CONTENT_INTERACTION_NONE_SELECTOR);
+    };
+    _proto.getContentInteractionZoneMode = function getContentInteractionZoneMode(element) {
+        var zone = element.dataset.vvfxHtmlInteractionZone;
+        return zone === 'subtree' ? 'subtree' : 'self';
+    };
+    _proto.invalidateContentInteractionZones = function invalidateContentInteractionZones(id) {
+        if (id) {
+            var _this_state_contentInteractionResizeCleanups_get;
+            this.state.contentInteractionZones.delete(id);
+            (_this_state_contentInteractionResizeCleanups_get = this.state.contentInteractionResizeCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionResizeCleanups_get();
+            this.state.contentInteractionResizeCleanups.delete(id);
+            return;
+        }
+        this.state.contentInteractionZones.clear();
+        this.state.contentInteractionResizeCleanups.forEach(function(cleanup) {
+            cleanup();
+        });
+        this.state.contentInteractionResizeCleanups.clear();
+    };
+    _proto.observeContentInteractionZoneResizes = function observeContentInteractionZoneResizes(id, zones) {
+        var _this = this;
+        var _this_state_contentInteractionResizeCleanups_get;
+        (_this_state_contentInteractionResizeCleanups_get = this.state.contentInteractionResizeCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionResizeCleanups_get();
+        this.state.contentInteractionResizeCleanups.delete(id);
+        if (zones.length === 0 || typeof ResizeObserver !== 'function') {
+            return;
+        }
+        var observer = new ResizeObserver(function() {
+            _this.invalidateContentInteractionZones(id);
+        });
+        zones.forEach(function(zone) {
+            observer.observe(zone.element);
+        });
+        this.state.contentInteractionResizeCleanups.set(id, function() {
+            observer.disconnect();
+        });
+    };
     _proto.getLayerPoint = function getLayerPoint(event) {
         var rect = this.options.container.getBoundingClientRect();
         return {
@@ -92497,19 +93036,35 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (!scaleOverlay || !contentOverlay || width <= 0 || height <= 0) {
             return;
         }
-        scaleOverlay.style.width = "" + width + "px";
-        scaleOverlay.style.height = "" + height + "px";
+        var nextWidth = "" + width + "px";
+        var nextHeight = "" + height + "px";
+        var sizeChanged = scaleOverlay.style.width !== nextWidth || scaleOverlay.style.height !== nextHeight;
+        scaleOverlay.style.width = nextWidth;
+        scaleOverlay.style.height = nextHeight;
         scaleOverlay.style.transform = 'none';
-        contentOverlay.style.width = "" + width + "px";
-        contentOverlay.style.height = "" + height + "px";
+        contentOverlay.style.width = nextWidth;
+        contentOverlay.style.height = nextHeight;
+        if (sizeChanged && this.state.autoHeightModes.get(id) === 'message') {
+            this.requestAutoHeightFromIframes(id, contentOverlay);
+        }
+        if (sizeChanged) {
+            this.invalidateContentInteractionZones(id);
+        }
+    };
+    _proto.requestAutoHeightFromIframes = function requestAutoHeightFromIframes(id, contentOverlay) {
+        contentOverlay.querySelectorAll('iframe').forEach(function(iframe) {
+            requestCardHTMLAutoHeight(iframe, id);
+        });
     };
     _proto.syncContentInteraction = function syncContentInteraction(id) {
-        var _this_state_editing;
+        var _this_state_editing, _this_state_activeContentInteraction;
         var isEditing = ((_this_state_editing = this.state.editing) == null ? void 0 : _this_state_editing.id) === id;
+        var activeInteraction = ((_this_state_activeContentInteraction = this.state.activeContentInteraction) == null ? void 0 : _this_state_activeContentInteraction.id) === id ? this.state.activeContentInteraction : undefined;
         var overlay = this.state.elements.get(id);
         var scaleOverlay = this.state.contentScaleElements.get(id);
         var contentOverlay = this.state.contentElements.get(id);
         var contentMount = this.state.contentMountElements.get(id);
+        var isInteractive = isEditing || !!activeInteraction;
         if (overlay) {
             overlay.dataset.editing = isEditing ? 'true' : 'false';
             overlay.style.pointerEvents = 'none';
@@ -92520,34 +93075,62 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         if (contentOverlay) {
             contentOverlay.dataset.editing = isEditing ? 'true' : 'false';
-            contentOverlay.style.pointerEvents = 'none';
+            contentOverlay.style.pointerEvents = isInteractive ? 'auto' : 'none';
             contentOverlay.querySelectorAll('iframe').forEach(function(iframe) {
-                iframe.style.pointerEvents = isEditing ? 'auto' : 'none';
-                iframe.tabIndex = isEditing ? 0 : -1;
+                var isActiveIframe = isEditing || (activeInteraction == null ? void 0 : activeInteraction.element) === iframe;
+                iframe.style.pointerEvents = isActiveIframe ? 'auto' : 'none';
+                iframe.tabIndex = isActiveIframe ? 0 : -1;
             });
-            this.syncShellInteraction(id, contentOverlay, isEditing);
+            this.syncShellInteraction(id, contentOverlay, isInteractive);
+            this.syncContentInteractionZones(id, contentOverlay, activeInteraction, isEditing, isInteractive);
         }
         if (contentMount) {
             contentMount.dataset.editing = isEditing ? 'true' : 'false';
-            contentMount.style.pointerEvents = isEditing ? 'auto' : 'none';
-            contentMount.inert = !isEditing;
-            if (isEditing) {
+            contentMount.style.pointerEvents = isInteractive ? 'auto' : 'none';
+            contentMount.inert = !isInteractive;
+            if (isInteractive) {
                 contentMount.removeAttribute('aria-hidden');
             } else {
                 contentMount.setAttribute('aria-hidden', 'true');
             }
         }
     };
-    _proto.syncShellInteraction = function syncShellInteraction(id, contentOverlay, isEditing) {
+    _proto.syncContentInteractionZones = function syncContentInteractionZones(id, contentOverlay, activeInteraction, isEditing, isInteractive) {
+        var _this = this;
+        var activeElement = activeInteraction == null ? void 0 : activeInteraction.element;
+        contentOverlay.querySelectorAll(this.getContentInteractiveSelector(id)).forEach(function(element) {
+            if ((activeInteraction == null ? void 0 : activeInteraction.zone) === 'subtree' && activeElement && element !== activeElement && typeof activeElement.contains === 'function' && activeElement.contains(element)) {
+                _this.clearContentInteractionState(element);
+                return;
+            }
+            if (!isInteractive) {
+                _this.clearContentInteractionState(element);
+                return;
+            }
+            if (_this.isContentInteractionDisabled(element)) {
+                element.dataset.vvfxHtmlInteractionActive = 'false';
+                element.style.pointerEvents = 'none';
+                return;
+            }
+            var isElementInteractive = isEditing || activeElement === element || (activeInteraction == null ? void 0 : activeInteraction.zone) === 'subtree' && typeof (activeElement == null ? void 0 : activeElement.contains) === 'function' && activeElement.contains(element);
+            element.dataset.vvfxHtmlInteractionActive = isElementInteractive ? 'true' : 'false';
+            element.style.pointerEvents = isElementInteractive ? 'auto' : 'none';
+        });
+    };
+    _proto.clearContentInteractionState = function clearContentInteractionState(element) {
+        delete element.dataset.vvfxHtmlInteractionActive;
+        element.style.pointerEvents = '';
+    };
+    _proto.syncShellInteraction = function syncShellInteraction(id, contentOverlay, isInteractive) {
         var isHoveringShellInteractive = this.state.hoverShellInteractiveId === id;
-        var isShellInteractiveActive = isEditing || isHoveringShellInteractive;
+        var isShellInteractiveActive = isInteractive || isHoveringShellInteractive;
         contentOverlay.querySelectorAll(SHELL_INTERACTIVE_SELECTOR).forEach(function(element) {
             element.dataset.vvfxHtmlShellInteractiveHover = isHoveringShellInteractive ? 'true' : 'false';
             element.dataset.vvfxHtmlShellInteractiveActive = isShellInteractiveActive ? 'true' : 'false';
             element.style.pointerEvents = isShellInteractiveActive ? 'auto' : 'none';
         });
         contentOverlay.querySelectorAll(EDITING_INTERACTIVE_SELECTOR).forEach(function(element) {
-            element.style.pointerEvents = isEditing ? 'auto' : 'none';
+            element.style.pointerEvents = isInteractive ? 'auto' : 'none';
         });
     };
     _proto.enterEditing = function enterEditing(id) {
@@ -92555,6 +93138,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (((_this_state_editing = this.state.editing) == null ? void 0 : _this_state_editing.id) === id) {
             return;
         }
+        if (!this.isEditableCard(id)) {
+            return;
+        }
         var box = this.options.getViewBoxById(id);
         if (box.isEmpty()) {
             return;
@@ -92598,6 +93184,13 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.options.setViewport(editing.restoreViewport);
         this.scheduleRender();
     };
+    _proto.isEditableCard = function isEditableCard(id) {
+        var _this_options_resolveCardTypeConfig;
+        var item = this.options.getItems().find(function(item) {
+            return item.id === id;
+        });
+        return isCardItem(item) && ((_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.editable) !== false;
+    };
     _proto.getEditingFitZoom = function getEditingFitZoom(box, currentZoom) {
         var viewportElement = this.options.container.parentElement;
         if (!viewportElement) {
@@ -92622,6 +93215,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     };
     _proto.renderOverlayHTML = function renderOverlayHTML(id, overlay, html) {
         this.cleanupOverlayContent(id);
+        this.invalidateContentInteractionZones(id);
         overlay.innerHTML = '';
         var shell = mountHTMLShell(overlay, html.content, html.shell);
         var autoHeightMeasureElement = shell.contentContainer.isConnected ? shell.contentContainer : overlay;
@@ -92631,18 +93225,99 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         });
         var contentCleanup = this.renderOverlayContent(shell.contentContainer, html.content, {
             id: id,
-            autoHeight: isCardItem(item) && item.property.autoHeight === true
+            autoHeight: this.isAutoHeightEnabled(item)
         });
+        this.observeContentInteractionZones(id, shell.contentContainer);
         this.state.cleanups.set(id, function() {
             contentCleanup == null ? void 0 : contentCleanup();
             shell.cleanup == null ? void 0 : shell.cleanup.call(shell);
         });
         this.state.contents.set(id, html);
     };
+    _proto.createPatchContext = function createPatchContext(id, html) {
+        var _this = this;
+        return {
+            id: id,
+            html: html,
+            content: html.content,
+            container: this.state.contentMountElements.get(id),
+            contentWindow: this.getHtmlCardWindow(id),
+            refresh: function refresh() {
+                _this.invalidateCardHTML(id);
+                _this.scheduleRender();
+            }
+        };
+    };
+    _proto.observeContentInteractionZones = function observeContentInteractionZones(id, contentContainer) {
+        var _this = this;
+        var _this_state_contentInteractionZoneCleanups_get;
+        (_this_state_contentInteractionZoneCleanups_get = this.state.contentInteractionZoneCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionZoneCleanups_get();
+        this.state.contentInteractionZoneCleanups.delete(id);
+        if (typeof MutationObserver !== 'function') {
+            return;
+        }
+        var observer = new MutationObserver(function() {
+            _this.invalidateContentInteractionZones(id);
+        });
+        observer.observe(contentContainer, {
+            attributes: true,
+            childList: true,
+            subtree: true
+        });
+        this.state.contentInteractionZoneCleanups.set(id, function() {
+            observer.disconnect();
+        });
+    };
+    _proto.applyHTMLRootConfig = function applyHTMLRootConfig(root, html) {
+        var _ref, _config_style;
+        var _this_htmlRootConfigCleanups_get, _config_className;
+        (_this_htmlRootConfigCleanups_get = this.htmlRootConfigCleanups.get(root)) == null ? void 0 : _this_htmlRootConfigCleanups_get();
+        this.htmlRootConfigCleanups.delete(root);
+        var config = html.root;
+        if (!config) {
+            return;
+        }
+        var classNames = (_ref = (_config_className = config.className) == null ? void 0 : _config_className.split(/\s+/).filter(Boolean)) != null ? _ref : [];
+        var styleProperties = [];
+        classNames.forEach(function(className) {
+            root.classList.add(className);
+        });
+        Object.entries((_config_style = config.style) != null ? _config_style : {}).forEach(function(param) {
+            var property = param[0], value = param[1];
+            if (value === undefined) {
+                return;
+            }
+            styleProperties.push(property);
+            if (property.startsWith('--') || property.includes('-')) {
+                root.style.setProperty(property, String(value));
+                return;
+            }
+            root.style[property] = String(value);
+        });
+        this.htmlRootConfigCleanups.set(root, function() {
+            classNames.forEach(function(className) {
+                root.classList.remove(className);
+            });
+            styleProperties.forEach(function(property) {
+                if (property.startsWith('--') || property.includes('-')) {
+                    root.style.removeProperty(property);
+                    return;
+                }
+                root.style[property] = '';
+            });
+        });
+    };
+    _proto.makeSelectionOverlayTransparent = function makeSelectionOverlayTransparent(selectionOverlay) {
+        selectionOverlay.style.background = 'transparent';
+        selectionOverlay.style.backgroundColor = 'transparent';
+    };
     _proto.renderOverlayContent = function renderOverlayContent(overlay, content, options) {
         var _this = this;
         switch(content.kind){
             case 'inline':
+                if (options == null ? void 0 : options.autoHeight) {
+                    this.state.autoHeightModes.set(options.id, 'message');
+                }
                 return this.chainCleanups(function() {
                     return content.cleanup == null ? void 0 : content.cleanup.call(content, overlay);
                 }, renderDocumentContent(overlay, {
@@ -92650,7 +93325,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                     entry: 'index.html',
                     files: {
                         'index.html': content.html
-                    }
+                    },
+                    allowAnchorNavigation: content.allowAnchorNavigation,
+                    sandbox: content.sandbox
                 }, {
                     autoHeightId: (options == null ? void 0 : options.autoHeight) ? options.id : undefined,
                     onAutoHeight: (options == null ? void 0 : options.autoHeight) ? function(height) {
@@ -92659,6 +93336,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 }));
             case 'dom':
                 {
+                    if (options == null ? void 0 : options.autoHeight) {
+                        this.state.autoHeightModes.set(options.id, 'measure');
+                    }
                     if (content.target === 'iframe') {
                         return renderDOMContentInIframe(overlay, content.render, content.cleanup);
                     }
@@ -92668,6 +93348,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                     } : undefined;
                 }
             case 'document':
+                if (options == null ? void 0 : options.autoHeight) {
+                    this.state.autoHeightModes.set(options.id, 'message');
+                }
                 return this.chainCleanups(function() {
                     return content.cleanup == null ? void 0 : content.cleanup.call(content, overlay);
                 }, renderDocumentContent(overlay, content, {
@@ -92695,6 +93378,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         };
     };
     _proto.cleanupOverlayContent = function cleanupOverlayContent(id) {
+        var _this_state_contentInteractionZoneCleanups_get;
         var cleanup = this.state.cleanups.get(id);
         if (cleanup) {
             cleanup();
@@ -92702,13 +93386,19 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         this.state.contents.delete(id);
         this.state.contentMountElements.delete(id);
+        this.state.autoHeightModes.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);
         this.cleanupAutoHeight(id);
     };
     _proto.removeOverlay = function removeOverlay(id) {
-        var _this_state_elements_get;
+        var _this_state_elements_get, _this_state_selectionElements_get;
         this.cleanupOverlayContent(id);
         (_this_state_elements_get = this.state.elements.get(id)) == null ? void 0 : _this_state_elements_get.remove();
+        (_this_state_selectionElements_get = this.state.selectionElements.get(id)) == null ? void 0 : _this_state_selectionElements_get.remove();
         this.state.elements.delete(id);
+        this.state.selectionElements.delete(id);
         this.state.contentScaleElements.delete(id);
         this.state.contentElements.delete(id);
     };
@@ -92717,11 +93407,27 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             this.cleanupAutoHeight(id);
             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));
         }
         this.scheduleAutoHeightMeasure(id);
     };
+    _proto.ensureAutoHeightMode = function ensureAutoHeightMode(id) {
+        var _this_state_contents_get;
+        if (this.state.autoHeightModes.has(id)) {
+            return;
+        }
+        var content = (_this_state_contents_get = this.state.contents.get(id)) == null ? void 0 : _this_state_contents_get.content;
+        if (!content) {
+            return;
+        }
+        this.state.autoHeightModes.set(id, content.kind === 'inline' || content.kind === 'document' ? 'message' : 'measure');
+    };
     _proto.createAutoHeightObserver = function createAutoHeightObserver(id) {
         var _this = this;
         var cleanupFns = [];
@@ -92799,7 +93505,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (this.state.autoHeightFrames.has(id)) {
             return;
         }
-        var frame = requestAnimationFrame(function() {
+        var frame = requestHTMLOverlayFrame(function() {
             _this.state.autoHeightFrames.delete(id);
             _this.measureAutoHeight(id);
         });
@@ -92809,7 +93515,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var item = this.options.getItems().find(function(candidate) {
             return candidate.id === id;
         });
-        if (!isCardItem(item) || item.property.autoHeight !== true) {
+        if (!this.isAutoHeightEnabled(item)) {
             this.cleanupAutoHeight(id);
             return;
         }
@@ -92828,7 +93534,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }).filter(function(height) {
             return typeof height === 'number' && Number.isFinite(height) && height > 0;
         });
-        var childHeight = this.getChildrenNaturalHeight(element);
+        var childHeight = this.getChildrenNaturalHeight(element, {
+            includeIframes: iframeHeights.length === 0
+        });
         var naturalHeight = (_Math = Math).max.apply(_Math, [].concat([
             childHeight
         ], iframeHeights));
@@ -92848,10 +93556,29 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         return Math.max(documentElement.scrollHeight, (_ref = body == null ? void 0 : body.scrollHeight) != null ? _ref : 0);
     };
-    _proto.getChildrenNaturalHeight = function getChildrenNaturalHeight(element) {
-        return Array.from(element.children).reduce(function(height, child) {
-            var childElement = child;
-            return Math.max(height, childElement.offsetTop + childElement.offsetHeight);
+    _proto.getChildrenNaturalHeight = function getChildrenNaturalHeight(element, options) {
+        var _ref;
+        var includeIframes = (_ref = options == null ? void 0 : options.includeIframes) != null ? _ref : true;
+        return Array.from(element.childNodes).reduce(function(height, child) {
+            var _child_textContent;
+            if (child.nodeType === Node.ELEMENT_NODE) {
+                var childElement = child;
+                if (!includeIframes && childElement.tagName === 'IFRAME') {
+                    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())) {
+                var range = element.ownerDocument.createRange();
+                range.selectNodeContents(child);
+                var rects = Array.from(range.getClientRects());
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                range.detach();
+                return rects.reduce(function(textHeight, rect) {
+                    return Math.max(textHeight, rect.bottom - element.getBoundingClientRect().top);
+                }, height);
+            }
+            return height;
         }, 0);
     };
     _proto.cleanupAutoHeight = function cleanupAutoHeight(id) {
@@ -92862,7 +93589,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         var frame = this.state.autoHeightFrames.get(id);
         if (frame !== undefined) {
-            cancelAnimationFrame(frame);
+            cancelHTMLOverlayFrame(frame);
             this.state.autoHeightFrames.delete(id);
         }
     };
@@ -92870,14 +93597,59 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var item = this.options.getItems().find(function(candidate) {
             return candidate.id === id;
         });
-        if (!isCardItem(item) || item.property.autoHeight !== true) {
+        if (!isCardItem(item) || !this.isAutoHeightEnabled(item)) {
+            return;
+        }
+        if (!Number.isFinite(height) || height <= 0) {
             return;
         }
-        if (!Number.isFinite(height) || height <= 0 || Math.abs(height - item.property.height) <= AUTO_HEIGHT_EPSILON) {
+        var nextHeight = Math.ceil(this.getAutoHeightItemHeight(item, height));
+        if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
-        this.options.setCardItemHeight(id, Math.ceil(height));
+        this.options.setCardItemHeight(id, nextHeight, {
+            anchor: this.getAutoHeightAnchor(item),
+            previousHeight: item.property.height
+        });
     };
+    _proto.getAutoHeightAnchor = function getAutoHeightAnchor(item) {
+        var _ref;
+        var _this_options_resolveCardTypeConfig;
+        if (!isCardItem(item)) {
+            return 'top';
+        }
+        return (_ref = (_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.autoHeightAnchor) != null ? _ref : 'top';
+    };
+    _proto.getAutoHeightItemHeight = function getAutoHeightItemHeight(item, contentHeight) {
+        if (!isCardItem(item) || this.isAutoScaleEnabled(item)) {
+            return contentHeight;
+        }
+        var scaleOverlay = this.state.contentScaleElements.get(item.id);
+        var displayedHeight = scaleOverlay ? Number.parseFloat(scaleOverlay.style.height) : 0;
+        if (!Number.isFinite(displayedHeight) || displayedHeight <= 0 || item.property.height <= 0) {
+            return contentHeight;
+        }
+        return contentHeight / displayedHeight * item.property.height;
+    };
+    _proto.isAutoHeightEnabled = function isAutoHeightEnabled(item) {
+        var _this_options_resolveCardTypeConfig;
+        return isCardItem(item) && ((_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.autoHeight) === true;
+    };
+    _proto.isAutoScaleEnabled = function isAutoScaleEnabled(item) {
+        var _this_options_resolveCardTypeConfig;
+        if (!isCardItem(item)) {
+            return true;
+        }
+        return ((_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.autoScale) !== false;
+    };
+    _create_class(HTMLOverlayManager, [
+        {
+            key: "layerElement",
+            get: function get() {
+                return this.state.layer;
+            }
+        }
+    ]);
     return HTMLOverlayManager;
 }();
 function waitForCardCaptureReady(root) {
@@ -92919,9 +93691,20 @@ function waitForCardCaptureReady(root) {
         });
     })();
 }
+function formatCssColor(color, alpha) {
+    var normalizedColor = Math.max(0, Math.min(0xFFFFFF, Math.round(color)));
+    var red = normalizedColor >> 16 & 0xFF;
+    var green = normalizedColor >> 8 & 0xFF;
+    var blue = normalizedColor & 0xFF;
+    return "rgba(" + red + ", " + green + ", " + blue + ", " + formatCssNumber(alpha) + ")";
+}
+function formatCssNumber(value) {
+    var normalized = Number.isFinite(value) ? value : 0;
+    return Number(normalized.toFixed(6)).toString();
+}
 function nextAnimationFrame() {
     return new Promise(function(resolve) {
-        requestAnimationFrame(function() {
+        requestHTMLOverlayFrame(function() {
             resolve();
         });
     });
@@ -93337,6 +94120,9 @@ function createFlattenedContent(target, frameStyle, ownerDocument) {
     });
     return replacement;
 }
+function isMouseEventInsideRect(event, rect) {
+    return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+}
 function createFlattenedIframeContent(iframe) {
     var doc = iframe.contentDocument;
     if (!doc) {
@@ -93376,6 +94162,19 @@ function withTimeout(promise, timeout) {
     });
 }
 
+function orderSDKCanvasLayers(param) {
+    var container = param.container, playerContainer = param.playerContainer, htmlOverlayLayer = param.htmlOverlayLayer, gestureCanvas = param.gestureCanvas;
+    [
+        playerContainer,
+        htmlOverlayLayer,
+        gestureCanvas
+    ].forEach(function(layer) {
+        if ((layer == null ? void 0 : layer.parentElement) === container) {
+            container.appendChild(layer);
+        }
+    });
+}
+
 var HTML_CARD_EDITING_VIEWPORT_PADDING = 48;
 var SDK = /*#__PURE__*/ function() {
     function SDK(container, mode) {
@@ -93474,16 +94273,72 @@ var SDK = /*#__PURE__*/ function() {
                     bottom: HTML_CARD_EDITING_VIEWPORT_PADDING
                 }, box);
             },
-            setCardItemHeight: function setCardItemHeight(id, height) {
+            setCardItemHeight: function setCardItemHeight(id, height, options) {
+                var item = _this.getSDKItem(id);
+                if (!isCardItem(item) || options.anchor === 'center') {
+                    void _this.setItemProperty({
+                        itemId: id,
+                        type: SDKItemType.CARD,
+                        propertyName: 'height',
+                        propertyValue: height
+                    });
+                    return;
+                }
+                var _item_property_position = item.property.position, x = _item_property_position[0], y = _item_property_position[1];
+                var deltaY = (height - options.previousHeight) / 2;
                 void _this.setItemProperty({
                     itemId: id,
                     type: SDKItemType.CARD,
-                    propertyName: 'height',
-                    propertyValue: height
+                    property: {
+                        height: height,
+                        position: [
+                            x,
+                            y + deltaY
+                        ]
+                    }
                 });
+            },
+            getSelectedItemIds: function getSelectedItemIds() {
+                var _ref;
+                var _this__pageData;
+                return (_ref = (_this__pageData = _this._pageData) == null ? void 0 : _this__pageData.activeData.selectedItems) != null ? _ref : [];
+            },
+            setSelectedItemIds: function setSelectedItemIds(ids) {
+                _this.setSelectedItems(ids);
+            },
+            getPreSelectedItemId: function getPreSelectedItemId() {
+                var _this__pageData;
+                return (_this__pageData = _this._pageData) == null ? void 0 : _this__pageData.activeData.preSelectedItem;
+            },
+            getSelectionEdgeStyle: function getSelectionEdgeStyle() {
+                var _SDK_config_gestureHandlerConfig_transformGizmoConfig = SDK.config.gestureHandlerConfig.transformGizmoConfig, wireframeColor = _SDK_config_gestureHandlerConfig_transformGizmoConfig.wireframeColor, wireframeAlpha = _SDK_config_gestureHandlerConfig_transformGizmoConfig.wireframeAlpha, wireframeWidth = _SDK_config_gestureHandlerConfig_transformGizmoConfig.wireframeWidth;
+                return {
+                    color: wireframeColor,
+                    alpha: wireframeAlpha,
+                    width: wireframeWidth
+                };
+            },
+            getPreSelectionEdgeStyle: function getPreSelectionEdgeStyle() {
+                var _SDK_config_gestureHandlerConfig_selectorGizmoConfig = SDK.config.gestureHandlerConfig.selectorGizmoConfig, preSelectedColor = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.preSelectedColor, preSelectedWidth = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.preSelectedWidth;
+                return {
+                    color: preSelectedColor,
+                    alpha: 1,
+                    width: preSelectedWidth
+                };
+            },
+            getCanvasEventTarget: function getCanvasEventTarget() {
+                var _this__gestureHandler;
+                return (_this__gestureHandler = _this._gestureHandler) == null ? void 0 : _this__gestureHandler.wireframeApplication.view;
+            },
+            resolveCardHTML: function resolveCardHTML(item) {
+                return isCardItem(item) ? _this.resolveCardHTML(item) : undefined;
+            },
+            resolveCardTypeConfig: function resolveCardTypeConfig(item) {
+                return isCardItem(item) ? _this.resolveCardTypeConfig(item) : undefined;
             }
         });
         this._htmlOverlayManager.attach();
+        this.syncCanvasLayerOrder();
     }
     var _proto = SDK.prototype;
     _proto.dispose = function dispose() {
@@ -93503,18 +94358,22 @@ var SDK = /*#__PURE__*/ function() {
     _proto.initPlayer = function initPlayer(mode) {
         var _this = this;
         var playerContainer = document.createElement('div');
-        var _ref = mode === 'editor' ? [
-            this._container.clientWidth,
-            this._container.clientHeight
-        ] : [
+        var _ref = mode === 'template' ? [
             this._container.offsetWidth,
             this._container.offsetHeight
+        ] : [
+            document.documentElement.clientWidth,
+            document.documentElement.clientHeight
         ], width = _ref[0], height = _ref[1];
         this._playerContainer = playerContainer;
         this._playerContainer.id = 'player-container';
         this._playerContainer.style.position = 'absolute';
         this._playerContainer.style.width = "" + width + "px";
         this._playerContainer.style.height = "" + height + "px";
+        if (mode === 'editor') {
+            this._playerContainer.style.left = '0px';
+            this._playerContainer.style.top = '0px';
+        }
         this._container.appendChild(playerContainer);
         this.player = new EFFECTS.Player({
             container: this._playerContainer,
@@ -93573,18 +94432,48 @@ var SDK = /*#__PURE__*/ function() {
             _this._gestureHandler.dispose();
             setTimeout(function() {
                 return _async_to_generator(function() {
+                    var itemExtension, _this_pageData, _this_pageData1, createInfos;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
                                 this.initPlayer(SDK.config.mode);
                                 this._pageDataUtils = new PageDataUtils(this.player, this._playerContainer, this._eventEmitter, this);
                                 this._gestureHandler = new GestureHandler(this._container);
+                                this.syncCanvasLayerOrder();
+                                itemExtension = {};
+                                if (!(SDK.config.mode === 'template')) return [
+                                    3,
+                                    2
+                                ];
+                                (_this_pageData = this.pageData) == null ? void 0 : _this_pageData.items.forEach(function(item) {
+                                    itemExtension[item.id] = item.getAllExtension();
+                                });
                                 return [
                                     4,
                                     this.runByPageData(this.pageData)
                                 ];
                             case 1:
                                 _state.sent();
+                                (_this_pageData1 = this.pageData) == null ? void 0 : _this_pageData1.items.forEach(function(item) {
+                                    var extension = itemExtension[item.id];
+                                    if (extension) {
+                                        item.setExtensions(extension);
+                                    }
+                                });
+                                return [
+                                    3,
+                                    4
+                                ];
+                            case 2:
+                                createInfos = this.getItemCreateInfos();
+                                return [
+                                    4,
+                                    this.runByCreateInfos(createInfos)
+                                ];
+                            case 3:
+                                _state.sent();
+                                _state.label = 4;
+                            case 4:
                                 this._eventEmitter.emit('viewRebuildFinish');
                                 return [
                                     2
@@ -93628,6 +94517,16 @@ var SDK = /*#__PURE__*/ function() {
             env: 'editor'
         });
         this.player.resize();
+        this.syncCanvasLayerOrder();
+    };
+    _proto.syncCanvasLayerOrder = function syncCanvasLayerOrder() {
+        var _this__htmlOverlayManager, _this__gestureHandler;
+        orderSDKCanvasLayers({
+            container: this._container,
+            playerContainer: this._playerContainer,
+            htmlOverlayLayer: (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.layerElement,
+            gestureCanvas: (_this__gestureHandler = this._gestureHandler) == null ? void 0 : _this__gestureHandler.wireframeApplication.view
+        });
     };
     _proto.getInitParam = function getInitParam(param) {
         return _async_to_generator(function() {
@@ -94424,6 +95323,55 @@ var SDK = /*#__PURE__*/ function() {
             });
         }).call(this);
     };
+    _proto.runByCreateInfos = function runByCreateInfos(createInfos) {
+        return _async_to_generator(function() {
+            var _this__pageData_activeData_view, _this__pageData_activeData_view1, viewSize, scene, targetViewProperty;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        EFFECTS.assertExist(this._pageData, 'You must call SDK#run() first');
+                        this._pageData.property.zoom = 1;
+                        this._pageData.property.translation = [
+                            0,
+                            0
+                        ];
+                        this._pageDataUtils.init();
+                        return [
+                            4,
+                            this._gestureHandler.init(this._pageDataUtils, this._eventEmitter)
+                        ];
+                    case 1:
+                        _state.sent();
+                        viewSize = [
+                            this._playerContainer.offsetWidth,
+                            this._playerContainer.offsetHeight
+                        ];
+                        scene = getBasicScene(viewSize);
+                        targetViewProperty = this.getViewProperty((_this__pageData_activeData_view = this._pageData.activeData.view) != null ? _this__pageData_activeData_view : 0);
+                        if (targetViewProperty) {
+                            targetViewProperty.scene = scene;
+                        }
+                        return [
+                            4,
+                            this._pageDataUtils.loadScene((_this__pageData_activeData_view1 = this._pageData.activeData.view) != null ? _this__pageData_activeData_view1 : 0)
+                        ];
+                    case 2:
+                        _state.sent();
+                        return [
+                            4,
+                            this.addItemByCreateInfos(createInfos)
+                        ];
+                    case 3:
+                        _state.sent();
+                        this._pageDataUtils.refreshPageTime(this._pageData.time);
+                        this._eventEmitter.emit('pageDataChange', this.pageData);
+                        return [
+                            2
+                        ];
+                }
+            });
+        }).call(this);
+    };
     _proto.reloadPageDataByScene = function reloadPageDataByScene(scene) {
         return _async_to_generator(function() {
             var _ref, _this__pageData_activeData_view, _ref1, _ref2, _loadScene_compositions_find, _this_player_getCompositions_, _this_player_getCompositions_1, loadScene, response, error;
@@ -94722,8 +95670,7 @@ var SDK = /*#__PURE__*/ function() {
    * @param ignoreClamp 是否忽视约束
    */ _proto.setPageZoom = function setPageZoom(zoom, center, ignoreClamp) {
         EFFECTS.assertExist(this._pageData);
-        this._pageData.property.zoom = zoom;
-        this._pageDataUtils.setPageZoom(this._pageData.property.zoom, center, ignoreClamp);
+        this._pageDataUtils.setPageZoom(zoom, center, ignoreClamp);
         this._gestureHandler.render();
     };
     /**
@@ -95119,7 +96066,11 @@ var SDK = /*#__PURE__*/ function() {
             return item.id;
         })) != null ? _ref : [];
         ids.forEach(function(id) {
-            var createInfo = _this._pageDataUtils.getItemCreateInfo(id, true);
+            var _this__pageDataUtils_getItemCreateInfo;
+            var _this_pageData_items_find, _this_pageData;
+            var createInfo = (_this__pageDataUtils_getItemCreateInfo = _this._pageDataUtils.getItemCreateInfo(id, true)) != null ? _this__pageDataUtils_getItemCreateInfo : (_this_pageData = _this.pageData) == null ? void 0 : (_this_pageData_items_find = _this_pageData.items.find(function(item) {
+                return item.id === id;
+            })) == null ? void 0 : _this_pageData_items_find.toCreateInfo(true);
             if (createInfo) {
                 createInfos.push(createInfo);
             }
@@ -95619,6 +96570,76 @@ var SDK = /*#__PURE__*/ function() {
         });
     };
     /**
+   * @description 按 cardType 从注册表解析卡片的 HTML 渲染配置。
+   * @param item 卡片元素
+   * @returns HTML 渲染配置
+   */ _proto.resolveCardHTML = function resolveCardHTML(item) {
+        var _cardTypeConfig_html;
+        var cardTypeConfig = this.resolveCardTypeConfig(item);
+        return cardTypeConfig == null ? void 0 : (_cardTypeConfig_html = cardTypeConfig.html) == null ? void 0 : _cardTypeConfig_html.call(cardTypeConfig, item);
+    };
+    /**
+   * @description 按 cardType 从注册表解析卡片类型配置。
+   * @param item 卡片元素
+   * @returns 卡片类型配置
+   */ _proto.resolveCardTypeConfig = function resolveCardTypeConfig(item) {
+        return SDK.config.itemConfig.cardConfig.cardTypes.find(function(t) {
+            return t.type === item.cardType;
+        });
+    };
+    /**
+   * @description 重新解析并挂载指定卡片的 HTML 内容。
+   * @description 当 inline/document 内容依赖 extension 或外部状态变化时，可调用此方法刷新 DOM。
+   * @param id 卡片元素 ID
+   * @returns 是否成功触发刷新
+   */ _proto.refreshCardHTML = function refreshCardHTML(id) {
+        var _this__htmlOverlayManager, _this__htmlOverlayManager1;
+        var item = this.getSDKItem(id);
+        if (!isCardItem(item)) {
+            console.warn('CardItem "' + id + '" not found.');
+            return false;
+        }
+        if (!this.resolveCardHTML(item)) {
+            console.warn('CardItem "' + id + '" has no registered HTML renderer.');
+            return false;
+        }
+        (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.invalidateCardHTML(id);
+        (_this__htmlOverlayManager1 = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager1.scheduleRender();
+        return true;
+    };
+    /**
+   * @description 获取指定 HTML 卡片当前 iframe 的 window。
+   * @description 仅 inline/document 或自行渲染 iframe 的 DOM 内容会返回 window。
+   * @param id 卡片元素 ID
+   * @returns HTML iframe window
+   */ _proto.getHtmlCardWindow = function getHtmlCardWindow(id) {
+        var _this__htmlOverlayManager;
+        return (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.getHtmlCardWindow(id);
+    };
+    /**
+   * @description 向指定 HTML 卡片发送增量 patch。
+   * @description 当卡片内容配置了 CardHTMLPatchHandler 时，可用于局部更新 HTML，而不必整卡 refresh。
+   * @param id 卡片元素 ID
+   * @param patch patch 负载，由卡片内容自己的 patch handler 解释
+   * @returns 是否被 patch handler 处理
+   */ _proto.patchCardHTML = function patchCardHTML(id, patch) {
+        var _ref;
+        var _this__htmlOverlayManager;
+        return (_ref = (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.patchCardHTML(id, patch)) != null ? _ref : false;
+    };
+    /**
+   * @description 向指定 HTML 卡片 iframe 派发事件。
+   * @description 通过 postMessage 投递事件，跨源/同源行为一致，消息 source 为 vvfx-card-html-event。
+   * @param id 卡片元素 ID
+   * @param type 事件名称
+   * @param detail 事件 detail
+   * @returns 是否成功派发或投递
+   */ _proto.dispatchHtmlCardEvent = function dispatchHtmlCardEvent(id, type, detail) {
+        var _ref;
+        var _this__htmlOverlayManager;
+        return (_ref = (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.dispatchHtmlCardEvent(id, type, detail)) != null ? _ref : false;
+    };
+    /**
    * @description 创建卡片元素
    * @description 底层以透明 SpriteItem 形式渲染，支持 cardType 属性
    * @param createInfo 卡片创建信息
@@ -95913,8 +96934,8 @@ SDK.config = BaseConfig;
     _inherits(CardItem, BaseItem);
     function CardItem(options) {
         var _this;
-        var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
-        var _options_property, _options_property1, _options_property2, _options_property3, _options_property4, _options_property5, _SDK_config_itemConfig_cardConfig_cardTypes_, _options_property6, _options_property7;
+        var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
+        var _options_property, _options_property1, _options_property2, _options_property3, _options_property4, _options_property5;
         _this = BaseItem.call(this, options) || this, /**
    * @description 元素类型
    */ _this.type = SDKItemType.CARD;
@@ -95935,9 +96956,7 @@ SDK.config = BaseConfig;
                 1,
                 1
             ],
-            cardType: (_ref5 = (_ref6 = (_options_property5 = options.property) == null ? void 0 : _options_property5.cardType) != null ? _ref6 : (_SDK_config_itemConfig_cardConfig_cardTypes_ = SDK.config.itemConfig.cardConfig.cardTypes[0]) == null ? void 0 : _SDK_config_itemConfig_cardConfig_cardTypes_.type) != null ? _ref5 : '',
-            autoHeight: (_options_property6 = options.property) == null ? void 0 : _options_property6.autoHeight,
-            html: (_options_property7 = options.property) == null ? void 0 : _options_property7.html
+            cardType: (_ref5 = (_options_property5 = options.property) == null ? void 0 : _options_property5.cardType) != null ? _ref5 : 'unknown'
         };
         return _this;
     }
@@ -95948,22 +96967,18 @@ SDK.config = BaseConfig;
    * @param withParent 是否包含父节点ID
    */ _proto.toCreateInfo = function toCreateInfo(withParent) {
         var extension = this.getAllExtension();
-        var property = deepClone(this.property);
-        property.html = this.html;
         return {
             type: SDKItemType.CARD,
             id: this.id,
             name: this.name,
             parentId: withParent ? this.parentId : undefined,
             extension: Object.keys(extension).length > 0 ? extension : undefined,
-            property: property
+            property: deepClone(this.property)
         };
     };
     /**
    * @description 克隆 SDKItem
    */ _proto.clone = function clone() {
-        var property = deepClone(this.property);
-        property.html = this.html;
         return new CardItem({
             id: EFFECTS.generateGUID(),
             name: this.name,
@@ -95973,7 +96988,7 @@ SDK.config = BaseConfig;
             endBehavior: this.endBehavior,
             isLocked: this.isLocked,
             isCoreEditable: this.isCoreEditable,
-            property: property,
+            property: deepClone(this.property),
             extension: this.getAllExtension()
         });
     };
@@ -95990,17 +97005,6 @@ SDK.config = BaseConfig;
                 this.property.cardType = value;
             }
         },
-        {
-            key: "html",
-            get: /**
-   * @description HTML 覆盖层配置
-   */ function get() {
-                return this.property.html;
-            },
-            set: function set(value) {
-                this.property.html = value;
-            }
-        },
         {
             key: "position",
             get: // ==================== 便捷访问器 ====================
@@ -96013,6 +97017,16 @@ SDK.config = BaseConfig;
                 this.property.position = value;
             }
         },
+        {
+            key: "isAutoScale",
+            get: function get() {
+                var _this = this;
+                var config = SDK.config.itemConfig.cardConfig.cardTypes.find(function(t) {
+                    return t.type === _this.cardType;
+                });
+                return (config == null ? void 0 : config.autoScale) !== false;
+            }
+        },
         {
             key: "width",
             get: /**