@video-editor/ui 0.0.1-beta.7 → 0.0.1-beta.9

package/dist/{index-y5KhRW21.js → index-B4a4-K9f.js}

@@ -1,4 +1,4 @@
-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 T, 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",
@@ -11,9 +11,9 @@ const Ne = /* @__PURE__ */ pe({
     return (o, i) => (_(), k("div", {
       class: "ve-playhead",
       style: D({ left: `${l.left}px` }),
-      onMousedown: i[0] || (i[0] = le((M) => s("dragStart", M), ["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-5de83cfe><g filter="url(#ve_playhead_drop_shadow)" data-v-5de83cfe><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-5de83cfe></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-5de83cfe></path></g><defs data-v-5de83cfe><filter id="ve_playhead_drop_shadow" x="0" y="0" width="12" height="17.8428" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-v-5de83cfe><feFlood flood-opacity="0" result="BackgroundImageFix" data-v-5de83cfe></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-5de83cfe></feColorMatrix><feOffset dy="1" data-v-5de83cfe></feOffset><feGaussianBlur stdDeviation="1" data-v-5de83cfe></feGaussianBlur><feComposite in2="hardAlpha" operator="out" data-v-5de83cfe></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-5de83cfe></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" data-v-5de83cfe></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" data-v-5de83cfe></feBlend></filter></defs></svg><div class="ve-playhead__line" data-v-5de83cfe></div>', 2)
+      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));
   }
 }), xe = (l, f) => {
@@ -21,7 +21,7 @@ const Ne = /* @__PURE__ */ pe({
   for (const [o, i] of f)
     s[o] = i;
   return s;
-}, Oe = /* @__PURE__ */ xe(Ne, [["__scopeId", "data-v-5de83cfe"]]), Ye = { class: "ve-ruler" }, He = { class: "ve-ruler__ticks" }, We = {
+}, Oe = /* @__PURE__ */ xe(Ne, [["__scopeId", "data-v-601eb0b9"]]), Ye = { class: "ve-ruler" }, He = { class: "ve-ruler__ticks" }, We = {
   key: 0,
   class: "ve-ruler__label"
 }, Ae = /* @__PURE__ */ pe({
@@ -47,7 +47,7 @@ const Ne = /* @__PURE__ */ pe({
       ])
     ]));
   }
-}), je = /* @__PURE__ */ xe(Ae, [["__scopeId", "data-v-30f91636"]]), Ue = { class: "ve-toolbar" }, Ke = { class: "ve-toolbar__group" }, qe = ["disabled"], Je = { class: "ve-toolbar__group" }, Qe = { class: "ve-zoom" }, et = { class: "ve-toolbar__group" }, tt = ["disabled"], at = { class: "ve-toolbar__time" }, nt = /* @__PURE__ */ pe({
+}), je = /* @__PURE__ */ xe(Ae, [["__scopeId", "data-v-30f91636"]]), Ue = { class: "ve-toolbar" }, Ke = { class: "ve-toolbar__group" }, qe = ["disabled"], Je = { class: "ve-toolbar__group" }, Qe = { class: "ve-zoom" }, et = { class: "ve-toolbar__group" }, tt = ["disabled"], nt = { class: "ve-toolbar__time" }, at = /* @__PURE__ */ pe({
   name: "TimelineToolbar",
   __name: "TimelineToolbar",
   props: {
@@ -68,7 +68,7 @@ const Ne = /* @__PURE__ */ pe({
             class: "ve-btn",
             type: "button",
             disabled: l.zoom <= l.minZoom,
-            onClick: i[0] || (i[0] = (M) => s("zoomOut"))
+            onClick: i[0] || (i[0] = (b) => s("zoomOut"))
           }, " - ", 8, qe)
         ], !0)
       ]),
@@ -83,11 +83,11 @@ const Ne = /* @__PURE__ */ pe({
             class: "ve-btn",
             type: "button",
             disabled: l.zoom >= l.maxZoom,
-            onClick: i[1] || (i[1] = (M) => s("zoomIn"))
+            onClick: i[1] || (i[1] = (b) => s("zoomIn"))
           }, " + ", 8, tt)
         ], !0)
       ]),
-      c("div", at, [
+      c("div", nt, [
         V(o.$slots, "time", {
           currentTime: l.currentTime,
           duration: l.duration
@@ -99,7 +99,7 @@ const Ne = /* @__PURE__ */ pe({
       ])
     ]));
   }
-}), st = /* @__PURE__ */ xe(nt, [["__scopeId", "data-v-85ddeb0f"]]);
+}), st = /* @__PURE__ */ xe(at, [["__scopeId", "data-v-85ddeb0f"]]);
 function lt(l, f, s, o) {
   function i(Z) {
     if (!l.value || !f.value.length)
@@ -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 M(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,18 +125,18 @@ function lt(l, f, s, o) {
   }
   return {
     detectTrackGap: i,
-    resolveTrackIndexFromClientY: M
+    resolveTrackIndexFromClientY: b
   };
 }
 function ot(l, f, s) {
   return {
-    snapGuides: T(() => {
+    snapGuides: M(() => {
       if (!l.value)
         return [];
-      const i = /* @__PURE__ */ new Set(), M = 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 - M) < h && i.add(p.start), Math.abs(p.end - M) < 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: M,
+    pixelsPerMs: b,
     disableInteraction: Z,
     snap: h,
     onDragStart: I,
     onDrag: r,
     onDragEnd: p
-  } = l, g = z(null), u = z(null), { detectTrackGap: te, resolveTrackIndexFromClientY: ke } = lt(
+  } = l, g = z(null), d = z(null), { detectTrackGap: te, resolveTrackIndexFromClientY: ke } = lt(
     s,
     f,
     o,
     i
   ), { snapGuides: oe } = ot(
-    u,
+    d,
     f,
-    M
+    b
   );
   function ie(v, q) {
     Z.value || (g.value = {
@@ -176,74 +176,74 @@ function it(l) {
     });
   }
   function re(v, q, F, $) {
-    const { layout: d, initialX: _e, initialY: Me } = v, de = q - _e, O = F - Me, 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 = ke(F), w = J >= 0 ? J : d.trackIndex, L = f.value[w];
-    let x, Q, A, B = !1, ae, R = !0;
+    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, ae = 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, ae = ve ? w : w + 1, x = ae, 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 be = h(d.segment.start + de / Math.max(M.value, 1e-4)), j = Math.max(0, be), 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,
       targetTrackId: A,
       isNewTrack: B,
-      newTrackInsertIndex: ae,
+      newTrackInsertIndex: ne,
       visualTrackIndex: Q,
       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 b(v) {
-    g.value && (re(g.value, v.clientX, v.clientY, "end"), g.value = null, u.value = null);
+  function T(v) {
+    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,
     handleDragMove: S,
-    handleDragEnd: b
+    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" }, kt = { class: "ve-segment__time" }, _t = 120, Ee = 10, Mt = /* @__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,46 +264,46 @@ 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), M = 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) => {
       typeof e == "number" && (r.value = B(e));
     }), fe(r, (e) => o("update:zoom", e));
-    const g = T(() => typeof s.duration == "number" ? Math.max(s.duration, 0) : Math.max(
+    const g = M(() => typeof s.duration == "number" ? Math.max(s.duration, 0) : Math.max(
       0,
       ...s.tracks.flatMap(
-        (n) => n.segments.map((t) => t.end)
+        (a) => a.segments.map((t) => t.end)
       )
     ));
-    fe(g, (e, n) => {
-      if (!n || !e || n <= 0 || e <= 0 || !p.value || !h.value)
+    fe(g, (e, a) => {
+      if (!a || !e || a <= 0 || e <= 0 || !p.value || !h.value)
         return;
-      const t = h.value * r.value / n;
+      const t = h.value * r.value / a;
       if (!Number.isFinite(t) || t <= 0)
         return;
-      const a = B(t * e / h.value);
-      Math.abs(a - r.value) > 1e-6 && (r.value = a);
+      const n = B(t * e / h.value);
+      Math.abs(n - r.value) > 1e-6 && (r.value = n);
     });
-    const u = T(() => {
+    const d = M(() => {
       const e = Math.max(g.value, 1);
       return Math.max(h.value, 1) * r.value / e;
-    }), te = T(() => {
-      const e = g.value * u.value, n = Number.isFinite(e) ? Math.max(e, 0) : 0;
-      return Math.max(Math.ceil(n), Math.ceil(h.value || 0));
-    }), ke = T(() => {
-      const e = Math.max(u.value, 1e-4), t = (te.value || h.value || 0) / e;
+    }), te = M(() => {
+      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));
+    }), ke = M(() => {
+      const e = Math.max(d.value, 1e-4), t = (te.value || h.value || 0) / e;
       return Math.max(g.value, t);
-    }), oe = T(() => s.currentTime * u.value), ie = T(() => be(ke.value, u.value)), re = T(() => 1e3 / Math.max(s.fps || 30, 1)), S = T(() => s.trackHeight), b = T(() => s.trackGap), v = T(() => s.rulerHeight), q = T(() => s.tracks.map((e, n) => ({
+    }), 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: n,
-      segments: e.segments.map((t, a) => {
-        const m = Math.max((t.end - t.start) * u.value, 6), C = t.start * u.value;
+      trackIndex: a,
+      segments: e.segments.map((t, n) => {
+        const m = Math.max((t.end - t.start) * d.value, 6), C = t.start * d.value;
         return {
           track: e,
-          trackIndex: n,
+          trackIndex: a,
           segment: t,
-          segmentIndex: a,
+          segmentIndex: n,
           left: C,
           width: m,
           isSelected: s.selectedSegmentId === t.id
@@ -312,16 +312,16 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
     }))), {
       draggingState: F,
       dragPreview: $,
-      snapGuides: d,
+      snapGuides: u,
       startDrag: _e,
-      handleDragMove: Me,
-      handleDragEnd: de
+      handleDragMove: be,
+      handleDragEnd: ue
     } = it({
       tracks: Re(s, "tracks"),
       tracksRef: Z,
       trackHeightPx: S,
-      trackGapPx: b,
-      pixelsPerMs: u,
+      trackGapPx: T,
+      pixelsPerMs: d,
       disableInteraction: Re(s, "disableInteraction"),
       snap: j,
       onDragStart: (e) => {
@@ -333,29 +333,29 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       onDragEnd: (e) => {
         o("segmentDragEnd", e);
       }
-    }), O = z(null), Y = T(() => $.value), H = T(() => O.value), W = z(null), J = z(!1), w = z(!1), L = z(!1), x = T(() => {
+    }), O = z(null), Y = M(() => $.value), H = M(() => O.value), W = z(null), J = z(!1), w = z(!1), L = z(!1), x = M(() => {
       if (!$.value)
         return null;
       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 a = (e.startTime - e.segment.start) * u.value, C = v.value + e.trackIndex * (S.value + b.value) + b.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 + a,
+        left: t.left + n,
         top: C
       };
-    }), Q = T(() => {
+    }), Q = M(() => {
       if (!$.value)
         return 0;
       const e = $.value;
-      return e.isNewTrack && e.newTrackInsertIndex === 0 ? v.value + b.value : v.value + e.targetTrackIndex * (S.value + b.value) + b.value;
+      return e.isNewTrack && e.newTrackInsertIndex === 0 ? v.value + T.value : v.value + e.targetTrackIndex * (S.value + T.value) + T.value;
     });
     Pe(() => {
       i.value && (I = new ResizeObserver((e) => {
-        const n = e[0];
-        h.value = n?.contentRect.width || i.value?.clientWidth || 0;
-      }), I.observe(i.value), h.value = i.value.clientWidth || 0), window.addEventListener("mousemove", me), window.addEventListener("mouseup", ve), ae();
+        const a = e[0];
+        h.value = a?.contentRect.width || i.value?.clientWidth || 0;
+      }), I.observe(i.value), h.value = i.value.clientWidth || 0), window.addEventListener("mousemove", me), window.addEventListener("mouseup", ve), ne();
     }), Ge(() => {
       I?.disconnect(), I = null, window.removeEventListener("mousemove", me), window.removeEventListener("mouseup", ve);
     }), fe(r, () => {
@@ -365,13 +365,13 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       const e = i.value;
       if (!e)
         return;
-      const n = e.clientWidth / 2, t = s.currentTime * u.value - n;
+      const a = e.clientWidth / 2, t = s.currentTime * d.value - a;
       e.scrollLeft = Math.max(0, t);
     }
     function B(e) {
       return Number.isFinite(e) ? Math.min(Math.max(e, s.minZoom), s.maxZoom) : s.minZoom;
     }
-    function ae() {
+    function ne() {
       if (p.value)
         return;
       if (s.zoom !== void 0) {
@@ -384,19 +384,19 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       r.value = e, p.value = !0;
     }
     function R(e) {
-      const n = Math.max(e, 0), t = Math.floor(n / 1e3), a = Math.floor(t / 60).toString().padStart(2, "0"), m = (t % 60).toString().padStart(2, "0"), C = Math.floor(n % 1e3 / 10).toString().padStart(2, "0");
-      return `${a}:${m}.${C}`;
+      const a = Math.max(e, 0), t = Math.floor(a / 1e3), n = Math.floor(t / 60).toString().padStart(2, "0"), m = (t % 60).toString().padStart(2, "0"), C = Math.floor(a % 1e3 / 10).toString().padStart(2, "0");
+      return `${n}:${m}.${C}`;
     }
-    function Te(e) {
-      const n = Math.max(e, 0), t = Math.floor(n / 1e3), a = Math.floor(t / 60).toString().padStart(2, "0"), m = (t % 60).toString().padStart(2, "0");
-      return `${a}:${m}`;
+    function Me(e) {
+      const a = Math.max(e, 0), t = Math.floor(a / 1e3), n = Math.floor(t / 60).toString().padStart(2, "0"), m = (t % 60).toString().padStart(2, "0");
+      return `${n}:${m}`;
     }
-    function be(e, n) {
-      if (!e || !n)
+    function Te(e, a) {
+      if (!e || !a)
         return [];
-      const t = Ze(n, s.fps || 30), a = Math.max(1, Math.round(t.mainMs / t.minorMs)), m = Math.max(e, 1), C = Math.ceil(m / t.minorMs), y = [];
+      const t = Ze(a, s.fps || 30), n = Math.max(1, Math.round(t.mainMs / t.minorMs)), m = Math.max(e, 1), C = Math.ceil(m / t.minorMs), y = [];
       for (let X = 0; X <= C; X += 1) {
-        const P = Math.min(m, X * t.minorMs), N = P * n, U = X % a === 0;
+        const P = Math.min(m, X * t.minorMs), N = P * a, U = X % n === 0;
         y.push({
           position: N,
           timeMs: P,
@@ -407,64 +407,64 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       return y;
     }
     function j(e) {
-      const n = s.snapStep, t = n && n > 0 ? n : re.value;
+      const a = s.snapStep, t = a && a > 0 ? a : re.value;
       return Math.max(Math.round(e / t) * t, 0);
     }
     function Ie(e) {
-      if (!M.value)
+      if (!b.value)
         return;
       if (L.value) {
         L.value = !1;
         return;
       }
-      const n = M.value.getBoundingClientRect(), t = e.clientX - n.left, a = j(t / Math.max(u.value, 1e-4));
-      o("update:currentTime", a), o("backgroundClick", e), w.value = !0;
+      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 (!M.value)
+      if (!b.value)
         return;
-      const n = M.value.getBoundingClientRect(), t = e - n.left, a = j(t / Math.max(u.value, 1e-4));
-      o("update:currentTime", a);
+      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, n, t) {
+    function de(e, a, t) {
       if (s.disableInteraction)
         return;
       t.stopPropagation(), t.preventDefault(), W.value = {
         layout: e,
-        edge: n,
+        edge: a,
         initialX: t.clientX
       };
-      const a = {
+      const n = {
         segment: e.segment,
         track: e.track,
         trackIndex: e.trackIndex,
         segmentIndex: e.segmentIndex,
         startTime: e.segment.start,
         endTime: e.segment.end,
-        edge: n
+        edge: a
       };
-      O.value = a, o("segmentResizeStart", a);
+      O.value = n, o("segmentResizeStart", n);
     }
-    function ce(e, n, t) {
-      const { layout: a, edge: m, initialX: C } = e, X = (n - C) / Math.max(u.value, 1e-4), P = Math.max(s.minSegmentDuration, 10);
-      let N = a.segment.start, U = a.segment.end;
-      m === "start" ? (N = j(Math.max(0, a.segment.start + X)), a.segment.end - N < P && (N = a.segment.end - P)) : U = j(Math.max(a.segment.start + P, a.segment.end + X));
-      const ne = {
-        segment: a.segment,
-        track: a.track,
-        trackIndex: a.trackIndex,
-        segmentIndex: a.segmentIndex,
+    function ce(e, a, t) {
+      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 = {
+        segment: n.segment,
+        track: n.track,
+        trackIndex: n.trackIndex,
+        segmentIndex: n.segmentIndex,
         startTime: N,
         endTime: U,
         edge: m
       };
-      O.value = ne, t === "drag" ? o("segmentResize", ne) : t === "end" && o("segmentResizeEnd", ne);
+      O.value = ae, t === "drag" ? o("segmentResize", ae) : t === "end" && o("segmentResizeEnd", ae);
     }
-    function we(e, n) {
-      F.value?.layout.segment.id === e.segment.id && F.value.moved || o("segmentClick", e, n);
+    function we(e, a) {
+      F.value?.layout.segment.id === e.segment.id && F.value.moved || o("segmentClick", e, a);
     }
     function me(e) {
       if (J.value) {
@@ -475,7 +475,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
         ce(W.value, e.clientX, "drag");
         return;
       }
-      Me(e);
+      be(e);
     }
     function ve(e) {
       if (J.value) {
@@ -490,10 +490,10 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
         if (F.value.moved)
           L.value = !0;
         else {
-          const { layout: n } = F.value;
-          we(n, e);
+          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);
@@ -501,24 +501,24 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
     function De() {
       r.value = B(r.value / 1.25);
     }
-    function Ze(e, n) {
-      const a = 1e3 / (Number.isFinite(n) && n > 0 ? n : 30), m = e * a, C = Xe(a), y = Fe(a), X = m >= Ee ? [...y, ...C] : C;
+    function Ze(e, a) {
+      const n = 1e3 / (Number.isFinite(a) && a > 0 ? a : 30), m = e * n, C = Xe(n), y = Fe(n), X = m >= Ee ? [...y, ...C] : C;
       let P = null, N = 1 / 0;
       for (const U of X) {
-        const ne = U.mainMs * e;
-        if (ne < Ee)
+        const ae = U.mainMs * e;
+        if (ae < Ee)
           continue;
-        const ze = Math.abs(ne - _t);
+        const ze = Math.abs(ae - _t);
         ze < N && (P = U, N = ze);
       }
       return P || X[X.length - 1] || y[y.length - 1];
     }
     function Xe(e) {
       return [600, 300, 180, 120, 60, 30, 20, 15, 10, 5, 3, 2, 1].map((t) => {
-        const a = t * 1e3;
+        const n = t * 1e3;
         return {
-          mainMs: a,
-          minorMs: Math.max(a / 10, e),
+          mainMs: n,
+          minorMs: Math.max(n / 10, e),
           mode: "time",
           label: "time"
         };
@@ -546,14 +546,14 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
         }
       ];
     }
-    function Be(e, n, t) {
+    function Be(e, a, t) {
       if (t.label === "frame") {
-        const a = Number.isFinite(n) && n > 0 ? n : 30, m = 1e3 / a, y = Math.round(e / m) % a;
-        return y === 0 ? Te(e) : `${y}f`;
+        const n = Number.isFinite(a) && a > 0 ? a : 30, m = 1e3 / n, y = Math.round(e / m) % n;
+        return y === 0 ? Me(e) : `${y}f`;
       }
-      return Te(e);
+      return Me(e);
     }
-    return (e, n) => (_(), k("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: M,
+          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,
@@ -610,7 +610,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
             ref_key: "tracksRef",
             ref: Z,
             class: "ve-timeline__tracks",
-            style: D({ gap: `${b.value}px`, paddingTop: `${b.value}px` })
+            style: D({ gap: `${T.value}px`, paddingTop: `${T.value}px` })
           }, [
             (_(!0), k(ge, null, he(q.value, (t) => (_(), k("div", {
               key: t.track.id,
@@ -621,50 +621,50 @@ 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, [
-                  (_(!0), k(ge, null, he(t.segments, (a) => Ve((_(), k("div", {
-                    key: a.segment.id,
+                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": a.isSelected
+                      "ve-segment--selected": n.isSelected
                     }]),
                     style: D({
-                      left: `${a.left}px`,
-                      width: `${a.width}px`,
-                      backgroundColor: a.segment.color || t.track.color || "var(--ve-primary)"
+                      left: `${n.left}px`,
+                      width: `${n.width}px`,
+                      backgroundColor: n.segment.color || t.track.color || "var(--ve-primary)"
                     }),
-                    onMousedown: le((m) => K(_e)(a, m), ["prevent", "stop"]),
-                    onClick: le((m) => we(a, m), ["stop"])
+                    onMousedown: le((m) => K(_e)(n, m), ["prevent", "stop"]),
+                    onClick: le((m) => we(n, m), ["stop"])
                   }, [
                     V(e.$slots, "segment", {
-                      layout: a,
-                      segment: a.segment,
-                      track: a.track,
-                      isSelected: a.isSelected
+                      layout: n,
+                      segment: n.segment,
+                      track: n.track,
+                      isSelected: n.isSelected
                     }, () => [
                       c("div", ct, [
-                        c("div", mt, G(a.segment.type || "segment"), 1),
-                        c("div", vt, G(R(a.segment.start)) + " - " + G(R(a.segment.end)), 1)
+                        c("div", mt, G(n.segment.type || "segment"), 1),
+                        c("div", vt, G(R(n.segment.start)) + " - " + G(R(n.segment.end)), 1)
                       ])
                     ], !0),
-                    a.isSelected ? (_(), k("div", ft, [
+                    n.isSelected ? (_(), k("div", ft, [
                       c("div", {
                         class: "ve-segment__handle ve-segment__handle--left",
-                        onMousedown: le((m) => ue(a, "start", m), ["stop"])
-                      }, [...n[0] || (n[0] = [
-                        Se('<div class="ve-segment__handle-dots" data-v-66a36acd><div class="ve-segment__handle-dot" data-v-66a36acd></div><div class="ve-segment__handle-dot" data-v-66a36acd></div><div class="ve-segment__handle-dot" data-v-66a36acd></div><div class="ve-segment__handle-dot" data-v-66a36acd></div></div>', 1)
+                        onMousedown: le((m) => de(n, "start", m), ["stop"])
+                      }, [...a[0] || (a[0] = [
+                        Se('<div class="ve-segment__handle-dots" data-v-553c608f><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div></div>', 1)
                       ])], 40, gt),
                       c("div", {
                         class: "ve-segment__handle ve-segment__handle--right",
-                        onMousedown: le((m) => ue(a, "end", m), ["stop"])
-                      }, [...n[1] || (n[1] = [
-                        Se('<div class="ve-segment__handle-dots" data-v-66a36acd><div class="ve-segment__handle-dot" data-v-66a36acd></div><div class="ve-segment__handle-dot" data-v-66a36acd></div><div class="ve-segment__handle-dot" data-v-66a36acd></div><div class="ve-segment__handle-dot" data-v-66a36acd></div></div>', 1)
+                        onMousedown: le((m) => de(n, "end", m), ["stop"])
+                      }, [...a[1] || (a[1] = [
+                        Se('<div class="ve-segment__handle-dots" data-v-553c608f><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div></div>', 1)
                       ])], 40, ht)
                     ])) : ee("", !0)
-                  ], 46, ut)), [
-                    [Le, K($)?.segment.id !== a.segment.id && O.value?.segment.id !== a.segment.id]
+                  ], 46, dt)), [
+                    [Le, K($)?.segment.id !== n.segment.id && O.value?.segment.id !== n.segment.id]
                   ])), 128))
                 ])
               ], !0)
@@ -697,8 +697,8 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
             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`
             })
@@ -714,14 +714,14 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
             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`,
-              top: `${v.value + H.value.trackIndex * (S.value + b.value) + b.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 ? (_(!0), k(ge, { key: 3 }, he(K(d), (t) => (_(), k("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({
@@ -734,7 +734,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
             key: 4,
             class: "ve-new-track-line",
             style: D({
-              top: `${v.value + K($).targetTrackIndex * (S.value + b.value)}px`,
+              top: `${v.value + K($).targetTrackIndex * (S.value + T.value)}px`,
               left: "0",
               right: "0"
             })
@@ -743,8 +743,8 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
       ], 512)
     ]));
   }
-}), bt = /* @__PURE__ */ xe(Mt, [["__scopeId", "data-v-66a36acd"]]);
+}), Tt = /* @__PURE__ */ xe(bt, [["__scopeId", "data-v-553c608f"]]);
 export {
-  bt as V,
+  Tt as V,
   xe as _
 };