@video-editor/ui 0.0.1-beta.11 → 0.0.1-beta.13

package/dist/{index-ulgJGqrQ.js → index-t1DKjcCO.js}

@@ -1,4 +1,4 @@
-import { defineComponent as pe, createElementBlock as b, openBlock as k, withModifiers as le, normalizeStyle as D, createStaticVNode as Se, createElementVNode as c, Fragment as ge, renderList as he, normalizeClass as $e, createCommentVNode as ee, toDisplayString as G, renderSlot as V, computed as M, ref as z, watch as fe, toRef as Re, onMounted as Pe, onBeforeUnmount as Ge, createVNode as ye, withDirectives as Ve, unref as K, vShow as Le } from "vue";
+import { defineComponent as pe, createElementBlock as k, openBlock as _, withModifiers as le, normalizeStyle as D, createStaticVNode as Se, createElementVNode as c, Fragment as ge, renderList as he, normalizeClass as $e, createCommentVNode as ee, toDisplayString as G, renderSlot as V, computed as M, ref as z, watch as fe, toRef as Re, onMounted as Pe, onBeforeUnmount as Ge, createVNode as ye, withDirectives as Ve, unref as K, vShow as Le } from "vue";
 const Ne = /* @__PURE__ */ pe({
   name: "TimelinePlayhead",
   __name: "TimelinePlayhead",
@@ -8,10 +8,10 @@ const Ne = /* @__PURE__ */ pe({
   emits: ["dragStart"],
   setup(l, { emit: f }) {
     const s = f;
-    return (o, i) => (k(), b("div", {
+    return (o, i) => (_(), k("div", {
       class: "ve-playhead",
       style: D({ left: `${l.left}px` }),
-      onMousedown: i[0] || (i[0] = le((_) => s("dragStart", _), ["stop", "prevent"]))
+      onMousedown: i[0] || (i[0] = le((b) => s("dragStart", b), ["stop", "prevent"]))
     }, [...i[1] || (i[1] = [
       Se('<svg class="ve-playhead__icon" width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-601eb0b9><g filter="url(#ve_playhead_drop_shadow)" data-v-601eb0b9><path d="M2 3C2 1.89543 2.89543 1 4 1H8C9.10457 1 10 1.89543 10 3V11.0925C10 11.6692 9.75104 12.2178 9.31701 12.5976L7.31701 14.3476C6.56296 15.0074 5.43704 15.0074 4.68299 14.3476L2.68299 12.5976C2.24896 12.2178 2 11.6692 2 11.0925V3Z" fill="white" data-v-601eb0b9></path><path d="M4 1.5H8C8.82843 1.5 9.5 2.17157 9.5 3V11.0928C9.49991 11.5252 9.31275 11.9369 8.9873 12.2217L6.9873 13.9717C6.42191 14.466 5.57809 14.466 5.0127 13.9717L3.0127 12.2217C2.68725 11.9369 2.50009 11.5252 2.5 11.0928V3C2.5 2.17157 3.17157 1.5 4 1.5Z" stroke="currentColor" data-v-601eb0b9></path></g><defs data-v-601eb0b9><filter id="ve_playhead_drop_shadow" x="0" y="0" width="12" height="17.8428" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-v-601eb0b9><feFlood flood-opacity="0" result="BackgroundImageFix" data-v-601eb0b9></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" data-v-601eb0b9></feColorMatrix><feOffset dy="1" data-v-601eb0b9></feOffset><feGaussianBlur stdDeviation="1" data-v-601eb0b9></feGaussianBlur><feComposite in2="hardAlpha" operator="out" data-v-601eb0b9></feComposite><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" data-v-601eb0b9></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" data-v-601eb0b9></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" data-v-601eb0b9></feBlend></filter></defs></svg><div class="ve-playhead__line" data-v-601eb0b9></div>', 2)
     ])], 36));
@@ -31,9 +31,9 @@ const Ne = /* @__PURE__ */ pe({
     ticks: {}
   },
   setup(l) {
-    return (f, s) => (k(), b("div", Ye, [
+    return (f, s) => (_(), k("div", Ye, [
       c("div", He, [
-        (k(!0), b(ge, null, he(l.ticks, (o) => (k(), b("div", {
+        (_(!0), k(ge, null, he(l.ticks, (o) => (_(), k("div", {
           key: o.timeMs,
           class: $e(["ve-ruler__tick", { "ve-ruler__tick--major": o.isMajor }]),
           style: D({
@@ -42,7 +42,7 @@ const Ne = /* @__PURE__ */ pe({
           })
         }, [
           s[0] || (s[0] = c("div", { class: "ve-ruler__line" }, null, -1)),
-          o.isMajor && o.label ? (k(), b("div", We, G(o.label), 1)) : ee("", !0)
+          o.isMajor && o.label ? (_(), k("div", We, G(o.label), 1)) : ee("", !0)
         ], 6))), 128))
       ])
     ]));
@@ -61,14 +61,14 @@ const Ne = /* @__PURE__ */ pe({
   emits: ["zoomIn", "zoomOut"],
   setup(l, { emit: f }) {
     const s = f;
-    return (o, i) => (k(), b("div", Ue, [
+    return (o, i) => (_(), k("div", Ue, [
       c("div", Ke, [
         V(o.$slots, "left-actions", {}, () => [
           c("button", {
             class: "ve-btn",
             type: "button",
             disabled: l.zoom <= l.minZoom,
-            onClick: i[0] || (i[0] = (_) => s("zoomOut"))
+            onClick: i[0] || (i[0] = (b) => s("zoomOut"))
           }, " - ", 8, qe)
         ], !0)
       ]),
@@ -83,7 +83,7 @@ const Ne = /* @__PURE__ */ pe({
             class: "ve-btn",
             type: "button",
             disabled: l.zoom >= l.maxZoom,
-            onClick: i[1] || (i[1] = (_) => s("zoomIn"))
+            onClick: i[1] || (i[1] = (b) => s("zoomIn"))
           }, " + ", 8, tt)
         ], !0)
       ]),
@@ -108,13 +108,13 @@ function lt(l, f, s, o) {
     if (I < p / 2)
       return { isGap: !0, insertIndex: 0 };
     for (let g = 0; g < f.value.length; g++) {
-      const u = (g + 1) * r - p / 2, te = (g + 1) * r + p / 2;
-      if (I >= u && I < te)
+      const d = (g + 1) * r - p / 2, te = (g + 1) * r + p / 2;
+      if (I >= d && I < te)
         return { isGap: !0, insertIndex: g + 1 };
     }
     return null;
   }
-  function _(Z) {
+  function b(Z) {
     if (!l.value || !f.value.length)
       return -1;
     const h = l.value.getBoundingClientRect(), I = Z - h.top, r = s.value + o.value;
@@ -125,7 +125,7 @@ function lt(l, f, s, o) {
   }
   return {
     detectTrackGap: i,
-    resolveTrackIndexFromClientY: _
+    resolveTrackIndexFromClientY: b
   };
 }
 function ot(l, f, s) {
@@ -133,10 +133,10 @@ function ot(l, f, s) {
     snapGuides: M(() => {
       if (!l.value)
         return [];
-      const i = /* @__PURE__ */ new Set(), _ = l.value.startTime, Z = l.value.endTime, h = 100;
+      const i = /* @__PURE__ */ new Set(), b = l.value.startTime, Z = l.value.endTime, h = 100;
       return ("value" in f ? f.value : f).forEach((r) => {
         r.segments.forEach((p) => {
-          p.id !== l.value?.segment.id && (Math.abs(p.start - _) < h && i.add(p.start), Math.abs(p.end - _) < h && i.add(p.end), Math.abs(p.start - Z) < h && i.add(p.start), Math.abs(p.end - Z) < h && i.add(p.end));
+          p.id !== l.value?.segment.id && (Math.abs(p.start - b) < h && i.add(p.start), Math.abs(p.end - b) < h && i.add(p.end), Math.abs(p.start - Z) < h && i.add(p.start), Math.abs(p.end - Z) < h && i.add(p.end));
         });
       }), Array.from(i).map((r) => ({
         time: r,
@@ -151,21 +151,21 @@ function it(l) {
     tracksRef: s,
     trackHeightPx: o,
     trackGapPx: i,
-    pixelsPerMs: _,
+    pixelsPerMs: b,
     disableInteraction: Z,
     snap: h,
     onDragStart: I,
     onDrag: r,
     onDragEnd: p
-  } = l, g = z(null), u = z(null), { detectTrackGap: te, resolveTrackIndexFromClientY: be } = lt(
+  } = l, g = z(null), d = z(null), { detectTrackGap: te, resolveTrackIndexFromClientY: ke } = lt(
     s,
     f,
     o,
     i
   ), { snapGuides: oe } = ot(
-    u,
+    d,
     f,
-    _
+    b
   );
   function ie(v, q) {
     Z.value || (g.value = {
@@ -176,41 +176,41 @@ function it(l) {
     });
   }
   function re(v, q, F, $) {
-    const { layout: d, initialX: ke, initialY: _e } = v, de = q - ke, O = F - _e, Y = Math.abs(de) > 5 || Math.abs(O) > 5;
+    const { layout: u, initialX: _e, initialY: be } = v, ue = q - _e, O = F - be, Y = Math.abs(ue) > 5 || Math.abs(O) > 5;
     if (!v.moved && Y) {
       v.moved = !0;
       const E = {
-        segment: d.segment,
-        track: d.track,
-        trackIndex: d.trackIndex,
-        segmentIndex: d.segmentIndex,
-        startTime: d.segment.start,
-        endTime: d.segment.end,
-        targetTrackIndex: d.trackIndex,
-        targetTrackId: d.track.id,
+        segment: u.segment,
+        track: u.track,
+        trackIndex: u.trackIndex,
+        segmentIndex: u.segmentIndex,
+        startTime: u.segment.start,
+        endTime: u.segment.end,
+        targetTrackIndex: u.trackIndex,
+        targetTrackId: u.track.id,
         isNewTrack: !1,
-        visualTrackIndex: d.trackIndex,
+        visualTrackIndex: u.trackIndex,
         isValidTarget: !0,
         mouseDeltaY: 0
       };
       I(E);
     }
-    const H = d.segment.end - d.segment.start, W = d.segment.type || d.track.type, J = be(F), w = J >= 0 ? J : d.trackIndex, L = f.value[w];
+    const H = u.segment.end - u.segment.start, W = u.segment.type || u.track.type, J = ke(F), w = J >= 0 ? J : u.trackIndex, L = f.value[w];
     let x, Q, A, B = !1, ne, R = !0;
     if (L && L.type === W) {
       const E = te(F);
-      E ? (B = !0, ne = E.insertIndex, x = E.insertIndex, Q = E.insertIndex, A = d.track.id, R = !0) : (x = w, Q = w, A = L.id, R = !0);
+      E ? (B = !0, ne = E.insertIndex, x = E.insertIndex, Q = E.insertIndex, A = u.track.id, R = !0) : (x = w, Q = w, A = L.id, R = !0);
     } else if (!s.value)
-      x = d.trackIndex, Q = w, A = d.track.id, R = !1;
+      x = u.trackIndex, Q = w, A = u.track.id, R = !1;
     else {
-      const E = s.value.getBoundingClientRect(), ue = F - E.top, ce = o.value + i.value, me = w * ce + o.value / 2, ve = ue < me;
-      B = !0, ne = ve ? w : w + 1, x = ne, Q = w, A = d.track.id, R = !0;
+      const E = s.value.getBoundingClientRect(), de = F - E.top, ce = o.value + i.value, me = w * ce + o.value / 2, ve = de < me;
+      B = !0, ne = ve ? w : w + 1, x = ne, Q = w, A = u.track.id, R = !0;
     }
-    const Te = h(d.segment.start + de / Math.max(_.value, 1e-4)), j = Math.max(0, Te), Ie = j + H, se = {
-      segment: d.segment,
-      track: d.track,
-      trackIndex: d.trackIndex,
-      segmentIndex: d.segmentIndex,
+    const Te = h(u.segment.start + ue / Math.max(b.value, 1e-4)), j = Math.max(0, Te), Ie = j + H, se = {
+      segment: u.segment,
+      track: u.track,
+      trackIndex: u.trackIndex,
+      segmentIndex: u.segmentIndex,
       startTime: j,
       endTime: Ie,
       targetTrackIndex: x,
@@ -221,18 +221,18 @@ function it(l) {
       isValidTarget: R,
       mouseDeltaY: O
     };
-    v.moved && (u.value = se, $ === "drag" ? r(se) : $ === "end" && p(se));
+    v.moved && (d.value = se, $ === "drag" ? r(se) : $ === "end" && p(se));
   }
   function S(v) {
     g.value && re(g.value, v.clientX, v.clientY, "drag");
   }
   function T(v) {
-    g.value && (re(g.value, v.clientX, v.clientY, "end"), g.value = null, u.value = null);
+    g.value && (re(g.value, v.clientX, v.clientY, "end"), g.value = null, d.value = null);
   }
   return {
     // State
     draggingState: g,
-    dragPreview: u,
+    dragPreview: d,
     snapGuides: oe,
     // Methods
     startDrag: ie,
@@ -240,10 +240,10 @@ function it(l) {
     handleDragEnd: T
   };
 }
-const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["onMousedown", "onClick"], ct = { class: "ve-segment__content" }, mt = { class: "ve-segment__title" }, vt = { class: "ve-segment__time" }, ft = {
+const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["onMousedown", "onClick"], ct = { class: "ve-segment__content" }, mt = { class: "ve-segment__title" }, vt = { class: "ve-segment__time" }, ft = {
   key: 0,
   class: "ve-segment__selection"
-}, gt = ["onMousedown"], ht = ["onMousedown"], pt = { class: "ve-segment__content" }, xt = { class: "ve-segment__title" }, bt = { class: "ve-segment__time" }, kt = 120, Ee = 10, _t = /* @__PURE__ */ pe({
+}, gt = ["onMousedown"], ht = ["onMousedown"], pt = { class: "ve-segment__content" }, xt = { class: "ve-segment__title" }, kt = { class: "ve-segment__time" }, _t = 120, Ee = 10, bt = /* @__PURE__ */ pe({
   name: "VideoTimeline",
   __name: "index",
   props: {
@@ -264,7 +264,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
   },
   emits: ["update:currentTime", "update:zoom", "segmentClick", "segmentDragStart", "segmentDrag", "segmentDragEnd", "segmentResizeStart", "segmentResize", "segmentResizeEnd", "backgroundClick"],
   setup(l, { emit: f }) {
-    const s = l, o = f, i = z(null), _ = z(null), Z = z(null), h = z(0);
+    const s = l, o = f, i = z(null), b = z(null), Z = z(null), h = z(0);
     let I = null;
     const r = z(B(s.zoom ?? s.minZoom)), p = z(!1);
     fe(() => s.zoom, (e) => {
@@ -285,20 +285,20 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       const n = B(t * e / h.value);
       Math.abs(n - r.value) > 1e-6 && (r.value = n);
     });
-    const u = M(() => {
+    const d = M(() => {
       const e = Math.max(g.value, 1);
       return Math.max(h.value, 1) * r.value / e;
     }), te = M(() => {
-      const e = g.value * u.value, a = Number.isFinite(e) ? Math.max(e, 0) : 0;
+      const e = g.value * d.value, a = Number.isFinite(e) ? Math.max(e, 0) : 0;
       return Math.max(Math.ceil(a), Math.ceil(h.value || 0));
-    }), be = M(() => {
-      const e = Math.max(u.value, 1e-4), t = (te.value || h.value || 0) / e;
+    }), ke = M(() => {
+      const e = Math.max(d.value, 1e-4), t = (te.value || h.value || 0) / e;
       return Math.max(g.value, t);
-    }), oe = M(() => s.currentTime * u.value), ie = M(() => Te(be.value, u.value)), re = M(() => 1e3 / Math.max(s.fps || 30, 1)), S = M(() => s.trackHeight), T = M(() => s.trackGap), v = M(() => s.rulerHeight), q = M(() => s.tracks.map((e, a) => ({
+    }), oe = M(() => s.currentTime * d.value), ie = M(() => Te(ke.value, d.value)), re = M(() => 1e3 / Math.max(s.fps || 30, 1)), S = M(() => s.trackHeight), T = M(() => s.trackGap), v = M(() => s.rulerHeight), q = M(() => s.tracks.map((e, a) => ({
       track: e,
       trackIndex: a,
       segments: e.segments.map((t, n) => {
-        const m = Math.max((t.end - t.start) * u.value, 6), C = t.start * u.value;
+        const m = Math.max((t.end - t.start) * d.value, 6), C = t.start * d.value;
         return {
           track: e,
           trackIndex: a,
@@ -312,16 +312,16 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
     }))), {
       draggingState: F,
       dragPreview: $,
-      snapGuides: d,
-      startDrag: ke,
-      handleDragMove: _e,
-      handleDragEnd: de
+      snapGuides: u,
+      startDrag: _e,
+      handleDragMove: be,
+      handleDragEnd: ue
     } = it({
       tracks: Re(s, "tracks"),
       tracksRef: Z,
       trackHeightPx: S,
       trackGapPx: T,
-      pixelsPerMs: u,
+      pixelsPerMs: d,
       disableInteraction: Re(s, "disableInteraction"),
       snap: j,
       onDragStart: (e) => {
@@ -339,7 +339,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       const e = $.value, t = q.value.find((y) => y.track.id === e.track.id)?.segments.find((y) => y.segment.id === e.segment.id);
       if (!t)
         return null;
-      const n = (e.startTime - e.segment.start) * u.value, C = v.value + e.trackIndex * (S.value + T.value) + T.value + e.mouseDeltaY;
+      const n = (e.startTime - e.segment.start) * d.value, C = v.value + e.trackIndex * (S.value + T.value) + T.value + e.mouseDeltaY;
       return {
         ...t,
         left: t.left + n,
@@ -365,7 +365,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       const e = i.value;
       if (!e)
         return;
-      const a = e.clientWidth / 2, t = s.currentTime * u.value - a;
+      const a = e.clientWidth / 2, t = s.currentTime * d.value - a;
       e.scrollLeft = Math.max(0, t);
     }
     function B(e) {
@@ -411,25 +411,25 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       return Math.max(Math.round(e / t) * t, 0);
     }
     function Ie(e) {
-      if (!_.value)
+      if (!b.value)
         return;
       if (L.value) {
         L.value = !1;
         return;
       }
-      const a = _.value.getBoundingClientRect(), t = e.clientX - a.left, n = j(t / Math.max(u.value, 1e-4));
+      const a = b.value.getBoundingClientRect(), t = e.clientX - a.left, n = j(t / Math.max(d.value, 1e-4));
       o("update:currentTime", n), o("backgroundClick", e), w.value = !0;
     }
     function se(e) {
       s.disableInteraction || (e.preventDefault(), J.value = !0, w.value = !0, E(e.clientX), A());
     }
     function E(e) {
-      if (!_.value)
+      if (!b.value)
         return;
-      const a = _.value.getBoundingClientRect(), t = e - a.left, n = j(t / Math.max(u.value, 1e-4));
+      const a = b.value.getBoundingClientRect(), t = e - a.left, n = j(t / Math.max(d.value, 1e-4));
       o("update:currentTime", n);
     }
-    function ue(e, a, t) {
+    function de(e, a, t) {
       if (s.disableInteraction)
         return;
       t.stopPropagation(), t.preventDefault(), W.value = {
@@ -449,7 +449,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       O.value = n, o("segmentResizeStart", n);
     }
     function ce(e, a, t) {
-      const { layout: n, edge: m, initialX: C } = e, X = (a - C) / Math.max(u.value, 1e-4), P = Math.max(s.minSegmentDuration, 10);
+      const { layout: n, edge: m, initialX: C } = e, X = (a - C) / Math.max(d.value, 1e-4), P = Math.max(s.minSegmentDuration, 10);
       let N = n.segment.start, U = n.segment.end;
       m === "start" ? (N = j(Math.max(0, n.segment.start + X)), n.segment.end - N < P && (N = n.segment.end - P)) : U = j(Math.max(n.segment.start + P, n.segment.end + X));
       const ae = {
@@ -475,7 +475,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
         ce(W.value, e.clientX, "drag");
         return;
       }
-      _e(e);
+      be(e);
     }
     function ve(e) {
       if (J.value) {
@@ -493,7 +493,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
           const { layout: a } = F.value;
           we(a, e);
         }
-      de(e), w.value = !1;
+      ue(e), w.value = !1;
     }
     function Ce() {
       r.value = B(r.value * 1.25);
@@ -508,7 +508,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
         const ae = U.mainMs * e;
         if (ae < Ee)
           continue;
-        const ze = Math.abs(ae - kt);
+        const ze = Math.abs(ae - _t);
         ze < N && (P = U, N = ze);
       }
       return P || X[X.length - 1] || y[y.length - 1];
@@ -553,7 +553,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       }
       return Me(e);
     }
-    return (e, a) => (k(), b("div", rt, [
+    return (e, a) => (_(), k("div", rt, [
       V(e.$slots, "toolbar", {
         zoom: r.value,
         canZoomIn: r.value < l.maxZoom,
@@ -583,13 +583,13 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       }, [
         c("div", {
           ref_key: "contentRef",
-          ref: _,
+          ref: b,
           class: "ve-timeline__content",
           style: D({ width: `${te.value}px` })
         }, [
           V(e.$slots, "ruler", {
             ticks: ie.value,
-            pixelsPerMs: u.value
+            pixelsPerMs: d.value
           }, () => [
             ye(je, {
               ticks: ie.value,
@@ -612,7 +612,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
             class: "ve-timeline__tracks",
             style: D({ gap: `${T.value}px`, paddingTop: `${T.value}px` })
           }, [
-            (k(!0), b(ge, null, he(q.value, (t) => (k(), b("div", {
+            (_(!0), k(ge, null, he(q.value, (t) => (_(), k("div", {
               key: t.track.id,
               class: $e(["ve-track", { "ve-track--main": t.track.isMain }]),
               style: D({ height: `${S.value}px` })
@@ -621,11 +621,11 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
                 track: t.track,
                 index: t.trackIndex,
                 segments: t.segments,
-                pixelsPerMs: u.value,
+                pixelsPerMs: d.value,
                 height: S.value
               }, () => [
-                c("div", dt, [
-                  (k(!0), b(ge, null, he(t.segments, (n) => Ve((k(), b("div", {
+                c("div", ut, [
+                  (_(!0), k(ge, null, he(t.segments, (n) => Ve((_(), k("div", {
                     key: n.segment.id,
                     class: $e(["ve-segment", {
                       "ve-segment--selected": n.isSelected
@@ -635,7 +635,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
                       width: `${n.width}px`,
                       backgroundColor: n.segment.color || t.track.color || "var(--ve-primary)"
                     }),
-                    onMousedown: le((m) => K(ke)(n, m), ["prevent", "stop"]),
+                    onMousedown: le((m) => K(_e)(n, m), ["prevent", "stop"]),
                     onClick: le((m) => we(n, m), ["stop"])
                   }, [
                     V(e.$slots, "segment", {
@@ -649,28 +649,28 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
                         c("div", vt, G(R(n.segment.start)) + " - " + G(R(n.segment.end)), 1)
                       ])
                     ], !0),
-                    n.isSelected ? (k(), b("div", ft, [
+                    n.isSelected ? (_(), k("div", ft, [
                       c("div", {
                         class: "ve-segment__handle ve-segment__handle--left",
-                        onMousedown: le((m) => ue(n, "start", m), ["stop"])
+                        onMousedown: le((m) => de(n, "start", m), ["stop"])
                       }, [...a[0] || (a[0] = [
-                        Se('<div class="ve-segment__handle-dots" data-v-dedc3cbb><div class="ve-segment__handle-dot" data-v-dedc3cbb></div><div class="ve-segment__handle-dot" data-v-dedc3cbb></div><div class="ve-segment__handle-dot" data-v-dedc3cbb></div><div class="ve-segment__handle-dot" data-v-dedc3cbb></div></div>', 1)
+                        Se('<div class="ve-segment__handle-dots" data-v-547cac41><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div></div>', 1)
                       ])], 40, gt),
                       c("div", {
                         class: "ve-segment__handle ve-segment__handle--right",
-                        onMousedown: le((m) => ue(n, "end", m), ["stop"])
+                        onMousedown: le((m) => de(n, "end", m), ["stop"])
                       }, [...a[1] || (a[1] = [
-                        Se('<div class="ve-segment__handle-dots" data-v-dedc3cbb><div class="ve-segment__handle-dot" data-v-dedc3cbb></div><div class="ve-segment__handle-dot" data-v-dedc3cbb></div><div class="ve-segment__handle-dot" data-v-dedc3cbb></div><div class="ve-segment__handle-dot" data-v-dedc3cbb></div></div>', 1)
+                        Se('<div class="ve-segment__handle-dots" data-v-547cac41><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div></div>', 1)
                       ])], 40, ht)
                     ])) : ee("", !0)
-                  ], 46, ut)), [
+                  ], 46, dt)), [
                     [Le, K($)?.segment.id !== n.segment.id && O.value?.segment.id !== n.segment.id]
                   ])), 128))
                 ])
               ], !0)
             ], 6))), 128))
           ], 4),
-          x.value ? (k(), b("div", {
+          x.value ? (_(), k("div", {
             key: 0,
             class: "ve-segment ve-segment--dragging",
             style: D({
@@ -689,16 +689,16 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
             }, () => [
               c("div", pt, [
                 c("div", xt, G(x.value.segment.type || "segment"), 1),
-                c("div", bt, G(R(x.value.segment.start)) + " - " + G(R(x.value.segment.end)), 1)
+                c("div", kt, G(R(x.value.segment.start)) + " - " + G(R(x.value.segment.end)), 1)
               ])
             ], !0)
           ], 4)) : ee("", !0),
-          Y.value && !Y.value.isNewTrack ? (k(), b("div", {
+          Y.value && !Y.value.isNewTrack ? (_(), k("div", {
             key: 1,
             class: "ve-segment ve-segment--placeholder",
             style: D({
-              left: `${Y.value.startTime * u.value}px`,
-              width: `${(Y.value.endTime - Y.value.startTime) * u.value}px`,
+              left: `${Y.value.startTime * d.value}px`,
+              width: `${(Y.value.endTime - Y.value.startTime) * d.value}px`,
               top: `${Q.value}px`,
               height: `${S.value}px`
             })
@@ -710,18 +710,18 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
               })
             }, null, 4)
           ], 4)) : ee("", !0),
-          H.value ? (k(), b("div", {
+          H.value ? (_(), k("div", {
             key: 2,
             class: "ve-segment ve-segment--preview",
             style: D({
-              left: `${H.value.startTime * u.value}px`,
-              width: `${(H.value.endTime - H.value.startTime) * u.value}px`,
+              left: `${H.value.startTime * d.value}px`,
+              width: `${(H.value.endTime - H.value.startTime) * d.value}px`,
               top: `${v.value + H.value.trackIndex * (S.value + T.value) + T.value}px`,
               height: `${S.value}px`,
               backgroundColor: H.value.segment.color || "var(--ve-primary)"
             })
           }, null, 4)) : ee("", !0),
-          K($) && K(d).length ? (k(!0), b(ge, { key: 3 }, he(K(d), (t) => (k(), b("div", {
+          K($) && K(u).length ? (_(!0), k(ge, { key: 3 }, he(K(u), (t) => (_(), k("div", {
             key: `snap-${t.time}`,
             class: "ve-snap-guide",
             style: D({
@@ -730,7 +730,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
               height: `calc(100% - ${v.value}px)`
             })
           }, null, 4))), 128)) : ee("", !0),
-          K($) && K($).isNewTrack ? (k(), b("div", {
+          K($) && K($).isNewTrack ? (_(), k("div", {
             key: 4,
             class: "ve-new-track-line",
             style: D({
@@ -743,7 +743,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       ], 512)
     ]));
   }
-}), Tt = /* @__PURE__ */ xe(_t, [["__scopeId", "data-v-dedc3cbb"]]);
+}), Tt = /* @__PURE__ */ xe(bt, [["__scopeId", "data-v-547cac41"]]);
 export {
   Tt as V,
   xe as _