@waveform-playlist/browser 9.4.0 → 9.4.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as rh from "tone";
-import { now as Ba, Context as oh, setContext as ah, Volume as Ko, getDestination as qo, getTransport as Lt, start as sh, getContext as Pt, Panner as Ts, Gain as $s, PolySynth as oo, Synth as ih, MembraneSynth as ao, NoiseSynth as lh, MetalSynth as bl, Part as _c, Analyser as Sc, StereoWidener as ch, Gate as uh, Limiter as dh, Compressor as fh, Chebyshev as hh, BitCrusher as ph, Distortion as mh, EQ3 as gh, AutoWah as vh, AutoFilter as yh, AutoPanner as bh, Vibrato as wh, Tremolo as _h, Phaser as Sh, Chorus as kh, PingPongDelay as Ch, FeedbackDelay as xh, JCReverb as Eh, Freeverb as Ih, Reverb as Ah } from "tone";
-import { jsx as k, jsxs as ye, Fragment as Vt } from "react/jsx-runtime";
+import { now as Ba, Context as oh, setContext as ah, Volume as Ko, getDestination as qo, getTransport as Ht, start as sh, getContext as Pt, Panner as Ts, Gain as $s, PolySynth as oo, Synth as ih, MembraneSynth as ao, NoiseSynth as lh, MetalSynth as bl, Part as _c, Analyser as Sc, StereoWidener as ch, Gate as uh, Limiter as dh, Compressor as fh, Chebyshev as hh, BitCrusher as ph, Distortion as mh, EQ3 as gh, AutoWah as vh, AutoFilter as yh, AutoPanner as bh, Vibrato as wh, Tremolo as _h, Phaser as Sh, Chorus as kh, PingPongDelay as Ch, FeedbackDelay as xh, JCReverb as Eh, Freeverb as Ih, Reverb as Ah } from "tone";
+import { jsx as k, jsxs as ye, Fragment as Wt } from "react/jsx-runtime";
 import * as P from "react";
 import ot, { useEffect as Q, useLayoutEffect as Or, useRef as T, useMemo as xe, useState as z, useCallback as D, useContext as Oe, createContext as We, memo as kc, forwardRef as Cc, startTransition as Ds, useImperativeHandle as xc, useSyncExternalStore as Mh, Fragment as Th, useInsertionEffect as $h } from "react";
 import O, { ThemeContext as Dh, withTheme as Ec, useTheme as Rh, ThemeProvider as Ic } from "styled-components";
@@ -1454,7 +1454,7 @@ var zh = class {
         fadeOut: e.track.fadeOut,
         gain: 1
       }
-    ] : []), r = Lt(), o = Pt().rawContext, a = this.volumeNode.input.input;
+    ] : []), r = Ht(), o = Pt().rawContext, a = this.volumeNode.input.input;
     this.scheduledClips = n.map((s) => {
       const i = o.createGain();
       i.gain.value = s.gain, i.connect(a);
@@ -1632,7 +1632,7 @@ var zh = class {
     this.track.soloed = e;
   }
   dispose() {
-    const e = Lt();
+    const e = Ht();
     if (this.effectsCleanup)
       try {
         this.effectsCleanup();
@@ -2150,7 +2150,7 @@ var Gh = Pc, Uh = class {
   clearCompletionEvent() {
     if (this._completionEventId !== null) {
       try {
-        Lt().clear(this._completionEventId);
+        Ht().clear(this._completionEventId);
       } catch (e) {
         console.warn("[waveform-playlist] Error clearing Transport completion event:", e);
       }
@@ -2198,7 +2198,7 @@ var Gh = Pc, Uh = class {
   play(e, t, n) {
     if (!this.isInitialized)
       throw new Error("[waveform-playlist] TonePlayout not initialized. Call init() first.");
-    const r = e ?? Ba(), o = Lt();
+    const r = e ?? Ba(), o = Ht();
     this.clearCompletionEvent();
     const a = t ?? 0;
     this.tracks.forEach((s) => {
@@ -2223,7 +2223,7 @@ var Gh = Pc, Uh = class {
     }
   }
   pause() {
-    const e = Lt();
+    const e = Ht();
     try {
       e.pause();
     } catch (t) {
@@ -2232,7 +2232,7 @@ var Gh = Pc, Uh = class {
     this.tracks.forEach((t) => t.stopAllSources()), this.tracks.forEach((t) => t.cancelFades()), this.clearCompletionEvent();
   }
   stop() {
-    const e = Lt();
+    const e = Ht();
     try {
       e.stop();
     } catch (t) {
@@ -2246,7 +2246,19 @@ var Gh = Pc, Uh = class {
       }
       this._loopHandler = null;
     }
-    this.tracks.forEach((t) => t.stopAllSources()), this.tracks.forEach((t) => t.cancelFades()), this.clearCompletionEvent();
+    this.tracks.forEach((t) => {
+      try {
+        t.stopAllSources();
+      } catch (n) {
+        console.warn(`[waveform-playlist] Error stopping sources for track "${t.id}":`, n);
+      }
+    }), this.tracks.forEach((t) => {
+      try {
+        t.cancelFades();
+      } catch (n) {
+        console.warn(`[waveform-playlist] Error canceling fades for track "${t.id}":`, n);
+      }
+    }), this.clearCompletionEvent();
   }
   setMasterGain(e) {
     this.masterVolume.volume.value = this.gainToDb(e);
@@ -2277,7 +2289,7 @@ var Gh = Pc, Uh = class {
   }
   setLoop(e, t, n) {
     this._loopEnabled = e, this._loopStart = t, this._loopEnd = n;
-    const r = Lt();
+    const r = Ht();
     try {
       r.loopStart = t, r.loopEnd = n, r.loop = e;
     } catch (o) {
@@ -2299,19 +2311,16 @@ var Gh = Pc, Uh = class {
     }, r.on("loop", this._loopHandler)) : !e && this._loopHandler && (r.off("loop", this._loopHandler), this._loopHandler = null);
   }
   getCurrentTime() {
-    return Lt().seconds;
+    return Ht().seconds;
   }
   seekTo(e) {
-    Lt().seconds = e;
+    Ht().seconds = e;
   }
   dispose() {
-    if (this.clearCompletionEvent(), this._loopHandler) {
-      try {
-        Lt().off("loop", this._loopHandler);
-      } catch (e) {
-        console.warn("[waveform-playlist] Error removing Transport loop handler:", e);
-      }
-      this._loopHandler = null;
+    try {
+      this.stop();
+    } catch (e) {
+      console.warn("[waveform-playlist] Error stopping Transport during dispose:", e);
     }
     if (this.tracks.forEach((e) => {
       try {
@@ -3283,7 +3292,7 @@ var yp = Object.create, Jc = Object.defineProperty, bp = Object.getOwnPropertyDe
   for (var s, i, l, c, u = t & 7, f = !1, p = !1, d = 2, h = eu[u + 5], m = e[d] || (e[d] = []), g = (o = o.prototype, bp(o, n)), v = r.length - 1; v >= 0; v--)
     l = Cp(u, n, i = {}, e[3], m), l.static = f, l.private = p, c = l.access = { has: (y) => n in y }, c.get = (y) => y[n], s = (0, r[v])(g[h], l), i._ = 1, tu(s) && (g[h] = s);
   return g && Jc(o, n, g), o;
-}, ru = (e, t, n) => t.has(e) || ea("Cannot " + n), Ip = (e, t, n) => (ru(e, t, "read from private field"), t.get(e)), Ap = (e, t, n) => t.has(e) ? ea("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), Mp = (e, t, n, r) => (ru(e, t, "write to private field"), t.set(e, n), n), Wt = class qa {
+}, ru = (e, t, n) => t.has(e) || ea("Cannot " + n), Ip = (e, t, n) => (ru(e, t, "read from private field"), t.get(e)), Ap = (e, t, n) => t.has(e) ? ea("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), Mp = (e, t, n, r) => (ru(e, t, "write to private field"), t.set(e, n), n), Bt = class qa {
   /**
    * @param {number} Coordinate of the point on the horizontal axis
    * @param {number} Coordinate of the point on the vertical axis
@@ -3344,7 +3353,7 @@ var yp = Object.create, Jc = Object.defineProperty, bp = Object.getOwnPropertyDe
   }
   get center() {
     const { left: t, top: n, right: r, bottom: o } = this;
-    return new Wt((t + r) / 2, (n + o) / 2);
+    return new Bt((t + r) / 2, (n + o) / 2);
   }
   get area() {
     const { width: t, height: n } = this;
@@ -3395,7 +3404,7 @@ var yp = Object.create, Jc = Object.defineProperty, bp = Object.getOwnPropertyDe
       const i = r[s], l = s === "x" ? a.left : a.top, c = s === "x" ? a.width : a.height;
       return i == "start" ? l : i == "end" ? l + c : l + c / 2;
     };
-    return Wt.delta(
+    return Bt.delta(
       { x: o(t, "x"), y: o(t, "y") },
       { x: o(n, "x"), y: o(n, "y") }
     );
@@ -3410,11 +3419,11 @@ function Tp(e, t) {
 }
 var ou, au, Ja, vo, Vr, ta = class extends (Ja = sn, au = [Fe], ou = [Fe], Ja) {
   constructor(t) {
-    const n = Wt.from(t);
-    super(n, (r, o) => Wt.equals(r, o)), Ep(Vr, 5, this), Ap(this, vo, 0), this.velocity = { x: 0, y: 0 };
+    const n = Bt.from(t);
+    super(n, (r, o) => Bt.equals(r, o)), Ep(Vr, 5, this), Ap(this, vo, 0), this.velocity = { x: 0, y: 0 };
   }
   get delta() {
-    return Wt.delta(this.current, this.initial);
+    return Bt.delta(this.current, this.initial);
   }
   get direction() {
     const { current: t, previous: n } = this;
@@ -3429,7 +3438,7 @@ var ou, au, Ja, vo, Vr, ta = class extends (Ja = sn, au = [Fe], ou = [Fe], Ja) {
     return super.current;
   }
   set current(t) {
-    const { current: n } = this, r = Wt.from(t), o = {
+    const { current: n } = this, r = Bt.from(t), o = {
       x: r.x - n.x,
       y: r.y - n.y
     }, a = Date.now(), s = a - Ip(this, vo), i = (l) => Math.round(l / s * 100);
@@ -3441,7 +3450,7 @@ var ou, au, Ja, vo, Vr, ta = class extends (Ja = sn, au = [Fe], ou = [Fe], Ja) {
     });
   }
   reset(t = this.defaultValue) {
-    super.reset(Wt.from(t)), this.velocity = { x: 0, y: 0 };
+    super.reset(Bt.from(t)), this.velocity = { x: 0, y: 0 };
   }
 };
 Vr = kp(Ja);
@@ -4208,7 +4217,7 @@ var Ll = class {
     }
     this.map.value = /* @__PURE__ */ new Map();
   }
-}, Au, Mu, Tu, $u, Du, Ru, ts, ut, qs, Js, Qs, Nt = class extends (ts = ln, Ru = [be], Du = [be], $u = [be], Tu = [Fe], Mu = [Fe], Au = [Fe], ts) {
+}, Au, Mu, Tu, $u, Du, Ru, ts, ut, qs, Js, Qs, Vt = class extends (ts = ln, Ru = [be], Du = [be], $u = [be], Tu = [Fe], Mu = [Fe], Au = [Fe], ts) {
   constructor(t, n) {
     var r = t, { modifiers: o, type: a, sensors: s } = r, i = hu(r, ["modifiers", "type", "sensors"]);
     super(i, n), se(ut, 5, this), ke(this, qs, se(ut, 8, this)), se(ut, 11, this), ke(this, Js, se(ut, 12, this)), se(ut, 15, this), ke(this, Qs, se(ut, 16, this, this.isDragSource ? "dragging" : "idle")), se(ut, 19, this), this.type = a, this.sensors = s, this.modifiers = o, this.alignment = i.alignment;
@@ -4228,14 +4237,14 @@ ut = tr(ts);
 qs = /* @__PURE__ */ new WeakMap();
 Js = /* @__PURE__ */ new WeakMap();
 Qs = /* @__PURE__ */ new WeakMap();
-me(ut, 4, "type", Ru, Nt, qs);
-me(ut, 4, "modifiers", Du, Nt, Js);
-me(ut, 4, "status", $u, Nt, Qs);
-me(ut, 2, "isDropping", Tu, Nt);
-me(ut, 2, "isDragging", Mu, Nt);
-me(ut, 2, "isDragSource", Au, Nt);
-xn(ut, Nt);
-var Pu, Fu, Ou, Lu, Bu, Wu, ns, Ue, ei, ti, ni, ri, oi, zt = class extends (ns = ln, Wu = [be], Bu = [be], Lu = [be], Ou = [be], Fu = [be], Pu = [Fe], ns) {
+me(ut, 4, "type", Ru, Vt, qs);
+me(ut, 4, "modifiers", Du, Vt, Js);
+me(ut, 4, "status", $u, Vt, Qs);
+me(ut, 2, "isDropping", Tu, Vt);
+me(ut, 2, "isDragging", Mu, Vt);
+me(ut, 2, "isDragSource", Au, Vt);
+xn(ut, Vt);
+var Pu, Fu, Ou, Lu, Bu, Wu, ns, Ue, ei, ti, ni, ri, oi, Nt = class extends (ns = ln, Wu = [be], Bu = [be], Lu = [be], Ou = [be], Fu = [be], Pu = [Fe], ns) {
   constructor(t, n) {
     var r = t, { accept: o, collisionDetector: a, collisionPriority: s, type: i } = r, l = hu(r, ["accept", "collisionDetector", "collisionPriority", "type"]);
     super(l, n), se(Ue, 5, this), ke(this, ei, se(Ue, 8, this)), se(Ue, 11, this), ke(this, ti, se(Ue, 12, this)), se(Ue, 15, this), ke(this, ni, se(Ue, 16, this)), se(Ue, 19, this), ke(this, ri, se(Ue, 20, this)), se(Ue, 23, this), ke(this, oi, se(Ue, 24, this)), se(Ue, 27, this), this.accept = o, this.collisionDetector = a, this.collisionPriority = s, this.type = i;
@@ -4261,13 +4270,13 @@ ti = /* @__PURE__ */ new WeakMap();
 ni = /* @__PURE__ */ new WeakMap();
 ri = /* @__PURE__ */ new WeakMap();
 oi = /* @__PURE__ */ new WeakMap();
-me(Ue, 4, "accept", Wu, zt, ei);
-me(Ue, 4, "type", Bu, zt, ti);
-me(Ue, 4, "collisionDetector", Lu, zt, ni);
-me(Ue, 4, "collisionPriority", Ou, zt, ri);
-me(Ue, 4, "shape", Fu, zt, oi);
-me(Ue, 2, "isDropTarget", Pu, zt);
-xn(Ue, zt);
+me(Ue, 4, "accept", Wu, Nt, ei);
+me(Ue, 4, "type", Bu, Nt, ti);
+me(Ue, 4, "collisionDetector", Lu, Nt, ni);
+me(Ue, 4, "collisionPriority", Ou, Nt, ri);
+me(Ue, 4, "shape", Fu, Nt, oi);
+me(Ue, 2, "isDropTarget", Pu, Nt);
+xn(Ue, Nt);
 var Hn = class extends mt {
   /**
    * Creates a new sensor instance.
@@ -4348,9 +4357,9 @@ var Gn = class extends mt {
     this.draggables = new Ll(), this.droppables = new Ll(), this.plugins = new Aa(e), this.sensors = new Aa(e), this.modifiers = new Aa(e);
   }
   register(e, t) {
-    if (e instanceof Nt)
+    if (e instanceof Vt)
       return this.draggables.register(e.id, e);
-    if (e instanceof zt)
+    if (e instanceof Nt)
       return this.droppables.register(e.id, e);
     if (e.prototype instanceof Gn)
       return this.modifiers.register(e, t);
@@ -4362,7 +4371,7 @@ var Gn = class extends mt {
   }
   unregister(e) {
     if (e instanceof ln)
-      return e instanceof Nt ? this.draggables.unregister(e.id, e) : e instanceof zt ? this.droppables.unregister(e.id, e) : () => {
+      return e instanceof Vt ? this.draggables.unregister(e.id, e) : e instanceof Nt ? this.droppables.unregister(e.id, e) : () => {
       };
     if (e.prototype instanceof Gn)
       return this.modifiers.unregister(e);
@@ -5448,7 +5457,7 @@ var Bm = ({
   if (!t.shape)
     return null;
   if (t.shape.containsPoint(n)) {
-    const o = Wt.distance(t.shape.center, n);
+    const o = Bt.distance(t.shape.center, n);
     return {
       id: r,
       value: 1 / o,
@@ -5466,7 +5475,7 @@ var Bm = ({
     return null;
   const r = n.current.intersectionArea(t.shape);
   if (r) {
-    const { position: o } = e, a = Wt.distance(t.shape.center, o.current), i = r / (n.current.area + t.shape.area - r) / a;
+    const { position: o } = e, a = Bt.distance(t.shape.center, o.current), i = r / (n.current.area + t.shape.area - r) / a;
     return {
       id: t.id,
       value: i,
@@ -5767,14 +5776,14 @@ Ct(Yt, 2, "sourceRoot", vd, Mn);
 Ct(Yt, 2, "targetRoot", gd, Mn);
 Ct(Yt, 2, "roots", md, Mn);
 An(Yt, Mn);
-var Zr = "data-dnd-", us = `${Zr}dropping`, rt = "--dnd-", Bt = `${Zr}dragging`, No = `${Zr}placeholder`, og = [
-  Bt,
+var Zr = "data-dnd-", us = `${Zr}dropping`, rt = "--dnd-", Lt = `${Zr}dragging`, No = `${Zr}placeholder`, og = [
+  Lt,
   No,
   "popover",
   "aria-pressed",
   "aria-grabbing"
 ], ag = ["view-transition-name"], sg = `
-  :is(:root,:host) [${Bt}] {
+  :is(:root,:host) [${Lt}] {
     position: fixed !important;
     pointer-events: none !important;
     touch-action: none;
@@ -5799,21 +5808,21 @@ var Zr = "data-dnd-", us = `${Zr}dropping`, rt = "--dnd-", Bt = `${Zr}dragging`,
     visibility: hidden;
   }
 
-  [${Bt}] * {
+  [${Lt}] * {
     pointer-events: none !important;
   }
 
-  [${Bt}]:not([${us}]) {
+  [${Lt}]:not([${us}]) {
     translate: var(${rt}translate) !important;
   }
 
-  [${Bt}][style*='${rt}scale'] {
+  [${Lt}][style*='${rt}scale'] {
     scale: var(${rt}scale) !important;
     transform-origin: var(${rt}transform-origin) !important;
   }
 
   @layer dnd-kit {
-    :where([${Bt}][popover]) {
+    :where([${Lt}][popover]) {
       overflow: visible;
       background: unset;
       border: unset;
@@ -5827,7 +5836,7 @@ var Zr = "data-dnd-", us = `${Zr}dropping`, rt = "--dnd-", Bt = `${Zr}dragging`,
       }
     }
   }
-  [${Bt}]::backdrop, [${Zr}overlay]:not([${Bt}]) {
+  [${Lt}]::backdrop, [${Zr}overlay]:not([${Lt}]) {
     display: none;
     visibility: hidden;
   }
@@ -6123,7 +6132,7 @@ Ed = function() {
     left: S + Me.x,
     top: _ + Me.y
   };
-  d.setAttribute(Bt, "true");
+  d.setAttribute(Lt, "true");
   const Ee = Ce(() => s.transform), B = (t = p.translate) != null ? t : { x: 0, y: 0 }, Y = Ee.x * h.scaleX + B.x, at = Ee.y * h.scaleY + B.y, Pe = ed();
   C.set(
     {
@@ -6183,7 +6192,7 @@ Ed = function() {
     if (de?.disconnect(), qe?.disconnect(), st.disconnect(), ze.removeEventListener("resize", Ye), as(d) && (d.removeEventListener(
       "beforetoggle",
       Ul
-    ), d.removeAttribute("popover")), d.removeAttribute(Bt), C.reset(), Xe && ds(u)) {
+    ), d.removeAttribute("popover")), d.removeAttribute(Lt), C.reset(), Xe && ds(u)) {
       const je = Array.from(u.cells);
       for (const [N, H] of je.entries())
         H.style.width = (le = Xe[N]) != null ? le : "";
@@ -6211,7 +6220,7 @@ Ed = function() {
           },
           rt
         ), de?.takeRecords(), ve && ve !== Ge && te && !ae.length) {
-          const ee = Wt.delta(H, te);
+          const ee = Bt.delta(H, te);
           s.shape = Wr.from(
             ve.boundingRectangle
           ).translate(
@@ -6900,7 +6909,7 @@ var zn = {
       modifiers: r
     }));
   }
-}, Rd, Pd, Fd, ys, Rt, Ai, Mi, Ti, Hr = class extends (ys = Nt, Fd = [be], Pd = [be], Rd = [be], ys) {
+}, Rd, Pd, Fd, ys, Rt, Ai, Mi, Ti, Hr = class extends (ys = Vt, Fd = [be], Pd = [be], Rd = [be], ys) {
   constructor(e, t) {
     var n = e, {
       element: r,
@@ -6945,7 +6954,7 @@ Ct(Rt, 4, "handle", Fd, Hr, Ai);
 Ct(Rt, 4, "element", Pd, Hr, Mi);
 Ct(Rt, 4, "feedback", Rd, Hr, Ti);
 An(Rt, Hr);
-var Od, Ld, bs, nn, $i, $a, Bd, Wd, Er, Di, Vd = class extends (bs = zt, Ld = [be], Od = [be], bs) {
+var Od, Ld, bs, nn, $i, $a, Bd, Wd, Er, Di, Vd = class extends (bs = Nt, Ld = [be], Od = [be], bs) {
   constructor(e, t) {
     var n = e, { element: r, effects: o = () => [] } = n, a = hd(n, ["element", "effects"]);
     const { collisionDetector: s = Vm } = a, i = (c) => {
@@ -8326,7 +8335,7 @@ var rc = ({
             }
           )
         ] }) }),
-        c && !u && !f && /* @__PURE__ */ ye(Vt, { children: [
+        c && !u && !f && /* @__PURE__ */ ye(Wt, { children: [
           /* @__PURE__ */ k(
             nc,
             {
@@ -8778,7 +8787,7 @@ var oc = O.div.attrs((e) => ({
     },
     [e, t, i, l, s]
   );
-  return h <= 0 ? null : /* @__PURE__ */ ye(Vt, { children: [
+  return h <= 0 ? null : /* @__PURE__ */ ye(Wt, { children: [
     /* @__PURE__ */ k(
       Q0,
       {
@@ -8927,7 +8936,7 @@ var ac = ({
   return Q(() => {
     const p = Zn(n, r);
     l(p);
-  }, [n, r, e]), /* @__PURE__ */ ye(Vt, { children: [
+  }, [n, r, e]), /* @__PURE__ */ ye(Wt, { children: [
     /* @__PURE__ */ k(h0, { as: "label", htmlFor: e, children: t }),
     /* @__PURE__ */ k(
       ef,
@@ -9276,7 +9285,7 @@ var pv = hv(), sc = ({
     );
   if (n === "both" && R) {
     const A = Math.floor(v / 2);
-    return /* @__PURE__ */ ye(Vt, { children: [
+    return /* @__PURE__ */ ye(Wt, { children: [
       /* @__PURE__ */ k(
         sc,
         {
@@ -12936,7 +12945,7 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
     masterVolumeRef: He,
     onEngineState: Dt
   } = ee, {
-    selectionStart: Zt,
+    selectionStart: zt,
     selectionEnd: cn,
     setSelection: un,
     selectionStartRef: Ot,
@@ -12963,7 +12972,7 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
     [S]
   ), { cache: nl } = Ry(e, jf), rl = D((V) => {
     Et.current = V, he(V);
-  }, []), Ht = D((V) => {
+  }, []), Zt = D((V) => {
     J.current = V, M(V);
   }, []), ol = D(() => {
     const V = Ot.current ?? 0, G = dn.current ?? 0;
@@ -13172,7 +13181,7 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
           (Ie) => G >= Ie.start && G < Ie.end
         );
         if (Et.current)
-          W && W.id !== J.current ? Ht(W.id) : !W && J.current !== null && Ht(null);
+          W && W.id !== J.current ? Zt(W.id) : !W && J.current !== null && Zt(null);
         else if (J.current) {
           const Ie = we.find(
             ($e) => $e.id === J.current
@@ -13182,7 +13191,7 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
             return;
           }
         } else
-          W && Ht(W.id);
+          W && Zt(W.id);
       }
       if (bt.current && et.current && F > 0) {
         const W = et.current, Ie = je.current, $e = G * Ie / Se.current, Te = W.clientWidth, no = Math.max(0, $e - Te / 2);
@@ -13193,13 +13202,13 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
         return;
       }
       if (G >= F) {
-        B.current && B.current.stop(), A(!1), de.current = Pe.current, $(Pe.current), Ht(null);
+        B.current && B.current.stop(), A(!1), de.current = Pe.current, $(Pe.current), Zt(null);
         return;
       }
       ma(V);
     };
     ma(V);
-  }, [F, Ht, ma, $n]), wt = Qr;
+  }, [F, Zt, ma, $n]), wt = Qr;
   Q(() => {
     (async () => {
       if (R && tl.current && B.current)
@@ -13247,8 +13256,8 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
     const V = $n();
     B.current.pause(), A(!1), wt(), de.current = V, $(V);
   }, [wt, $n]), il = D(() => {
-    B.current && (B.current.stop(), A(!1), wt(), de.current = Pe.current, $(Pe.current), Ht(null));
-  }, [wt, Ht]), ll = D(
+    B.current && (B.current.stop(), A(!1), wt(), de.current = Pe.current, $(Pe.current), Zt(null));
+  }, [wt, Zt]), ll = D(
     (V) => {
       const G = Math.max(0, Math.min(V, F));
       de.current = G, $(G), R && B.current && to(G);
@@ -13335,7 +13344,7 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
       isLoopEnabled: qr,
       annotations: C,
       activeAnnotationId: E,
-      selectionStart: Zt,
+      selectionStart: zt,
       selectionEnd: cn,
       selectedTrackId: qi,
       loopStart: Zi,
@@ -13349,7 +13358,7 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
       qr,
       C,
       E,
-      Zt,
+      zt,
       cn,
       qi,
       Zi,
@@ -13395,7 +13404,7 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
       setLinkEndpoints: Z,
       setAnnotationsEditable: Me,
       setAnnotations: ml,
-      setActiveAnnotationId: Ht,
+      setActiveAnnotationId: Zt,
       // Loop controls
       setLoopEnabled: Gi,
       setLoopRegion: Jr,
@@ -13426,7 +13435,7 @@ const kf = We(null), Cf = We(null), xf = We(null), Ef = We(null), r1 = ({
       Z,
       Me,
       ml,
-      Ht,
+      Zt,
       Gi,
       Jr,
       ol,
@@ -14328,7 +14337,7 @@ const Vy = O.div.attrs((e) => ({
   v === "inverted" ? y = a.isSelected && l ? l.selectedWaveFillColor : l?.waveFillColor || "white" : y = a.isSelected && l ? l.selectedWaveOutlineColor : l?.waveOutlineColor || "grey";
   const b = a.renderMode === "spectrogram" || a.renderMode === "both", w = a.renderMode === "piano-roll", _ = a.renderMode === "both", S = b ? "#000" : w ? l?.pianoRollBackgroundColor || "#1a1a2e" : an(y), C = Math.floor(c / 2), x = c, E = a.index * c, M = an(y);
   return /* @__PURE__ */ ye(zy, { children: [
-    _ ? /* @__PURE__ */ ye(Vt, { children: [
+    _ ? /* @__PURE__ */ ye(Wt, { children: [
       /* @__PURE__ */ k(
         Fa,
         {
@@ -14685,7 +14694,7 @@ const Gy = 60, Uy = O.div.attrs((e) => ({
             "data-playlist-state": B ? "ready" : "loading",
             trackControlsSlots: je,
             timescaleGapHeight: ie > 0 ? ie + 1 : 0,
-            timescale: ie > 0 ? /* @__PURE__ */ ye(Vt, { children: [
+            timescale: ie > 0 ? /* @__PURE__ */ ye(Wt, { children: [
               /* @__PURE__ */ k(gf, { renderTick: t }),
               x && /* @__PURE__ */ k(
                 nv,
@@ -14703,7 +14712,7 @@ const Gy = 60, Uy = O.div.attrs((e) => ({
                 }
               )
             ] }) : void 0,
-            children: /* @__PURE__ */ ye(Vt, { children: [
+            children: /* @__PURE__ */ ye(Wt, { children: [
               q.map((N, H) => {
                 const te = re[H];
                 if (!te) return null;
@@ -14762,12 +14771,12 @@ const Gy = 60, Uy = O.div.attrs((e) => ({
                                 '[role="button"][aria-roledescription="draggable"]'
                               ) || ge(H);
                             },
-                            children: lt.data.map((Dt, Zt) => {
-                              const cn = Y?.spectrogramDataMap.get(ee.clipId), un = cn?.[Zt] ?? cn?.[0], Ot = at.get(te.id), dn = Ot?.config;
+                            children: lt.data.map((Dt, zt) => {
+                              const cn = Y?.spectrogramDataMap.get(ee.clipId), un = cn?.[zt] ?? cn?.[0], Ot = at.get(te.id), dn = Ot?.config;
                               return /* @__PURE__ */ k(
                                 mc,
                                 {
-                                  index: Zt,
+                                  index: zt,
                                   data: Dt,
                                   bits: lt.bits,
                                   length: He,
@@ -14789,13 +14798,13 @@ const Gy = 60, Uy = O.div.attrs((e) => ({
                                   spectrogramOnCanvasesReady: Y ? (Kr, qr) => {
                                     Y.registerSpectrogramCanvases(
                                       ee.clipId,
-                                      Zt,
+                                      zt,
                                       Kr,
                                       qr
                                     );
                                   } : void 0
                                 },
-                                `${ee.clipId}-${Zt}`
+                                `${ee.clipId}-${zt}`
                               );
                             })
                           },
@@ -14945,7 +14954,7 @@ const Gy = 60, Uy = O.div.attrs((e) => ({
   recordingState: v
 }) => {
   const { annotations: y } = vt(), b = Wy();
-  return /* @__PURE__ */ ye(Vt, { children: [
+  return /* @__PURE__ */ ye(Wt, { children: [
     /* @__PURE__ */ k(
       Yy,
       {
@@ -15504,7 +15513,7 @@ const Yf = (e) => {
           scrollContainerRef: U,
           isSelecting: $,
           timescale: w > 0 ? /* @__PURE__ */ k(gf, {}) : void 0,
-          children: /* @__PURE__ */ ye(Vt, { children: [
+          children: /* @__PURE__ */ ye(Wt, { children: [
             v.map((Z, ie) => {
               const Me = Z.length > 0 ? Math.max(...Z.map((fe) => fe.peaks.data.length)) : 1;
               return /* @__PURE__ */ k(
@@ -15648,7 +15657,7 @@ const Yf = (e) => {
   className: c
 }) => {
   const { annotations: u } = Wi();
-  return /* @__PURE__ */ ye(Vt, { children: [
+  return /* @__PURE__ */ ye(Wt, { children: [
     /* @__PURE__ */ k(
       Ib,
       {