melies-video-editor 0.1.0

package/dist/index.js

@@ -0,0 +1,2033 @@
+import Lt, { useState as J, useRef as V, useEffect as bt, useMemo as _t, useLayoutEffect as Wt } from "react";
+import { Timeline as Ht } from "@xzdarcy/react-timeline-editor";
+import { Howl as Yt, Howler as qt } from "howler";
+import { Select as $t, Button as zt } from "antd";
+import { useSensors as Xt, useSensor as jt, PointerSensor as Jt, TouchSensor as Kt, useDroppable as Gt, DndContext as Zt, rectIntersection as Qt, DragOverlay as en, useDraggable as tn } from "@dnd-kit/core";
+var gt = { exports: {} }, et = {};
+var Dt;
+function nn() {
+  if (Dt) return et;
+  Dt = 1;
+  var u = Lt, a = /* @__PURE__ */ Symbol.for("react.element"), m = /* @__PURE__ */ Symbol.for("react.fragment"), d = Object.prototype.hasOwnProperty, g = u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, S = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function R(E, x, T) {
+    var k, A = {}, q = null, z = null;
+    T !== void 0 && (q = "" + T), x.key !== void 0 && (q = "" + x.key), x.ref !== void 0 && (z = x.ref);
+    for (k in x) d.call(x, k) && !S.hasOwnProperty(k) && (A[k] = x[k]);
+    if (E && E.defaultProps) for (k in x = E.defaultProps, x) A[k] === void 0 && (A[k] = x[k]);
+    return { $$typeof: a, type: E, key: q, ref: z, props: A, _owner: g.current };
+  }
+  return et.Fragment = m, et.jsx = R, et.jsxs = R, et;
+}
+var tt = {};
+var Ot;
+function rn() {
+  return Ot || (Ot = 1, process.env.NODE_ENV !== "production" && (function() {
+    var u = Lt, a = /* @__PURE__ */ Symbol.for("react.element"), m = /* @__PURE__ */ Symbol.for("react.portal"), d = /* @__PURE__ */ Symbol.for("react.fragment"), g = /* @__PURE__ */ Symbol.for("react.strict_mode"), S = /* @__PURE__ */ Symbol.for("react.profiler"), R = /* @__PURE__ */ Symbol.for("react.provider"), E = /* @__PURE__ */ Symbol.for("react.context"), x = /* @__PURE__ */ Symbol.for("react.forward_ref"), T = /* @__PURE__ */ Symbol.for("react.suspense"), k = /* @__PURE__ */ Symbol.for("react.suspense_list"), A = /* @__PURE__ */ Symbol.for("react.memo"), q = /* @__PURE__ */ Symbol.for("react.lazy"), z = /* @__PURE__ */ Symbol.for("react.offscreen"), de = Symbol.iterator, X = "@@iterator";
+    function U(t) {
+      if (t === null || typeof t != "object")
+        return null;
+      var l = de && t[de] || t[X];
+      return typeof l == "function" ? l : null;
+    }
+    var G = u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function O(t) {
+      {
+        for (var l = arguments.length, e = new Array(l > 1 ? l - 1 : 0), n = 1; n < l; n++)
+          e[n - 1] = arguments[n];
+        fe("error", t, e);
+      }
+    }
+    function fe(t, l, e) {
+      {
+        var n = G.ReactDebugCurrentFrame, r = n.getStackAddendum();
+        r !== "" && (l += "%s", e = e.concat([r]));
+        var s = e.map(function(i) {
+          return String(i);
+        });
+        s.unshift("Warning: " + l), Function.prototype.apply.call(console[t], console, s);
+      }
+    }
+    var be = !1, oe = !1, me = !1, ot = !1, Ne = !1, ke;
+    ke = /* @__PURE__ */ Symbol.for("react.module.reference");
+    function Ye(t) {
+      return !!(typeof t == "string" || typeof t == "function" || t === d || t === S || Ne || t === g || t === T || t === k || ot || t === z || be || oe || me || typeof t == "object" && t !== null && (t.$$typeof === q || t.$$typeof === A || t.$$typeof === R || t.$$typeof === E || t.$$typeof === x || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      t.$$typeof === ke || t.getModuleId !== void 0));
+    }
+    function qe(t, l, e) {
+      var n = t.displayName;
+      if (n)
+        return n;
+      var r = l.displayName || l.name || "";
+      return r !== "" ? e + "(" + r + ")" : e;
+    }
+    function Oe(t) {
+      return t.displayName || "Context";
+    }
+    function se(t) {
+      if (t == null)
+        return null;
+      if (typeof t.tag == "number" && O("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof t == "function")
+        return t.displayName || t.name || null;
+      if (typeof t == "string")
+        return t;
+      switch (t) {
+        case d:
+          return "Fragment";
+        case m:
+          return "Portal";
+        case S:
+          return "Profiler";
+        case g:
+          return "StrictMode";
+        case T:
+          return "Suspense";
+        case k:
+          return "SuspenseList";
+      }
+      if (typeof t == "object")
+        switch (t.$$typeof) {
+          case E:
+            var l = t;
+            return Oe(l) + ".Consumer";
+          case R:
+            var e = t;
+            return Oe(e._context) + ".Provider";
+          case x:
+            return qe(t, t.render, "ForwardRef");
+          case A:
+            var n = t.displayName || null;
+            return n !== null ? n : se(t.type) || "Memo";
+          case q: {
+            var r = t, s = r._payload, i = r._init;
+            try {
+              return se(i(s));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var ae = Object.assign, te = 0, Me, ye, y, j, D, C, F;
+    function M() {
+    }
+    M.__reactDisabledLog = !0;
+    function H() {
+      {
+        if (te === 0) {
+          Me = console.log, ye = console.info, y = console.warn, j = console.error, D = console.group, C = console.groupCollapsed, F = console.groupEnd;
+          var t = {
+            configurable: !0,
+            enumerable: !0,
+            value: M,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: t,
+            log: t,
+            warn: t,
+            error: t,
+            group: t,
+            groupCollapsed: t,
+            groupEnd: t
+          });
+        }
+        te++;
+      }
+    }
+    function Se() {
+      {
+        if (te--, te === 0) {
+          var t = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: ae({}, t, {
+              value: Me
+            }),
+            info: ae({}, t, {
+              value: ye
+            }),
+            warn: ae({}, t, {
+              value: y
+            }),
+            error: ae({}, t, {
+              value: j
+            }),
+            group: ae({}, t, {
+              value: D
+            }),
+            groupCollapsed: ae({}, t, {
+              value: C
+            }),
+            groupEnd: ae({}, t, {
+              value: F
+            })
+          });
+        }
+        te < 0 && O("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var pe = G.ReactCurrentDispatcher, ce;
+    function Pe(t, l, e) {
+      {
+        if (ce === void 0)
+          try {
+            throw Error();
+          } catch (r) {
+            var n = r.stack.trim().match(/\n( *(at )?)/);
+            ce = n && n[1] || "";
+          }
+        return `
+` + ce + t;
+      }
+    }
+    var Le = !1, ze;
+    {
+      var ge = typeof WeakMap == "function" ? WeakMap : Map;
+      ze = new ge();
+    }
+    function K(t, l) {
+      if (!t || Le)
+        return "";
+      {
+        var e = ze.get(t);
+        if (e !== void 0)
+          return e;
+      }
+      var n;
+      Le = !0;
+      var r = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var s;
+      s = pe.current, pe.current = null, H();
+      try {
+        if (l) {
+          var i = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(i.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(i, []);
+            } catch (w) {
+              n = w;
+            }
+            Reflect.construct(t, [], i);
+          } else {
+            try {
+              i.call();
+            } catch (w) {
+              n = w;
+            }
+            t.call(i.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (w) {
+            n = w;
+          }
+          t();
+        }
+      } catch (w) {
+        if (w && n && typeof w.stack == "string") {
+          for (var o = w.stack.split(`
+`), c = n.stack.split(`
+`), f = o.length - 1, p = c.length - 1; f >= 1 && p >= 0 && o[f] !== c[p]; )
+            p--;
+          for (; f >= 1 && p >= 0; f--, p--)
+            if (o[f] !== c[p]) {
+              if (f !== 1 || p !== 1)
+                do
+                  if (f--, p--, p < 0 || o[f] !== c[p]) {
+                    var h = `
+` + o[f].replace(" at new ", " at ");
+                    return t.displayName && h.includes("<anonymous>") && (h = h.replace("<anonymous>", t.displayName)), typeof t == "function" && ze.set(t, h), h;
+                  }
+                while (f >= 1 && p >= 0);
+              break;
+            }
+        }
+      } finally {
+        Le = !1, pe.current = s, Se(), Error.prepareStackTrace = r;
+      }
+      var b = t ? t.displayName || t.name : "", N = b ? Pe(b) : "";
+      return typeof t == "function" && ze.set(t, N), N;
+    }
+    function ne(t, l, e) {
+      return K(t, !1);
+    }
+    function $e(t) {
+      var l = t.prototype;
+      return !!(l && l.isReactComponent);
+    }
+    function Be(t, l, e) {
+      if (t == null)
+        return "";
+      if (typeof t == "function")
+        return K(t, $e(t));
+      if (typeof t == "string")
+        return Pe(t);
+      switch (t) {
+        case T:
+          return Pe("Suspense");
+        case k:
+          return Pe("SuspenseList");
+      }
+      if (typeof t == "object")
+        switch (t.$$typeof) {
+          case x:
+            return ne(t.render);
+          case A:
+            return Be(t.type, l, e);
+          case q: {
+            var n = t, r = n._payload, s = n._init;
+            try {
+              return Be(s(r), l, e);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var Ie = Object.prototype.hasOwnProperty, Z = {}, W = G.ReactDebugCurrentFrame;
+    function Ce(t) {
+      if (t) {
+        var l = t._owner, e = Be(t.type, t._source, l ? l.type : null);
+        W.setExtraStackFrame(e);
+      } else
+        W.setExtraStackFrame(null);
+    }
+    function Ue(t, l, e, n, r) {
+      {
+        var s = Function.call.bind(Ie);
+        for (var i in t)
+          if (s(t, i)) {
+            var o = void 0;
+            try {
+              if (typeof t[i] != "function") {
+                var c = Error((n || "React class") + ": " + e + " type `" + i + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof t[i] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw c.name = "Invariant Violation", c;
+              }
+              o = t[i](l, i, n, e, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (f) {
+              o = f;
+            }
+            o && !(o instanceof Error) && (Ce(r), O("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", e, i, typeof o), Ce(null)), o instanceof Error && !(o.message in Z) && (Z[o.message] = !0, Ce(r), O("Failed %s type: %s", e, o.message), Ce(null));
+          }
+      }
+    }
+    var Fe = Array.isArray;
+    function Ve(t) {
+      return Fe(t);
+    }
+    function he(t) {
+      {
+        var l = typeof Symbol == "function" && Symbol.toStringTag, e = l && t[Symbol.toStringTag] || t.constructor.name || "Object";
+        return e;
+      }
+    }
+    function Xe(t) {
+      try {
+        return we(t), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function we(t) {
+      return "" + t;
+    }
+    function st(t) {
+      if (Xe(t))
+        return O("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", he(t)), we(t);
+    }
+    var We = G.ReactCurrentOwner, Je = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Ge, Ze;
+    function at(t) {
+      if (Ie.call(t, "ref")) {
+        var l = Object.getOwnPropertyDescriptor(t, "ref").get;
+        if (l && l.isReactWarning)
+          return !1;
+      }
+      return t.ref !== void 0;
+    }
+    function yt(t) {
+      if (Ie.call(t, "key")) {
+        var l = Object.getOwnPropertyDescriptor(t, "key").get;
+        if (l && l.isReactWarning)
+          return !1;
+      }
+      return t.key !== void 0;
+    }
+    function St(t, l) {
+      typeof t.ref == "string" && We.current;
+    }
+    function wt(t, l) {
+      {
+        var e = function() {
+          Ge || (Ge = !0, O("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", l));
+        };
+        e.isReactWarning = !0, Object.defineProperty(t, "key", {
+          get: e,
+          configurable: !0
+        });
+      }
+    }
+    function He(t, l) {
+      {
+        var e = function() {
+          Ze || (Ze = !0, O("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", l));
+        };
+        e.isReactWarning = !0, Object.defineProperty(t, "ref", {
+          get: e,
+          configurable: !0
+        });
+      }
+    }
+    var Rt = function(t, l, e, n, r, s, i) {
+      var o = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: a,
+        // Built-in properties that belong on the element
+        type: t,
+        key: l,
+        ref: e,
+        props: i,
+        // Record the component responsible for creating this element.
+        _owner: s
+      };
+      return o._store = {}, Object.defineProperty(o._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(o, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: n
+      }), Object.defineProperty(o, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: r
+      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+    };
+    function xt(t, l, e, n, r) {
+      {
+        var s, i = {}, o = null, c = null;
+        e !== void 0 && (st(e), o = "" + e), yt(l) && (st(l.key), o = "" + l.key), at(l) && (c = l.ref, St(l, r));
+        for (s in l)
+          Ie.call(l, s) && !Je.hasOwnProperty(s) && (i[s] = l[s]);
+        if (t && t.defaultProps) {
+          var f = t.defaultProps;
+          for (s in f)
+            i[s] === void 0 && (i[s] = f[s]);
+        }
+        if (o || c) {
+          var p = typeof t == "function" ? t.displayName || t.name || "Unknown" : t;
+          o && wt(i, p), c && He(i, p);
+        }
+        return Rt(t, o, c, r, n, We.current, i);
+      }
+    }
+    var _e = G.ReactCurrentOwner, ct = G.ReactDebugCurrentFrame;
+    function le(t) {
+      if (t) {
+        var l = t._owner, e = Be(t.type, t._source, l ? l.type : null);
+        ct.setExtraStackFrame(e);
+      } else
+        ct.setExtraStackFrame(null);
+    }
+    var Ke;
+    Ke = !1;
+    function Qe(t) {
+      return typeof t == "object" && t !== null && t.$$typeof === a;
+    }
+    function lt() {
+      {
+        if (_e.current) {
+          var t = se(_e.current.type);
+          if (t)
+            return `
+
+Check the render method of \`` + t + "`.";
+        }
+        return "";
+      }
+    }
+    function Et(t) {
+      return "";
+    }
+    var ut = {};
+    function Tt(t) {
+      {
+        var l = lt();
+        if (!l) {
+          var e = typeof t == "string" ? t : t.displayName || t.name;
+          e && (l = `
+
+Check the top-level render call using <` + e + ">.");
+        }
+        return l;
+      }
+    }
+    function dt(t, l) {
+      {
+        if (!t._store || t._store.validated || t.key != null)
+          return;
+        t._store.validated = !0;
+        var e = Tt(l);
+        if (ut[e])
+          return;
+        ut[e] = !0;
+        var n = "";
+        t && t._owner && t._owner !== _e.current && (n = " It was passed a child from " + se(t._owner.type) + "."), le(t), O('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', e, n), le(null);
+      }
+    }
+    function ft(t, l) {
+      {
+        if (typeof t != "object")
+          return;
+        if (Ve(t))
+          for (var e = 0; e < t.length; e++) {
+            var n = t[e];
+            Qe(n) && dt(n, l);
+          }
+        else if (Qe(t))
+          t._store && (t._store.validated = !0);
+        else if (t) {
+          var r = U(t);
+          if (typeof r == "function" && r !== t.entries)
+            for (var s = r.call(t), i; !(i = s.next()).done; )
+              Qe(i.value) && dt(i.value, l);
+        }
+      }
+    }
+    function At(t) {
+      {
+        var l = t.type;
+        if (l == null || typeof l == "string")
+          return;
+        var e;
+        if (typeof l == "function")
+          e = l.propTypes;
+        else if (typeof l == "object" && (l.$$typeof === x || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        l.$$typeof === A))
+          e = l.propTypes;
+        else
+          return;
+        if (e) {
+          var n = se(l);
+          Ue(e, t.props, "prop", n, t);
+        } else if (l.PropTypes !== void 0 && !Ke) {
+          Ke = !0;
+          var r = se(l);
+          O("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", r || "Unknown");
+        }
+        typeof l.getDefaultProps == "function" && !l.getDefaultProps.isReactClassApproved && O("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function Nt(t) {
+      {
+        for (var l = Object.keys(t.props), e = 0; e < l.length; e++) {
+          var n = l[e];
+          if (n !== "children" && n !== "key") {
+            le(t), O("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), le(null);
+            break;
+          }
+        }
+        t.ref !== null && (le(t), O("Invalid attribute `ref` supplied to `React.Fragment`."), le(null));
+      }
+    }
+    var mt = {};
+    function pt(t, l, e, n, r, s) {
+      {
+        var i = Ye(t);
+        if (!i) {
+          var o = "";
+          (t === void 0 || typeof t == "object" && t !== null && Object.keys(t).length === 0) && (o += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var c = Et();
+          c ? o += c : o += lt();
+          var f;
+          t === null ? f = "null" : Ve(t) ? f = "array" : t !== void 0 && t.$$typeof === a ? (f = "<" + (se(t.type) || "Unknown") + " />", o = " Did you accidentally export a JSX literal instead of a component?") : f = typeof t, O("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", f, o);
+        }
+        var p = xt(t, l, e, r, s);
+        if (p == null)
+          return p;
+        if (i) {
+          var h = l.children;
+          if (h !== void 0)
+            if (n)
+              if (Ve(h)) {
+                for (var b = 0; b < h.length; b++)
+                  ft(h[b], t);
+                Object.freeze && Object.freeze(h);
+              } else
+                O("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              ft(h, t);
+        }
+        if (Ie.call(l, "key")) {
+          var N = se(t), w = Object.keys(l).filter(function(I) {
+            return I !== "key";
+          }), P = w.length > 0 ? "{key: someKey, " + w.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!mt[N + P]) {
+            var _ = w.length > 0 ? "{" + w.join(": ..., ") + ": ...}" : "{}";
+            O(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, P, N, _, N), mt[N + P] = !0;
+          }
+        }
+        return t === d ? Nt(p) : At(p), p;
+      }
+    }
+    function kt(t, l, e) {
+      return pt(t, l, e, !0);
+    }
+    function Pt(t, l, e) {
+      return pt(t, l, e, !1);
+    }
+    var Re = Pt, It = kt;
+    tt.Fragment = d, tt.jsx = Re, tt.jsxs = It;
+  })()), tt;
+}
+var Mt;
+function on() {
+  return Mt || (Mt = 1, process.env.NODE_ENV === "production" ? gt.exports = nn() : gt.exports = rn()), gt.exports;
+}
+var v = on();
+const sn = ({ action: u, row: a }) => /* @__PURE__ */ v.jsx("div", { className: "effect0", "data-action-id": u.id, "data-row-id": a.id, children: /* @__PURE__ */ v.jsx("div", { className: "effect0-text", children: `Audio: ${u.data.name}` }) }), an = ({ action: u, row: a }) => /* @__PURE__ */ v.jsx("div", { className: "effect1", "data-action-id": u.id, "data-row-id": a.id, children: /* @__PURE__ */ v.jsx("div", { className: "effect1-text", children: `Video: ${u.data.name}` }) }), cn = ({ action: u, row: a }) => /* @__PURE__ */ v.jsx("div", { className: "effect2", "data-action-id": u.id, "data-row-id": a.id, children: /* @__PURE__ */ v.jsx("div", { className: "effect2-text", children: `Video audio: ${u.data.name}` }) }), ln = (u) => {
+  const a = u.toLowerCase();
+  return a.endsWith(".mp4") || a.endsWith(".webm") || a.endsWith(".mov") || a.endsWith(".m4v") ? "video" : a.endsWith(".mp3") || a.endsWith(".wav") || a.endsWith(".ogg") || a.endsWith(".m4a") || a.endsWith(".aac") ? "audio" : "other";
+};
+class un {
+  blobUrlBySrc = /* @__PURE__ */ new Map();
+  pendingBySrc = /* @__PURE__ */ new Map();
+  /**
+   * Preloads a URL into memory and returns a blob: URL.
+   * Useful to avoid runtime buffering/stalls when seeking frequently.
+   */
+  async preloadToBlobUrl(a) {
+    if (!a) return a;
+    const m = this.blobUrlBySrc.get(a);
+    if (m) return m;
+    const d = this.pendingBySrc.get(a);
+    if (d) return d;
+    const g = (async () => {
+      const S = await fetch(a, { cache: "force-cache" });
+      if (!S.ok) throw new Error(`Failed to fetch ${a}: ${S.status}`);
+      const R = await S.blob(), E = URL.createObjectURL(R);
+      return this.blobUrlBySrc.set(a, E), E;
+    })().catch((S) => (console.warn("[mediaCache] preload failed:", a, S), a)).finally(() => {
+      this.pendingBySrc.delete(a);
+    });
+    return this.pendingBySrc.set(a, g), g;
+  }
+  /** Returns a blob URL if available, otherwise the original `src`. */
+  resolve(a) {
+    return this.blobUrlBySrc.get(a) ?? a;
+  }
+  /** Starts preload in background (non-blocking). */
+  warm(a) {
+    this.preloadToBlobUrl(a);
+  }
+  /** Convenience: preload all unique action.data.src from editor data. */
+  warmFromEditorData(a) {
+    const m = /* @__PURE__ */ new Set(), d = Array.isArray(a) ? a : [];
+    for (const g of d) {
+      const S = g?.actions;
+      if (Array.isArray(S))
+        for (const R of S) {
+          const E = R?.data?.src;
+          typeof E == "string" && E && m.add(E);
+        }
+    }
+    for (const g of m) {
+      const S = ln(g);
+      (S === "video" || S === "audio") && this.warm(g);
+    }
+  }
+}
+const it = new un(), dn = (u) => {
+  if (!u) return;
+  const m = u.split("#")[0].split("?")[0].toLowerCase(), d = m.lastIndexOf(".");
+  if (d < 0) return;
+  const g = m.slice(d + 1);
+  if (g)
+    return g === "m4a" || g === "m4v" ? "mp4" : g;
+};
+class fn {
+  howlBySrc = {};
+  activeByActionId = {};
+  getHowl(a) {
+    const m = it.resolve(a), d = m.startsWith("blob:") ? a : m, g = d;
+    if (this.howlBySrc[g]) return this.howlBySrc[g];
+    const S = dn(a), R = new Yt({
+      src: [d],
+      format: S ? [S] : void 0,
+      loop: !0,
+      autoplay: !1,
+      preload: !0
+    });
+    return this.howlBySrc[g] = R, R;
+  }
+  /**
+   * Ensure the underlying WebAudio context is resumed.
+   *
+   * Some browsers (notably iOS Safari) block audio playback until a user gesture
+   * resumes the AudioContext. Timeline engine callbacks may occur outside the
+   * original gesture call stack, so we explicitly unlock in the toolbar handler.
+   */
+  unlock() {
+    try {
+      const a = qt.ctx;
+      a && a.state === "suspended" && a.resume();
+    } catch {
+    }
+  }
+  warm(a) {
+    a && (it.warm(a), this.getHowl(a));
+  }
+  seekForEngineTime(a, m, d, g, S) {
+    const R = Number(S), E = Number.isFinite(R) ? R : 0, x = a.duration();
+    if (!Number.isFinite(x) || x <= 0) {
+      a.seek(Math.max(0, g - d + E), m);
+      return;
+    }
+    const T = (g - d + E) % x, k = T < 0 ? T + x : T;
+    a.seek(k, m);
+  }
+  start(a) {
+    const { actionId: m, src: d, startTime: g, time: S, engine: R } = a, E = Number(a.offset ?? 0), x = Number.isFinite(E) ? E : 0, T = this.activeByActionId[m];
+    if (T) {
+      const X = this.getHowl(T.src);
+      X.rate(R.getPlayRate(), T.soundId);
+      try {
+        X.playing(T.soundId) || X.play(T.soundId);
+      } catch {
+      }
+      R.isPlaying || this.seekForEngineTime(X, T.soundId, T.startTime, S, T.offset);
+      return;
+    }
+    const k = this.getHowl(d), A = k.play();
+    k.rate(R.getPlayRate(), A), this.seekForEngineTime(k, A, g, S, x);
+    let q = performance.now();
+    const z = ({ time: X }) => {
+      if (!R.isPlaying) {
+        this.seekForEngineTime(k, A, g, X, x);
+        return;
+      }
+      const U = performance.now();
+      if (!(U - q < 500)) {
+        q = U;
+        try {
+          const G = Math.max(0, X - g + x), O = Number(k.seek(A));
+          Number.isFinite(O) && Math.abs(O - G) > 0.25 && this.seekForEngineTime(k, A, g, X, x);
+        } catch {
+        }
+      }
+    }, de = ({ rate: X }) => {
+      k.rate(X, A);
+    };
+    R.on("afterSetTime", z), R.on("afterSetPlayRate", de), this.activeByActionId[m] = {
+      src: d,
+      startTime: g,
+      offset: x,
+      soundId: A,
+      engine: R,
+      lastResyncAtMs: q,
+      time: z,
+      rate: de
+    };
+  }
+  stop(a) {
+    const { actionId: m } = a, d = this.activeByActionId[m];
+    if (!d) return;
+    const g = this.getHowl(d.src);
+    try {
+      g.stop(d.soundId);
+    } catch {
+    }
+    d.time && d.engine.off("afterSetTime", d.time), d.rate && d.engine.off("afterSetPlayRate", d.rate), delete this.activeByActionId[m];
+  }
+}
+const ie = new fn();
+class mn {
+  videoEl = null;
+  currentSrc = null;
+  lastSeekAtMs = 0;
+  lastRate = null;
+  boundEngine = null;
+  boundActionStart = 0;
+  vfcHandle = null;
+  rafHandle = null;
+  attach(a) {
+    this.videoEl = a, this.currentSrc = a?.currentSrc || a?.getAttribute("src") || null, this.lastSeekAtMs = 0, this.lastRate = null, this.unbindEngine(), this.setActive(!1);
+  }
+  setActive(a) {
+    this.videoEl && (this.videoEl.style.opacity = a ? "1" : "0");
+  }
+  bindEngine(a, m) {
+    this.unbindEngine(), this.boundEngine = a, this.boundActionStart = m, this.tickFromVideo();
+  }
+  unbindEngine() {
+    const a = this.videoEl;
+    if (this.vfcHandle != null && a?.cancelVideoFrameCallback)
+      try {
+        a.cancelVideoFrameCallback(this.vfcHandle);
+      } catch {
+      }
+    this.rafHandle != null && cancelAnimationFrame(this.rafHandle), this.vfcHandle = null, this.rafHandle = null, this.boundEngine = null;
+  }
+  tickFromVideo = () => {
+    if (!this.videoEl || !this.boundEngine || this.videoEl.paused) return;
+    const a = this.boundActionStart + this.videoEl.currentTime;
+    Math.abs(this.boundEngine.getTime() - a) > 0.03 && this.boundEngine.setTime(a, !0);
+    const m = this.videoEl;
+    m?.requestVideoFrameCallback ? this.vfcHandle = m.requestVideoFrameCallback(() => this.tickFromVideo()) : this.rafHandle = requestAnimationFrame(() => this.tickFromVideo());
+  };
+  setSource(a) {
+    if (!this.videoEl || !a) return;
+    const m = it.resolve(a);
+    if (!((this.videoEl.currentSrc || this.videoEl.getAttribute("src") || "") === m || this.currentSrc === m)) {
+      this.currentSrc = m, this.videoEl.preload = "auto", this.videoEl.src = m;
+      try {
+        this.videoEl.load();
+      } catch {
+      }
+    }
+  }
+  warm(a) {
+    a && it.warm(a);
+  }
+  setRate(a) {
+    this.videoEl && this.lastRate !== a && (this.lastRate = a, this.videoEl.playbackRate = a);
+  }
+  /**
+   * Sync the video to a desired timeline time.
+   * To avoid buffering/stutters, we only seek when drift is large or when paused/scrubbing.
+   */
+  seek(a, m) {
+    if (this.videoEl)
+      try {
+        const d = performance.now(), g = m?.force === !0, S = this.videoEl.currentTime;
+        if (!g && !this.videoEl.paused && (Math.abs(S - a) < 0.12 || d - this.lastSeekAtMs < 150))
+          return;
+        const R = this.videoEl.duration;
+        Number.isFinite(R) && R > 0 ? this.videoEl.currentTime = Math.min(a, Math.max(0, R - 0.05)) : this.videoEl.currentTime = Math.max(0, a), this.lastSeekAtMs = d;
+      } catch {
+      }
+  }
+  async play() {
+    if (this.videoEl)
+      try {
+        await this.videoEl.play(), this.boundEngine && this.tickFromVideo();
+      } catch {
+      }
+  }
+  pause() {
+    this.videoEl && this.videoEl.pause();
+  }
+}
+const L = new mn(), nt = 160, rt = 5, vt = 20, pn = {
+  effect0: {
+    id: "effect0",
+    name: "Play audio",
+    source: {
+      start: ({ action: u, engine: a, isPlaying: m, time: d }) => {
+        if (m) {
+          const { src: g, offset: S } = u.data;
+          ie.warm(g), ie.start({ actionId: u.id, src: g, startTime: u.start, engine: a, time: d, offset: S });
+        }
+      },
+      enter: ({ action: u, engine: a, isPlaying: m, time: d }) => {
+        if (m) {
+          const { src: g, offset: S } = u.data;
+          ie.warm(g), ie.start({ actionId: u.id, src: g, startTime: u.start, engine: a, time: d, offset: S });
+        }
+      },
+      leave: ({ action: u }) => {
+        ie.stop({ actionId: u.id });
+      },
+      stop: ({ action: u }) => {
+        ie.stop({ actionId: u.id });
+      }
+    }
+  },
+  effect2: {
+    id: "effect2",
+    name: "Play video audio",
+    source: {
+      start: ({ action: u, engine: a, isPlaying: m, time: d }) => {
+        if (m) {
+          const { src: g, offset: S } = u.data;
+          ie.warm(g), ie.start({ actionId: u.id, src: g, startTime: u.start, engine: a, time: d, offset: S });
+        }
+      },
+      enter: ({ action: u, engine: a, isPlaying: m, time: d }) => {
+        if (m) {
+          const { src: g, offset: S } = u.data;
+          ie.warm(g), ie.start({ actionId: u.id, src: g, startTime: u.start, engine: a, time: d, offset: S });
+        }
+      },
+      leave: ({ action: u }) => {
+        ie.stop({ actionId: u.id });
+      },
+      stop: ({ action: u }) => {
+        ie.stop({ actionId: u.id });
+      }
+    }
+  },
+  effect1: {
+    id: "effect1",
+    name: "Play video",
+    source: {
+      start: ({ action: u, engine: a, isPlaying: m, time: d }) => {
+        const { src: g, previewSrc: S, offset: R } = u.data ?? {}, E = S || g;
+        E && (L.warm(E), L.setSource(E)), L.setActive(!0), L.setRate(a.getPlayRate());
+        const x = Number(R ?? 0);
+        L.seek(Math.max(0, d - u.start + (Number.isFinite(x) ? x : 0)), { force: !0 }), m && L.play();
+      },
+      enter: ({ action: u, engine: a, isPlaying: m, time: d }) => {
+        const { src: g, previewSrc: S, offset: R } = u.data ?? {}, E = S || g;
+        E && (L.warm(E), L.setSource(E)), L.setActive(!0), L.setRate(a.getPlayRate());
+        const x = Number(R ?? 0);
+        L.seek(Math.max(0, d - u.start + (Number.isFinite(x) ? x : 0)), { force: !0 }), m && L.play();
+      },
+      update: ({ action: u, engine: a, time: m, isPlaying: d }) => {
+        const { src: g, previewSrc: S, offset: R } = u.data ?? {}, E = S || g;
+        if (E && L.setSource(E), L.setActive(!0), L.setRate(a.getPlayRate()), !d) {
+          const x = Number(R ?? 0);
+          L.seek(Math.max(0, m - u.start + (Number.isFinite(x) ? x : 0)), { force: !0 });
+        }
+      },
+      leave: () => {
+        L.pause(), L.unbindEngine(), L.setActive(!1);
+      },
+      stop: () => {
+        L.pause(), L.unbindEngine(), L.setActive(!1);
+      }
+    }
+  }
+}, gn = [
+  {
+    id: "0",
+    actions: [
+      {
+        id: "action0",
+        start: 0,
+        end: 10,
+        effectId: "effect1",
+        data: {
+          src: "/footage/Big_Buck_Bunny_720_10s_5MB.mp4",
+          name: "Big Buck Bunny (10s)"
+        }
+      }
+    ]
+  },
+  {
+    id: "1",
+    actions: []
+  },
+  {
+    id: "2",
+    actions: [
+      {
+        id: "action1",
+        start: 0,
+        end: 10,
+        effectId: "effect0",
+        data: {
+          src: "/footage/file_example_MP3_700KB.mp3",
+          name: "Example MP3 (looped)"
+        }
+      }
+    ]
+  },
+  {
+    id: "3",
+    actions: []
+  }
+], { Option: hn } = $t, vn = [0.2, 0.5, 1, 1.5, 2], bn = ({
+  timelineState: u,
+  autoScrollWhenPlay: a,
+  editorData: m,
+  selectedActionId: d,
+  onDeleteSelectedClip: g,
+  onSplitSelectedClip: S,
+  canUndo: R,
+  canRedo: E,
+  onUndo: x,
+  onRedo: T
+}) => {
+  const [k, A] = J(!1), [q, z] = J(0), [de, X] = J(!1), U = V(0), G = V(0), O = V(0), fe = V(0), be = V(0), oe = V(0), me = !!d, Ne = (() => {
+    if (!d) return null;
+    const y = Array.isArray(m) ? m : [];
+    for (const j of y) {
+      const D = j?.actions;
+      if (Array.isArray(D))
+        for (const C of D) {
+          if (String(C?.id) !== d) continue;
+          const F = Number(C?.start), M = Number(C?.end);
+          return !Number.isFinite(F) || !Number.isFinite(M) ? null : { start: F, end: M };
+        }
+    }
+    return null;
+  })(), ke = !!(Ne && q > Ne.start && q < Ne.end), Ye = (y) => {
+    const j = Array.isArray(m) ? m : [];
+    for (const D of j) {
+      const C = D?.actions;
+      if (Array.isArray(C))
+        for (const F of C) {
+          if (F?.effectId !== "effect1") continue;
+          const M = Number(F?.start), H = Number(F?.end);
+          if (!(!Number.isFinite(M) || !Number.isFinite(H)) && y >= M && y < H)
+            return !0;
+        }
+    }
+    return !1;
+  }, qe = (y) => {
+    Ye(y) || (L.pause(), L.unbindEngine(), L.setActive(!1));
+  };
+  bt(() => {
+    if (!u.current) return;
+    const y = u.current, j = () => A(!0), D = () => A(!1), C = ({ time: M }) => {
+      z(M), qe(M);
+    }, F = ({ time: M }) => {
+      const H = performance.now();
+      if (!(H - U.current < 33) && (U.current = H, z(M), qe(M), a.current)) {
+        const pe = M * (nt / rt) + vt - 500, ce = u.current;
+        ce && ce.setScrollLeft(pe);
+      }
+    };
+    return y.listener.on("play", j), y.listener.on("paused", D), y.listener.on("afterSetTime", C), y.listener.on("setTimeByTick", F), () => {
+      y.listener.off("play", j), y.listener.off("paused", D), y.listener.off("afterSetTime", C), y.listener.off("setTimeByTick", F);
+    };
+  }, [m]);
+  const Oe = () => {
+    u.current && (u.current.isPlaying ? u.current.pause() : (ie.unlock(), u.current.play({ autoEnd: !0 })));
+  }, se = (y) => {
+    u.current && u.current.setPlayRate(y);
+  }, ae = (y) => {
+    const j = (parseInt(y % 1 * 100 + "") + "").padStart(2, "0"), D = (parseInt(y / 60 + "") + "").padStart(2, "0"), C = (parseInt(y % 60 + "") + "").padStart(2, "0");
+    return /* @__PURE__ */ v.jsx(v.Fragment, { children: `${D}:${C}.${j.replace("0.", "")}` });
+  }, te = () => {
+    const y = [], j = /* @__PURE__ */ new Set(), D = Array.isArray(m) ? m : [];
+    for (const C of D) {
+      const F = C?.actions;
+      if (Array.isArray(F))
+        for (const M of F) {
+          const H = M?.data?.src;
+          if (!H) continue;
+          const Se = String(H);
+          j.has(Se) || (j.add(Se), y.push(Se));
+        }
+    }
+    return y;
+  }, Me = (y, j) => {
+    const D = URL.createObjectURL(y), C = document.createElement("a");
+    C.href = D, C.download = j, document.body.appendChild(C), C.click(), C.remove(), setTimeout(() => URL.revokeObjectURL(D), 3e3);
+  }, ye = async () => {
+    if (!de) {
+      X(!0);
+      try {
+        const y = te(), j = new FormData();
+        j.append("timeline", JSON.stringify({ editorData: m }));
+        for (const F of y) {
+          const M = await fetch(F);
+          if (!M.ok) throw new Error(`Failed to fetch asset: ${F} (${M.status})`);
+          const H = await M.blob();
+          j.append("assets", H, encodeURIComponent(F));
+        }
+        const D = await fetch("/export", {
+          method: "POST",
+          body: j
+        });
+        if (!D.ok) {
+          const F = await D.text().catch(() => "");
+          throw new Error(F || `Export failed (${D.status})`);
+        }
+        const C = await D.blob();
+        Me(C, "export.mp4");
+      } finally {
+        X(!1);
+      }
+    }
+  };
+  return /* @__PURE__ */ v.jsxs("div", { className: "timeline-player", children: [
+    /* @__PURE__ */ v.jsx(
+      "div",
+      {
+        className: "play-control",
+        role: "button",
+        tabIndex: 0,
+        "aria-label": k ? "Pause" : "Play",
+        onClick: () => {
+          Date.now() - G.current < 450 || Oe();
+        },
+        onPointerUp: (y) => {
+          y.pointerType !== "mouse" && (G.current = Date.now(), Oe());
+        },
+        children: /* @__PURE__ */ v.jsx(
+          "img",
+          {
+            src: k ? "/pause-button.png" : "/play-button.png",
+            alt: "",
+            draggable: !1
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ v.jsx("div", { className: "time", children: ae(q) }),
+    /* @__PURE__ */ v.jsxs("div", { className: "history-tools", children: [
+      /* @__PURE__ */ v.jsx(
+        "button",
+        {
+          type: "button",
+          className: "history-tool",
+          disabled: !R,
+          "aria-label": "Undo",
+          onClick: () => {
+            Date.now() - be.current < 450 || R && x();
+          },
+          onPointerUp: (y) => {
+            y.pointerType !== "mouse" && (be.current = Date.now(), R && x());
+          },
+          children: /* @__PURE__ */ v.jsx("img", { src: "/undo.png", alt: "", draggable: !1 })
+        }
+      ),
+      /* @__PURE__ */ v.jsx(
+        "button",
+        {
+          type: "button",
+          className: "history-tool",
+          disabled: !E,
+          "aria-label": "Redo",
+          onClick: () => {
+            Date.now() - oe.current < 450 || E && T();
+          },
+          onPointerUp: (y) => {
+            y.pointerType !== "mouse" && (oe.current = Date.now(), E && T());
+          },
+          children: /* @__PURE__ */ v.jsx("img", { src: "/redo.png", alt: "", draggable: !1 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ v.jsx("div", { className: "rate-control", children: /* @__PURE__ */ v.jsx($t, { size: "small", defaultValue: 1, style: { width: 120 }, onChange: se, children: vn.map((y) => /* @__PURE__ */ v.jsx(hn, { value: y, children: `${y.toFixed(1)}x` }, y)) }) }),
+    /* @__PURE__ */ v.jsxs("div", { className: "clip-tools", children: [
+      /* @__PURE__ */ v.jsx(
+        "button",
+        {
+          type: "button",
+          className: "clip-tool clip-tool-delete",
+          disabled: !me,
+          "aria-label": "Delete selected clip",
+          onClick: () => {
+            Date.now() - O.current < 450 || me && g();
+          },
+          onPointerUp: (y) => {
+            y.pointerType !== "mouse" && (O.current = Date.now(), me && g());
+          },
+          children: /* @__PURE__ */ v.jsx("img", { src: "/bin.png", alt: "", draggable: !1 })
+        }
+      ),
+      /* @__PURE__ */ v.jsx(
+        "button",
+        {
+          type: "button",
+          className: "clip-tool clip-tool-split",
+          disabled: !ke,
+          "aria-label": "Split selected clip at cursor",
+          onClick: () => {
+            Date.now() - fe.current < 450 || ke && S();
+          },
+          onPointerUp: (y) => {
+            y.pointerType !== "mouse" && (fe.current = Date.now(), ke && S());
+          },
+          children: /* @__PURE__ */ v.jsx("img", { src: "/split.png", alt: "", draggable: !1 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ v.jsx("div", { className: "export-control", children: /* @__PURE__ */ v.jsx(zt, { size: "small", type: "primary", loading: de, onClick: ye, children: "Export" }) })
+  ] });
+};
+function yn() {
+  const u = () => typeof window > "u" ? !1 : typeof navigator < "u" && // maxTouchPoints is the most reliable cross-browser hint.
+  (navigator.maxTouchPoints ?? 0) > 0, [a, m] = J(u);
+  return bt(() => {
+    if (typeof window > "u" || typeof window.matchMedia != "function") return;
+    const d = window.matchMedia("(pointer: coarse)"), g = () => m(!!d.matches || u());
+    return g(), typeof d.addEventListener == "function" ? (d.addEventListener("change", g), () => d.removeEventListener("change", g)) : (d.addListener(g), () => d.removeListener(g));
+  }, []), a;
+}
+const Sn = structuredClone(gn), ht = 5, Bt = ({ item: u, hint: a, isDragging: m }) => /* @__PURE__ */ v.jsxs("div", { className: `footage-card${m ? " is-dragging" : ""}`, children: [
+  /* @__PURE__ */ v.jsx("div", { className: "footage-name", children: u.name }),
+  u.kind === "video" ? /* @__PURE__ */ v.jsx(
+    "video",
+    {
+      className: "footage-preview",
+      src: u.src,
+      muted: !0,
+      preload: "metadata",
+      draggable: !1,
+      onDragStart: (d) => d.preventDefault(),
+      playsInline: !0
+    }
+  ) : /* @__PURE__ */ v.jsx(
+    "audio",
+    {
+      className: "footage-audio",
+      src: u.src,
+      controls: !0,
+      preload: "metadata",
+      draggable: !1,
+      onDragStart: (d) => d.preventDefault()
+    }
+  ),
+  /* @__PURE__ */ v.jsx("div", { className: "footage-kind", children: a })
+] }), wn = ({ item: u, hint: a }) => {
+  const { attributes: m, listeners: d, setNodeRef: g, transform: S, isDragging: R } = tn({
+    id: `footage-${u.id}`,
+    data: { item: u }
+  }), E = S ? {
+    transform: `translate3d(${S.x}px, ${S.y}px, 0)`
+  } : void 0;
+  return /* @__PURE__ */ v.jsx("div", { ref: g, style: E, ...d, ...m, children: /* @__PURE__ */ v.jsx(Bt, { item: u, hint: a, isDragging: R }) });
+}, Rn = (u) => String(u ?? "").toLowerCase().match(/\.(mp3|wav|m4a|aac|ogg)(\?|#|$)/) ? "audio" : "video", xn = (u, a) => {
+  try {
+    const m = String(u ?? "").split("/").pop() || "";
+    return decodeURIComponent(m.split("?")[0].split("#")[0]) || `Footage ${a + 1}`;
+  } catch {
+    return `Footage ${a + 1}`;
+  }
+}, Pn = ({ footageUrls: u }) => {
+  const [a, m] = J(Sn), [d, g] = J(null), [S, R] = J([]), [E, x] = J([]), T = V(a), k = yn(), A = V(null), q = V(null), z = V(null), de = V(!0), X = _t(() => {
+    const e = Array.isArray(u) ? u.filter(Boolean) : [];
+    return e.length ? e.map((n, r) => ({
+      id: `url-${r}`,
+      kind: Rn(n),
+      name: xn(n, r),
+      src: n,
+      defaultDuration: 10
+    })) : [];
+  }, [u]), [U, G] = J(null), [O, fe] = J(null), [be, oe] = J(null), [me, ot] = J(0), [Ne, ke] = J(0), [Ye, qe] = J(0), [Oe, se] = J(0), [ae, te] = J(!1), [Me, ye] = J(null), y = V(null), j = V(null), D = V(null), C = V(null), F = k ? 48 : 32, M = [0, 1], H = [2, 3], Se = ["V1", "V2", "A1", "A2"], pe = (e, n) => {
+    if (n.length === 0) return null;
+    if (e == null) return n[0];
+    let r = n[0], s = Math.abs(e - r);
+    for (const i of n) {
+      const o = Math.abs(e - i);
+      o < s && (r = i, s = o);
+    }
+    return r;
+  }, ce = (e, n) => e ? e.kind === "video" ? pe(n, M) : pe(n, H) : null, Pe = (e) => e === M[1] ? H[1] : H[0];
+  bt(() => {
+    it.warmFromEditorData(a);
+  }, [a]), bt(() => {
+    T.current = a;
+  }, [a]), Wt(() => {
+    const e = z.current;
+    if (!e) return;
+    const n = () => {
+      const s = e.getBoundingClientRect(), i = e.querySelector(".timeline-editor-edit-area");
+      if (!i) return;
+      const o = i.getBoundingClientRect();
+      qe(o.top - s.top), se(o.left - s.left);
+    }, r = requestAnimationFrame(n);
+    return window.addEventListener("resize", n), () => {
+      cancelAnimationFrame(r), window.removeEventListener("resize", n);
+    };
+  }, [k, a.length]);
+  const Le = (e) => {
+    const n = z.current;
+    if (!n || !e) return !1;
+    const r = n.getBoundingClientRect();
+    return e.x >= r.left && e.x <= r.right && e.y >= r.top && e.y <= r.bottom;
+  }, ze = V(0), ge = () => globalThis.crypto?.randomUUID ? globalThis.crypto.randomUUID() : `uid-${++ze.current}`, K = V(null), ne = V(null), $e = V(null), Be = 0.9, Ie = 1.05, Z = V({ actionId: null, edge: null }), W = V({
+    actionId: null,
+    mode: null,
+    dir: null,
+    basePointerTime: null,
+    lastPointerTime: null,
+    initialStart: 0,
+    initialEnd: 0,
+    takeover: !1
+  }), Ce = V(!1), Ue = (e) => e.map((n) => {
+    const r = (n.actions ?? []).map((s) => `${String(s.id)}@${Number(s.start)}-${Number(s.end)}`).join("|");
+    return `${String(n.id)}:${r}`;
+  }).join("||"), Fe = (e) => {
+    const n = structuredClone(e);
+    R((r) => {
+      const s = [...r, n];
+      return s.length > ht && s.splice(0, s.length - ht), s;
+    }), x([]);
+  }, Ve = (e, n, r, s) => e < s && n > r, he = (e, n, r, s) => {
+    const i = Array.isArray(e?.actions) ? e.actions : [];
+    for (const o of i)
+      if (!(!o || o.id === n) && Ve(r, s, Number(o.start), Number(o.end)))
+        return !0;
+    return !1;
+  }, Xe = (e, n) => {
+    for (let r = 0; r < e.length; r++) {
+      const s = e[r], i = Array.isArray(s?.actions) ? s.actions : [];
+      for (let o = 0; o < i.length; o++) {
+        const c = i[o];
+        if (String(c?.id) === n)
+          return { rowIndex: r, actionIndex: o, action: c };
+      }
+    }
+    return null;
+  }, we = (e, n) => {
+    const r = Xe(e, n), s = r?.action?.data?.linkId;
+    if (!r || !s) return null;
+    for (let i = 0; i < e.length; i++) {
+      const o = e[i], c = Array.isArray(o?.actions) ? o.actions : [];
+      for (let f = 0; f < c.length; f++) {
+        const p = c[f];
+        if (p?.data?.linkId && String(p.data.linkId) === String(s) && String(p.id) !== String(n))
+          return { rowIndex: i, actionIndex: f, action: p };
+      }
+    }
+    return null;
+  }, st = (e, n) => {
+    const r = Xe(e, n);
+    if (!r) return e;
+    const s = we(e, n);
+    if (!s) return e;
+    const i = Number(r.action.start), o = Number(r.action.end);
+    if (!Number.isFinite(i) || !Number.isFinite(o) || o <= i || Number(s.action.start) === i && Number(s.action.end) === o) return e;
+    const c = structuredClone(e), f = c[s.rowIndex], p = Array.isArray(f.actions) ? [...f.actions] : [], h = { ...p[s.actionIndex], start: i, end: o };
+    return p.splice(s.actionIndex, 1, h), f.actions = p, c;
+  }, We = (e, n, r, s) => {
+    if (!Number.isFinite(r) || !Number.isFinite(s) || s <= r) return e;
+    const i = Xe(e, n);
+    if (!i) return e;
+    const o = we(e, n);
+    if (!o) return e;
+    const c = structuredClone(e), f = c[i.rowIndex], p = Array.isArray(f.actions) ? [...f.actions] : [], h = { ...p[i.actionIndex], start: r, end: s };
+    p.splice(i.actionIndex, 1, h), f.actions = p;
+    const b = c[o.rowIndex], N = Array.isArray(b.actions) ? [...b.actions] : [], w = { ...N[o.actionIndex], start: r, end: s };
+    return N.splice(o.actionIndex, 1, w), b.actions = N, c;
+  }, Je = (e, n, r, s) => {
+    if (!Number.isFinite(r) || !Number.isFinite(s) || s <= r) return e;
+    const i = Xe(e, n);
+    if (!i) return e;
+    const o = Number(i.action.start), c = Number(i.action.end);
+    if (o === r && c === s) return e;
+    const f = structuredClone(e), p = f[i.rowIndex], h = Array.isArray(p.actions) ? [...p.actions] : [], b = { ...h[i.actionIndex], start: r, end: s };
+    return h.splice(i.actionIndex, 1, b), p.actions = h, f;
+  }, Ge = () => {
+    const e = A.current?.getTime ? Number(A.current.getTime()) : 0;
+    return Number.isFinite(e) ? Math.max(0, e) : 0;
+  }, Ze = (e, n, r) => {
+    const s = Ge(), i = r - n;
+    if (!Number.isFinite(i) || i <= 0)
+      return { start: n, end: r, snapped: !1, edge: null };
+    const o = Math.abs(n - s), c = Math.abs(r - s), f = o <= c ? "start" : "end", p = Math.min(o, c), h = Z.current;
+    if (h.actionId === e && h.edge != null) {
+      if ((h.edge === "start" ? o : c) > Ie)
+        return Z.current = { actionId: e, edge: null }, { start: n, end: r, snapped: !1, edge: null };
+    } else {
+      if (p > Be)
+        return { start: n, end: r, snapped: !1, edge: null };
+      Z.current = { actionId: e, edge: f };
+    }
+    const w = Z.current.edge;
+    if (w === "start") {
+      const I = s, $ = I + i;
+      return { start: Math.max(0, I), end: Math.max(Math.max(0, I), $), snapped: !0, edge: w };
+    }
+    const P = s, _ = P - i;
+    return { start: Math.max(0, _), end: Math.max(0, P), snapped: !0, edge: w };
+  }, at = (e, n, r, s) => {
+    const i = Ge(), o = s === "left" ? "start" : "end", c = Math.abs(o === "start" ? n - i : r - i), f = Z.current;
+    if (f.actionId === e && f.edge === o) {
+      if (c > Ie)
+        return Z.current = { actionId: e, edge: null }, { start: n, end: r, snapped: !1 };
+    } else {
+      if (c > Be)
+        return { start: n, end: r, snapped: !1 };
+      Z.current = { actionId: e, edge: o };
+    }
+    if (o === "start") {
+      const w = Math.max(0, i), P = Math.max(w + 0.01, r);
+      return { start: w, end: P, snapped: !0 };
+    }
+    const b = Math.max(0, i), N = Math.min(n, b - 0.01);
+    return { start: Math.max(0, N), end: b, snapped: !0 };
+  }, yt = (e, n, r) => {
+    const s = e.defaultDuration ?? 10;
+    let i = Math.max(0, n), o = i + s;
+    const c = A.current;
+    c?.isPlaying && c.pause(), m((f) => {
+      Fe(f);
+      const p = structuredClone(f);
+      for (; p.length < 4; ) p.push({ id: `${p.length}`, actions: [] });
+      const h = Number.isFinite(Number(r)) ? Number(r) : null, b = pe(h, M) ?? M[0], N = pe(h, H) ?? H[0], w = (P) => {
+        const _ = [];
+        for (const I of P) {
+          const $ = Array.isArray(p[I]?.actions) ? p[I].actions : [];
+          for (const Q of $) {
+            const ve = Number(Q?.start), xe = Number(Q?.end);
+            !Number.isFinite(ve) || !Number.isFinite(xe) || _.push({ start: ve, end: xe });
+          }
+        }
+        _.sort((I, $) => I.start - $.start);
+        for (const I of _)
+          Ve(i, o, I.start, I.end) && (i = I.end, o = i + s);
+      };
+      if (e.kind === "video") {
+        const P = b, _ = Pe(P);
+        w([P, _]);
+        const I = `link-${ge()}`, $ = `video-${ge()}`, Q = `video-audio-${ge()}`;
+        p[P].actions = [
+          ...p[P].actions ?? [],
+          {
+            id: $,
+            start: i,
+            end: o,
+            effectId: "effect1",
+            data: { src: e.src, previewSrc: e.previewSrc, name: e.name, linkId: I }
+          }
+        ], p[_].actions = [
+          ...p[_].actions ?? [],
+          {
+            id: Q,
+            start: i,
+            end: o,
+            effectId: "effect2",
+            data: { src: e.src, name: e.name, linkId: I }
+          }
+        ];
+      } else {
+        const P = N;
+        w([P]), p[P].actions = [
+          ...p[P].actions ?? [],
+          {
+            id: `audio-${ge()}`,
+            start: i,
+            end: o,
+            effectId: "effect0",
+            data: { src: e.src, name: e.name }
+          }
+        ];
+      }
+      return p;
+    });
+  }, St = () => {
+    const e = z.current;
+    return e ? e.querySelector(".timeline-editor-edit-area .ReactVirtualized__Grid")?.scrollLeft ?? 0 : 0;
+  }, wt = () => me, He = (e) => {
+    const n = z.current;
+    if (!n) return 0;
+    const s = (n.querySelector(".timeline-editor-edit-area") ?? n).getBoundingClientRect(), c = (e - s.x + St() - vt) * rt / nt;
+    return Math.max(0, c);
+  }, Rt = (e) => {
+    const n = Number(e);
+    return Number.isFinite(n) ? vt + n * nt / rt : 0;
+  }, xt = (e, n, r, s) => {
+    const i = e.defaultDuration ?? 10;
+    let o = Math.max(0, n), c = o + i;
+    const f = [];
+    if (e.kind === "video") {
+      const h = r, b = Pe(h);
+      f.push(h, b);
+    } else
+      f.push(r);
+    const p = [];
+    for (const h of f) {
+      const b = Array.isArray(s[h]?.actions) ? s[h].actions : [];
+      for (const N of b) {
+        const w = Number(N?.start), P = Number(N?.end);
+        !Number.isFinite(w) || !Number.isFinite(P) || p.push({ start: w, end: P });
+      }
+    }
+    p.sort((h, b) => h.start - b.start);
+    for (const h of p)
+      Ve(o, c, h.start, h.end) && (o = h.end, c = o + i);
+    return Math.max(0, o);
+  }, _e = (e) => {
+    const n = z.current;
+    if (!n) return null;
+    const r = n.querySelector(".timeline-editor-edit-area");
+    if (!r) return null;
+    const s = r.getBoundingClientRect(), i = e - s.y;
+    if (i < 0 || i > s.height) return null;
+    const o = i + wt(), c = Math.floor(o / F);
+    if (!Number.isFinite(c)) return null;
+    const f = Math.max(0, T.current.length - 1);
+    return Math.min(Math.max(0, c), f);
+  }, ct = (e) => {
+    if (!e) return null;
+    if ("clientX" in e && "clientY" in e) {
+      const i = Number(e.clientX), o = Number(e.clientY);
+      if (Number.isFinite(i) && Number.isFinite(o)) return { x: i, y: o };
+    }
+    const n = e.touches, r = e.changedTouches, s = (n && n.length ? n[0] : null) || (r && r.length ? r[0] : null);
+    if (s) {
+      const i = Number(s.clientX), o = Number(s.clientY);
+      if (Number.isFinite(i) && Number.isFinite(o)) return { x: i, y: o };
+    }
+    return null;
+  }, le = () => {
+    if (Ce.current) return;
+    Ce.current = !0;
+    const e = (r) => {
+      const s = W.current;
+      if (!s.actionId || !s.mode || r.isPrimary === !1) return;
+      const i = He(r.clientX);
+      s.basePointerTime == null && (s.basePointerTime = i), s.lastPointerTime = i;
+    }, n = () => {
+      W.current = {
+        actionId: null,
+        mode: null,
+        dir: null,
+        basePointerTime: null,
+        lastPointerTime: null,
+        initialStart: 0,
+        initialEnd: 0,
+        takeover: !1
+      }, Z.current = { actionId: null, edge: null };
+    };
+    window.addEventListener("pointermove", e, { capture: !0 }), window.addEventListener("pointerup", n, { capture: !0 }), window.addEventListener("pointercancel", n, { capture: !0 }), W.current._removePointerListeners = () => {
+      window.removeEventListener("pointermove", e, { capture: !0 }), window.removeEventListener("pointerup", n, { capture: !0 }), window.removeEventListener("pointercancel", n, { capture: !0 }), Ce.current = !1;
+    };
+  }, Ke = () => {
+    const e = W.current?._removePointerListeners;
+    e?.(), delete W.current._removePointerListeners;
+  }, Qe = (e) => e.map((n) => ({
+    ...n,
+    selected: void 0,
+    actions: (n.actions ?? []).map((r) => ({ ...r, selected: void 0 }))
+  })), lt = _t(() => a.map((e, n) => {
+    const r = d ? (e.actions ?? []).some((c) => String(c.id) === d) : !1, s = U != null && be != null && n === be, i = Array.isArray(e.classNames) ? e.classNames : [], o = s ? [...i, "dnd-drop-hover"] : i;
+    return {
+      ...e,
+      classNames: o,
+      selected: r,
+      actions: (e.actions ?? []).map((c) => ({
+        ...c,
+        selected: d ? String(c.id) === d : !1
+      }))
+    };
+  }), [a, d, U, be]), Et = () => {
+    if (!d) return;
+    const e = A.current;
+    e?.isPlaying && e.pause(), m((n) => {
+      Fe(n);
+      let r = null;
+      for (const i of n) {
+        const o = Array.isArray(i?.actions) ? i.actions : [];
+        for (const c of o) {
+          if (String(c?.id) !== d) continue;
+          const f = c?.data?.linkId;
+          f != null && (r = String(f));
+          break;
+        }
+        if (r != null) break;
+      }
+      return n.map((i) => ({
+        ...i,
+        actions: (i.actions ?? []).filter((o) => !(String(o?.id) === d || r && String(o?.data?.linkId ?? "") === r))
+      }));
+    }), g(null);
+  }, ut = () => {
+    if (!d) return;
+    const e = A.current, n = e?.getTime ? e.getTime() : null;
+    if (n == null) return;
+    const r = Number(n);
+    Number.isFinite(r) && (e?.isPlaying && e.pause(), K.current = null, ne.current = null, m((s) => {
+      let i = -1, o = -1, c = null;
+      for (let B = 0; B < s.length; B++) {
+        const Y = s[B], re = Array.isArray(Y?.actions) ? Y.actions : [];
+        for (let ee = 0; ee < re.length; ee++) {
+          const De = re[ee];
+          if (String(De?.id) === d) {
+            i = B, o = ee, c = De;
+            break;
+          }
+        }
+        if (c) break;
+      }
+      if (!c) return s;
+      const f = c?.data?.linkId ? String(c.data.linkId) : null;
+      let p = -1, h = -1, b = null;
+      if (f)
+        for (let B = 0; B < s.length; B++) {
+          const Y = s[B], re = Array.isArray(Y?.actions) ? Y.actions : [];
+          for (let ee = 0; ee < re.length; ee++) {
+            const De = re[ee];
+            if (String(De?.id) !== d && String(De?.data?.linkId ?? "") === f) {
+              p = B, h = ee, b = De;
+              break;
+            }
+          }
+          if (b) break;
+        }
+      const N = Number(c.start), w = Number(c.end);
+      if (!Number.isFinite(N) || !Number.isFinite(w) || !(N < r && r < w)) return s;
+      Fe(s);
+      const P = f && b ? `link-${ge()}` : f, _ = f && b ? `link-${ge()}` : f, I = `${String(c.id)}-r-${ge()}`, $ = Number(c?.data?.offset ?? 0), Q = Number.isFinite($) ? $ : 0, ve = r - N, xe = Q + (Number.isFinite(ve) ? ve : 0), je = {
+        ...c,
+        start: N,
+        end: r,
+        id: c.id,
+        data: { ...c.data, offset: Q, linkId: P ?? void 0 }
+      }, Ee = {
+        ...c,
+        start: r,
+        end: w,
+        id: I,
+        data: { ...c.data, offset: xe, linkId: _ ?? void 0 }
+      }, Te = structuredClone(s), ue = Te[i], Ae = Array.isArray(ue.actions) ? [...ue.actions] : [];
+      if (Ae.splice(o, 1, je, Ee), Ae.sort((B, Y) => Number(B.start) - Number(Y.start)), ue.actions = Ae, b && p >= 0 && h >= 0) {
+        const B = Number(b.start), Y = Number(b.end);
+        if (Number.isFinite(B) && Number.isFinite(Y) && B === N && Y === w) {
+          const re = `${String(b.id)}-r-${ge()}`, ee = {
+            ...b,
+            start: N,
+            end: r,
+            id: b.id,
+            data: { ...b.data, linkId: P ?? void 0 }
+          }, De = {
+            ...b,
+            start: r,
+            end: w,
+            id: re,
+            data: { ...b.data, linkId: _ ?? void 0 }
+          }, Ct = Te[p], Ft = Array.isArray(Ct.actions) ? [...Ct.actions] : [];
+          Ft.splice(h, 1, ee, De), Ft.sort((Ut, Vt) => Number(Ut.start) - Number(Vt.start)), Ct.actions = Ft;
+        }
+      }
+      return Te;
+    }));
+  }, Tt = () => {
+    const e = A.current, n = e?.getTime ? e.getTime() : null;
+    e?.isPlaying && e.pause(), K.current = null, ne.current = null, g(null), R((r) => {
+      if (r.length === 0) return r;
+      const s = r[r.length - 1], i = structuredClone(T.current);
+      return x((o) => [...o, i]), m(structuredClone(s)), r.slice(0, -1);
+    }), n != null && requestAnimationFrame(() => {
+      const r = A.current;
+      r?.setTime && r.setTime(n);
+    });
+  }, dt = () => {
+    const e = A.current, n = e?.getTime ? e.getTime() : null;
+    e?.isPlaying && e.pause(), K.current = null, ne.current = null, g(null), x((r) => {
+      if (r.length === 0) return r;
+      const s = r[r.length - 1], i = structuredClone(T.current);
+      return R((o) => {
+        const c = [...o, i];
+        return c.length > ht && c.splice(0, c.length - ht), c;
+      }), m(structuredClone(s)), r.slice(0, -1);
+    }), n != null && requestAnimationFrame(() => {
+      const r = A.current;
+      r?.setTime && r.setTime(n);
+    });
+  }, ft = Xt(
+    jt(Jt, { activationConstraint: { distance: 6 } }),
+    // On touch, require a short press-hold before starting drag, so scroll is still possible.
+    jt(Kt, { activationConstraint: { delay: 180, tolerance: 6 } })
+  ), { setNodeRef: At, isOver: Nt } = Gt({ id: "timeline-drop" }), mt = (e) => {
+    const n = e.active.data.current?.item;
+    G(n ?? null);
+    const r = ct(e.activatorEvent);
+    if (y.current = r, j.current = r, ye(r), r) {
+      const i = Le(r);
+      te(i);
+      const o = _e(r.y);
+      oe(i ? ce(n ?? null, o) : null);
+    } else
+      oe(null), te(!1);
+    const s = e.active.rect.current.initial;
+    fe(s ? { width: s.width, height: s.height } : null);
+  }, pt = (e) => {
+    const n = e.active.rect.current.initial;
+    !O && n && fe({ width: n.width, height: n.height });
+    const r = j.current;
+    if (!r) {
+      oe(null);
+      return;
+    }
+    const s = Number(e?.delta?.x ?? 0), i = Number(e?.delta?.y ?? 0), o = { x: r.x + (Number.isFinite(s) ? s : 0), y: r.y + (Number.isFinite(i) ? i : 0) };
+    y.current = o, ye(o);
+    const c = Le(o);
+    te(c);
+    const f = _e(o.y);
+    oe(c ? ce(U, f) : null);
+  }, kt = (e) => {
+    const n = e.active.data.current?.item, r = j.current, s = Number(e?.delta?.x ?? 0), i = Number(e?.delta?.y ?? 0), o = r ? { x: r.x + (Number.isFinite(s) ? s : 0), y: r.y + (Number.isFinite(i) ? i : 0) } : y.current;
+    y.current = o;
+    const f = String(e.over?.id ?? "") === "timeline-drop" || Le(o);
+    if (n && f && o) {
+      const p = He(o.x), h = _e(o.y), b = ce(n, h);
+      oe(b), yt(n, Math.max(0, p), b);
+    }
+    G(null), fe(null), oe(null), te(!1), ye(null), j.current = null;
+  }, Pt = () => {
+    G(null), fe(null), oe(null), te(!1), ye(null), j.current = null;
+  }, Re = _t(() => {
+    if (!U || !ae) return null;
+    const e = Me;
+    if (!e) return null;
+    const n = _e(e.y), r = ce(U, n);
+    if (r == null) return null;
+    const s = He(e.x), i = xt(U, s, r, T.current), o = U.defaultDuration ?? 10;
+    return {
+      laneRow: r,
+      desiredStart: s,
+      start: i,
+      end: i + o,
+      duration: o,
+      kind: U.kind
+    };
+  }, [U, ae, Me, Ne, me, F]), It = (e) => {
+    if (!k || e.pointerType === "mouse" || U) return;
+    if (!!e.target?.closest?.(".timeline-editor-cursor-area, .timeline-editor-cursor")) {
+      C.current = { pointerId: e.pointerId }, D.current = null;
+      try {
+        e.currentTarget.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      e.preventDefault();
+      return;
+    }
+    D.current = { x: e.clientX, y: e.clientY };
+  }, t = (e) => {
+    if (!k || e.pointerType === "mouse" || U || !C.current || C.current.pointerId !== e.pointerId) return;
+    const n = He(e.clientX);
+    A.current && A.current.setTime(n), e.preventDefault();
+  }, l = (e) => {
+    if (!k || e.pointerType === "mouse" || U) return;
+    if (C.current && C.current.pointerId === e.pointerId) {
+      C.current = null;
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      e.preventDefault();
+      return;
+    }
+    const n = D.current;
+    D.current = null;
+    const r = n ? Math.abs(e.clientX - n.x) : 0, s = n ? Math.abs(e.clientY - n.y) : 0;
+    if (r > 10 || s > 10) return;
+    const o = e.target?.closest?.("[data-action-id]"), c = o?.getAttribute("data-row-id"), f = o?.getAttribute("data-action-id");
+    if (c && f) {
+      g(f);
+      return;
+    }
+    const p = He(e.clientX);
+    g(null), A.current && A.current.setTime(p);
+  };
+  return /* @__PURE__ */ v.jsx(
+    Zt,
+    {
+      sensors: ft,
+      collisionDetection: Qt,
+      onDragStart: mt,
+      onDragMove: pt,
+      onDragEnd: kt,
+      onDragCancel: Pt,
+      children: /* @__PURE__ */ v.jsxs("div", { className: "timeline-editor-engine", children: [
+        /* @__PURE__ */ v.jsx("div", { className: "player-config", children: /* @__PURE__ */ v.jsx("div", { className: "footage-bin", children: X.map((e) => /* @__PURE__ */ v.jsx(
+          wn,
+          {
+            item: e,
+            hint: k ? "Press-hold, then drag into timeline" : "Drag into timeline"
+          },
+          e.id
+        )) }) }),
+        /* @__PURE__ */ v.jsx("div", { className: "player-panel", ref: q, children: /* @__PURE__ */ v.jsx(
+          "video",
+          {
+            className: "player-video",
+            preload: "auto",
+            playsInline: !0,
+            muted: !0,
+            controls: !1,
+            disablePictureInPicture: !0,
+            disableRemotePlayback: !0,
+            controlsList: "nodownload noplaybackrate noremoteplayback",
+            tabIndex: -1,
+            onContextMenu: (e) => e.preventDefault(),
+            ref: (e) => L.attach(e)
+          }
+        ) }),
+        /* @__PURE__ */ v.jsx(
+          bn,
+          {
+            timelineState: A,
+            autoScrollWhenPlay: de,
+            editorData: a,
+            selectedActionId: d,
+            onDeleteSelectedClip: Et,
+            onSplitSelectedClip: ut,
+            canUndo: S.length > 0,
+            canRedo: E.length > 0,
+            onUndo: Tt,
+            onRedo: dt
+          }
+        ),
+        /* @__PURE__ */ v.jsxs(
+          "div",
+          {
+            className: `timeline-drop${Nt ? " is-over" : ""}`,
+            ref: (e) => {
+              z.current = e, At(e);
+            },
+            onPointerDown: It,
+            onPointerMove: t,
+            onPointerUp: l,
+            children: [
+              /* @__PURE__ */ v.jsx(
+                "div",
+                {
+                  className: "timeline-lane-labels",
+                  style: {
+                    top: Ye,
+                    transform: `translateY(${-me}px)`,
+                    height: F * Se.length
+                  },
+                  children: Se.map((e, n) => /* @__PURE__ */ v.jsx(
+                    "div",
+                    {
+                      className: `timeline-lane-label${be === n ? " is-hover" : ""}`,
+                      style: { height: F },
+                      children: e
+                    },
+                    e
+                  ))
+                }
+              ),
+              Re ? /* @__PURE__ */ v.jsx("div", { className: "timeline-ghost-layer", style: { top: Ye, left: Oe }, children: (() => {
+                const e = nt / rt, n = Re.duration * e, r = Rt(Re.start) - Ne, s = [];
+                return Re.kind === "video" ? (s.push({ row: Re.laneRow, kind: "video" }), s.push({ row: Pe(Re.laneRow), kind: "audio" })) : s.push({ row: Re.laneRow, kind: "audio" }), s.map((i) => /* @__PURE__ */ v.jsx(
+                  "div",
+                  {
+                    className: `timeline-ghost-clip${i.kind === "video" ? " is-video" : " is-audio"}`,
+                    style: {
+                      left: r,
+                      top: i.row * F - me,
+                      width: n,
+                      height: F
+                    }
+                  },
+                  `${i.kind}-${i.row}`
+                ));
+              })() }) : null,
+              /* @__PURE__ */ v.jsx(
+                Ht,
+                {
+                  scale: rt,
+                  scaleWidth: nt,
+                  startLeft: vt,
+                  rowHeight: F,
+                  autoScroll: !0,
+                  ref: A,
+                  editorData: lt,
+                  effects: pn,
+                  onScroll: (e) => {
+                    const n = Number(e?.scrollTop ?? 0), r = Number(e?.scrollLeft ?? 0);
+                    Number.isFinite(n) && ot(n), Number.isFinite(r) && ke(r);
+                  },
+                  onClickTimeArea: (e, n) => {
+                    g(null);
+                  },
+                  onClickRow: (e) => {
+                    e.target?.closest?.(".timeline-editor-action") || g(null);
+                  },
+                  onClickActionOnly: (e, { action: n }) => {
+                    const r = n;
+                    r?.id && g(String(r.id));
+                  },
+                  onActionMoveStart: ({ action: e }) => {
+                    $e.current = String(e?.id ?? ""), Z.current = { actionId: String(e?.id ?? ""), edge: null };
+                    const n = Number(e?.start), r = Number(e?.end);
+                    W.current = {
+                      actionId: String(e?.id ?? ""),
+                      mode: "move",
+                      dir: null,
+                      basePointerTime: null,
+                      lastPointerTime: null,
+                      initialStart: Number.isFinite(n) ? n : 0,
+                      initialEnd: Number.isFinite(r) ? r : 0,
+                      takeover: !1
+                    }, le(), !K.current && (K.current = structuredClone(a), ne.current = Ue(a));
+                  },
+                  onActionMoveEnd: () => {
+                    const e = K.current, n = ne.current;
+                    e && n && Ue(T.current) !== n && Fe(e), K.current = null, ne.current = null, $e.current = null, Z.current = { actionId: null, edge: null }, W.current = {
+                      actionId: null,
+                      mode: null,
+                      dir: null,
+                      basePointerTime: null,
+                      lastPointerTime: null,
+                      initialStart: 0,
+                      initialEnd: 0,
+                      takeover: !1
+                    }, Ke();
+                  },
+                  onActionResizeStart: ({ action: e }) => {
+                    $e.current = String(e?.id ?? ""), Z.current = { actionId: String(e?.id ?? ""), edge: null };
+                    const n = Number(e?.start), r = Number(e?.end);
+                    W.current = {
+                      actionId: String(e?.id ?? ""),
+                      mode: "resize",
+                      dir: null,
+                      basePointerTime: null,
+                      lastPointerTime: null,
+                      initialStart: Number.isFinite(n) ? n : 0,
+                      initialEnd: Number.isFinite(r) ? r : 0,
+                      takeover: !1
+                    }, le(), !K.current && (K.current = structuredClone(a), ne.current = Ue(a));
+                  },
+                  onActionResizeEnd: () => {
+                    const e = K.current, n = ne.current;
+                    e && n && Ue(T.current) !== n && Fe(e), K.current = null, ne.current = null, $e.current = null, Z.current = { actionId: null, edge: null }, W.current = {
+                      actionId: null,
+                      mode: null,
+                      dir: null,
+                      basePointerTime: null,
+                      lastPointerTime: null,
+                      initialStart: 0,
+                      initialEnd: 0,
+                      takeover: !1
+                    }, Ke();
+                  },
+                  onActionMoving: ({ action: e, row: n, start: r, end: s }) => {
+                    const i = String(e?.id ?? ""), o = W.current;
+                    if (o.takeover && o.mode === "move" && o.actionId === i) {
+                      const _ = o.basePointerTime, I = o.lastPointerTime, $ = _ != null && I != null ? I - _ : 0, Q = o.initialStart + $, ve = o.initialEnd + $, xe = Ze(i, Q, ve), je = xe.start, Ee = xe.end;
+                      if (he(n, String(e.id), je, Ee)) return !1;
+                      const ue = T.current, Ae = we(ue, String(e.id));
+                      if (Ae) {
+                        const B = ue[Ae.rowIndex];
+                        if (B && he(B, String(Ae.action.id), je, Ee)) return !1;
+                      }
+                      return m((B) => {
+                        const Y = Ae ? We(B, String(e.id), je, Ee) : Je(B, String(e.id), je, Ee);
+                        return T.current = Y, Y;
+                      }), !1;
+                    }
+                    const c = Number(r), f = Number(s);
+                    if (!Number.isFinite(c) || !Number.isFinite(f) || f <= c) return !1;
+                    const p = Ze(i, c, f), h = p.start, b = p.end;
+                    if (!Number.isFinite(h) || !Number.isFinite(b) || b <= h || he(n, String(e.id), h, b)) return !1;
+                    const w = T.current, P = we(w, String(e.id));
+                    if (P) {
+                      const _ = w[P.rowIndex];
+                      if (_ && he(_, String(P.action.id), h, b)) return !1;
+                    }
+                    if ((P || p.snapped) && m((_) => {
+                      const I = P ? We(_, String(e.id), h, b) : Je(_, String(e.id), h, b);
+                      return T.current = I, I;
+                    }), p.snapped) {
+                      const _ = W.current.lastPointerTime;
+                      return W.current = {
+                        actionId: i,
+                        mode: "move",
+                        dir: null,
+                        basePointerTime: _,
+                        lastPointerTime: W.current.lastPointerTime,
+                        initialStart: c,
+                        initialEnd: f,
+                        takeover: !0
+                      }, le(), !1;
+                    }
+                  },
+                  onActionResizing: ({ action: e, row: n, start: r, end: s, dir: i }) => {
+                    const o = String(e?.id ?? ""), c = W.current, f = i ?? "right";
+                    if (c.takeover && c.mode === "resize" && c.actionId === o) {
+                      const $ = c.basePointerTime, Q = c.lastPointerTime, ve = $ != null && Q != null ? Q - $ : 0, xe = f === "left" ? c.initialStart + ve : c.initialStart, je = f === "right" ? c.initialEnd + ve : c.initialEnd, Ee = at(o, xe, je, f), Te = Ee.start, ue = Ee.end;
+                      if (he(n, String(e.id), Te, ue)) return !1;
+                      const B = T.current, Y = we(B, String(e.id));
+                      if (Y) {
+                        const re = B[Y.rowIndex];
+                        if (re && he(re, String(Y.action.id), Te, ue)) return !1;
+                      }
+                      return m((re) => {
+                        const ee = Y ? We(re, String(e.id), Te, ue) : Je(re, String(e.id), Te, ue);
+                        return T.current = ee, ee;
+                      }), !1;
+                    }
+                    const p = Number(r), h = Number(s);
+                    if (!Number.isFinite(p) || !Number.isFinite(h) || h <= p) return !1;
+                    const b = at(o, p, h, f), N = b.start, w = b.end;
+                    if (!Number.isFinite(N) || !Number.isFinite(w) || w <= N || he(n, String(e.id), N, w)) return !1;
+                    const _ = T.current, I = we(_, String(e.id));
+                    if (I) {
+                      const $ = _[I.rowIndex];
+                      if ($ && he($, String(I.action.id), N, w)) return !1;
+                    }
+                    if ((I || b.snapped) && m(($) => {
+                      const Q = I ? We($, String(e.id), N, w) : Je($, String(e.id), N, w);
+                      return T.current = Q, Q;
+                    }), b.snapped) {
+                      const $ = W.current.lastPointerTime;
+                      return W.current = {
+                        actionId: o,
+                        mode: "resize",
+                        dir: f,
+                        basePointerTime: $,
+                        lastPointerTime: W.current.lastPointerTime,
+                        initialStart: p,
+                        initialEnd: h,
+                        takeover: !0
+                      }, le(), !1;
+                    }
+                  },
+                  onChange: (e) => {
+                    const n = Qe(e), r = $e.current, s = r ? st(n, r) : n;
+                    m(s);
+                    const i = K.current, o = ne.current;
+                    i && o && (Ue(s) !== o && Fe(i), K.current = null, ne.current = null);
+                  },
+                  getActionRender: (e, n) => {
+                    if (e.effectId === "effect0")
+                      return /* @__PURE__ */ v.jsx(sn, { action: e, row: n });
+                    if (e.effectId === "effect2")
+                      return /* @__PURE__ */ v.jsx(cn, { action: e, row: n });
+                    if (e.effectId === "effect1")
+                      return /* @__PURE__ */ v.jsx(an, { action: e, row: n });
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ v.jsx(en, { children: U ? /* @__PURE__ */ v.jsx(
+          "div",
+          {
+            className: "footage-overlay",
+            style: O ? {
+              width: O.width,
+              height: O.height
+            } : void 0,
+            children: /* @__PURE__ */ v.jsx(Bt, { item: U, hint: "Drop on timeline", isDragging: !0 })
+          }
+        ) : null })
+      ] })
+    }
+  );
+};
+export {
+  Pn as MeliesVideoEditor
+};