@linker-design-plus/timeline-track 2.0.12 → 2.0.13

package/dist/index.es.js

@@ -1,7 +1,7 @@
 var la = Object.defineProperty;
 var ha = (a, e, t) => e in a ? la(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
 var p = (a, e, t) => ha(a, typeof e != "symbol" ? e + "" : e, t);
-const A = {
+const _ = {
   transparent: "transparent",
   white: "#ffffff",
   black: "#000000",
@@ -52,87 +52,87 @@ const A = {
   sliderThumbInnerShadow: "rgba(255, 255, 255, 0.92)",
   sliderThumbShadow: "rgba(8, 24, 56, 0.24)"
 }, Q = {
-  background: A.black,
-  border: A.borderStrong,
-  timeTick: A.textSecondary,
-  timeText: A.textSubtle,
-  trackBackground: A.black,
-  trackSelectedBackground: A.selectedTrackSurface,
-  trackBorder: A.borderStrong,
-  clipBackground: A.clipSurface,
-  clipBorder: A.black,
-  clipName: A.textPrimary,
-  clipDuration: A.textMuted,
-  clipHandle: A.textPrimary,
-  clipSelectedBorder: A.clipSelectedBorder,
-  clipCoverBackground: A.borderStrong,
-  audioClipText: A.textAudio,
-  audioClipAccent: A.audioClipAccent,
-  playhead: A.textPrimary,
-  grid: A.borderStrong,
-  snapGuideLineColor: A.accentSelectedBorder,
-  scrollbarBackground: A.borderStrong,
-  scrollbarBorder: A.borderSubtle,
-  scrollbarThumb: A.borderMedium
+  background: _.black,
+  border: _.borderStrong,
+  timeTick: _.textSecondary,
+  timeText: _.textSubtle,
+  trackBackground: _.black,
+  trackSelectedBackground: _.selectedTrackSurface,
+  trackBorder: _.borderStrong,
+  clipBackground: _.clipSurface,
+  clipBorder: _.black,
+  clipName: _.textPrimary,
+  clipDuration: _.textMuted,
+  clipHandle: _.textPrimary,
+  clipSelectedBorder: _.clipSelectedBorder,
+  clipCoverBackground: _.borderStrong,
+  audioClipText: _.textAudio,
+  audioClipAccent: _.audioClipAccent,
+  playhead: _.textPrimary,
+  grid: _.borderStrong,
+  snapGuideLineColor: _.accentSelectedBorder,
+  scrollbarBackground: _.borderStrong,
+  scrollbarBorder: _.borderSubtle,
+  scrollbarThumb: _.borderMedium
 }, ge = {
   backgroundColor: "#0f0f0f",
-  borderColor: A.borderStrong,
-  textColor: A.textSecondary,
-  labelColor: A.textHint,
-  inputBackground: A.inputSurface,
-  inputBorder: A.borderMedium,
-  inputFocusBorder: A.accentFocus,
-  buttonBackground: A.inputSurface,
-  buttonBorder: A.borderMedium,
-  buttonActiveBackground: A.accentFocus,
-  buttonActiveBorder: A.accentFocus,
-  buttonActiveText: A.white
-}, ve = {
-  background: A.panelSurface,
-  border: A.borderStrong,
-  text: A.textPrimary,
-  buttonBackground: A.buttonSurface,
+  borderColor: _.borderStrong,
+  textColor: _.textSecondary,
+  labelColor: _.textHint,
+  inputBackground: _.inputSurface,
+  inputBorder: _.borderMedium,
+  inputFocusBorder: _.accentFocus,
+  buttonBackground: _.inputSurface,
+  buttonBorder: _.borderMedium,
+  buttonActiveBackground: _.accentFocus,
+  buttonActiveBorder: _.accentFocus,
+  buttonActiveText: _.white
+}, Te = {
+  background: _.panelSurface,
+  border: _.borderStrong,
+  text: _.textPrimary,
+  buttonBackground: _.buttonSurface,
   buttonHover: "#3a3a3a",
-  buttonDanger: A.accentDanger
+  buttonDanger: _.accentDanger
 }, fe = {
   background: Q.scrollbarBackground,
   border: Q.scrollbarBorder,
   thumb: Q.scrollbarThumb,
-  hitArea: A.overlayHitArea
+  hitArea: _.overlayHitArea
 }, yt = {
-  fill: A.white,
-  stroke: A.black,
-  text: A.black
-}, ke = {
-  tabBarBackground: A.buttonSurface,
-  actionBarBackground: A.buttonSurface,
-  activeTabBackground: A.activeTabBackground,
-  activeTabText: A.white,
-  inactiveTabText: A.textInactive,
-  sliderThumbShadow: `0 8px 20px ${A.sliderThumbShadow}`,
-  sliderThumbInnerShadow: `inset 0 1px 1px ${A.sliderThumbInnerShadow}`
+  fill: _.white,
+  stroke: _.black,
+  text: _.black
+}, Ce = {
+  tabBarBackground: _.buttonSurface,
+  actionBarBackground: _.buttonSurface,
+  activeTabBackground: _.activeTabBackground,
+  activeTabText: _.white,
+  inactiveTabText: _.textInactive,
+  sliderThumbShadow: `0 8px 20px ${_.sliderThumbShadow}`,
+  sliderThumbInnerShadow: `inset 0 1px 1px ${_.sliderThumbInnerShadow}`
 }, _i = {
-  grip: A.accentPlayheadGrip,
-  shadow: A.overlayShadow,
-  marker: A.playheadMarker
+  grip: _.accentPlayheadGrip,
+  shadow: _.overlayShadow,
+  marker: _.playheadMarker
 }, si = {
-  background: A.overlayPreview,
-  text: A.white,
-  actionBackground: A.accentAction,
-  actionText: A.white
+  background: _.overlayPreview,
+  text: _.white,
+  actionBackground: _.accentAction,
+  actionText: _.white
 }, $i = {
-  border: A.overlayTransformHandle,
-  handleBackground: A.black
+  border: _.overlayTransformHandle,
+  handleBackground: _.black
 }, Gr = {
-  fill: A.overlaySelectionBoxFill,
-  stroke: A.accentSelectionBox
+  fill: _.overlaySelectionBoxFill,
+  stroke: _.accentSelectionBox
 }, ai = {
-  videoFill: A.overlayVideoDropPreview,
-  videoStroke: A.accentSelectedBorder,
-  audioFill: A.overlayAudioDropPreview,
-  audioStroke: A.accentAudioPreview
+  videoFill: _.overlayVideoDropPreview,
+  videoStroke: _.accentSelectedBorder,
+  audioFill: _.overlayAudioDropPreview,
+  audioStroke: _.accentAudioPreview
 }, Hr = {
-  line: A.gridLine
+  line: _.gridLine
 }, ca = {
   fontSize: 65,
   color: "#C9CBD4",
@@ -248,7 +248,7 @@ const Md = {
   // 默认层级
   ACTIVE: 2
   // 激活层级（拖拽/选中状态）
-}, Te = {
+}, be = {
   MIN: 2,
   SMALL: 10,
   MEDIUM: 30,
@@ -1533,24 +1533,24 @@ class Ir extends Ar {
     super(e), this.hitCanvas = !0, this.context = new $a(this), this.setSize(e.width, e.height);
   }
 }
-const K = {
+const Z = {
   get isDragging() {
     let a = !1;
-    return K._dragElements.forEach((e) => {
+    return Z._dragElements.forEach((e) => {
       e.dragStatus === "dragging" && (a = !0);
     }), a;
   },
   justDragged: !1,
   get node() {
     let a;
-    return K._dragElements.forEach((e) => {
+    return Z._dragElements.forEach((e) => {
       a = e.node;
     }), a;
   },
   _dragElements: /* @__PURE__ */ new Map(),
   _drag(a) {
     const e = [];
-    K._dragElements.forEach((t, i) => {
+    Z._dragElements.forEach((t, i) => {
       const { node: r } = t, n = r.getStage();
       n.setPointersPositions(a), t.pointerId === void 0 && (t.pointerId = S._getFirstPointerId(a));
       const s = n._changedPointerPositions.find((o) => o.id === t.pointerId);
@@ -1572,11 +1572,11 @@ const K = {
   },
   _endDragBefore(a) {
     const e = [];
-    K._dragElements.forEach((t) => {
+    Z._dragElements.forEach((t) => {
       const { node: i } = t, r = i.getStage();
       if (a && r.setPointersPositions(a), !r._changedPointerPositions.find((o) => o.id === t.pointerId))
         return;
-      (t.dragStatus === "dragging" || t.dragStatus === "stopped") && (K.justDragged = !0, R._mouseListenClick = !1, R._touchListenClick = !1, R._pointerListenClick = !1, t.dragStatus = "stopped");
+      (t.dragStatus === "dragging" || t.dragStatus === "stopped") && (Z.justDragged = !0, R._mouseListenClick = !1, R._touchListenClick = !1, R._pointerListenClick = !1, t.dragStatus = "stopped");
       const s = t.node.getLayer() || t.node instanceof R.Stage && t.node;
       s && e.indexOf(s) === -1 && e.push(s);
     }), e.forEach((t) => {
@@ -1584,16 +1584,16 @@ const K = {
     });
   },
   _endDragAfter(a) {
-    K._dragElements.forEach((e, t) => {
+    Z._dragElements.forEach((e, t) => {
       e.dragStatus === "stopped" && e.node.fire("dragend", {
         type: "dragend",
         target: e.node,
         evt: a
-      }, !0), e.dragStatus !== "dragging" && K._dragElements.delete(t);
+      }, !0), e.dragStatus !== "dragging" && Z._dragElements.delete(t);
     });
   }
 };
-R.isBrowser && (window.addEventListener("mouseup", K._endDragBefore, !0), window.addEventListener("touchend", K._endDragBefore, !0), window.addEventListener("touchcancel", K._endDragBefore, !0), window.addEventListener("mousemove", K._drag), window.addEventListener("touchmove", K._drag), window.addEventListener("mouseup", K._endDragAfter, !1), window.addEventListener("touchend", K._endDragAfter, !1), window.addEventListener("touchcancel", K._endDragAfter, !1));
+R.isBrowser && (window.addEventListener("mouseup", Z._endDragBefore, !0), window.addEventListener("touchend", Z._endDragBefore, !0), window.addEventListener("touchcancel", Z._endDragBefore, !0), window.addEventListener("mousemove", Z._drag), window.addEventListener("touchmove", Z._drag), window.addEventListener("mouseup", Z._endDragAfter, !1), window.addEventListener("touchend", Z._endDragAfter, !1), window.addEventListener("touchcancel", Z._endDragAfter, !1));
 function Ve(a) {
   return S._isString(a) ? '"' + a + '"' : Object.prototype.toString.call(a) === "[object Number]" || S._isBoolean(a) ? a : Object.prototype.toString.call(a);
 }
@@ -1792,7 +1792,7 @@ const bi = "absoluteOpacity", Ur = "allEventListeners", Le = "absoluteTransform"
   "transformsEnabledChange.konva"
 ].join(wi);
 let io = 1;
-class _ {
+class A {
   constructor(e) {
     this._id = io++, this.eventListeners = {}, this.attrs = {}, this.index = 0, this._allEventListeners = null, this.parent = null, this._cache = /* @__PURE__ */ new Map(), this._attachedDepsListeners = /* @__PURE__ */ new Map(), this._lastPos = null, this._batchingTransformChange = !1, this._needClearTransformCache = !1, this._filterUpToDate = !1, this._isUnderCache = !1, this._dragEventId = null, this._shouldFireChangeEvents = !1, this.setAttrs(e), this._shouldFireChangeEvents = !0;
   }
@@ -1977,7 +1977,7 @@ class _ {
     });
   }
   remove() {
-    return this.isDragging() && this.stopDrag(), K._dragElements.delete(this._id), this._remove(), this;
+    return this.isDragging() && this.stopDrag(), Z._dragElements.delete(this._id), this._remove(), this;
   }
   _clearCaches() {
     this._clearSelfAndDescendantCache(Le), this._clearSelfAndDescendantCache(bi), this._clearSelfAndDescendantCache(Wr), this._clearSelfAndDescendantCache(qr), this._clearSelfAndDescendantCache(lr), this._clearSelfAndDescendantCache(or);
@@ -2035,7 +2035,7 @@ class _ {
       return this._isVisible(e) && this._isListening(e);
     const i = this.getLayer();
     let r = !1;
-    K._dragElements.forEach((s) => {
+    Z._dragElements.forEach((s) => {
       s.dragStatus === "dragging" && (s.node.nodeType === "Stage" || s.node.getLayer() === i) && (r = !0);
     });
     const n = !t && !R.hitOnDragEnabled && (r || R.isTransforming());
@@ -2441,7 +2441,7 @@ class _ {
   }
   _getProtoListeners(e) {
     var t, i;
-    const { nodeType: r } = this, n = _.protoListenerMap.get(r) || {};
+    const { nodeType: r } = this, n = A.protoListenerMap.get(r) || {};
     let s = n == null ? void 0 : n[e];
     if (s === void 0) {
       s = [];
@@ -2450,7 +2450,7 @@ class _ {
         const l = (i = (t = o.eventListeners) === null || t === void 0 ? void 0 : t[e]) !== null && i !== void 0 ? i : [];
         s.push(...l), o = Object.getPrototypeOf(o);
       }
-      n[e] = s, _.protoListenerMap.set(r, n);
+      n[e] = s, A.protoListenerMap.set(r, n);
     }
     return s;
   }
@@ -2473,7 +2473,7 @@ class _ {
     if (!i)
       return;
     const n = i._getPointerById(t) || i._changedPointerPositions[0] || r;
-    K._dragElements.set(this._id, {
+    Z._dragElements.set(this._id, {
       node: this,
       startPointerPos: n,
       offset: {
@@ -2485,8 +2485,8 @@ class _ {
     });
   }
   startDrag(e, t = !0) {
-    K._dragElements.has(this._id) || this._createDragElement(e);
-    const i = K._dragElements.get(this._id);
+    Z._dragElements.has(this._id) || this._createDragElement(e);
+    const i = Z._dragElements.get(this._id);
     i.dragStatus = "dragging", this.fire("dragstart", {
       type: "dragstart",
       target: this,
@@ -2509,14 +2509,14 @@ class _ {
     (!this._lastPos || this._lastPos.x !== r.x || this._lastPos.y !== r.y) && (this.setAbsolutePosition(r), this._requestDraw()), this._lastPos = r;
   }
   stopDrag(e) {
-    const t = K._dragElements.get(this._id);
-    t && (t.dragStatus = "stopped"), K._endDragBefore(e), K._endDragAfter(e);
+    const t = Z._dragElements.get(this._id);
+    t && (t.dragStatus = "stopped"), Z._endDragBefore(e), Z._endDragAfter(e);
   }
   setDraggable(e) {
     this._setAttr("draggable", e), this._dragChange();
   }
   isDragging() {
-    const e = K._dragElements.get(this._id);
+    const e = Z._dragElements.get(this._id);
     return e ? e.dragStatus === "dragging" : !1;
   }
   _listenDrag() {
@@ -2524,7 +2524,7 @@ class _ {
       if (!(!(e.evt.button !== void 0) || R.dragButtons.indexOf(e.evt.button) >= 0) || this.isDragging())
         return;
       let r = !1;
-      K._dragElements.forEach((n) => {
+      Z._dragElements.forEach((n) => {
         this.isAncestorOf(n.node) && (r = !0);
       }), r || this._createDragElement(e);
     });
@@ -2535,8 +2535,8 @@ class _ {
     else {
       if (this._dragCleanup(), !this.getStage())
         return;
-      const t = K._dragElements.get(this._id), i = t && t.dragStatus === "dragging", r = t && t.dragStatus === "ready";
-      i ? this.stopDrag() : r && K._dragElements.delete(this._id);
+      const t = Z._dragElements.get(this._id), i = t && t.dragStatus === "dragging", r = t && t.dragStatus === "ready";
+      i ? this.stopDrag() : r && Z._dragElements.delete(this._id);
     }
   }
   _dragCleanup() {
@@ -2558,74 +2558,74 @@ class _ {
     return S._isString(e) && (e = JSON.parse(e)), this._createNode(e, t);
   }
   static _createNode(e, t) {
-    let i = _.prototype.getClassName.call(e), r = e.children, n, s, o;
+    let i = A.prototype.getClassName.call(e), r = e.children, n, s, o;
     t && (e.attrs.container = t), R[i] || (S.warn('Can not find a node with class name "' + i + '". Fallback to "Shape".'), i = "Shape");
     const l = R[i];
     if (n = new l(e.attrs), r)
       for (s = r.length, o = 0; o < s; o++)
-        n.add(_._createNode(r[o]));
+        n.add(A._createNode(r[o]));
     return n;
   }
 }
-_.protoListenerMap = /* @__PURE__ */ new Map();
-_.prototype.nodeType = "Node";
-_.prototype._attrsAffectingSize = [];
-_.prototype.eventListeners = {};
-_.prototype.on.call(_.prototype, to, function() {
+A.protoListenerMap = /* @__PURE__ */ new Map();
+A.prototype.nodeType = "Node";
+A.prototype._attrsAffectingSize = [];
+A.prototype.eventListeners = {};
+A.prototype.on.call(A.prototype, to, function() {
   if (this._batchingTransformChange) {
     this._needClearTransformCache = !0;
     return;
   }
   this._clearCache(He), this._clearSelfAndDescendantCache(Le);
 });
-_.prototype.on.call(_.prototype, "visibleChange.konva", function() {
+A.prototype.on.call(A.prototype, "visibleChange.konva", function() {
   this._clearSelfAndDescendantCache(lr);
 });
-_.prototype.on.call(_.prototype, "listeningChange.konva", function() {
+A.prototype.on.call(A.prototype, "listeningChange.konva", function() {
   this._clearSelfAndDescendantCache(or);
 });
-_.prototype.on.call(_.prototype, "opacityChange.konva", function() {
+A.prototype.on.call(A.prototype, "opacityChange.konva", function() {
   this._clearSelfAndDescendantCache(bi);
 });
 const ee = m.addGetterSetter;
-ee(_, "zIndex");
-ee(_, "absolutePosition");
-ee(_, "position");
-ee(_, "x", 0, I());
-ee(_, "y", 0, I());
-ee(_, "globalCompositeOperation", "source-over", st());
-ee(_, "opacity", 1, I());
-ee(_, "name", "", st());
-ee(_, "id", "", st());
-ee(_, "rotation", 0, I());
-m.addComponentsGetterSetter(_, "scale", ["x", "y"]);
-ee(_, "scaleX", 1, I());
-ee(_, "scaleY", 1, I());
-m.addComponentsGetterSetter(_, "skew", ["x", "y"]);
-ee(_, "skewX", 0, I());
-ee(_, "skewY", 0, I());
-m.addComponentsGetterSetter(_, "offset", ["x", "y"]);
-ee(_, "offsetX", 0, I());
-ee(_, "offsetY", 0, I());
-ee(_, "dragDistance", void 0, I());
-ee(_, "width", 0, I());
-ee(_, "height", 0, I());
-ee(_, "listening", !0, xe());
-ee(_, "preventDefault", !0, xe());
-ee(_, "filters", void 0, function(a) {
+ee(A, "zIndex");
+ee(A, "absolutePosition");
+ee(A, "position");
+ee(A, "x", 0, I());
+ee(A, "y", 0, I());
+ee(A, "globalCompositeOperation", "source-over", st());
+ee(A, "opacity", 1, I());
+ee(A, "name", "", st());
+ee(A, "id", "", st());
+ee(A, "rotation", 0, I());
+m.addComponentsGetterSetter(A, "scale", ["x", "y"]);
+ee(A, "scaleX", 1, I());
+ee(A, "scaleY", 1, I());
+m.addComponentsGetterSetter(A, "skew", ["x", "y"]);
+ee(A, "skewX", 0, I());
+ee(A, "skewY", 0, I());
+m.addComponentsGetterSetter(A, "offset", ["x", "y"]);
+ee(A, "offsetX", 0, I());
+ee(A, "offsetY", 0, I());
+ee(A, "dragDistance", void 0, I());
+ee(A, "width", 0, I());
+ee(A, "height", 0, I());
+ee(A, "listening", !0, xe());
+ee(A, "preventDefault", !0, xe());
+ee(A, "filters", void 0, function(a) {
   return this._filterUpToDate = !1, a;
 });
-ee(_, "visible", !0, xe());
-ee(_, "transformsEnabled", "all", st());
-ee(_, "size");
-ee(_, "dragBoundFunc");
-ee(_, "draggable", !1, xe());
-m.backCompat(_, {
+ee(A, "visible", !0, xe());
+ee(A, "transformsEnabled", "all", st());
+ee(A, "size");
+ee(A, "dragBoundFunc");
+ee(A, "draggable", !1, xe());
+m.backCompat(A, {
   rotateDeg: "rotate",
   setRotationDeg: "setRotation",
   getRotationDeg: "getRotation"
 });
-class Se extends _ {
+class Se extends A {
   constructor() {
     super(...arguments), this.children = [];
   }
@@ -2688,7 +2688,7 @@ class Se extends _ {
     return !1;
   }
   toObject() {
-    const e = _.prototype.toObject.call(this);
+    const e = A.prototype.toObject.call(this);
     return e.children = [], this.getChildren().forEach((t) => {
       e.children.push(t.toObject());
     }), e;
@@ -2703,7 +2703,7 @@ class Se extends _ {
     return !1;
   }
   clone(e) {
-    const t = _.prototype.clone.call(this, e);
+    const t = A.prototype.clone.call(this, e);
     return this.getChildren().forEach(function(i) {
       t.add(i.clone());
     }), t;
@@ -3098,7 +3098,7 @@ class Gi extends Se {
     let r = !1;
     this._changedPointerPositions.forEach((n) => {
       const s = this.getIntersection(n);
-      if (K.justDragged = !1, R["_" + i + "ListenClick"] = !0, !s || !s.isListening()) {
+      if (Z.justDragged = !1, R["_" + i + "ListenClick"] = !0, !s || !s.isListening()) {
         this[i + "ClickStartShape"] = void 0;
         return;
       }
@@ -3120,7 +3120,7 @@ class Gi extends Se {
     if (!t)
       return;
     const r = e.type.indexOf("touch") >= 0 || e.pointerType === "touch";
-    if (R.isDragging() && K.node.preventDefault() && e.cancelable && r && e.preventDefault(), this.setPointersPositions(e), !(!(R.isDragging() || R.isTransforming()) || R.hitOnDragEnabled))
+    if (R.isDragging() && Z.node.preventDefault() && e.cancelable && r && e.preventDefault(), this.setPointersPositions(e), !(!(R.isDragging() || R.isTransforming()) || R.hitOnDragEnabled))
       return;
     const s = {};
     let o = !1;
@@ -3161,7 +3161,7 @@ class Gi extends Se {
       }
       const c = l.id, d = { evt: e, pointerId: c };
       let u = !1;
-      R["_" + i + "InDblClickWindow"] ? (u = !0, clearTimeout(this[i + "DblTimeout"])) : K.justDragged || (R["_" + i + "InDblClickWindow"] = !0, clearTimeout(this[i + "DblTimeout"])), this[i + "DblTimeout"] = setTimeout(function() {
+      R["_" + i + "InDblClickWindow"] ? (u = !0, clearTimeout(this[i + "DblTimeout"])) : Z.justDragged || (R["_" + i + "InDblClickWindow"] = !0, clearTimeout(this[i + "DblTimeout"])), this[i + "DblTimeout"] = setTimeout(function() {
         R["_" + i + "InDblClickWindow"] = !1;
       }, R.dblClickWindow), h && h.isListening() ? (o = !0, this[i + "ClickEndShape"] = h, h._fireAndBubble(t.pointerup, { ...d }), R["_" + i + "ListenClick"] && r && r === h && (h._fireAndBubble(t.pointerclick, { ...d }), u && n && n === h && h._fireAndBubble(t.pointerdblclick, { ...d }))) : (this[i + "ClickEndShape"] = null, o || (this._fire(t.pointerup, {
         evt: e,
@@ -3323,7 +3323,7 @@ function So() {
 function Co() {
   this._clearCache(xs);
 }
-class P extends _ {
+class P extends A {
   constructor(e) {
     super(e);
     let t, i = 0;
@@ -3437,7 +3437,7 @@ class P extends _ {
     return i.getContext().clear(), this.drawHit(i, void 0, !0), i.context.getImageData(Math.round(e.x), Math.round(e.y), 1, 1).data[3] > 0;
   }
   destroy() {
-    return _.prototype.destroy.call(this), delete Nt[this.colorKey], delete this.colorKey, this;
+    return A.prototype.destroy.call(this), delete Nt[this.colorKey], delete this.colorKey, this;
   }
   _useBufferCanvas(e) {
     var t;
@@ -3692,18 +3692,18 @@ class at extends Se {
     return t && t.content && (t.content.removeChild(this.getNativeCanvasElement()), e < t.children.length - 1 ? t.content.insertBefore(this.getNativeCanvasElement(), t.children[e + 1].getCanvas()._canvas) : t.content.appendChild(this.getNativeCanvasElement())), this;
   }
   moveToTop() {
-    _.prototype.moveToTop.call(this);
+    A.prototype.moveToTop.call(this);
     const e = this.getStage();
     return e && e.content && (e.content.removeChild(this.getNativeCanvasElement()), e.content.appendChild(this.getNativeCanvasElement())), !0;
   }
   moveUp() {
-    if (!_.prototype.moveUp.call(this))
+    if (!A.prototype.moveUp.call(this))
       return !1;
     const t = this.getStage();
     return !t || !t.content ? !1 : (t.content.removeChild(this.getNativeCanvasElement()), this.index < t.children.length - 1 ? t.content.insertBefore(this.getNativeCanvasElement(), t.children[this.index + 1].getCanvas()._canvas) : t.content.appendChild(this.getNativeCanvasElement()), !0);
   }
   moveDown() {
-    if (_.prototype.moveDown.call(this)) {
+    if (A.prototype.moveDown.call(this)) {
       const e = this.getStage();
       if (e) {
         const t = e.children;
@@ -3714,7 +3714,7 @@ class at extends Se {
     return !1;
   }
   moveToBottom() {
-    if (_.prototype.moveToBottom.call(this)) {
+    if (A.prototype.moveToBottom.call(this)) {
       const e = this.getStage();
       if (e) {
         const t = e.children;
@@ -3729,7 +3729,7 @@ class at extends Se {
   }
   remove() {
     const e = this.getNativeCanvasElement();
-    return _.prototype.remove.call(this), e && e.parentNode && S._isInDocument(e) && e.parentNode.removeChild(e), this;
+    return A.prototype.remove.call(this), e && e.parentNode && S._isInDocument(e) && e.parentNode.removeChild(e), this;
   }
   getStage() {
     return this.parent;
@@ -3742,7 +3742,7 @@ class at extends Se {
     t !== "Group" && t !== "Shape" && S.throw("You may only add groups and shapes to a layer.");
   }
   _toKonvaCanvas(e) {
-    return e = { ...e }, e.width = e.width || this.getWidth(), e.height = e.height || this.getHeight(), e.x = e.x !== void 0 ? e.x : this.x(), e.y = e.y !== void 0 ? e.y : this.y(), _.prototype._toKonvaCanvas.call(this, e);
+    return e = { ...e }, e.width = e.width || this.getWidth(), e.height = e.height || this.getHeight(), e.x = e.x !== void 0 ? e.x : this.x(), e.y = e.y !== void 0 ? e.y : this.y(), A.prototype._toKonvaCanvas.call(this, e);
   }
   _checkVisibility() {
     this.visible() ? this.canvas._canvas.style.display = "block" : this.canvas._canvas.style.display = "none";
@@ -3866,9 +3866,9 @@ const Wi = function() {
     return (/* @__PURE__ */ new Date()).getTime();
   };
 }();
-class be {
+class we {
   constructor(e, t) {
-    this.id = be.animIdCounter++, this.frame = {
+    this.id = we.animIdCounter++, this.frame = {
       time: 0,
       timeDiff: 0,
       lastTime: Wi(),
@@ -3890,17 +3890,17 @@ class be {
     return this.layers.push(e), !0;
   }
   isRunning() {
-    const t = be.animations, i = t.length;
+    const t = we.animations, i = t.length;
     for (let r = 0; r < i; r++)
       if (t[r].id === this.id)
         return !0;
     return !1;
   }
   start() {
-    return this.stop(), this.frame.timeDiff = 0, this.frame.lastTime = Wi(), be._addAnimation(this), this;
+    return this.stop(), this.frame.timeDiff = 0, this.frame.lastTime = Wi(), we._addAnimation(this), this;
   }
   stop() {
-    return be._removeAnimation(this), this;
+    return we._removeAnimation(this), this;
   }
   _updateFrameObject(e) {
     this.frame.timeDiff = e - this.frame.lastTime, this.frame.lastTime = e, this.frame.time += this.frame.timeDiff, this.frame.frameRate = 1e3 / this.frame.timeDiff;
@@ -3933,16 +3933,16 @@ class be {
       e.hasOwnProperty(i) && e[i].batchDraw();
   }
   static _animationLoop() {
-    const e = be;
+    const e = we;
     e.animations.length ? (e._runFrames(), S.requestAnimFrame(e._animationLoop)) : e.animRunning = !1;
   }
   static _handleAnimation() {
     this.animRunning || (this.animRunning = !0, S.requestAnimFrame(this._animationLoop));
   }
 }
-be.animations = [];
-be.animIdCounter = 0;
-be.animRunning = !1;
+we.animations = [];
+we.animIdCounter = 0;
+we.animRunning = !1;
 const wo = {
   node: 1,
   duration: 1,
@@ -4006,7 +4006,7 @@ class te {
     let o, l;
     typeof e.duration > "u" ? o = 0.3 : e.duration === 0 ? o = 1e-3 : o = e.duration, this.node = i, this._id = xo++;
     const h = i.getLayer() || (i instanceof R.Stage ? i.getLayers() : null);
-    h || S.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."), this.anim = new be(function() {
+    h || S.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."), this.anim = new we(function() {
       t.tween.onEnterFrame();
     }, h), this.tween = new Po(l, function(c) {
       t._tweenFunc(c);
@@ -4112,7 +4112,7 @@ class te {
 }
 te.attrs = {};
 te.tweens = {};
-_.prototype.to = function(a) {
+A.prototype.to = function(a) {
   const e = a.onFinish;
   a.node = this, a.onFinish = function() {
     this.destroy(), e && e();
@@ -4174,17 +4174,17 @@ const zt = {
 }, en = S._assign(R, {
   Util: S,
   Transform: ye,
-  Node: _,
+  Node: A,
   Container: Se,
   Stage: Gi,
   stages: $t,
   Layer: at,
   FastLayer: Rr,
   Group: Ct,
-  DD: K,
+  DD: Z,
   Shape: P,
   shapes: Nt,
-  Animation: be,
+  Animation: we,
   Tween: te,
   Easings: zt,
   Context: Oi,
@@ -5820,7 +5820,7 @@ m.addGetterSetter(ht, "innerRadius", 0, I());
 m.addGetterSetter(ht, "outerRadius", 0, I());
 class Ee extends P {
   constructor(e) {
-    super(e), this._updated = !0, this.anim = new be(() => {
+    super(e), this._updated = !0, this.anim = new we(() => {
       const t = this._updated;
       return this._updated = !1, t;
     }), this.on("animationChange.konva", function() {
@@ -6946,10 +6946,10 @@ class X extends Ct {
     return this.getStage() && this._cursorChange && this.getStage().content && (this.getStage().content.style.cursor = ""), Ct.prototype.destroy.call(this), this.detach(), this._removeEvents(), this;
   }
   toObject() {
-    return _.prototype.toObject.call(this);
+    return A.prototype.toObject.call(this);
   }
   clone(e) {
-    return _.prototype.clone.call(this, e);
+    return A.prototype.clone.call(this, e);
   }
   getClientRect() {
     return this.nodes().length > 0 ? super.getClientRect() : { x: 0, y: 0, width: 0, height: 0 };
@@ -7579,13 +7579,13 @@ const cl = function(e) {
   const t = Math.round(this.blurRadius());
   t > 0 && hl(e, t);
 };
-m.addGetterSetter(_, "blurRadius", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "blurRadius", 0, I(), m.afterSetFilter);
 const dl = function(a) {
   const e = this.brightness() * 255, t = a.data, i = t.length;
   for (let r = 0; r < i; r += 4)
     t[r] += e, t[r + 1] += e, t[r + 2] += e;
 };
-m.addGetterSetter(_, "brightness", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "brightness", 0, I(), m.afterSetFilter);
 const ul = function(a) {
   const e = this.brightness(), t = a.data, i = t.length;
   for (let r = 0; r < i; r += 4)
@@ -7596,7 +7596,7 @@ const ul = function(a) {
   for (let o = 0; o < i; o += 4)
     r = t[o], n = t[o + 1], s = t[o + 2], r /= 255, r -= 0.5, r *= e, r += 0.5, r *= 255, n /= 255, n -= 0.5, n *= e, n += 0.5, n *= 255, s /= 255, s -= 0.5, s *= e, s += 0.5, s *= 255, r = r < 0 ? 0 : r > 255 ? 255 : r, n = n < 0 ? 0 : n > 255 ? 255 : n, s = s < 0 ? 0 : s > 255 ? 255 : s, t[o] = r, t[o + 1] = n, t[o + 2] = s;
 };
-m.addGetterSetter(_, "contrast", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "contrast", 0, I(), m.afterSetFilter);
 const gl = function(a) {
   var e, t, i, r, n, s, o, l, h;
   const c = a.data, d = a.width, u = a.height, g = Math.min(1, Math.max(0, (t = (e = this.embossStrength) === null || e === void 0 ? void 0 : e.call(this)) !== null && t !== void 0 ? t : 0.5)), f = Math.min(1, Math.max(0, (r = (i = this.embossWhiteLevel) === null || i === void 0 ? void 0 : i.call(this)) !== null && r !== void 0 ? r : 0.5)), v = (o = {
@@ -7634,10 +7634,10 @@ const gl = function(a) {
   }
   return a;
 };
-m.addGetterSetter(_, "embossStrength", 0.5, I(), m.afterSetFilter);
-m.addGetterSetter(_, "embossWhiteLevel", 0.5, I(), m.afterSetFilter);
-m.addGetterSetter(_, "embossDirection", "top-left", void 0, m.afterSetFilter);
-m.addGetterSetter(_, "embossBlend", !1, void 0, m.afterSetFilter);
+m.addGetterSetter(A, "embossStrength", 0.5, I(), m.afterSetFilter);
+m.addGetterSetter(A, "embossWhiteLevel", 0.5, I(), m.afterSetFilter);
+m.addGetterSetter(A, "embossDirection", "top-left", void 0, m.afterSetFilter);
+m.addGetterSetter(A, "embossBlend", !1, void 0, m.afterSetFilter);
 function qi(a, e, t, i, r) {
   const n = t - e, s = r - i;
   if (n === 0)
@@ -7670,7 +7670,7 @@ const fl = function(a) {
   for (let w = 0; w < t; w += 4)
     e[w + 0] = qi(e[w + 0], i, r, f, g), e[w + 1] = qi(e[w + 1], s, o, v, y), e[w + 2] = qi(e[w + 2], h, c, T, C);
 };
-m.addGetterSetter(_, "enhance", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "enhance", 0, I(), m.afterSetFilter);
 const ml = function(a) {
   const e = a.data, t = e.length;
   for (let i = 0; i < t; i += 4) {
@@ -7678,9 +7678,9 @@ const ml = function(a) {
     e[i] = r, e[i + 1] = r, e[i + 2] = r;
   }
 };
-m.addGetterSetter(_, "hue", 0, I(), m.afterSetFilter);
-m.addGetterSetter(_, "saturation", 0, I(), m.afterSetFilter);
-m.addGetterSetter(_, "luminance", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "hue", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "saturation", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "luminance", 0, I(), m.afterSetFilter);
 const yl = function(a) {
   const e = a.data, t = e.length, i = 1, r = Math.pow(2, this.saturation()), n = Math.abs(this.hue() + 360) % 360, s = this.luminance() * 127, o = i * r * Math.cos(n * Math.PI / 180), l = i * r * Math.sin(n * Math.PI / 180), h = 0.299 * i + 0.701 * o + 0.167 * l, c = 0.587 * i - 0.587 * o + 0.33 * l, d = 0.114 * i - 0.114 * o - 0.497 * l, u = 0.299 * i - 0.299 * o - 0.328 * l, g = 0.587 * i + 0.413 * o + 0.035 * l, f = 0.114 * i - 0.114 * o + 0.293 * l, y = 0.299 * i - 0.3 * o + 1.25 * l, v = 0.587 * i - 0.586 * o - 1.05 * l, C = 0.114 * i + 0.886 * o - 0.2 * l;
   let T, w, b, E;
@@ -7693,9 +7693,9 @@ const yl = function(a) {
     e[C + 0] = l * T + h * w + c * b, e[C + 1] = d * T + u * w + g * b, e[C + 2] = f * T + y * w + v * b, e[C + 3] = E;
   }
 };
-m.addGetterSetter(_, "hue", 0, I(), m.afterSetFilter);
-m.addGetterSetter(_, "saturation", 0, I(), m.afterSetFilter);
-m.addGetterSetter(_, "value", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "hue", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "saturation", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "value", 0, I(), m.afterSetFilter);
 const Cl = function(a) {
   const e = a.data, t = e.length;
   for (let i = 0; i < t; i += 4)
@@ -7760,8 +7760,8 @@ const Cl = function(a) {
     }
   Tl(C, a, {});
 };
-m.addGetterSetter(_, "kaleidoscopePower", 2, I(), m.afterSetFilter);
-m.addGetterSetter(_, "kaleidoscopeAngle", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "kaleidoscopePower", 2, I(), m.afterSetFilter);
+m.addGetterSetter(A, "kaleidoscopeAngle", 0, I(), m.afterSetFilter);
 function mi(a, e, t) {
   let i = (t * a.width + e) * 4;
   const r = [];
@@ -7864,13 +7864,13 @@ const Il = function(a) {
   let t = kl(a, e);
   return t && (t = Pl(t, a.width, a.height), t = _l(t, a.width, a.height), t = Al(t, a.width, a.height), xl(a, t)), a;
 };
-m.addGetterSetter(_, "threshold", 0, I(), m.afterSetFilter);
+m.addGetterSetter(A, "threshold", 0, I(), m.afterSetFilter);
 const El = function(a) {
   const e = this.noise() * 255, t = a.data, i = t.length, r = e / 2;
   for (let n = 0; n < i; n += 4)
     t[n + 0] += r - 2 * r * Math.random(), t[n + 1] += r - 2 * r * Math.random(), t[n + 2] += r - 2 * r * Math.random();
 };
-m.addGetterSetter(_, "noise", 0.2, I(), m.afterSetFilter);
+m.addGetterSetter(A, "noise", 0.2, I(), m.afterSetFilter);
 const Ll = function(a) {
   let e = Math.ceil(this.pixelSize()), t = a.width, i = a.height, r = Math.ceil(t / e), n = Math.ceil(i / e), s = a.data;
   if (e <= 0) {
@@ -7901,13 +7901,13 @@ const Ll = function(a) {
           }
     }
 };
-m.addGetterSetter(_, "pixelSize", 8, I(), m.afterSetFilter);
+m.addGetterSetter(A, "pixelSize", 8, I(), m.afterSetFilter);
 const Rl = function(a) {
   const e = Math.round(this.levels() * 254) + 1, t = a.data, i = t.length, r = 255 / e;
   for (let n = 0; n < i; n += 1)
     t[n] = Math.floor(t[n] / r) * r;
 };
-m.addGetterSetter(_, "levels", 0.5, I(), m.afterSetFilter);
+m.addGetterSetter(A, "levels", 0.5, I(), m.afterSetFilter);
 const Ml = function(a) {
   const e = a.data, t = e.length, i = this.red(), r = this.green(), n = this.blue();
   for (let s = 0; s < t; s += 4) {
@@ -7915,13 +7915,13 @@ const Ml = function(a) {
     e[s] = o * i, e[s + 1] = o * r, e[s + 2] = o * n, e[s + 3] = e[s + 3];
   }
 };
-m.addGetterSetter(_, "red", 0, function(a) {
+m.addGetterSetter(A, "red", 0, function(a) {
   return this._filterUpToDate = !1, a > 255 ? 255 : a < 0 ? 0 : Math.round(a);
 });
-m.addGetterSetter(_, "green", 0, function(a) {
+m.addGetterSetter(A, "green", 0, function(a) {
   return this._filterUpToDate = !1, a > 255 ? 255 : a < 0 ? 0 : Math.round(a);
 });
-m.addGetterSetter(_, "blue", 0, as, m.afterSetFilter);
+m.addGetterSetter(A, "blue", 0, as, m.afterSetFilter);
 const Dl = function(a) {
   const e = a.data, t = e.length, i = this.red(), r = this.green(), n = this.blue(), s = this.alpha();
   for (let o = 0; o < t; o += 4) {
@@ -7929,14 +7929,14 @@ const Dl = function(a) {
     e[o] = i * s + e[o] * l, e[o + 1] = r * s + e[o + 1] * l, e[o + 2] = n * s + e[o + 2] * l;
   }
 };
-m.addGetterSetter(_, "red", 0, function(a) {
+m.addGetterSetter(A, "red", 0, function(a) {
   return this._filterUpToDate = !1, a > 255 ? 255 : a < 0 ? 0 : Math.round(a);
 });
-m.addGetterSetter(_, "green", 0, function(a) {
+m.addGetterSetter(A, "green", 0, function(a) {
   return this._filterUpToDate = !1, a > 255 ? 255 : a < 0 ? 0 : Math.round(a);
 });
-m.addGetterSetter(_, "blue", 0, as, m.afterSetFilter);
-m.addGetterSetter(_, "alpha", 1, function(a) {
+m.addGetterSetter(A, "blue", 0, as, m.afterSetFilter);
+m.addGetterSetter(A, "alpha", 1, function(a) {
   return this._filterUpToDate = !1, a > 1 ? 1 : a < 0 ? 0 : a;
 });
 const Ol = function(a) {
@@ -7957,7 +7957,7 @@ const Ol = function(a) {
   for (let r = 0; r < i; r += 1)
     t[r] = t[r] < e ? 0 : 255;
 };
-m.addGetterSetter(_, "threshold", 0.5, I(), m.afterSetFilter);
+m.addGetterSetter(A, "threshold", 0.5, I(), m.afterSetFilter);
 const q = en.Util._assign(en, {
   Arc: De,
   Arrow: ot,
@@ -8525,14 +8525,14 @@ const Zl = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
   ["clip-audio", ah],
   ["clip-without-audio", oh]
 ]), yn = /* @__PURE__ */ new Map();
-function Ce(a) {
+function ve(a) {
   return lh.get(a) ?? "";
 }
 function hh(a) {
   const e = yn.get(a);
   if (e)
     return e;
-  const t = Ce(a);
+  const t = ve(a);
   if (!t)
     return null;
   const i = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(t)}`, r = typeof Image > "u" ? {
@@ -8545,10 +8545,10 @@ function hh(a) {
   return "decoding" in r && (r.decoding = "async"), r.src = i, yn.set(a, r), r;
 }
 const de = 3, Sn = 10, ch = 4, dh = 6, Cn = 8, vn = 14, Cr = 10, uh = 12, Tn = 4, Ns = 1, Li = 28, zs = 8, vr = 19, Tr = 15;
-function Kt(a, e, t, i, r = A.white, n = A.black, s = 1) {
+function Kt(a, e, t, i, r = _.white, n = _.black, s = 1) {
   return new q.Rect({ x: a, y: e, width: t, height: i, fill: r, stroke: n, strokeWidth: s });
 }
-function Ri(a, e, t, i = 12, r = "Arial", n = A.black, s = "left", o = "top") {
+function Ri(a, e, t, i = 12, r = "Arial", n = _.black, s = "left", o = "top") {
   return new q.Text({ text: a, x: e, y: t, fontSize: i, fontFamily: r, fill: n, align: s, verticalAlign: o });
 }
 function vt(a = 0, e = 0) {
@@ -8566,26 +8566,26 @@ function ph(a, e, t, i) {
   return !r || !n ? !1 : (r.x(0), r.y(0), r.width(de), r.height(t), n.x(e - de), n.y(0), n.width(de), n.height(t), !0);
 }
 function Vs(a, e, t) {
-  const i = e ? a.clipSelectedBorder : A.transparent, r = e ? Ns : 0;
+  const i = e ? a.clipSelectedBorder : _.transparent, r = e ? Ns : 0;
   return t === "audio" ? {
-    background: A.audioClipBackground,
+    background: _.audioClipBackground,
     label: a.audioClipText || a.clipName,
     accent: a.audioClipAccent || a.clipHandle,
     coverBackground: a.clipCoverBackground || Q.clipCoverBackground,
     border: i,
     borderWidth: r
   } : t === "text" ? {
-    background: A.textClipBackground,
+    background: _.textClipBackground,
     label: a.clipName,
     accent: a.clipHandle,
-    coverBackground: a.clipCoverBackground || A.accentCoverFallback,
+    coverBackground: a.clipCoverBackground || _.accentCoverFallback,
     border: i,
     borderWidth: r
   } : {
-    background: A.videoClipBackground,
+    background: _.videoClipBackground,
     label: a.clipName,
     accent: a.clipHandle,
-    coverBackground: a.clipCoverBackground || A.accentCoverFallback,
+    coverBackground: a.clipCoverBackground || _.accentCoverFallback,
     border: i,
     borderWidth: r
   };
@@ -8779,7 +8779,7 @@ function wh(a, e, t, i) {
     y: e,
     width: t,
     height: i,
-    stroke: A.clipSelectedBorder,
+    stroke: _.clipSelectedBorder,
     strokeWidth: Ns,
     fillEnabled: !1
   });
@@ -9043,7 +9043,7 @@ class Od {
     p(this, "leftPadding", ue);
     this.stage = e, this.gridLayer = t, this.onTimeChange = r, this.onZoomChange = n, this.onScrollChange = s, this.config = {
       duration: i.duration || 36e5,
-      zoom: i.zoom || Te.MEDIUM,
+      zoom: i.zoom || be.MEDIUM,
       currentTime: i.currentTime || 0,
       playState: i.playState || "paused",
       container: i.container,
@@ -9117,7 +9117,7 @@ class Od {
   handleZoom(e) {
     const t = e.evt.deltaY;
     if (t === 0) return;
-    const i = t > 0 ? 0.5 : 1.5, r = Math.max(Te.MIN, Math.min(Te.MAX, this.config.zoom * i));
+    const i = t > 0 ? 0.5 : 1.5, r = Math.max(be.MIN, Math.min(be.MAX, this.config.zoom * i));
     if (r !== this.config.zoom) {
       this.animationFrameId && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = null);
       const n = e.evt.offsetX;
@@ -11204,7 +11204,7 @@ ft.elementStyles = [], ft.shadowRootOptions = { mode: "open" }, ft[Wt("elementPr
  */
 const Yt = globalThis, Pn = (a) => a, Di = Yt.trustedTypes, _n = Di ? Di.createPolicy("lit-html", { createHTML: (a) => a }) : void 0, js = "$lit$", Ne = `lit$${Math.random().toFixed(9).slice(2)}$`, Ks = "?" + Ne, Uh = `<${Ks}>`, rt = document, Zt = () => rt.createComment(""), Jt = (a) => a === null || typeof a != "object" && typeof a != "function", Or = Array.isArray, Wh = (a) => Or(a) || typeof (a == null ? void 0 : a[Symbol.iterator]) == "function", Ji = `[ 	
 \f\r]`, It = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, An = /-->/g, In = />/g, Ke = RegExp(`>|${Ji}(?:([^\\s"'>=/]+)(${Ji}*=${Ji}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), En = /'/g, Ln = /"/g, Zs = /^(?:script|style|textarea|title)$/i, Yh = (a) => (e, ...t) => ({ _$litType$: a, strings: e, values: t }), Z = Yh(1), nt = Symbol.for("lit-noChange"), le = Symbol.for("lit-nothing"), Rn = /* @__PURE__ */ new WeakMap(), et = rt.createTreeWalker(rt, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), En = /'/g, Ln = /"/g, Zs = /^(?:script|style|textarea|title)$/i, Yh = (a) => (e, ...t) => ({ _$litType$: a, strings: e, values: t }), K = Yh(1), nt = Symbol.for("lit-noChange"), le = Symbol.for("lit-nothing"), Rn = /* @__PURE__ */ new WeakMap(), et = rt.createTreeWalker(rt, 129);
 function Js(a, e) {
   if (!Or(a) || !a.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return _n !== void 0 ? _n.createHTML(e) : e;
@@ -11546,7 +11546,7 @@ class ic extends Qs {
       onMuteTrack: o,
       icons: l
     } = e;
-    return Z`
+    return K`
       <style>
         .track-info-item:hover {
           background: ${t.buttonHover};
@@ -11556,7 +11556,7 @@ class ic extends Qs {
           background: ${t.buttonBackground};
         }
       </style>
-      ${s ? Z`<div class="track-info-spacer" style=${`height:${n}px;`}></div>` : null}
+      ${s ? K`<div class="track-info-spacer" style=${`height:${n}px;`}></div>` : null}
       <div
         class="track-info-list"
         style=${`will-change:transform;transform:translateY(-${Math.max(0, r)}px);`}
@@ -11567,7 +11567,7 @@ class ic extends Qs {
   }
   renderTrackItem(e, t, i, r, n) {
     const s = e.type === "text" ? Me.TEXT : e.type === "video" ? Me.VIDEO : Me.AUDIO, o = e.type === "text" ? n.textTrack : e.type === "video" ? n.videoTrack : n.audioTrack, l = e.type === "text" ? e.isMuted ? n.hide : n.display : e.isMuted ? n.volumeMuted : n.volume, h = e.type === "text" ? e.isMuted ? "显示文本轨" : "隐藏文本轨" : e.isMuted ? "取消静音" : "静音";
-    return Z`
+    return K`
       <div
         class="track-info-item"
         data-index=${String(t)}
@@ -11635,13 +11635,13 @@ class rc {
     p(this, "onMuteTrack");
     var n, s, o, l, h, c;
     this.container = e.container, this.width = e.width || 200, this.timeScaleHeight = e.timeScaleHeight || 40, this.includeTimeScaleSpacer = e.includeTimeScaleSpacer ?? !0, this.theme = {
-      background: ((n = e.theme) == null ? void 0 : n.background) || ve.background,
-      border: ((s = e.theme) == null ? void 0 : s.border) || ve.border,
-      text: ((o = e.theme) == null ? void 0 : o.text) || ve.text,
-      buttonBackground: ((l = e.theme) == null ? void 0 : l.buttonBackground) || ve.buttonBackground,
-      buttonHover: ((h = e.theme) == null ? void 0 : h.buttonHover) || ve.buttonHover,
-      buttonDanger: ((c = e.theme) == null ? void 0 : c.buttonDanger) || ve.buttonDanger
-    }, this.onMuteTrack = r, this.iconCache.set("OmAi-camera", Ce("OmAi-camera")), this.iconCache.set("OmAi-display", Ce("OmAi-display")), this.iconCache.set("OmAi-hide", Ce("OmAi-hide")), this.iconCache.set("OmAi-music", Ce("OmAi-music")), this.iconCache.set("OmAi-text", Ce("OmAi-text")), this.iconCache.set("OmAi-volume", Ce("OmAi-volume")), this.iconCache.set("OmAi-volume-mute", Ce("OmAi-volume-mute")), this.init();
+      background: ((n = e.theme) == null ? void 0 : n.background) || Te.background,
+      border: ((s = e.theme) == null ? void 0 : s.border) || Te.border,
+      text: ((o = e.theme) == null ? void 0 : o.text) || Te.text,
+      buttonBackground: ((l = e.theme) == null ? void 0 : l.buttonBackground) || Te.buttonBackground,
+      buttonHover: ((h = e.theme) == null ? void 0 : h.buttonHover) || Te.buttonHover,
+      buttonDanger: ((c = e.theme) == null ? void 0 : c.buttonDanger) || Te.buttonDanger
+    }, this.onMuteTrack = r, this.iconCache.set("OmAi-camera", ve("OmAi-camera")), this.iconCache.set("OmAi-display", ve("OmAi-display")), this.iconCache.set("OmAi-hide", ve("OmAi-hide")), this.iconCache.set("OmAi-music", ve("OmAi-music")), this.iconCache.set("OmAi-text", ve("OmAi-text")), this.iconCache.set("OmAi-volume", ve("OmAi-volume")), this.iconCache.set("OmAi-volume-mute", ve("OmAi-volume-mute")), this.init();
   }
   init() {
     this.container.className = "track-info-panel", this.container.style.position = "relative", this.container.style.overflow = "hidden", this.container.style.width = `${this.width}px`, this.container.style.background = this.theme.background, this.container.style.borderRight = `1px solid ${this.theme.border}`, this.container.style.color = this.theme.text, this.renderer.mount(this.container), this.render();
@@ -11714,6 +11714,7 @@ const nc = {
   voiceCardTitle: "clip-config-voice-title",
   voiceCardSubtitle: "clip-config-voice-subtitle",
   voiceCardCheck: "clip-config-voice-check",
+  voiceCardPreviewBadge: "clip-config-voice-preview-badge",
   voiceCheckbox: "clip-config-voice-checkbox",
   primaryButton: "clip-config-primary-button",
   errorText: "clip-config-error-text",
@@ -11725,7 +11726,7 @@ const nc = {
 class sc extends Qs {
   renderTemplate(e) {
     const { clip: t, theme: i, emptyStateIconSvg: r } = e;
-    return Z`
+    return K`
       <style>
         @keyframes clip-config-voice-loading-spin {
           from { transform: rotate(0deg); }
@@ -11785,10 +11786,10 @@ class sc extends Qs {
           border-radius: 50%;
           appearance: none;
           -webkit-appearance: none;
-          background: radial-gradient(circle at 32% 30%, ${A.sliderThumbGlowStart} 0%, ${A.sliderThumbGlowEnd} 74%);
+          background: radial-gradient(circle at 32% 30%, ${_.sliderThumbGlowStart} 0%, ${_.sliderThumbGlowEnd} 74%);
           box-shadow:
             var(--clip-slider-thumb-shadow),
-            ${ke.sliderThumbInnerShadow};
+            ${Ce.sliderThumbInnerShadow};
         }
 
         .clip-config-panel .clip-config-slider::-moz-range-track {
@@ -11808,10 +11809,10 @@ class sc extends Qs {
           height: 9px;
           border: 1px solid var(--clip-slider-thumb-border);
           border-radius: 50%;
-          background: radial-gradient(circle at 32% 30%, ${A.sliderThumbGlowStart} 0%, ${A.sliderThumbGlowEnd} 74%);
+          background: radial-gradient(circle at 32% 30%, ${_.sliderThumbGlowStart} 0%, ${_.sliderThumbGlowEnd} 74%);
           box-shadow:
             var(--clip-slider-thumb-shadow),
-            ${ke.sliderThumbInnerShadow};
+            ${Ce.sliderThumbInnerShadow};
         }
       </style>
       <div class=${N.container} style=${this.getContainerStyle(i)}>
@@ -11821,7 +11822,7 @@ class sc extends Qs {
     `;
   }
   renderVoiceLoadingOverlay(e) {
-    return e.isVoiceLoadingOverlayVisible ? Z`
+    return e.isVoiceLoadingOverlayVisible ? K`
       <div
         class=${N.voiceLoadingOverlay}
         style=${[
@@ -11870,7 +11871,7 @@ class sc extends Qs {
     ` : null;
   }
   renderEmptyState(e, t) {
-    return Z`
+    return K`
       <div
         class=${N.emptyState}
         style=${`text-align:center;padding:40px 20px;color:${e.labelColor};`}
@@ -11884,7 +11885,7 @@ class sc extends Qs {
   }
   renderPanel(e) {
     const t = this.getAvailableTabs(e.clip);
-    return Z`
+    return K`
       ${t.length > 1 ? this.renderTabBar(e, t) : null}
       <div
         class=${N.content}
@@ -11899,14 +11900,14 @@ class sc extends Qs {
     `;
   }
   renderTabBar(e, t) {
-    return Z`
+    return K`
       <div
         class=${N.tabBar}
-        style=${`display:flex;gap:12px;padding:4px;background-color:${ke.tabBarBackground};border-radius:4px 4px 0 0;height:32px;`}
+        style=${`display:flex;gap:12px;padding:4px;background-color:${Ce.tabBarBackground};border-radius:4px 4px 0 0;height:32px;`}
       >
         ${t.map((i) => {
       const r = e.activeTab === i;
-      return Z`
+      return K`
             <button
               class=${N.tabButton}
               style=${[
@@ -11917,8 +11918,8 @@ class sc extends Qs {
         "font-size:13px",
         "font-family:inherit",
         "transition:background-color 0.15s, color 0.15s",
-        `background-color:${r ? ke.activeTabBackground : A.transparent}`,
-        `color:${r ? ke.activeTabText : ke.inactiveTabText}`,
+        `background-color:${r ? Ce.activeTabBackground : _.transparent}`,
+        `color:${r ? Ce.activeTabText : Ce.inactiveTabText}`,
         "border-radius:4px"
       ].join(";")}
               @click=${() => e.callbacks.onTabChange(i)}
@@ -11932,14 +11933,14 @@ class sc extends Qs {
   }
   renderActionBar(e) {
     const t = e.activeTab === "voice" && this.supportsVoicePanel(e.clip);
-    return Z`
+    return K`
       <div
         class=${N.actionBar}
         style=${[
       `border-top:1px solid ${e.theme.borderColor}`,
       "border-radius:0 0 4px 4px",
       "min-height:32px",
-      `background-color:${ke.actionBarBackground}`,
+      `background-color:${Ce.actionBarBackground}`,
       "padding:8px 10px"
     ].join(";")}
       >
@@ -11949,7 +11950,7 @@ class sc extends Qs {
   }
   renderVoiceActionBar(e) {
     const t = e.clip, i = !e.selectedVoiceId, r = (t == null ? void 0 : t.type) === "audio" ? "配音随文本更新" : "本次生成后随文本更新", n = (t == null ? void 0 : t.type) === "audio" ? "变换音色" : "生成配音";
-    return Z`
+    return K`
       <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
         <label
           class=${N.voiceCheckbox}
@@ -11971,7 +11972,7 @@ class sc extends Qs {
       "font-size:12px",
       "cursor:pointer",
       "transition:opacity 0.15s",
-      `background:${i ? e.theme.buttonBackground : ke.activeTabBackground}`,
+      `background:${i ? e.theme.buttonBackground : Ce.activeTabBackground}`,
       `color:${i ? e.theme.labelColor : e.theme.buttonActiveText}`,
       i ? "opacity:0.7" : "opacity:1"
     ].join(";")}
@@ -11987,7 +11988,7 @@ class sc extends Qs {
   }
   renderVisualPanel(e) {
     const t = e.activeTab === "visual" ? "block" : "none";
-    return Z`
+    return K`
       <div class=${N.visualPanel} style=${`display:${t};`}>
         ${this.renderPositionSection(e)}
         ${this.renderScaleSection(e)}
@@ -11995,7 +11996,7 @@ class sc extends Qs {
     `;
   }
   renderPositionSection(e) {
-    return Z`
+    return K`
       <div class=${N.section} style="margin-bottom:16px;">
         ${this.renderSectionTitle("位置", e.theme)}
         ${this.renderPositionControl(e, "X", "x")}
@@ -12006,7 +12007,7 @@ class sc extends Qs {
   }
   renderScaleSection(e) {
     const t = this.getTransform(e.clip);
-    return Z`
+    return K`
       <div
         class=${N.section}
         style=${`border-top:1px solid ${e.theme.borderColor};padding-top:16px;`}
@@ -12049,7 +12050,7 @@ class sc extends Qs {
   renderAudioPanel(e) {
     var r;
     const t = e.activeTab === "audio" ? "block" : "none", i = ((r = e.clip) == null ? void 0 : r.volume) ?? 1;
-    return Z`
+    return K`
       <div class=${N.audioPanel} style=${`display:${t};`}>
         <div class=${N.section}>
           ${this.renderSectionTitle("音量", e.theme)}
@@ -12076,7 +12077,7 @@ class sc extends Qs {
   }
   renderTextPanel(e) {
     const t = e.clip, i = this.getTransform(t), r = qt(t == null ? void 0 : t.textStyle), n = e.activeTab === "text" ? "block" : "none";
-    return Z`
+    return K`
       <div class=${N.textPanel} style=${`display:${n};`}>
         <div class=${N.section} style="margin-bottom:16px;">
           ${this.renderSectionTitle("文本", e.theme)}
@@ -12159,7 +12160,7 @@ class sc extends Qs {
       { key: "普通话", label: "普通话" },
       { key: "粤语", label: "粤语" }
     ], r = e.voiceCatalog.filter((n) => !e.activeVoiceFilterTag || n.tags.includes(e.activeVoiceFilterTag));
-    return Z`
+    return K`
       <div class=${N.voicePanel} style=${`display:${t};`}>
         <div class=${N.section} style="margin-bottom:16px;">
           <div class=${N.filterGroup} style="display:flex;gap:8px;flex-wrap:wrap;">
@@ -12176,15 +12177,15 @@ class sc extends Qs {
           <div class=${N.voiceCardGrid} style="display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;">
             ${r.map((n) => this.renderVoiceCard(e, n))}
           </div>
-          ${r.length === 0 ? Z`
+          ${r.length === 0 ? K`
             <div style=${`padding:16px 0;font-size:12px;color:${e.theme.labelColor};`}>
               当前筛选下暂无音色
             </div>
           ` : null}
-          ${e.voiceErrorMessage ? Z`
+          ${e.voiceErrorMessage ? K`
             <div
               class=${N.errorText}
-              style=${`padding-top:12px;font-size:12px;color:${A.accentDanger};`}
+              style=${`padding-top:12px;font-size:12px;color:${_.accentDanger};`}
             >
               ${e.voiceErrorMessage}
             </div>
@@ -12194,7 +12195,7 @@ class sc extends Qs {
     `;
   }
   renderFilterButton(e, t, i, r, n) {
-    return Z`
+    return K`
       <button
         class=${N.filterButton}
         style=${[
@@ -12203,7 +12204,7 @@ class sc extends Qs {
       "border-radius:999px",
       "cursor:pointer",
       "font-size:12px",
-      `background:${r ? ke.activeTabBackground : e.theme.buttonBackground}`,
+      `background:${r ? Ce.activeTabBackground : e.theme.buttonBackground}`,
       `color:${r ? e.theme.buttonActiveText : e.theme.textColor}`
     ].join(";")}
         data-key=${t}
@@ -12214,8 +12215,8 @@ class sc extends Qs {
     `;
   }
   renderVoiceCard(e, t) {
-    const i = e.selectedVoiceId === t.id, r = t.avatar;
-    return Z`
+    const i = e.selectedVoiceId === t.id, r = e.previewingVoiceId === t.id, n = t.avatar;
+    return K`
       <button
         class=${N.voiceCard}
         style=${[
@@ -12230,7 +12231,7 @@ class sc extends Qs {
       "cursor:pointer",
       "border:none",
       `outline:${i ? `1px solid ${e.theme.buttonActiveBorder}` : "none"}`,
-      `background:${i ? ke.activeTabBackground : e.theme.buttonBackground}`,
+      `background:${i ? Ce.activeTabBackground : e.theme.buttonBackground}`,
       `color:${e.theme.textColor}`
     ].join(";")}
         @click=${() => e.callbacks.onVoiceSelect(t.id)}
@@ -12245,20 +12246,49 @@ class sc extends Qs {
       "display:flex",
       "align-items:center",
       "justify-content:center",
-      `background:${r ? `url(${r}) center / cover no-repeat` : "linear-gradient(135deg, #6c7080 0%, #424656 100%)"}`,
-      `color:${A.white}`,
+      `background:${n ? `url(${n}) center / cover no-repeat` : "linear-gradient(135deg, #6c7080 0%, #424656 100%)"}`,
+      `color:${_.white}`,
       "font-size:18px",
       "font-weight:600"
     ].join(";")}
         >
-          ${r ? "" : t.name.slice(0, 1)}
+          ${n ? "" : t.name.slice(0, 1)}
         </div>
         <div class=${N.voiceCardMeta} style="flex:1;min-width:0;">
           <div
             class=${N.voiceCardTitle}
-            style=${`font-size:14px;color:${A.white};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;`}
+            style=${[
+      "display:flex",
+      "align-items:center",
+      "gap:6px",
+      "padding-right:24px",
+      "font-size:14px",
+      `color:${_.white}`,
+      "white-space:nowrap",
+      "overflow:hidden",
+      "text-overflow:ellipsis"
+    ].join(";")}
           >
-            ${t.name}
+            <span style="overflow:hidden;text-overflow:ellipsis;">${t.name}</span>
+            ${r ? K`
+              <span
+                class=${N.voiceCardPreviewBadge}
+                style=${[
+      "display:inline-flex",
+      "align-items:center",
+      "justify-content:center",
+      "flex-shrink:0",
+      "padding:1px 6px",
+      "border-radius:999px",
+      "font-size:10px",
+      "line-height:16px",
+      `background:${_.white}`,
+      `color:${Ce.activeTabBackground}`
+    ].join(";")}
+              >
+                试听中
+              </span>
+            ` : null}
           </div>
           <div
             class=${N.voiceCardSubtitle}
@@ -12267,7 +12297,7 @@ class sc extends Qs {
             ${t.lang} · ${t.emotion}
           </div>
         </div>
-        ${i ? Z`
+        ${i ? K`
           <div
             class=${N.voiceCardCheck}
             style="position:absolute;top:50%;right:8px;transform:translateY(-42%);"
@@ -12280,7 +12310,7 @@ class sc extends Qs {
   }
   renderPositionControl(e, t, i) {
     const r = this.getTransform(e.clip), n = r.scale / 2, s = -n, o = 1 + n;
-    return Z`
+    return K`
       <div
         class=${N.row}
         style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"
@@ -12320,12 +12350,12 @@ class sc extends Qs {
       { label: "↓ 下中", x: "center", y: "bottom" },
       { label: "↘ 右下", x: "right", y: "bottom" }
     ];
-    return Z`
+    return K`
       <div
         class=${N.presetGrid}
         style="display:grid;grid-template-columns:repeat(3, 1fr);gap:4px;"
       >
-        ${t.map((i) => Z`
+        ${t.map((i) => K`
           <button
             class=${N.presetButton}
             style=${[
@@ -12349,7 +12379,7 @@ class sc extends Qs {
     `;
   }
   renderSectionTitle(e, t) {
-    return Z`
+    return K`
       <div
         class=${N.sectionTitle}
         style=${`font-size:12px;color:${t.labelColor};margin-bottom:8px;text-transform:uppercase;`}
@@ -12359,7 +12389,7 @@ class sc extends Qs {
     `;
   }
   renderRangeInput(e) {
-    return Z`
+    return K`
       <input
         type="range"
         class=${N.slider}
@@ -12373,7 +12403,7 @@ class sc extends Qs {
     `;
   }
   renderNumberInput(e, t) {
-    return Z`
+    return K`
       <input
         type="number"
         class=${N.input}
@@ -12395,7 +12425,7 @@ class sc extends Qs {
     `;
   }
   renderLabeledNumberInput(e, t, i, r, n = "0.01", s = "-9999", o = "9999") {
-    return Z`
+    return K`
       <label style="display:flex;align-items:center;gap:8px;">
         <span style=${`min-width:18px;font-size:13px;color:${e.theme.labelColor};`}>${t}</span>
         ${this.renderNumberInput(e.theme, {
@@ -12419,11 +12449,11 @@ class sc extends Qs {
       "flex-direction:column",
       "overflow:hidden",
       "height:100%",
-      `--clip-slider-fill-start:${A.sliderFillStart}`,
-      `--clip-slider-fill-end:${A.sliderFillEnd}`,
-      `--clip-slider-road:${A.sliderRoad}`,
-      `--clip-slider-thumb-border:${A.sliderThumbBorder}`,
-      `--clip-slider-thumb-shadow:${ke.sliderThumbShadow}`
+      `--clip-slider-fill-start:${_.sliderFillStart}`,
+      `--clip-slider-fill-end:${_.sliderFillEnd}`,
+      `--clip-slider-road:${_.sliderRoad}`,
+      `--clip-slider-thumb-border:${_.sliderThumbBorder}`,
+      `--clip-slider-thumb-shadow:${Ce.sliderThumbShadow}`
     ].join(";");
   }
   getSliderStyle(e, t, i) {
@@ -12475,12 +12505,17 @@ class oc {
     p(this, "isVoiceLoadingOverlayExiting", !1);
     p(this, "voiceLoadingOverlayHideTimer", null);
     p(this, "voiceErrorMessage", null);
-    this.container = e.container, this.theme = e.theme ?? ac, this.voiceCatalog = e.voiceCatalog ?? [], this.onClipUpdate = e.onClipUpdate, this.onGenerateVoice = e.onGenerateVoice, this.iconCache.set("OmAi-camera", Ce("OmAi-camera")), this.iconCache.set("OmAi-accept", Ce("OmAi-accept")), this.iconCache.set("OmAi-loading", Ce("OmAi-loading")), this.iconCache.set("OmAi-text", Ce("OmAi-text")), this.renderer.mount(this.container), this.render();
+    p(this, "voicePreviewAudio", null);
+    p(this, "previewingVoiceId", null);
+    p(this, "handleVoicePreviewEnded", () => {
+      this.stopVoicePreview();
+    });
+    this.container = e.container, this.theme = e.theme ?? ac, this.voiceCatalog = e.voiceCatalog ?? [], this.onClipUpdate = e.onClipUpdate, this.onGenerateVoice = e.onGenerateVoice, this.iconCache.set("OmAi-camera", ve("OmAi-camera")), this.iconCache.set("OmAi-accept", ve("OmAi-accept")), this.iconCache.set("OmAi-loading", ve("OmAi-loading")), this.iconCache.set("OmAi-text", ve("OmAi-text")), this.renderer.mount(this.container), this.render();
   }
   setClip(e) {
     var n;
     const t = ((n = this.currentClip) == null ? void 0 : n.id) ?? null, i = (e == null ? void 0 : e.id) ?? null, r = t !== i;
-    this.currentClip = e, r ? (this.voiceErrorMessage = null, this.textDraftContent = (e == null ? void 0 : e.textContent) ?? (e == null ? void 0 : e.name) ?? "", this.syncVoiceStateForClip(e)) : (e == null ? void 0 : e.type) === "text" ? this.textDraftContent = e.textContent ?? e.name ?? "" : (e == null ? void 0 : e.type) === "audio" && e.ttsSourceTextClipId ? (this.followTextUpdates = e.ttsFollowTextUpdates ?? !1, e.ttsVoiceId && (this.selectedVoiceId = e.ttsVoiceId), this.ensureVoiceFilters()) : e || this.resetVoiceState(), this.syncActiveTab(e), this.render();
+    r && this.stopVoicePreview(!1), this.currentClip = e, r ? (this.voiceErrorMessage = null, this.textDraftContent = (e == null ? void 0 : e.textContent) ?? (e == null ? void 0 : e.name) ?? "", this.syncVoiceStateForClip(e)) : (e == null ? void 0 : e.type) === "text" ? this.textDraftContent = e.textContent ?? e.name ?? "" : (e == null ? void 0 : e.type) === "audio" && e.ttsSourceTextClipId ? (this.followTextUpdates = e.ttsFollowTextUpdates ?? !1, e.ttsVoiceId && (this.selectedVoiceId = e.ttsVoiceId), this.ensureVoiceFilters()) : e || this.resetVoiceState(), this.syncActiveTab(e), this.render();
   }
   setPreferredTab(e) {
     this.pendingPreferredTab = e;
@@ -12499,7 +12534,7 @@ class oc {
     }, 180), this.render();
   }
   destroy() {
-    this.voiceLoadingOverlayHideTimer !== null && (window.clearTimeout(this.voiceLoadingOverlayHideTimer), this.voiceLoadingOverlayHideTimer = null), this.renderer.destroy();
+    this.stopVoicePreview(!1), this.voiceLoadingOverlayHideTimer !== null && (window.clearTimeout(this.voiceLoadingOverlayHideTimer), this.voiceLoadingOverlayHideTimer = null), this.renderer.destroy();
   }
   render() {
     this.renderer.update({
@@ -12512,6 +12547,7 @@ class oc {
       textDraftContent: this.textDraftContent,
       voiceCatalog: this.voiceCatalog,
       selectedVoiceId: this.selectedVoiceId,
+      previewingVoiceId: this.previewingVoiceId,
       activeVoiceFilterTag: this.activeVoiceFilterTag,
       followTextUpdates: this.followTextUpdates,
       isVoiceLoadingOverlayVisible: this.isVoiceLoadingOverlayRendered,
@@ -12558,7 +12594,7 @@ class oc {
     return e ? e.type === "text" ? ["text", "voice"] : e.type === "audio" ? e.ttsSourceTextClipId ? ["audio", "voice"] : ["audio"] : ["visual", "audio"] : [];
   }
   resetVoiceState() {
-    this.selectedVoiceId = null, this.activeVoiceFilterTag = null, this.followTextUpdates = !1;
+    this.selectedVoiceId = null, this.activeVoiceFilterTag = null, this.followTextUpdates = !1, this.stopVoicePreview(!1);
   }
   syncVoiceStateForClip(e) {
     if (!e || !this.supportsVoicePanel(e)) {
@@ -12603,8 +12639,17 @@ class oc {
     const t = e === "男" || e === "女" || e === "普通话" || e === "粤语" ? e : null;
     this.activeVoiceFilterTag = this.activeVoiceFilterTag === t ? null : t, this.ensureVoiceFilters(), this.render();
   }
-  handleVoiceSelect(e) {
-    this.selectedVoiceId = e, this.voiceErrorMessage = null, this.render();
+  async handleVoiceSelect(e) {
+    const t = this.voiceCatalog.find((r) => r.id === e) ?? null, i = this.previewingVoiceId === e;
+    if (this.selectedVoiceId = e, this.voiceErrorMessage = null, this.render(), !(t != null && t.audiofile)) {
+      this.stopVoicePreview();
+      return;
+    }
+    if (i) {
+      this.stopVoicePreview();
+      return;
+    }
+    await this.playVoicePreview(t);
   }
   handleVoiceFollowTextUpdatesChange(e) {
     var t;
@@ -12650,6 +12695,33 @@ class oc {
     const i = { ...this.currentClip.visualTransform ?? { x: 0.5, y: 0.5, scale: 1 } };
     e.x !== void 0 && (i.x = this.clampValue("x", e.x)), e.y !== void 0 && (i.y = this.clampValue("y", e.y)), e.scale !== void 0 && (i.scale = this.clampValue("scale", e.scale)), this.currentClip = { ...this.currentClip, visualTransform: i }, this.render(), this.onClipUpdate(this.currentClip.id, { visualTransform: i });
   }
+  stopVoicePreview(e = !0) {
+    if (this.voicePreviewAudio) {
+      this.voicePreviewAudio.removeEventListener("ended", this.handleVoicePreviewEnded), this.voicePreviewAudio.pause();
+      try {
+        this.voicePreviewAudio.currentTime = 0;
+      } catch {
+      }
+      this.voicePreviewAudio = null;
+    }
+    if (this.previewingVoiceId !== null) {
+      this.previewingVoiceId = null, e && this.render();
+      return;
+    }
+    e && this.render();
+  }
+  async playVoicePreview(e) {
+    if (!e.audiofile)
+      return;
+    this.stopVoicePreview(!1);
+    const t = new Audio(e.audiofile);
+    t.preload = "auto", t.addEventListener("ended", this.handleVoicePreviewEnded), this.voicePreviewAudio = t, this.previewingVoiceId = e.id, this.render();
+    try {
+      await t.play();
+    } catch (i) {
+      this.voicePreviewAudio === t && (this.stopVoicePreview(!1), this.voiceErrorMessage = i instanceof Error ? i.message : "试听播放失败", this.render());
+    }
+  }
   handleTextContentInput(e) {
     this.textDraftContent = e, this.render();
   }
@@ -12911,7 +12983,7 @@ class Dn {
     return this.updateCurrentTime(t);
   }
   setZoom(e) {
-    const t = Math.max(Te.MIN, Math.min(Te.MAX, e));
+    const t = Math.max(be.MIN, Math.min(be.MAX, e));
     return this.updateZoom(t);
   }
   setSpeed(e) {
@@ -13601,7 +13673,7 @@ function ir(a, e) {
 function bc(a) {
   return Math.min(Tc, Math.max(vc, a));
 }
-function we(a) {
+function ke(a) {
   return {
     x: ir(a == null ? void 0 : a.x, tr.x),
     y: ir(a == null ? void 0 : a.y, tr.y),
@@ -13609,7 +13681,7 @@ function we(a) {
   };
 }
 function Br(a, e, t = 1e-4) {
-  const i = we(a), r = we(e);
+  const i = ke(a), r = ke(e);
   return Math.abs(i.x - r.x) <= t && Math.abs(i.y - r.y) <= t && Math.abs(i.scale - r.scale) <= t;
 }
 function ea(a, e) {
@@ -13636,7 +13708,7 @@ function ea(a, e) {
   };
 }
 function Hn(a, e, t) {
-  const i = ea(a, e), r = we(t), n = i.width * r.scale, s = i.height * r.scale, o = a.width * r.x, l = a.height * r.y;
+  const i = ea(a, e), r = ke(t), n = i.width * r.scale, s = i.height * r.scale, o = a.width * r.x, l = a.height * r.y;
   return {
     left: o - n / 2,
     top: l - s / 2,
@@ -13647,16 +13719,16 @@ function Hn(a, e, t) {
   };
 }
 function ta(a, e, t, i) {
-  const r = we(a), n = i.width > 0 ? i.width : 1, s = i.height > 0 ? i.height : 1;
-  return we({
+  const r = ke(a), n = i.width > 0 ? i.width : 1, s = i.height > 0 ? i.height : 1;
+  return ke({
     x: r.x + e / n,
     y: r.y + t / s,
     scale: r.scale
   });
 }
 function wc(a, e, t, i, r, n) {
-  const s = we(n), o = Math.max(r.width / 2, 1), l = Math.max(r.height / 2, 1), h = Math.abs(t - a) / o, c = Math.abs(i - e) / l;
-  return we({
+  const s = ke(n), o = Math.max(r.width / 2, 1), l = Math.max(r.height / 2, 1), h = Math.abs(t - a) / o, c = Math.abs(i - e) / l;
+  return ke({
     x: s.x,
     y: s.y,
     scale: Math.max(h, c)
@@ -14095,7 +14167,7 @@ class Fc {
     const t = document.createElement("div");
     t.className = this.dependencies.rootClassName ?? "timeline-preview-root", t.style.position = "relative", t.style.width = "100%", t.style.height = "100%", t.style.overflow = "hidden";
     const i = document.createElement("div");
-    i.className = this.dependencies.frameClassName ?? "timeline-preview-frame", i.style.position = "absolute", i.style.left = "0", i.style.top = "0", i.style.overflow = "hidden", i.style.background = A.black, t.appendChild(i);
+    i.className = this.dependencies.frameClassName ?? "timeline-preview-frame", i.style.position = "absolute", i.style.left = "0", i.style.top = "0", i.style.overflow = "hidden", i.style.background = _.black, t.appendChild(i);
     const r = document.createElement("div");
     r.className = "timeline-preview-text-layer", r.style.position = "absolute", r.style.inset = "0", r.style.pointerEvents = "none", r.style.zIndex = "2000", i.appendChild(r);
     const n = document.createElement("div");
@@ -14159,14 +14231,14 @@ class Fc {
   }
   createMediaElement(e, t) {
     const i = this.dependencies.createMediaElement, r = i ? i(e, t) : document.createElement(e === "video" ? "video" : "audio");
-    return r.preload = t === "preload" ? "auto" : "metadata", r.crossOrigin = "anonymous", r.loop = !1, r.controls = !1, Nn(r) ? (r.playsInline = !0, r.disablePictureInPicture = !0, r.style.position = "absolute", r.style.inset = "0", r.style.width = "100%", r.style.height = "100%", r.style.objectFit = "fill", r.style.background = A.black, r.style.pointerEvents = "none") : r.style.display = "none", r;
+    return r.preload = t === "preload" ? "auto" : "metadata", r.crossOrigin = "anonymous", r.loop = !1, r.controls = !1, Nn(r) ? (r.playsInline = !0, r.disablePictureInPicture = !0, r.style.position = "absolute", r.style.inset = "0", r.style.width = "100%", r.style.height = "100%", r.style.objectFit = "fill", r.style.background = _.black, r.style.pointerEvents = "none") : r.style.display = "none", r;
   }
   createSlot(e, t, i) {
     var T, w;
     const r = this.createMediaElement(t, i), n = t === "video" ? document.createElement("div") : null;
     if (n) {
       const b = this.dependencies.slotClassNamePrefix ?? "timeline-preview-slot";
-      n.className = `${b} timeline-preview-slot--${e} timeline-preview-slot--${i}`, n.style.position = "absolute", n.style.overflow = "hidden", n.style.background = A.black, n.style.pointerEvents = "none", n.style.display = "none", n.appendChild(r), (T = this.frameElement) == null || T.appendChild(n);
+      n.className = `${b} timeline-preview-slot--${e} timeline-preview-slot--${i}`, n.style.position = "absolute", n.style.overflow = "hidden", n.style.background = _.black, n.style.pointerEvents = "none", n.style.display = "none", n.appendChild(r), (T = this.frameElement) == null || T.appendChild(n);
     }
     const s = {
       role: i,
@@ -14970,7 +15042,7 @@ class Fc {
   }
   getEffectiveVisualTransform(e) {
     var t;
-    return ((t = this.transientVisualTransform) == null ? void 0 : t.clipId) === e.clip.id ? this.transientVisualTransform.transform : we(e.clip.visualTransform);
+    return ((t = this.transientVisualTransform) == null ? void 0 : t.clipId) === e.clip.id ? this.transientVisualTransform.transform : ke(e.clip.visualTransform);
   }
 }
 class $c extends Fc {
@@ -15492,17 +15564,17 @@ class ud {
   }
   init(e) {
     var i, r, n, s;
-    const t = ((i = e.theme) == null ? void 0 : i.background) || ve.background;
+    const t = ((i = e.theme) == null ? void 0 : i.background) || Te.background;
     this.panel = new rc(
       {
         container: e.container,
         theme: {
           background: t,
-          border: ((r = e.theme) == null ? void 0 : r.border) || ve.border,
-          text: ((n = e.theme) == null ? void 0 : n.clipName) || ve.text,
-          buttonBackground: ((s = e.theme) == null ? void 0 : s.clipBackground) || ve.buttonBackground,
-          buttonHover: ve.buttonHover,
-          buttonDanger: ve.buttonDanger
+          border: ((r = e.theme) == null ? void 0 : r.border) || Te.border,
+          text: ((n = e.theme) == null ? void 0 : n.clipName) || Te.text,
+          buttonBackground: ((s = e.theme) == null ? void 0 : s.clipBackground) || Te.buttonBackground,
+          buttonHover: Te.buttonHover,
+          buttonDanger: Te.buttonDanger
         },
         width: 200,
         timeScaleHeight: e.timeScaleHeight || 40,
@@ -15983,7 +16055,7 @@ class Sd {
       `background:${t.background}`,
       `color:${t.clipName}`
     ].join(";");
-    return Z`
+    return K`
       <div
         class="timeline-manager-header-corner"
         data-layout-role="header-corner"
@@ -16359,7 +16431,7 @@ class wd {
     });
     this.stage = e, this.layer = t, this.onTimeChange = r, this.onScrollChange = n, this.config = {
       duration: i.duration || 36e5,
-      zoom: i.zoom || Te.MEDIUM,
+      zoom: i.zoom || be.MEDIUM,
       currentTime: i.currentTime || 0,
       playState: i.playState || "paused",
       container: i.container,
@@ -16938,7 +17010,7 @@ class $d {
     p(this, "splitOperationDepth", 0);
     this.config = {
       duration: e.duration || 36e5,
-      zoom: e.zoom || Te.MEDIUM,
+      zoom: e.zoom || be.MEDIUM,
       currentTime: e.currentTime || 0,
       playState: e.playState || "paused",
       container: e.container,
@@ -17010,7 +17082,7 @@ class $d {
   getTimelineStore() {
     var e, t, i, r, n;
     if (!this.timelineStore) {
-      const s = ((e = this.config) == null ? void 0 : e.currentTime) ?? 0, o = ((t = this.config) == null ? void 0 : t.playState) ?? "paused", l = ((i = this.config) == null ? void 0 : i.speed) || 1, h = ((r = this.config) == null ? void 0 : r.zoom) || Te.MEDIUM, c = ((n = this.config) == null ? void 0 : n.duration) || 36e5;
+      const s = ((e = this.config) == null ? void 0 : e.currentTime) ?? 0, o = ((t = this.config) == null ? void 0 : t.playState) ?? "paused", l = ((i = this.config) == null ? void 0 : i.speed) || 1, h = ((r = this.config) == null ? void 0 : r.zoom) || be.MEDIUM, c = ((n = this.config) == null ? void 0 : n.duration) || 36e5;
       this.timelineStore = new Jn({
         currentTime: s,
         playState: o,
@@ -17224,7 +17296,7 @@ class $d {
   ensureConfigState() {
     return this.config || (this.config = {
       duration: 36e5,
-      zoom: Te.MEDIUM,
+      zoom: be.MEDIUM,
       currentTime: 0,
       playState: "paused",
       theme: Ai(),
@@ -17798,7 +17870,7 @@ class $d {
     return i && Math.abs(t) >= Math.abs(e) ? t : e;
   }
   handleWheelZoom(e, t) {
-    const i = this.getZoomState(), r = Math.exp(-e * 2e-3), n = Math.max(Te.MIN, Math.min(Te.MAX, i * r));
+    const i = this.getZoomState(), r = Math.exp(-e * 2e-3), n = Math.max(be.MIN, Math.min(be.MAX, i * r));
     Math.abs(n - i) < 1e-4 || this.setZoomCenteredOnTimelinePointer(n, this.getWheelAnchorPointerX(t));
   }
   getWheelAnchorPointerX(e) {
@@ -18146,7 +18218,7 @@ class $d {
       endTime: t + s,
       thumbnails: d,
       style: e.style,
-      visualTransform: r || i === "video" ? we(e.visualTransform) : e.visualTransform,
+      visualTransform: r || i === "video" ? ke(e.visualTransform) : e.visualTransform,
       separatedAudioClipId: e.separatedAudioClipId,
       separatedFromVideoClipId: e.separatedFromVideoClipId,
       volume: e.volume ?? 1,
@@ -18330,7 +18402,7 @@ class $d {
         endTimeAtSource: Math.round(n.endTimeAtSource),
         sourceDuration: Math.round(n.sourceDuration),
         thumbnails: n.thumbnails,
-        visualTransform: n.type === "video" || n.type === "text" ? we(n.visualTransform) : void 0,
+        visualTransform: n.type === "video" || n.type === "text" ? ke(n.visualTransform) : void 0,
         separatedAudioClipId: n.separatedAudioClipId,
         separatedFromVideoClipId: n.separatedFromVideoClipId,
         volume: n.volume ?? 1,
@@ -18473,7 +18545,7 @@ class $d {
     if (e.length === 0) return;
     const t = Math.min(...e.map((h) => h.startTime)), r = (Math.max(...e.map((h) => h.endTime)) - t) / 1e3, n = ((l = this.stage) == null ? void 0 : l.width()) || 0, s = n - ue * 2;
     M.debugLazy("TimelineManager", () => "适合缩放", () => ({ duration: r, containerWidth: n, availableWidth: s }));
-    const o = Math.min(s / r, Te.MAX);
+    const o = Math.min(s / r, be.MAX);
     if (this.setZoom(o), this.timeline) {
       const h = e.reduce((c, d) => d.startTime < c.startTime ? d : c);
       this.scrollToClip(h.id);
@@ -19981,7 +20053,7 @@ class $d {
     const i = this.getClips().find((s) => s.id === e);
     if (!i || i.type !== "video" && i.type !== "text")
       return;
-    const r = we(i.visualTransform), n = we(t);
+    const r = ke(i.visualTransform), n = ke(t);
     Br(r, n) || this.updateClip(e, {
       visualTransform: n
     });
@@ -20026,7 +20098,7 @@ export {
   rc as TrackInfoPanel,
   md as TrackManager,
   ua as ZOOM_ANIMATION,
-  Te as ZOOM_PRESETS,
+  be as ZOOM_PRESETS,
   pa as createClipViewState,
   ss as createClipWithViewState,
   ar as defaultDarkTheme,