@waveform-playlist/browser 5.0.0-alpha.18 → 5.0.0-alpha.19

package/dist/index.mjs

@@ -2,7 +2,7 @@ import * as Rr from "tone";
 import { Volume as An, getDestination as kn, start as Sn, now as At, getTransport as lt, getContext as Ae, Context as Er, setContext as Wr, Panner as _r, Gain as rn, Player as an, Analyser as $n, Meter as Fr, connect as Zr, StereoWidener as Vr, Gate as Pr, Limiter as zr, Compressor as Hr, Chebyshev as Xr, BitCrusher as Gr, Distortion as Nr, EQ3 as Lr, AutoWah as Yr, AutoFilter as Or, AutoPanner as Kr, Vibrato as Ur, Tremolo as jr, Phaser as Jr, Chorus as Qr, PingPongDelay as qr, FeedbackDelay as ea, JCReverb as ta, Freeverb as na, Reverb as ra } from "tone";
 import { jsx as I, jsxs as ne, Fragment as ot } from "react/jsx-runtime";
 import * as L from "react";
-import _e, { createContext as De, useContext as Re, useState as W, useEffect as J, Fragment as aa, useRef as R, useCallback as D, useLayoutEffect as oa, useMemo as at } from "react";
+import _e, { createContext as Be, useContext as Re, useState as W, useEffect as J, Fragment as aa, useRef as R, useCallback as D, useLayoutEffect as oa, useMemo as at } from "react";
 import S, { withTheme as Mn, ThemeContext as sa, useTheme as ia, ThemeProvider as Bn } from "styled-components";
 import { useDraggable as ht, useSensor as Zt, MouseSensor as la, TouchSensor as ca, PointerSensor as ua, useSensors as da, DndContext as ma } from "@dnd-kit/core";
 import { restrictToHorizontalAxis as fa } from "@dnd-kit/modifiers";
@@ -469,7 +469,7 @@ const Ht = /* @__PURE__ */ Object.freeze({
     "thin",
     /* @__PURE__ */ L.createElement(L.Fragment, null, /* @__PURE__ */ L.createElement("path", { d: "M153.76,28.41a4,4,0,0,0-4.22.43L78.63,84H32A12,12,0,0,0,20,96v64a12,12,0,0,0,12,12H78.63l70.91,55.16A4.07,4.07,0,0,0,152,228a3.92,3.92,0,0,0,1.76-.41A4,4,0,0,0,156,224V32A4,4,0,0,0,153.76,28.41ZM28,160V96a4,4,0,0,1,4-4H76v72H32A4,4,0,0,1,28,160Zm120,55.82L84,166V90l64-49.78ZM204,128a36,36,0,0,1-9,23.82,4,4,0,1,1-6-5.3,28,28,0,0,0,0-37,4,4,0,0,1,6-5.28A36,36,0,0,1,204,128Z" }))
   ]
-]), xa = De({
+]), xa = Be({
   color: "currentColor",
   size: "1em",
   weight: "regular",
@@ -937,12 +937,12 @@ var $a = S.canvas.attrs((e) => ({
   );
   oa(() => {
     const w = b.current, y = u + g;
-    let k = 0;
+    let A = 0;
     for (let $ = 0; $ < w.length; $++) {
-      const A = w[$], B = A.getContext("2d"), M = Math.floor(i / 2), _ = 2 ** (n - 1);
+      const k = w[$], B = k.getContext("2d"), M = Math.floor(i / 2), _ = 2 ** (n - 1);
       if (B) {
-        B.resetTransform(), B.clearRect(0, 0, A.width, A.height), B.imageSmoothingEnabled = !1, B.scale(o, o);
-        const T = A.width / o;
+        B.resetTransform(), B.clearRect(0, 0, k.width, k.height), B.imageSmoothingEnabled = !1, B.scale(o, o);
+        const T = k.width / o;
         let z;
         d === "normal" ? z = c : z = l, B.fillStyle = Sa(
           B,
@@ -950,18 +950,18 @@ var $a = S.canvas.attrs((e) => ({
           T,
           i
         );
-        const P = k, Z = k + T, O = Math.floor((P - u + y) / y) * y;
-        for (let X = Math.max(0, O); X < Z; X += y) {
-          const V = X - P;
+        const P = A, Z = A + T, Y = Math.floor((P - u + y) / y) * y;
+        for (let G = Math.max(0, Y); G < Z; G += y) {
+          const V = G - P;
           if (V + u <= 0) continue;
-          const Q = X;
+          const Q = G;
           if (Q * 2 + 1 < t.length) {
-            const ie = t[Q * 2] / _, oe = t[Q * 2 + 1] / _, te = Math.abs(ie * M), se = Math.abs(oe * M);
-            d === "normal" ? B.fillRect(V, M - se, u, se + te) : (B.fillRect(V, 0, u, M - se), B.fillRect(V, M + te, u, M - te));
+            const ie = t[Q * 2] / _, oe = t[Q * 2 + 1] / _, ee = Math.abs(ie * M), se = Math.abs(oe * M);
+            d === "normal" ? B.fillRect(V, M - se, u, se + ee) : (B.fillRect(V, 0, u, M - se), B.fillRect(V, M + ee, u, M - ee));
           }
         }
       }
-      k += A.width / o;
+      A += k.width / o;
     }
   }, [
     t,
@@ -1238,29 +1238,29 @@ var un = ({
   showFades: x = !1,
   touchOptimized: v = !1
 }) => {
-  const f = Math.floor(o / l), y = Math.floor((o + i) / l) - f, k = c && !u && !g, $ = `clip-${r}-${a}`, { attributes: A, listeners: B, setNodeRef: M, setActivatorNodeRef: _, transform: T, isDragging: z } = ht({
+  const f = Math.floor(o / l), y = Math.floor((o + i) / l) - f, A = c && !u && !g, $ = `clip-${r}-${a}`, { attributes: k, listeners: B, setNodeRef: M, setActivatorNodeRef: _, transform: T, isDragging: z } = ht({
     id: $,
     data: { clipId: n, trackIndex: r, clipIndex: a },
-    disabled: !k
+    disabled: !A
   }), P = `clip-boundary-left-${r}-${a}`, {
     attributes: Z,
-    listeners: O,
-    setActivatorNodeRef: X,
+    listeners: Y,
+    setActivatorNodeRef: G,
     isDragging: V
   } = ht({
     id: P,
     data: { clipId: n, trackIndex: r, clipIndex: a, boundary: "left" },
-    disabled: !k
+    disabled: !A
   }), Q = `clip-boundary-right-${r}-${a}`, {
     attributes: ie,
     listeners: oe,
-    setActivatorNodeRef: te,
+    setActivatorNodeRef: ee,
     isDragging: se
   } = ht({
     id: Q,
     data: { clipId: n, trackIndex: r, clipIndex: a, boundary: "right" },
-    disabled: !k
-  }), ye = T ? {
+    disabled: !A
+  }), Ce = T ? {
     transform: Ht.Translate.toString(T),
     zIndex: z ? 100 : void 0
     // Below controls (z-index: 999) but above other clips
@@ -1269,7 +1269,7 @@ var un = ({
     Va,
     {
       ref: M,
-      style: ye,
+      style: Ce,
       className: t,
       $left: f,
       $width: y,
@@ -1287,7 +1287,7 @@ var un = ({
             trackName: s,
             isSelected: h,
             disableDrag: u,
-            dragHandleProps: k ? { attributes: A, listeners: B, setActivatorNodeRef: _ } : void 0
+            dragHandleProps: A ? { attributes: k, listeners: B, setActivatorNodeRef: _ } : void 0
           }
         ),
         /* @__PURE__ */ ne(Pa, { $isOverlay: g, children: [
@@ -1322,8 +1322,8 @@ var un = ({
               touchOptimized: v,
               dragHandleProps: {
                 attributes: Z,
-                listeners: O,
-                setActivatorNodeRef: X,
+                listeners: Y,
+                setActivatorNodeRef: G,
                 isDragging: V
               }
             }
@@ -1339,7 +1339,7 @@ var un = ({
               dragHandleProps: {
                 attributes: ie,
                 listeners: oe,
-                setActivatorNodeRef: te,
+                setActivatorNodeRef: ee,
                 isDragging: se
               }
             }
@@ -1624,12 +1624,12 @@ var dn = S.div.attrs((e) => ({
   const [c, u] = W(null), g = R(0), h = R(0), d = R(0), b = Math.max(0, t - e), C = D((p, x) => {
     p.preventDefault(), p.stopPropagation(), u(x), g.current = p.clientX, h.current = x === "start" ? e : t;
     const v = (w) => {
-      const y = w.clientX - g.current, k = h.current + y;
+      const y = w.clientX - g.current, A = h.current + y;
       if (x === "start") {
-        const $ = Math.max(i, Math.min(t - 10, k));
+        const $ = Math.max(i, Math.min(t - 10, A));
         a?.($);
       } else {
-        const $ = Math.max(e + 10, Math.min(l, k));
+        const $ = Math.max(e + 10, Math.min(l, A));
         s?.($);
       }
     }, f = () => {
@@ -1640,8 +1640,8 @@ var dn = S.div.attrs((e) => ({
     p.preventDefault(), p.stopPropagation(), u("region"), g.current = p.clientX, h.current = e, d.current = t;
     const x = t - e, v = (w) => {
       const y = w.clientX - g.current;
-      let k = h.current + y, $ = d.current + y;
-      k < i && (k = i, $ = i + x), $ > l && ($ = l, k = l - x), o?.(k, $);
+      let A = h.current + y, $ = d.current + y;
+      A < i && (A = i, $ = i + x), $ > l && ($ = l, A = l - x), o?.(A, $);
     }, f = () => {
       u(null), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", f);
     };
@@ -1713,8 +1713,8 @@ var dn = S.div.attrs((e) => ({
     const p = b.clientX - m.left, x = Math.max(s, Math.min(o, p));
     u.current = x, a?.(x, x);
     const v = (w) => {
-      const y = w.clientX - m.left, k = Math.max(s, Math.min(o, y)), $ = Math.min(u.current, k), A = Math.max(u.current, k);
-      a?.($, A);
+      const y = w.clientX - m.left, A = Math.max(s, Math.min(o, y)), $ = Math.min(u.current, A), k = Math.max(u.current, A);
+      a?.($, k);
     }, f = () => {
       c(!1), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", f);
     };
@@ -1871,7 +1871,7 @@ var mn = ({
 function kt() {
   return window.devicePixelRatio;
 }
-var Gn = De(kt()), Nn = ({ children: e }) => {
+var Gn = Be(kt()), Nn = ({ children: e }) => {
   const [t, n] = W(kt());
   return matchMedia(`(resolution: ${kt()}dppx)`).addEventListener(
     "change",
@@ -1880,7 +1880,7 @@ var Gn = De(kt()), Nn = ({ children: e }) => {
     },
     { once: !0 }
   ), /* @__PURE__ */ I(Gn.Provider, { value: Math.ceil(t), children: e });
-}, Ln = () => Re(Gn), Tt = De({
+}, Ln = () => Re(Gn), Tt = Be({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -1893,14 +1893,14 @@ var Gn = De(kt()), Nn = ({ children: e }) => {
   duration: 3e4,
   barWidth: 1,
   barGap: 0
-}), pt = () => Re(Tt), gt = () => Re(sa), Ut = De(/* @__PURE__ */ I(aa, {})), to = () => Re(Ut), no = 0, ro = !1, ao = 0, oo = 0, so = {
+}), pt = () => Re(Tt), gt = () => Re(sa), Ut = Be(/* @__PURE__ */ I(aa, {})), to = () => Re(Ut), no = 0, ro = !1, ao = 0, oo = 0, so = {
   progress: no,
   isPlaying: ro,
   selectionStart: ao,
   selectionEnd: oo
 };
-De(so);
-De({
+Be(so);
+Be({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -1984,8 +1984,8 @@ var co = S.div.attrs((e) => ({
       if (f) {
         f.resetTransform(), f.clearRect(0, 0, v.width, v.height), f.imageSmoothingEnabled = !1, f.fillStyle = t, f.scale(C, C);
         for (const [w, y] of i.entries()) {
-          const k = h - y;
-          f.fillRect(w, k, 1, y);
+          const A = h - y;
+          f.fillRect(w, A, 1, y);
         }
       }
     }
@@ -2004,8 +2004,8 @@ var co = S.div.attrs((e) => ({
   for (let v = 0; v < m; v += p * s / 1e3) {
     const f = Math.floor(v);
     if (x % r === 0) {
-      const w = x, y = lo(w), k = o ? /* @__PURE__ */ I(_e.Fragment, { children: o(w, f) }, `timestamp-${x}`) : /* @__PURE__ */ I(mo, { $left: f, children: y }, y);
-      l.push(k), i.set(f, h);
+      const w = x, y = lo(w), A = o ? /* @__PURE__ */ I(_e.Fragment, { children: o(w, f) }, `timestamp-${x}`) : /* @__PURE__ */ I(mo, { $left: f, children: y }, y);
+      l.push(A), i.set(f, h);
     } else x % a === 0 ? i.set(f, Math.floor(h / 2)) : x % s === 0 && i.set(f, Math.floor(h / 5));
     x += s;
   }
@@ -2443,15 +2443,15 @@ function Wo(e) {
   for (var w = 0; w < a; w++) {
     var y = 0;
     if (i === 1) {
-      for (var k = 0; k < o.length; ++k)
-        y += o[k][w];
+      for (var A = 0; A < o.length; ++A)
+        y += o[A][w];
       y = Math.floor(f * y * n / o.length), y < m[0] && (m[0] = y, m[0] < v && (m[0] = v)), y > p[0] && (p[0] = y, p[0] > f && (p[0] = f));
     } else
       for (var $ = 0; $ < i; ++$)
         y = Math.floor(f * o[$][w] * n), y < m[$] && (m[$] = y, m[$] < v && (m[$] = v)), y > p[$] && (p[$] = y, p[$] > f && (p[$] = f));
     if (++b === t) {
-      for (var A = 0; A < i; A++)
-        e.bits === 8 ? (d.setInt8(C++, m[A]), d.setInt8(C++, p[A])) : (d.setInt16(C, m[A], !0), d.setInt16(C + 2, p[A], !0), C += 4), m[A] = 1 / 0, p[A] = -1 / 0;
+      for (var k = 0; k < i; k++)
+        e.bits === 8 ? (d.setInt8(C++, m[k]), d.setInt8(C++, p[k])) : (d.setInt16(C, m[k], !0), d.setInt16(C + 2, p[k], !0), C += 4), m[k] = 1 / 0, p[k] = -1 / 0;
       b = 0;
     }
   }
@@ -3090,8 +3090,8 @@ var Oo = S.div.attrs((e) => ({
   });
   if (c <= 0)
     return null;
-  const f = (y) => (k) => {
-    k.stopPropagation(), y?.(k);
+  const f = (y) => (A) => {
+    A.stopPropagation(), y?.(A);
   }, w = (y) => {
     y.stopPropagation();
   };
@@ -3342,18 +3342,18 @@ var qo = S.div`
     if (!s || !u) return;
     const y = w.trim();
     if (!y) return;
-    const k = [...e];
-    k[f] = {
-      ...k[f],
+    const A = [...e];
+    A[f] = {
+      ...A[f],
       id: y
-    }, u(k);
+    }, u(A);
   }, x = (f, w, y) => {
     if (!u) return;
-    const k = [...e];
-    f.action(k[y], y, k, i || {}), u(k);
+    const A = [...e];
+    f.action(A[y], y, A, i || {}), u(A);
   }, v = (f) => f.replace(/\./g, " ");
   return /* @__PURE__ */ I(qo, { ref: d, $height: l, children: e.map((f, w) => {
-    const y = f.id === t, k = () => c?.(f);
+    const y = f.id === t, A = () => c?.(f);
     return g ? /* @__PURE__ */ I(
       "div",
       {
@@ -3362,7 +3362,7 @@ var qo = S.div`
           annotation: f,
           index: w,
           isActive: y,
-          onClick: k,
+          onClick: A,
           formatTime: C
         })
       },
@@ -3372,7 +3372,7 @@ var qo = S.div`
       {
         ref: y ? h : null,
         $isActive: y,
-        onClick: k,
+        onClick: A,
         children: [
           /* @__PURE__ */ ne(ts, { children: [
             /* @__PURE__ */ ne(ns, { children: [
@@ -3392,14 +3392,14 @@ var qo = S.div`
                 C(f.end)
               ] })
             ] }),
-            o.length > 0 && /* @__PURE__ */ I(os, { onClick: ($) => $.stopPropagation(), children: o.map(($, A) => /* @__PURE__ */ I(
+            o.length > 0 && /* @__PURE__ */ I(os, { onClick: ($) => $.stopPropagation(), children: o.map(($, k) => /* @__PURE__ */ I(
               ss,
               {
                 title: $.title,
                 onClick: () => x($, f, w),
                 children: $.text ? $.text : /* @__PURE__ */ I("i", { className: v($.class || "") })
               },
-              A
+              k
             )) })
           ] }),
           /* @__PURE__ */ I(
@@ -3714,28 +3714,28 @@ function bi(e, t = {}) {
         o(!0), l(null), u(0);
         const m = Rr.getContext().rawContext, p = e.map(async (v, f) => {
           if (v.audioBuffer) {
-            const A = b(v, f, v.audioBuffer);
-            return n && !h && (d.set(f, A), u((B) => B + 1), a(
+            const k = b(v, f, v.audioBuffer);
+            return n && !h && (d.set(f, k), u((B) => B + 1), a(
               Array.from({ length: e.length }, (B, M) => d.get(M)).filter((B) => B !== void 0)
-            )), A;
+            )), k;
           }
           if (!v.src && v.waveformData) {
-            const A = b(v, f);
-            return n && !h && (d.set(f, A), u((B) => B + 1), a(
+            const k = b(v, f);
+            return n && !h && (d.set(f, k), u((B) => B + 1), a(
               Array.from({ length: e.length }, (B, M) => d.get(M)).filter((B) => B !== void 0)
-            )), A;
+            )), k;
           }
           if (!v.src)
             throw new Error(`Track ${f + 1}: Must provide src, audioBuffer, or waveformData`);
           const w = await fetch(v.src);
           if (!w.ok)
             throw new Error(`Failed to fetch ${v.src}: ${w.statusText}`);
-          const y = await w.arrayBuffer(), k = await m.decodeAudioData(y);
-          if (!k || !k.sampleRate || !k.duration)
+          const y = await w.arrayBuffer(), A = await m.decodeAudioData(y);
+          if (!A || !A.sampleRate || !A.duration)
             throw new Error(`Invalid audio buffer for ${v.src}`);
-          const $ = b(v, f, k);
-          return n && !h && (d.set(f, $), u((A) => A + 1), a(
-            Array.from({ length: e.length }, (A, B) => d.get(B)).filter((A) => A !== void 0)
+          const $ = b(v, f, A);
+          return n && !h && (d.set(f, $), u((k) => k + 1), a(
+            Array.from({ length: e.length }, (k, B) => d.get(B)).filter((k) => k !== void 0)
           )), $;
         }), x = await Promise.all(p);
         h || (n || (a(x), u(x.length)), o(!1));
@@ -3771,9 +3771,9 @@ function vi({
       let f = p + v;
       const w = [...C.clips].sort((M, _) => M.startSample - _.startSample), y = w.findIndex((M) => M === m);
       f = Math.max(0, f);
-      const k = y > 0 ? w[y - 1] : null;
-      if (k) {
-        const M = (k.startSample + k.durationSamples) / r;
+      const A = y > 0 ? w[y - 1] : null;
+      if (A) {
+        const M = (A.startSample + A.durationSamples) / r;
         f = Math.max(f, M);
       }
       const $ = y < w.length - 1 ? w[y + 1] : null;
@@ -3811,8 +3811,8 @@ function vi({
       if (!h || !a.current) return;
       const { trackIndex: d, clipIndex: b } = u.data.current, C = g.x * n, m = Math.floor(0.1 * r), p = a.current, x = e.map((v, f) => {
         if (f !== d) return v;
-        const w = [...v.clips].sort(($, A) => $.startSample - A.startSample), y = w.findIndex(($) => $ === v.clips[b]), k = v.clips.map(($, A) => {
-          if (A !== b) return $;
+        const w = [...v.clips].sort(($, k) => $.startSample - k.startSample), y = w.findIndex(($) => $ === v.clips[b]), A = v.clips.map(($, k) => {
+          if (k !== b) return $;
           const B = $.sourceDurationSamples;
           if (h === "left") {
             let M = Math.floor(C);
@@ -3827,12 +3827,12 @@ function vi({
             }
             const P = p.durationSamples - m;
             M > P && (M = P);
-            const Z = p.offsetSamples + M, O = p.durationSamples - M, X = p.startSample + M;
+            const Z = p.offsetSamples + M, Y = p.durationSamples - M, G = p.startSample + M;
             return {
               ...$,
               offsetSamples: Z,
-              durationSamples: O,
-              startSample: X
+              durationSamples: Y,
+              startSample: G
             };
           } else {
             let M = Math.floor(p.durationSamples + C);
@@ -3841,7 +3841,7 @@ function vi({
             return _ && p.startSample + M > _.startSample && (M = _.startSample - p.startSample, M = Math.max(m, M)), { ...$, durationSamples: M };
           }
         });
-        return { ...v, clips: k };
+        return { ...v, clips: A };
       });
       t(x);
     },
@@ -3855,13 +3855,13 @@ function vi({
       }
       const m = e.map((p, x) => {
         if (x !== h) return p;
-        const v = [...p.clips].sort((y, k) => y.startSample - k.startSample), f = v.findIndex((y) => y === p.clips[d]), w = p.clips.map((y, k) => {
-          if (k !== d) return y;
+        const v = [...p.clips].sort((y, A) => y.startSample - A.startSample), f = v.findIndex((y) => y === p.clips[d]), w = p.clips.map((y, A) => {
+          if (A !== d) return y;
           let $ = Math.floor(y.startSample + C);
           $ = Math.max(0, $);
-          const A = f > 0 ? v[f - 1] : null;
-          if (A) {
-            const M = A.startSample + A.durationSamples;
+          const k = f > 0 ? v[f - 1] : null;
+          if (k) {
+            const M = k.startSample + k.durationSamples;
             $ = Math.max($, M);
           }
           const B = f < v.length - 1 ? v[f + 1] : null;
@@ -4053,7 +4053,7 @@ const Ci = (e) => {
       const C = b.startSample / g, m = (b.startSample + b.durationSamples) / g;
       if (u <= C || u >= m)
         return console.warn("Split time is outside clip bounds"), !1;
-      const p = Math.round(u * g), x = Math.floor(p / h), v = b.startSample + b.durationSamples, f = x * h, w = b.startSample, y = f - w, k = f, $ = v - k, A = f - b.startSample, B = Gt({
+      const p = Math.round(u * g), x = Math.floor(p / h), v = b.startSample + b.durationSamples, f = x * h, w = b.startSample, y = f - w, A = f, $ = v - A, k = f - b.startSample, B = Gt({
         audioBuffer: b.audioBuffer,
         startSample: w,
         durationSamples: y,
@@ -4069,9 +4069,9 @@ const Ci = (e) => {
         // Note: fadeOut removed for first clip since it's cut
       }), M = Gt({
         audioBuffer: b.audioBuffer,
-        startSample: k,
+        startSample: A,
         durationSamples: $,
-        offsetSamples: b.offsetSamples + A,
+        offsetSamples: b.offsetSamples + k,
         sampleRate: b.sampleRate,
         sourceDurationSamples: b.sourceDurationSamples,
         gain: b.gain,
@@ -4133,7 +4133,7 @@ const Ci = (e) => {
   const t = [], n = typeof navigator < "u" && navigator.platform.includes("Mac");
   return e.metaKey && t.push(n ? "Cmd" : "Ctrl"), e.ctrlKey && !e.metaKey && t.push("Ctrl"), e.altKey && t.push(n ? "Option" : "Alt"), e.shiftKey && t.push("Shift"), t.push(e.key.toUpperCase()), t.join("+");
 }, xi = (e = {}) => {
-  const { enabled: t = !0, additionalShortcuts: n = [], shortcuts: r } = e, { isPlaying: a } = Fe(), { setCurrentTime: s, play: o, pause: i, stop: l } = ve(), { playoutRef: c } = Te(), u = D(() => {
+  const { enabled: t = !0, additionalShortcuts: n = [], shortcuts: r } = e, { isPlaying: a } = Fe(), { setCurrentTime: s, play: o, pause: i, stop: l } = be(), { playoutRef: c } = De(), u = D(() => {
     a ? i() : o();
   }, [a, o, i]), g = D(() => {
     l();
@@ -4184,13 +4184,13 @@ function Ii({
   controlsWidth: g = 0,
   onPlay: h
 }) {
-  const d = at(() => t ? e.findIndex((A) => A.id === t) : -1, [e, t]), b = D(
-    (A) => {
+  const d = at(() => t ? e.findIndex((k) => k.id === t) : -1, [e, t]), b = D(
+    (k) => {
       if (!l?.current || !c || !u) return;
-      const B = e.find((V) => V.id === A);
+      const B = e.find((V) => V.id === k);
       if (!B) return;
-      const M = l.current, _ = M.clientWidth, T = B.start * u / c + g, z = B.end * u / c + g, P = (T + z) / 2, Z = M.scrollLeft, O = Z, X = Z + _;
-      if (T < O || z > X) {
+      const M = l.current, _ = M.clientWidth, T = B.start * u / c + g, z = B.end * u / c + g, P = (T + z) / 2, Z = M.scrollLeft, Y = Z, G = Z + _;
+      if (T < Y || z > G) {
         const V = Math.max(0, P - _ / 2);
         M.scrollTo({
           left: V,
@@ -4204,9 +4204,9 @@ function Ii({
     t && l?.current && c && u && b(t);
   }, [t, b, l, c, u]);
   const C = D(
-    (A) => {
+    (k) => {
       if (d < 0) return;
-      const B = e[d], M = Math.max(0, Math.min(B.end - 0.1, B.start + A)), _ = M - B.start, T = [...e];
+      const B = e[d], M = Math.max(0, Math.min(B.end - 0.1, B.start + k)), _ = M - B.start, T = [...e];
       if (T[d] = {
         ...B,
         start: M
@@ -4227,9 +4227,9 @@ function Ii({
     },
     [e, d, s, n]
   ), m = D(
-    (A) => {
+    (k) => {
       if (d < 0) return;
-      const B = e[d], M = Math.max(B.start + 0.1, Math.min(a, B.end + A)), _ = M - B.end, T = [...e];
+      const B = e[d], M = Math.max(B.start + 0.1, Math.min(a, B.end + k)), _ = M - B.end, T = [...e];
       if (T[d] = {
         ...B,
         end: M
@@ -4243,12 +4243,12 @@ function Ii({
           };
           let Z = d + 1;
           for (; Z < T.length - 1; ) {
-            const O = T[Z], X = T[Z + 1];
-            if (Math.abs(X.start - e[Z].end) < zt) {
-              const V = O.end - e[Z].end;
+            const Y = T[Z], G = T[Z + 1];
+            if (Math.abs(G.start - e[Z].end) < zt) {
+              const V = Y.end - e[Z].end;
               T[Z + 1] = {
-                ...X,
-                start: Math.min(X.end - 0.1, X.start + V)
+                ...G,
+                start: Math.min(G.end - 0.1, G.start + V)
               }, Z++;
             } else
               break;
@@ -4263,10 +4263,10 @@ function Ii({
           };
           let P = d + 1;
           for (; P < T.length - 1; ) {
-            const Z = T[P], O = T[P + 1];
-            if (Z.end > O.start)
+            const Z = T[P], Y = T[P + 1];
+            if (Z.end > Y.start)
               T[P + 1] = {
-                ...O,
+                ...Y,
                 start: Z.end
               }, P++;
             else
@@ -4289,9 +4289,9 @@ function Ii({
     r && r(null);
   }, [r]), y = D(() => {
     if (d < 0 || !h) return;
-    const A = e[d], B = o ? void 0 : A.end - A.start;
-    h(A.start, B);
-  }, [e, d, o, h]), k = at(
+    const k = e[d], B = o ? void 0 : k.end - k.start;
+    h(k.start, B);
+  }, [e, d, o, h]), A = at(
     () => [
       {
         key: "[",
@@ -4375,7 +4375,7 @@ function Ii({
     [p, x, v, f, w]
   );
   return Nt({
-    shortcuts: k,
+    shortcuts: A,
     enabled: i && d >= 0
   }), Nt({
     shortcuts: $,
@@ -4442,7 +4442,7 @@ function ks(e, t = {}) {
   const {
     channelCount: n = 1,
     samplesPerPixel: r = 1024
-  } = t, [a, s] = W(!1), [o, i] = W(!1), [l, c] = W(0), [u, g] = W(new Int16Array(0)), [h, d] = W(null), [b, C] = W(null), [m, p] = W(0), [x, v] = W(0), f = 16, w = R(!1), y = R(null), k = R(null), $ = R([]), A = R(0), B = R(null), M = R(0), _ = R(!1), T = R(!1), z = D(async () => {
+  } = t, [a, s] = W(!1), [o, i] = W(!1), [l, c] = W(0), [u, g] = W(new Int16Array(0)), [h, d] = W(null), [b, C] = W(null), [m, p] = W(0), [x, v] = W(0), f = 16, w = R(!1), y = R(null), A = R(null), $ = R([]), k = R(0), B = R(null), M = R(0), _ = R(!1), T = R(!1), z = D(async () => {
     if (!w.current)
       try {
         const V = Ae(), Q = new URL("data:text/javascript;base64,InVzZSBzdHJpY3QiOwoKLy8gc3JjL3dvcmtsZXQvcmVjb3JkaW5nLXByb2Nlc3Nvci53b3JrbGV0LnRzCnZhciBSZWNvcmRpbmdQcm9jZXNzb3IgPSBjbGFzcyBleHRlbmRzIEF1ZGlvV29ya2xldFByb2Nlc3NvciB7CiAgY29uc3RydWN0b3IoKSB7CiAgICBzdXBlcigpOwogICAgdGhpcy5idWZmZXJTaXplID0gMDsKICAgIHRoaXMuYnVmZmVycyA9IFtdOwogICAgdGhpcy5zYW1wbGVzQ29sbGVjdGVkID0gMDsKICAgIHRoaXMuaXNSZWNvcmRpbmcgPSBmYWxzZTsKICAgIHRoaXMuY2hhbm5lbENvdW50ID0gMTsKICAgIHRoaXMucG9ydC5vbm1lc3NhZ2UgPSAoZXZlbnQpID0+IHsKICAgICAgY29uc3QgeyBjb21tYW5kLCBzYW1wbGVSYXRlOiBzYW1wbGVSYXRlMiwgY2hhbm5lbENvdW50IH0gPSBldmVudC5kYXRhOwogICAgICBpZiAoY29tbWFuZCA9PT0gInN0YXJ0IikgewogICAgICAgIHRoaXMuaXNSZWNvcmRpbmcgPSB0cnVlOwogICAgICAgIHRoaXMuY2hhbm5lbENvdW50ID0gY2hhbm5lbENvdW50IHx8IDE7CiAgICAgICAgdGhpcy5idWZmZXJTaXplID0gTWF0aC5mbG9vcigoc2FtcGxlUmF0ZTIgfHwgNDhlMykgKiAwLjAxNik7CiAgICAgICAgdGhpcy5idWZmZXJzID0gW107CiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLmNoYW5uZWxDb3VudDsgaSsrKSB7CiAgICAgICAgICB0aGlzLmJ1ZmZlcnNbaV0gPSBuZXcgRmxvYXQzMkFycmF5KHRoaXMuYnVmZmVyU2l6ZSk7CiAgICAgICAgfQogICAgICAgIHRoaXMuc2FtcGxlc0NvbGxlY3RlZCA9IDA7CiAgICAgIH0gZWxzZSBpZiAoY29tbWFuZCA9PT0gInN0b3AiKSB7CiAgICAgICAgdGhpcy5pc1JlY29yZGluZyA9IGZhbHNlOwogICAgICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPiAwKSB7CiAgICAgICAgICB0aGlzLmZsdXNoQnVmZmVycygpOwogICAgICAgIH0KICAgICAgfQogICAgfTsKICB9CiAgcHJvY2VzcyhpbnB1dHMsIG91dHB1dHMsIHBhcmFtZXRlcnMpIHsKICAgIGlmICghdGhpcy5pc1JlY29yZGluZykgewogICAgICByZXR1cm4gdHJ1ZTsKICAgIH0KICAgIGNvbnN0IGlucHV0ID0gaW5wdXRzWzBdOwogICAgaWYgKCFpbnB1dCB8fCBpbnB1dC5sZW5ndGggPT09IDApIHsKICAgICAgcmV0dXJuIHRydWU7CiAgICB9CiAgICBjb25zdCBmcmFtZUNvdW50ID0gaW5wdXRbMF0ubGVuZ3RoOwogICAgZm9yIChsZXQgY2hhbm5lbCA9IDA7IGNoYW5uZWwgPCBNYXRoLm1pbihpbnB1dC5sZW5ndGgsIHRoaXMuY2hhbm5lbENvdW50KTsgY2hhbm5lbCsrKSB7CiAgICAgIGNvbnN0IGlucHV0Q2hhbm5lbCA9IGlucHV0W2NoYW5uZWxdOwogICAgICBjb25zdCBidWZmZXIgPSB0aGlzLmJ1ZmZlcnNbY2hhbm5lbF07CiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZnJhbWVDb3VudDsgaSsrKSB7CiAgICAgICAgYnVmZmVyW3RoaXMuc2FtcGxlc0NvbGxlY3RlZCArIGldID0gaW5wdXRDaGFubmVsW2ldOwogICAgICB9CiAgICB9CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgKz0gZnJhbWVDb3VudDsKICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPj0gdGhpcy5idWZmZXJTaXplKSB7CiAgICAgIHRoaXMuZmx1c2hCdWZmZXJzKCk7CiAgICB9CiAgICByZXR1cm4gdHJ1ZTsKICB9CiAgZmx1c2hCdWZmZXJzKCkgewogICAgY29uc3Qgc2FtcGxlcyA9IHRoaXMuYnVmZmVyc1swXS5zbGljZSgwLCB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQpOwogICAgdGhpcy5wb3J0LnBvc3RNZXNzYWdlKHsKICAgICAgc2FtcGxlcywKICAgICAgc2FtcGxlUmF0ZSwKICAgICAgY2hhbm5lbENvdW50OiB0aGlzLmNoYW5uZWxDb3VudAogICAgfSk7CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPSAwOwogIH0KfTsKcmVnaXN0ZXJQcm9jZXNzb3IoInJlY29yZGluZy1wcm9jZXNzb3IiLCBSZWNvcmRpbmdQcm9jZXNzb3IpOwovLyMgc291cmNlTWFwcGluZ1VSTD1yZWNvcmRpbmctcHJvY2Vzc29yLndvcmtsZXQuanMubWFw", import.meta.url).href;
@@ -4460,16 +4460,16 @@ function ks(e, t = {}) {
       const V = Ae();
       V.state === "suspended" && await V.resume(), await z();
       const Q = V.createMediaStreamSource(e);
-      k.current = Q;
+      A.current = Q;
       const ie = V.createAudioWorkletNode("recording-processor");
-      y.current = ie, Q.connect(ie), ie.port.onmessage = (te) => {
-        const { samples: se } = te.data;
-        $.current.push(se), A.current += se.length, g(
-          (ye) => As(
-            ye,
+      y.current = ie, Q.connect(ie), ie.port.onmessage = (ee) => {
+        const { samples: se } = ee.data;
+        $.current.push(se), k.current += se.length, g(
+          (Ce) => As(
+            Ce,
             se,
             r,
-            A.current - se.length,
+            k.current - se.length,
             f
           )
         );
@@ -4477,11 +4477,11 @@ function ks(e, t = {}) {
         command: "start",
         sampleRate: V.sampleRate,
         channelCount: n
-      }), $.current = [], A.current = 0, g(new Int16Array(0)), d(null), p(0), v(0), _.current = !0, T.current = !1, s(!0), i(!1), M.current = performance.now();
+      }), $.current = [], k.current = 0, g(new Int16Array(0)), d(null), p(0), v(0), _.current = !0, T.current = !1, s(!0), i(!1), M.current = performance.now();
       const oe = () => {
         if (_.current && !T.current) {
-          const te = (performance.now() - M.current) / 1e3;
-          c(te), B.current = requestAnimationFrame(oe);
+          const ee = (performance.now() - M.current) / 1e3;
+          c(ee), B.current = requestAnimationFrame(oe);
         }
       };
       oe();
@@ -4493,9 +4493,9 @@ function ks(e, t = {}) {
       return null;
     try {
       if (y.current) {
-        if (y.current.port.postMessage({ command: "stop" }), k.current)
+        if (y.current.port.postMessage({ command: "stop" }), A.current)
           try {
-            k.current.disconnect(y.current);
+            A.current.disconnect(y.current);
           } catch {
           }
         y.current.disconnect();
@@ -4511,9 +4511,9 @@ function ks(e, t = {}) {
     } catch (V) {
       return console.error("Failed to stop recording:", V), C(V instanceof Error ? V : new Error("Failed to stop recording")), null;
     }
-  }, [a, n]), O = D(() => {
+  }, [a, n]), Y = D(() => {
     a && !o && (B.current !== null && (cancelAnimationFrame(B.current), B.current = null), T.current = !0, i(!0));
-  }, [a, o]), X = D(() => {
+  }, [a, o]), G = D(() => {
     if (a && o) {
       T.current = !1, i(!1), M.current = performance.now() - l * 1e3;
       const V = () => {
@@ -4527,9 +4527,9 @@ function ks(e, t = {}) {
   }, [a, o, l]);
   return J(() => () => {
     if (y.current) {
-      if (y.current.port.postMessage({ command: "stop" }), k.current)
+      if (y.current.port.postMessage({ command: "stop" }), A.current)
         try {
-          k.current.disconnect(y.current);
+          A.current.disconnect(y.current);
         } catch {
         }
       y.current.disconnect();
@@ -4545,8 +4545,8 @@ function ks(e, t = {}) {
     peakLevel: x,
     startRecording: P,
     stopRecording: Z,
-    pauseRecording: O,
-    resumeRecording: X,
+    pauseRecording: Y,
+    resumeRecording: G,
     error: b
   };
 }
@@ -4629,8 +4629,8 @@ function $s(e, t = {}) {
         if (!(!h || !l.current)) {
           if (f - x >= p) {
             x = f;
-            const w = l.current.getValue(), y = typeof w == "number" ? w : w[0], k = Math.max(0, Math.min(1, (y + 100) / 100));
-            s(k), i(($) => Math.max($, k));
+            const w = l.current.getValue(), y = typeof w == "number" ? w : w[0], A = Math.max(0, Math.min(1, (y + 100) / 100));
+            s(A), i(($) => Math.max($, A));
           }
           u.current = requestAnimationFrame(v);
         }
@@ -4830,26 +4830,26 @@ function Ai(e, t, n, r = {}) {
     duration: f,
     peaks: w,
     startRecording: y,
-    stopRecording: k,
+    stopRecording: A,
     pauseRecording: $,
-    resumeRecording: A,
+    resumeRecording: k,
     error: B
   } = ks(g, o), M = D(async () => {
     n && (i || (await Vt(), l(!0)), await y());
   }, [n, i, y]), _ = D(async () => {
-    const P = await k();
+    const P = await A();
     if (P && n) {
-      const Z = e.findIndex((te) => te.id === n);
+      const Z = e.findIndex((ee) => ee.id === n);
       if (Z === -1) return;
-      const O = e[Z], X = Math.floor(a * P.sampleRate);
+      const Y = e[Z], G = Math.floor(a * P.sampleRate);
       let V = 0;
-      if (O.clips.length > 0) {
-        const te = O.clips.map(
+      if (Y.clips.length > 0) {
+        const ee = Y.clips.map(
           (se) => se.startSample + se.durationSamples
         );
-        V = Math.max(...te);
+        V = Math.max(...ee);
       }
-      const Q = Math.max(X, V), ie = {
+      const Q = Math.max(G, V), ie = {
         id: `clip-${Date.now()}`,
         audioBuffer: P,
         startSample: Q,
@@ -4859,13 +4859,13 @@ function Ai(e, t, n, r = {}) {
         sourceDurationSamples: P.length,
         gain: 1,
         name: `Recording ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`
-      }, oe = e.map((te, se) => se === Z ? {
-        ...te,
-        clips: [...te.clips, ie]
-      } : te);
+      }, oe = e.map((ee, se) => se === Z ? {
+        ...ee,
+        clips: [...ee.clips, ie]
+      } : ee);
       t(oe);
     }
-  }, [n, e, t, a, k]);
+  }, [n, e, t, a, A]);
   J(() => {
     d && h.length > 0 && c === null && u(h[0].deviceId);
   }, [d, h.length]);
@@ -4891,7 +4891,7 @@ function Ai(e, t, n, r = {}) {
     startRecording: M,
     stopRecording: _,
     pauseRecording: $,
-    resumeRecording: A,
+    resumeRecording: k,
     requestMicAccess: T,
     changeDevice: z,
     // Track state
@@ -5227,12 +5227,12 @@ function Mi(e = 256) {
       x.connect(f), f.connect(v);
     else {
       let y = x;
-      w.forEach((k) => {
+      w.forEach((A) => {
         try {
-          k.disconnect();
+          A.disconnect();
         } catch {
         }
-        y.connect(k.effect), y = k.effect;
+        y.connect(A.effect), y = A.effect;
       }), y.connect(f), f.connect(v);
     }
   }, []), l = D((m) => {
@@ -5308,8 +5308,8 @@ function Mi(e = 256) {
         m.connect(v), v.connect(p);
       else {
         let y = m;
-        w.forEach((k) => {
-          y.connect(k.effect), y = k.effect;
+        w.forEach((A) => {
+          y.connect(A.effect), y = A.effect;
         }), y.connect(v), v.connect(p);
       }
       return function() {
@@ -5439,7 +5439,7 @@ function Bi() {
         return w.set(
           d,
           y.map(
-            (k) => k.instanceId === b ? { ...k, bypassed: p } : k
+            (A) => A.instanceId === b ? { ...A, bypassed: p } : A
           )
         ), w;
       });
@@ -5577,13 +5577,13 @@ function Ps() {
             f = Math.max(f, T);
           }
         f += Math.round(v * 0.1);
-        const w = f / v, y = g === "individual" ? [{ track: i[h], state: l[h], index: h }] : i.map((M, _) => ({ track: M, state: l[_], index: _ })), k = l.some((M) => M.soloed), $ = !!m;
-        let A;
+        const w = f / v, y = g === "individual" ? [{ track: i[h], state: l[h], index: h }] : i.map((M, _) => ({ track: M, state: l[_], index: _ })), A = l.some((M) => M.soloed), $ = !!m;
+        let k;
         if ((C || $) && b)
-          A = await zs(
+          k = await zs(
             y,
             l,
-            k,
+            A,
             w,
             v,
             C,
@@ -5597,22 +5597,22 @@ function Ps() {
           let _ = 0;
           const T = y.reduce((z, { track: P }) => z + P.clips.length, 0);
           for (const { track: z, state: P } of y)
-            if (!(P.muted && !P.soloed) && !(k && !P.soloed))
+            if (!(P.muted && !P.soloed) && !(A && !P.soloed))
               for (const Z of z.clips) {
                 await Xs(M, Z, P, v, b), _++;
-                const O = _ / T * 0.5;
-                r(O), x?.(O);
+                const Y = _ / T * 0.5;
+                r(Y), x?.(Y);
               }
-          r(0.5), x?.(0.5), A = await M.startRendering();
+          r(0.5), x?.(0.5), k = await M.startRendering();
         }
         r(0.9), x?.(0.9);
-        const B = Zs(A, { bitDepth: p });
+        const B = Zs(k, { bitDepth: p });
         if (r(1), x?.(1), d) {
           const M = g === "individual" ? `${u}_${i[h].name}` : u;
           Vs(B, `${M}.wav`);
         }
         return {
-          audioBuffer: A,
+          audioBuffer: k,
           blob: B,
           duration: w
         };
@@ -5640,19 +5640,19 @@ async function zs(e, t, n, r, a, s, o, i) {
         s ? x = s(p, m, !0) : p.connect(m);
         for (const { track: v, state: f } of e) {
           if (f.muted && !f.soloed || n && !f.soloed) continue;
-          const w = new c(Hs(f.volume)), y = new g(f.pan), k = new u(f.muted ? 0 : 1), $ = o?.(v.id);
-          $ ? $(k, p, !0) : k.connect(p), y.connect(k), w.connect(y);
-          for (const A of v.clips) {
-            const { audioBuffer: B, startSample: M, durationSamples: _, offsetSamples: T, gain: z, fadeIn: P, fadeOut: Z } = A, O = M / a, X = _ / a, V = T / a, Q = new d(B), ie = new h(Q), oe = new u(z);
+          const w = new c(Hs(f.volume)), y = new g(f.pan), A = new u(f.muted ? 0 : 1), $ = o?.(v.id);
+          $ ? $(A, p, !0) : A.connect(p), y.connect(A), w.connect(y);
+          for (const k of v.clips) {
+            const { audioBuffer: B, startSample: M, durationSamples: _, offsetSamples: T, gain: z, fadeIn: P, fadeOut: Z } = k, Y = M / a, G = _ / a, V = T / a, Q = new d(B), ie = new h(Q), oe = new u(z);
             if (ie.connect(oe), oe.connect(w), P) {
-              const te = O, se = O + P.duration, ye = oe.gain._param;
-              ye.setValueAtTime(0, te), ye.linearRampToValueAtTime(z, se);
+              const ee = Y, se = Y + P.duration, Ce = oe.gain._param;
+              Ce.setValueAtTime(0, ee), Ce.linearRampToValueAtTime(z, se);
             }
             if (Z) {
-              const te = O + X - Z.duration, se = O + X, ye = oe.gain._param;
-              ye.setValueAtTime(z, te), ye.linearRampToValueAtTime(0, se);
+              const ee = Y + G - Z.duration, se = Y + G, Ce = oe.gain._param;
+              Ce.setValueAtTime(z, ee), Ce.linearRampToValueAtTime(0, se);
             }
-            ie.start(O, V, X);
+            ie.start(Y, V, G);
           }
         }
         C.start(0);
@@ -5724,7 +5724,7 @@ function xn(e, t, n, r) {
   }
   return a;
 }
-const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null), Di = ({
+const or = Be(null), sr = Be(null), ir = Be(null), lr = Be(null), cr = Be(null), Di = ({
   tracks: e,
   timescale: t = !1,
   mono: n = !1,
@@ -5743,17 +5743,17 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
   progressBarWidth: C,
   children: m
 }) => {
-  const p = C ?? d + b, [x, v] = W([]), [f, w] = W(null), [y, k] = W(!1), [$, A] = W(0), [B, M] = W(0), [_, T] = W([]), [z, P] = W([]), [Z, O] = W([]), [X, V] = W(0), [Q, ie] = W(0), [oe, te] = W(null), [se, ye] = W(o), [we, Ke] = W(c?.isContinuousPlay ?? !1), [Ne, ke] = W(c?.linkEndpoints ?? !0), [Ue, K] = W(c?.editable ?? !1), [fe, re] = W(!1), [q, he] = W(0), [xe, ae] = W(0), F = R(null), Se = R(0), be = R(0), pe = R(null), et = R(Z), j = R(0), ee = R(0), de = R(null), me = R(null), je = R(!1), Je = R(c?.isContinuousPlay ?? !1), Le = R(null), tt = R(a), bt = R(!1), Wt = R(0), N = R(0), U = R(0), ce = R(0), { timeFormat: $e, setTimeFormat: Me, formatTime: Pe } = hs(), le = gs({ initialSamplesPerPixel: a, zoomLevels: s }), Be = le.samplesPerPixel, { masterVolume: Ye, setMasterVolume: Qe } = bs({ playoutRef: F, initialVolume: 1 }), qe = D((E) => {
+  const p = C ?? d + b, [x, v] = W([]), [f, w] = W(null), [y, A] = W(!1), [$, k] = W(0), [B, M] = W(0), [_, T] = W([]), [z, P] = W([]), [Z, Y] = W([]), [G, V] = W(0), [Q, ie] = W(0), [oe, ee] = W(null), [se, Ce] = W(o), [ve, Ke] = W(c?.isContinuousPlay ?? !1), [Ne, ke] = W(c?.linkEndpoints ?? !0), [Ue, O] = W(c?.editable ?? !1), [me, re] = W(!1), [q, fe] = W(0), [ye, ae] = W(0), F = R(null), Te = R(0), we = R(0), he = R(null), et = R(Z), j = R(0), te = R(0), de = R(null), pe = R(null), je = R(!1), Je = R(c?.isContinuousPlay ?? !1), Le = R(null), tt = R(a), bt = R(!1), Wt = R(0), N = R(0), U = R(0), ce = R(0), { timeFormat: Se, setTimeFormat: $e, formatTime: Pe } = hs(), le = gs({ initialSamplesPerPixel: a, zoomLevels: s }), Me = le.samplesPerPixel, { masterVolume: Ye, setMasterVolume: Qe } = bs({ playoutRef: F, initialVolume: 1 }), qe = D((E) => {
     Je.current = E, Ke(E);
   }, []), ze = D((E) => {
     Le.current = E, w(E);
   }, []), dt = D((E) => {
     bt.current = E, re(E);
-  }, []), nt = D((E, G) => {
-    U.current = E, ce.current = G, he(E), ae(G);
+  }, []), nt = D((E, X) => {
+    U.current = E, ce.current = X, fe(E), ae(X);
   }, []), hr = D(() => {
-    const E = Wt.current, G = N.current;
-    E !== G && G > E && nt(E, G);
+    const E = Wt.current, X = N.current;
+    E !== X && X > E && nt(E, X);
   }, [nt]), pr = D(() => {
     nt(0, 0);
   }, [nt]);
@@ -5762,22 +5762,22 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
   }, [se]), J(() => {
     et.current = Z;
   }, [Z]), J(() => {
-    Wt.current = X, N.current = Q;
-  }, [X, Q]), J(() => {
-    if (!me.current || !_.length) return;
-    const E = me.current, G = tt.current, Y = Be;
-    if (G === Y) return;
-    const ue = l.show ? l.width : 0, H = E.clientWidth, Xe = E.scrollLeft + H / 2 - ue, ge = _[0].sampleRate, Ee = Xe * G / ge * ge / Y, Oe = Math.max(0, Ee + ue - H / 2);
-    E.scrollLeft = Oe, tt.current = Y;
-  }, [Be, _, l]);
+    Wt.current = G, N.current = Q;
+  }, [G, Q]), J(() => {
+    if (!pe.current || !_.length) return;
+    const E = pe.current, X = tt.current, K = Me;
+    if (X === K) return;
+    const ue = l.show ? l.width : 0, H = E.clientWidth, Xe = E.scrollLeft + H / 2 - ue, ge = _[0].sampleRate, Ee = Xe * X / ge * ge / K, Oe = Math.max(0, Ee + ue - H / 2);
+    E.scrollLeft = Oe, tt.current = K;
+  }, [Me, _, l]);
   const vt = R(null);
   J(() => {
     if (e.length === 0) {
-      T([]), M(0), O([]), P([]), F.current && (F.current.dispose(), F.current = null);
+      T([]), M(0), Y([]), P([]), F.current && (F.current.dispose(), F.current = null);
       return;
     }
-    const E = y, G = be.current;
-    return F.current && E && (F.current.stop(), pe.current && (cancelAnimationFrame(pe.current), pe.current = null), vt.current = { position: G }), (async () => {
+    const E = y, X = we.current;
+    return F.current && E && (F.current.stop(), he.current && (cancelAnimationFrame(he.current), he.current = null), vt.current = { position: X }), (async () => {
       try {
         const ue = [];
         e.forEach((ge) => {
@@ -5789,7 +5789,7 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
             const Ee = Ie.sampleRate, wt = (Ie.startSample + Ie.durationSamples) / Ee;
             H = Math.max(H, wt);
           });
-        }), T(ue), M(H), O((ge) => ge.length === e.length ? ge.map((Ie, Ee) => ({
+        }), T(ue), M(H), Y((ge) => ge.length === e.length ? ge.map((Ie, Ee) => ({
           ...Ie,
           name: e[Ee].name
         })) : e.map((Ie) => ({
@@ -5799,7 +5799,7 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
           volume: Ie.volume,
           pan: Ie.pan
         }))), F.current && F.current.dispose();
-        const Ce = new va({
+        const xe = new va({
           effects: u
         }), Xe = et.current;
         e.forEach((ge, Ie) => {
@@ -5829,28 +5829,28 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
                 gain: We.gain
               };
             });
-            Ce.addTrack({
+            xe.addTrack({
               clips: Tr,
               track: Dr,
               effects: ge.effects
               // Pass track effects
             });
           }
-        }), Ce.applyInitialSoloState(), F.current = Ce, g?.();
+        }), xe.applyInitialSoloState(), F.current = xe, g?.();
       } catch (ue) {
         console.error("Error loading audio:", ue);
       }
     })(), () => {
-      pe.current && cancelAnimationFrame(pe.current), F.current && F.current.dispose();
+      he.current && cancelAnimationFrame(he.current), F.current && F.current.dispose();
     };
   }, [e, g, y]), J(() => {
     if (e.length === 0) return;
-    const E = 16, G = e.map((Y) => Y.clips.map((H) => {
+    const E = 16, X = e.map((K) => K.clips.map((H) => {
       if (H.waveformData) {
         const Xe = Qn(
           H.waveformData,
           // Cast to WaveformData type
-          Be,
+          Me,
           0,
           // channel index
           H.offsetSamples,
@@ -5858,7 +5858,7 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
         );
         return {
           clipId: H.id,
-          trackName: Y.name,
+          trackName: K.name,
           peaks: {
             length: Xe.length,
             data: [Xe.data],
@@ -5874,7 +5874,7 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
       if (!H.audioBuffer)
         return console.warn(`Clip "${H.name || H.id}" has neither waveformData nor audioBuffer - rendering empty`), {
           clipId: H.id,
-          trackName: Y.name,
+          trackName: K.name,
           peaks: {
             length: 0,
             data: [],
@@ -5885,9 +5885,9 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
           fadeIn: H.fadeIn,
           fadeOut: H.fadeOut
         };
-      const Ce = Mo(
+      const xe = Mo(
         H.audioBuffer,
-        Be,
+        Me,
         n,
         E,
         H.offsetSamples,
@@ -5895,160 +5895,152 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
       );
       return {
         clipId: H.id,
-        trackName: Y.name,
-        peaks: Ce,
+        trackName: K.name,
+        peaks: xe,
         startSample: H.startSample,
         durationSamples: H.durationSamples,
         fadeIn: H.fadeIn,
         fadeOut: H.fadeOut
       };
     }));
-    P(G);
-  }, [e, Be, n]), J(() => {
+    P(X);
+  }, [e, Me, n]), J(() => {
     if (c?.annotations) {
-      const E = c.annotations.map((G) => typeof G.start == "number" ? G : qn(G));
+      const E = c.annotations.map((X) => typeof X.start == "number" ? X : qn(X));
       v(E);
     }
   }, [c]);
   const rt = D(() => {
-    pe.current && (cancelAnimationFrame(pe.current), pe.current = null);
+    he.current && (cancelAnimationFrame(he.current), he.current = null);
     const E = () => {
-      const G = Ae().currentTime - j.current, Y = ee.current + G;
-      if (be.current = Y, A(Y), x.length > 0) {
+      const X = Ae().currentTime - j.current, K = te.current + X;
+      if (we.current = K, k(K), x.length > 0) {
         const H = x.find(
-          (Ce) => Y >= Ce.start && Y < Ce.end
+          (xe) => K >= xe.start && K < xe.end
         );
-        if (Je.current) {
-          if (H && H.id !== Le.current)
-            ze(H.id);
-          else if (!H && Le.current !== null) {
-            const Ce = x[x.length - 1];
-            if (Y >= Ce.end) {
-              F.current && F.current.stop(), k(!1), be.current = Se.current, A(Se.current), ze(null);
-              return;
-            }
-          }
-        } else if (Le.current) {
-          const Ce = x.find((Xe) => Xe.id === Le.current);
-          if (Ce && Y >= Ce.end) {
-            F.current && F.current.stop(), k(!1), be.current = Se.current, A(Se.current);
+        if (Je.current)
+          H && H.id !== Le.current ? ze(H.id) : !H && Le.current !== null && ze(null);
+        else if (Le.current) {
+          const xe = x.find((Xe) => Xe.id === Le.current);
+          if (xe && K >= xe.end) {
+            F.current && F.current.stop(), A(!1), we.current = Te.current, k(Te.current);
             return;
           }
         } else
           H && ze(H.id);
       }
-      if (je.current && me.current && _.length > 0) {
-        const H = me.current, Ce = _[0].sampleRate, Xe = Y * Ce / tt.current, ge = H.clientWidth, Ie = l.show ? l.width : 0, Ee = Xe + Ie, Oe = Math.max(0, Ee - ge / 2);
+      if (je.current && pe.current && _.length > 0) {
+        const H = pe.current, xe = _[0].sampleRate, Xe = K * xe / tt.current, ge = H.clientWidth, Ie = l.show ? l.width : 0, Ee = Xe + Ie, Oe = Math.max(0, Ee - ge / 2);
         H.scrollLeft = Oe;
       }
-      if (de.current !== null && Y >= de.current) {
-        F.current && F.current.stop(), k(!1), be.current = de.current, A(de.current), de.current = null;
+      if (de.current !== null && K >= de.current) {
+        F.current && F.current.stop(), A(!1), we.current = de.current, k(de.current), de.current = null;
         return;
       }
       const ue = U.current !== ce.current && ce.current > U.current;
-      if (bt.current && ue && Y >= ce.current) {
+      if (bt.current && ue && K >= ce.current) {
         F.current?.stop();
-        const Ce = Ae().currentTime;
-        j.current = Ce, ee.current = U.current, be.current = U.current, F.current?.play(Ce, U.current), pe.current = requestAnimationFrame(E);
+        const xe = Ae().currentTime;
+        j.current = xe, te.current = U.current, we.current = U.current, F.current?.play(xe, U.current), he.current = requestAnimationFrame(E);
         return;
       }
-      if (Y >= B) {
-        F.current && F.current.stop(), k(!1), be.current = Se.current, A(Se.current), ze(null);
+      if (K >= B) {
+        F.current && F.current.stop(), A(!1), we.current = Te.current, k(Te.current), ze(null);
         return;
       }
-      pe.current = requestAnimationFrame(E);
+      he.current = requestAnimationFrame(E);
     };
-    pe.current = requestAnimationFrame(E);
-  }, [B, _, Be, x, we]), He = D(() => {
-    pe.current && (cancelAnimationFrame(pe.current), pe.current = null);
+    he.current = requestAnimationFrame(E);
+  }, [B, _, Me, x, ve]), He = D(() => {
+    he.current && (cancelAnimationFrame(he.current), he.current = null);
   }, []);
   J(() => {
     (async () => {
-      if (y && pe.current && F.current)
-        if (we) {
-          const G = be.current;
+      if (y && he.current && F.current)
+        if (ve) {
+          const X = we.current;
           F.current.stop(), He(), await F.current.init(), F.current.setOnPlaybackComplete(() => {
           });
           const ue = Ae().currentTime;
-          j.current = ue, ee.current = G, F.current.play(ue, G), rt();
+          j.current = ue, te.current = X, F.current.play(ue, X), rt();
         } else
           He(), rt();
     })();
-  }, [we, y, rt, He]), J(() => {
+  }, [ve, y, rt, He]), J(() => {
     (async () => {
       if (vt.current && F.current) {
-        const { position: G } = vt.current;
+        const { position: X } = vt.current;
         vt.current = null, await F.current.init(), F.current.setOnPlaybackComplete(() => {
         });
         const ue = Ae().currentTime;
-        j.current = ue, ee.current = G, F.current.play(ue, G), k(!0), rt();
+        j.current = ue, te.current = X, F.current.play(ue, X), A(!0), rt();
       }
     })();
   }, [e, rt]);
-  const _t = D(async (E, G) => {
+  const _t = D(async (E, X) => {
     if (!F.current || _.length === 0) return;
     await F.current.init(), await Sn();
-    const Y = E ?? be.current;
-    Se.current = Y, be.current = Y, F.current.setOnPlaybackComplete(() => {
+    const K = E ?? we.current;
+    Te.current = K, we.current = K, F.current.setOnPlaybackComplete(() => {
     }), F.current.stop(), He();
     const H = Ae().currentTime;
-    j.current = H, ee.current = Y, de.current = G !== void 0 ? Y + G : null, F.current.play(H, Y, G), k(!0), rt();
+    j.current = H, te.current = K, de.current = X !== void 0 ? K + X : null, F.current.play(H, K, X), A(!0), rt();
   }, [_.length, rt, He]), gr = D(() => {
     if (!F.current) return;
-    const E = Ae().currentTime - j.current, G = ee.current + E;
-    F.current.pause(), k(!1), He(), be.current = G, A(G);
+    const E = Ae().currentTime - j.current, X = te.current + E;
+    F.current.pause(), A(!1), He(), we.current = X, k(X);
   }, [He]), br = D(() => {
-    F.current && (F.current.stop(), k(!1), He(), be.current = Se.current, A(Se.current), ze(null));
+    F.current && (F.current.stop(), A(!1), He(), we.current = Te.current, k(Te.current), ze(null));
   }, [He]), vr = D((E) => {
-    const G = Math.max(0, Math.min(E, B));
-    be.current = G, A(G), y && F.current && (F.current.stop(), He(), _t(G));
-  }, [B, y, _t, He]), wr = D((E, G) => {
-    const Y = [...Z];
-    if (Y[E] = { ...Y[E], muted: G }, O(Y), F.current) {
+    const X = Math.max(0, Math.min(E, B));
+    we.current = X, k(X), y && F.current && (F.current.stop(), He(), _t(X));
+  }, [B, y, _t, He]), wr = D((E, X) => {
+    const K = [...Z];
+    if (K[E] = { ...K[E], muted: X }, Y(K), F.current) {
       const ue = `track-${E}`;
-      F.current.setMute(ue, G);
+      F.current.setMute(ue, X);
     }
-  }, [Z]), Cr = D((E, G) => {
-    const Y = [...Z];
-    if (Y[E] = { ...Y[E], soloed: G }, O(Y), F.current) {
+  }, [Z]), Cr = D((E, X) => {
+    const K = [...Z];
+    if (K[E] = { ...K[E], soloed: X }, Y(K), F.current) {
       const ue = `track-${E}`;
-      F.current.setSolo(ue, G);
+      F.current.setSolo(ue, X);
     }
-  }, [Z]), yr = D((E, G) => {
-    const Y = [...Z];
-    if (Y[E] = { ...Y[E], volume: G }, O(Y), F.current) {
+  }, [Z]), yr = D((E, X) => {
+    const K = [...Z];
+    if (K[E] = { ...K[E], volume: X }, Y(K), F.current) {
       const ue = `track-${E}`, H = F.current.getTrack(ue);
-      H && H.setVolume(G);
+      H && H.setVolume(X);
     }
-  }, [Z]), xr = D((E, G) => {
-    const Y = [...Z];
-    if (Y[E] = { ...Y[E], pan: G }, O(Y), F.current) {
+  }, [Z]), xr = D((E, X) => {
+    const K = [...Z];
+    if (K[E] = { ...K[E], pan: X }, Y(K), F.current) {
       const ue = `track-${E}`, H = F.current.getTrack(ue);
-      H && H.setPan(G);
+      H && H.setPan(X);
     }
-  }, [Z]), Ir = D((E, G) => {
-    V(E), ie(G), be.current = E, A(E), y && F.current && (F.current.stop(), F.current.play(Ae().currentTime, E));
+  }, [Z]), Ir = D((E, X) => {
+    V(E), ie(X), we.current = E, k(E), y && F.current && (F.current.stop(), F.current.play(Ae().currentTime, E));
   }, [y]), Ar = D((E) => {
-    me.current = E;
+    pe.current = E;
   }, []), kr = _[0]?.sampleRate || 44100, Qt = t ? 30 : 0, Sr = e.length * r + Qt, qt = {
     isPlaying: y,
     currentTime: $,
-    currentTimeRef: be,
+    currentTimeRef: we,
     playbackStartTimeRef: j,
-    audioStartPositionRef: ee
+    audioStartPositionRef: te
   }, en = {
-    continuousPlay: we,
+    continuousPlay: ve,
     linkEndpoints: Ne,
     annotationsEditable: Ue,
     isAutomaticScroll: se,
-    isLoopEnabled: fe,
+    isLoopEnabled: me,
     annotations: x,
     activeAnnotationId: f,
-    selectionStart: X,
+    selectionStart: G,
     selectionEnd: Q,
     selectedTrackId: oe,
     loopStart: q,
-    loopEnd: xe
+    loopEnd: ye
   }, tn = {
     // Playback controls
     play: _t,
@@ -6056,7 +6048,7 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
     stop: br,
     seekTo: vr,
     setCurrentTime: (E) => {
-      be.current = E, A(E);
+      we.current = E, k(E);
     },
     // Track controls
     setTrackMute: wr,
@@ -6065,9 +6057,9 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
     setTrackPan: xr,
     // Selection
     setSelection: Ir,
-    setSelectedTrackId: te,
+    setSelectedTrackId: ee,
     // Time format
-    setTimeFormat: Me,
+    setTimeFormat: $e,
     formatTime: Pe,
     // Zoom
     zoomIn: le.zoomIn,
@@ -6076,14 +6068,14 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
     setMasterVolume: Qe,
     // Automatic scroll
     setAutomaticScroll: (E) => {
-      ye(E);
+      Ce(E);
     },
     setScrollContainer: Ar,
-    scrollContainerRef: me,
+    scrollContainerRef: pe,
     // Annotation controls
     setContinuousPlay: qe,
     setLinkEndpoints: ke,
-    setAnnotationsEditable: K,
+    setAnnotationsEditable: O,
     setAnnotations: v,
     setActiveAnnotationId: ze,
     // Loop controls
@@ -6103,8 +6095,8 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
     minimumPlaylistHeight: Sr,
     controls: l,
     playoutRef: F,
-    samplesPerPixel: Be,
-    timeFormat: $e,
+    samplesPerPixel: Me,
+    timeFormat: Se,
     masterVolume: Ye,
     canZoomIn: le.canZoomIn,
     canZoomOut: le.canZoomOut,
@@ -6128,12 +6120,12 @@ const or = De(null), sr = De(null), ir = De(null), lr = De(null), cr = De(null),
   if (!e)
     throw new Error("usePlaylistState must be used within WaveformPlaylistProvider");
   return e;
-}, ve = () => {
+}, be = () => {
   const e = Re(ir);
   if (!e)
     throw new Error("usePlaylistControls must be used within WaveformPlaylistProvider");
   return e;
-}, Te = () => {
+}, De = () => {
   const e = Re(lr);
   if (!e)
     throw new Error("usePlaylistData must be used within WaveformPlaylistProvider");
@@ -6385,7 +6377,7 @@ var Gs = class {
     return this.track?.peaks.sample_rate ?? 44100;
   }
 };
-const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
+const ur = Be(null), dr = Be(null), mr = Be(null), fr = Be(null), Ri = ({
   track: e,
   samplesPerPixel: t = 1024,
   waveHeight: n = 100,
@@ -6401,20 +6393,20 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
   onReady: h,
   children: d
 }) => {
-  const b = g ?? c + u, [C, m] = W(!1), [p, x] = W(0), [v, f] = W(0), [w, y] = W([]), [k, $] = W(a), [A, B] = W([]), [M, _] = W(null), [T, z] = W(
+  const b = g ?? c + u, [C, m] = W(!1), [p, x] = W(0), [v, f] = W(0), [w, y] = W([]), [A, $] = W(a), [k, B] = W([]), [M, _] = W(null), [T, z] = W(
     l?.isContinuousPlay ?? !1
-  ), [P] = W(t), [Z, O] = W(s), X = R(null), V = R(0), Q = R(null), ie = R(T), oe = R(null), te = R(null), se = R(s), ye = R(t);
+  ), [P] = W(t), [Z, Y] = W(s), G = R(null), V = R(0), Q = R(null), ie = R(T), oe = R(null), ee = R(null), se = R(s), Ce = R(t);
   J(() => {
     ie.current = T;
   }, [T]), J(() => {
     se.current = Z;
   }, [Z]);
-  const we = D((j) => {
+  const ve = D((j) => {
     oe.current = j, _(j);
   }, []), Ke = D((j) => {
     ie.current = j, z(j);
   }, []), Ne = D((j) => {
-    te.current = j;
+    ee.current = j;
   }, []), ke = e.waveformData.sample_rate;
   J(() => {
     const j = new Ns({
@@ -6425,12 +6417,12 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
       peaks: e.waveformData,
       name: e.name
     });
-    const ee = j.getTrack(j.track?.id ?? "");
-    return ee && ee.setOnTimeUpdateCallback((de) => {
+    const te = j.getTrack(j.track?.id ?? "");
+    return te && te.setOnTimeUpdateCallback((de) => {
       V.current = de;
     }), j.setOnPlaybackComplete(() => {
       m(!1);
-    }), X.current = j, f(e.waveformData.duration), h?.(), () => {
+    }), G.current = j, f(e.waveformData.duration), h?.(), () => {
       Q.current && cancelAnimationFrame(Q.current), j.dispose();
     };
   }, [e.source, e.waveformData, e.name, a, h]), J(() => {
@@ -6443,7 +6435,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
       // offset
       Math.ceil(e.waveformData.duration * ke)
       // duration in samples
-    ), ee = {
+    ), te = {
       clipId: "media-element-clip",
       trackName: e.name ?? "Track",
       peaks: {
@@ -6454,74 +6446,66 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
       startSample: 0,
       durationSamples: Math.ceil(e.waveformData.duration * ke)
     };
-    y([[ee]]);
+    y([[te]]);
   }, [e.waveformData, e.name, P, ke]), J(() => {
     if (l?.annotations) {
-      const j = l.annotations.map((ee) => typeof ee.start == "number" ? ee : qn(ee));
+      const j = l.annotations.map((te) => typeof te.start == "number" ? te : qn(te));
       B(j);
     }
   }, [l]);
   const Ue = D(() => {
     Q.current && cancelAnimationFrame(Q.current);
     const j = () => {
-      const ee = X.current?.getCurrentTime() ?? 0;
-      if (V.current = ee, x(ee), A.length > 0) {
-        const de = A.find(
-          (me) => ee >= me.start && ee < me.end
+      const te = G.current?.getCurrentTime() ?? 0;
+      if (V.current = te, x(te), k.length > 0) {
+        const de = k.find(
+          (pe) => te >= pe.start && te < pe.end
         );
-        if (ie.current) {
-          if (de && de.id !== oe.current)
-            we(de.id);
-          else if (!de && oe.current !== null) {
-            const me = A[A.length - 1];
-            if (ee >= me.end) {
-              X.current?.stop(), m(!1), we(null);
-              return;
-            }
-          }
-        } else if (oe.current) {
-          const me = A.find(
+        if (ie.current)
+          de && de.id !== oe.current ? ve(de.id) : !de && oe.current !== null && ve(null);
+        else if (oe.current) {
+          const pe = k.find(
             (je) => je.id === oe.current
           );
-          if (me && ee >= me.end) {
-            X.current?.stop(), m(!1);
+          if (pe && te >= pe.end) {
+            G.current?.stop(), m(!1);
             return;
           }
-        } else de && we(de.id);
+        } else de && ve(de.id);
       }
-      if (se.current && te.current) {
-        const de = te.current, me = ee * ke / ye.current, je = de.clientWidth, Je = i.show ? i.width : 0, Le = me + Je, tt = Math.max(0, Le - je / 2);
+      if (se.current && ee.current) {
+        const de = ee.current, pe = te * ke / Ce.current, je = de.clientWidth, Je = i.show ? i.width : 0, Le = pe + Je, tt = Math.max(0, Le - je / 2);
         de.scrollLeft = tt;
       }
-      if (ee >= v) {
-        X.current?.stop(), m(!1), we(null);
+      if (te >= v) {
+        G.current?.stop(), m(!1), ve(null);
         return;
       }
       Q.current = requestAnimationFrame(j);
     };
     Q.current = requestAnimationFrame(j);
-  }, [v, A, we, ke, i]), K = D(() => {
+  }, [v, k, ve, ke, i]), O = D(() => {
     Q.current && (cancelAnimationFrame(Q.current), Q.current = null);
-  }, []), fe = D(
+  }, []), me = D(
     (j) => {
-      if (!X.current) return;
-      const ee = j ?? V.current;
-      X.current.play(void 0, ee), m(!0), Ue();
+      if (!G.current) return;
+      const te = j ?? V.current;
+      G.current.play(void 0, te), m(!0), Ue();
     },
     [Ue]
   ), re = D(() => {
-    X.current && (X.current.pause(), m(!1), K(), x(X.current.getCurrentTime()));
-  }, [K]), q = D(() => {
-    X.current && (X.current.stop(), m(!1), K(), V.current = 0, x(0), we(null));
-  }, [K, we]), he = D(
+    G.current && (G.current.pause(), m(!1), O(), x(G.current.getCurrentTime()));
+  }, [O]), q = D(() => {
+    G.current && (G.current.stop(), m(!1), O(), V.current = 0, x(0), ve(null));
+  }, [O, ve]), fe = D(
     (j) => {
-      const ee = Math.max(0, Math.min(j, v));
-      V.current = ee, x(ee), X.current && X.current.seekTo(ee);
+      const te = Math.max(0, Math.min(j, v));
+      V.current = te, x(te), G.current && G.current.seekTo(te);
     },
     [v]
-  ), xe = D((j) => {
-    const ee = Math.max(0.5, Math.min(2, j));
-    $(ee), X.current && X.current.setPlaybackRate(ee);
+  ), ye = D((j) => {
+    const te = Math.max(0.5, Math.min(2, j));
+    $(te), G.current && G.current.setPlaybackRate(te);
   }, []), ae = r ? 30 : 0, F = at(
     () => ({
       isPlaying: C,
@@ -6529,33 +6513,33 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
       currentTimeRef: V
     }),
     [C, p]
-  ), Se = at(
+  ), Te = at(
     () => ({
       continuousPlay: T,
-      annotations: A,
+      annotations: k,
       activeAnnotationId: M,
-      playbackRate: k,
+      playbackRate: A,
       isAutomaticScroll: Z
     }),
-    [T, A, M, k, Z]
-  ), be = at(
+    [T, k, M, A, Z]
+  ), we = at(
     () => ({
-      play: fe,
+      play: me,
       pause: re,
       stop: q,
-      seekTo: he,
-      setPlaybackRate: xe,
+      seekTo: fe,
+      setPlaybackRate: ye,
       setContinuousPlay: Ke,
       setAnnotations: B,
-      setActiveAnnotationId: we,
+      setActiveAnnotationId: ve,
       setAutomaticScroll: (j) => {
-        O(j);
+        Y(j);
       },
       setScrollContainer: Ne,
-      scrollContainerRef: te
+      scrollContainerRef: ee
     }),
-    [fe, re, q, he, xe, Ke, we, Ne]
-  ), pe = at(
+    [me, re, q, fe, ye, Ke, ve, Ne]
+  ), he = at(
     () => ({
       duration: v,
       peaksDataArray: w,
@@ -6563,7 +6547,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
       waveHeight: n,
       timeScaleHeight: ae,
       samplesPerPixel: P,
-      playoutRef: X,
+      playoutRef: G,
       controls: i,
       barWidth: c,
       barGap: u,
@@ -6582,7 +6566,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
       b
     ]
   ), et = { ...Zn, ...o };
-  return /* @__PURE__ */ I(Bn, { theme: et, children: /* @__PURE__ */ I(ur.Provider, { value: F, children: /* @__PURE__ */ I(dr.Provider, { value: Se, children: /* @__PURE__ */ I(mr.Provider, { value: be, children: /* @__PURE__ */ I(fr.Provider, { value: pe, children: d }) }) }) }) });
+  return /* @__PURE__ */ I(Bn, { theme: et, children: /* @__PURE__ */ I(ur.Provider, { value: F, children: /* @__PURE__ */ I(dr.Provider, { value: Te, children: /* @__PURE__ */ I(mr.Provider, { value: we, children: /* @__PURE__ */ I(fr.Provider, { value: he, children: d }) }) }) }) });
 }, jt = () => {
   const e = Re(ur);
   if (!e)
@@ -6612,7 +6596,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     );
   return e;
 }, Ei = ({ className: e }) => {
-  const { isPlaying: t, currentTimeRef: n } = Fe(), { selectionStart: r, selectionEnd: a, isLoopEnabled: s } = Ge(), { play: o } = ve();
+  const { isPlaying: t, currentTimeRef: n } = Fe(), { selectionStart: r, selectionEnd: a, isLoopEnabled: s } = Ge(), { play: o } = be();
   return /* @__PURE__ */ I(Ve, { onClick: async () => {
     if (r !== a && a > r)
       if (s)
@@ -6625,18 +6609,18 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
       await o(n.current ?? 0);
   }, disabled: t, className: e, children: "Play" });
 }, Wi = ({ className: e }) => {
-  const { isPlaying: t } = Fe(), { pause: n } = ve();
+  const { isPlaying: t } = Fe(), { pause: n } = be();
   return /* @__PURE__ */ I(Ve, { onClick: n, disabled: !t, className: e, children: "Pause" });
 }, _i = ({ className: e }) => {
-  const { isPlaying: t } = Fe(), { stop: n } = ve();
+  const { isPlaying: t } = Fe(), { stop: n } = be();
   return /* @__PURE__ */ I(Ve, { onClick: n, disabled: !t, className: e, children: "Stop" });
 }, Fi = ({ className: e }) => {
-  const { isPlaying: t } = Fe(), { play: n, setCurrentTime: r } = ve(), { playoutRef: a } = Te();
+  const { isPlaying: t } = Fe(), { play: n, setCurrentTime: r } = be(), { playoutRef: a } = De();
   return /* @__PURE__ */ I(Ve, { onClick: () => {
     r(0), t && a.current && (a.current.stop(), n(0));
   }, className: e, children: "Rewind" });
 }, Zi = ({ className: e }) => {
-  const { isPlaying: t } = Fe(), { play: n, setCurrentTime: r } = ve(), { duration: a, playoutRef: s } = Te();
+  const { isPlaying: t } = Fe(), { play: n, setCurrentTime: r } = be(), { duration: a, playoutRef: s } = De();
   return /* @__PURE__ */ I(Ve, { onClick: () => {
     r(a), t && s.current && (s.current.stop(), n(a));
   }, className: e, children: "Fast Forward" });
@@ -6644,7 +6628,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
   skipAmount: e = 5,
   className: t
 }) => {
-  const { currentTimeRef: n, isPlaying: r } = Fe(), { play: a, setCurrentTime: s } = ve(), { playoutRef: o } = Te();
+  const { currentTimeRef: n, isPlaying: r } = Fe(), { play: a, setCurrentTime: s } = be(), { playoutRef: o } = De();
   return /* @__PURE__ */ I(Ve, { onClick: () => {
     const l = Math.max(0, (n.current ?? 0) - e);
     s(l), r && o.current && (o.current.stop(), a(l));
@@ -6653,13 +6637,13 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
   skipAmount: e = 5,
   className: t
 }) => {
-  const { currentTimeRef: n, isPlaying: r } = Fe(), { play: a, setCurrentTime: s } = ve(), { duration: o, playoutRef: i } = Te();
+  const { currentTimeRef: n, isPlaying: r } = Fe(), { play: a, setCurrentTime: s } = be(), { duration: o, playoutRef: i } = De();
   return /* @__PURE__ */ I(Ve, { onClick: () => {
     const c = Math.min(o, (n.current ?? 0) + e);
     s(c), r && i.current && (i.current.stop(), a(c));
   }, className: t, children: "Skip Forward" });
 }, zi = ({ className: e }) => {
-  const { isLoopEnabled: t, loopStart: n, loopEnd: r } = Ge(), { setLoopEnabled: a, setLoopRegion: s } = ve(), { duration: o } = Te(), i = n !== r && r > n;
+  const { isLoopEnabled: t, loopStart: n, loopEnd: r } = Ge(), { setLoopEnabled: a, setLoopRegion: s } = be(), { duration: o } = De(), i = n !== r && r > n;
   return /* @__PURE__ */ I(
     Ve,
     {
@@ -6676,7 +6660,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     }
   );
 }, Hi = ({ className: e }) => {
-  const { selectionStart: t, selectionEnd: n, loopStart: r, loopEnd: a } = Ge(), { setLoopRegionFromSelection: s, clearLoopRegion: o } = ve(), i = t !== n && n > t, l = r !== a && a > r;
+  const { selectionStart: t, selectionEnd: n, loopStart: r, loopEnd: a } = Ge(), { setLoopRegionFromSelection: s, clearLoopRegion: o } = be(), i = t !== n && n > t, l = r !== a && a > r;
   return /* @__PURE__ */ I(
     Ve,
     {
@@ -6690,13 +6674,13 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     }
   );
 }, Xi = ({ className: e, disabled: t }) => {
-  const { zoomIn: n } = ve(), { canZoomIn: r } = Te();
+  const { zoomIn: n } = be(), { canZoomIn: r } = De();
   return /* @__PURE__ */ I(Ve, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom In" });
 }, Gi = ({ className: e, disabled: t }) => {
-  const { zoomOut: n } = ve(), { canZoomOut: r } = Te();
+  const { zoomOut: n } = be(), { canZoomOut: r } = De();
   return /* @__PURE__ */ I(Ve, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom Out" });
 }, Ni = ({ className: e }) => {
-  const { masterVolume: t } = Te(), { setMasterVolume: n } = ve();
+  const { masterVolume: t } = De(), { setMasterVolume: n } = be();
   return /* @__PURE__ */ I(
     Ga,
     {
@@ -6706,7 +6690,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     }
   );
 }, Li = ({ className: e }) => {
-  const { timeFormat: t } = Te(), { setTimeFormat: n } = ve();
+  const { timeFormat: t } = De(), { setTimeFormat: n } = be();
   return /* @__PURE__ */ I(
     go,
     {
@@ -6722,7 +6706,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
   color: ${(e) => e.theme?.textColor || "#333"};
   user-select: none;
 `, Yi = ({ className: e }) => {
-  const t = R(null), n = R(null), { isPlaying: r, currentTimeRef: a, playbackStartTimeRef: s, audioStartPositionRef: o } = Fe(), { timeFormat: i } = Te(), l = i;
+  const t = R(null), n = R(null), { isPlaying: r, currentTimeRef: a, playbackStartTimeRef: s, audioStartPositionRef: o } = Fe(), { timeFormat: i } = De(), l = i;
   return J(() => {
     const c = () => {
       if (t.current) {
@@ -6743,7 +6727,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     !r && t.current && (t.current.textContent = ut(a.current ?? 0, l));
   }), /* @__PURE__ */ I(Os, { ref: t, className: e, "aria-label": "Audio position", children: ut(a.current ?? 0, l) });
 }, Oi = ({ className: e }) => {
-  const { selectionStart: t, selectionEnd: n } = Ge(), { setSelection: r } = ve();
+  const { selectionStart: t, selectionEnd: n } = Ge(), { setSelection: r } = be();
   return /* @__PURE__ */ I(
     eo,
     {
@@ -6754,7 +6738,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     }
   );
 }, Ki = ({ className: e }) => {
-  const { isAutomaticScroll: t } = Ge(), { setAutomaticScroll: n } = ve();
+  const { isAutomaticScroll: t } = Ge(), { setAutomaticScroll: n } = be();
   return /* @__PURE__ */ I(
     Aa,
     {
@@ -6764,7 +6748,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     }
   );
 }, Ui = ({ className: e }) => {
-  const { continuousPlay: t } = Ge(), { setContinuousPlay: n } = ve();
+  const { continuousPlay: t } = Ge(), { setContinuousPlay: n } = be();
   return /* @__PURE__ */ I(
     cs,
     {
@@ -6774,7 +6758,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     }
   );
 }, ji = ({ className: e }) => {
-  const { linkEndpoints: t } = Ge(), { setLinkEndpoints: n } = ve();
+  const { linkEndpoints: t } = Ge(), { setLinkEndpoints: n } = be();
   return /* @__PURE__ */ I(
     us,
     {
@@ -6784,7 +6768,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     }
   );
 }, Ji = ({ className: e }) => {
-  const { annotationsEditable: t } = Ge(), { setAnnotationsEditable: n } = ve();
+  const { annotationsEditable: t } = Ge(), { setAnnotationsEditable: n } = be();
   return /* @__PURE__ */ I(
     ds,
     {
@@ -6819,7 +6803,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
   onExportComplete: c,
   onExportError: u
 }) => {
-  const { tracks: g, trackStates: h } = Te(), { exportWav: d, isExporting: b, progress: C } = Ps(), m = async () => {
+  const { tracks: g, trackStates: h } = De(), { exportWav: d, isExporting: b, progress: C } = Ps(), m = async () => {
     try {
       const x = await d(g, h, {
         filename: t,
@@ -6859,7 +6843,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
   color: e = "#ff0000",
   controlsOffset: t = 0
 }) => {
-  const n = R(null), r = R(null), { isPlaying: a, currentTimeRef: s, playbackStartTimeRef: o, audioStartPositionRef: i } = Fe(), { samplesPerPixel: l, sampleRate: c, progressBarWidth: u } = Te();
+  const n = R(null), r = R(null), { isPlaying: a, currentTimeRef: s, playbackStartTimeRef: o, audioStartPositionRef: i } = Fe(), { samplesPerPixel: l, sampleRate: c, progressBarWidth: u } = De();
   return J(() => {
     const g = () => {
       if (n.current) {
@@ -6914,7 +6898,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
   clipDurationSamples: t,
   ...n
 }) => {
-  const r = R(null), a = R(null), s = gt(), { waveHeight: o } = pt(), { isPlaying: i, currentTimeRef: l, playbackStartTimeRef: c, audioStartPositionRef: u } = Fe(), { samplesPerPixel: g, sampleRate: h } = Te(), d = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
+  const r = R(null), a = R(null), s = gt(), { waveHeight: o } = pt(), { isPlaying: i, currentTimeRef: l, playbackStartTimeRef: c, audioStartPositionRef: u } = Fe(), { samplesPerPixel: g, sampleRate: h } = De(), d = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
   J(() => {
     const p = () => {
       if (r.current) {
@@ -7002,9 +6986,9 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
   const m = gt(), { isPlaying: p, currentTimeRef: x, playbackStartTimeRef: v, audioStartPositionRef: f } = Fe(), {
     selectionStart: w,
     selectionEnd: y,
-    annotations: k,
+    annotations: A,
     activeAnnotationId: $,
-    annotationsEditable: A,
+    annotationsEditable: k,
     linkEndpoints: B,
     continuousPlay: M,
     selectedTrackId: _,
@@ -7013,83 +6997,83 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     isLoopEnabled: P
   } = Ge(), {
     setAnnotations: Z,
-    setActiveAnnotationId: O,
-    setTrackMute: X,
+    setActiveAnnotationId: Y,
+    setTrackMute: G,
     setTrackSolo: V,
     setTrackVolume: Q,
     setTrackPan: ie,
     setSelection: oe,
-    play: te,
+    play: ee,
     setScrollContainer: se,
-    setSelectedTrackId: ye,
-    setCurrentTime: we,
+    setSelectedTrackId: Ce,
+    setCurrentTime: ve,
     setLoopRegion: Ke
-  } = ve(), {
+  } = be(), {
     audioBuffers: Ne,
     peaksDataArray: ke,
     trackStates: Ue,
-    tracks: K,
-    duration: fe,
+    tracks: O,
+    duration: me,
     samplesPerPixel: re,
     sampleRate: q,
-    waveHeight: he,
-    timeScaleHeight: xe,
+    waveHeight: fe,
+    timeScaleHeight: ye,
     controls: ae,
     playoutRef: F,
-    barWidth: Se,
-    barGap: be
-  } = Te(), [pe, et] = W(!1), j = R(null), ee = D((N) => {
+    barWidth: Te,
+    barGap: we
+  } = De(), [he, et] = W(!1), j = R(null), te = D((N) => {
     j.current = N, se(N);
   }, [se]);
-  let de = Ne.length > 0 ? fe : ei;
+  let de = Ne.length > 0 ? me : ei;
   if (C?.isRecording) {
     const U = (C.startSample + C.durationSamples) / q;
     de = Math.max(de, U + 10);
   }
-  const me = Math.floor(de * q / re), je = async (N) => {
-    console.log("Annotation clicked:", N.id), O(N.id);
+  const pe = Math.floor(de * q / re), je = async (N) => {
+    console.log("Annotation clicked:", N.id), Y(N.id);
     const U = M ? void 0 : N.end - N.start;
-    await te(N.start, U);
+    await ee(N.start, U);
   }, Je = D((N) => {
-    if (N >= 0 && N < K.length) {
-      const U = K[N];
-      ye(U.id);
+    if (N >= 0 && N < O.length) {
+      const U = O[N];
+      Ce(U.id);
     }
-  }, [K, ye]), Le = (N) => {
-    const U = N.currentTarget.getBoundingClientRect(), ce = ae.show ? ae.width : 0, Me = (N.clientX - U.left - ce) * re / q, le = N.clientY - U.top;
-    let Be = 0, Ye = -1;
+  }, [O, Ce]), Le = (N) => {
+    const U = N.currentTarget.getBoundingClientRect(), ce = ae.show ? ae.width : 0, $e = (N.clientX - U.left - ce) * re / q, le = N.clientY - U.top;
+    let Me = 0, Ye = -1;
     for (let Qe = 0; Qe < ke.length; Qe++) {
-      const qe = ke[Qe], dt = (qe.length > 0 ? Math.max(...qe.map((nt) => nt.peaks.data.length)) : 1) * he + (g ? 22 : 0);
-      if (le >= Be && le < Be + dt) {
+      const qe = ke[Qe], dt = (qe.length > 0 ? Math.max(...qe.map((nt) => nt.peaks.data.length)) : 1) * fe + (g ? 22 : 0);
+      if (le >= Me && le < Me + dt) {
         Ye = Qe;
         break;
       }
-      Be += dt;
+      Me += dt;
     }
-    Ye !== -1 && Je(Ye), et(!0), we(Me), oe(Me, Me);
+    Ye !== -1 && Je(Ye), et(!0), ve($e), oe($e, $e);
   }, tt = (N) => {
-    if (!pe) return;
-    const U = N.currentTarget.getBoundingClientRect(), ce = ae.show ? ae.width : 0, Me = (N.clientX - U.left - ce) * re / q, Pe = Math.min(w, Me), le = Math.max(w, Me);
+    if (!he) return;
+    const U = N.currentTarget.getBoundingClientRect(), ce = ae.show ? ae.width : 0, $e = (N.clientX - U.left - ce) * re / q, Pe = Math.min(w, $e), le = Math.max(w, $e);
     oe(Pe, le);
   }, bt = (N) => {
-    if (!pe) return;
+    if (!he) return;
     et(!1);
-    const U = N.currentTarget.getBoundingClientRect(), ce = ae.show ? ae.width : 0, Me = (N.clientX - U.left - ce) * re / q, Pe = Math.min(w, Me), le = Math.max(w, Me);
-    Math.abs(le - Pe) < 0.1 ? (we(Pe), p && F.current ? (F.current.stop(), te(Pe)) : F.current && F.current.stop()) : oe(Pe, le);
+    const U = N.currentTarget.getBoundingClientRect(), ce = ae.show ? ae.width : 0, $e = (N.clientX - U.left - ce) * re / q, Pe = Math.min(w, $e), le = Math.max(w, $e);
+    Math.abs(le - Pe) < 0.1 ? (ve(Pe), p && F.current ? (F.current.stop(), ee(Pe)) : F.current && F.current.stop()) : oe(Pe, le);
   };
-  return K.some((N) => N.clips.length > 0) && (Ne.length === 0 || ke.length === 0) ? /* @__PURE__ */ I("div", { className: u, children: "Loading waveform..." }) : /* @__PURE__ */ I(Nn, { children: /* @__PURE__ */ ne(
+  return O.some((N) => N.clips.length > 0) && (Ne.length === 0 || ke.length === 0) ? /* @__PURE__ */ I("div", { className: u, children: "Loading waveform..." }) : /* @__PURE__ */ I(Nn, { children: /* @__PURE__ */ ne(
     Tt.Provider,
     {
       value: {
         samplesPerPixel: re,
         sampleRate: q,
         zoomLevels: [re],
-        waveHeight: he,
-        timeScaleHeight: xe,
+        waveHeight: fe,
+        timeScaleHeight: ye,
         duration: de,
         controls: ae,
-        barWidth: Se,
-        barGap: be
+        barWidth: Te,
+        barGap: we
       },
       children: [
         /* @__PURE__ */ I(
@@ -7098,16 +7082,16 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
             theme: m,
             backgroundColor: st(m.waveOutlineColor),
             timescaleBackgroundColor: m.timescaleBackgroundColor,
-            scrollContainerWidth: me + (ae.show ? ae.width : 0),
-            timescaleWidth: me,
-            tracksWidth: me,
+            scrollContainerWidth: pe + (ae.show ? ae.width : 0),
+            timescaleWidth: pe,
+            tracksWidth: pe,
             controlsWidth: ae.show ? ae.width : 0,
             onTracksMouseDown: Le,
             onTracksMouseMove: tt,
             onTracksMouseUp: bt,
-            scrollContainerRef: ee,
-            isSelecting: pe,
-            timescale: xe > 0 ? /* @__PURE__ */ ne(ot, { children: [
+            scrollContainerRef: te,
+            isSelecting: he,
+            timescale: ye > 0 ? /* @__PURE__ */ ne(ot, { children: [
               /* @__PURE__ */ I(
                 On,
                 {
@@ -7126,41 +7110,41 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
                   markerColor: m.loopMarkerColor,
                   regionColor: m.loopRegionColor,
                   minPosition: 0,
-                  maxPosition: me,
+                  maxPosition: pe,
                   controlsOffset: ae.show ? ae.width : 0,
                   onLoopRegionChange: (N, U) => {
-                    const ce = N * re / q, $e = U * re / q;
-                    Ke(ce, $e);
+                    const ce = N * re / q, Se = U * re / q;
+                    Ke(ce, Se);
                   }
                 }
               )
             ] }) : void 0,
             children: /* @__PURE__ */ ne(ot, { children: [
               ke.map((N, U) => {
-                const ce = K[U];
+                const ce = O[U];
                 if (!ce) return null;
-                const $e = Ue[U] || {
+                const Se = Ue[U] || {
                   name: `Track ${U + 1}`,
                   muted: !1,
                   soloed: !1,
                   volume: 1,
                   pan: 0
-                }, Me = e ? e(U) : /* @__PURE__ */ ne(yo, { onClick: () => Je(U), children: [
-                  /* @__PURE__ */ I(xo, { style: { justifyContent: "center" }, children: $e.name || `Track ${U + 1}` }),
+                }, $e = e ? e(U) : /* @__PURE__ */ ne(yo, { onClick: () => Je(U), children: [
+                  /* @__PURE__ */ I(xo, { style: { justifyContent: "center" }, children: Se.name || `Track ${U + 1}` }),
                   /* @__PURE__ */ ne(Co, { children: [
                     /* @__PURE__ */ I(
                       fn,
                       {
-                        $variant: $e.muted ? "danger" : "outline",
-                        onClick: () => X(U, !$e.muted),
+                        $variant: Se.muted ? "danger" : "outline",
+                        onClick: () => G(U, !Se.muted),
                         children: "Mute"
                       }
                     ),
                     /* @__PURE__ */ I(
                       fn,
                       {
-                        $variant: $e.soloed ? "info" : "outline",
-                        onClick: () => V(U, !$e.soloed),
+                        $variant: Se.soloed ? "info" : "outline",
+                        onClick: () => V(U, !Se.soloed),
                         children: "Solo"
                       }
                     )
@@ -7173,7 +7157,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
                         min: "0",
                         max: "1",
                         step: "0.01",
-                        value: $e.volume,
+                        value: Se.volume,
                         onChange: (le) => Q(U, parseFloat(le.target.value))
                       }
                     ),
@@ -7187,32 +7171,32 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
                         min: "-1",
                         max: "1",
                         step: "0.01",
-                        value: $e.pan,
+                        value: Se.pan,
                         onChange: (le) => ie(U, parseFloat(le.target.value))
                       }
                     ),
                     /* @__PURE__ */ I("span", { children: "R" })
                   ] })
                 ] }), Pe = N.length > 0 ? Math.max(...N.map((le) => le.peaks.data.length)) : 1;
-                return /* @__PURE__ */ I(Ut.Provider, { value: Me, children: /* @__PURE__ */ ne(
+                return /* @__PURE__ */ I(Ut.Provider, { value: $e, children: /* @__PURE__ */ ne(
                   Kn,
                   {
                     numChannels: Pe,
                     backgroundColor: st(m.waveOutlineColor),
                     offset: 0,
-                    width: me,
+                    width: pe,
                     hasClipHeaders: g,
                     trackId: ce.id,
                     isSelected: ce.id === _,
                     children: [
-                      N.map((le, Be) => {
+                      N.map((le, Me) => {
                         const Ye = le.peaks, Qe = Ye.length;
                         return /* @__PURE__ */ I(
                           Xt,
                           {
                             clipId: le.clipId,
                             trackIndex: U,
-                            clipIndex: Be,
+                            clipIndex: Me,
                             trackName: le.trackName,
                             startSample: le.startSample,
                             durationSamples: le.durationSamples,
@@ -7240,10 +7224,10 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
                                 clipStartSample: le.startSample,
                                 clipDurationSamples: le.durationSamples
                               },
-                              `${U}-${Be}-${ze}`
+                              `${U}-${Me}-${ze}`
                             ))
                           },
-                          `${U}-${Be}`
+                          `${U}-${Me}`
                         );
                       }),
                       C?.isRecording && C.trackId === ce.id && C.peaks.length > 0 && /* @__PURE__ */ I(
@@ -7280,20 +7264,20 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
                   }
                 ) }, ce.id);
               }),
-              k.length > 0 && /* @__PURE__ */ I(tr, { height: 30, width: me, children: k.map((N, U) => {
-                const ce = N.start * q / re, $e = N.end * q / re, Me = i ? i(N, U) : N.id;
+              A.length > 0 && /* @__PURE__ */ I(tr, { height: 30, width: pe, children: A.map((N, U) => {
+                const ce = N.start * q / re, Se = N.end * q / re, $e = i ? i(N, U) : N.id;
                 return /* @__PURE__ */ I(
                   er,
                   {
                     annotationId: N.id,
                     annotationIndex: U,
                     startPosition: ce,
-                    endPosition: $e,
-                    label: Me,
+                    endPosition: Se,
+                    label: $e,
                     color: "#ff9800",
                     isActive: N.id === $,
                     onClick: () => je(N),
-                    editable: A
+                    editable: k
                   },
                   N.id
                 );
@@ -7330,16 +7314,16 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
             ] })
           }
         ),
-        k.length > 0 && /* @__PURE__ */ I(
+        A.length > 0 && /* @__PURE__ */ I(
           nr,
           {
-            annotations: k,
+            annotations: A,
             activeAnnotationId: $ ?? void 0,
             shouldScrollToActive: !0,
             scrollActivePosition: l,
             scrollActiveContainer: c,
-            editable: A,
-            controls: A ? r : void 0,
+            editable: k,
+            controls: k ? r : void 0,
             annotationListConfig: { linkEndpoints: B, continuousPlay: M },
             height: s,
             renderAnnotationItem: o,
@@ -7489,38 +7473,38 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
     peaksDataArray: f,
     sampleRate: w,
     waveHeight: y,
-    timeScaleHeight: k,
+    timeScaleHeight: A,
     samplesPerPixel: $,
-    controls: A,
+    controls: k,
     playoutRef: B,
     barWidth: M,
     barGap: _
-  } = Jt(), [T, z] = W(0), [P, Z] = W(0), [O, X] = W(!1), V = R(null), Q = D((K) => {
-    V.current = K, x(K);
-  }, [x]), ie = Math.floor(v * w / $), oe = D(async (K) => {
-    m(K.id), b(K.start);
-  }, [m, b]), te = D((K) => {
-    p(K), a?.(K);
-  }, [p, a]), { onDragStart: se, onDragMove: ye, onDragEnd: we } = Cs({
+  } = Jt(), [T, z] = W(0), [P, Z] = W(0), [Y, G] = W(!1), V = R(null), Q = D((O) => {
+    V.current = O, x(O);
+  }, [x]), ie = Math.floor(v * w / $), oe = D(async (O) => {
+    m(O.id), b(O.start);
+  }, [m, b]), ee = D((O) => {
+    p(O), a?.(O);
+  }, [p, a]), { onDragStart: se, onDragMove: Ce, onDragEnd: ve } = Cs({
     annotations: g,
-    onAnnotationsChange: te,
+    onAnnotationsChange: ee,
     samplesPerPixel: $,
     sampleRate: w,
     duration: v,
     linkEndpoints: !0
-  }), Ke = D((K) => {
-    const fe = K.currentTarget.getBoundingClientRect(), re = A.show ? A.width : 0, he = (K.clientX - fe.left - re) * $ / w;
-    X(!0), z(he), Z(he);
-  }, [A, $, w]), Ne = D((K) => {
-    if (!O) return;
-    const fe = K.currentTarget.getBoundingClientRect(), re = A.show ? A.width : 0, he = (K.clientX - fe.left - re) * $ / w;
-    Z(he);
-  }, [O, A, $, w]), ke = D((K) => {
-    if (!O) return;
-    X(!1);
-    const fe = K.currentTarget.getBoundingClientRect(), re = A.show ? A.width : 0, he = (K.clientX - fe.left - re) * $ / w, xe = Math.min(T, he), ae = Math.max(T, he);
-    Math.abs(ae - xe) < 0.1 ? (C(xe), z(xe), Z(xe), c && B.current && (B.current.stop(), b(xe))) : (z(xe), Z(ae));
-  }, [O, T, $, w, A, C, c, B, b]);
+  }), Ke = D((O) => {
+    const me = O.currentTarget.getBoundingClientRect(), re = k.show ? k.width : 0, fe = (O.clientX - me.left - re) * $ / w;
+    G(!0), z(fe), Z(fe);
+  }, [k, $, w]), Ne = D((O) => {
+    if (!Y) return;
+    const me = O.currentTarget.getBoundingClientRect(), re = k.show ? k.width : 0, fe = (O.clientX - me.left - re) * $ / w;
+    Z(fe);
+  }, [Y, k, $, w]), ke = D((O) => {
+    if (!Y) return;
+    G(!1);
+    const me = O.currentTarget.getBoundingClientRect(), re = k.show ? k.width : 0, fe = (O.clientX - me.left - re) * $ / w, ye = Math.min(T, fe), ae = Math.max(T, fe);
+    Math.abs(ae - ye) < 0.1 ? (C(ye), z(ye), Z(ye), c && B.current && (B.current.stop(), b(ye))) : (z(ye), Z(ae));
+  }, [Y, T, $, w, k, C, c, B, b]);
   if (f.length === 0)
     return /* @__PURE__ */ I("div", { className: i, children: "Loading waveform..." });
   const Ue = null;
@@ -7532,9 +7516,9 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
         sampleRate: w,
         zoomLevels: [$],
         waveHeight: y,
-        timeScaleHeight: k,
+        timeScaleHeight: A,
         duration: v,
-        controls: A,
+        controls: k,
         barWidth: M,
         barGap: _
       },
@@ -7545,16 +7529,16 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
             theme: l,
             backgroundColor: st(l.waveOutlineColor),
             timescaleBackgroundColor: l.timescaleBackgroundColor,
-            scrollContainerWidth: ie + (A.show ? A.width : 0),
+            scrollContainerWidth: ie + (k.show ? k.width : 0),
             timescaleWidth: ie,
             tracksWidth: ie,
-            controlsWidth: A.show ? A.width : 0,
+            controlsWidth: k.show ? k.width : 0,
             onTracksMouseDown: Ke,
             onTracksMouseMove: Ne,
             onTracksMouseUp: ke,
             scrollContainerRef: Q,
-            isSelecting: O,
-            timescale: k > 0 ? /* @__PURE__ */ I(
+            isSelecting: Y,
+            timescale: A > 0 ? /* @__PURE__ */ I(
               On,
               {
                 duration: v * 1e3,
@@ -7564,8 +7548,8 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
               }
             ) : void 0,
             children: /* @__PURE__ */ ne(ot, { children: [
-              f.map((K, fe) => {
-                const re = K.length > 0 ? Math.max(...K.map((q) => q.peaks.data.length)) : 1;
+              f.map((O, me) => {
+                const re = O.length > 0 ? Math.max(...O.map((q) => q.peaks.data.length)) : 1;
                 return /* @__PURE__ */ I(Ut.Provider, { value: Ue, children: /* @__PURE__ */ I(
                   Kn,
                   {
@@ -7574,16 +7558,16 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
                     offset: 0,
                     width: ie,
                     hasClipHeaders: !1,
-                    trackId: `media-element-track-${fe}`,
+                    trackId: `media-element-track-${me}`,
                     isSelected: !0,
-                    children: K.map((q, he) => {
-                      const xe = q.peaks, ae = xe.length;
+                    children: O.map((q, fe) => {
+                      const ye = q.peaks, ae = ye.length;
                       return /* @__PURE__ */ I(
                         Xt,
                         {
                           clipId: q.clipId,
-                          trackIndex: fe,
-                          clipIndex: he,
+                          trackIndex: me,
+                          clipIndex: fe,
                           trackName: q.trackName,
                           startSample: q.startSample,
                           durationSamples: q.durationSamples,
@@ -7591,49 +7575,49 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
                           showHeader: !1,
                           disableHeaderDrag: !0,
                           isSelected: !0,
-                          trackId: `media-element-track-${fe}`,
-                          children: xe.data.map((F, Se) => /* @__PURE__ */ I(
+                          trackId: `media-element-track-${me}`,
+                          children: ye.data.map((F, Te) => /* @__PURE__ */ I(
                             ii,
                             {
-                              index: Se,
+                              index: Te,
                               data: F,
-                              bits: xe.bits,
+                              bits: ye.bits,
                               length: ae,
                               clipStartSample: q.startSample,
                               clipDurationSamples: q.durationSamples
                             },
-                            `${fe}-${he}-${Se}`
+                            `${me}-${fe}-${Te}`
                           ))
                         },
-                        `${fe}-${he}`
+                        `${me}-${fe}`
                       );
                     })
                   }
-                ) }, fe);
+                ) }, me);
               }),
               g.length > 0 && /* @__PURE__ */ I(
                 ma,
                 {
                   onDragStart: se,
-                  onDragMove: ye,
-                  onDragEnd: we,
+                  onDragMove: Ce,
+                  onDragEnd: ve,
                   modifiers: r ? [fa] : [],
-                  children: /* @__PURE__ */ I(tr, { height: 30, width: ie, children: g.map((K, fe) => {
-                    const re = K.start * w / $, q = K.end * w / $, he = t ? t(K, fe) : K.id;
+                  children: /* @__PURE__ */ I(tr, { height: 30, width: ie, children: g.map((O, me) => {
+                    const re = O.start * w / $, q = O.end * w / $, fe = t ? t(O, me) : O.id;
                     return /* @__PURE__ */ I(
                       er,
                       {
-                        annotationId: K.id,
-                        annotationIndex: fe,
+                        annotationId: O.id,
+                        annotationIndex: me,
                         startPosition: re,
                         endPosition: q,
-                        label: he,
+                        label: fe,
                         color: "#ff9800",
-                        isActive: K.id === h,
-                        onClick: () => oe(K),
+                        isActive: O.id === h,
+                        onClick: () => oe(O),
                         editable: r
                       },
-                      K.id
+                      O.id
                     );
                   }) })
                 }
@@ -7641,8 +7625,8 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
               T !== P && /* @__PURE__ */ I(
                 Hn,
                 {
-                  startPosition: Math.min(T, P) * w / $ + (A.show ? A.width : 0),
-                  endPosition: Math.max(T, P) * w / $ + (A.show ? A.width : 0),
+                  startPosition: Math.min(T, P) * w / $ + (k.show ? k.width : 0),
+                  endPosition: Math.max(T, P) * w / $ + (k.show ? k.width : 0),
                   color: l.selectionColor
                 }
               ),
@@ -7650,7 +7634,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
                 ni,
                 {
                   color: l.playheadColor,
-                  controlsOffset: A.show ? A.width : 0
+                  controlsOffset: k.show ? k.width : 0
                 }
               )
             ] })
@@ -7667,7 +7651,7 @@ const ur = De(null), dr = De(null), mr = De(null), fr = De(null), Ri = ({
             editable: r,
             annotationListConfig: { linkEndpoints: !0, continuousPlay: d },
             height: e,
-            onAnnotationUpdate: te,
+            onAnnotationUpdate: ee,
             renderAnnotationItem: n
           }
         )
@@ -7730,8 +7714,8 @@ export {
   Ls as useMediaElementState,
   Fe as usePlaybackAnimation,
   xi as usePlaybackShortcuts,
-  ve as usePlaylistControls,
-  Te as usePlaylistData,
+  be as usePlaylistControls,
+  De as usePlaylistData,
   Ge as usePlaylistState,
   hs as useTimeFormat,
   Bi as useTrackDynamicEffects,