@vvfx/sdk 0.2.2 → 0.2.4

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.2
+ * 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) {
@@ -56603,6 +56625,10 @@ var cursorMap = {
         type: 'preset',
         content: 'crosshair'
     },
+    'box-select': {
+        type: 'preset',
+        content: 'crosshair'
+    },
     'text-rotation': {
         type: 'svg',
         content: 'default',
@@ -59661,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;
@@ -60429,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(),
@@ -60440,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) {
@@ -60484,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 {
@@ -60715,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() {
@@ -60971,7 +61004,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
    * @description 更新 PlayerItem 的 Property 属性
    */ _proto.updatePlayerItemPropertyAttribute = function updatePlayerItemPropertyAttribute(playerItem, targetItem, propertyName, propertyValue) {
         return _async_to_generator(function() {
-            var _this, _playerItem_getComponent, _playerItem_getComponent1, color, _array_, array, family, textComponent, textComponent1, lineCount, textHeight, _playerItem_getComponent2, textComponent2, textHeight1, textComponent3, outlineColor, textComponent4, textComponent5, textComponent6, originFontSize, lineCount1, textHeight2, textComponent7, textHeight3, viewSize, worldSizeX, originSize, originChildBoxes, originBox, worldScaleX, originScale, originWidth, currentWidth, ratio, originScale1, textComponent8, originChildBoxes1, originBox1, worldScaleY, originScale2, originHeight, currentHeight, ratio1, originScale3, viewSize1, worldSizeY, originSize1, textComponent9, textHeight4, _playerItem_getComponent3, _, _playerItem_getComponent4, _1, _propertyValue_compositions_find, _ref, subCompositionItem, compositionId, mainComposition, effectsSize, viewSize2, worldSize, compositionItem, component, videoComponent, videoComponent1, videoComponent2, pixelTranslation, viewTranslation, translation, rotation, currentScale, scaleRatio, frameComponent, _SDK_config_itemConfig_frameConfig, freeLayoutBackgroundColor, autoLayoutBackgroundColor, color1, childrenItem, time;
+            var _this, _playerItem_getComponent, _playerItem_getComponent1, color, _array_, array, family, textComponent, textComponent1, lineCount, textHeight, _playerItem_getComponent2, textComponent2, textHeight1, textComponent3, outlineColor, textComponent4, textComponent5, textComponent6, originFontSize, lineCount1, textHeight2, textComponent7, textHeight3, viewSize, worldSizeX, originSize, originChildBoxes, originBox, worldScaleX, originScale, originWidth, currentWidth, ratio, originScale1, textComponent8, originChildBoxes1, originBox1, worldScaleY, originScale2, originHeight, currentHeight, ratio1, originScale3, viewSize1, worldSizeY, originSize1, textComponent9, textHeight4, _playerItem_getComponent3, _, _playerItem_getComponent4, _1, _propertyValue_compositions_find, _ref, subCompositionItem, compositionId, mainComposition, effectsSize, viewSize2, worldSize, compositionItem, component, videoPlayStates, videoComponent, videoComponent1, videoComponent2, pixelTranslation, viewTranslation, translation, rotation, currentScale, scaleRatio, frameComponent, _SDK_config_itemConfig_frameConfig, freeLayoutBackgroundColor, autoLayoutBackgroundColor, color1, childrenItem, time, videoPlayStates1;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -61072,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:
                         {
@@ -61118,7 +61146,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 2:
@@ -61129,7 +61157,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 3:
@@ -61161,7 +61189,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 5:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 6:
                         {
@@ -61178,7 +61206,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 7:
@@ -61192,7 +61220,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 8:
@@ -61205,7 +61233,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 9:
@@ -61219,7 +61247,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 10:
@@ -61232,7 +61260,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 11:
@@ -61245,7 +61273,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 12:
@@ -61265,7 +61293,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 13:
@@ -61307,7 +61335,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 14:
@@ -61342,7 +61370,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 15:
@@ -61356,7 +61384,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 16:
@@ -61388,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 [
@@ -61419,7 +61447,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 25:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 26:
                         if (!(playerItem.type === EFFECTS.spec.ItemType.null)) return [
@@ -61459,12 +61487,15 @@ var PageDataUtils = /*#__PURE__*/ function() {
                         compositionItem.parentId = playerItem.getInstanceId();
                         component = compositionItem.components[0];
                         component == null ? void 0 : component.pause();
+                        // 刷新前快照视频播放态，刷新后恢复，避免更换特效导致全量视频被自动播放
+                        videoPlayStates = this.snapshotVideoPlayStates();
                         this.sdk.player.gotoAndPlay(0);
+                        this.restoreVideoPlayStates(videoPlayStates);
                         _state.label = 28;
                     case 28:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 29:
                         {
@@ -61476,7 +61507,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 30:
@@ -61489,7 +61520,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 31:
@@ -61502,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) {
@@ -61528,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) {
@@ -61542,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;
@@ -61559,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);
@@ -61572,10 +61593,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 37:
+                    case 36:
                         {
                             if (typeof propertyValue === 'boolean') {
                                 playerItem.setVisible(propertyValue);
@@ -61588,10 +61609,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 38:
+                    case 37:
                         {
                             console.log('ignore property name ', propertyName);
                             // 对于未明确处理的属性，尝试直接设置到 property 对象
@@ -61599,8 +61620,8 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                 targetItem.property[propertyName] = propertyValue;
                             }
                         }
-                        _state.label = 39;
-                    case 39:
+                        _state.label = 38;
+                    case 38:
                         // 非位置属性需要刷新播放器
                         // template 模式下保持暂停态以避免播放器自动播放，editor 模式继续推进
                         if (![
@@ -61609,11 +61630,14 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             'size'
                         ].includes(propertyName)) {
                             time = this.sdk.pageData.time;
+                            // 刷新前快照视频播放态，刷新后恢复，避免设置属性导致全量视频被自动播放
+                            videoPlayStates1 = this.snapshotVideoPlayStates();
                             if (SDK.config.mode === 'editor') {
                                 this.player.gotoAndPlay(time);
                             } else {
                                 this.player.gotoAndStop(time);
                             }
+                            this.restoreVideoPlayStates(videoPlayStates1);
                         }
                         return [
                             2
@@ -62480,6 +62504,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     }
                     break;
                 }
+            case 'cardType':
+                {
+                    break;
+                }
             default:
                 {
                     console.warn("Target property " + propertyName + " can not be changed.");
@@ -63072,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;
         }
@@ -63121,9 +63152,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                 width: width,
                 height: height,
                 scale: [].concat(scale),
-                cardType: cardType,
-                autoHeight: autoHeight,
-                html: html
+                cardType: cardType
             },
             extension: extension
         });
@@ -64505,8 +64534,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                 scalar.y
                             ],
                             rotation: [].concat(rotation),
-                            position: [].concat(resultPosition),
-                            html: sdkItem.html
+                            position: [].concat(resultPosition)
                         },
                         extension: extension
                     };
@@ -65552,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:
@@ -65563,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
                                             ];
@@ -65628,6 +65660,51 @@ var PageDataUtils = /*#__PURE__*/ function() {
         var result = box.clone().scale(scale, center).translate(translation);
         return result;
     };
+    /**
+   * @description 快照当前所有视频元素的播放状态（播放/暂停 + 当前播放进度），用于属性刷新后恢复，
+   *  避免设置属性导致全量视频被自动播放或进度被重置回 0s
+   */ _proto.snapshotVideoPlayStates = function snapshotVideoPlayStates() {
+        var states = new Map();
+        var composition = this.getCurrentComposition();
+        for(var _iterator = _create_for_of_iterator_helper_loose(composition.items), _step; !(_step = _iterator()).done;){
+            var item = _step.value;
+            if (item.type === EFFECTS.spec.ItemType.video) {
+                var videoComponent = item.getComponent(VideoComponent);
+                if (!videoComponent) {
+                    continue;
+                }
+                //@ts-expect-error @赤芍 played 字段未在类型中声明，参见 rebuildCompositionItems 处用法
+                var played = !!videoComponent.played;
+                var time = videoComponent.getCurrentTime();
+                states.set(item.getInstanceId(), {
+                    played: played,
+                    time: time
+                });
+            }
+        }
+        return states;
+    };
+    /**
+   * @description 按快照恢复视频元素的播放状态（先 pause 再 seek，最后按原状态 play/pause，避免进度抖动）
+   */ _proto.restoreVideoPlayStates = function restoreVideoPlayStates(states) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(states), _step; !(_step = _iterator()).done;){
+            var _step_value = _step.value, id = _step_value[0], _step_value_ = _step_value[1], played = _step_value_.played, time = _step_value_.time;
+            var playerItem = this.getPlayerItemById(id);
+            if ((playerItem == null ? void 0 : playerItem.type) !== EFFECTS.spec.ItemType.video) {
+                continue;
+            }
+            var videoComponent = playerItem.getComponent(VideoComponent);
+            if (!videoComponent) {
+                continue;
+            }
+            // 先暂停再 seek，避免播放状态下 seek 导致画面抖动
+            videoComponent.pauseVideo();
+            videoComponent.setCurrentTime(time);
+            if (played) {
+                videoComponent.playVideo();
+            }
+        }
+    };
     _proto.playVideoItem = function playVideoItem(id) {
         var playerItem = this.getPlayerItemById(id);
         if ((playerItem == null ? void 0 : playerItem.type) !== EFFECTS.spec.ItemType.video) {
@@ -65890,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 ![
@@ -66887,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;
@@ -67193,7 +67336,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
     };
     _proto.autoLayoutPage = function autoLayoutPage() {
         return _async_to_generator(function(param) {
-            var _this, pageData, _param_mode, mode, ids, _param_focus, focus, _param_gap, gap, isPartialLayout, targetItems, layoutElements, moveInfos, anchor, _iterator, _step, moveInfo, sdkItem;
+            var _this, pageData, _param_mode, mode, ids, _param_focus, focus, _param_gap, gap, shift, isPartialLayout, targetItems, layoutElements, moveInfos, anchor, _iterator, _step, moveInfo, sdkItem;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -67208,7 +67351,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                 2
                             ];
                         }
-                        _param_mode = param.mode, mode = _param_mode === void 0 ? SDK.config.pageConfig.autoLayoutDefaultMode : _param_mode, ids = param.ids, _param_focus = param.focus, focus = _param_focus === void 0 ? true : _param_focus, _param_gap = param.gap, gap = _param_gap === void 0 ? SDK.config.pageConfig.autoLayoutDefaultGap : _param_gap;
+                        _param_mode = param.mode, mode = _param_mode === void 0 ? SDK.config.pageConfig.autoLayoutDefaultMode : _param_mode, ids = param.ids, _param_focus = param.focus, focus = _param_focus === void 0 ? true : _param_focus, _param_gap = param.gap, gap = _param_gap === void 0 ? SDK.config.pageConfig.autoLayoutDefaultGap : _param_gap, shift = param.shift;
                         isPartialLayout = !!(ids == null ? void 0 : ids.length);
                         // 1. 确定参与排布的顶层元素（过滤子元素）
                         targetItems = pageData.items.filter(function(item) {
@@ -67237,7 +67380,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                         // 4. 计算锚点偏移
                         // - 选中元素排布：以原始包围盒左上角为锚点
                         // - 全量排布：以视口中心为锚点
-                        anchor = isPartialLayout ? this.getPartialLayoutAnchor(layoutElements, moveInfos.boundingBox) : this.getGlobalLayoutAnchor(moveInfos.boundingBox);
+                        anchor = isPartialLayout ? this.getPartialLayoutAnchor(layoutElements, moveInfos.boundingBox) : this.getGlobalLayoutAnchor(moveInfos.boundingBox, shift);
                         _iterator = _create_for_of_iterator_helper_loose(moveInfos.items);
                         _state.label = 1;
                     case 1:
@@ -67280,7 +67423,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                         if (focus) {
                             this.setPageZoom(1, undefined, true);
                             this.setPageMove(new Vector2());
-                            this.viewportFit(undefined, moveInfos.boundingBox.translate(anchor));
+                            this.viewportFit(shift, moveInfos.boundingBox.translate(anchor));
                         }
                         return [
                             2
@@ -67304,8 +67447,9 @@ var PageDataUtils = /*#__PURE__*/ function() {
     /**
    * @description 计算全量排布的锚点偏移：以视口中心为锚点
    * @param layoutBoundingBox 排布算法输出的包围盒
-   */ _proto.getGlobalLayoutAnchor = function getGlobalLayoutAnchor(layoutBoundingBox) {
-        var viewCenter = new Vector2(this.sdk._container.offsetWidth / 2, this.sdk._container.offsetHeight / 2);
+   */ _proto.getGlobalLayoutAnchor = function getGlobalLayoutAnchor(layoutBoundingBox, shift) {
+        var _ref = shift != null ? shift : {}, _ref_top = _ref.top, top = _ref_top === void 0 ? 0 : _ref_top, _ref_bottom = _ref.bottom, bottom = _ref_bottom === void 0 ? 0 : _ref_bottom, _ref_left = _ref.left, left = _ref_left === void 0 ? 0 : _ref_left, _ref_right = _ref.right, right = _ref_right === void 0 ? 0 : _ref_right;
+        var viewCenter = new Vector2(this.sdk._container.offsetWidth / 2 + left - right, this.sdk._container.offsetHeight / 2 + top - bottom);
         var boundCenter = layoutBoundingBox.getCenter();
         return new Vector2(viewCenter.x - boundCenter.x, viewCenter.y - boundCenter.y);
     };
@@ -68907,6 +69051,8 @@ var MaskGizmo = /*#__PURE__*/ function(Gizmo) {
    */ _this.maskSprite = null, _this._config = {}, _this.boxGraphics = new Graphics(), _this.type = 'mask', _this.mode = 'paint', /**
    * 蒙版工具独立的撤销重做实例
    */ _this._undoRedo = new GizmoUndoRedo(), /**
+   * 框选擦除进行中标记（按下到松开之间），用于实时选框描边的显示控制
+   */ _this._isBoxErasing = false, /**
    * 鼠标状态绘制结果
    */ _this.cursorResult = {
             type: 'normal',
@@ -68923,10 +69069,22 @@ var MaskGizmo = /*#__PURE__*/ function(Gizmo) {
     var _proto = MaskGizmo.prototype;
     /**
    * 设置模式
-   * @param mode 模式类型：'paint' 表示涂抹，'erase' 表示擦除
+   * @param mode 模式类型：'paint' 笔刷涂抹、'erase' 笔刷逐笔擦除、'box-erase' 框选擦除、'box-paint' 框选涂抹
    */ _proto.setMode = function setMode(mode) {
         this.mode = mode;
     };
+    /**
+   * @description 判断点是否在包围盒内
+   */ _proto._isPointInBox = function _isPointInBox(p, box) {
+        return p.x >= box.min.x && p.x <= box.max.x && p.y >= box.min.y && p.y <= box.max.y;
+    };
+    /**
+   * @description 将屏幕坐标转换为包围盒内的归一化坐标 [0,1]（钳制在范围内）
+   */ _proto._toNormalized = function _toNormalized(p, box) {
+        var x = Math.max(0, Math.min(1, (p.x - box.min.x) / (box.max.x - box.min.x)));
+        var y = Math.max(0, Math.min(1, (p.y - box.min.y) / (box.max.y - box.min.y)));
+        return new Vector2(x, y);
+    };
     _proto.initialize = function initialize() {};
     _proto.preparationAction = function preparationAction(event) {
         if (!this.interactive) {
@@ -68945,6 +69103,26 @@ var MaskGizmo = /*#__PURE__*/ function(Gizmo) {
         };
         // 更新鼠标位置
         this.result.point = new Vector2(event.offsetX, event.offsetY);
+        // 框选模式（框选擦除 / 框选涂抹）：仅在元素包围盒内按下才触发
+        if (this.mode === 'box-erase' || this.mode === 'box-paint') {
+            var box = this.result.box;
+            if (!box || !this._isPointInBox(this.result.point, box)) {
+                // 包围盒外按下：不触发框选，交由其它 gizmo
+                return undefined;
+            }
+            var start = this._toNormalized(this.result.point, box);
+            this.result.lines.push({
+                type: this.mode === 'box-paint' ? 'paint' : 'erase',
+                shape: 'rect',
+                brushSize: 0,
+                points: [
+                    start,
+                    start.clone()
+                ]
+            });
+            this._isBoxErasing = true;
+            return this.type;
+        }
         // 开启新画笔
         this.result.lines.push({
             type: this.mode,
@@ -68954,32 +69132,61 @@ var MaskGizmo = /*#__PURE__*/ function(Gizmo) {
         return this.type;
     };
     _proto.action = function action(event) {
-        var // 记录鼠标划线位置
-        _this_result_lines_;
         if (!this.interactive || this.result.status === 'init') {
             return;
         }
         // 更新鼠标位置
         var box = this.result.box;
-        var point = new Vector2((event.offsetX - box.min.x) / (box.max.x - box.min.x), (event.offsetY - box.min.y) / (box.max.y - box.min.y));
-        (_this_result_lines_ = this.result.lines[this.result.lines.length - 1]) == null ? void 0 : _this_result_lines_.points.push(point);
+        var point = new Vector2(event.offsetX, event.offsetY);
+        this.result.point = point;
+        var lastLine = this.result.lines[this.result.lines.length - 1];
+        // 框选擦除：更新框选终点（钳制到包围盒内）
+        if ((lastLine == null ? void 0 : lastLine.shape) === 'rect') {
+            lastLine.points[1] = this._toNormalized(point, box);
+            return;
+        }
+        // 记录鼠标划线位置（笔刷模式）
+        var np = new Vector2((event.offsetX - box.min.x) / (box.max.x - box.min.x), (event.offsetY - box.min.y) / (box.max.y - box.min.y));
+        lastLine == null ? void 0 : lastLine.points.push(np);
     };
     _proto.endAction = function endAction() {
         if (!this.interactive) {
             return undefined;
         }
-        // 记录操作到 undoRedo（仅当画线有实际点时才记录）
         var lastLine = this.result.lines[this.result.lines.length - 1];
+        // 框选擦除：起点==终点视为空框选，移除；否则提交 undoRedo
+        if ((lastLine == null ? void 0 : lastLine.shape) === 'rect') {
+            this._isBoxErasing = false;
+            var _lastLine_points = lastLine.points, a = _lastLine_points[0], b = _lastLine_points[1];
+            var isEmpty = !!a && !!b && a.x === b.x && a.y === b.y;
+            if (this._oldLines && !isEmpty) {
+                var operation = {
+                    type: 'update',
+                    oldData: this._oldLines,
+                    newData: {
+                        lines: JSON.parse(JSON.stringify(this.result.lines))
+                    }
+                };
+                this._undoRedo.push(operation);
+                this._eventEmitter.emit('maskGizmoUndoRedoChange', operation);
+            } else {
+                // 空框选移除
+                this.result.lines.pop();
+            }
+            this._oldLines = undefined;
+            return this.type;
+        }
+        // 记录操作到 undoRedo（仅当画线有实际点时才记录）
         if (this._oldLines && lastLine && lastLine.points.length > 0) {
-            var operation = {
+            var operation1 = {
                 type: 'update',
                 oldData: this._oldLines,
                 newData: {
                     lines: JSON.parse(JSON.stringify(this.result.lines))
                 }
             };
-            this._undoRedo.push(operation);
-            this._eventEmitter.emit('maskGizmoUndoRedoChange', operation);
+            this._undoRedo.push(operation1);
+            this._eventEmitter.emit('maskGizmoUndoRedoChange', operation1);
         } else if ((lastLine == null ? void 0 : lastLine.points.length) === 0) {
             // 如果没有实际绘制点，移除空的线条
             this.result.lines.pop();
@@ -69104,6 +69311,17 @@ var MaskGizmo = /*#__PURE__*/ function(Gizmo) {
         this.boxGraphics.lineStyle(boxLineWidth, boxLineColor, boxLineAlpha);
         this.boxGraphics.drawBox(box);
         this.boxGraphics.endFill();
+        // 框选擦除进行中：叠加当前拖动矩形的可视描边
+        var lastLine = this.result.lines[this.result.lines.length - 1];
+        if (this._isBoxErasing && (lastLine == null ? void 0 : lastLine.shape) === 'rect' && lastLine.points.length >= 2) {
+            var _lastLine_points = lastLine.points, a = _lastLine_points[0], b = _lastLine_points[1];
+            if (a && b) {
+                var selBox = new Box2(new Vector2(box.min.x + Math.min(a.x, b.x) * (box.max.x - box.min.x), box.min.y + Math.min(a.y, b.y) * (box.max.y - box.min.y)), new Vector2(box.min.x + Math.max(a.x, b.x) * (box.max.x - box.min.x), box.min.y + Math.max(a.y, b.y) * (box.max.y - box.min.y)));
+                this.boxGraphics.lineStyle(boxLineWidth, boxLineColor, boxLineAlpha);
+                this.boxGraphics.drawBox(selBox);
+                this.boxGraphics.endFill();
+            }
+        }
         // 1. 画线形（只用于遮罩，不直接显示
         for(var _iterator = _create_for_of_iterator_helper_loose(this.result.lines), _step; !(_step = _iterator()).done;){
             var line = _step.value;
@@ -69111,6 +69329,32 @@ var MaskGizmo = /*#__PURE__*/ function(Gizmo) {
                 continue;
             }
             var lineGraphics = new Graphics();
+            // 矩形框选：填充矩形，paint 用 NORMAL 叠加，erase 用 DST_OUT 抠除
+            if (line.shape === 'rect') {
+                var a1 = line.points[0];
+                var b1 = line.points[1];
+                if (a1 && b1) {
+                    var w = box.max.x - box.min.x;
+                    var h = box.max.y - box.min.y;
+                    var x0 = Math.min(a1.x, b1.x) * w;
+                    var y0 = Math.min(a1.y, b1.y) * h;
+                    var x1 = Math.max(a1.x, b1.x) * w;
+                    var y1 = Math.max(a1.y, b1.y) * h;
+                    // 太小（纯点击）不渲染，避免 1px 擦除/涂抹点
+                    if (x1 - x0 > 0.5 || y1 - y0 > 0.5) {
+                        lineGraphics.beginFill(brushColor);
+                        lineGraphics.drawRect(x0, y0, x1 - x0, y1 - y0);
+                        lineGraphics.endFill();
+                        lineGraphics.blendMode = line.type === 'paint' ? BLEND_MODES.NORMAL : BLEND_MODES.DST_OUT;
+                        this._app.renderer.render(lineGraphics, {
+                            renderTexture: this.maskRenderTexture,
+                            clear: false
+                        });
+                    }
+                }
+                lineGraphics.destroy();
+                continue;
+            }
             lineGraphics.blendMode = line.type === 'paint' ? BLEND_MODES.NORMAL : BLEND_MODES.DST_OUT;
             lineGraphics.lineStyle({
                 width: line.brushSize * viewportParam.scale,
@@ -69154,14 +69398,24 @@ var MaskGizmo = /*#__PURE__*/ function(Gizmo) {
         if (!point || !box) {
             return;
         }
-        if (point.x >= box.min.x && point.x <= box.max.x && point.y >= box.min.y && point.y <= box.max.y) {
-            var viewportParam = this._pageDataUtils.interactionUtils.viewportParam;
+        var inside = point.x >= box.min.x && point.x <= box.max.x && point.y >= box.min.y && point.y <= box.max.y;
+        if (!inside) {
+            return;
+        }
+        // 框选模式（框选擦除 / 框选涂抹）：crosshair
+        if (this.mode === 'box-erase' || this.mode === 'box-paint') {
             this.cursorResult = {
-                type: 'circle',
-                angle: 0,
-                radius: this.config.brushSize * viewportParam.scale / 2
+                type: 'box-select',
+                angle: 0
             };
+            return;
         }
+        var viewportParam = this._pageDataUtils.interactionUtils.viewportParam;
+        this.cursorResult = {
+            type: 'circle',
+            angle: 0,
+            radius: this.config.brushSize * viewportParam.scale / 2
+        };
     };
     _proto.close = function close() {
         this._config.maskImage = undefined;
@@ -69309,6 +69563,21 @@ var MaskGizmo = /*#__PURE__*/ function(Gizmo) {
             if (!line || line.points.length === 0) {
                 continue;
             }
+            // 矩形框选：填充矩形
+            if (line.shape === 'rect') {
+                var _line_points = line.points, a = _line_points[0], b1 = _line_points[1];
+                if (!a || !b1) {
+                    continue;
+                }
+                var x0 = Math.min(a.x, b1.x) * width;
+                var y0 = Math.min(a.y, b1.y) * height;
+                var x1 = Math.max(a.x, b1.x) * width;
+                var y1 = Math.max(a.y, b1.y) * height;
+                ctx.globalCompositeOperation = 'source-over';
+                ctx.fillStyle = line.type === 'paint' ? maskHexColor : maskBackgroundHexColor;
+                ctx.fillRect(x0, y0, Math.max(1, x1 - x0), Math.max(1, y1 - y0));
+                continue;
+            }
             ctx.lineWidth = line.brushSize * scale;
             ctx.lineCap = 'round';
             ctx.lineJoin = 'round';
@@ -71314,7 +71583,8 @@ var GestureHandler = /*#__PURE__*/ function() {
             'active-hand',
             'pointer',
             'text-create',
-            'frame-create'
+            'frame-create',
+            'box-select'
         ].includes(result.type)) {
             var cursor = cursorMap[result.type];
             if (cursor.type === 'svg') {
@@ -71486,6 +71756,7 @@ var GestureHandler = /*#__PURE__*/ function() {
             return;
         }
         this.maskGizmo.setMode(mode);
+        this.render();
     };
     _proto.openLoadingGizmo = function openLoadingGizmo(id, options) {
         var _this__emitter;
@@ -83091,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: []
         }
     }
 };
@@ -91456,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>");
     }
@@ -91658,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');
@@ -91676,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();
@@ -91733,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: ''
     };
 }
@@ -91779,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) {
@@ -91799,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()
         };
@@ -91832,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;
@@ -91847,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;
@@ -91860,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;
@@ -91868,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;
@@ -91881,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();
@@ -91891,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) {
@@ -91918,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;
@@ -91940,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();
@@ -92025,6 +92443,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var events = [
             'pageDataChange',
             'selectedItemChange',
+            'preSelectedItemChange',
             'itemPropertyChange',
             'viewportTransform',
             'viewRebuildFinish'
@@ -92034,6 +92453,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 if (event === 'viewportTransform') {
                     _this.handleViewportTransform();
                 }
+                _this.invalidateContentInteractionZones();
                 _this.scheduleRender();
             });
         });
@@ -92043,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;
@@ -92062,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);
@@ -92081,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) {
@@ -92134,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;){
@@ -92149,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();
@@ -92213,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) {
@@ -92222,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);
@@ -92241,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);
@@ -92251,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 {
@@ -92314,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';
@@ -92337,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) {
@@ -92372,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;
@@ -92415,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) {
@@ -92439,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;
@@ -92448,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, {
@@ -92467,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) {
@@ -92476,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);
                     }
@@ -92485,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, {
@@ -92512,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();
@@ -92519,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);
     };
@@ -92534,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 = [];
@@ -92616,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);
         });
@@ -92626,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;
         }
@@ -92645,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));
@@ -92665,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) {
@@ -92679,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);
         }
     };
@@ -92687,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) {
@@ -92736,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();
         });
     });
@@ -93154,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) {
@@ -93193,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) {
@@ -93291,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() {
@@ -93320,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,
@@ -93390,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
@@ -93445,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() {
@@ -94241,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;
@@ -94539,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();
     };
     /**
@@ -94780,7 +95910,7 @@ var SDK = /*#__PURE__*/ function() {
     };
     /**
    * @description 设置蒙版工具模式
-   * @param mode 模式类型：'paint' 表示涂抹，'erase' 表示擦除
+   * @param mode 模式类型：'paint' 笔刷涂抹、'erase' 笔刷逐笔擦除、'box-erase' 框选擦除、'box-paint' 框选涂抹
    */ _proto.setMaskGizmoMode = function setMaskGizmoMode(mode) {
         this._gestureHandler.setMaskGizmoMode(mode);
     };
@@ -94936,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);
             }
@@ -95436,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 卡片创建信息
@@ -95730,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;
@@ -95752,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;
     }
@@ -95765,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,
@@ -95790,7 +96988,7 @@ SDK.config = BaseConfig;
             endBehavior: this.endBehavior,
             isLocked: this.isLocked,
             isCoreEditable: this.isCoreEditable,
-            property: property,
+            property: deepClone(this.property),
             extension: this.getAllExtension()
         });
     };
@@ -95807,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: // ==================== 便捷访问器 ====================
@@ -95830,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: /**