@video-editor/ui 0.0.1-beta.14 → 0.0.1-beta.15

package/dist/index-t1DKjcCO.js

@@ -1,750 +0,0 @@
-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",
-  props: {
-    left: {}
-  },
-  emits: ["dragStart"],
-  setup(l, { emit: f }) {
-    const s = f;
-    return (o, i) => (_(), k("div", {
-      class: "ve-playhead",
-      style: D({ left: `${l.left}px` }),
-      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));
-  }
-}), xe = (l, f) => {
-  const s = l.__vccOpts || l;
-  for (const [o, i] of f)
-    s[o] = i;
-  return s;
-}, 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({
-  name: "TimelineRuler",
-  __name: "TimelineRuler",
-  props: {
-    ticks: {}
-  },
-  setup(l) {
-    return (f, s) => (_(), k("div", Ye, [
-      c("div", He, [
-        (_(!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({
-            left: `${o.position}px`,
-            transform: "translateX(-50%)"
-          })
-        }, [
-          s[0] || (s[0] = c("div", { class: "ve-ruler__line" }, null, -1)),
-          o.isMajor && o.label ? (_(), k("div", We, G(o.label), 1)) : ee("", !0)
-        ], 6))), 128))
-      ])
-    ]));
-  }
-}), 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: {
-    zoom: {},
-    minZoom: { default: 0.25 },
-    maxZoom: { default: 10 },
-    currentTime: { default: 0 },
-    duration: { default: 0 },
-    formatTime: { type: Function, default: (l) => `${(l / 1e3).toFixed(2)}s` }
-  },
-  emits: ["zoomIn", "zoomOut"],
-  setup(l, { emit: f }) {
-    const s = f;
-    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] = (b) => s("zoomOut"))
-          }, " - ", 8, qe)
-        ], !0)
-      ]),
-      c("div", Je, [
-        V(o.$slots, "center", {}, () => [
-          c("div", Qe, G((l.zoom * 100).toFixed(0)) + "% ", 1)
-        ], !0)
-      ]),
-      c("div", et, [
-        V(o.$slots, "right-actions", {}, () => [
-          c("button", {
-            class: "ve-btn",
-            type: "button",
-            disabled: l.zoom >= l.maxZoom,
-            onClick: i[1] || (i[1] = (b) => s("zoomIn"))
-          }, " + ", 8, tt)
-        ], !0)
-      ]),
-      c("div", nt, [
-        V(o.$slots, "time", {
-          currentTime: l.currentTime,
-          duration: l.duration
-        }, () => [
-          c("span", null, G(l.formatTime?.(l.currentTime || 0)), 1),
-          i[2] || (i[2] = c("span", { class: "ve-toolbar__time-divider" }, "/", -1)),
-          c("span", null, G(l.formatTime?.(l.duration || 0)), 1)
-        ], !0)
-      ])
-    ]));
-  }
-}), st = /* @__PURE__ */ xe(at, [["__scopeId", "data-v-85ddeb0f"]]);
-function lt(l, f, s, o) {
-  function i(Z) {
-    if (!l.value || !f.value.length)
-      return null;
-    const h = l.value.getBoundingClientRect(), I = Z - h.top, r = s.value + o.value, p = o.value;
-    if (I < p / 2)
-      return { isGap: !0, insertIndex: 0 };
-    for (let g = 0; g < f.value.length; g++) {
-      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 b(Z) {
-    if (!l.value || !f.value.length)
-      return -1;
-    const h = l.value.getBoundingClientRect(), I = Z - h.top, r = s.value + o.value;
-    return I < 0 ? -1 : Math.min(
-      f.value.length - 1,
-      Math.max(0, Math.floor(I / r))
-    );
-  }
-  return {
-    detectTrackGap: i,
-    resolveTrackIndexFromClientY: b
-  };
-}
-function ot(l, f, s) {
-  return {
-    snapGuides: M(() => {
-      if (!l.value)
-        return [];
-      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 - 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,
-        left: r * s.value
-      }));
-    })
-  };
-}
-function it(l) {
-  const {
-    tracks: f,
-    tracksRef: s,
-    trackHeightPx: o,
-    trackGapPx: i,
-    pixelsPerMs: b,
-    disableInteraction: Z,
-    snap: h,
-    onDragStart: I,
-    onDrag: r,
-    onDragEnd: p
-  } = l, g = z(null), d = z(null), { detectTrackGap: te, resolveTrackIndexFromClientY: ke } = lt(
-    s,
-    f,
-    o,
-    i
-  ), { snapGuides: oe } = ot(
-    d,
-    f,
-    b
-  );
-  function ie(v, q) {
-    Z.value || (g.value = {
-      layout: v,
-      initialX: q.clientX,
-      initialY: q.clientY,
-      moved: !1
-    });
-  }
-  function re(v, q, F, $) {
-    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: 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: u.trackIndex,
-        isValidTarget: !0,
-        mouseDeltaY: 0
-      };
-      I(E);
-    }
-    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 = u.track.id, R = !0) : (x = w, Q = w, A = L.id, R = !0);
-    } else if (!s.value)
-      x = u.trackIndex, Q = w, A = u.track.id, R = !1;
-    else {
-      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(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: ne,
-      visualTrackIndex: Q,
-      isValidTarget: R,
-      mouseDeltaY: O
-    };
-    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, d.value = null);
-  }
-  return {
-    // State
-    draggingState: g,
-    dragPreview: d,
-    snapGuides: oe,
-    // Methods
-    startDrag: ie,
-    handleDragMove: S,
-    handleDragEnd: T
-  };
-}
-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, bt = /* @__PURE__ */ pe({
-  name: "VideoTimeline",
-  __name: "index",
-  props: {
-    tracks: {},
-    currentTime: {},
-    duration: {},
-    zoom: {},
-    minZoom: { default: 0.25 },
-    maxZoom: { default: 10 },
-    snapStep: { default: 0 },
-    trackHeight: { default: 56 },
-    trackGap: { default: 8 },
-    rulerHeight: { default: 28 },
-    minSegmentDuration: { default: 60 },
-    selectedSegmentId: { default: null },
-    disableInteraction: { type: Boolean, default: !1 },
-    fps: { default: 30 }
-  },
-  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), 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 = M(() => typeof s.duration == "number" ? Math.max(s.duration, 0) : Math.max(
-      0,
-      ...s.tracks.flatMap(
-        (a) => a.segments.map((t) => t.end)
-      )
-    ));
-    fe(g, (e, a) => {
-      if (!a || !e || a <= 0 || e <= 0 || !p.value || !h.value)
-        return;
-      const t = h.value * r.value / a;
-      if (!Number.isFinite(t) || t <= 0)
-        return;
-      const n = B(t * e / h.value);
-      Math.abs(n - r.value) > 1e-6 && (r.value = n);
-    });
-    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 * 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 = 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) * d.value, 6), C = t.start * d.value;
-        return {
-          track: e,
-          trackIndex: a,
-          segment: t,
-          segmentIndex: n,
-          left: C,
-          width: m,
-          isSelected: s.selectedSegmentId === t.id
-        };
-      })
-    }))), {
-      draggingState: F,
-      dragPreview: $,
-      snapGuides: u,
-      startDrag: _e,
-      handleDragMove: be,
-      handleDragEnd: ue
-    } = it({
-      tracks: Re(s, "tracks"),
-      tracksRef: Z,
-      trackHeightPx: S,
-      trackGapPx: T,
-      pixelsPerMs: d,
-      disableInteraction: Re(s, "disableInteraction"),
-      snap: j,
-      onDragStart: (e) => {
-        o("segmentDragStart", e);
-      },
-      onDrag: (e) => {
-        o("segmentDrag", e);
-      },
-      onDragEnd: (e) => {
-        o("segmentDragEnd", e);
-      }
-    }), 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 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,
-        top: C
-      };
-    }), Q = M(() => {
-      if (!$.value)
-        return 0;
-      const e = $.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 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, () => {
-      A();
-    });
-    function A() {
-      const e = i.value;
-      if (!e)
-        return;
-      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 ne() {
-      if (p.value)
-        return;
-      if (s.zoom !== void 0) {
-        p.value = !0;
-        return;
-      }
-      if (!h.value || g.value <= 0)
-        return;
-      const e = B(1 / 3);
-      r.value = e, p.value = !0;
-    }
-    function R(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"), C = Math.floor(a % 1e3 / 10).toString().padStart(2, "0");
-      return `${n}:${m}.${C}`;
-    }
-    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 Te(e, a) {
-      if (!e || !a)
-        return [];
-      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 * a, U = X % n === 0;
-        y.push({
-          position: N,
-          timeMs: P,
-          isMajor: U,
-          label: U ? Be(P, s.fps || 30, t) : void 0
-        });
-      }
-      return y;
-    }
-    function j(e) {
-      const a = s.snapStep, t = a && a > 0 ? a : re.value;
-      return Math.max(Math.round(e / t) * t, 0);
-    }
-    function Ie(e) {
-      if (!b.value)
-        return;
-      if (L.value) {
-        L.value = !1;
-        return;
-      }
-      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 (!b.value)
-        return;
-      const a = b.value.getBoundingClientRect(), t = e - a.left, n = j(t / Math.max(d.value, 1e-4));
-      o("update:currentTime", n);
-    }
-    function de(e, a, t) {
-      if (s.disableInteraction)
-        return;
-      t.stopPropagation(), t.preventDefault(), W.value = {
-        layout: e,
-        edge: a,
-        initialX: t.clientX
-      };
-      const n = {
-        segment: e.segment,
-        track: e.track,
-        trackIndex: e.trackIndex,
-        segmentIndex: e.segmentIndex,
-        startTime: e.segment.start,
-        endTime: e.segment.end,
-        edge: a
-      };
-      O.value = n, o("segmentResizeStart", n);
-    }
-    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 = ae, t === "drag" ? o("segmentResize", ae) : t === "end" && o("segmentResizeEnd", ae);
-    }
-    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) {
-        E(e.clientX);
-        return;
-      }
-      if (W.value) {
-        ce(W.value, e.clientX, "drag");
-        return;
-      }
-      be(e);
-    }
-    function ve(e) {
-      if (J.value) {
-        J.value = !1, w.value = !1, E(e.clientX), L.value = !0;
-        return;
-      }
-      if (W.value) {
-        ce(W.value, e.clientX, "end"), W.value = null, O.value = null, w.value = !1, L.value = !0;
-        return;
-      }
-      if (F.value)
-        if (F.value.moved)
-          L.value = !0;
-        else {
-          const { layout: a } = F.value;
-          we(a, e);
-        }
-      ue(e), w.value = !1;
-    }
-    function Ce() {
-      r.value = B(r.value * 1.25);
-    }
-    function De() {
-      r.value = B(r.value / 1.25);
-    }
-    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 ae = U.mainMs * e;
-        if (ae < Ee)
-          continue;
-        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 n = t * 1e3;
-        return {
-          mainMs: n,
-          minorMs: Math.max(n / 10, e),
-          mode: "time",
-          label: "time"
-        };
-      });
-    }
-    function Fe(e) {
-      return [
-        {
-          mainMs: Math.max(e * 2, 1),
-          minorMs: Math.max(e, 1),
-          mode: "frame",
-          label: "frame"
-        },
-        {
-          mainMs: Math.max(e * 10, 1),
-          minorMs: Math.max(e * 2, 1),
-          mode: "frame",
-          label: "frame"
-        },
-        {
-          mainMs: 1e3,
-          minorMs: Math.max(e * 10, 1),
-          mode: "frame",
-          label: "frame"
-        }
-      ];
-    }
-    function Be(e, a, t) {
-      if (t.label === "frame") {
-        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 Me(e);
-    }
-    return (e, a) => (_(), k("div", rt, [
-      V(e.$slots, "toolbar", {
-        zoom: r.value,
-        canZoomIn: r.value < l.maxZoom,
-        canZoomOut: r.value > l.minZoom,
-        zoomIn: Ce,
-        zoomOut: De,
-        currentTime: l.currentTime,
-        duration: g.value,
-        formatTime: R
-      }, () => [
-        ye(st, {
-          zoom: r.value,
-          "min-zoom": l.minZoom,
-          "max-zoom": l.maxZoom,
-          "current-time": l.currentTime,
-          duration: g.value,
-          "format-time": R,
-          onZoomIn: Ce,
-          onZoomOut: De
-        }, null, 8, ["zoom", "min-zoom", "max-zoom", "current-time", "duration"])
-      ], !0),
-      c("div", {
-        ref_key: "viewportRef",
-        ref: i,
-        class: "ve-timeline__viewport",
-        onClick: Ie
-      }, [
-        c("div", {
-          ref_key: "contentRef",
-          ref: b,
-          class: "ve-timeline__content",
-          style: D({ width: `${te.value}px` })
-        }, [
-          V(e.$slots, "ruler", {
-            ticks: ie.value,
-            pixelsPerMs: d.value
-          }, () => [
-            ye(je, {
-              ticks: ie.value,
-              style: D({ height: `${v.value}px` })
-            }, null, 8, ["ticks", "style"])
-          ], !0),
-          V(e.$slots, "playhead", {
-            left: oe.value,
-            currentTime: l.currentTime
-          }, () => [
-            ye(Oe, {
-              class: "top-0",
-              left: oe.value,
-              onDragStart: se
-            }, null, 8, ["left"])
-          ], !0),
-          c("div", {
-            ref_key: "tracksRef",
-            ref: Z,
-            class: "ve-timeline__tracks",
-            style: D({ gap: `${T.value}px`, paddingTop: `${T.value}px` })
-          }, [
-            (_(!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` })
-            }, [
-              V(e.$slots, "track", {
-                track: t.track,
-                index: t.trackIndex,
-                segments: t.segments,
-                pixelsPerMs: d.value,
-                height: S.value
-              }, () => [
-                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
-                    }]),
-                    style: D({
-                      left: `${n.left}px`,
-                      width: `${n.width}px`,
-                      backgroundColor: n.segment.color || t.track.color || "var(--ve-primary)"
-                    }),
-                    onMousedown: le((m) => K(_e)(n, m), ["prevent", "stop"]),
-                    onClick: le((m) => we(n, m), ["stop"])
-                  }, [
-                    V(e.$slots, "segment", {
-                      layout: n,
-                      segment: n.segment,
-                      track: n.track,
-                      isSelected: n.isSelected
-                    }, () => [
-                      c("div", ct, [
-                        c("div", mt, G(n.segment.type || "segment"), 1),
-                        c("div", vt, G(R(n.segment.start)) + " - " + G(R(n.segment.end)), 1)
-                      ])
-                    ], !0),
-                    n.isSelected ? (_(), k("div", ft, [
-                      c("div", {
-                        class: "ve-segment__handle ve-segment__handle--left",
-                        onMousedown: le((m) => de(n, "start", m), ["stop"])
-                      }, [...a[0] || (a[0] = [
-                        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) => de(n, "end", m), ["stop"])
-                      }, [...a[1] || (a[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, dt)), [
-                    [Le, K($)?.segment.id !== n.segment.id && O.value?.segment.id !== n.segment.id]
-                  ])), 128))
-                ])
-              ], !0)
-            ], 6))), 128))
-          ], 4),
-          x.value ? (_(), k("div", {
-            key: 0,
-            class: "ve-segment ve-segment--dragging",
-            style: D({
-              left: `${x.value.left}px`,
-              width: `${x.value.width}px`,
-              top: `${x.value.top}px`,
-              height: `${S.value}px`,
-              backgroundColor: x.value.segment.color || "var(--ve-primary)"
-            })
-          }, [
-            V(e.$slots, "segment", {
-              layout: x.value,
-              segment: x.value.segment,
-              track: x.value.track,
-              isSelected: x.value.isSelected
-            }, () => [
-              c("div", pt, [
-                c("div", xt, G(x.value.segment.type || "segment"), 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("div", {
-            key: 1,
-            class: "ve-segment ve-segment--placeholder",
-            style: D({
-              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`
-            })
-          }, [
-            c("div", {
-              class: "ve-segment--placeholder-inner",
-              style: D({
-                backgroundColor: Y.value.segment.color || "var(--ve-primary)"
-              })
-            }, null, 4)
-          ], 4)) : ee("", !0),
-          H.value ? (_(), k("div", {
-            key: 2,
-            class: "ve-segment ve-segment--preview",
-            style: D({
-              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(u).length ? (_(!0), k(ge, { key: 3 }, he(K(u), (t) => (_(), k("div", {
-            key: `snap-${t.time}`,
-            class: "ve-snap-guide",
-            style: D({
-              left: `${t.left}px`,
-              top: `${v.value}px`,
-              height: `calc(100% - ${v.value}px)`
-            })
-          }, null, 4))), 128)) : ee("", !0),
-          K($) && K($).isNewTrack ? (_(), k("div", {
-            key: 4,
-            class: "ve-new-track-line",
-            style: D({
-              top: `${v.value + K($).targetTrackIndex * (S.value + T.value)}px`,
-              left: "0",
-              right: "0"
-            })
-          }, null, 4)) : ee("", !0)
-        ], 4)
-      ], 512)
-    ]));
-  }
-}), Tt = /* @__PURE__ */ xe(bt, [["__scopeId", "data-v-547cac41"]]);
-export {
-  Tt as V,
-  xe as _
-};