@video-editor/ui 0.0.1-beta.7

package/dist/index-y5KhRW21.js

@@ -0,0 +1,750 @@
+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";
+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((M) => s("dragStart", M), ["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)
+    ])], 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-5de83cfe"]]), 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"], at = { class: "ve-toolbar__time" }, nt = /* @__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] = (M) => 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] = (M) => s("zoomIn"))
+          }, " + ", 8, tt)
+        ], !0)
+      ]),
+      c("div", at, [
+        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(nt, [["__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 u = (g + 1) * r - p / 2, te = (g + 1) * r + p / 2;
+      if (I >= u && I < te)
+        return { isGap: !0, insertIndex: g + 1 };
+    }
+    return null;
+  }
+  function M(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: M
+  };
+}
+function ot(l, f, s) {
+  return {
+    snapGuides: T(() => {
+      if (!l.value)
+        return [];
+      const i = /* @__PURE__ */ new Set(), M = 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));
+        });
+      }), Array.from(i).map((r) => ({
+        time: r,
+        left: r * s.value
+      }));
+    })
+  };
+}
+function it(l) {
+  const {
+    tracks: f,
+    tracksRef: s,
+    trackHeightPx: o,
+    trackGapPx: i,
+    pixelsPerMs: M,
+    disableInteraction: Z,
+    snap: h,
+    onDragStart: I,
+    onDrag: r,
+    onDragEnd: p
+  } = l, g = z(null), u = z(null), { detectTrackGap: te, resolveTrackIndexFromClientY: ke } = lt(
+    s,
+    f,
+    o,
+    i
+  ), { snapGuides: oe } = ot(
+    u,
+    f,
+    M
+  );
+  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: d, initialX: _e, initialY: Me } = v, de = q - _e, O = F - Me, Y = Math.abs(de) > 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,
+        isNewTrack: !1,
+        visualTrackIndex: d.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;
+    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);
+    } else if (!s.value)
+      x = d.trackIndex, Q = w, A = d.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 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,
+      startTime: j,
+      endTime: Ie,
+      targetTrackIndex: x,
+      targetTrackId: A,
+      isNewTrack: B,
+      newTrackInsertIndex: ae,
+      visualTrackIndex: Q,
+      isValidTarget: R,
+      mouseDeltaY: O
+    };
+    v.moved && (u.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);
+  }
+  return {
+    // State
+    draggingState: g,
+    dragPreview: u,
+    snapGuides: oe,
+    // Methods
+    startDrag: ie,
+    handleDragMove: S,
+    handleDragEnd: b
+  };
+}
+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 = {
+  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({
+  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), M = 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(
+      0,
+      ...s.tracks.flatMap(
+        (n) => n.segments.map((t) => t.end)
+      )
+    ));
+    fe(g, (e, n) => {
+      if (!n || !e || n <= 0 || e <= 0 || !p.value || !h.value)
+        return;
+      const t = h.value * r.value / n;
+      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 u = T(() => {
+      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;
+      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) => ({
+      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;
+        return {
+          track: e,
+          trackIndex: n,
+          segment: t,
+          segmentIndex: a,
+          left: C,
+          width: m,
+          isSelected: s.selectedSegmentId === t.id
+        };
+      })
+    }))), {
+      draggingState: F,
+      dragPreview: $,
+      snapGuides: d,
+      startDrag: _e,
+      handleDragMove: Me,
+      handleDragEnd: de
+    } = it({
+      tracks: Re(s, "tracks"),
+      tracksRef: Z,
+      trackHeightPx: S,
+      trackGapPx: b,
+      pixelsPerMs: u,
+      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 = T(() => $.value), H = T(() => O.value), W = z(null), J = z(!1), w = z(!1), L = z(!1), x = T(() => {
+      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;
+      return {
+        ...t,
+        left: t.left + a,
+        top: C
+      };
+    }), Q = T(() => {
+      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;
+    });
+    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();
+    }), 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 n = e.clientWidth / 2, t = s.currentTime * u.value - n;
+      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() {
+      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 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}`;
+    }
+    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 be(e, n) {
+      if (!e || !n)
+        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 = [];
+      for (let X = 0; X <= C; X += 1) {
+        const P = Math.min(m, X * t.minorMs), N = P * n, U = X % a === 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 n = s.snapStep, t = n && n > 0 ? n : re.value;
+      return Math.max(Math.round(e / t) * t, 0);
+    }
+    function Ie(e) {
+      if (!M.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;
+    }
+    function se(e) {
+      s.disableInteraction || (e.preventDefault(), J.value = !0, w.value = !0, E(e.clientX), A());
+    }
+    function E(e) {
+      if (!M.value)
+        return;
+      const n = M.value.getBoundingClientRect(), t = e - n.left, a = j(t / Math.max(u.value, 1e-4));
+      o("update:currentTime", a);
+    }
+    function ue(e, n, t) {
+      if (s.disableInteraction)
+        return;
+      t.stopPropagation(), t.preventDefault(), W.value = {
+        layout: e,
+        edge: n,
+        initialX: t.clientX
+      };
+      const a = {
+        segment: e.segment,
+        track: e.track,
+        trackIndex: e.trackIndex,
+        segmentIndex: e.segmentIndex,
+        startTime: e.segment.start,
+        endTime: e.segment.end,
+        edge: n
+      };
+      O.value = a, o("segmentResizeStart", a);
+    }
+    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,
+        startTime: N,
+        endTime: U,
+        edge: m
+      };
+      O.value = ne, t === "drag" ? o("segmentResize", ne) : t === "end" && o("segmentResizeEnd", ne);
+    }
+    function we(e, n) {
+      F.value?.layout.segment.id === e.segment.id && F.value.moved || o("segmentClick", e, n);
+    }
+    function me(e) {
+      if (J.value) {
+        E(e.clientX);
+        return;
+      }
+      if (W.value) {
+        ce(W.value, e.clientX, "drag");
+        return;
+      }
+      Me(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: n } = F.value;
+          we(n, e);
+        }
+      de(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, 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;
+      let P = null, N = 1 / 0;
+      for (const U of X) {
+        const ne = U.mainMs * e;
+        if (ne < Ee)
+          continue;
+        const ze = Math.abs(ne - _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;
+        return {
+          mainMs: a,
+          minorMs: Math.max(a / 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, n, 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`;
+      }
+      return Te(e);
+    }
+    return (e, n) => (_(), 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: M,
+          class: "ve-timeline__content",
+          style: D({ width: `${te.value}px` })
+        }, [
+          V(e.$slots, "ruler", {
+            ticks: ie.value,
+            pixelsPerMs: u.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: `${b.value}px`, paddingTop: `${b.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: u.value,
+                height: S.value
+              }, () => [
+                c("div", dt, [
+                  (_(!0), k(ge, null, he(t.segments, (a) => Ve((_(), k("div", {
+                    key: a.segment.id,
+                    class: $e(["ve-segment", {
+                      "ve-segment--selected": a.isSelected
+                    }]),
+                    style: D({
+                      left: `${a.left}px`,
+                      width: `${a.width}px`,
+                      backgroundColor: a.segment.color || t.track.color || "var(--ve-primary)"
+                    }),
+                    onMousedown: le((m) => K(_e)(a, m), ["prevent", "stop"]),
+                    onClick: le((m) => we(a, m), ["stop"])
+                  }, [
+                    V(e.$slots, "segment", {
+                      layout: a,
+                      segment: a.segment,
+                      track: a.track,
+                      isSelected: a.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)
+                      ])
+                    ], !0),
+                    a.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)
+                      ])], 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)
+                      ])], 40, ht)
+                    ])) : ee("", !0)
+                  ], 46, ut)), [
+                    [Le, K($)?.segment.id !== a.segment.id && O.value?.segment.id !== a.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 * u.value}px`,
+              width: `${(Y.value.endTime - Y.value.startTime) * u.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 * 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`,
+              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", {
+            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 + b.value)}px`,
+              left: "0",
+              right: "0"
+            })
+          }, null, 4)) : ee("", !0)
+        ], 4)
+      ], 512)
+    ]));
+  }
+}), bt = /* @__PURE__ */ xe(Mt, [["__scopeId", "data-v-66a36acd"]]);
+export {
+  bt as V,
+  xe as _
+};