@vvfx/artis 0.0.1-alpha.1 → 0.0.1-alpha.2

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: 智能画布
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.0.1-alpha.1
+ * Version: v0.0.1-alpha.2
  */
 
 function _define_property$1(obj, key, value) {
@@ -71092,6 +71092,29 @@ const textareaDefaultCssClass = `
         return this._editingItem !== undefined;
     }
     /**
+   * 选中当前编辑文本的全部内容，并将焦点交给输入框。
+   *
+   * 输入框尚未完成首次画布投影时会先保存全文选区，待投影打开后恢复。
+   * @returns 当前存在可编辑文本时返回 true
+   */ selectAllText() {
+        if (this._disposed) {
+            return false;
+        }
+        const textComponent = this._editingItem?.getComponent(TextComponent);
+        if (!textComponent) {
+            return false;
+        }
+        const textLength = this.textAreaElement.style.display === 'block' ? this.textAreaElement.value.length : (textComponent.text ?? '').length;
+        this._selectionStart = 0;
+        this._selectionEnd = textLength;
+        if (this.textAreaElement.style.display === 'block') {
+            this.textAreaElement.focus();
+            this.textAreaElement.select();
+            this.textAreaElement.scrollTop = 0;
+        }
+        return true;
+    }
+    /**
    * 使用当前单选文本元素开始编辑。
    * @param textareaType 文本框激活方式
    * @returns 是否成功开始编辑
@@ -71530,11 +71553,11 @@ const textareaDefaultCssClass = `
     /** 角点旋转工具。 */ GizmoType["CORNER_ROTATION"] = "corner-rotation";
     /** 选区缩放工具。 */ GizmoType["RESIZE_SELECTION"] = "resize-selection";
     /** 视口覆盖层。 */ GizmoType["VIEWPORT_OVERLAY"] = "viewport-overlay";
-    /** 图片裁切工具。 */ GizmoType["PICTURE_CUT"] = "picture-cut";
+    /** 图片裁切工具。 */ GizmoType["IMAGE_CUT"] = "image-cut";
     /** 文本编辑工具。 */ GizmoType["TEXT"] = "text";
     /** 蒙版编辑工具。 */ GizmoType["MASK"] = "mask";
     /** 加载状态工具。 */ GizmoType["LOADING"] = "loading";
-    /** 图片扩边工具。 */ GizmoType["PICTURE_EXPAND"] = "picture-expand";
+    /** 图片扩边工具。 */ GizmoType["IMAGE_EXPAND"] = "image-expand";
     /** 精准文字编辑工具。 */ GizmoType["SPRITE_TEXT_EDIT"] = "sprite-text-edit";
     /** 媒体图标工具。 */ GizmoType["ICON"] = "icon";
     /** 元素创建工具。 */ GizmoType["ITEM_CREATE"] = "item-create";
@@ -71678,95 +71701,311 @@ class GizmoViewportUtils {
         defaults: freezeConfigValue(cloneConfigValue(definition.defaults))
     });
 }
-/** 创建 VFXItem、挂载组件并加入合成的底层工厂。 */ class VFXItemFactory {
-    /**
-   * 创建并挂载 VFXItem。
-   * @param composition 目标合成
-   * @param parent 父元素
-   * @param name 元素名称
-   * @param types 待挂载的组件类型
-   * @returns 新建的 VFXItem
-   */ static createVFXItem(composition, parent = null, name = 'NewVFXItem', ...types) {
-        const vfxItem = new VFXItem(composition.engine);
-        vfxItem.name = name;
-        for (const type of types){
-            vfxItem.addComponent(type);
-        }
-        composition.addItem(vfxItem);
-        // @ts-expect-error rootComposition.items 的类型未公开受支持的写入操作。
-        composition.rootComposition.items.push(vfxItem);
-        if (parent) {
-            vfxItem.setParent(parent);
-        }
-        return vfxItem;
+const DEFAULT_LOADING_FRAGMENT = `
+// Shadertoy Fragment Shader
+// Diagonal background gradient + wider colorful transparent shimmer
+
+precision highp float;
+
+varying vec2 vUV;
+
+uniform vec4 _Time;
+
+// ------------------------------------------------------------
+// Background
+// ------------------------------------------------------------
+vec3 background(vec2 uv) {
+    vec3 topLeft     = vec3(0.88, 0.85, 1.00);
+    vec3 bottomRight = vec3(0.98, 0.98, 0.98);
+
+    float d = (uv.x + (1.0 - uv.y)) * 0.5;
+    d = smoothstep(0.0, 1.0, d);
+
+    vec3 col = mix(topLeft, bottomRight, d);
+
+    vec2 p1 = uv - vec2(1.13, 1.40);
+    float r1 = length(p1 / vec2(0.85, 0.85));
+    float g1 = 1.0 - smoothstep(0.0, 0.96, r1);
+    col += vec3(172.0/255.0, 183.0/255.0, 1.0) * g1 * 0.28;
+
+    vec2 p2 = uv - vec2(0.25, 0.23);
+    float r2 = length(p2 / vec2(0.74, 0.64));
+    float g2 = 1.0 - smoothstep(0.0, 1.0, r2);
+    col += vec3(147.0/255.0, 108.0/255.0, 1.0) * g2 * 0.10;
+
+    return col;
+}
+
+// ------------------------------------------------------------
+// Easing: slow at start, fast at end
+// ------------------------------------------------------------
+float easeInQuad(float x) {
+    return x * x;
+}
+
+// ------------------------------------------------------------
+// Color palette helper
+// ------------------------------------------------------------
+vec3 palette(float t) {
+    // 柔和的彩色条：蓝 -> 青 -> 紫 -> 粉 -> 蓝
+    vec3 a = vec3(0.62, 0.82, 1.00);
+    vec3 b = vec3(0.72, 0.95, 1.00);
+    vec3 c = vec3(0.83, 0.76, 1.00);
+    vec3 d = vec3(1.00, 0.82, 0.95);
+
+    t = fract(t);
+
+    if (t < 0.33) {
+        float k = smoothstep(0.0, 0.33, t);
+        return mix(a, b, k);
+    } else if (t < 0.66) {
+        float k = smoothstep(0.33, 0.66, t);
+        return mix(b, c, k);
+    } else {
+        float k = smoothstep(0.66, 1.0, t);
+        return mix(c, d, k);
     }
 }
-/** 创建内置类型 VFXItem 的便捷工厂。 */ class DefaultVFXItems {
-    /**
-   * 创建空元素。
-   * @param composition 目标合成
-   * @param parent 父元素
-   * @param name 元素名称
-   * @returns 新建的空元素
-   */ static createEmpty(composition, parent = null, name = 'NewVFXItem') {
-        const vfxItem = VFXItemFactory.createVFXItem(composition, parent, name);
-        vfxItem.type = index$1.ItemType.null;
-        return vfxItem;
+
+// ------------------------------------------------------------
+// Wider colorful transparent left-to-right shimmer
+// ------------------------------------------------------------
+vec4 shimmerBand(vec2 uv, float t) {
+    float cycle = fract(t * 0.70);
+    cycle = easeInQuad(cycle);
+
+    float x = cycle * 1.55 - 0.25;   // sweep from left to right
+
+    float d = abs(uv.x - x);
+    float band = 1.0 - smoothstep(0.0, 0.30, d);
+    float core = 1.0 - smoothstep(0.0, 0.10, d);
+
+    float x2 = x + (uv.y - 0.5) * 0.18;
+    float d2 = abs(uv.x - x2);
+    float band2 = 1.0 - smoothstep(0.0, 0.20, d2);
+
+    float s = max(band * 0.85, band2 * 0.60);
+    s = max(s, core * 0.95);
+    s = clamp(s, 0.0, 1.0);
+
+    // 颜色沿条带变化，模拟彩色渐变
+    float hueT = uv.y * 0.25 + uv.x * 0.60 + t * 0.10;
+    vec3 color1 = palette(hueT);
+
+    // 中间更亮一点，边缘更淡
+    vec3 color2 = mix(color1, vec3(1.0), core * 0.35);
+
+    return vec4(color2, s);
+}
+
+// ------------------------------------------------------------
+// Main
+// ------------------------------------------------------------
+void main() {
+    vec2 uv = vUV;
+
+    vec3 col = background(uv);
+
+    vec4 sh = shimmerBand(uv, _Time.y);
+
+    // 可选：增加一点柔光感
+    col += sh.rgb * sh.a * 0.06;
+
+    gl_FragColor = vec4(col, 1.0);
+}`;
+const loadingConfig = defineConfig({
+    id: 'feedback.loading',
+    defaults: {
+        loadingFragment: DEFAULT_LOADING_FRAGMENT
     }
-    /**
-   * 创建图片元素。
-   * @param composition 目标合成
-   * @param parent 父元素
-   * @param name 元素名称
-   * @returns 新建的图片元素
-   */ static createSprite(composition, parent = null, name = 'NewSprite') {
-        const vfxItem = VFXItemFactory.createVFXItem(composition, parent, name, SpriteComponent);
-        vfxItem.type = index$1.ItemType.sprite;
-        return vfxItem;
+});
+const viewportNavigationConfig = defineConfig({
+    id: 'viewport.navigation',
+    defaults: {
+        scrollWheelZoom: false,
+        invertZoom: false,
+        zoomStep: 0.1
     }
-    /**
-   * 创建文本元素。
-   * @param composition 目标合成
-   * @param parent 父元素
-   * @param name 元素名称
-   * @returns 新建的文本元素
-   */ static createText(composition, parent = null, name = 'NewText') {
-        const vfxItem = VFXItemFactory.createVFXItem(composition, parent, name, TextComponent);
-        vfxItem.type = index$1.ItemType.text;
-        return vfxItem;
+});
+const viewportOverlayConfig = defineConfig({
+    id: 'viewport.overlay',
+    defaults: {
+        boxColor: 0xFF0000,
+        boxWidth: 1,
+        outerMaskEnabled: true,
+        markColor: 0x000000,
+        markAlpha: 0.17,
+        safeAreaEnabled: true,
+        safeAreaBoxColor: 0x00FF00,
+        safeAreaBoxAlpha: 0.3
     }
-    /**
-   * 创建视频元素。
-   * @param composition 目标合成
-   * @param parent 父元素
-   * @param name 元素名称
-   * @returns 新建的视频元素
-   */ static createVideo(composition, parent = null, name = 'NewVideo') {
-        const vfxItem = VFXItemFactory.createVFXItem(composition, parent, name, VideoComponent);
-        vfxItem.type = index$1.ItemType.video;
-        return vfxItem;
+});
+const selectionPreviewConfig = defineConfig({
+    id: 'selection.preview',
+    defaults: {
+        videoPreSelectedPlay: true,
+        preSelectedColor: 0x3b82f6,
+        preSelectedWidth: 2,
+        regionBoxColor: 0x3b82f6,
+        regionBoxAlpha: 0.17,
+        regionWireframeColor: 0x3b82f6,
+        regionWireframeAlpha: 0.78,
+        regionWireframeWidth: 1
     }
-    /**
-   * 加载并创建特效合成元素。
-   * @param composition 目标合成
-   * @param effects 特效地址或场景数据
-   * @param parent 父元素
-   * @param urlname 元素名称
-   * @returns 新建的特效元素
-   */ static async createEffects(composition, effects, parent = null, urlname = 'NewEffects') {
-        const preComposition = await AssetManager$1.loadPrecomposition(effects, {
-            autoplay: false
-        });
-        const vfxItem = PrecompositionManager.instantiate(preComposition, composition);
-        vfxItem.name = urlname;
-        vfxItem.type = index$1.ItemType.composition;
-        vfxItem.getComponent(CompositionComponent).endBehavior = vfxItem.endBehavior;
-        if (parent) {
-            vfxItem.setParent(parent);
-        }
-        return vfxItem;
+});
+const selectionSnapConfig = defineConfig({
+    id: 'selection.snap',
+    defaults: {
+        enabled: true,
+        lineWidth: 0.8,
+        lineColor: 0x0BD6FF,
+        distance: 6
     }
-}
+});
+const resizeSelectionConfig = defineConfig({
+    id: 'resize-selection',
+    defaults: {
+        pixelRatio: 1,
+        contentRatio: 1,
+        wireframeColor: 0x3b82f6,
+        wireframeAlpha: 1,
+        wireframeWidth: 1.5,
+        cornerFillColor: 0xFFFFFF,
+        cornerLineColor: 0x3b82f6,
+        cornerLineWidth: 1.5,
+        cornerLineAlpha: 1,
+        scaleCircleSize: 4,
+        rotationCircleSize: 7,
+        infoShowEnabled: true,
+        sizeTextColor: 0x666666,
+        nameTextColor: 0x666666,
+        frameMoveLineColor: 0x3b82f6,
+        frameMoveLineWidth: 2,
+        imageLogoUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original',
+        groupLogoUrl: 'https://mdn.alipayobjects.com/huamei_ppzin5/afts/img/Yo69Sr7boqYAAAAAH3AAAAgADjdkAQFr/original',
+        textLogoUrl: 'https://mdn.alipayobjects.com/huamei_ppzin5/afts/img/Yo69Sr7boqYAAAAAH3AAAAgADjdkAQFr/original',
+        videoLogoUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*w1fnS4mq0VgAAAAAQCAAAAgAev-aAQ/original',
+        frameLogoUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*DRF_RpndkjUAAAAAQDAAAAgAev-aAQ/original',
+        effectsLogoUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*RMewR4ruUnYAAAAAQGAAAAgAev-aAQ/original'
+    }
+});
+const imageCutConfig = defineConfig({
+    id: 'tool.image-cut',
+    defaults: {
+        maskColor: 0xFFFFFF,
+        maskAlpha: 0.5,
+        cutBoxLineWidth: 2,
+        cutBoxLineColor: 0x6A34FF,
+        cutBoxLineAlpha: 1,
+        itemBoxLineWidth: 1,
+        itemBoxLineColor: 0x6A34FF,
+        itemBoxLineAlpha: 1,
+        cutBoxCornerRadius: 5,
+        cutBoxCornerFillColor: 0xFFFFFF,
+        cutBoxCornerLineWidth: 2,
+        cutBoxCornerLineColor: 0x6A34FF,
+        cutBoxCornerLineAlpha: 1,
+        scaleInteractionDistance: 8,
+        directionScaleInteractionDistance: 5,
+        gridLineWidth: 1,
+        gridLineColor: 0xFFFFFF,
+        gridLineAlpha: 1,
+        gridCount: 2
+    }
+});
+const imageExpandConfig = defineConfig({
+    id: 'tool.image-expand',
+    defaults: {
+        maskColor: 0x6A34FF,
+        maskAlpha: 0.2,
+        expandBoxLineWidth: 2,
+        expandBoxLineColor: 0x6A34FF,
+        expandBoxLineAlpha: 1,
+        expandBoxCornerRadius: 5,
+        expandBoxCornerLineWidth: 2,
+        expandBoxCornerLineColor: 0x6A34FF,
+        expandBoxCornerLineAlpha: 1,
+        expandBoxCornerFillColor: 0xFFFFFF,
+        scaleInteractionDistance: 8,
+        directionScaleInteractionDistance: 5,
+        gridLineWidth: 1,
+        gridLineColor: 0xFFFFFF,
+        gridLineAlpha: 1,
+        gridCount: 2
+    }
+});
+const maskConfig = defineConfig({
+    id: 'tool.mask',
+    defaults: {
+        maskImage: '',
+        brushSize: 20,
+        brushColor: 0x6A34FF,
+        brushAlpha: 0.5,
+        maskColor: 0x00FF00,
+        maskBackgroundColor: 0xFFFFFF,
+        maskAlpha: 1,
+        boxLineWidth: 1,
+        boxLineColor: 0x6A34FF,
+        boxLineAlpha: 1
+    }
+});
+const spriteTextEditConfig = defineConfig({
+    id: 'tool.sprite-text-edit',
+    defaults: {
+        textColor: 0xFFFFFF,
+        preSelectedTextColor: 0xFFFFFF,
+        boxLineWidth: 3,
+        dashLineDash: 8,
+        dashLineGap: 8,
+        editBoxAlpha: 0.15,
+        editBoxColor: 0x3B82F6,
+        editBoxLineAlpha: 1,
+        editBoxLineColor: 0x3B82F6,
+        editBoxPreSelectedAlpha: 0.25,
+        editBoxPreSelectedColor: 0x3B82F6,
+        editBoxLinePreSelectedAlpha: 1,
+        editBoxLinePreSelectedColor: 0x3B82F6,
+        hasChangedEditBoxAlpha: 0.2,
+        hasChangedEditBoxColor: 0x22C55E,
+        hasChangedEditBoxLineAlpha: 1,
+        hasChangedEditBoxLineColor: 0x22C55E,
+        hasChangedEditBoxPreSelectedAlpha: 0.3,
+        hasChangedEditBoxPreSelectedColor: 0x22C55E,
+        hasChangedEditBoxLinePreSelectedAlpha: 1,
+        hasChangedEditBoxLinePreSelectedColor: 0x22C55E,
+        editBoxSelectedAlpha: 0.6,
+        editBoxSelectedColor: 0xFFFF00
+    }
+});
+const iconConfig = defineConfig({
+    id: 'feedback.icon',
+    defaults: {
+        autoShow: true,
+        videoPlayUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*ORMmSYYHIHUAAAAAJbAAAAgAev-aAQ/original',
+        videoPlayShift: [
+            20,
+            20
+        ],
+        videoPlayWidth: 20,
+        videoPlayHeight: 20,
+        imageGeneratorUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*bYB-TIEWLBkAAAAAQGAAAAgAev-aAQ/original',
+        videoGeneratorUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*6cTFT44CuKEAAAAAQCAAAAgAev-aAQ/original',
+        generatorWidth: 200,
+        generatorHeight: 200
+    }
+});
+const itemCreateConfig = defineConfig({
+    id: 'tool.item-create',
+    defaults: {
+        frameBorderColor: 0x2178FF,
+        frameBorderWidth: 1,
+        frameBorderAlpha: 0.8,
+        frameFillColor: 0x2178FF,
+        frameFillAlpha: 0.15,
+        frameChildBoxAlpha: 0.35,
+        frameChildBoxColor: 0x2178FF
+    }
+});
 /**
  * 获取元素所在合成的相机视图投影矩阵。
  * @param item 播放器元素
@@ -71886,23 +72125,244 @@ class GizmoViewportUtils {
     return plane;
 }
 /**
- * 判断播放器元素是否为画板元素。
- * @param item 播放器元素
- * @returns 是否为画板元素
+ * 缩放视图。
+ * @param engine 引擎
+ * @param zoom 缩放值
+ * @param center 缩放中心
+ */ function zoomView(engine, zoom, center = new Vector2()) {
+    const composition = engine.compositions[0];
+    if (!composition) {
+        return;
+    }
+    const { camera } = composition;
+    const scale = camera.getViewportMatrix().elements[0];
+    const translation = new Vector2(camera.getViewportMatrix().elements[12], camera.getViewportMatrix().elements[13]);
+    const result = scale + zoom;
+    // 1. 反算缩放中心对应的世界坐标。
+    const worldX = (center.x - translation.x) / scale;
+    const worldY = (center.y - translation.y) / scale;
+    // 2. 调整平移，使缩放中心在屏幕上的位置保持不变。
+    const newNDCTranslation = new Vector2(center.x - worldX * result, center.y - worldY * result);
+    const viewportMatrix = new Matrix4().compose(new Vector3(newNDCTranslation.x, newNDCTranslation.y, 0), new Quaternion(), new Vector3(result, result, 1));
+    composition.camera.setViewportMatrix(viewportMatrix);
+}
+/**
+ * 平移视图。
+ * @param engine 引擎
+ * @param translation 位移值
+ */ function panView(engine, translation) {
+    const composition = engine.compositions[0];
+    if (!composition) {
+        return;
+    }
+    const { camera } = composition;
+    const scale = camera.getViewportMatrix().elements[0];
+    const resultTranslation = new Vector2(camera.getViewportMatrix().elements[12], camera.getViewportMatrix().elements[13]).add(translation);
+    const viewportMatrix = new Matrix4().compose(new Vector3(resultTranslation.x, resultTranslation.y, 0), new Quaternion(), new Vector3(scale, scale, 1));
+    camera.setViewportMatrix(viewportMatrix);
+}
+/** 统一处理手形工具和滚轮触发的视口平移与缩放。 */ class ViewportNavigationController extends EventEmitter {
+    /** 当前视口导航配置。 */ get config() {
+        return this._owner.getConfigManager().get(viewportNavigationConfig);
+    }
+    /** 当前 Effects 引擎。 */ get _engine() {
+        return this._owner.getEngine();
+    }
+    /**
+   * 设置允许的视口缩放范围。
+   * @param minScale 最小缩放
+   * @param maxScale 最大缩放
+   */ setScaleRange(minScale, maxScale) {
+        if (!Number.isFinite(minScale) || !Number.isFinite(maxScale) || minScale <= 0 || maxScale <= 0 || minScale > maxScale) {
+            throw new RangeError('Viewport scale range must be finite, positive, and ordered.');
+        }
+        this._minScale = minScale;
+        this._maxScale = maxScale;
+    }
+    /**
+   * 根据滚轮来源和修饰键执行平移或缩放。
+   * @param event 滚轮事件
+   * @param _pointerCaptured 指针是否已被捕获
+   * @returns 视口是否发生变化
+   */ handleWheel(event, _pointerCaptured) {
+        if (!this._hasViewport()) {
+            return false;
+        }
+        event.accept();
+        if (event.buttonMask !== MouseButtonMask.None) {
+            return false;
+        }
+        const { delta, source } = this._normalizeWheel(event);
+        const mode = this._classifyWheel(event, source);
+        const center = new Vector2(event.position.x, event.position.y);
+        if (mode === 'zoom') {
+            if (delta.y === 0) {
+                return false;
+            }
+            const direction = this.config.invertZoom ? -delta.y : delta.y;
+            const zoomStep = this.config.zoomStep;
+            const zoomShift = clamp(direction * 0.01, -zoomStep, zoomStep);
+            return this._zoomByShift(zoomShift, center, event.ctrlPressed && source === 'trackpad' ? 'pinch-zoom' : 'wheel-zoom');
+        }
+        if (delta.x === 0 && delta.y === 0) {
+            return false;
+        }
+        return this.panByViewDelta(delta, center, 'wheel-pan');
+    }
+    /**
+   * 按视图像素增量平移视口。
+   * @param delta 视图像素位移
+   * @param center 操作中心
+   * @param source 操作来源
+   * @returns 视口是否发生变化
+   */ panByViewDelta(delta, center, source) {
+        if (!this._hasViewport() || delta.x === 0 && delta.y === 0) {
+            return false;
+        }
+        const containerSize = this._containerSize();
+        if (containerSize.x <= 0 || containerSize.y <= 0) {
+            return false;
+        }
+        panView(this._engine, viewSizeToNDC(delta, containerSize));
+        this._emitChange(center, source);
+        return true;
+    }
+    /**
+   * 按倍率缩放视口。
+   * @param factor 缩放倍率
+   * @param center 缩放中心
+   * @param source 操作来源
+   * @returns 视口是否发生变化
+   */ zoomByFactor(factor, center, source) {
+        if (!this._hasViewport() || !Number.isFinite(factor) || factor <= 0) {
+            return false;
+        }
+        const currentScale = GizmoViewportUtils.getViewScale(this._engine);
+        const nextScale = clamp(currentScale * factor, this._minScale, this._maxScale);
+        if (nextScale === currentScale) {
+            return false;
+        }
+        const containerSize = this._containerSize();
+        if (containerSize.x <= 0 || containerSize.y <= 0) {
+            return false;
+        }
+        zoomView(this._engine, nextScale - currentScale, viewPositionToNDC(center, containerSize));
+        this._emitChange(center, source);
+        return true;
+    }
+    /** 释放配置订阅和事件监听器。 */ dispose() {
+        this._configOff?.();
+        this._configOff = undefined;
+        for (const listener of this.getListeners('change').slice()){
+            this.off('change', listener);
+        }
+    }
+    /**
+   * 根据滚轮来源和修饰键确定导航模式。
+   * @param event 滚轮事件
+   * @param source 输入设备类型
+   * @returns 滚轮导航模式
+   */ _classifyWheel(event, source) {
+        const signature = `${source}:${Number(event.ctrlPressed)}:${Number(event.metaPressed)}`;
+        if (signature !== this._wheelSignature) {
+            this._wheelSignature = signature;
+            this._wheelMode = event.ctrlPressed || event.metaPressed || source === 'mouse' && this.config.scrollWheelZoom ? 'zoom' : 'pan';
+        }
+        return this._wheelMode;
+    }
+    /**
+   * 将方向型滚轮事件转换为视图位移。
+   * @param event 滚轮事件
+   * @returns 视图位移和输入设备类型
+   */ _normalizeWheel(event) {
+        const delta = new Vector2();
+        switch(event.buttonIndex){
+            case MouseButton.WheelUp:
+                delta.y = event.factor;
+                break;
+            case MouseButton.WheelDown:
+                delta.y = -event.factor;
+                break;
+            case MouseButton.WheelLeft:
+                delta.x = event.factor;
+                break;
+            case MouseButton.WheelRight:
+                delta.x = -event.factor;
+                break;
+        }
+        // Windows 下 Shift + 滚轮映射为水平平移。
+        const isApplePlatform = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+        if (!isApplePlatform && event.shiftPressed && delta.x === 0) {
+            delta.x = delta.y;
+            delta.y = 0;
+        }
+        const source = event.ctrlPressed || event.metaPressed || !Number.isInteger(event.factor) || delta.x !== 0 ? 'trackpad' : 'mouse';
+        return {
+            delta,
+            source
+        };
+    }
+    /**
+   * 按绝对缩放增量更新视口。
+   * @param shift 缩放增量
+   * @param center 缩放中心
+   * @param source 操作来源
+   * @returns 视口是否发生变化
+   */ _zoomByShift(shift, center, source) {
+        const currentScale = GizmoViewportUtils.getViewScale(this._engine);
+        const nextScale = roundNumber(clamp(currentScale + shift, this._minScale, this._maxScale), 2);
+        if (nextScale === currentScale) {
+            return false;
+        }
+        return this.zoomByFactor(nextScale / currentScale, center, source);
+    }
+    /**
+   * 发出当前视口快照。
+   * @param center 操作中心
+   * @param source 操作来源
+   */ _emitChange(center, source) {
+        const containerSize = this._containerSize();
+        this.emit('change', {
+            source,
+            scale: GizmoViewportUtils.getViewScale(this._engine),
+            translation: ndcSizeToViewSize(GizmoViewportUtils.getViewportTranslation(this._engine), containerSize),
+            center: center.clone()
+        });
+    }
+    /** @returns 当前画布容器尺寸。 */ _containerSize() {
+        return GizmoViewportUtils.getContainerSize(this._engine.canvas.parentElement);
+    }
+    /** @returns 是否存在可操作的画布容器和相机。 */ _hasViewport() {
+        return Boolean(this._engine.canvas.parentElement && this._engine.compositions[0]?.camera);
+    }
+    /**
+   * @param owner Gizmo 宿主
+   */ constructor(owner){
+        super(), _define_property(this, "_owner", void 0), _define_property(this, "_minScale", 0.01), _define_property(this, "_maxScale", 20), _define_property(this, "_configOff", void 0), _define_property(this, "_wheelSignature", ''), _define_property(this, "_wheelMode", 'pan');
+        this._owner = owner;
+        this._configOff = owner.getConfigManager().onChange(viewportNavigationConfig, ()=>{
+            this._wheelSignature = '';
+        });
+    }
+}
+/**
+ * 判断播放器元素是否为画板元素。
+ * @param item 播放器元素
+ * @returns 是否为画板元素
  */ function isFramePlayerItem(item) {
     return item.type === index$1.ItemType.null && item.getComponent(FrameComponent) !== undefined && item.name === '画板';
 }
-/**
- * 判断播放器元素是否为特效元素。
- * @param item 播放器元素
- * @returns 是否为特效元素
+/**
+ * 判断播放器元素是否为特效元素。
+ * @param item 播放器元素
+ * @returns 是否为特效元素
  */ function isEffectsPlayerItem(item) {
     return item.type === index$1.ItemType.null && item.getComponent(FrameComponent) !== undefined && item.name === '特效';
 }
-/**
- * 判断播放器元素是否为生成器元素。
- * @param item 播放器元素
- * @returns 是否为生成器元素
+/**
+ * 判断播放器元素是否为生成器元素。
+ * @param item 播放器元素
+ * @returns 是否为生成器元素
  */ function isGeneratorPlayerItem(item) {
     if (item.type !== index$1.ItemType.sprite) {
         return false;
@@ -71921,18 +72381,95 @@ class GizmoViewportUtils {
     const content = item.definition?.content;
     return content?.generatorType === 'video' || content?.isVideoGenerator === true || item.name.includes('视频');
 }
-/**
- * 判断播放器元素是否为组元素。
- * @param item 播放器元素
- * @returns 是否为组元素
+/**
+ * 判断播放器元素是否为组元素。
+ * @param item 播放器元素
+ * @returns 是否为组元素
  */ function isGroupPlayerItem(item) {
     return item.type === index$1.ItemType.null && !item.getComponent(FrameComponent);
 }
-/**
- * 获取播放器元素的视图包围盒。
- * @param item 播放器元素
- * @param containerSize 视图大小
- * @returns 视图包围盒
+/**
+ * 获取播放器元素的所有子元素。
+ * @param item 播放器元素
+ * @returns 子元素数组
+ */ function getItemChildren(item) {
+    const children = [];
+    const isFrameItem = isFramePlayerItem(item);
+    const isEffectItem = isEffectsPlayerItem(item);
+    if (isEffectItem) {
+        return children;
+    }
+    /**
+   * 递归展开子元素。
+   * @param items 当前层子元素
+   * @returns 当前层及其全部后代
+   */ function getAllChildren(items) {
+        const result = [];
+        for (const child of items){
+            result.push(child);
+            if (child.children && child.children.length > 0) {
+                result.push(...getAllChildren(child.children));
+            }
+        }
+        return result;
+    }
+    if (isFrameItem) {
+        return getAllChildren(item.children);
+    } else if (item.children && item.children.length > 0) {
+        return getAllChildren(item.children);
+    }
+    return children;
+}
+/**
+ * 在合成元素树内按实例 ID 查找元素。
+ * @param composition 合成（无合成返回 undefined）
+ * @param id 元素 instanceId
+ * @returns 命中元素；未命中或无合成返回 undefined
+ */ function getPlayerItemById(composition, id) {
+    if (!composition) {
+        return undefined;
+    }
+    /**
+   * 在当前元素子树中递归查找实例。
+   * @param items 当前层元素。
+   * @param targetId 目标实例 ID。
+   * @returns 命中的元素。
+   */ const dfs = (items, targetId)=>{
+        for (const item of items){
+            if (item.getInstanceId() === targetId) {
+                return item;
+            }
+            const found = dfs(item.children, targetId);
+            if (found) {
+                return found;
+            }
+        }
+        return undefined;
+    };
+    return dfs(composition.items, id);
+}
+/**
+ * 过滤掉祖先也在列表中的元素，仅保留顶层元素。
+ * @param items 待过滤元素
+ * @returns 保持原顺序的顶层元素
+ */ function filterTopLevelPlayerItems(items) {
+    const selectedItems = new Set(items);
+    return items.filter((item)=>{
+        let parent = item.parent;
+        while(parent){
+            if (selectedItems.has(parent)) {
+                return false;
+            }
+            parent = parent.parent;
+        }
+        return true;
+    });
+}
+/**
+ * 获取播放器元素的视图包围盒。
+ * @param item 播放器元素
+ * @param containerSize 视图大小
+ * @returns 视图包围盒
  */ function getItemViewBox(item, containerSize) {
     // 1. 跳过不可见元素并收集子元素。
     const box = new Box2();
@@ -71985,21 +72522,21 @@ class GizmoViewportUtils {
     }
     return box;
 }
-/**
- * 获取播放器元素在视图中的锚点坐标。
- * @param item 播放器元素
- * @param containerSize 视图容器大小
- * @returns 视图锚点坐标
+/**
+ * 获取播放器元素在视图中的锚点坐标。
+ * @param item 播放器元素
+ * @param containerSize 视图容器大小
+ * @returns 视图锚点坐标
  */ function getItemViewAnchor(item, containerSize) {
     const anchor = item.transform.anchor ?? item.transform.position;
     const worldAnchor = new Vector3().copyFrom(anchor).applyMatrix(new Matrix4().copyFrom(item.transform.getWorldMatrix()));
     const viewAnchor = projectPoint(worldAnchor, item, containerSize).multiply(100).round().divide(100);
     return viewAnchor;
 }
-/**
- * 获取元素的变换矩阵和父级变换矩阵。
- * @param item 播放器元素
- * @returns 元素的变换矩阵和父级变换矩阵
+/**
+ * 获取元素的变换矩阵和父级变换矩阵。
+ * @param item 播放器元素
+ * @returns 元素的变换矩阵和父级变换矩阵
  */ function getItemTransform(item) {
     const transform = {
         matrix: new Matrix4(),
@@ -72013,43 +72550,11 @@ class GizmoViewportUtils {
     }
     return transform;
 }
-/**
- * 获取播放器元素的所有子元素。
- * @param item 播放器元素
- * @returns 子元素数组
- */ function getItemChildren(item) {
-    const children = [];
-    const isFrameItem = isFramePlayerItem(item);
-    const isEffectItem = isEffectsPlayerItem(item);
-    if (isEffectItem) {
-        return children;
-    }
-    /**
-   * 递归展开子元素。
-   * @param items 当前层子元素
-   * @returns 当前层及其全部后代
-   */ function getAllChildren(items) {
-        const result = [];
-        for (const child of items){
-            result.push(child);
-            if (child.children && child.children.length > 0) {
-                result.push(...getAllChildren(child.children));
-            }
-        }
-        return result;
-    }
-    if (isFrameItem) {
-        return getAllChildren(item.children);
-    } else if (item.children && item.children.length > 0) {
-        return getAllChildren(item.children);
-    }
-    return children;
-}
-/**
- * 获取元素在所属合成坐标系中的实际世界尺寸。
- *
- * `transform.size` 是元素本地尺寸；这里叠加元素到合成根之间的缩放，
- * 但排除合成本身的世界变换，与 Frame 尺寸写回使用的坐标系保持一致。
+/**
+ * 获取元素在所属合成坐标系中的实际世界尺寸。
+ *
+ * `transform.size` 是元素本地尺寸；这里叠加元素到合成根之间的缩放，
+ * 但排除合成本身的世界变换，与 Frame 尺寸写回使用的坐标系保持一致。
  * @param item 播放器元素
  * @returns 元素在所属合成坐标系中的尺寸
  */ function getItemWorldSize(item) {
@@ -72061,1256 +72566,432 @@ class GizmoViewportUtils {
     itemToComposition.decompose(new Vector3(), new Quaternion(), worldScale);
     return new Vector2(Math.abs(transform.size.x * worldScale.x), Math.abs(transform.size.y * worldScale.y));
 }
-/**
- * 在合成元素树内按实例 ID 查找元素。
- * @param composition 合成（无合成返回 undefined）
- * @param id 元素 instanceId
- * @returns 命中元素；未命中或无合成返回 undefined
- */ function getPlayerItemById(composition, id) {
-    if (!composition) {
-        return undefined;
-    }
-    /**
-   * 在当前元素子树中递归查找实例。
-   * @param items 当前层元素。
-   * @param targetId 目标实例 ID。
-   * @returns 命中的元素。
-   */ const dfs = (items, targetId)=>{
-        for (const item of items){
-            if (item.getInstanceId() === targetId) {
-                return item;
-            }
-            const found = dfs(item.children, targetId);
-            if (found) {
-                return found;
-            }
-        }
-        return undefined;
-    };
-    return dfs(composition.items, id);
-}
 /**
- * 过滤掉祖先也在列表中的元素，仅保留顶层元素。
- * @param items 待过滤元素
- * @returns 保持原顺序的顶层元素
- */ function filterTopLevelPlayerItems(items) {
-    const selectedItems = new Set(items);
-    return items.filter((item)=>{
-        let parent = item.parent;
-        while(parent){
-            if (selectedItems.has(parent)) {
-                return false;
-            }
-            parent = parent.parent;
-        }
-        return true;
-    });
-}
-/**
- * 播放视频元素。
- * @param engine 引擎
- * @param id 视频元素 id
- */ function playVideoItem(engine, id) {
-    const playerItem = getPlayerItemById(engine.compositions[0], id);
-    if (playerItem?.type !== index$1.ItemType.video) {
+ * 调整画板元素（Frame）的尺寸与位置，并同步其子合成 Item 的位移。
+ * @param frameItem 画板元素（Frame 空节点控制器）
+ * @param worldSize 目标世界尺寸（所属合成坐标系，不受 viewport zoom 影响）
+ * @param translation 位移
+ * @param initialSize pointer down 时冻结的本地 / 世界尺寸；传入后允许尺寸连续经过 0 并变为负值
+ */ function resizeFrameItem(frameItem, worldSize, translation, initialSize) {
+    if (!isFramePlayerItem(frameItem)) {
+        console.warn(`Item ${frameItem.getInstanceId()} is not a frame item.`);
         return;
     }
-    const videoComponent = playerItem.getComponent(VideoComponent);
-    videoComponent?.playVideo();
-}
-/**
- * 暂停视频元素。
- * @param engine 引擎
- * @param id 视频元素 id
- */ function pauseVideoItem(engine, id) {
-    const playerItem = getPlayerItemById(engine.compositions[0], id);
-    if (playerItem?.type !== index$1.ItemType.video) {
-        return;
+    // 1. 根据本地尺寸与世界尺寸的比例写回画板尺寸。
+    const currentWorldSize = initialSize?.worldSize ?? getItemWorldSize(frameItem);
+    const currentLocalSize = initialSize?.localSize ?? frameItem.transform.size;
+    const localWidth = currentWorldSize.x === 0 ? worldSize.x : currentLocalSize.x * worldSize.x / currentWorldSize.x;
+    const localHeight = currentWorldSize.y === 0 ? worldSize.y : currentLocalSize.y * worldSize.y / currentWorldSize.y;
+    frameItem.transform.setSize(localWidth, localHeight);
+    // 2. 将交互位移应用到画板。
+    if (translation && (translation.x !== 0 || translation.y !== 0)) {
+        const currentPosition = frameItem.transform.position;
+        frameItem.setPosition(currentPosition.x + translation.x, currentPosition.y + translation.y, currentPosition.z);
     }
-    const videoComponent = playerItem.getComponent(VideoComponent);
-    videoComponent?.pauseVideo();
-}
-/**
- * 播放特效元素。
- * @param engine 引擎
- * @param id 特效元素 id
- */ function playEffectsItem(engine, id) {
-    const controlItem = getPlayerItemById(engine.compositions[0], id);
-    const compositionItem = controlItem?.children?.[0];
-    if (compositionItem?.type !== index$1.ItemType.composition) {
-        return;
+    // 3. 反向补偿子合成元素，保持其世界位置不变。
+    const subCompositionItem = frameItem?.children?.[0];
+    if (subCompositionItem && translation) {
+        subCompositionItem.children.forEach((item)=>{
+            const parentMatrix = new Matrix4().copyFrom(item.transform.getParentMatrix() ?? new Matrix4());
+            parentMatrix.setPosition(new Vector3());
+            const result = translation.clone().applyMatrix(parentMatrix.invert()).negate();
+            item.translate(...result.toArray());
+            item.transform.updateLocalMatrix();
+        });
     }
-    compositionItem.getComponent(CompositionComponent).play();
 }
-/**
- * 暂停特效元素。
- * @param engine 引擎
- * @param id 特效元素 id
- */ function pauseEffectsItem(engine, id) {
-    const controlItem = getPlayerItemById(engine.compositions[0], id);
-    const compositionItem = controlItem?.children?.[0];
-    if (compositionItem?.type !== index$1.ItemType.composition) {
-        return;
+/** 创建 VFXItem、挂载组件并加入合成的底层工厂。 */ class VFXItemFactory {
+    /**
+   * 创建并挂载 VFXItem。
+   * @param composition 目标合成
+   * @param parent 父元素
+   * @param name 元素名称
+   * @param types 待挂载的组件类型
+   * @returns 新建的 VFXItem
+   */ static createVFXItem(composition, parent = null, name = 'NewVFXItem', ...types) {
+        const vfxItem = new VFXItem(composition.engine);
+        vfxItem.name = name;
+        for (const type of types){
+            vfxItem.addComponent(type);
+        }
+        composition.addItem(vfxItem);
+        // @ts-expect-error rootComposition.items 的类型未公开受支持的写入操作。
+        composition.rootComposition.items.push(vfxItem);
+        if (parent) {
+            vfxItem.setParent(parent);
+        }
+        return vfxItem;
     }
-    compositionItem.getComponent(CompositionComponent).pause();
 }
-/** 信息标签默认字号。 */ const INFO_TEXT_FONT_SIZE = 14;
-/** 信息标签默认字体。 */ const INFO_TEXT_FONT_FAMILY = 'sans-serif';
-/** effects Control 字符 atlas 的固定单边留白。 */ const CONTROL_TEXT_GLYPH_PADDING = 4;
-/** 用于测量字体高度的代表字符。 */ const METRICS_STRING = '|ÉqÅ';
-/** 用于测量字体基线的字符。 */ const BASELINE_SYMBOL = 'M';
-/**
- * 颜色缓存：`hex_alpha` → effects Color。键到颜色映射不可变，全局缓存无需清理。
- */ const colorCache = new Map();
-/**
- * 将十六进制色值 + alpha 转为 effects Color（带全局缓存）。
- * @param hex 0xRRGGBB 颜色
- * @param alpha 透明度 0..1
- * @returns effects Color
- */ function toColor(hex, alpha = 1) {
-    const key = `${hex}_${alpha}`;
-    const cached = colorCache.get(key);
-    if (cached) {
-        return cached;
-    }
-    const color = new Color((hex >> 16 & 0xff) / 255, (hex >> 8 & 0xff) / 255, (hex & 0xff) / 255, alpha);
-    colorCache.set(key, color);
-    return color;
-}
-/**
- * 离屏文本测量上下文，懒加载并复用。
- */ let _measureCtx = null;
-/**
- * 测量文本的宽度与可见字形边界。
- * @param text 文本内容
- * @param fontSize 字号
- * @param fontFamily 字体
- * @param fontWeight 字重
- * @param fontStyle 字体样式
- * @returns 文本测量结果
- */ function measureTextMetrics(text, fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY, fontWeight, fontStyle) {
-    _measureCtx ?? (_measureCtx = document.createElement('canvas').getContext('2d'));
-    if (!_measureCtx) {
-        return {
-            width: 0,
-            actualBoundingBoxAscent: 0,
-            actualBoundingBoxDescent: 0
-        };
-    }
-    _measureCtx.font = `${''}${fontWeight ? `${fontWeight} ` : ''}${fontSize}px ${fontFamily}`;
-    const metrics = _measureCtx.measureText(text);
-    return {
-        width: metrics.width,
-        actualBoundingBoxAscent: metrics.actualBoundingBoxAscent ?? 0,
-        actualBoundingBoxDescent: metrics.actualBoundingBoxDescent ?? 0
-    };
-}
-/**
- * 计算 effects Control.drawText 实际使用的 atlas cell 高度。
- * @param fontSize 字号
- * @param fontFamily 字体
- * @param fontWeight 字重
- * @param fontStyle 字体样式
- * @param resolution 渲染分辨率
- * @returns 字符图集单元格高度
- */ function measureControlTextCellHeight(fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY, fontWeight, fontStyle, resolution = 1) {
-    const safeResolution = Number.isFinite(resolution) && resolution > 0 ? resolution : 1;
-    const scaledFontSize = fontSize * safeResolution;
-    const metrics = measureTextMetrics(METRICS_STRING + BASELINE_SYMBOL, scaledFontSize, fontFamily, fontWeight);
-    const ascent = metrics.actualBoundingBoxAscent || scaledFontSize * 0.8;
-    const descent = metrics.actualBoundingBoxDescent || scaledFontSize * 0.2;
-    return Math.ceil(ascent + descent + CONTROL_TEXT_GLYPH_PADDING * 2 * safeResolution) / safeResolution;
-}
-/**
- * 测量文本宽度（逻辑像素），用于信息标签的溢出判断与右对齐定位。
- * @param text 文本内容
- * @param fontSize 字号
- * @param fontFamily 字体
- * @param fontWeight 字重
- * @returns 文本宽度
- */ function measureTextWidth(text, fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY, fontWeight) {
-    return measureTextMetrics(text, fontSize, fontFamily, fontWeight).width;
-}
-/**
- * 单行文本截断：逐字符累加，超出可用宽度时把最后两个字符替换为省略号。
- * @param text 文本内容
- * @param maxWidth 可用宽度
- * @param fontSize 字号
- * @param fontFamily 字体
- * @returns 截断后的文本
- */ function truncateText(text, maxWidth, fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY) {
-    if (measureTextWidth(text, fontSize, fontFamily) <= maxWidth) {
-        return text;
-    }
-    let current = '';
-    for (const char of text){
-        if (measureTextWidth(current + char, fontSize, fontFamily) > maxWidth) {
-            return current.length > 2 ? current.slice(0, -2) + '...' : '...';
-        }
-        current += char;
-    }
-    return current;
-}
-/**
- * 多行逐字符折行：行宽超出 maxWidth 时换行；行数达到 maxLines 时末行用省略号收尾。
- * @param text 文本内容
- * @param maxWidth 单行可用宽度
- * @param maxLines 最大行数
- * @param fontSize 字号
- * @param fontFamily 字体
- * @returns 折行后的文本行数组
- */ function wrapText(text, maxWidth, maxLines, fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY) {
-    const lines = [];
-    let currentLine = '';
-    const chars = text.split('');
-    for(let i = 0; i < chars.length; i++){
-        const char = chars[i];
-        const testLine = currentLine + char;
-        if (measureTextWidth(testLine, fontSize, fontFamily) > maxWidth) {
-            lines.push(currentLine);
-            if (lines.length >= maxLines) {
-                const lastLine = lines[maxLines - 1];
-                lines[maxLines - 1] = lastLine.length > 2 ? lastLine.slice(0, -2) + '...' : '...';
-                break;
-            }
-            currentLine = char;
-        } else {
-            currentLine = testLine;
-        }
-        if (i === chars.length - 1 && currentLine) {
-            lines.push(currentLine);
-        }
-    }
-    return lines.slice(0, maxLines);
-}
-/**
- * 绘制由 4 个角点构成的（可能非正交的）包围盒边框。
- * @param control 绘制控制器
- * @param corners 4 个角点（视图坐标，Y 向下）
- * @param color 边框颜色
- * @param width 线宽
- */ function drawCorners(control, corners, color, width) {
-    if (corners.length < 4) {
-        return;
-    }
-    for(let i = 0; i < 4; i++){
-        const start = corners[i];
-        const end = corners[(i + 1) % 4];
-        control.drawLine(start.x, start.y, end.x, end.y, color, width);
-    }
-}
-/**
- * 绘制虚线包围盒，并在相邻边之间保持连续虚线相位。
- * @param control 绘制控制器
- * @param corners 四个视图角点
- * @param color 虚线颜色
- * @param width 线宽
- * @param dashLength 实线段长度
- * @param gapLength 间隔长度
- */ function drawDashedCorners(control, corners, color, width, dashLength, gapLength) {
-    // 1. 校验角点和虚线参数。
-    if (corners.length < 4 || dashLength <= 0 || gapLength < 0) {
-        return;
-    }
-    const patternLength = dashLength + gapLength;
-    let perimeterOffset = 0;
-    // 2. 逐边计算虚线相位，并继承上一条边的周长偏移。
-    for(let i = 0; i < 4; i++){
-        const start = corners[i];
-        const end = corners[(i + 1) % 4];
-        const dx = end.x - start.x;
-        const dy = end.y - start.y;
-        const edgeLength = Math.hypot(dx, dy);
-        if (edgeLength <= Number.EPSILON) {
-            continue;
-        }
-        let edgeOffset = 0;
-        while(edgeOffset < edgeLength){
-            const patternOffset = perimeterOffset % patternLength;
-            const drawingDash = gapLength === 0 || patternOffset < dashLength;
-            const phaseRemaining = drawingDash ? dashLength - patternOffset : patternLength - patternOffset;
-            const segmentLength = Math.min(phaseRemaining, edgeLength - edgeOffset);
-            // 3. 仅绘制当前相位中的实线段。
-            if (drawingDash && segmentLength > Number.EPSILON) {
-                const startRatio = edgeOffset / edgeLength;
-                const endRatio = (edgeOffset + segmentLength) / edgeLength;
-                control.drawLine(start.x + dx * startRatio, start.y + dy * startRatio, start.x + dx * endRatio, start.y + dy * endRatio, color, width);
-            }
-            edgeOffset += segmentLength;
-            perimeterOffset += segmentLength;
-        }
-    }
-}
-/**
- * 绘制包围盒边框（沿 4 个角点连边）。
- * @param control 绘制控制器
- * @param box 包围盒（视图坐标，Y 向下）
- * @param color 边框颜色
- * @param width 线宽
- */ function drawBox(control, box, color, width) {
-    drawCorners(control, box.corners, color, width);
-}
-/**
- * 填充轴对齐包围盒（实心矩形）。
- * @param control 绘制控制器
- * @param box 包围盒（视图坐标，Y 向下）
- * @param color 填充颜色
- */ function fillBox(control, box, color) {
-    const size = box.getSize();
-    control.fillRect(box.min.x, box.min.y, size.x, size.y, color);
-}
-/**
- * 构造沿局部轴展开的旋转矩形角点。
- * @param center 矩形中心（视图坐标）
- * @param xAxis 局部 X 轴单位向量（视图坐标，宽方向）
- * @param yAxis 局部 Y 轴单位向量（视图坐标，高方向）
- * @param halfWidth 半宽（沿 xAxis，视图像素）
- * @param halfHeight 半高（沿 yAxis，视图像素）
- * @returns 4 个角点（视图坐标，环绕顺序）
- */ function rotatedRectCorners(center, xAxis, yAxis, halfWidth, halfHeight) {
-    const halfW = xAxis.clone().multiply(halfWidth);
-    const halfH = yAxis.clone().multiply(halfHeight);
-    return [
-        center.clone().subtract(halfW).subtract(halfH),
-        center.clone().add(halfW).subtract(halfH),
-        center.clone().add(halfW).add(halfH),
-        center.clone().subtract(halfW).add(halfH)
-    ];
-}
-/**
- * 填充沿局部轴展开的旋转矩形。
- * @param control 绘制控制器
- * @param center 矩形中心（视图坐标）
- * @param xAxis 局部 X 轴单位向量（视图坐标，宽方向）
- * @param yAxis 局部 Y 轴单位向量（视图坐标，高方向）
- * @param width 宽（沿 xAxis，视图像素）
- * @param height 高（沿 yAxis，视图像素）
- * @param color 填充颜色
- */ function fillRotatedRect(control, center, xAxis, yAxis, width, height, color) {
-    const ex = xAxis.clone();
-    const ey = yAxis.clone();
-    const anchor = center.clone();
-    drawRotatedQuad(control, anchor, ex, ey, ()=>{
-        control.fillRect(-width / 2, -height / 2, width, height, color);
-    });
-}
-/**
- * 在由锚点和两个基向量定义的局部坐标系内执行绘制。
- * @param control 绘制控制器
- * @param anchor Control 绘制空间锚点（局部原点）
- * @param ex 局部 X 轴基向量（单位向量）
- * @param ey 局部 Y 轴基向量（单位向量）
- * @param drawFn 在局部坐标系内执行的绘制
- */ function drawRotatedQuad(control, anchor, ex, ey, drawFn) {
-    const graphics = control.engine.graphics;
-    // 列优先：第一列 = ex，第二列 = ey，第三列 = anchor（平移）
-    const matrix = Matrix3.fromColumnVectors(new Vector3(ex.x, ex.y, 0), new Vector3(ey.x, ey.y, 0), new Vector3(anchor.x, anchor.y, 1));
-    graphics.pushTransform(matrix);
-    drawFn();
-    graphics.popTransform();
-}
-const DEFAULT_LOADING_FRAGMENT = `
-// Shadertoy Fragment Shader
-// Diagonal background gradient + wider colorful transparent shimmer
-
-precision highp float;
-
-varying vec2 vUV;
-
-uniform vec4 _Time;
-
-// ------------------------------------------------------------
-// Background
-// ------------------------------------------------------------
-vec3 background(vec2 uv) {
-    vec3 topLeft     = vec3(0.88, 0.85, 1.00);
-    vec3 bottomRight = vec3(0.98, 0.98, 0.98);
-
-    float d = (uv.x + (1.0 - uv.y)) * 0.5;
-    d = smoothstep(0.0, 1.0, d);
-
-    vec3 col = mix(topLeft, bottomRight, d);
-
-    vec2 p1 = uv - vec2(1.13, 1.40);
-    float r1 = length(p1 / vec2(0.85, 0.85));
-    float g1 = 1.0 - smoothstep(0.0, 0.96, r1);
-    col += vec3(172.0/255.0, 183.0/255.0, 1.0) * g1 * 0.28;
-
-    vec2 p2 = uv - vec2(0.25, 0.23);
-    float r2 = length(p2 / vec2(0.74, 0.64));
-    float g2 = 1.0 - smoothstep(0.0, 1.0, r2);
-    col += vec3(147.0/255.0, 108.0/255.0, 1.0) * g2 * 0.10;
-
-    return col;
-}
-
-// ------------------------------------------------------------
-// Easing: slow at start, fast at end
-// ------------------------------------------------------------
-float easeInQuad(float x) {
-    return x * x;
-}
-
-// ------------------------------------------------------------
-// Color palette helper
-// ------------------------------------------------------------
-vec3 palette(float t) {
-    // 柔和的彩色条：蓝 -> 青 -> 紫 -> 粉 -> 蓝
-    vec3 a = vec3(0.62, 0.82, 1.00);
-    vec3 b = vec3(0.72, 0.95, 1.00);
-    vec3 c = vec3(0.83, 0.76, 1.00);
-    vec3 d = vec3(1.00, 0.82, 0.95);
-
-    t = fract(t);
-
-    if (t < 0.33) {
-        float k = smoothstep(0.0, 0.33, t);
-        return mix(a, b, k);
-    } else if (t < 0.66) {
-        float k = smoothstep(0.33, 0.66, t);
-        return mix(b, c, k);
-    } else {
-        float k = smoothstep(0.66, 1.0, t);
-        return mix(c, d, k);
-    }
-}
-
-// ------------------------------------------------------------
-// Wider colorful transparent left-to-right shimmer
-// ------------------------------------------------------------
-vec4 shimmerBand(vec2 uv, float t) {
-    float cycle = fract(t * 0.70);
-    cycle = easeInQuad(cycle);
-
-    float x = cycle * 1.55 - 0.25;   // sweep from left to right
-
-    float d = abs(uv.x - x);
-    float band = 1.0 - smoothstep(0.0, 0.30, d);
-    float core = 1.0 - smoothstep(0.0, 0.10, d);
-
-    float x2 = x + (uv.y - 0.5) * 0.18;
-    float d2 = abs(uv.x - x2);
-    float band2 = 1.0 - smoothstep(0.0, 0.20, d2);
-
-    float s = max(band * 0.85, band2 * 0.60);
-    s = max(s, core * 0.95);
-    s = clamp(s, 0.0, 1.0);
-
-    // 颜色沿条带变化，模拟彩色渐变
-    float hueT = uv.y * 0.25 + uv.x * 0.60 + t * 0.10;
-    vec3 color1 = palette(hueT);
-
-    // 中间更亮一点，边缘更淡
-    vec3 color2 = mix(color1, vec3(1.0), core * 0.35);
-
-    return vec4(color2, s);
-}
-
-// ------------------------------------------------------------
-// Main
-// ------------------------------------------------------------
-void main() {
-    vec2 uv = vUV;
-
-    vec3 col = background(uv);
-
-    vec4 sh = shimmerBand(uv, _Time.y);
-
-    // 可选：增加一点柔光感
-    col += sh.rgb * sh.a * 0.06;
-
-    gl_FragColor = vec4(col, 1.0);
-}`;
-const loadingConfig = defineConfig({
-    id: 'feedback.loading',
-    defaults: {
-        loadingFragment: DEFAULT_LOADING_FRAGMENT
-    }
-});
-const LOADING_TIP_FONT_SIZE = 16;
-const LOADING_TIP_FONT_FAMILY = 'sans-serif';
-const LOADING_TIP_COLOR = 0x000000;
-/** 为目标元素叠加加载动画与提示文案。 */ class LoadingGizmo extends Gizmo {
-    /** 当前加载覆盖层配置。 */ get config() {
-        return this._owner.getConfigManager().get(loadingConfig);
-    }
-    /** 当前 Gizmo 实例持有的可销毁渲染投影。 */ get idMap() {
-        return this._idMap;
-    }
-    /** 当前 loading 元素 id 列表（由稳定 manager 派生）。 */ get loadingIds() {
-        return this._manager.ids;
-    }
-    /**
-   * 在片元着色器变化时重建加载动画对象。
-   * @param change 加载配置变更。
-   */ _onConfigChange(change) {
-        if (change.previous.loadingFragment === change.current.loadingFragment) {
-            return;
-        }
-        for (const [id, loadingItem] of this._idMap){
-            this._disposeLoadingVFXItem(loadingItem.loadingVFXItem);
-            loadingItem.loadingVFXItem = this.createLoadingVFXItem();
-            this.updateLoadingVFXItemTransform(id, loadingItem);
-        }
-    }
-    /**
-   * 订阅 loading 集合变化：add/delete 后回调当前全量 id 列表。
-   * @param cb 收到当前全量 loading id 列表的回调
-   * @returns 退订函数，调用后取消对应监听
-   */ onLoadingChange(cb) {
-        return this._manager.on('change', (change)=>{
-            if (change.addedIds.length > 0 || change.removedIds.length > 0) {
-                cb(change.ids);
-            }
-        });
-    }
-    /**
-   * 为指定元素添加 loading 覆盖层；同一元素不可重复添加。
-   * @param id 目标元素 ID
-   * @param options loading 配置（文案、位置、自定义区域、是否清空选中）
-   */ add(id, options) {
-        this._manager.add(id, options);
+/** 创建内置类型 VFXItem 的便捷工厂。 */ class DefaultVFXItems {
+    /**
+   * 创建空元素。
+   * @param composition 目标合成
+   * @param parent 父元素
+   * @param name 元素名称
+   * @returns 新建的空元素
+   */ static createEmpty(composition, parent = null, name = 'NewVFXItem') {
+        const vfxItem = VFXItemFactory.createVFXItem(composition, parent, name);
+        vfxItem.type = index$1.ItemType.null;
+        return vfxItem;
     }
     /**
-   * 移除指定元素的 loading 覆盖层并释放对应 VFXItem。
-   * @param id 目标元素 ID
-   */ delete(id) {
-        this._manager.delete(id);
-    }
-    /**
-   * 更新指定 loading 元素的提示文案。
-   * @param id 目标元素 ID
-   * @param options 待合并更新的 LoadingTip 属性
-   */ updateItem(id, options) {
-        this._manager.update(id, options);
-    }
-    /** 根据目标元素的实时包围盒刷新加载动画。 */ onPreRender() {
-        if (this._idMap.size === 0) {
-            return;
-        }
-        for (const [id, loadingItem] of this._idMap){
-            this.updateLoadingVFXItemTransform(id, loadingItem);
-        }
-    }
-    /**
-   * 绘制所有加载提示文案。
-   * @param control 绘制控制器。
-   */ draw(control) {
-        if (this._idMap.size === 0) {
-            return;
-        }
-        for (const [id, loadingItem] of this._idMap){
-            if (!loadingItem.tip?.text) {
-                continue;
-            }
-            const item = getPlayerItemById(this._owner.getEngine().compositions[0], id);
-            const itemBox = item ? getItemViewBox(item, GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement)) : new Box2();
-            const loadingBox = getBoxByNormalizeBox(itemBox, loadingItem.loadingBox);
-            this.drawLoadingTip(control, loadingBox, itemBox, loadingItem.tip);
-        }
-    }
-    /**
-   * 绘制单条加载提示，并将文本限制在加载区域内。
-   * @param control 绘制控制器。
-   * @param loadingBox 加载区域。
-   * @param itemBox 目标元素包围盒。
-   * @param tip 加载提示配置。
-   */ drawLoadingTip(control, loadingBox, itemBox, tip) {
-        // 步骤 1：计算提示位置与可用宽度。
-        const { x: width, y: height } = loadingBox.getSize(this._loadingBoxSize);
-        if (!tip.text || !Number.isFinite(width) || width <= 0) {
-            return;
-        }
-        const positionedLeft = tip.position ? itemBox.min.x + (Number.isFinite(tip.position.x) ? tip.position.x : 0) : loadingBox.min.x;
-        const left = tip.position ? Math.min(Math.max(positionedLeft, loadingBox.min.x), loadingBox.max.x) : loadingBox.min.x;
-        const availableWidth = tip.position ? loadingBox.max.x - left : width;
-        if (availableWidth <= 0) {
-            return;
-        }
-        /**
-     * 测量加载提示的粗体字形。
-     * @param text 提示文本。
-     * @param fontSize 字号。
-     * @returns 文本字形尺寸。
-     */ const measureTipText = (text, fontSize)=>{
-            const metrics = measureTextMetrics(text, fontSize, LOADING_TIP_FONT_FAMILY, 'bold');
-            return {
-                width: metrics.width || Array.from(text).length * fontSize,
-                actualBoundingBoxAscent: metrics.actualBoundingBoxAscent || fontSize * 0.8,
-                actualBoundingBoxDescent: metrics.actualBoundingBoxDescent || fontSize * 0.2
-            };
-        };
-        // 步骤 2：测量文本并缩小字号以适应可用宽度。
-        const measuredAtBaseSize = measureTipText(tip.text, LOADING_TIP_FONT_SIZE);
-        let fontSize = measuredAtBaseSize.width > availableWidth ? LOADING_TIP_FONT_SIZE * availableWidth / measuredAtBaseSize.width : LOADING_TIP_FONT_SIZE;
-        let textMetrics = measureTipText(tip.text, fontSize);
-        if (textMetrics.width > availableWidth) {
-            fontSize *= availableWidth / textMetrics.width;
-            textMetrics = measureTipText(tip.text, fontSize);
-        }
-        // 步骤 3：按字形基线计算最终绘制位置。
-        const textLeft = tip.position ? left : loadingBox.min.x + (width - textMetrics.width) / 2;
-        const inkHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
-        const top = tip.position ? itemBox.min.y + (Number.isFinite(tip.position.y) ? tip.position.y : 0) : loadingBox.min.y + (height - inkHeight) / 2;
-        const probeMetrics = measureTipText(METRICS_STRING + BASELINE_SYMBOL, fontSize);
-        const inkTopFromCellTop = CONTROL_TEXT_GLYPH_PADDING + probeMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxAscent;
-        control.drawText(textLeft, top - inkTopFromCellTop, tip.text, fontSize, toColor(LOADING_TIP_COLOR, 1), LOADING_TIP_FONT_FAMILY, 'bold');
-    }
-    /** 释放当前实例的渲染投影；稳定 LoadingManager 不随 Gizmo 重建清空。 */ dispose() {
-        this._configOff?.();
-        this._configOff = undefined;
-        this._managerOff?.();
-        this._managerOff = undefined;
-        this._idMap.forEach((loadingItem)=>{
-            this._disposeLoadingVFXItem(loadingItem.loadingVFXItem);
-        });
-        this._idMap.clear();
-        super.dispose();
-    }
-    /** 将可销毁的渲染投影同步到当前加载状态。 */ _syncManager() {
-        const activeIds = new Set(this._manager.ids);
-        for (const [id, loadingItem] of this._idMap){
-            if (!activeIds.has(id)) {
-                this._disposeLoadingVFXItem(loadingItem.loadingVFXItem);
-                this._idMap.delete(id);
-            }
-        }
-        for (const id of activeIds){
-            const state = this._manager.get(id);
-            if (!state) {
-                continue;
-            }
-            const existing = this._idMap.get(id);
-            if (existing) {
-                existing.tip = {
-                    ...state.tip,
-                    position: state.tip.position ? state.tip.position.clone() : undefined
-                };
-            } else {
-                this._createProjection(id, state);
-            }
-        }
-    }
-    /**
-   * 为加载状态创建渲染投影。
-   * @param id 目标元素 ID。
-   * @param state 加载状态。
-   */ _createProjection(id, state) {
-        const item = getPlayerItemById(this._owner.getEngine().compositions[0], id);
-        const itemViewBox = item ? getItemViewBox(item, GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement)) : new Box2();
-        const currentBox = state.loadingBox ? this.getViewBoxByBox(state.loadingBox) : itemViewBox;
-        this._idMap.set(id, {
-            loadingBox: getNormalizeBoxByBoxes(itemViewBox, currentBox),
-            loadingVFXItem: this.createLoadingVFXItem(),
-            tip: {
-                ...state.tip,
-                position: state.tip.position ? state.tip.position.clone() : undefined
-            }
-        });
-        this.updateLoadingVFXItemTransform(id, this._idMap.get(id));
-    }
-    /** @returns 当前相机信息。 */ getCameraInfo() {
-        return GizmoViewportUtils.getCameraInfo(this._owner.getEngine());
-    }
-    /** @returns 当前视口的缩放、平移与尺寸。 */ getViewportParams() {
-        const composition = this._owner.getEngine().compositions[0];
-        const camera = composition?.camera;
-        if (camera) {
-            const viewportMatrix = camera.getViewportMatrix();
-            const scale = viewportMatrix.elements[0];
-            const translation = new Vector2(viewportMatrix.elements[12], viewportMatrix.elements[13]);
-            const width = GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement).x;
-            const height = GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement).y;
-            return {
-                scale,
-                translation,
-                width,
-                height
-            };
-        }
-        return {
-            scale: 1,
-            translation: new Vector2(),
-            width: GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement).x,
-            height: GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement).y
-        };
-    }
-    /**
-   * 将视图坐标下的包围盒按当前视口缩放与平移变换为实际渲染包围盒。
-   * @param box 视图坐标下的包围盒
-   * @returns 经视口缩放与平移后的实际渲染包围盒
-   */ getViewBoxByBox(box) {
-        const { scale, translation, width, height } = this.getViewportParams();
-        const center = new Vector2(width / 2, height / 2);
-        const result = scaleBox(box.clone(), scale, center).translate(translation);
-        return result;
+   * 创建图片元素。
+   * @param composition 目标合成
+   * @param parent 父元素
+   * @param name 元素名称
+   * @returns 新建的图片元素
+   */ static createSprite(composition, parent = null, name = 'NewSprite') {
+        const vfxItem = VFXItemFactory.createVFXItem(composition, parent, name, SpriteComponent);
+        vfxItem.type = index$1.ItemType.sprite;
+        return vfxItem;
     }
     /**
-   * 创建承载加载动画的 VFXItem。
-   * @returns 已绑定几何与材质的加载动画对象。
-   */ createLoadingVFXItem() {
-        // 步骤 1：创建加载动画对象与平面几何。
-        const composition = this._owner.getEngine().compositions[0];
-        const loadingVFXItem = VFXItemFactory.createVFXItem(composition, null, 'LoadingVFXItem', EffectComponent);
-        this._owner.getSelection().addIgnoreIds([
-            loadingVFXItem.getInstanceId()
-        ]);
-        loadingVFXItem.type = index$1.ItemType.effect;
-        const effects = loadingVFXItem.getComponent(EffectComponent);
-        const engine = this._owner.getEngine();
-        const geometry = Geometry.create(engine, {
-            attributes: {
-                aPos: {
-                    size: 3,
-                    data: new Float32Array([
-                        -0.5,
-                        -0.5,
-                        0,
-                        0.5,
-                        -0.5,
-                        0,
-                        0.5,
-                        0.5,
-                        0,
-                        -0.5,
-                        0.5,
-                        0
-                    ])
-                },
-                aUV: {
-                    size: 2,
-                    data: new Float32Array([
-                        0,
-                        0,
-                        1,
-                        0,
-                        1,
-                        1,
-                        0,
-                        1
-                    ])
-                }
-            },
-            indices: {
-                data: new Uint16Array([
-                    0,
-                    1,
-                    2,
-                    0,
-                    2,
-                    3
-                ])
-            },
-            mode: glContext.TRIANGLES,
-            drawCount: 6
-        });
-        // 步骤 2：使用当前配置创建动画材质。
-        const material = Material.create(engine, {
-            shader: {
-                vertex: `
-precision highp float;
-attribute vec3 aPos;
-attribute vec2 aUV;
-uniform mat4 effects_MatrixVP;
-uniform mat4 effects_ObjectToWorld;
-varying vec2 vUV;
-void main() {
-  vUV = aUV;
-  gl_Position = effects_MatrixVP * effects_ObjectToWorld * vec4(aPos, 1.0);
-}`,
-                fragment: this.config.loadingFragment
-            }
-        });
-        // 步骤 3：绑定运行时几何与材质。
-        // @ts-expect-error Effects 类型未暴露可写 geometry。
-        effects.geometry = geometry;
-        effects.material = material;
-        return loadingVFXItem;
-    }
-    /** 释放 loading 渲染对象，并同步恢复 Selection 的命中过滤。 */ _disposeLoadingVFXItem(item) {
-        this._owner.getSelection().deleteIgnoreIds([
-            item.getInstanceId()
-        ]);
-        item.dispose();
+   * 创建文本元素。
+   * @param composition 目标合成
+   * @param parent 父元素
+   * @param name 元素名称
+   * @returns 新建的文本元素
+   */ static createText(composition, parent = null, name = 'NewText') {
+        const vfxItem = VFXItemFactory.createVFXItem(composition, parent, name, TextComponent);
+        vfxItem.type = index$1.ItemType.text;
+        return vfxItem;
     }
     /**
-   * 按目标元素的实时包围盒更新加载动画变换。
-   * @param id 目标元素 ID。
-   * @param loadingItem 对应的加载渲染投影。
-   */ updateLoadingVFXItemTransform(id, loadingItem) {
-        const item = getPlayerItemById(this._owner.getEngine().compositions[0], id);
-        const containerSize = GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement);
-        const itemViewBox = item ? getItemViewBox(item, containerSize) : new Box2();
-        const currentBox = getBoxByNormalizeBox(itemViewBox, loadingItem.loadingBox);
-        const viewPosition = new Vector2((currentBox.max.x + currentBox.min.x) / 2, (currentBox.max.y + currentBox.min.y) / 2);
-        const cameraInfo = this.getCameraInfo();
-        const interactionPlane = new Plane(0, new Vector3(0, 0, 1));
-        const worldPosition = viewPositionToWorld(viewPosition, cameraInfo, interactionPlane, containerSize);
-        const viewSize = new Vector2(currentBox.max.x - currentBox.min.x, currentBox.max.y - currentBox.min.y);
-        const worldSize = viewSizeToWorld(viewSize, containerSize, loadingItem.loadingVFXItem, cameraInfo, interactionPlane);
-        if (worldPosition) {
-            loadingItem.loadingVFXItem.transform.setPosition(worldPosition.x, worldPosition.y, 0);
-        }
-        loadingItem.loadingVFXItem.transform.setScale(worldSize.x, worldSize.y, 1);
+   * 创建视频元素。
+   * @param composition 目标合成
+   * @param parent 父元素
+   * @param name 元素名称
+   * @returns 新建的视频元素
+   */ static createVideo(composition, parent = null, name = 'NewVideo') {
+        const vfxItem = VFXItemFactory.createVFXItem(composition, parent, name, VideoComponent);
+        vfxItem.type = index$1.ItemType.video;
+        return vfxItem;
     }
     /**
-   * 创建加载覆盖层。
-   * @param owner Gizmo 宿主。
-   * @param manager 加载状态管理器。
-   */ constructor(owner, manager){
-        super(owner), _define_property(this, "type", 'loading'), _define_property(this, "_configOff", void 0), _define_property(this, "_managerOff", void 0), _define_property(this, "_manager", void 0), _define_property(this, "_loadingBoxSize", new Vector2()), _define_property(this, "_idMap", new Map());
-        this._manager = manager;
-        this._configOff = owner.getConfigManager().onChange(loadingConfig, (change)=>{
-            this._onConfigChange(change);
-        });
-        this._managerOff = this._manager.on('change', ()=>{
-            this._syncManager();
-        });
-        this._syncManager();
-    }
-}
-const viewportNavigationConfig = defineConfig({
-    id: 'viewport.navigation',
-    defaults: {
-        scrollWheelZoom: false,
-        invertZoom: false,
-        zoomStep: 0.1
-    }
-});
-const viewportOverlayConfig = defineConfig({
-    id: 'viewport.overlay',
-    defaults: {
-        boxColor: 0xFF0000,
-        boxWidth: 1,
-        outerMaskEnabled: true,
-        markColor: 0x000000,
-        markAlpha: 0.17,
-        safeAreaEnabled: true,
-        safeAreaBoxColor: 0x00FF00,
-        safeAreaBoxAlpha: 0.3
-    }
-});
-const selectionPreviewConfig = defineConfig({
-    id: 'selection.preview',
-    defaults: {
-        videoPreSelectedPlay: true,
-        preSelectedColor: 0x3b82f6,
-        preSelectedWidth: 2,
-        regionBoxColor: 0x3b82f6,
-        regionBoxAlpha: 0.17,
-        regionWireframeColor: 0x3b82f6,
-        regionWireframeAlpha: 0.78,
-        regionWireframeWidth: 1
-    }
-});
-const selectionSnapConfig = defineConfig({
-    id: 'selection.snap',
-    defaults: {
-        enabled: true,
-        lineWidth: 0.8,
-        lineColor: 0x0BD6FF,
-        distance: 6
-    }
-});
-const resizeSelectionConfig = defineConfig({
-    id: 'resize-selection',
-    defaults: {
-        pixelRatio: 1,
-        contentRatio: 1,
-        wireframeColor: 0x3b82f6,
-        wireframeAlpha: 1,
-        wireframeWidth: 1.5,
-        cornerFillColor: 0xFFFFFF,
-        cornerLineColor: 0x3b82f6,
-        cornerLineWidth: 1.5,
-        cornerLineAlpha: 1,
-        scaleCircleSize: 4,
-        rotationCircleSize: 7,
-        infoShowEnabled: true,
-        sizeTextColor: 0x666666,
-        nameTextColor: 0x666666,
-        frameMoveLineColor: 0x3b82f6,
-        frameMoveLineWidth: 2,
-        pictureLogoUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original',
-        groupLogoUrl: 'https://mdn.alipayobjects.com/huamei_ppzin5/afts/img/Yo69Sr7boqYAAAAAH3AAAAgADjdkAQFr/original',
-        textLogoUrl: 'https://mdn.alipayobjects.com/huamei_ppzin5/afts/img/Yo69Sr7boqYAAAAAH3AAAAgADjdkAQFr/original',
-        videoLogoUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*w1fnS4mq0VgAAAAAQCAAAAgAev-aAQ/original',
-        frameLogoUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*DRF_RpndkjUAAAAAQDAAAAgAev-aAQ/original',
-        effectsLogoUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*RMewR4ruUnYAAAAAQGAAAAgAev-aAQ/original'
-    }
-});
-const pictureCutConfig = defineConfig({
-    id: 'tool.picture-cut',
-    defaults: {
-        maskColor: 0xFFFFFF,
-        maskAlpha: 0.5,
-        cutBoxLineWidth: 2,
-        cutBoxLineColor: 0x6A34FF,
-        cutBoxLineAlpha: 1,
-        itemBoxLineWidth: 1,
-        itemBoxLineColor: 0x6A34FF,
-        itemBoxLineAlpha: 1,
-        cutBoxCornerRadius: 5,
-        cutBoxCornerFillColor: 0xFFFFFF,
-        cutBoxCornerLineWidth: 2,
-        cutBoxCornerLineColor: 0x6A34FF,
-        cutBoxCornerLineAlpha: 1,
-        scaleInteractionDistance: 8,
-        directionScaleInteractionDistance: 5,
-        gridLineWidth: 1,
-        gridLineColor: 0xFFFFFF,
-        gridLineAlpha: 1,
-        gridCount: 2
-    }
-});
-const pictureExpandConfig = defineConfig({
-    id: 'tool.picture-expand',
-    defaults: {
-        maskColor: 0x6A34FF,
-        maskAlpha: 0.2,
-        expandBoxLineWidth: 2,
-        expandBoxLineColor: 0x6A34FF,
-        expandBoxLineAlpha: 1,
-        expandBoxCornerRadius: 5,
-        expandBoxCornerLineWidth: 2,
-        expandBoxCornerLineColor: 0x6A34FF,
-        expandBoxCornerLineAlpha: 1,
-        expandBoxCornerFillColor: 0xFFFFFF,
-        scaleInteractionDistance: 8,
-        directionScaleInteractionDistance: 5,
-        gridLineWidth: 1,
-        gridLineColor: 0xFFFFFF,
-        gridLineAlpha: 1,
-        gridCount: 2
-    }
-});
-const maskConfig = defineConfig({
-    id: 'tool.mask',
-    defaults: {
-        maskImage: '',
-        brushSize: 20,
-        brushColor: 0x6A34FF,
-        brushAlpha: 0.5,
-        maskColor: 0x00FF00,
-        maskBackgroundColor: 0xFFFFFF,
-        maskAlpha: 1,
-        boxLineWidth: 1,
-        boxLineColor: 0x6A34FF,
-        boxLineAlpha: 1
-    }
-});
-const spriteTextEditConfig = defineConfig({
-    id: 'tool.sprite-text-edit',
-    defaults: {
-        textColor: 0xFFFFFF,
-        preSelectedTextColor: 0xFFFFFF,
-        boxLineWidth: 3,
-        dashLineDash: 8,
-        dashLineGap: 8,
-        editBoxAlpha: 0.15,
-        editBoxColor: 0x3B82F6,
-        editBoxLineAlpha: 1,
-        editBoxLineColor: 0x3B82F6,
-        editBoxPreSelectedAlpha: 0.25,
-        editBoxPreSelectedColor: 0x3B82F6,
-        editBoxLinePreSelectedAlpha: 1,
-        editBoxLinePreSelectedColor: 0x3B82F6,
-        hasChangedEditBoxAlpha: 0.2,
-        hasChangedEditBoxColor: 0x22C55E,
-        hasChangedEditBoxLineAlpha: 1,
-        hasChangedEditBoxLineColor: 0x22C55E,
-        hasChangedEditBoxPreSelectedAlpha: 0.3,
-        hasChangedEditBoxPreSelectedColor: 0x22C55E,
-        hasChangedEditBoxLinePreSelectedAlpha: 1,
-        hasChangedEditBoxLinePreSelectedColor: 0x22C55E,
-        editBoxSelectedAlpha: 0.6,
-        editBoxSelectedColor: 0xFFFF00
-    }
-});
-const iconConfig = defineConfig({
-    id: 'feedback.icon',
-    defaults: {
-        autoShow: true,
-        videoPlayUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*ORMmSYYHIHUAAAAAJbAAAAgAev-aAQ/original',
-        videoPlayShift: [
-            20,
-            20
-        ],
-        videoPlayWidth: 20,
-        videoPlayHeight: 20,
-        imageGeneratorUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*bYB-TIEWLBkAAAAAQGAAAAgAev-aAQ/original',
-        videoGeneratorUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*6cTFT44CuKEAAAAAQCAAAAgAev-aAQ/original',
-        generatorWidth: 200,
-        generatorHeight: 200
-    }
-});
-const itemCreateConfig = defineConfig({
-    id: 'tool.item-create',
-    defaults: {
-        frameBorderColor: 0x2178FF,
-        frameBorderWidth: 1,
-        frameBorderAlpha: 0.8,
-        frameFillColor: 0x2178FF,
-        frameFillAlpha: 0.15,
-        frameChildBoxAlpha: 0.35,
-        frameChildBoxColor: 0x2178FF
+   * 加载并创建特效合成元素。
+   * @param composition 目标合成
+   * @param effects 特效地址或场景数据
+   * @param parent 父元素
+   * @param urlname 元素名称
+   * @returns 新建的特效元素
+   */ static async createEffects(composition, effects, parent = null, urlname = 'NewEffects') {
+        const preComposition = await AssetManager$1.loadPrecomposition(effects, {
+            autoplay: false
+        });
+        const vfxItem = PrecompositionManager.instantiate(preComposition, composition);
+        vfxItem.name = urlname;
+        vfxItem.type = index$1.ItemType.composition;
+        vfxItem.getComponent(CompositionComponent).endBehavior = vfxItem.endBehavior;
+        if (parent) {
+            vfxItem.setParent(parent);
+        }
+        return vfxItem;
     }
-});
+}
 /**
- * 缩放视图。
+ * 播放视频元素。
  * @param engine 引擎
- * @param zoom 缩放值
- * @param center 缩放中心
- */ function zoomView(engine, zoom, center = new Vector2()) {
-    const composition = engine.compositions[0];
-    if (!composition) {
+ * @param id 视频元素 id
+ */ function playVideoItem(engine, id) {
+    const playerItem = getPlayerItemById(engine.compositions[0], id);
+    if (playerItem?.type !== index$1.ItemType.video) {
         return;
     }
-    const { camera } = composition;
-    const scale = camera.getViewportMatrix().elements[0];
-    const translation = new Vector2(camera.getViewportMatrix().elements[12], camera.getViewportMatrix().elements[13]);
-    const result = scale + zoom;
-    // 1. 反算缩放中心对应的世界坐标。
-    const worldX = (center.x - translation.x) / scale;
-    const worldY = (center.y - translation.y) / scale;
-    // 2. 调整平移，使缩放中心在屏幕上的位置保持不变。
-    const newNDCTranslation = new Vector2(center.x - worldX * result, center.y - worldY * result);
-    const viewportMatrix = new Matrix4().compose(new Vector3(newNDCTranslation.x, newNDCTranslation.y, 0), new Quaternion(), new Vector3(result, result, 1));
-    composition.camera.setViewportMatrix(viewportMatrix);
+    const videoComponent = playerItem.getComponent(VideoComponent);
+    videoComponent?.playVideo();
 }
 /**
- * 平移视图。
+ * 暂停视频元素。
  * @param engine 引擎
- * @param translation 位移值
- */ function panView(engine, translation) {
-    const composition = engine.compositions[0];
-    if (!composition) {
+ * @param id 视频元素 id
+ */ function pauseVideoItem(engine, id) {
+    const playerItem = getPlayerItemById(engine.compositions[0], id);
+    if (playerItem?.type !== index$1.ItemType.video) {
         return;
     }
-    const { camera } = composition;
-    const scale = camera.getViewportMatrix().elements[0];
-    const resultTranslation = new Vector2(camera.getViewportMatrix().elements[12], camera.getViewportMatrix().elements[13]).add(translation);
-    const viewportMatrix = new Matrix4().compose(new Vector3(resultTranslation.x, resultTranslation.y, 0), new Quaternion(), new Vector3(scale, scale, 1));
-    camera.setViewportMatrix(viewportMatrix);
+    const videoComponent = playerItem.getComponent(VideoComponent);
+    videoComponent?.pauseVideo();
 }
 /**
- * 调整画板元素（Frame）的尺寸与位置，并同步其子合成 Item 的位移。
- * @param frameItem 画板元素（Frame 空节点控制器）
- * @param worldSize 目标世界尺寸（所属合成坐标系，不受 viewport zoom 影响）
- * @param translation 位移
- * @param initialSize pointer down 时冻结的本地 / 世界尺寸；传入后允许尺寸连续经过 0 并变为负值
- */ function resizeFrameItem(frameItem, worldSize, translation, initialSize) {
-    if (!isFramePlayerItem(frameItem)) {
-        console.warn(`Item ${frameItem.getInstanceId()} is not a frame item.`);
+ * 播放特效元素。
+ * @param engine 引擎
+ * @param id 特效元素 id
+ */ function playEffectsItem(engine, id) {
+    const controlItem = getPlayerItemById(engine.compositions[0], id);
+    const compositionItem = controlItem?.children?.[0];
+    if (compositionItem?.type !== index$1.ItemType.composition) {
         return;
     }
-    // 1. 根据本地尺寸与世界尺寸的比例写回画板尺寸。
-    const currentWorldSize = initialSize?.worldSize ?? getItemWorldSize(frameItem);
-    const currentLocalSize = initialSize?.localSize ?? frameItem.transform.size;
-    const localWidth = currentWorldSize.x === 0 ? worldSize.x : currentLocalSize.x * worldSize.x / currentWorldSize.x;
-    const localHeight = currentWorldSize.y === 0 ? worldSize.y : currentLocalSize.y * worldSize.y / currentWorldSize.y;
-    frameItem.transform.setSize(localWidth, localHeight);
-    // 2. 将交互位移应用到画板。
-    if (translation && (translation.x !== 0 || translation.y !== 0)) {
-        const currentPosition = frameItem.transform.position;
-        frameItem.setPosition(currentPosition.x + translation.x, currentPosition.y + translation.y, currentPosition.z);
+    compositionItem.getComponent(CompositionComponent).play();
+}
+/**
+ * 暂停特效元素。
+ * @param engine 引擎
+ * @param id 特效元素 id
+ */ function pauseEffectsItem(engine, id) {
+    const controlItem = getPlayerItemById(engine.compositions[0], id);
+    const compositionItem = controlItem?.children?.[0];
+    if (compositionItem?.type !== index$1.ItemType.composition) {
+        return;
     }
-    // 3. 反向补偿子合成元素，保持其世界位置不变。
-    const subCompositionItem = frameItem?.children?.[0];
-    if (subCompositionItem && translation) {
-        subCompositionItem.children.forEach((item)=>{
-            const parentMatrix = new Matrix4().copyFrom(item.transform.getParentMatrix() ?? new Matrix4());
-            parentMatrix.setPosition(new Vector3());
-            const result = translation.clone().applyMatrix(parentMatrix.invert()).negate();
-            item.translate(...result.toArray());
-            item.transform.updateLocalMatrix();
-        });
+    compositionItem.getComponent(CompositionComponent).pause();
+}
+/** 信息标签默认字号。 */ const INFO_TEXT_FONT_SIZE = 14;
+/** 信息标签默认字体。 */ const INFO_TEXT_FONT_FAMILY = 'sans-serif';
+/** effects Control 字符 atlas 的固定单边留白。 */ const CONTROL_TEXT_GLYPH_PADDING = 4;
+/** 用于测量字体高度的代表字符。 */ const METRICS_STRING = '|ÉqÅ';
+/** 用于测量字体基线的字符。 */ const BASELINE_SYMBOL = 'M';
+/**
+ * 颜色缓存：`hex_alpha` → effects Color。键到颜色映射不可变，全局缓存无需清理。
+ */ const colorCache = new Map();
+/**
+ * 将十六进制色值 + alpha 转为 effects Color（带全局缓存）。
+ * @param hex 0xRRGGBB 颜色
+ * @param alpha 透明度 0..1
+ * @returns effects Color
+ */ function toColor(hex, alpha = 1) {
+    const key = `${hex}_${alpha}`;
+    const cached = colorCache.get(key);
+    if (cached) {
+        return cached;
     }
+    const color = new Color((hex >> 16 & 0xff) / 255, (hex >> 8 & 0xff) / 255, (hex & 0xff) / 255, alpha);
+    colorCache.set(key, color);
+    return color;
 }
-/** 统一处理手形工具和滚轮触发的视口平移与缩放。 */ class ViewportNavigationController extends EventEmitter {
-    /** 当前视口导航配置。 */ get config() {
-        return this._owner.getConfigManager().get(viewportNavigationConfig);
+/**
+ * 离屏文本测量上下文，懒加载并复用。
+ */ let _measureCtx = null;
+/**
+ * 测量文本的宽度与可见字形边界。
+ * @param text 文本内容
+ * @param fontSize 字号
+ * @param fontFamily 字体
+ * @param fontWeight 字重
+ * @param fontStyle 字体样式
+ * @returns 文本测量结果
+ */ function measureTextMetrics(text, fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY, fontWeight, fontStyle) {
+    _measureCtx ?? (_measureCtx = document.createElement('canvas').getContext('2d'));
+    if (!_measureCtx) {
+        return {
+            width: 0,
+            actualBoundingBoxAscent: 0,
+            actualBoundingBoxDescent: 0
+        };
     }
-    /** 当前 Effects 引擎。 */ get _engine() {
-        return this._owner.getEngine();
+    _measureCtx.font = `${''}${fontWeight ? `${fontWeight} ` : ''}${fontSize}px ${fontFamily}`;
+    const metrics = _measureCtx.measureText(text);
+    return {
+        width: metrics.width,
+        actualBoundingBoxAscent: metrics.actualBoundingBoxAscent ?? 0,
+        actualBoundingBoxDescent: metrics.actualBoundingBoxDescent ?? 0
+    };
+}
+/**
+ * 计算 effects Control.drawText 实际使用的 atlas cell 高度。
+ * @param fontSize 字号
+ * @param fontFamily 字体
+ * @param fontWeight 字重
+ * @param fontStyle 字体样式
+ * @param resolution 渲染分辨率
+ * @returns 字符图集单元格高度
+ */ function measureControlTextCellHeight(fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY, fontWeight, fontStyle, resolution = 1) {
+    const safeResolution = Number.isFinite(resolution) && resolution > 0 ? resolution : 1;
+    const scaledFontSize = fontSize * safeResolution;
+    const metrics = measureTextMetrics(METRICS_STRING + BASELINE_SYMBOL, scaledFontSize, fontFamily, fontWeight);
+    const ascent = metrics.actualBoundingBoxAscent || scaledFontSize * 0.8;
+    const descent = metrics.actualBoundingBoxDescent || scaledFontSize * 0.2;
+    return Math.ceil(ascent + descent + CONTROL_TEXT_GLYPH_PADDING * 2 * safeResolution) / safeResolution;
+}
+/**
+ * 测量文本宽度（逻辑像素），用于信息标签的溢出判断与右对齐定位。
+ * @param text 文本内容
+ * @param fontSize 字号
+ * @param fontFamily 字体
+ * @param fontWeight 字重
+ * @returns 文本宽度
+ */ function measureTextWidth(text, fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY, fontWeight) {
+    return measureTextMetrics(text, fontSize, fontFamily, fontWeight).width;
+}
+/**
+ * 单行文本截断：逐字符累加，超出可用宽度时把最后两个字符替换为省略号。
+ * @param text 文本内容
+ * @param maxWidth 可用宽度
+ * @param fontSize 字号
+ * @param fontFamily 字体
+ * @returns 截断后的文本
+ */ function truncateText(text, maxWidth, fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY) {
+    if (measureTextWidth(text, fontSize, fontFamily) <= maxWidth) {
+        return text;
     }
-    /**
-   * 设置允许的视口缩放范围。
-   * @param minScale 最小缩放
-   * @param maxScale 最大缩放
-   */ setScaleRange(minScale, maxScale) {
-        if (!Number.isFinite(minScale) || !Number.isFinite(maxScale) || minScale <= 0 || maxScale <= 0 || minScale > maxScale) {
-            throw new RangeError('Viewport scale range must be finite, positive, and ordered.');
+    let current = '';
+    for (const char of text){
+        if (measureTextWidth(current + char, fontSize, fontFamily) > maxWidth) {
+            return current.length > 2 ? current.slice(0, -2) + '...' : '...';
         }
-        this._minScale = minScale;
-        this._maxScale = maxScale;
+        current += char;
     }
-    /**
-   * 根据滚轮来源和修饰键执行平移或缩放。
-   * @param event 滚轮事件
-   * @param _pointerCaptured 指针是否已被捕获
-   * @returns 视口是否发生变化
-   */ handleWheel(event, _pointerCaptured) {
-        if (!this._hasViewport()) {
-            return false;
-        }
-        event.accept();
-        if (event.buttonMask !== MouseButtonMask.None) {
-            return false;
-        }
-        const { delta, source } = this._normalizeWheel(event);
-        const mode = this._classifyWheel(event, source);
-        const center = new Vector2(event.position.x, event.position.y);
-        if (mode === 'zoom') {
-            if (delta.y === 0) {
-                return false;
+    return current;
+}
+/**
+ * 多行逐字符折行：行宽超出 maxWidth 时换行；行数达到 maxLines 时末行用省略号收尾。
+ * @param text 文本内容
+ * @param maxWidth 单行可用宽度
+ * @param maxLines 最大行数
+ * @param fontSize 字号
+ * @param fontFamily 字体
+ * @returns 折行后的文本行数组
+ */ function wrapText(text, maxWidth, maxLines, fontSize = INFO_TEXT_FONT_SIZE, fontFamily = INFO_TEXT_FONT_FAMILY) {
+    const lines = [];
+    let currentLine = '';
+    const chars = text.split('');
+    for(let i = 0; i < chars.length; i++){
+        const char = chars[i];
+        const testLine = currentLine + char;
+        if (measureTextWidth(testLine, fontSize, fontFamily) > maxWidth) {
+            lines.push(currentLine);
+            if (lines.length >= maxLines) {
+                const lastLine = lines[maxLines - 1];
+                lines[maxLines - 1] = lastLine.length > 2 ? lastLine.slice(0, -2) + '...' : '...';
+                break;
             }
-            const direction = this.config.invertZoom ? -delta.y : delta.y;
-            const zoomStep = this.config.zoomStep;
-            const zoomShift = clamp(direction * 0.01, -zoomStep, zoomStep);
-            return this._zoomByShift(zoomShift, center, event.ctrlPressed && source === 'trackpad' ? 'pinch-zoom' : 'wheel-zoom');
-        }
-        if (delta.x === 0 && delta.y === 0) {
-            return false;
-        }
-        return this.panByViewDelta(delta, center, 'wheel-pan');
-    }
-    /**
-   * 按视图像素增量平移视口。
-   * @param delta 视图像素位移
-   * @param center 操作中心
-   * @param source 操作来源
-   * @returns 视口是否发生变化
-   */ panByViewDelta(delta, center, source) {
-        if (!this._hasViewport() || delta.x === 0 && delta.y === 0) {
-            return false;
+            currentLine = char;
+        } else {
+            currentLine = testLine;
         }
-        const containerSize = this._containerSize();
-        if (containerSize.x <= 0 || containerSize.y <= 0) {
-            return false;
+        if (i === chars.length - 1 && currentLine) {
+            lines.push(currentLine);
         }
-        panView(this._engine, viewSizeToNDC(delta, containerSize));
-        this._emitChange(center, source);
-        return true;
     }
-    /**
-   * 按倍率缩放视口。
-   * @param factor 缩放倍率
-   * @param center 缩放中心
-   * @param source 操作来源
-   * @returns 视口是否发生变化
-   */ zoomByFactor(factor, center, source) {
-        if (!this._hasViewport() || !Number.isFinite(factor) || factor <= 0) {
-            return false;
-        }
-        const currentScale = GizmoViewportUtils.getViewScale(this._engine);
-        const nextScale = clamp(currentScale * factor, this._minScale, this._maxScale);
-        if (nextScale === currentScale) {
-            return false;
-        }
-        const containerSize = this._containerSize();
-        if (containerSize.x <= 0 || containerSize.y <= 0) {
-            return false;
-        }
-        zoomView(this._engine, nextScale - currentScale, viewPositionToNDC(center, containerSize));
-        this._emitChange(center, source);
-        return true;
+    return lines.slice(0, maxLines);
+}
+/**
+ * 绘制由 4 个角点构成的（可能非正交的）包围盒边框。
+ * @param control 绘制控制器
+ * @param corners 4 个角点（视图坐标，Y 向下）
+ * @param color 边框颜色
+ * @param width 线宽
+ */ function drawCorners(control, corners, color, width) {
+    if (corners.length < 4) {
+        return;
     }
-    /** 释放配置订阅和事件监听器。 */ dispose() {
-        this._configOff?.();
-        this._configOff = undefined;
-        for (const listener of this.getListeners('change').slice()){
-            this.off('change', listener);
-        }
+    for(let i = 0; i < 4; i++){
+        const start = corners[i];
+        const end = corners[(i + 1) % 4];
+        control.drawLine(start.x, start.y, end.x, end.y, color, width);
     }
-    /**
-   * 根据滚轮来源和修饰键确定导航模式。
-   * @param event 滚轮事件
-   * @param source 输入设备类型
-   * @returns 滚轮导航模式
-   */ _classifyWheel(event, source) {
-        const signature = `${source}:${Number(event.ctrlPressed)}:${Number(event.metaPressed)}`;
-        if (signature !== this._wheelSignature) {
-            this._wheelSignature = signature;
-            this._wheelMode = event.ctrlPressed || event.metaPressed || source === 'mouse' && this.config.scrollWheelZoom ? 'zoom' : 'pan';
-        }
-        return this._wheelMode;
+}
+/**
+ * 绘制虚线包围盒，并在相邻边之间保持连续虚线相位。
+ * @param control 绘制控制器
+ * @param corners 四个视图角点
+ * @param color 虚线颜色
+ * @param width 线宽
+ * @param dashLength 实线段长度
+ * @param gapLength 间隔长度
+ */ function drawDashedCorners(control, corners, color, width, dashLength, gapLength) {
+    // 1. 校验角点和虚线参数。
+    if (corners.length < 4 || dashLength <= 0 || gapLength < 0) {
+        return;
     }
-    /**
-   * 将方向型滚轮事件转换为视图位移。
-   * @param event 滚轮事件
-   * @returns 视图位移和输入设备类型
-   */ _normalizeWheel(event) {
-        const delta = new Vector2();
-        switch(event.buttonIndex){
-            case MouseButton.WheelUp:
-                delta.y = event.factor;
-                break;
-            case MouseButton.WheelDown:
-                delta.y = -event.factor;
-                break;
-            case MouseButton.WheelLeft:
-                delta.x = event.factor;
-                break;
-            case MouseButton.WheelRight:
-                delta.x = -event.factor;
-                break;
-        }
-        // Windows 下 Shift + 滚轮映射为水平平移。
-        const isApplePlatform = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
-        if (!isApplePlatform && event.shiftPressed && delta.x === 0) {
-            delta.x = delta.y;
-            delta.y = 0;
+    const patternLength = dashLength + gapLength;
+    let perimeterOffset = 0;
+    // 2. 逐边计算虚线相位，并继承上一条边的周长偏移。
+    for(let i = 0; i < 4; i++){
+        const start = corners[i];
+        const end = corners[(i + 1) % 4];
+        const dx = end.x - start.x;
+        const dy = end.y - start.y;
+        const edgeLength = Math.hypot(dx, dy);
+        if (edgeLength <= Number.EPSILON) {
+            continue;
         }
-        const source = event.ctrlPressed || event.metaPressed || !Number.isInteger(event.factor) || delta.x !== 0 ? 'trackpad' : 'mouse';
-        return {
-            delta,
-            source
-        };
-    }
-    /**
-   * 按绝对缩放增量更新视口。
-   * @param shift 缩放增量
-   * @param center 缩放中心
-   * @param source 操作来源
-   * @returns 视口是否发生变化
-   */ _zoomByShift(shift, center, source) {
-        const currentScale = GizmoViewportUtils.getViewScale(this._engine);
-        const nextScale = roundNumber(clamp(currentScale + shift, this._minScale, this._maxScale), 2);
-        if (nextScale === currentScale) {
-            return false;
+        let edgeOffset = 0;
+        while(edgeOffset < edgeLength){
+            const patternOffset = perimeterOffset % patternLength;
+            const drawingDash = gapLength === 0 || patternOffset < dashLength;
+            const phaseRemaining = drawingDash ? dashLength - patternOffset : patternLength - patternOffset;
+            const segmentLength = Math.min(phaseRemaining, edgeLength - edgeOffset);
+            // 3. 仅绘制当前相位中的实线段。
+            if (drawingDash && segmentLength > Number.EPSILON) {
+                const startRatio = edgeOffset / edgeLength;
+                const endRatio = (edgeOffset + segmentLength) / edgeLength;
+                control.drawLine(start.x + dx * startRatio, start.y + dy * startRatio, start.x + dx * endRatio, start.y + dy * endRatio, color, width);
+            }
+            edgeOffset += segmentLength;
+            perimeterOffset += segmentLength;
         }
-        return this.zoomByFactor(nextScale / currentScale, center, source);
-    }
-    /**
-   * 发出当前视口快照。
-   * @param center 操作中心
-   * @param source 操作来源
-   */ _emitChange(center, source) {
-        const containerSize = this._containerSize();
-        this.emit('change', {
-            source,
-            scale: GizmoViewportUtils.getViewScale(this._engine),
-            translation: ndcSizeToViewSize(GizmoViewportUtils.getViewportTranslation(this._engine), containerSize),
-            center: center.clone()
-        });
-    }
-    /** @returns 当前画布容器尺寸。 */ _containerSize() {
-        return GizmoViewportUtils.getContainerSize(this._engine.canvas.parentElement);
-    }
-    /** @returns 是否存在可操作的画布容器和相机。 */ _hasViewport() {
-        return Boolean(this._engine.canvas.parentElement && this._engine.compositions[0]?.camera);
-    }
-    /**
-   * @param owner Gizmo 宿主
-   */ constructor(owner){
-        super(), _define_property(this, "_owner", void 0), _define_property(this, "_minScale", 0.01), _define_property(this, "_maxScale", 20), _define_property(this, "_configOff", void 0), _define_property(this, "_wheelSignature", ''), _define_property(this, "_wheelMode", 'pan');
-        this._owner = owner;
-        this._configOff = owner.getConfigManager().onChange(viewportNavigationConfig, ()=>{
-            this._wheelSignature = '';
-        });
     }
 }
+/**
+ * 绘制包围盒边框（沿 4 个角点连边）。
+ * @param control 绘制控制器
+ * @param box 包围盒（视图坐标，Y 向下）
+ * @param color 边框颜色
+ * @param width 线宽
+ */ function drawBox(control, box, color, width) {
+    drawCorners(control, box.corners, color, width);
+}
+/**
+ * 填充轴对齐包围盒（实心矩形）。
+ * @param control 绘制控制器
+ * @param box 包围盒（视图坐标，Y 向下）
+ * @param color 填充颜色
+ */ function fillBox(control, box, color) {
+    const size = box.getSize();
+    control.fillRect(box.min.x, box.min.y, size.x, size.y, color);
+}
+/**
+ * 构造沿局部轴展开的旋转矩形角点。
+ * @param center 矩形中心（视图坐标）
+ * @param xAxis 局部 X 轴单位向量（视图坐标，宽方向）
+ * @param yAxis 局部 Y 轴单位向量（视图坐标，高方向）
+ * @param halfWidth 半宽（沿 xAxis，视图像素）
+ * @param halfHeight 半高（沿 yAxis，视图像素）
+ * @returns 4 个角点（视图坐标，环绕顺序）
+ */ function rotatedRectCorners(center, xAxis, yAxis, halfWidth, halfHeight) {
+    const halfW = xAxis.clone().multiply(halfWidth);
+    const halfH = yAxis.clone().multiply(halfHeight);
+    return [
+        center.clone().subtract(halfW).subtract(halfH),
+        center.clone().add(halfW).subtract(halfH),
+        center.clone().add(halfW).add(halfH),
+        center.clone().subtract(halfW).add(halfH)
+    ];
+}
+/**
+ * 填充沿局部轴展开的旋转矩形。
+ * @param control 绘制控制器
+ * @param center 矩形中心（视图坐标）
+ * @param xAxis 局部 X 轴单位向量（视图坐标，宽方向）
+ * @param yAxis 局部 Y 轴单位向量（视图坐标，高方向）
+ * @param width 宽（沿 xAxis，视图像素）
+ * @param height 高（沿 yAxis，视图像素）
+ * @param color 填充颜色
+ */ function fillRotatedRect(control, center, xAxis, yAxis, width, height, color) {
+    const ex = xAxis.clone();
+    const ey = yAxis.clone();
+    const anchor = center.clone();
+    drawRotatedQuad(control, anchor, ex, ey, ()=>{
+        control.fillRect(-width / 2, -height / 2, width, height, color);
+    });
+}
+/**
+ * 在由锚点和两个基向量定义的局部坐标系内执行绘制。
+ * @param control 绘制控制器
+ * @param anchor Control 绘制空间锚点（局部原点）
+ * @param ex 局部 X 轴基向量（单位向量）
+ * @param ey 局部 Y 轴基向量（单位向量）
+ * @param drawFn 在局部坐标系内执行的绘制
+ */ function drawRotatedQuad(control, anchor, ex, ey, drawFn) {
+    const graphics = control.engine.graphics;
+    // 列优先：第一列 = ex，第二列 = ey，第三列 = anchor（平移）
+    const matrix = Matrix3.fromColumnVectors(new Vector3(ex.x, ex.y, 0), new Vector3(ey.x, ey.y, 0), new Vector3(anchor.x, anchor.y, 1));
+    graphics.pushTransform(matrix);
+    drawFn();
+    graphics.popTransform();
+}
 /** 缩放角点的桌面端命中区域边长；视觉手柄仍由 scaleCircleSize 控制。 */ const SCALE_CORNER_HIT_SIZE = 14;
 /** 单选信息标签中的类型图标尺寸。 */ const INFO_ICON_SIZE = 15;
 /** 图标相对选框顶边的底部偏移。 */ const INFO_ICON_BOTTOM = 5.5;
@@ -74018,7 +73699,7 @@ const itemCreateConfig = defineConfig({
    */ _getIconUrl(type) {
         const urlMap = {
             'null': '',
-            'image': this.config.pictureLogoUrl,
+            'image': this.config.imageLogoUrl,
             'group': this.config.groupLogoUrl,
             'text': this.config.textLogoUrl,
             'video': this.config.videoLogoUrl,
@@ -74036,7 +73717,7 @@ const itemCreateConfig = defineConfig({
         const logoKeys = [
             {
                 type: "image",
-                key: 'pictureLogoUrl'
+                key: 'imageLogoUrl'
             },
             {
                 type: "group",
@@ -76202,6 +75883,12 @@ const itemCreateConfig = defineConfig({
         this._session.syncTextArea(this.result, this.viewScale);
     }
     /**
+   * 选中当前编辑文本的全部内容，并将焦点交给输入框。
+   * @returns 当前存在可编辑文本时返回 true
+   */ selectAllText() {
+        return this._session.selectAllText();
+    }
+    /**
    * 绘制文本编辑包围盒。
    * @param control 绘制控制器
    */ _drawEditBox(control) {
@@ -76485,16 +76172,16 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         this._session = new TextEditSession(_owner);
     }
 }
-/** 图片裁切和扩边的交互类型。 */ var PictureInteractionType = /*#__PURE__*/ function(PictureInteractionType) {
-    /** 无交互。 */ PictureInteractionType["NONE"] = "none";
-    /** 角点双轴缩放。 */ PictureInteractionType["SCALE"] = "scale";
-    /** 边中点单轴缩放。 */ PictureInteractionType["DIRECTION_SCALE"] = "direction-scale";
-    /** 移动交互框。 */ PictureInteractionType["MOVE"] = "move";
-    return PictureInteractionType;
+/** 图片裁切和扩边的交互类型。 */ var ImageInteractionType = /*#__PURE__*/ function(ImageInteractionType) {
+    /** 无交互。 */ ImageInteractionType["NONE"] = "none";
+    /** 角点双轴缩放。 */ ImageInteractionType["SCALE"] = "scale";
+    /** 边中点单轴缩放。 */ ImageInteractionType["DIRECTION_SCALE"] = "direction-scale";
+    /** 移动交互框。 */ ImageInteractionType["MOVE"] = "move";
+    return ImageInteractionType;
 }({});
-/** 在图片元素范围内移动或缩放归一化裁剪框。 */ class PictureCutGizmo extends Gizmo {
+/** 在图片元素范围内移动或缩放归一化裁剪框。 */ class ImageCutGizmo extends Gizmo {
     /** 当前图片裁剪配置。 */ get config() {
-        return this._owner.getConfigManager().get(pictureCutConfig);
+        return this._owner.getConfigManager().get(imageCutConfig);
     }
     /** 当前选中的元素（直读 selection.getSelectedPlayerItems：id→VFXItem 已解析）。 */ get selectedItems() {
         return this._owner.getSelection().getSelectedPlayerItems();
@@ -76530,7 +76217,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         const inputPosition = new Vector2(event.position.x, event.position.y);
         this.refreshInteractionType(hover, inputPosition);
         this._owner.setCursor(this.cursorResult);
-        if (event.buttonMask === MouseButtonMask.None && (this.interactionParam.type === PictureInteractionType.SCALE || this.interactionParam.type === PictureInteractionType.DIRECTION_SCALE)) {
+        if (event.buttonMask === MouseButtonMask.None && (this.interactionParam.type === ImageInteractionType.SCALE || this.interactionParam.type === ImageInteractionType.DIRECTION_SCALE)) {
             event.accept();
         }
     }
@@ -76559,9 +76246,9 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
             return;
         }
         this.interactionParam = {
-            type: PictureInteractionType.NONE
+            type: ImageInteractionType.NONE
         };
-        this.refreshCursorResult(PictureInteractionType.NONE);
+        this.refreshCursorResult(ImageInteractionType.NONE);
         this._owner.setCursor(this.cursorResult);
     }
     /** @returns 是否仅选中了一个可裁剪元素。 */ _isApplicableSelection() {
@@ -76576,7 +76263,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         if (!this._mouseGrabbed) {
             return false;
         }
-        if (this.interactionParam.type === PictureInteractionType.NONE) {
+        if (this.interactionParam.type === ImageInteractionType.NONE) {
             return true;
         }
         // 步骤 2：获取实时投影并计算指针位移。
@@ -76591,7 +76278,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         const { min: itemBoxMin, max: itemBoxMax } = itemBox;
         // 步骤 3：按移动、角点缩放或边缩放更新归一化裁剪框。
         switch(this.interactionParam.type){
-            case PictureInteractionType.MOVE:
+            case ImageInteractionType.MOVE:
                 {
                     const { min: originMin, max: originMax } = box;
                     const xMinShift = itemBoxMin.x - originMin.x;
@@ -76604,7 +76291,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
                     this.result.normalizeCutBox = getNormalizeBoxByBoxes(itemBox, resultBox);
                     break;
                 }
-            case PictureInteractionType.SCALE:
+            case ImageInteractionType.SCALE:
                 {
                     const { startCorner, anchor } = this.interactionParam;
                     const resultCorner = new Vector2();
@@ -76669,7 +76356,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
                     }
                     break;
                 }
-            case PictureInteractionType.DIRECTION_SCALE:
+            case ImageInteractionType.DIRECTION_SCALE:
                 {
                     var _this_interactionParam1;
                     const { index } = this.interactionParam;
@@ -76744,7 +76431,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         const inputPosition = new Vector2(event.position.x, event.position.y);
         this.refreshInteractionType(mouse, inputPosition);
         this._owner.setCursor(this.cursorResult);
-        if (this.interactionParam.type === PictureInteractionType.NONE) {
+        if (this.interactionParam.type === ImageInteractionType.NONE) {
             return;
         }
         this._mouseGrabbed = true;
@@ -76841,7 +76528,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
    * @param angle 指针方向
    */ refreshCursorResult(activeType, angle = 0) {
         switch(activeType){
-            case PictureInteractionType.SCALE:
+            case ImageInteractionType.SCALE:
                 {
                     this.cursorResult = {
                         type: GestureCursorType.SCALE,
@@ -76849,7 +76536,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
                     };
                     break;
                 }
-            case PictureInteractionType.DIRECTION_SCALE:
+            case ImageInteractionType.DIRECTION_SCALE:
                 {
                     this.cursorResult = {
                         type: GestureCursorType.SCALE,
@@ -76857,8 +76544,8 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
                     };
                     break;
                 }
-            case PictureInteractionType.MOVE:
-            case PictureInteractionType.NONE:
+            case ImageInteractionType.MOVE:
+            case ImageInteractionType.NONE:
                 {
                     this.cursorResult = {
                         type: GestureCursorType.NORMAL,
@@ -76908,7 +76595,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
    */ refreshInteractionType(point, inputPosition) {
         // 步骤 1：重置交互状态并获取实时裁剪投影。
         this.interactionParam = {
-            type: PictureInteractionType.NONE
+            type: ImageInteractionType.NONE
         };
         const projection = this._projectSelection();
         if (!projection) {
@@ -76925,7 +76612,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
             if (corner.distance(point) < this.config.scaleInteractionDistance) {
                 hasInteractionType = true;
                 this.interactionParam = {
-                    type: PictureInteractionType.SCALE,
+                    type: ImageInteractionType.SCALE,
                     box: cutBox.clone(),
                     startMouse: inputPosition,
                     startCorner: corner.clone(),
@@ -76950,7 +76637,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
             if (state) {
                 hasInteractionType = true;
                 this.interactionParam = {
-                    type: PictureInteractionType.DIRECTION_SCALE,
+                    type: ImageInteractionType.DIRECTION_SCALE,
                     index,
                     box: cutBox.clone(),
                     startMouse: inputPosition
@@ -76961,7 +76648,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         // 步骤 4：最后检测裁剪区域整体移动并刷新光标。
         if (cutBox.containsPoint(point) && !hasInteractionType) {
             this.interactionParam = {
-                type: PictureInteractionType.MOVE,
+                type: ImageInteractionType.MOVE,
                 box: cutBox.clone(),
                 startMouse: inputPosition
             };
@@ -76973,8 +76660,8 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         super(...args), _define_property(this, "result", {
             normalizeCutBox: new Box2(new Vector2(), new Vector2(1, 1))
         }), /** 仅供当前渲染帧使用的投影快照；输入不读取它。 */ _define_property(this, "_renderProjection", void 0), _define_property(this, "interactionParam", {
-            type: PictureInteractionType.NONE
-        }), _define_property(this, "type", GizmoType.PICTURE_CUT), /** 光标结果。 */ _define_property(this, "cursorResult", {
+            type: ImageInteractionType.NONE
+        }), _define_property(this, "type", GizmoType.IMAGE_CUT), /** 光标结果。 */ _define_property(this, "cursorResult", {
             type: GestureCursorType.NORMAL,
             angle: 0
         }), _define_property(this, "_isLockScale", false), _define_property(this, "_mouseGrabbed", false);
@@ -76983,13 +76670,13 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
 /** 图片裁切工具。 */ class ImageCutGizmoTool extends GizmoTool {
     /** @returns 图片裁切 Gizmo 图。 */ createGizmos() {
         return [
-            new PictureCutGizmo(this.owner)
+            new ImageCutGizmo(this.owner)
         ];
     }
 }
-/** 在图片范围外移动或缩放归一化扩边框。 */ class PictureExpandGizmo extends Gizmo {
+/** 在图片范围外移动或缩放归一化扩边框。 */ class ImageExpandGizmo extends Gizmo {
     /** 当前图片扩边配置。 */ get config() {
-        return this._owner.getConfigManager().get(pictureExpandConfig);
+        return this._owner.getConfigManager().get(imageExpandConfig);
     }
     /** 当前选中的元素（直读 selection.getSelectedPlayerItems：id→VFXItem 已解析）。 */ get selectedItems() {
         return this._owner.getSelection().getSelectedPlayerItems();
@@ -77025,7 +76712,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         const inputPosition = new Vector2(event.position.x, event.position.y);
         this.refreshInteractionType(hover, inputPosition);
         this._owner.setCursor(this.cursorResult);
-        if (event.buttonMask === MouseButtonMask.None && (this.interactionParam.type === PictureInteractionType.SCALE || this.interactionParam.type === PictureInteractionType.DIRECTION_SCALE)) {
+        if (event.buttonMask === MouseButtonMask.None && (this.interactionParam.type === ImageInteractionType.SCALE || this.interactionParam.type === ImageInteractionType.DIRECTION_SCALE)) {
             event.accept();
         }
     }
@@ -77054,9 +76741,9 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
             return;
         }
         this.interactionParam = {
-            type: PictureInteractionType.NONE
+            type: ImageInteractionType.NONE
         };
-        this.refreshCursorResult(PictureInteractionType.NONE);
+        this.refreshCursorResult(ImageInteractionType.NONE);
         this._owner.setCursor(this.cursorResult);
     }
     /** @returns 是否仅选中了一个可扩边元素。 */ _isApplicableSelection() {
@@ -77071,7 +76758,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         if (!this._mouseGrabbed) {
             return false;
         }
-        if (this.interactionParam.type === PictureInteractionType.NONE) {
+        if (this.interactionParam.type === ImageInteractionType.NONE) {
             return true;
         }
         // 步骤 2：获取实时投影并计算指针位移。
@@ -77086,7 +76773,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         const { min: itemBoxMin, max: itemBoxMax } = itemBox;
         // 步骤 3：按移动、角点缩放或边缩放更新归一化扩边框。
         switch(this.interactionParam.type){
-            case PictureInteractionType.MOVE:
+            case ImageInteractionType.MOVE:
                 {
                     const { min: originMin, max: originMax } = box;
                     const xMinShift = itemBoxMax.x - originMax.x;
@@ -77099,7 +76786,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
                     this.result.normalizeExpandBox = getNormalizeBoxByBoxes(itemBox, resultBox);
                     break;
                 }
-            case PictureInteractionType.SCALE:
+            case ImageInteractionType.SCALE:
                 {
                     const { index } = this.interactionParam;
                     const { min, max } = box;
@@ -77158,7 +76845,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
                     ]));
                     break;
                 }
-            case PictureInteractionType.DIRECTION_SCALE:
+            case ImageInteractionType.DIRECTION_SCALE:
                 {
                     var _this_interactionParam1;
                     const { index } = this.interactionParam;
@@ -77276,7 +76963,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         const inputPosition = new Vector2(event.position.x, event.position.y);
         this.refreshInteractionType(mouse, inputPosition);
         this._owner.setCursor(this.cursorResult);
-        if (this.interactionParam.type === PictureInteractionType.NONE) {
+        if (this.interactionParam.type === ImageInteractionType.NONE) {
             return;
         }
         this._mouseGrabbed = true;
@@ -77363,7 +77050,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
    * @param angle 指针方向角度。
    */ refreshCursorResult(activeType, angle = 0) {
         switch(activeType){
-            case PictureInteractionType.SCALE:
+            case ImageInteractionType.SCALE:
                 {
                     this.cursorResult = {
                         type: GestureCursorType.SCALE,
@@ -77371,7 +77058,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
                     };
                     break;
                 }
-            case PictureInteractionType.DIRECTION_SCALE:
+            case ImageInteractionType.DIRECTION_SCALE:
                 {
                     this.cursorResult = {
                         type: GestureCursorType.SCALE,
@@ -77379,8 +77066,8 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
                     };
                     break;
                 }
-            case PictureInteractionType.MOVE:
-            case PictureInteractionType.NONE:
+            case ImageInteractionType.MOVE:
+            case ImageInteractionType.NONE:
                 {
                     this.cursorResult = {
                         type: GestureCursorType.NORMAL,
@@ -77429,7 +77116,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
    * @param inputPosition Control 本地坐标鼠标位置
    */ refreshInteractionType(point, inputPosition) {
         // 步骤 1：重置交互状态并获取实时扩边投影。
-        this.interactionParam.type = PictureInteractionType.NONE;
+        this.interactionParam.type = ImageInteractionType.NONE;
         const projection = this._projectSelection();
         if (!projection) {
             return;
@@ -77445,7 +77132,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
             if (corner.distance(point) < 20) {
                 hasInteractionType = true;
                 this.interactionParam = {
-                    type: PictureInteractionType.SCALE,
+                    type: ImageInteractionType.SCALE,
                     index,
                     box: expandBox.clone(),
                     startMouse: inputPosition
@@ -77469,7 +77156,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
             if (state) {
                 hasInteractionType = true;
                 this.interactionParam = {
-                    type: PictureInteractionType.DIRECTION_SCALE,
+                    type: ImageInteractionType.DIRECTION_SCALE,
                     index,
                     box: expandBox.clone(),
                     startMouse: inputPosition
@@ -77480,7 +77167,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         // 步骤 4：最后检测扩边区域整体移动并刷新光标。
         if (expandBox.containsPoint(point) && !hasInteractionType) {
             this.interactionParam = {
-                type: PictureInteractionType.MOVE,
+                type: ImageInteractionType.MOVE,
                 box: expandBox.clone(),
                 startMouse: inputPosition
             };
@@ -77492,8 +77179,8 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
         super(...args), _define_property(this, "result", {
             normalizeExpandBox: new Box2(new Vector2(), new Vector2(1, 1))
         }), _define_property(this, "_renderProjection", void 0), _define_property(this, "interactionParam", {
-            type: PictureInteractionType.NONE
-        }), _define_property(this, "type", GizmoType.PICTURE_EXPAND), /** 光标结果。 */ _define_property(this, "cursorResult", {
+            type: ImageInteractionType.NONE
+        }), _define_property(this, "type", GizmoType.IMAGE_EXPAND), /** 光标结果。 */ _define_property(this, "cursorResult", {
             type: GestureCursorType.NORMAL,
             angle: 0
         }), _define_property(this, "_isLockScale", false), _define_property(this, "_mouseGrabbed", false);
@@ -77502,7 +77189,7 @@ _define_property(SelectTextGizmo, "HOVER_GAP_LENGTH", 4);
 /** 图片扩边工具。 */ class ImageExpandGizmoTool extends GizmoTool {
     /** @returns 图片扩边 Gizmo 图。 */ createGizmos() {
         return [
-            new PictureExpandGizmo(this.owner)
+            new ImageExpandGizmo(this.owner)
         ];
     }
 }
@@ -77746,7 +77433,7 @@ const EDIT_TEXT_FONT_FAMILY = 'sans-serif';
         }), /** onMouseMove 命中缓存（坐标未变则跳过 _computePreSelected，避免每帧全 result 命中扫描）。 */ _define_property(this, "_cachedCoords", null);
     }
 }
-/** 图片精准文字编辑工具。 */ class ImageTextEditGizmoTool extends GizmoTool {
+/** Sprite 精准文字编辑工具。 */ class SpriteTextEditGizmoTool extends GizmoTool {
     /** @returns 精准文字编辑 Gizmo 图。 */ createGizmos() {
         return [
             new SpriteTextEditGizmo(this.owner)
@@ -78317,8 +78004,8 @@ const EDIT_TEXT_FONT_FAMILY = 'sans-serif';
         void this._refreshMaskImage(this.config.maskImage);
     }
 }
-/** 图片蒙版编辑工具。 */ class ImageMaskGizmoTool extends GizmoTool {
-    /** @returns 图片蒙版 Gizmo 图。 */ createGizmos() {
+/** 蒙版编辑工具。 */ class MaskGizmoTool extends GizmoTool {
+    /** @returns 蒙版 Gizmo 图。 */ createGizmos() {
         return [
             new MaskGizmo(this.owner)
         ];
@@ -80464,6 +80151,348 @@ const cursorMap = {
         console.error(e);
     });
 }
+const LOADING_TIP_FONT_SIZE = 16;
+const LOADING_TIP_FONT_FAMILY = 'sans-serif';
+const LOADING_TIP_COLOR = 0x000000;
+/** 为目标元素叠加加载动画与提示文案。 */ class LoadingGizmo extends Gizmo {
+    /** 当前加载覆盖层配置。 */ get config() {
+        return this._owner.getConfigManager().get(loadingConfig);
+    }
+    /** 当前 Gizmo 实例持有的可销毁渲染投影。 */ get idMap() {
+        return this._idMap;
+    }
+    /** 当前 loading 元素 id 列表（由稳定 manager 派生）。 */ get loadingIds() {
+        return this._manager.ids;
+    }
+    /**
+   * 在片元着色器变化时重建加载动画对象。
+   * @param change 加载配置变更。
+   */ _onConfigChange(change) {
+        if (change.previous.loadingFragment === change.current.loadingFragment) {
+            return;
+        }
+        for (const [id, loadingItem] of this._idMap){
+            this._disposeLoadingVFXItem(loadingItem.loadingVFXItem);
+            loadingItem.loadingVFXItem = this.createLoadingVFXItem();
+            this.updateLoadingVFXItemTransform(id, loadingItem);
+        }
+    }
+    /**
+   * 订阅 loading 集合变化：add/delete 后回调当前全量 id 列表。
+   * @param cb 收到当前全量 loading id 列表的回调
+   * @returns 退订函数，调用后取消对应监听
+   */ onLoadingChange(cb) {
+        return this._manager.on('change', (change)=>{
+            if (change.addedIds.length > 0 || change.removedIds.length > 0) {
+                cb(change.ids);
+            }
+        });
+    }
+    /**
+   * 为指定元素添加 loading 覆盖层；同一元素不可重复添加。
+   * @param id 目标元素 ID
+   * @param options loading 配置（文案、位置、自定义区域、是否清空选中）
+   */ add(id, options) {
+        this._manager.add(id, options);
+    }
+    /**
+   * 移除指定元素的 loading 覆盖层并释放对应 VFXItem。
+   * @param id 目标元素 ID
+   */ delete(id) {
+        this._manager.delete(id);
+    }
+    /**
+   * 更新指定 loading 元素的提示文案。
+   * @param id 目标元素 ID
+   * @param options 待合并更新的 LoadingTip 属性
+   */ updateItem(id, options) {
+        this._manager.update(id, options);
+    }
+    /** 根据目标元素的实时包围盒刷新加载动画。 */ onPreRender() {
+        if (this._idMap.size === 0) {
+            return;
+        }
+        for (const [id, loadingItem] of this._idMap){
+            this.updateLoadingVFXItemTransform(id, loadingItem);
+        }
+    }
+    /**
+   * 绘制所有加载提示文案。
+   * @param control 绘制控制器。
+   */ draw(control) {
+        if (this._idMap.size === 0) {
+            return;
+        }
+        for (const [id, loadingItem] of this._idMap){
+            if (!loadingItem.tip?.text) {
+                continue;
+            }
+            const item = getPlayerItemById(this._owner.getEngine().compositions[0], id);
+            const itemBox = item ? getItemViewBox(item, GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement)) : new Box2();
+            const loadingBox = getBoxByNormalizeBox(itemBox, loadingItem.loadingBox);
+            this.drawLoadingTip(control, loadingBox, itemBox, loadingItem.tip);
+        }
+    }
+    /**
+   * 绘制单条加载提示，并将文本限制在加载区域内。
+   * @param control 绘制控制器。
+   * @param loadingBox 加载区域。
+   * @param itemBox 目标元素包围盒。
+   * @param tip 加载提示配置。
+   */ drawLoadingTip(control, loadingBox, itemBox, tip) {
+        // 步骤 1：计算提示位置与可用宽度。
+        const { x: width, y: height } = loadingBox.getSize(this._loadingBoxSize);
+        if (!tip.text || !Number.isFinite(width) || width <= 0) {
+            return;
+        }
+        const positionedLeft = tip.position ? itemBox.min.x + (Number.isFinite(tip.position.x) ? tip.position.x : 0) : loadingBox.min.x;
+        const left = tip.position ? Math.min(Math.max(positionedLeft, loadingBox.min.x), loadingBox.max.x) : loadingBox.min.x;
+        const availableWidth = tip.position ? loadingBox.max.x - left : width;
+        if (availableWidth <= 0) {
+            return;
+        }
+        /**
+     * 测量加载提示的粗体字形。
+     * @param text 提示文本。
+     * @param fontSize 字号。
+     * @returns 文本字形尺寸。
+     */ const measureTipText = (text, fontSize)=>{
+            const metrics = measureTextMetrics(text, fontSize, LOADING_TIP_FONT_FAMILY, 'bold');
+            return {
+                width: metrics.width || Array.from(text).length * fontSize,
+                actualBoundingBoxAscent: metrics.actualBoundingBoxAscent || fontSize * 0.8,
+                actualBoundingBoxDescent: metrics.actualBoundingBoxDescent || fontSize * 0.2
+            };
+        };
+        // 步骤 2：测量文本并缩小字号以适应可用宽度。
+        const measuredAtBaseSize = measureTipText(tip.text, LOADING_TIP_FONT_SIZE);
+        let fontSize = measuredAtBaseSize.width > availableWidth ? LOADING_TIP_FONT_SIZE * availableWidth / measuredAtBaseSize.width : LOADING_TIP_FONT_SIZE;
+        let textMetrics = measureTipText(tip.text, fontSize);
+        if (textMetrics.width > availableWidth) {
+            fontSize *= availableWidth / textMetrics.width;
+            textMetrics = measureTipText(tip.text, fontSize);
+        }
+        // 步骤 3：按字形基线计算最终绘制位置。
+        const textLeft = tip.position ? left : loadingBox.min.x + (width - textMetrics.width) / 2;
+        const inkHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
+        const top = tip.position ? itemBox.min.y + (Number.isFinite(tip.position.y) ? tip.position.y : 0) : loadingBox.min.y + (height - inkHeight) / 2;
+        const probeMetrics = measureTipText(METRICS_STRING + BASELINE_SYMBOL, fontSize);
+        const inkTopFromCellTop = CONTROL_TEXT_GLYPH_PADDING + probeMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxAscent;
+        control.drawText(textLeft, top - inkTopFromCellTop, tip.text, fontSize, toColor(LOADING_TIP_COLOR, 1), LOADING_TIP_FONT_FAMILY, 'bold');
+    }
+    /** 释放当前实例的渲染投影；稳定 LoadingManager 不随 Gizmo 重建清空。 */ dispose() {
+        this._configOff?.();
+        this._configOff = undefined;
+        this._managerOff?.();
+        this._managerOff = undefined;
+        this._idMap.forEach((loadingItem)=>{
+            this._disposeLoadingVFXItem(loadingItem.loadingVFXItem);
+        });
+        this._idMap.clear();
+        super.dispose();
+    }
+    /** 将可销毁的渲染投影同步到当前加载状态。 */ _syncManager() {
+        const activeIds = new Set(this._manager.ids);
+        for (const [id, loadingItem] of this._idMap){
+            if (!activeIds.has(id)) {
+                this._disposeLoadingVFXItem(loadingItem.loadingVFXItem);
+                this._idMap.delete(id);
+            }
+        }
+        for (const id of activeIds){
+            const state = this._manager.get(id);
+            if (!state) {
+                continue;
+            }
+            const existing = this._idMap.get(id);
+            if (existing) {
+                existing.tip = {
+                    ...state.tip,
+                    position: state.tip.position ? state.tip.position.clone() : undefined
+                };
+            } else {
+                this._createProjection(id, state);
+            }
+        }
+    }
+    /**
+   * 为加载状态创建渲染投影。
+   * @param id 目标元素 ID。
+   * @param state 加载状态。
+   */ _createProjection(id, state) {
+        const item = getPlayerItemById(this._owner.getEngine().compositions[0], id);
+        const itemViewBox = item ? getItemViewBox(item, GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement)) : new Box2();
+        const currentBox = state.loadingBox ? this.getViewBoxByBox(state.loadingBox) : itemViewBox;
+        this._idMap.set(id, {
+            loadingBox: getNormalizeBoxByBoxes(itemViewBox, currentBox),
+            loadingVFXItem: this.createLoadingVFXItem(),
+            tip: {
+                ...state.tip,
+                position: state.tip.position ? state.tip.position.clone() : undefined
+            }
+        });
+        this.updateLoadingVFXItemTransform(id, this._idMap.get(id));
+    }
+    /** @returns 当前相机信息。 */ getCameraInfo() {
+        return GizmoViewportUtils.getCameraInfo(this._owner.getEngine());
+    }
+    /** @returns 当前视口的缩放、平移与尺寸。 */ getViewportParams() {
+        const composition = this._owner.getEngine().compositions[0];
+        const camera = composition?.camera;
+        if (camera) {
+            const viewportMatrix = camera.getViewportMatrix();
+            const scale = viewportMatrix.elements[0];
+            const translation = new Vector2(viewportMatrix.elements[12], viewportMatrix.elements[13]);
+            const width = GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement).x;
+            const height = GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement).y;
+            return {
+                scale,
+                translation,
+                width,
+                height
+            };
+        }
+        return {
+            scale: 1,
+            translation: new Vector2(),
+            width: GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement).x,
+            height: GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement).y
+        };
+    }
+    /**
+   * 将视图坐标下的包围盒按当前视口缩放与平移变换为实际渲染包围盒。
+   * @param box 视图坐标下的包围盒
+   * @returns 经视口缩放与平移后的实际渲染包围盒
+   */ getViewBoxByBox(box) {
+        const { scale, translation, width, height } = this.getViewportParams();
+        const center = new Vector2(width / 2, height / 2);
+        const result = scaleBox(box.clone(), scale, center).translate(translation);
+        return result;
+    }
+    /**
+   * 创建承载加载动画的 VFXItem。
+   * @returns 已绑定几何与材质的加载动画对象。
+   */ createLoadingVFXItem() {
+        // 步骤 1：创建加载动画对象与平面几何。
+        const composition = this._owner.getEngine().compositions[0];
+        const loadingVFXItem = VFXItemFactory.createVFXItem(composition, null, 'LoadingVFXItem', EffectComponent);
+        this._owner.getSelection().addIgnoreIds([
+            loadingVFXItem.getInstanceId()
+        ]);
+        loadingVFXItem.type = index$1.ItemType.effect;
+        const effects = loadingVFXItem.getComponent(EffectComponent);
+        const engine = this._owner.getEngine();
+        const geometry = Geometry.create(engine, {
+            attributes: {
+                aPos: {
+                    size: 3,
+                    data: new Float32Array([
+                        -0.5,
+                        -0.5,
+                        0,
+                        0.5,
+                        -0.5,
+                        0,
+                        0.5,
+                        0.5,
+                        0,
+                        -0.5,
+                        0.5,
+                        0
+                    ])
+                },
+                aUV: {
+                    size: 2,
+                    data: new Float32Array([
+                        0,
+                        0,
+                        1,
+                        0,
+                        1,
+                        1,
+                        0,
+                        1
+                    ])
+                }
+            },
+            indices: {
+                data: new Uint16Array([
+                    0,
+                    1,
+                    2,
+                    0,
+                    2,
+                    3
+                ])
+            },
+            mode: glContext.TRIANGLES,
+            drawCount: 6
+        });
+        // 步骤 2：使用当前配置创建动画材质。
+        const material = Material.create(engine, {
+            shader: {
+                vertex: `
+precision highp float;
+attribute vec3 aPos;
+attribute vec2 aUV;
+uniform mat4 effects_MatrixVP;
+uniform mat4 effects_ObjectToWorld;
+varying vec2 vUV;
+void main() {
+  vUV = aUV;
+  gl_Position = effects_MatrixVP * effects_ObjectToWorld * vec4(aPos, 1.0);
+}`,
+                fragment: this.config.loadingFragment
+            }
+        });
+        // 步骤 3：绑定运行时几何与材质。
+        // @ts-expect-error Effects 类型未暴露可写 geometry。
+        effects.geometry = geometry;
+        effects.material = material;
+        return loadingVFXItem;
+    }
+    /** 释放 loading 渲染对象，并同步恢复 Selection 的命中过滤。 */ _disposeLoadingVFXItem(item) {
+        this._owner.getSelection().deleteIgnoreIds([
+            item.getInstanceId()
+        ]);
+        item.dispose();
+    }
+    /**
+   * 按目标元素的实时包围盒更新加载动画变换。
+   * @param id 目标元素 ID。
+   * @param loadingItem 对应的加载渲染投影。
+   */ updateLoadingVFXItemTransform(id, loadingItem) {
+        const item = getPlayerItemById(this._owner.getEngine().compositions[0], id);
+        const containerSize = GizmoViewportUtils.getContainerSize(this._owner.getEngine().canvas.parentElement);
+        const itemViewBox = item ? getItemViewBox(item, containerSize) : new Box2();
+        const currentBox = getBoxByNormalizeBox(itemViewBox, loadingItem.loadingBox);
+        const viewPosition = new Vector2((currentBox.max.x + currentBox.min.x) / 2, (currentBox.max.y + currentBox.min.y) / 2);
+        const cameraInfo = this.getCameraInfo();
+        const interactionPlane = new Plane(0, new Vector3(0, 0, 1));
+        const worldPosition = viewPositionToWorld(viewPosition, cameraInfo, interactionPlane, containerSize);
+        const viewSize = new Vector2(currentBox.max.x - currentBox.min.x, currentBox.max.y - currentBox.min.y);
+        const worldSize = viewSizeToWorld(viewSize, containerSize, loadingItem.loadingVFXItem, cameraInfo, interactionPlane);
+        if (worldPosition) {
+            loadingItem.loadingVFXItem.transform.setPosition(worldPosition.x, worldPosition.y, 0);
+        }
+        loadingItem.loadingVFXItem.transform.setScale(worldSize.x, worldSize.y, 1);
+    }
+    /**
+   * 创建加载覆盖层。
+   * @param owner Gizmo 宿主。
+   * @param manager 加载状态管理器。
+   */ constructor(owner, manager){
+        super(owner), _define_property(this, "type", 'loading'), _define_property(this, "_configOff", void 0), _define_property(this, "_managerOff", void 0), _define_property(this, "_manager", void 0), _define_property(this, "_loadingBoxSize", new Vector2()), _define_property(this, "_idMap", new Map());
+        this._manager = manager;
+        this._configOff = owner.getConfigManager().onChange(loadingConfig, (change)=>{
+            this._onConfigChange(change);
+        });
+        this._managerOff = this._manager.on('change', ()=>{
+            this._syncManager();
+        });
+        this._syncManager();
+    }
+}
 /** 通过中键或抓手模式拖拽平移视口。 */ class HandGizmo extends Gizmo {
     /** @returns 是否正在平移或等待空格拖拽。 */ isPanning() {
         return this._dragType === "pan" || this._panKeyPressed;
@@ -83964,7 +83993,6 @@ const identityFrameItemIdAdapter = {
         },
         sceneBindings: []
     };
-    const [width, height] = size;
     const composition = {
         id: resolvedCompositionId,
         name: name + '_inner',
@@ -83988,9 +84016,7 @@ const identityFrameItemIdAdapter = {
                 0,
                 0,
                 0
-            ],
-            // @ts-expect-error: aspect 属性在 CameraOptions 上有定义但类型声明不完善
-            aspect: width / height
+            ]
         },
         components: [
             {
@@ -86944,8 +86970,9 @@ const identityFrameItemIdAdapter = {
     if (width === undefined || height === undefined) {
         return box;
     }
-    const sx = scale?.[0] ?? 1;
-    const sy = scale?.[1] ?? 1;
+    // 文本元素的scale不作为计算包围盒尺寸运算
+    const sx = schema.type === ArtisItemType.TEXT ? 1 : scale?.[0] ?? 1;
+    const sy = schema.type === ArtisItemType.TEXT ? 1 : scale?.[1] ?? 1;
     const rot = Array.isArray(rotation) ? rotation[2] : rotation ?? 0;
     rotateBox(box.setFromCenterAndSize(new Vector2(...position ?? [
         0,
@@ -88434,6 +88461,7 @@ const identityFrameItemIdAdapter = {
             ...this._newTransform,
             ...other._newTransform
         };
+        this.eventPayload.propertyKeys = Object.keys(this._newTransform);
         return true;
     }
     /**
@@ -88442,6 +88470,7 @@ const identityFrameItemIdAdapter = {
    */ constructor(args){
         _define_property$1(this, "id", void 0);
         _define_property$1(this, "commandId", 'item.transform');
+        _define_property$1(this, "eventPayload", void 0);
         _define_property$1(this, "_itemId", void 0);
         _define_property$1(this, "_newTransform", void 0);
         _define_property$1(this, "_oldTransform", void 0);
@@ -88452,6 +88481,10 @@ const identityFrameItemIdAdapter = {
         this._newTransform = args.newTransform;
         this._itemService = args.itemService;
         this._store = args.store;
+        this.eventPayload = {
+            itemId: args.itemId,
+            propertyKeys: Object.keys(args.newTransform)
+        };
     }
 }
 
@@ -89346,6 +89379,7 @@ const DEFAULT_GROUP_POSITION = [
    */ constructor(args){
         _define_property$1(this, "id", void 0);
         _define_property$1(this, "commandId", 'item.updatePropertyBySchema');
+        _define_property$1(this, "eventPayload", void 0);
         _define_property$1(this, "completion", Promise.resolve());
         _define_property$1(this, "_schemas", void 0);
         _define_property$1(this, "_itemService", void 0);
@@ -89355,6 +89389,14 @@ const DEFAULT_GROUP_POSITION = [
             args.schema
         ];
         this._itemService = args.itemService;
+        this.eventPayload = {
+            propertyChanges: this._schemas.flatMap((schema)=>schema.id ? [
+                    {
+                        itemId: schema.id,
+                        propertyKeys: Object.keys(schema.property)
+                    }
+                ] : [])
+        };
     }
 }
 
@@ -89401,6 +89443,7 @@ const DEFAULT_GROUP_POSITION = [
    */ constructor(args){
         _define_property$1(this, "id", void 0);
         _define_property$1(this, "commandId", 'item.setFontFamily');
+        _define_property$1(this, "eventPayload", void 0);
         _define_property$1(this, "completion", Promise.resolve());
         _define_property$1(this, "_itemId", void 0);
         _define_property$1(this, "_fontFamily", void 0);
@@ -89414,6 +89457,13 @@ const DEFAULT_GROUP_POSITION = [
         this._fontFamily = args.fontFamily;
         this._fontUrl = args.fontUrl;
         this._itemService = args.itemService;
+        this.eventPayload = {
+            itemId: args.itemId,
+            propertyKeys: [
+                'fontFamily',
+                'fontUrl'
+            ]
+        };
     }
 }
 
@@ -90767,7 +90817,7 @@ const DEFAULT_GROUP_POSITION = [
     }
 }
 
-/** 提交图片裁切区域变化的可撤销命令。 */ class PictureCutCommitCommand {
+/** 提交图片裁切区域变化的可撤销命令。 */ class ImageCutCommitCommand {
     /** 应用新的裁切包围盒 */ execute() {
         this._applyBox(this._newBox);
     }
@@ -90782,18 +90832,18 @@ const DEFAULT_GROUP_POSITION = [
    * @param args 命令参数（含新旧裁切包围盒与 applyBox 回调）
    */ constructor(args){
         _define_property$1(this, "id", void 0);
-        _define_property$1(this, "commandId", 'pictureCut.commit');
+        _define_property$1(this, "commandId", 'imageCut.commit');
         _define_property$1(this, "_newBox", void 0);
         _define_property$1(this, "_oldBox", void 0);
         _define_property$1(this, "_applyBox", void 0);
-        this.id = `pictureCut.commit_${Date.now()}`;
+        this.id = `imageCut.commit_${Date.now()}`;
         this._newBox = args.newBox;
         this._oldBox = args.oldBox;
         this._applyBox = args.applyBox;
     }
 }
 
-/** 提交图片扩边区域变化的可撤销命令。 */ class PictureExpandCommitCommand {
+/** 提交图片扩边区域变化的可撤销命令。 */ class ImageExpandCommitCommand {
     /** 应用新的扩图包围盒 */ execute() {
         this._applyBox(this._newBox);
     }
@@ -90808,11 +90858,11 @@ const DEFAULT_GROUP_POSITION = [
    * @param args 命令参数（含新旧扩图包围盒与 applyBox 回调）
    */ constructor(args){
         _define_property$1(this, "id", void 0);
-        _define_property$1(this, "commandId", 'pictureExpand.commit');
+        _define_property$1(this, "commandId", 'imageExpand.commit');
         _define_property$1(this, "_newBox", void 0);
         _define_property$1(this, "_oldBox", void 0);
         _define_property$1(this, "_applyBox", void 0);
-        this.id = `pictureExpand.commit_${Date.now()}`;
+        this.id = `imageExpand.commit_${Date.now()}`;
         this._newBox = args.newBox;
         this._oldBox = args.oldBox;
         this._applyBox = args.applyBox;
@@ -91040,13 +91090,29 @@ const DEFAULT_GROUP_POSITION = [
 
 /** 按元素类型静默替换在线资源且不写入历史的命令。 */ class ItemReplaceSourceCommand {
     /** 替换为新资源（async，execute 契约为 void，故 fire-and-forget） */ execute() {
-        void this._itemService.replaceSourceSilent(this._itemId, this._newUrl);
+        this.completion = this._replaceSource(this._newUrl);
     }
     /** 回退为旧资源 */ undo() {
-        void this._itemService.replaceSourceSilent(this._itemId, this._oldUrl);
+        this.completion = this._replaceSource(this._oldUrl);
     }
     /** 重新应用新资源 */ redo() {
-        void this._itemService.replaceSourceSilent(this._itemId, this._newUrl);
+        this.completion = this._replaceSource(this._newUrl);
+    }
+    /** 仅在资源实际替换成功时保留属性变化载荷。 */ async _replaceSource(url) {
+        if (this._propertyKey) {
+            this.eventPayload = {
+                itemId: this._itemId,
+                propertyKeys: [
+                    this._propertyKey
+                ]
+            };
+        }
+        const changed = await this._itemService.replaceSourceSilent(this._itemId, url);
+        if (!changed) {
+            this.eventPayload = {
+                propertyChanges: []
+            };
+        }
     }
     /** 将在线换源标记为不可重放，避免复现流程依赖外部资源时序。 */ serializeReplay() {
         return {
@@ -91065,9 +91131,12 @@ const DEFAULT_GROUP_POSITION = [
         _define_property$1(this, "commandId", 'item.replaceSource');
         _define_property$1(this, "isHistorical", false);
         _define_property$1(this, "params", void 0);
+        _define_property$1(this, "eventPayload", void 0);
+        _define_property$1(this, "completion", Promise.resolve());
         _define_property$1(this, "_itemId", void 0);
         _define_property$1(this, "_newUrl", void 0);
         _define_property$1(this, "_oldUrl", void 0);
+        _define_property$1(this, "_propertyKey", void 0);
         _define_property$1(this, "_itemService", void 0);
         _define_property$1(this, "_store", void 0);
         this.id = `item.replaceSource_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
@@ -91082,12 +91151,15 @@ const DEFAULT_GROUP_POSITION = [
             switch(item.type){
                 case ArtisItemType.SPRITE:
                     this._oldUrl = typeof prop?.image === 'string' ? prop.image : '';
+                    this._propertyKey = 'image';
                     break;
                 case ArtisItemType.VIDEO:
                     this._oldUrl = typeof prop?.video === 'string' ? prop.video : '';
+                    this._propertyKey = 'video';
                     break;
                 case ArtisItemType.EFFECTS:
                     this._oldUrl = typeof prop?.effects === 'string' ? prop.effects : '';
+                    this._propertyKey = 'effects';
                     break;
                 default:
                     this._oldUrl = '';
@@ -91095,6 +91167,14 @@ const DEFAULT_GROUP_POSITION = [
         } else {
             this._oldUrl = '';
         }
+        if (this._propertyKey) {
+            this.eventPayload = {
+                itemId: this._itemId,
+                propertyKeys: [
+                    this._propertyKey
+                ]
+            };
+        }
         this.params = {
             itemId: this._itemId,
             newUrl: this._newUrl,
@@ -91989,7 +92069,7 @@ function hasTransformItemIds(event) {
  * @param context 提供当前 Selection、ID 翻译与像素框查询
  * @param normalizeBox Gizmo 维护的归一化编辑框
  * @returns 图片像素坐标系下的包围盒；输入无效时返回空盒
- */ const getSelectedPicturePixelBox = (context, normalizeBox)=>{
+ */ const getSelectedImagePixelBox = (context, normalizeBox)=>{
     const selectedId = context.selection.getSelectedIds()[0];
     if (!normalizeBox || selectedId === undefined) {
         return new Box2();
@@ -92001,14 +92081,14 @@ function hasTransformItemIds(event) {
  * 创建图片裁剪事件绑定，以每个 Gizmo 实例的旧框快照生成可撤销命令。
  * @param context Command 绑定所需的 Artis 服务上下文
  * @returns 图片裁剪生命周期事件处理器
- */ const createPictureCutCommandBinding = (context)=>{
+ */ const createImageCutCommandBinding = (context)=>{
     const oldBoxBySource = new WeakMap();
     /**
    * 读取当前裁剪框并转换为可序列化快照。
-   * @param pictureCutGizmo 要读取的裁剪 Gizmo
+   * @param imageCutGizmo 要读取的裁剪 Gizmo
    * @returns 归一化裁剪框；Gizmo 尚无框时返回 undefined
-   */ const snapshot = (pictureCutGizmo)=>{
-        const box = pictureCutGizmo.getCutBox();
+   */ const snapshot = (imageCutGizmo)=>{
+        const box = imageCutGizmo.getCutBox();
         if (!box) {
             return undefined;
         }
@@ -92021,10 +92101,10 @@ function hasTransformItemIds(event) {
     };
     /**
    * 将归一化快照恢复为 Gizmo 使用的 Box2。
-   * @param pictureCutGizmo 要恢复的裁剪 Gizmo
+   * @param imageCutGizmo 要恢复的裁剪 Gizmo
    * @param box 命令保存的归一化裁剪框
-   */ const apply = (pictureCutGizmo, box)=>{
-        pictureCutGizmo.setCutBox(new Box2(new Vector2(box.x, box.y), new Vector2(box.x + box.width, box.y + box.height)));
+   */ const apply = (imageCutGizmo, box)=>{
+        imageCutGizmo.setCutBox(new Box2(new Vector2(box.x, box.y), new Vector2(box.x + box.width, box.y + box.height)));
     };
     return {
         /**
@@ -92042,8 +92122,8 @@ function hasTransformItemIds(event) {
      * @param event 图片裁剪 actionupdate 事件
      */ actionupdate: (event)=>{
             const normalizeBox = event.source.getCutBox();
-            context.emit('picture-cut.change', {
-                box: getSelectedPicturePixelBox(context, normalizeBox)
+            context.emit('image-cut.change', {
+                box: getSelectedImagePixelBox(context, normalizeBox)
             });
         },
         /**
@@ -92057,7 +92137,7 @@ function hasTransformItemIds(event) {
             if (!oldBox || !newBox) {
                 return;
             }
-            context.commandService.record(new PictureCutCommitCommand({
+            context.commandService.record(new ImageCutCommitCommand({
                 newBox,
                 oldBox,
                 /**
@@ -92074,14 +92154,14 @@ function hasTransformItemIds(event) {
  * 创建图片扩边事件绑定，以每个 Gizmo 实例的旧框快照生成可撤销命令。
  * @param context Command 绑定所需的 Artis 服务上下文
  * @returns 图片扩边生命周期事件处理器
- */ const createPictureExpandCommandBinding = (context)=>{
+ */ const createImageExpandCommandBinding = (context)=>{
     const oldBoxBySource = new WeakMap();
     /**
    * 读取当前扩边框并转换为可序列化快照。
-   * @param pictureExpandGizmo 要读取的扩边 Gizmo
+   * @param imageExpandGizmo 要读取的扩边 Gizmo
    * @returns 归一化扩边框；Gizmo 尚无框时返回 undefined
-   */ const snapshot = (pictureExpandGizmo)=>{
-        const box = pictureExpandGizmo.getExpandBox();
+   */ const snapshot = (imageExpandGizmo)=>{
+        const box = imageExpandGizmo.getExpandBox();
         if (!box) {
             return undefined;
         }
@@ -92115,8 +92195,8 @@ function hasTransformItemIds(event) {
      * @param event 图片扩边 actionupdate 事件
      */ actionupdate: (event)=>{
             const normalizeBox = event.source.getExpandBox();
-            context.emit('picture-expand.change', {
-                box: getSelectedPicturePixelBox(context, normalizeBox)
+            context.emit('image-expand.change', {
+                box: getSelectedImagePixelBox(context, normalizeBox)
             });
         },
         /**
@@ -92130,7 +92210,7 @@ function hasTransformItemIds(event) {
             if (!oldBox || !newBox) {
                 return;
             }
-            context.commandService.record(new PictureExpandCommitCommand({
+            context.commandService.record(new ImageExpandCommitCommand({
                 newBox,
                 oldBox,
                 /**
@@ -92191,8 +92271,8 @@ const builtinCommandBindingFactories = {
     [GizmoType.BOX_SELECTION]: registerSelectionGizmoCommandBinding,
     'item-create': createItemCreateCommandBinding,
     mask: createMaskCommandBinding,
-    'picture-cut': createPictureCutCommandBinding,
-    'picture-expand': createPictureExpandCommandBinding
+    'image-cut': createImageCutCommandBinding,
+    'image-expand': createImageExpandCommandBinding
 };
 /**
  * 将全部内置 Gizmo 类型与对应的 Command 绑定工厂注册到 Binder。
@@ -92401,8 +92481,8 @@ var BuiltinGizmoId = /*#__PURE__*/ function(BuiltinGizmoId) {
     BuiltinGizmoId["LOADING"] = "loading";
     BuiltinGizmoId["VIEWPORT_OVERLAY"] = "viewport-overlay";
     BuiltinGizmoId["READONLY_SELECTION"] = "readonly-selection";
-    BuiltinGizmoId["PICTURE_CUT"] = "picture-cut";
-    BuiltinGizmoId["PICTURE_EXPAND"] = "picture-expand";
+    BuiltinGizmoId["IMAGE_CUT"] = "image-cut";
+    BuiltinGizmoId["IMAGE_EXPAND"] = "image-expand";
     BuiltinGizmoId["SPRITE_TEXT_EDIT"] = "sprite-text-edit";
     BuiltinGizmoId["MASK"] = "mask";
     BuiltinGizmoId["ITEM_CREATE"] = "item-create";
@@ -101936,13 +102016,13 @@ var OfficialStateId = /*#__PURE__*/ function(OfficialStateId) {
 }
 /** 表示编辑图片文字内容的状态。 */ class ImageTextEditState extends BaseState {
     /** 创建隔离其他交互的图片文字编辑状态。 */ constructor(){
-        super(OfficialStateId.IMAGE_TEXT_EDIT, '精准改字', ImageTextEditGizmoTool);
+        super(OfficialStateId.IMAGE_TEXT_EDIT, '精准改字', SpriteTextEditGizmoTool);
         this.isolated = true;
     }
 }
 /** 表示编辑图片蒙版的状态。 */ class ImageMaskState extends BaseState {
     /** 创建隔离其他交互的图片蒙版状态。 */ constructor(){
-        super(OfficialStateId.IMAGE_MASK, '图片蒙版', ImageMaskGizmoTool);
+        super(OfficialStateId.IMAGE_MASK, '图片蒙版', MaskGizmoTool);
         this.isolated = true;
     }
 }
@@ -123704,6 +123784,12 @@ const CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
         this.artis.leaveTextEditing();
     }
     /**
+   * 选中当前 TextGizmo 正在编辑的全部文字，并聚焦文本输入框。
+   * @returns TextGizmo 已就绪且存在正在编辑的文本时返回 true
+   */ selectAllText() {
+        return this.artis.gizmoManager.get('text')?.selectAllText() ?? false;
+    }
+    /**
    * 应用笔刷大小后开启蒙版 Gizmo；非法尺寸回退为 1。
    * @param brushSize 初始笔刷像素大小
    */ openMaskGizmo(brushSize) {
@@ -123751,69 +123837,69 @@ const CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
    */ closeLoadingGizmo(id) {
         this.artis.gestureHandler.getLoadingManager().delete(this.artis.item.toVfxItemId(id));
     }
-    /** 开启图片裁切 Gizmo。 */ openPictureCutGizmo() {
+    /** 开启图片裁切 Gizmo。 */ openImageCutGizmo() {
         this.artis.states.activate('imageCut');
     }
     /**
    * 设置图片裁切 Gizmo 是否锁定裁切框比例。
    * @param lock 是否锁定比例
-   */ setPictureCutGizmoLockScale(lock) {
-        const pictureCutGizmo = this.artis.gizmoManager.get('picture-cut');
-        if (!pictureCutGizmo) {
-            console.warn('[Artis.operations] setPictureCutGizmoLockScale：picture-cut Gizmo 未注册或未启用。');
+   */ setImageCutGizmoLockScale(lock) {
+        const imageCutGizmo = this.artis.gizmoManager.get('image-cut');
+        if (!imageCutGizmo) {
+            console.warn('[Artis.operations] setImageCutGizmoLockScale：image-cut Gizmo 未注册或未启用。');
             return;
         }
-        pictureCutGizmo.isLockScale = lock;
+        imageCutGizmo.isLockScale = lock;
     }
     /**
-   * 获取当前裁切信息（归一化裁切框 + 元素视图框），委托 PictureCutGizmo.getCutInfo。
+   * 获取当前裁切信息（归一化裁切框 + 元素视图框），委托 ImageCutGizmo.getCutInfo。
    * @returns 裁切信息；Gizmo 未就绪 / 未选中单个元素 / 结果无效时返回 undefined
    */ getCutInfo() {
-        return this.artis.gizmoManager.get('picture-cut')?.getCutInfo();
+        return this.artis.gizmoManager.get('image-cut')?.getCutInfo();
     }
     /**
-   * 获取归一化裁切包围盒（min/max ∈ [0,1]，相对元素包围盒），委托 PictureCutGizmo.getCutBox。
+   * 获取归一化裁切包围盒（min/max ∈ [0,1]，相对元素包围盒），委托 ImageCutGizmo.getCutBox。
    * @returns 归一化裁切框；Gizmo 未就绪时返回 undefined
    */ getCutBox() {
-        return this.artis.gizmoManager.get('picture-cut')?.getCutBox();
+        return this.artis.gizmoManager.get('image-cut')?.getCutBox();
     }
     /**
-   * 设置归一化裁切包围盒（入参为归一化坐标），委托 PictureCutGizmo.setCutBox。
+   * 设置归一化裁切包围盒（入参为归一化坐标），委托 ImageCutGizmo.setCutBox。
    * @param normalizeBox 归一化裁切框
    */ setCutBox(normalizeBox) {
-        this.artis.gizmoManager.get('picture-cut')?.setCutBox(normalizeBox);
+        this.artis.gizmoManager.get('image-cut')?.setCutBox(normalizeBox);
     }
-    /** 关闭图片裁切 Gizmo。 */ closePictureCutGizmo() {
+    /** 关闭图片裁切 Gizmo。 */ closeImageCutGizmo() {
         this.artis.states.activate('move');
     }
     /**
    * 设置图片扩边 Gizmo 是否锁定扩边框比例。
    * @param lock 是否锁定比例
-   */ setPictureExpandGizmoLockScale(lock) {
-        const pictureExpandGizmo = this.artis.gizmoManager.get('picture-expand');
-        if (!pictureExpandGizmo) {
-            console.warn('[Artis.operations] setPictureExpandGizmoLockScale：picture-expand Gizmo 未注册或未启用。');
+   */ setImageExpandGizmoLockScale(lock) {
+        const imageExpandGizmo = this.artis.gizmoManager.get('image-expand');
+        if (!imageExpandGizmo) {
+            console.warn('[Artis.operations] setImageExpandGizmoLockScale：image-expand Gizmo 未注册或未启用。');
             return;
         }
-        pictureExpandGizmo.isLockScale = lock;
+        imageExpandGizmo.isLockScale = lock;
     }
     /**
-   * 获取当前扩边信息（归一化扩边框 + 元素视图框），委托 PictureExpandGizmo.getExpandInfo。
+   * 获取当前扩边信息（归一化扩边框 + 元素视图框），委托 ImageExpandGizmo.getExpandInfo。
    * @returns 扩边信息；Gizmo 未就绪 / 未选中单个元素 / 结果无效时返回 undefined
    */ getExpandInfo() {
-        return this.artis.gizmoManager.get('picture-expand')?.getExpandInfo();
+        return this.artis.gizmoManager.get('image-expand')?.getExpandInfo();
     }
     /**
-   * 获取归一化扩边包围盒（相对元素包围盒，可超出 [0,1]），委托 PictureExpandGizmo.getExpandBox。
+   * 获取归一化扩边包围盒（相对元素包围盒，可超出 [0,1]），委托 ImageExpandGizmo.getExpandBox。
    * @returns 归一化扩边框；Gizmo 未就绪时返回 undefined
    */ getExpandBox() {
-        return this.artis.gizmoManager.get('picture-expand')?.getExpandBox();
+        return this.artis.gizmoManager.get('image-expand')?.getExpandBox();
     }
     /**
-   * 设置归一化扩边包围盒（入参为归一化坐标），委托 PictureExpandGizmo.setExpandBox。
+   * 设置归一化扩边包围盒（入参为归一化坐标），委托 ImageExpandGizmo.setExpandBox。
    * @param normalizeBox 归一化扩边框
    */ setExpandBox(normalizeBox) {
-        this.artis.gizmoManager.get('picture-expand')?.setExpandBox(normalizeBox);
+        this.artis.gizmoManager.get('image-expand')?.setExpandBox(normalizeBox);
     }
     /**
    * 绑定操作门面所属的 Artis 实例。
@@ -123898,8 +123984,8 @@ const CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
                 createSelectionInteractionGizmo(owner)
             ];
         });
-        this.registry.register(BuiltinGizmoId.PICTURE_CUT, ({ owner })=>new PictureCutGizmo(owner));
-        this.registry.register(BuiltinGizmoId.PICTURE_EXPAND, ({ owner })=>new PictureExpandGizmo(owner));
+        this.registry.register(BuiltinGizmoId.IMAGE_CUT, ({ owner })=>new ImageCutGizmo(owner));
+        this.registry.register(BuiltinGizmoId.IMAGE_EXPAND, ({ owner })=>new ImageExpandGizmo(owner));
         this.registry.register(BuiltinGizmoId.SPRITE_TEXT_EDIT, ({ owner })=>new SpriteTextEditGizmo(owner));
         this.registry.register(BuiltinGizmoId.MASK, ({ owner })=>new MaskGizmo(owner));
         this.registry.register(BuiltinGizmoId.ITEM_CREATE, ({ owner })=>{
@@ -124427,6 +124513,26 @@ const CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
     });
 }
 
+/** 从 Command 的标准载荷中提取单个或批量属性变化。 */ function getItemPropertyChanges(payload) {
+    const changes = Array.isArray(payload?.propertyChanges) ? payload.propertyChanges : [
+        payload
+    ];
+    return changes.flatMap((change)=>{
+        if (!change || typeof change !== 'object') {
+            return [];
+        }
+        const { itemId, propertyKeys, propertyKey } = change;
+        const keys = Array.isArray(propertyKeys) ? propertyKeys.filter((key)=>typeof key === 'string') : typeof propertyKey === 'string' ? [
+            propertyKey
+        ] : [];
+        return typeof itemId === 'string' && keys.length > 0 ? [
+            {
+                itemId,
+                propertyKeys: keys
+            }
+        ] : [];
+    });
+}
 /**
  * 注册内置 Command，并配置命令执行后、历史变化后的同步与事件转发。
  * @param ctx 已完成核心服务装配的 wiring 上下文
@@ -124462,22 +124568,20 @@ const CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
         }
         ctx.emit('history.change', operation);
     });
-    // 属性命令在执行、撤销与重做时共用同一事件出口。
+    // 任何提供标准属性载荷的命令，在实际投影完成后共用同一事件出口。
     ctx.commandService.onCommandLifecycle(({ command, payload })=>{
-        if (command.commandId !== 'item.updateProperty') {
-            return;
-        }
-        const id = payload?.itemId;
-        const propertyKeys = Array.isArray(payload?.propertyKeys) ? payload.propertyKeys.filter((key)=>typeof key === 'string') : typeof payload?.propertyKey === 'string' ? [
-            payload.propertyKey
-        ] : [];
-        if (typeof id !== 'string' || propertyKeys.length === 0) {
+        if (getItemPropertyChanges(payload).length === 0) {
             return;
         }
-        ctx.emit('item.propertychange', {
-            id,
-            propertyKeys
-        });
+        void (command.completion ?? Promise.resolve()).then(()=>{
+            const changes = getItemPropertyChanges(command.eventPayload ?? payload);
+            for (const { itemId, propertyKeys } of changes){
+                ctx.emit('item.propertychange', {
+                    id: itemId,
+                    propertyKeys
+                });
+            }
+        }).catch(()=>undefined);
     });
 }
 
@@ -125695,8 +125799,8 @@ const BUILTIN_DEFS = [
                     this._emitBase('item.dragend', type);
                     break;
                 }
-            case 'picture-cut.change':
-            case 'picture-expand.change':
+            case 'image-cut.change':
+            case 'image-expand.change':
                 this._handleVariantGizmoEvent(event, args);
                 break;
             default:
@@ -125983,9 +126087,9 @@ const BUILTIN_DEFS = [
    * @param args 事件携带的参数列表
    * @internal
    */ _handleVariantGizmoEvent(event, args) {
-        if (event === 'picture-cut.change') {
+        if (event === 'image-cut.change') {
             this.emit(event, ...args);
-        } else if (event === 'picture-expand.change') {
+        } else if (event === 'image-expand.change') {
             this.emit(event, ...args);
         }
     }
@@ -125995,11 +126099,11 @@ const BUILTIN_DEFS = [
    * @internal
    */ _handleStateChange(event) {
         const { previousState, currentState, source } = event;
-        const isPictureCut = currentState.id === OfficialStateId.IMAGE_CUT;
-        const isPictureExpand = currentState.id === OfficialStateId.IMAGE_EXPAND;
+        const isImageCut = currentState.id === OfficialStateId.IMAGE_CUT;
+        const isImageExpand = currentState.id === OfficialStateId.IMAGE_EXPAND;
         const isItemCreate = currentState.id === OfficialStateId.ITEM_CREATE;
         let eventSource = source;
-        if (isPictureCut || isPictureExpand) {
+        if (isImageCut || isImageExpand) {
             const selectedId = this.selection.getSelectedIds()[0];
             eventSource = {
                 ...source,
@@ -126821,5 +126925,5 @@ const BUILTIN_DEFS = [
     'sprite.image'
 ]));
 
-export { Artis, ArtisItemType, AssetLoadState, AssetManager, AssetType, BackgroundController, BackgroundManager, BaseArtis, BaseItem, BaseState, Box2, BuiltinGizmoId, CardItem, Circle, CommandService, CompositeCommand, DEG2RAD, DuplicateComboError, DuplicateElementIdError, EffectsItem, ElementFacade, ElementRegistry, ElementRegistryErrorCode, ErrorMonitor, ErrorMonitorFacade, Euler, EulerOrder, FrameItem, FrameLayoutCommand, FrameLayoutMode, FrameLayoutModeCommand, FrameMoveInCommand, FrameMoveOutCommand, GeneratorItem, GeneratorType, GizmoBootstrap, GizmoCommandBinder, GizmoManager, GizmoRegistry, GlobalLayoutMode, GroupChildrenDetachCommand, GroupItem, HTMLCardService, HandState, HistoryManager, IOPlugin, IdentityStrategy, IgnoredInteractionError, ImageCutState, ImageExpandState, ImageMaskState, ImageTextEditState, InteractionService, ItemAlignCommand, ItemCreateCommand, ItemCreateState, ItemCreateType, ItemDeleteCommand, ItemDistributeCommand, ItemGroupCommand, ItemOrderAction, ItemReorderCommand, ItemReplaceSourceCommand, ItemService, ItemSetFontFamilyCommand, ItemSetGeneratorResourceCommand, ItemTransformCommand, ItemUngroupCommand, ItemUpdatePropertyBySchemaCommand, ItemUpdatePropertyCommand, JsonSceneSyncService, KeyBindingController, Line2, Line3, LocalStorageKeyBindingStore, MaskCommitCommand, Matrix4, MissingKeyBindingError, MoveState, OfficialStateId, Operations, PageAutoLayoutCommand, PerfMonitor, PerfMonitorFacade, PerfPhase, PictureCutCommitCommand, PictureExpandCommitCommand, Plane, PlayerAdapter, PluginSystem, Quaternion, RAD2DEG, Ray, RayCaster, RegistryIdentityStrategy, Renderer, ReorderType, SafeConstraint, SceneArtis, SceneDataAssembler, SceneOperations, SceneStore, SceneSwitchCommand, ScreenShot, ScreenshotService, SelectionSetCommand, SpriteImageCommand, SpriteItem, SpriteTextEditCommitCommand, StabilityMonitor, StabilityMonitorFacade, StabilitySignal, StateHandCommand, StateImageCutCommand, StateImageExpandCommand, StateImageMaskCommand, StateImageTextEditCommand, StateItemCreateCommand, StateManager, StateMoveCommand, StateSwitchCommandBase, Store, TextItem, TextMoveCommand, TextRotateCommand, TextScaleCommand, TextUpdateContentCommand, TransformMoveCommand, TransformMoveWithFrameChangeCommand, TransformMoveWithLayoutCommand, TransformRotateCommand, TransformScaleCommand, UserPreferencesManager, Vector2, Vector3, VideoItem, VideoPlayCommand, VideoSourceCommand, ViewService, ViewportFitToBoxCommand, ViewportFitToItemsCommand, ViewportMoveCommand, ViewportZoomCommand, addCompositionItemByComposition, addItemInfoToScene, adjustOtherElementsLayoutInfo, applyGizmoConfigs, arrAdd, assertExist, asserts, autoLayout, boxCenter, boxSize, buildFrameLayoutInput, buildItemSchemaByCreateType, calculateDisplacement, calculateLayoutDisplacements, clamp, clearItemParentInfo, comboToString, computeAlignedPositions, computeDistributedPositions, createCameraProvider, createCompositionItemJSON, createDefaultStates, createExportableScene, createFrameCompositionScene, createItemTransformProvider, createKeyComboFromEvent, createMaskScene, createNullItemJSON, createSpriteItemJSON, createStatesByIds, createTextItemJSON, createVideoGeneratorItemJSON, createVideoItemJSON, createViewportProvider, deepClone, deepEquals, deleteCompositionFromScene, deleteCompositionItemFromScene, deleteItemInfoFromScene, downloadBlob, extractSubCompositionToScene, findPlayerItemByInstanceId, fixStandardJSON, generateGUID, getAbsMaxIndex, getAngleByVectors, getBasicScene, getBoxByNormalizeBox, getColorByNormalizeColor, getCompositionDataByRefCompositionItemId, getCompositionIdByRefCompositionItemId, getContainerSize, getItemTransformUnderParent, getNormalizeBoxByBoxes, getNormalizeColorByColor, getPixelBoxBySchema, getPixelBoxBySchemas, getTextureUrlById, getUniqueName, getVector2Angle, gizmoConfig, globalAutoLayout, isBaseItem, isCardItem, isEffectsItem, isEqual, isEqual$1 as isEqualNumber, isFrameItem, isGeneratorItem, isGroupItem, isObj, isSpriteItem, isTextItem, isVideoItem, loadScriptAsync, localToWorldBox, logger, maskConfig, matchCombo, moveItemBetweenCompositions, moveItemOutOfFrame, moveItemToFrame, moveItemToRoot, parseCombo, pictureCutConfig, pictureExpandConfig, registerCommands, removeItemInfoFromScene, resetSubCompositionItemId, resizeSelectionConfig, roundNumber, schemaToBoxMap, selectionPreviewConfig, serializeArtisItemToJSON, serializeReplayArgs, setItemJSONParentId, setJSONItemName, setupCommands, setupCoreEventBindings, setupKeyBindings, setupPlugins, setupSelectionBindings, index$1 as spec, transformBox, unionBoxes, updateItemLayoutInfo, viewportNavigationConfig, viewportOverlayConfig, worldToLocalBox };
+export { Artis, ArtisItemType, AssetLoadState, AssetManager, AssetType, BackgroundController, BackgroundManager, BaseArtis, BaseItem, BaseState, Box2, BuiltinGizmoId, CardItem, Circle, CommandService, CompositeCommand, DEG2RAD, DuplicateComboError, DuplicateElementIdError, EffectsItem, ElementFacade, ElementRegistry, ElementRegistryErrorCode, ErrorMonitor, ErrorMonitorFacade, Euler, EulerOrder, FrameItem, FrameLayoutCommand, FrameLayoutMode, FrameLayoutModeCommand, FrameMoveInCommand, FrameMoveOutCommand, GeneratorItem, GeneratorType, GizmoBootstrap, GizmoCommandBinder, GizmoManager, GizmoRegistry, GlobalLayoutMode, GroupChildrenDetachCommand, GroupItem, HTMLCardService, HandState, HistoryManager, IOPlugin, IdentityStrategy, IgnoredInteractionError, ImageCutCommitCommand, ImageCutState, ImageExpandCommitCommand, ImageExpandState, ImageMaskState, ImageTextEditState, InteractionService, ItemAlignCommand, ItemCreateCommand, ItemCreateState, ItemCreateType, ItemDeleteCommand, ItemDistributeCommand, ItemGroupCommand, ItemOrderAction, ItemReorderCommand, ItemReplaceSourceCommand, ItemService, ItemSetFontFamilyCommand, ItemSetGeneratorResourceCommand, ItemTransformCommand, ItemUngroupCommand, ItemUpdatePropertyBySchemaCommand, ItemUpdatePropertyCommand, JsonSceneSyncService, KeyBindingController, Line2, Line3, LocalStorageKeyBindingStore, MaskCommitCommand, Matrix4, MissingKeyBindingError, MoveState, OfficialStateId, Operations, PageAutoLayoutCommand, PerfMonitor, PerfMonitorFacade, PerfPhase, Plane, PlayerAdapter, PluginSystem, Quaternion, RAD2DEG, Ray, RayCaster, RegistryIdentityStrategy, Renderer, ReorderType, SafeConstraint, SceneArtis, SceneDataAssembler, SceneOperations, SceneStore, SceneSwitchCommand, ScreenShot, ScreenshotService, SelectionSetCommand, SpriteImageCommand, SpriteItem, SpriteTextEditCommitCommand, StabilityMonitor, StabilityMonitorFacade, StabilitySignal, StateHandCommand, StateImageCutCommand, StateImageExpandCommand, StateImageMaskCommand, StateImageTextEditCommand, StateItemCreateCommand, StateManager, StateMoveCommand, StateSwitchCommandBase, Store, TextItem, TextMoveCommand, TextRotateCommand, TextScaleCommand, TextUpdateContentCommand, TransformMoveCommand, TransformMoveWithFrameChangeCommand, TransformMoveWithLayoutCommand, TransformRotateCommand, TransformScaleCommand, UserPreferencesManager, Vector2, Vector3, VideoItem, VideoPlayCommand, VideoSourceCommand, ViewService, ViewportFitToBoxCommand, ViewportFitToItemsCommand, ViewportMoveCommand, ViewportZoomCommand, addCompositionItemByComposition, addItemInfoToScene, adjustOtherElementsLayoutInfo, applyGizmoConfigs, arrAdd, assertExist, asserts, autoLayout, boxCenter, boxSize, buildFrameLayoutInput, buildItemSchemaByCreateType, calculateDisplacement, calculateLayoutDisplacements, clamp, clearItemParentInfo, comboToString, computeAlignedPositions, computeDistributedPositions, createCameraProvider, createCompositionItemJSON, createDefaultStates, createExportableScene, createFrameCompositionScene, createItemTransformProvider, createKeyComboFromEvent, createMaskScene, createNullItemJSON, createSpriteItemJSON, createStatesByIds, createTextItemJSON, createVideoGeneratorItemJSON, createVideoItemJSON, createViewportProvider, deepClone, deepEquals, deleteCompositionFromScene, deleteCompositionItemFromScene, deleteItemInfoFromScene, downloadBlob, extractSubCompositionToScene, findPlayerItemByInstanceId, fixStandardJSON, generateGUID, getAbsMaxIndex, getAngleByVectors, getBasicScene, getBoxByNormalizeBox, getColorByNormalizeColor, getCompositionDataByRefCompositionItemId, getCompositionIdByRefCompositionItemId, getContainerSize, getItemTransformUnderParent, getNormalizeBoxByBoxes, getNormalizeColorByColor, getPixelBoxBySchema, getPixelBoxBySchemas, getTextureUrlById, getUniqueName, getVector2Angle, gizmoConfig, globalAutoLayout, imageCutConfig, imageExpandConfig, isBaseItem, isCardItem, isEffectsItem, isEqual, isEqual$1 as isEqualNumber, isFrameItem, isGeneratorItem, isGroupItem, isObj, isSpriteItem, isTextItem, isVideoItem, loadScriptAsync, localToWorldBox, logger, maskConfig, matchCombo, moveItemBetweenCompositions, moveItemOutOfFrame, moveItemToFrame, moveItemToRoot, parseCombo, registerCommands, removeItemInfoFromScene, resetSubCompositionItemId, resizeSelectionConfig, roundNumber, schemaToBoxMap, selectionPreviewConfig, serializeArtisItemToJSON, serializeReplayArgs, setItemJSONParentId, setJSONItemName, setupCommands, setupCoreEventBindings, setupKeyBindings, setupPlugins, setupSelectionBindings, index$1 as spec, transformBox, unionBoxes, updateItemLayoutInfo, viewportNavigationConfig, viewportOverlayConfig, worldToLocalBox };
 //# sourceMappingURL=index.mjs.map