@waveform-playlist/browser 5.1.0 → 5.2.0-next.1

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import * as _r from "tone";
-import { Volume as $n, getDestination as Mn, start as Bn, now as St, getTransport as ct, getContext as ke, Context as Fr, setContext as Zr, Panner as Vr, Gain as sn, Player as ln, Analyser as Dn, Meter as Pr, connect as zr, StereoWidener as Hr, Gate as Xr, Limiter as Gr, Compressor as Nr, Chebyshev as Lr, BitCrusher as Yr, Distortion as Or, EQ3 as Kr, AutoWah as Ur, AutoFilter as jr, AutoPanner as Jr, Vibrato as Qr, Tremolo as qr, Phaser as ea, Chorus as ta, PingPongDelay as na, FeedbackDelay as ra, JCReverb as aa, Freeverb as oa, Reverb as sa } from "tone";
-import { jsx as I, jsxs as te, Fragment as rt } from "react/jsx-runtime";
+import { Volume as $n, getDestination as Mn, start as Bn, now as St, getTransport as ct, getContext as Ae, Context as Fr, setContext as Zr, Panner as Vr, Gain as sn, Player as ln, Analyser as Dn, Meter as Pr, connect as zr, StereoWidener as Hr, Gate as Xr, Limiter as Gr, Compressor as Nr, Chebyshev as Lr, BitCrusher as Yr, Distortion as Or, EQ3 as Kr, AutoWah as Ur, AutoFilter as jr, AutoPanner as Jr, Vibrato as Qr, Tremolo as qr, Phaser as ea, Chorus as ta, PingPongDelay as na, FeedbackDelay as ra, JCReverb as aa, Freeverb as oa, Reverb as sa } from "tone";
+import { jsx as I, jsxs as ne, Fragment as rt } from "react/jsx-runtime";
 import * as Y from "react";
-import _e, { createContext as Be, useContext as Te, useState as E, useEffect as j, Fragment as ia, useRef as R, useCallback as D, useLayoutEffect as la, useMemo as nt } from "react";
+import Fe, { createContext as Me, useContext as Te, useState as R, useEffect as U, Fragment as ia, useRef as T, useCallback as D, useLayoutEffect as la, useMemo as nt } from "react";
 import S, { withTheme as Tn, ThemeContext as ca, useTheme as ua, ThemeProvider as Rn } from "styled-components";
 import { useDraggable as bt, useSensor as zt, MouseSensor as da, TouchSensor as ma, PointerSensor as fa, useSensors as ha, DndContext as pa } from "@dnd-kit/core";
 import { restrictToHorizontalAxis as ga } from "@dnd-kit/modifiers";
@@ -364,10 +364,10 @@ var ya = class {
     }), this.tracks.clear(), this.effectsCleanup && this.effectsCleanup(), this.masterVolume.dispose();
   }
   get context() {
-    return ke();
+    return Ae();
   }
   get sampleRate() {
-    return ke().sampleRate;
+    return Ae().sampleRate;
   }
   setOnPlaybackComplete(e) {
     this.onPlaybackCompleteCallback = e;
@@ -469,7 +469,7 @@ const Nt = /* @__PURE__ */ Object.freeze({
     "thin",
     /* @__PURE__ */ Y.createElement(Y.Fragment, null, /* @__PURE__ */ Y.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" }))
   ]
-]), ka = Be({
+]), ka = Me({
   color: "currentColor",
   size: "1em",
   weight: "regular",
@@ -586,7 +586,7 @@ var Dt = S.div`
   font-family: ${(e) => e.theme.fontFamily};
   font-size: ${(e) => e.theme.fontSize};
   color: ${(e) => e.theme.textColor};
-`, Ve = S.button`
+`, Pe = S.button`
   padding: 0.5rem 1rem;
   background: ${(e) => e.theme.buttonBackground || "#007bff"};
   color: ${(e) => e.theme.buttonText || "white"};
@@ -785,7 +785,7 @@ var Vn = S.input.attrs({ type: "range" })`
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ te(Dt, { className: r, children: [
+}) => /* @__PURE__ */ ne(Dt, { className: r, children: [
   /* @__PURE__ */ I(
     Tt,
     {
@@ -926,42 +926,42 @@ var Da = S.canvas.attrs((e) => ({
     barGap: g = 0,
     transparentBackground: h = !1,
     drawMode: d = "inverted"
-  } = e, b = R([]), y = D(
-    (w) => {
-      if (w !== null) {
-        const C = parseInt(w.dataset.index, 10);
-        b.current[C] = w;
+  } = e, b = T([]), y = D(
+    (C) => {
+      if (C !== null) {
+        const v = parseInt(C.dataset.index, 10);
+        b.current[v] = C;
       }
     },
     []
   );
   la(() => {
-    const w = b.current, C = u + g;
-    let A = 0;
-    for (let $ = 0; $ < w.length; $++) {
-      const k = w[$], B = k.getContext("2d"), M = Math.floor(i / 2), _ = 2 ** (n - 1);
-      if (B) {
-        B.resetTransform(), B.clearRect(0, 0, k.width, k.height), B.imageSmoothingEnabled = !1, B.scale(o, o);
-        const T = k.width / o;
-        let H;
-        d === "normal" ? H = c : H = l, B.fillStyle = Ba(
-          B,
-          H,
-          T,
+    const C = b.current, v = u + g;
+    let k = 0;
+    for (let B = 0; B < C.length; B++) {
+      const $ = C[B], A = $.getContext("2d"), M = Math.floor(i / 2), _ = 2 ** (n - 1);
+      if (A) {
+        A.resetTransform(), A.clearRect(0, 0, $.width, $.height), A.imageSmoothingEnabled = !1, A.scale(o, o);
+        const E = $.width / o;
+        let V;
+        d === "normal" ? V = c : V = l, A.fillStyle = Ba(
+          A,
+          V,
+          E,
           i
         );
-        const P = A, F = A + T, O = Math.floor((P - u + C) / C) * C;
-        for (let N = Math.max(0, O); N < F; N += C) {
-          const Z = N - P;
+        const z = k, P = k + E, K = Math.floor((z - u + v) / v) * v;
+        for (let X = Math.max(0, K); X < P; X += v) {
+          const Z = X - z;
           if (Z + u <= 0) continue;
-          const J = N;
-          if (J * 2 + 1 < t.length) {
-            const se = t[J * 2] / _, ae = t[J * 2 + 1] / _, ee = Math.abs(se * M), oe = Math.abs(ae * M);
-            d === "normal" ? B.fillRect(Z, M - oe, u, oe + ee) : (B.fillRect(Z, 0, u, M - oe), B.fillRect(Z, M + ee, u, M - ee));
+          const Q = X;
+          if (Q * 2 + 1 < t.length) {
+            const le = t[Q * 2] / _, te = t[Q * 2 + 1] / _, re = Math.abs(le * M), ae = Math.abs(te * M);
+            d === "normal" ? A.fillRect(Z, M - ae, u, ae + re) : (A.fillRect(Z, 0, u, M - ae), A.fillRect(Z, M + re, u, M - re));
           }
         }
       }
-      A += k.width / o;
+      k += $.width / o;
     }
   }, [
     t,
@@ -978,11 +978,11 @@ var Da = S.canvas.attrs((e) => ({
   let m = r, p = 0;
   const x = [];
   for (; m > 0; ) {
-    const w = Math.min(m, Ma), C = /* @__PURE__ */ I(
+    const C = Math.min(m, Ma), v = /* @__PURE__ */ I(
       Da,
       {
-        $cssWidth: w,
-        width: w * o,
+        $cssWidth: C,
+        width: C * o,
         height: i * o,
         $waveHeight: i,
         "data-index": p,
@@ -990,7 +990,7 @@ var Da = S.canvas.attrs((e) => ({
       },
       `${r}-${p}`
     );
-    x.push(C), m -= w, p += 1;
+    x.push(v), m -= C, p += 1;
   }
   const f = h ? "transparent" : at(c);
   return /* @__PURE__ */ I(
@@ -1113,7 +1113,7 @@ var Da = S.canvas.attrs((e) => ({
   dragHandleProps: a,
   touchOptimized: s = !1
 }) => {
-  const [o, i] = _e.useState(!1);
+  const [o, i] = Fe.useState(!1);
   if (!a)
     return null;
   const { attributes: l, listeners: c, setActivatorNodeRef: u, isDragging: g } = a;
@@ -1236,43 +1236,43 @@ var fn = ({
   fadeOut: m,
   sampleRate: p = 44100,
   showFades: x = !1,
-  touchOptimized: v = !1
+  touchOptimized: w = !1
 }) => {
-  const f = Math.floor(o / l), C = Math.floor((o + i) / l) - f, A = c && !u && !g, $ = `clip-${r}-${a}`, { attributes: k, listeners: B, setNodeRef: M, setActivatorNodeRef: _, transform: T, isDragging: H } = bt({
-    id: $,
+  const f = Math.floor(o / l), v = Math.floor((o + i) / l) - f, k = c && !u && !g, B = `clip-${r}-${a}`, { attributes: $, listeners: A, setNodeRef: M, setActivatorNodeRef: _, transform: E, isDragging: V } = bt({
+    id: B,
     data: { clipId: n, trackIndex: r, clipIndex: a },
-    disabled: !A
-  }), P = `clip-boundary-left-${r}-${a}`, {
-    attributes: F,
-    listeners: O,
-    setActivatorNodeRef: N,
+    disabled: !k
+  }), z = `clip-boundary-left-${r}-${a}`, {
+    attributes: P,
+    listeners: K,
+    setActivatorNodeRef: X,
     isDragging: Z
   } = bt({
-    id: P,
+    id: z,
     data: { clipId: n, trackIndex: r, clipIndex: a, boundary: "left" },
-    disabled: !A
-  }), J = `clip-boundary-right-${r}-${a}`, {
-    attributes: se,
-    listeners: ae,
-    setActivatorNodeRef: ee,
-    isDragging: oe
+    disabled: !k
+  }), Q = `clip-boundary-right-${r}-${a}`, {
+    attributes: le,
+    listeners: te,
+    setActivatorNodeRef: re,
+    isDragging: ae
   } = bt({
-    id: J,
+    id: Q,
     data: { clipId: n, trackIndex: r, clipIndex: a, boundary: "right" },
-    disabled: !A
-  }), ye = T ? {
-    transform: Nt.Translate.toString(T),
-    zIndex: H ? 100 : void 0
+    disabled: !k
+  }), ye = E ? {
+    transform: Nt.Translate.toString(E),
+    zIndex: V ? 100 : void 0
     // Below controls (z-index: 999) but above other clips
   } : void 0;
-  return /* @__PURE__ */ te(
+  return /* @__PURE__ */ ne(
     Ha,
     {
       ref: M,
       style: ye,
       className: t,
       $left: f,
-      $width: C,
+      $width: v,
       $isOverlay: g,
       "data-clip-container": "true",
       "data-track-id": b,
@@ -1287,10 +1287,10 @@ var fn = ({
             trackName: s,
             isSelected: h,
             disableDrag: u,
-            dragHandleProps: A ? { attributes: k, listeners: B, setActivatorNodeRef: _ } : void 0
+            dragHandleProps: k ? { attributes: $, listeners: A, setActivatorNodeRef: _ } : void 0
           }
         ),
-        /* @__PURE__ */ te(Xa, { $isOverlay: g, children: [
+        /* @__PURE__ */ ne(Xa, { $isOverlay: g, children: [
           e,
           x && y && y.duration > 0 && /* @__PURE__ */ I(
             fn,
@@ -1304,14 +1304,14 @@ var fn = ({
           x && m && m.duration > 0 && /* @__PURE__ */ I(
             fn,
             {
-              left: C - Math.floor(m.duration * p / l),
+              left: v - Math.floor(m.duration * p / l),
               width: Math.floor(m.duration * p / l),
               type: "fadeOut",
               curveType: m.type
             }
           )
         ] }),
-        c && !u && !g && /* @__PURE__ */ te(rt, { children: [
+        c && !u && !g && /* @__PURE__ */ ne(rt, { children: [
           /* @__PURE__ */ I(
             mn,
             {
@@ -1319,11 +1319,11 @@ var fn = ({
               trackIndex: r,
               clipIndex: a,
               edge: "left",
-              touchOptimized: v,
+              touchOptimized: w,
               dragHandleProps: {
-                attributes: F,
-                listeners: O,
-                setActivatorNodeRef: N,
+                attributes: P,
+                listeners: K,
+                setActivatorNodeRef: X,
                 isDragging: Z
               }
             }
@@ -1335,12 +1335,12 @@ var fn = ({
               trackIndex: r,
               clipIndex: a,
               edge: "right",
-              touchOptimized: v,
+              touchOptimized: w,
               dragHandleProps: {
-                attributes: se,
-                listeners: ae,
-                setActivatorNodeRef: ee,
-                isDragging: oe
+                attributes: le,
+                listeners: te,
+                setActivatorNodeRef: re,
+                isDragging: ae
               }
             }
           )
@@ -1366,7 +1366,7 @@ var fn = ({
   const a = (s) => {
     t(parseFloat(s.target.value) / 100);
   };
-  return /* @__PURE__ */ te(Ga, { className: r, children: [
+  return /* @__PURE__ */ ne(Ga, { className: r, children: [
     /* @__PURE__ */ I(Na, { htmlFor: "master-gain", children: "Master Volume" }),
     /* @__PURE__ */ I(
       La,
@@ -1470,14 +1470,14 @@ var Oa = S.div`
   scrollContainerRef: h,
   isSelecting: d,
   "data-playlist-state": b
-}) => /* @__PURE__ */ I(Oa, { "data-scroll-container": "true", "data-playlist-state": b, ref: h, children: /* @__PURE__ */ te(
+}) => /* @__PURE__ */ I(Oa, { "data-scroll-container": "true", "data-playlist-state": b, ref: h, children: /* @__PURE__ */ ne(
   Ka,
   {
     $backgroundColor: t,
     $width: o,
     children: [
       r && /* @__PURE__ */ I(Ua, { $width: a, $backgroundColor: n, children: r }),
-      /* @__PURE__ */ te(ja, { $width: s, $backgroundColor: t, children: [
+      /* @__PURE__ */ ne(ja, { $width: s, $backgroundColor: t, children: [
         e,
         (l || c) && /* @__PURE__ */ I(
           Ja,
@@ -1622,33 +1622,33 @@ var hn = S.div.attrs((e) => ({
   minPosition: i = 0,
   maxPosition: l = 1 / 0
 }) => {
-  const [c, u] = E(null), g = R(0), h = R(0), d = R(0), b = Math.max(0, t - e), y = D((p, x) => {
+  const [c, u] = R(null), g = T(0), h = T(0), d = T(0), b = Math.max(0, t - e), y = D((p, x) => {
     p.preventDefault(), p.stopPropagation(), u(x), g.current = p.clientX, h.current = x === "start" ? e : t;
-    const v = (w) => {
-      const C = w.clientX - g.current, A = h.current + C;
+    const w = (C) => {
+      const v = C.clientX - g.current, k = h.current + v;
       if (x === "start") {
-        const $ = Math.max(i, Math.min(t - 10, A));
-        a?.($);
+        const B = Math.max(i, Math.min(t - 10, k));
+        a?.(B);
       } else {
-        const $ = Math.max(e + 10, Math.min(l, A));
-        s?.($);
+        const B = Math.max(e + 10, Math.min(l, k));
+        s?.(B);
       }
     }, f = () => {
-      u(null), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", f);
+      u(null), document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", f);
     };
-    document.addEventListener("mousemove", v), document.addEventListener("mouseup", f);
+    document.addEventListener("mousemove", w), document.addEventListener("mouseup", f);
   }, [e, t, i, l, a, s]), m = D((p) => {
     p.preventDefault(), p.stopPropagation(), u("region"), g.current = p.clientX, h.current = e, d.current = t;
-    const x = t - e, v = (w) => {
-      const C = w.clientX - g.current;
-      let A = h.current + C, $ = d.current + C;
-      A < i && (A = i, $ = i + x), $ > l && ($ = l, A = l - x), o?.(A, $);
+    const x = t - e, w = (C) => {
+      const v = C.clientX - g.current;
+      let k = h.current + v, B = d.current + v;
+      k < i && (k = i, B = i + x), B > l && (B = l, k = l - x), o?.(k, B);
     }, f = () => {
-      u(null), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", f);
+      u(null), document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", f);
     };
-    document.addEventListener("mousemove", v), document.addEventListener("mouseup", f);
+    document.addEventListener("mousemove", w), document.addEventListener("mouseup", f);
   }, [e, t, i, l, o]);
-  return b <= 0 ? null : /* @__PURE__ */ te(rt, { children: [
+  return b <= 0 ? null : /* @__PURE__ */ ne(rt, { children: [
     /* @__PURE__ */ I(
       qa,
       {
@@ -1704,7 +1704,7 @@ var hn = S.div.attrs((e) => ({
   maxPosition: o = 1 / 0,
   controlsOffset: i = 0
 }) => {
-  const [l, c] = E(!1), u = R(0), g = R(null), h = t > e, d = D((b) => {
+  const [l, c] = R(!1), u = T(0), g = T(null), h = t > e, d = D((b) => {
     const y = b.target;
     if (y.closest("[data-loop-marker-handle]") || y.closest("[data-loop-region-timescale]"))
       return;
@@ -1713,13 +1713,13 @@ var hn = S.div.attrs((e) => ({
     if (!m) return;
     const p = b.clientX - m.left, x = Math.max(s, Math.min(o, p));
     u.current = x, a?.(x, x);
-    const v = (w) => {
-      const C = w.clientX - m.left, A = Math.max(s, Math.min(o, C)), $ = Math.min(u.current, A), k = Math.max(u.current, A);
-      a?.($, k);
+    const w = (C) => {
+      const v = C.clientX - m.left, k = Math.max(s, Math.min(o, v)), B = Math.min(u.current, k), $ = Math.max(u.current, k);
+      a?.(B, $);
     }, f = () => {
-      c(!1), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", f);
+      c(!1), document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", f);
     };
-    document.addEventListener("mousemove", v), document.addEventListener("mouseup", f);
+    document.addEventListener("mousemove", w), document.addEventListener("mouseup", f);
   }, [s, o, a]);
   return /* @__PURE__ */ I(
     to,
@@ -1795,11 +1795,11 @@ var pn = ({
   onChange: s,
   readOnly: o = !1
 }) => {
-  const [i, l] = E("");
-  return j(() => {
+  const [i, l] = R("");
+  return U(() => {
     const h = dt(n, r);
     l(h);
-  }, [n, r, e]), /* @__PURE__ */ te(rt, { children: [
+  }, [n, r, e]), /* @__PURE__ */ ne(rt, { children: [
     /* @__PURE__ */ I(Sa, { as: "label", htmlFor: e, children: t }),
     /* @__PURE__ */ I(
       Fn,
@@ -1832,15 +1832,15 @@ var pn = ({
   onSelectionChange: n,
   className: r
 }) => {
-  const [a, s] = E("hh:mm:ss.uuu");
-  return j(() => {
+  const [a, s] = R("hh:mm:ss.uuu");
+  return U(() => {
     const l = document.querySelector(".time-format"), c = () => {
       l && s(l.value);
     };
     return l && (s(l.value), l.addEventListener("change", c)), () => {
       l?.removeEventListener("change", c);
     };
-  }, []), /* @__PURE__ */ te(rt, { children: [
+  }, []), /* @__PURE__ */ ne(rt, { children: [
     /* @__PURE__ */ I(
       pn,
       {
@@ -1872,8 +1872,8 @@ var pn = ({
 function $t() {
   return window.devicePixelRatio;
 }
-var Yn = Be($t()), On = ({ children: e }) => {
-  const [t, n] = E($t());
+var Yn = Me($t()), On = ({ children: e }) => {
+  const [t, n] = R($t());
   return matchMedia(`(resolution: ${$t()}dppx)`).addEventListener(
     "change",
     () => {
@@ -1881,7 +1881,7 @@ var Yn = Be($t()), On = ({ children: e }) => {
     },
     { once: !0 }
   ), /* @__PURE__ */ I(Yn.Provider, { value: Math.ceil(t), children: e });
-}, Kn = () => Te(Yn), Et = Be({
+}, Kn = () => Te(Yn), Et = Me({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -1894,14 +1894,14 @@ var Yn = Be($t()), On = ({ children: e }) => {
   duration: 3e4,
   barWidth: 1,
   barGap: 0
-}), vt = () => Te(Et), wt = () => Te(ca), Qt = Be(/* @__PURE__ */ I(ia, {})), ao = () => Te(Qt), oo = 0, so = !1, io = 0, lo = 0, co = {
+}), vt = () => Te(Et), wt = () => Te(ca), Qt = Me(/* @__PURE__ */ I(ia, {})), ao = () => Te(Qt), oo = 0, so = !1, io = 0, lo = 0, co = {
   progress: oo,
   isPlaying: so,
   selectionStart: io,
   selectionEnd: lo
 };
-Be(co);
-Be({
+Me(co);
+Me({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -1973,20 +1973,20 @@ var fo = S.div.attrs((e) => ({
     bigStep: a,
     secondStep: s,
     renderTimestamp: o
-  } = e, i = /* @__PURE__ */ new Map(), l = [], c = R(null), {
+  } = e, i = /* @__PURE__ */ new Map(), l = [], c = T(null), {
     sampleRate: u,
     samplesPerPixel: g,
     timeScaleHeight: h,
     controls: { show: d, width: b }
   } = Te(Et), y = Kn();
-  j(() => {
+  U(() => {
     if (c.current !== null) {
-      const v = c.current, f = v.getContext("2d");
+      const w = c.current, f = w.getContext("2d");
       if (f) {
-        f.resetTransform(), f.clearRect(0, 0, v.width, v.height), f.imageSmoothingEnabled = !1, f.fillStyle = t, f.scale(y, y);
-        for (const [w, C] of i.entries()) {
-          const A = h - C;
-          f.fillRect(w, A, 1, C);
+        f.resetTransform(), f.clearRect(0, 0, w.width, w.height), f.imageSmoothingEnabled = !1, f.fillStyle = t, f.scale(y, y);
+        for (const [C, v] of i.entries()) {
+          const k = h - v;
+          f.fillRect(C, k, 1, v);
         }
       }
     }
@@ -2002,15 +2002,15 @@ var fo = S.div.attrs((e) => ({
   ]);
   const m = uo(n / 1e3, g, u), p = u / g;
   let x = 0;
-  for (let v = 0; v < m; v += p * s / 1e3) {
-    const f = Math.floor(v);
+  for (let w = 0; w < m; w += p * s / 1e3) {
+    const f = Math.floor(w);
     if (x % r === 0) {
-      const w = x, C = mo(w), A = o ? /* @__PURE__ */ I(_e.Fragment, { children: o(w, f) }, `timestamp-${x}`) : /* @__PURE__ */ I(po, { $left: f, children: C }, C);
-      l.push(A), i.set(f, h);
+      const C = x, v = mo(C), k = o ? /* @__PURE__ */ I(Fe.Fragment, { children: o(C, f) }, `timestamp-${x}`) : /* @__PURE__ */ I(po, { $left: f, children: v }, v);
+      l.push(k), 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;
   }
-  return /* @__PURE__ */ te(
+  return /* @__PURE__ */ ne(
     fo,
     {
       $cssWidth: m,
@@ -2109,7 +2109,7 @@ var fo = S.div.attrs((e) => ({
     waveHeight: u,
     controls: { show: g, width: h }
   } = vt(), d = ao();
-  return /* @__PURE__ */ te(
+  return /* @__PURE__ */ ne(
     yo,
     {
       $numChannels: e,
@@ -2439,26 +2439,26 @@ function Zo(e) {
     return new Float32Array(M);
   }), i = r ? o.length : 1, l = 24, c = Fo(a, t), u = e.bits === 8 ? 1 : 2, g = l + c * 2 * u * i, h = new ArrayBuffer(g), d = new DataView(h), b = 0, y = l, m = new Array(i), p = new Array(i), x = 0; x < i; x++)
     m[x] = 1 / 0, p[x] = -1 / 0;
-  var v = e.bits === 8 ? Eo : _o, f = e.bits === 8 ? Ro : Wo;
+  var w = e.bits === 8 ? Eo : _o, f = e.bits === 8 ? Ro : Wo;
   d.setInt32(0, 2, !0), d.setUint32(4, e.bits === 8, !0), d.setInt32(8, s, !0), d.setInt32(12, t, !0), d.setInt32(16, c, !0), d.setInt32(20, i, !0);
-  for (var w = 0; w < a; w++) {
-    var C = 0;
+  for (var C = 0; C < a; C++) {
+    var v = 0;
     if (i === 1) {
-      for (var A = 0; A < o.length; ++A)
-        C += o[A][w];
-      C = Math.floor(f * C * n / o.length), C < m[0] && (m[0] = C, m[0] < v && (m[0] = v)), C > p[0] && (p[0] = C, p[0] > f && (p[0] = f));
+      for (var k = 0; k < o.length; ++k)
+        v += o[k][C];
+      v = Math.floor(f * v * n / o.length), v < m[0] && (m[0] = v, m[0] < w && (m[0] = w)), v > p[0] && (p[0] = v, p[0] > f && (p[0] = f));
     } else
-      for (var $ = 0; $ < i; ++$)
-        C = Math.floor(f * o[$][w] * n), C < m[$] && (m[$] = C, m[$] < v && (m[$] = v)), C > p[$] && (p[$] = C, p[$] > f && (p[$] = f));
+      for (var B = 0; B < i; ++B)
+        v = Math.floor(f * o[B][C] * n), v < m[B] && (m[B] = v, m[B] < w && (m[B] = w)), v > p[B] && (p[B] = v, p[B] > f && (p[B] = f));
     if (++b === t) {
-      for (var k = 0; k < i; k++)
-        e.bits === 8 ? (d.setInt8(y++, m[k]), d.setInt8(y++, p[k])) : (d.setInt16(y, m[k], !0), d.setInt16(y + 2, p[k], !0), y += 4), m[k] = 1 / 0, p[k] = -1 / 0;
+      for (var $ = 0; $ < i; $++)
+        e.bits === 8 ? (d.setInt8(y++, m[$]), d.setInt8(y++, p[$])) : (d.setInt16(y, m[$], !0), d.setInt16(y + 2, p[$], !0), y += 4), m[$] = 1 / 0, p[$] = -1 / 0;
       b = 0;
     }
   }
   if (b > 0)
-    for (var B = 0; B < i; B++)
-      e.bits === 8 ? (d.setInt8(y++, m[B]), d.setInt8(y++, p[B])) : (d.setInt16(y, m[B], !0), d.setInt16(y + 2, p[B], !0));
+    for (var A = 0; A < i; A++)
+      e.bits === 8 ? (d.setInt8(y++, m[A]), d.setInt8(y++, p[A])) : (d.setInt16(y, m[A], !0), d.setInt16(y + 2, p[A], !0));
   return h;
 }
 function Mt(e) {
@@ -2515,7 +2515,7 @@ function Go(e, t, n) {
   };
 }
 var No = /* @__PURE__ */ Go("Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgLyoqCiAgICogQXVkaW9CdWZmZXItYmFzZWQgV2F2ZWZvcm1EYXRhIGdlbmVyYXRvcgogICAqCiAgICogQWRhcHRlZCBmcm9tIEJsb2NrRmlsZTo6Q2FsY1N1bW1hcnkgaW4gQXVkYWNpdHksIHdpdGggcGVybWlzc2lvbi4KICAgKiBTZWUgaHR0cHM6Ly9naXRodWIuY29tL2F1ZGFjaXR5L2F1ZGFjaXR5L2Jsb2IvCiAgICogICAxMTA4YzEzNzZjMDkxNjYxNjIzMzVmYWI0NzQzMDA4Y2JhNTdjNGVlL3NyYy9CbG9ja0ZpbGUuY3BwI0wxOTgKICAgKi8KCiAgdmFyIElOVDhfTUFYID0gMTI3OwogIHZhciBJTlQ4X01JTiA9IC0xMjg7CiAgdmFyIElOVDE2X01BWCA9IDMyNzY3OwogIHZhciBJTlQxNl9NSU4gPSAtMzI3Njg7CiAgZnVuY3Rpb24gY2FsY3VsYXRlV2F2ZWZvcm1EYXRhTGVuZ3RoKGF1ZGlvX3NhbXBsZV9jb3VudCwgc2NhbGUpIHsKICAgIHZhciBkYXRhX2xlbmd0aCA9IE1hdGguZmxvb3IoYXVkaW9fc2FtcGxlX2NvdW50IC8gc2NhbGUpOwogICAgdmFyIHNhbXBsZXNfcmVtYWluaW5nID0gYXVkaW9fc2FtcGxlX2NvdW50IC0gZGF0YV9sZW5ndGggKiBzY2FsZTsKICAgIGlmIChzYW1wbGVzX3JlbWFpbmluZyA+IDApIHsKICAgICAgZGF0YV9sZW5ndGgrKzsKICAgIH0KICAgIHJldHVybiBkYXRhX2xlbmd0aDsKICB9CiAgZnVuY3Rpb24gZ2VuZXJhdGVXYXZlZm9ybURhdGEob3B0aW9ucykgewogICAgdmFyIHNjYWxlID0gb3B0aW9ucy5zY2FsZTsKICAgIHZhciBhbXBsaXR1ZGVfc2NhbGUgPSBvcHRpb25zLmFtcGxpdHVkZV9zY2FsZTsKICAgIHZhciBzcGxpdF9jaGFubmVscyA9IG9wdGlvbnMuc3BsaXRfY2hhbm5lbHM7CiAgICB2YXIgbGVuZ3RoID0gb3B0aW9ucy5sZW5ndGg7CiAgICB2YXIgc2FtcGxlX3JhdGUgPSBvcHRpb25zLnNhbXBsZV9yYXRlOwogICAgdmFyIGNoYW5uZWxzID0gb3B0aW9ucy5jaGFubmVscy5tYXAoZnVuY3Rpb24gKGNoYW5uZWwpIHsKICAgICAgcmV0dXJuIG5ldyBGbG9hdDMyQXJyYXkoY2hhbm5lbCk7CiAgICB9KTsKICAgIHZhciBvdXRwdXRfY2hhbm5lbHMgPSBzcGxpdF9jaGFubmVscyA/IGNoYW5uZWxzLmxlbmd0aCA6IDE7CiAgICB2YXIgaGVhZGVyX3NpemUgPSAyNDsKICAgIHZhciBkYXRhX2xlbmd0aCA9IGNhbGN1bGF0ZVdhdmVmb3JtRGF0YUxlbmd0aChsZW5ndGgsIHNjYWxlKTsKICAgIHZhciBieXRlc19wZXJfc2FtcGxlID0gb3B0aW9ucy5iaXRzID09PSA4ID8gMSA6IDI7CiAgICB2YXIgdG90YWxfc2l6ZSA9IGhlYWRlcl9zaXplICsgZGF0YV9sZW5ndGggKiAyICogYnl0ZXNfcGVyX3NhbXBsZSAqIG91dHB1dF9jaGFubmVsczsKICAgIHZhciBidWZmZXIgPSBuZXcgQXJyYXlCdWZmZXIodG90YWxfc2l6ZSk7CiAgICB2YXIgZGF0YV92aWV3ID0gbmV3IERhdGFWaWV3KGJ1ZmZlcik7CiAgICB2YXIgc2NhbGVfY291bnRlciA9IDA7CiAgICB2YXIgb2Zmc2V0ID0gaGVhZGVyX3NpemU7CiAgICB2YXIgbWluX3ZhbHVlID0gbmV3IEFycmF5KG91dHB1dF9jaGFubmVscyk7CiAgICB2YXIgbWF4X3ZhbHVlID0gbmV3IEFycmF5KG91dHB1dF9jaGFubmVscyk7CiAgICBmb3IgKHZhciBjaGFubmVsID0gMDsgY2hhbm5lbCA8IG91dHB1dF9jaGFubmVsczsgY2hhbm5lbCsrKSB7CiAgICAgIG1pbl92YWx1ZVtjaGFubmVsXSA9IEluZmluaXR5OwogICAgICBtYXhfdmFsdWVbY2hhbm5lbF0gPSAtSW5maW5pdHk7CiAgICB9CiAgICB2YXIgcmFuZ2VfbWluID0gb3B0aW9ucy5iaXRzID09PSA4ID8gSU5UOF9NSU4gOiBJTlQxNl9NSU47CiAgICB2YXIgcmFuZ2VfbWF4ID0gb3B0aW9ucy5iaXRzID09PSA4ID8gSU5UOF9NQVggOiBJTlQxNl9NQVg7CiAgICBkYXRhX3ZpZXcuc2V0SW50MzIoMCwgMiwgdHJ1ZSk7IC8vIFZlcnNpb24KICAgIGRhdGFfdmlldy5zZXRVaW50MzIoNCwgb3B0aW9ucy5iaXRzID09PSA4LCB0cnVlKTsgLy8gSXMgOCBiaXQ/CiAgICBkYXRhX3ZpZXcuc2V0SW50MzIoOCwgc2FtcGxlX3JhdGUsIHRydWUpOyAvLyBTYW1wbGUgcmF0ZQogICAgZGF0YV92aWV3LnNldEludDMyKDEyLCBzY2FsZSwgdHJ1ZSk7IC8vIFNjYWxlCiAgICBkYXRhX3ZpZXcuc2V0SW50MzIoMTYsIGRhdGFfbGVuZ3RoLCB0cnVlKTsgLy8gTGVuZ3RoCiAgICBkYXRhX3ZpZXcuc2V0SW50MzIoMjAsIG91dHB1dF9jaGFubmVscywgdHJ1ZSk7CiAgICBmb3IgKHZhciBpID0gMDsgaSA8IGxlbmd0aDsgaSsrKSB7CiAgICAgIHZhciBzYW1wbGUgPSAwOwogICAgICBpZiAob3V0cHV0X2NoYW5uZWxzID09PSAxKSB7CiAgICAgICAgZm9yICh2YXIgX2NoYW5uZWwgPSAwOyBfY2hhbm5lbCA8IGNoYW5uZWxzLmxlbmd0aDsgKytfY2hhbm5lbCkgewogICAgICAgICAgc2FtcGxlICs9IGNoYW5uZWxzW19jaGFubmVsXVtpXTsKICAgICAgICB9CiAgICAgICAgc2FtcGxlID0gTWF0aC5mbG9vcihyYW5nZV9tYXggKiBzYW1wbGUgKiBhbXBsaXR1ZGVfc2NhbGUgLyBjaGFubmVscy5sZW5ndGgpOwogICAgICAgIGlmIChzYW1wbGUgPCBtaW5fdmFsdWVbMF0pIHsKICAgICAgICAgIG1pbl92YWx1ZVswXSA9IHNhbXBsZTsKICAgICAgICAgIGlmIChtaW5fdmFsdWVbMF0gPCByYW5nZV9taW4pIHsKICAgICAgICAgICAgbWluX3ZhbHVlWzBdID0gcmFuZ2VfbWluOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgICBpZiAoc2FtcGxlID4gbWF4X3ZhbHVlWzBdKSB7CiAgICAgICAgICBtYXhfdmFsdWVbMF0gPSBzYW1wbGU7CiAgICAgICAgICBpZiAobWF4X3ZhbHVlWzBdID4gcmFuZ2VfbWF4KSB7CiAgICAgICAgICAgIG1heF92YWx1ZVswXSA9IHJhbmdlX21heDsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIH0gZWxzZSB7CiAgICAgICAgZm9yICh2YXIgX2NoYW5uZWwyID0gMDsgX2NoYW5uZWwyIDwgb3V0cHV0X2NoYW5uZWxzOyArK19jaGFubmVsMikgewogICAgICAgICAgc2FtcGxlID0gTWF0aC5mbG9vcihyYW5nZV9tYXggKiBjaGFubmVsc1tfY2hhbm5lbDJdW2ldICogYW1wbGl0dWRlX3NjYWxlKTsKICAgICAgICAgIGlmIChzYW1wbGUgPCBtaW5fdmFsdWVbX2NoYW5uZWwyXSkgewogICAgICAgICAgICBtaW5fdmFsdWVbX2NoYW5uZWwyXSA9IHNhbXBsZTsKICAgICAgICAgICAgaWYgKG1pbl92YWx1ZVtfY2hhbm5lbDJdIDwgcmFuZ2VfbWluKSB7CiAgICAgICAgICAgICAgbWluX3ZhbHVlW19jaGFubmVsMl0gPSByYW5nZV9taW47CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICAgIGlmIChzYW1wbGUgPiBtYXhfdmFsdWVbX2NoYW5uZWwyXSkgewogICAgICAgICAgICBtYXhfdmFsdWVbX2NoYW5uZWwyXSA9IHNhbXBsZTsKICAgICAgICAgICAgaWYgKG1heF92YWx1ZVtfY2hhbm5lbDJdID4gcmFuZ2VfbWF4KSB7CiAgICAgICAgICAgICAgbWF4X3ZhbHVlW19jaGFubmVsMl0gPSByYW5nZV9tYXg7CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIH0KICAgICAgaWYgKCsrc2NhbGVfY291bnRlciA9PT0gc2NhbGUpIHsKICAgICAgICBmb3IgKHZhciBfY2hhbm5lbDMgPSAwOyBfY2hhbm5lbDMgPCBvdXRwdXRfY2hhbm5lbHM7IF9jaGFubmVsMysrKSB7CiAgICAgICAgICBpZiAob3B0aW9ucy5iaXRzID09PSA4KSB7CiAgICAgICAgICAgIGRhdGFfdmlldy5zZXRJbnQ4KG9mZnNldCsrLCBtaW5fdmFsdWVbX2NoYW5uZWwzXSk7CiAgICAgICAgICAgIGRhdGFfdmlldy5zZXRJbnQ4KG9mZnNldCsrLCBtYXhfdmFsdWVbX2NoYW5uZWwzXSk7CiAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICBkYXRhX3ZpZXcuc2V0SW50MTYob2Zmc2V0LCBtaW5fdmFsdWVbX2NoYW5uZWwzXSwgdHJ1ZSk7CiAgICAgICAgICAgIGRhdGFfdmlldy5zZXRJbnQxNihvZmZzZXQgKyAyLCBtYXhfdmFsdWVbX2NoYW5uZWwzXSwgdHJ1ZSk7CiAgICAgICAgICAgIG9mZnNldCArPSA0OwogICAgICAgICAgfQogICAgICAgICAgbWluX3ZhbHVlW19jaGFubmVsM10gPSBJbmZpbml0eTsKICAgICAgICAgIG1heF92YWx1ZVtfY2hhbm5lbDNdID0gLUluZmluaXR5OwogICAgICAgIH0KICAgICAgICBzY2FsZV9jb3VudGVyID0gMDsKICAgICAgfQogICAgfQogICAgaWYgKHNjYWxlX2NvdW50ZXIgPiAwKSB7CiAgICAgIGZvciAodmFyIF9jaGFubmVsNCA9IDA7IF9jaGFubmVsNCA8IG91dHB1dF9jaGFubmVsczsgX2NoYW5uZWw0KyspIHsKICAgICAgICBpZiAob3B0aW9ucy5iaXRzID09PSA4KSB7CiAgICAgICAgICBkYXRhX3ZpZXcuc2V0SW50OChvZmZzZXQrKywgbWluX3ZhbHVlW19jaGFubmVsNF0pOwogICAgICAgICAgZGF0YV92aWV3LnNldEludDgob2Zmc2V0KyssIG1heF92YWx1ZVtfY2hhbm5lbDRdKTsKICAgICAgICB9IGVsc2UgewogICAgICAgICAgZGF0YV92aWV3LnNldEludDE2KG9mZnNldCwgbWluX3ZhbHVlW19jaGFubmVsNF0sIHRydWUpOwogICAgICAgICAgZGF0YV92aWV3LnNldEludDE2KG9mZnNldCArIDIsIG1heF92YWx1ZVtfY2hhbm5lbDRdLCB0cnVlKTsKICAgICAgICB9CiAgICAgIH0KICAgIH0KICAgIHJldHVybiBidWZmZXI7CiAgfQoKICBvbm1lc3NhZ2UgPSBmdW5jdGlvbiBvbm1lc3NhZ2UoZXZ0KSB7CiAgICB2YXIgYnVmZmVyID0gZ2VuZXJhdGVXYXZlZm9ybURhdGEoZXZ0LmRhdGEpOwoKICAgIC8vIFRyYW5zZmVyIGJ1ZmZlciB0byB0aGUgY2FsbGluZyB0aHJlYWQKICAgIHRoaXMucG9zdE1lc3NhZ2UoYnVmZmVyLCBbYnVmZmVyXSk7CiAgICB0aGlzLmNsb3NlKCk7CiAgfTsKCn0pKCk7Ci8vIyBzb3VyY2VNYXBwaW5nVVJMPXdhdmVmb3JtLWRhdGEtd29ya2VyLmpzLm1hcAoK");
-function Ze(e) {
+function Ve(e) {
   if (Vo(e) && (e = zo(e)), Po(e)) {
     this._data = new DataView(e), this._offset = this._version() === 2 ? 24 : 20, this._channels = [];
     for (var t = 0; t < this.channels; t++)
@@ -2557,11 +2557,11 @@ function qn(e, t, n) {
       sample_rate: e.sampleRate,
       channels: r
     });
-    n(void 0, new Ze(a), e);
+    n(void 0, new Ve(a), e);
   } else {
     var s = new No();
     s.onmessage = function(o) {
-      n(void 0, new Ze(o.data), e);
+      n(void 0, new Ve(o.data), e);
     }, s.postMessage({
       scale: t.scale,
       bits: t.bits,
@@ -2583,10 +2583,10 @@ function Oo(e, t, n, r) {
   }, a);
   s && s.catch(a);
 }
-Ze.create = function(t) {
-  return new Ze(t);
+Ve.create = function(t) {
+  return new Ve(t);
 };
-Ze.createFromAudio = function(e, t) {
+Ve.createFromAudio = function(e, t) {
   var n = Lo(e);
   if (e.audio_context && e.array_buffer)
     return Oo(e.audio_context, e.array_buffer, n, t);
@@ -2600,7 +2600,7 @@ Ze.createFromAudio = function(e, t) {
 function Wt(e) {
   this._inputData = e.waveformData, this._output_samples_per_pixel = e.scale, this._scale = this._inputData.scale, this._input_buffer_size = this._inputData.length;
   var t = this._input_buffer_size * this._inputData.scale, n = Math.ceil(t / this._output_samples_per_pixel), r = 24, a = this._inputData.bits === 8 ? 1 : 2, s = r + n * 2 * this._inputData.channels * a;
-  this._output_data = new ArrayBuffer(s), this.output_dataview = new DataView(this._output_data), this.output_dataview.setInt32(0, 2, !0), this.output_dataview.setUint32(4, this._inputData.bits === 8, !0), this.output_dataview.setInt32(8, this._inputData.sample_rate, !0), this.output_dataview.setInt32(12, this._output_samples_per_pixel, !0), this.output_dataview.setInt32(16, n, !0), this.output_dataview.setInt32(20, this._inputData.channels, !0), this._outputWaveformData = new Ze(this._output_data), this._input_index = 0, this._output_index = 0;
+  this._output_data = new ArrayBuffer(s), this.output_dataview = new DataView(this._output_data), this.output_dataview.setInt32(0, 2, !0), this.output_dataview.setUint32(4, this._inputData.bits === 8, !0), this.output_dataview.setInt32(8, this._inputData.sample_rate, !0), this.output_dataview.setInt32(12, this._output_samples_per_pixel, !0), this.output_dataview.setInt32(16, n, !0), this.output_dataview.setInt32(20, this._inputData.channels, !0), this._outputWaveformData = new Ve(this._output_data), this._input_index = 0, this._output_index = 0;
   var o = this._inputData.channels;
   this._min = new Array(o), this._max = new Array(o);
   for (var i = 0; i < o; ++i)
@@ -2640,7 +2640,7 @@ Wt.prototype.next = function() {
 Wt.prototype.getOutputData = function() {
   return this._output_data;
 };
-Ze.prototype = {
+Ve.prototype = {
   _getResampleOptions: function(t) {
     var n = {};
     if (n.scale = t.scale, n.width = t.width, !ut(n.width) && (typeof n.width != "number" || n.width <= 0))
@@ -2657,7 +2657,7 @@ Ze.prototype = {
     t = this._getResampleOptions(t), t.waveformData = this;
     for (var n = new Wt(t); !n.next(); )
       ;
-    return new Ze(n.getOutputData());
+    return new Ve(n.getOutputData());
   },
   /**
    * Concatenates with one or more other waveforms, returning a new WaveformData object.
@@ -2669,7 +2669,7 @@ Ze.prototype = {
         throw new Error("WaveformData.concat(): Waveforms are incompatible");
     });
     var r = this._concatBuffers.apply(this, n);
-    return Ze.create(r);
+    return Ve.create(r);
   },
   /**
    * Returns a new ArrayBuffer with the concatenated waveform.
@@ -2704,7 +2704,7 @@ Ze.prototype = {
       var g = this._at(n * this.channels * 2 + u);
       this.bits === 8 ? c.setInt8(s + u, g) : c.setInt16(s + u * 2, g, !0);
     }
-    return new Ze(l);
+    return new Ve(l);
   },
   /**
    * Returns the data format version number.
@@ -2823,10 +2823,10 @@ async function er(e) {
     throw new Error(`Failed to fetch waveform data: ${t.statusText}`);
   if (e.endsWith(".dat")) {
     const r = await t.arrayBuffer();
-    return Ze.create(r);
+    return Ve.create(r);
   } else {
     const r = await t.json();
-    return Ze.create(r);
+    return Ve.create(r);
   }
 }
 function Ko(e, t = 0) {
@@ -3027,11 +3027,11 @@ var jo = S.div.attrs((e) => ({
 `, Cn = S.div`
   position: absolute;
   top: 0;
-  ${(e) => e.$position === "left" ? "left: -8px" : "right: -8px"};
-  width: 16px;
+  ${(e) => e.$position === "left" ? "left: 0" : "right: 0"};
+  width: 8px;
   height: 100%;
   cursor: ew-resize;
-  z-index: 120; /* Above ClickOverlay (z-index: 100) and AnnotationBoxesWrapper (z-index: 110) */
+  z-index: 120;
   background: ${(e) => e.$isDragging ? e.theme?.annotationResizeHandleColor || "rgba(0, 0, 0, 0.2)" : "transparent"};
   border-radius: 4px;
   touch-action: none; /* Important for @dnd-kit on touch devices */
@@ -3083,7 +3083,7 @@ var jo = S.div.attrs((e) => ({
     attributes: m,
     listeners: p,
     setActivatorNodeRef: x,
-    isDragging: v
+    isDragging: w
   } = bt({
     id: y,
     data: { annotationId: e, annotationIndex: t, edge: "end" },
@@ -3091,12 +3091,12 @@ var jo = S.div.attrs((e) => ({
   });
   if (c <= 0)
     return null;
-  const f = (C) => (A) => {
-    A.stopPropagation(), C?.(A);
-  }, w = (C) => {
-    C.stopPropagation();
+  const f = (v) => (k) => {
+    k.stopPropagation(), v?.(k);
+  }, C = (v) => {
+    v.stopPropagation();
   };
-  return /* @__PURE__ */ te(jo, { $left: n, $width: c, children: [
+  return /* @__PURE__ */ ne(jo, { $left: n, $width: c, children: [
     /* @__PURE__ */ I(
       Jo,
       {
@@ -3112,7 +3112,7 @@ var jo = S.div.attrs((e) => ({
         ref: d,
         $position: "left",
         $isDragging: b,
-        onClick: w,
+        onClick: C,
         ...h,
         onPointerDown: f(h?.onPointerDown),
         ...g
@@ -3123,8 +3123,8 @@ var jo = S.div.attrs((e) => ({
       {
         ref: x,
         $position: "right",
-        $isDragging: v,
-        onClick: w,
+        $isDragging: w,
+        onClick: C,
         ...p,
         onPointerDown: f(p?.onPointerDown),
         ...m
@@ -3163,7 +3163,7 @@ var jo = S.div.attrs((e) => ({
   const {
     controls: { show: s, width: o }
   } = vt();
-  return /* @__PURE__ */ te(
+  return /* @__PURE__ */ ne(
     qo,
     {
       className: t,
@@ -3311,15 +3311,15 @@ var ns = S.div`
   onAnnotationUpdate: u,
   renderAnnotationItem: g
 }) => {
-  const h = R(null), d = R(null), b = R(void 0);
-  j(() => {
-  }), j(() => {
+  const h = T(null), d = T(null), b = T(void 0);
+  U(() => {
+  }), U(() => {
     const f = d.current;
     if (!f) return;
-    const w = () => {
+    const C = () => {
     };
-    return f.addEventListener("scroll", w), () => f.removeEventListener("scroll", w);
-  }, []), j(() => {
+    return f.addEventListener("scroll", C), () => f.removeEventListener("scroll", C);
+  }, []), U(() => {
     t && h.current && n && h.current.scrollIntoView({
       behavior: "smooth",
       block: r,
@@ -3329,78 +3329,78 @@ var ns = S.div`
   const y = (f) => {
     if (isNaN(f) || !isFinite(f))
       return "0:00.000";
-    const w = Math.floor(f / 60), C = (f % 60).toFixed(3);
-    return `${w}:${C.padStart(6, "0")}`;
-  }, m = (f, w) => {
+    const C = Math.floor(f / 60), v = (f % 60).toFixed(3);
+    return `${C}:${v.padStart(6, "0")}`;
+  }, m = (f, C) => {
     if (!s || !u) return;
-    const C = [...e];
-    C[f] = {
-      ...C[f],
-      lines: w.split(`
+    const v = [...e];
+    v[f] = {
+      ...v[f],
+      lines: C.split(`
 `)
-    }, u(C);
-  }, p = (f, w) => {
+    }, u(v);
+  }, p = (f, C) => {
     if (!s || !u) return;
-    const C = w.trim();
-    if (!C) return;
-    const A = [...e];
-    A[f] = {
-      ...A[f],
-      id: C
-    }, u(A);
-  }, x = (f, w, C) => {
+    const v = C.trim();
+    if (!v) return;
+    const k = [...e];
+    k[f] = {
+      ...k[f],
+      id: v
+    }, u(k);
+  }, x = (f, C, v) => {
     if (!u) return;
-    const A = [...e];
-    f.action(A[C], C, A, i || {}), u(A);
-  }, v = (f) => f.replace(/\./g, " ");
-  return /* @__PURE__ */ I(ns, { ref: d, $height: l, children: e.map((f, w) => {
-    const C = f.id === t, A = () => c?.(f);
+    const k = [...e];
+    f.action(k[v], v, k, i || {}), u(k);
+  }, w = (f) => f.replace(/\./g, " ");
+  return /* @__PURE__ */ I(ns, { ref: d, $height: l, children: e.map((f, C) => {
+    const v = f.id === t, k = () => c?.(f);
     return g ? /* @__PURE__ */ I(
       "div",
       {
-        ref: C ? h : null,
+        ref: v ? h : null,
         children: g({
           annotation: f,
-          index: w,
-          isActive: C,
-          onClick: A,
+          index: C,
+          isActive: v,
+          onClick: k,
           formatTime: y
         })
       },
       f.id
-    ) : /* @__PURE__ */ te(
+    ) : /* @__PURE__ */ ne(
       rs,
       {
-        ref: C ? h : null,
-        $isActive: C,
-        onClick: A,
+        ref: v ? h : null,
+        $isActive: v,
+        onClick: k,
         children: [
-          /* @__PURE__ */ te(as, { children: [
-            /* @__PURE__ */ te(os, { children: [
+          /* @__PURE__ */ ne(as, { children: [
+            /* @__PURE__ */ ne(os, { children: [
               /* @__PURE__ */ I(
                 ss,
                 {
                   $isEditable: s,
                   contentEditable: s,
                   suppressContentEditableWarning: !0,
-                  onBlur: ($) => p(w, $.currentTarget.textContent || ""),
+                  onBlur: (B) => p(C, B.currentTarget.textContent || ""),
                   children: f.id
                 }
               ),
-              /* @__PURE__ */ te(is, { children: [
+              /* @__PURE__ */ ne(is, { children: [
                 y(f.start),
                 " - ",
                 y(f.end)
               ] })
             ] }),
-            o.length > 0 && /* @__PURE__ */ I(ls, { onClick: ($) => $.stopPropagation(), children: o.map(($, k) => /* @__PURE__ */ I(
+            o.length > 0 && /* @__PURE__ */ I(ls, { onClick: (B) => B.stopPropagation(), children: o.map((B, $) => /* @__PURE__ */ I(
               cs,
               {
-                title: $.title,
-                onClick: () => x($, f, w),
-                children: $.text ? $.text : /* @__PURE__ */ I("i", { className: v($.class || "") })
+                title: B.title,
+                onClick: () => x(B, f, C),
+                children: B.text ? B.text : /* @__PURE__ */ I("i", { className: w(B.class || "") })
               },
-              k
+              $
             )) })
           ] }),
           /* @__PURE__ */ I(
@@ -3409,7 +3409,7 @@ var ns = S.div`
               $isEditable: s,
               contentEditable: s,
               suppressContentEditableWarning: !0,
-              onBlur: ($) => m(w, $.currentTarget.textContent || ""),
+              onBlur: (B) => m(C, B.currentTarget.textContent || ""),
               children: f.lines.join(`
 `)
             }
@@ -3419,12 +3419,12 @@ var ns = S.div`
       f.id
     );
   }) });
-}, or = _e.memo(ds), ms = ({
+}, or = Fe.memo(ds), ms = ({
   checked: e,
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ te(Dt, { className: r, children: [
+}) => /* @__PURE__ */ ne(Dt, { className: r, children: [
   /* @__PURE__ */ I(
     Tt,
     {
@@ -3444,7 +3444,7 @@ var ns = S.div`
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ te(Dt, { className: r, children: [
+}) => /* @__PURE__ */ ne(Dt, { className: r, children: [
   /* @__PURE__ */ I(
     Tt,
     {
@@ -3463,7 +3463,7 @@ var ns = S.div`
   checked: e,
   onChange: t,
   className: n
-}) => /* @__PURE__ */ te(Dt, { className: n, children: [
+}) => /* @__PURE__ */ ne(Dt, { className: n, children: [
   /* @__PURE__ */ I(
     Tt,
     {
@@ -3522,7 +3522,7 @@ var ns = S.div`
   }
 );
 function bs() {
-  const [e, t] = E("hh:mm:ss.uuu");
+  const [e, t] = R("hh:mm:ss.uuu");
   return {
     timeFormat: e,
     setTimeFormat: t,
@@ -3535,7 +3535,7 @@ function ws({
   initialSamplesPerPixel: e,
   zoomLevels: t = vs
 }) {
-  const [n, r] = E(() => {
+  const [n, r] = R(() => {
     const c = t.indexOf(e);
     return c !== -1 ? c : Math.floor(t.length / 2);
   }), a = t[n], s = n > 0, o = n < t.length - 1, i = D(() => {
@@ -3556,7 +3556,7 @@ function ys({
   initialVolume: t = 1,
   onVolumeChange: n
 }) {
-  const [r, a] = E(t), s = D((o) => {
+  const [r, a] = R(t), s = D((o) => {
     a(o), e.current && e.current.setMasterGain(o), n?.(o);
   }, [e, n]);
   return {
@@ -3565,7 +3565,7 @@ function ys({
   };
 }
 const wi = (e = 256) => {
-  const t = R(null), n = D((r, a, s) => {
+  const t = T(null), n = D((r, a, s) => {
     const o = new Dn("fft", e);
     return r.connect(o), r.connect(a), t.current = o, function() {
       o.dispose(), t.current = null;
@@ -3672,21 +3672,21 @@ function sr() {
   return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
 function yi(e, t = {}) {
-  const { progressive: n = !1 } = t, [r, a] = E([]), [s, o] = E(!0), [i, l] = E(null), [c, u] = E(0), g = e.length;
-  return j(() => {
+  const { progressive: n = !1 } = t, [r, a] = R([]), [s, o] = R(!0), [i, l] = R(null), [c, u] = R(0), g = e.length;
+  return U(() => {
     if (e.length === 0) {
       a([]), o(!1), u(0);
       return;
     }
     let h = !1;
     const d = /* @__PURE__ */ new Map(), b = (m, p, x) => {
-      const v = x ?? m.audioBuffer;
-      if (!v && !m.waveformData)
+      const w = x ?? m.audioBuffer;
+      if (!w && !m.waveformData)
         throw new Error(
           `Track ${p + 1}: Must provide src, audioBuffer, or waveformData`
         );
-      const f = v?.duration ?? m.waveformData?.duration, w = Cs({
-        audioBuffer: v,
+      const f = w?.duration ?? m.waveformData?.duration, C = Cs({
+        audioBuffer: w,
         startTime: m.startTime ?? 0,
         duration: m.duration ?? f,
         offset: m.offset ?? 0,
@@ -3695,12 +3695,12 @@ function yi(e, t = {}) {
         fadeOut: m.fadeOut,
         waveformData: m.waveformData
       });
-      if (isNaN(w.startSample) || isNaN(w.durationSamples) || isNaN(w.offsetSamples))
-        throw console.error("Invalid clip values:", w), new Error(`Invalid clip values for track ${p + 1}`);
+      if (isNaN(C.startSample) || isNaN(C.durationSamples) || isNaN(C.offsetSamples))
+        throw console.error("Invalid clip values:", C), new Error(`Invalid clip values for track ${p + 1}`);
       return {
         ...xs({
           name: m.name || `Track ${p + 1}`,
-          clips: [w],
+          clips: [C],
           muted: m.muted ?? !1,
           soloed: m.soloed ?? !1,
           volume: m.volume ?? 1,
@@ -3713,31 +3713,31 @@ function yi(e, t = {}) {
     return (async () => {
       try {
         o(!0), l(null), u(0);
-        const m = _r.getContext().rawContext, p = e.map(async (v, f) => {
-          if (v.audioBuffer) {
-            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)
-            )), k;
+        const m = _r.getContext().rawContext, p = e.map(async (w, f) => {
+          if (w.audioBuffer) {
+            const $ = b(w, f, w.audioBuffer);
+            return n && !h && (d.set(f, $), u((A) => A + 1), a(
+              Array.from({ length: e.length }, (A, M) => d.get(M)).filter((A) => A !== void 0)
+            )), $;
           }
-          if (!v.src && v.waveformData) {
-            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)
-            )), k;
+          if (!w.src && w.waveformData) {
+            const $ = b(w, f);
+            return n && !h && (d.set(f, $), u((A) => A + 1), a(
+              Array.from({ length: e.length }, (A, M) => d.get(M)).filter((A) => A !== void 0)
+            )), $;
           }
-          if (!v.src)
+          if (!w.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 C = await w.arrayBuffer(), A = await m.decodeAudioData(C);
-          if (!A || !A.sampleRate || !A.duration)
-            throw new Error(`Invalid audio buffer for ${v.src}`);
-          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)
-          )), $;
+          const C = await fetch(w.src);
+          if (!C.ok)
+            throw new Error(`Failed to fetch ${w.src}: ${C.statusText}`);
+          const v = await C.arrayBuffer(), k = await m.decodeAudioData(v);
+          if (!k || !k.sampleRate || !k.duration)
+            throw new Error(`Invalid audio buffer for ${w.src}`);
+          const B = b(w, f, k);
+          return n && !h && (d.set(f, B), u(($) => $ + 1), a(
+            Array.from({ length: e.length }, ($, A) => d.get(A)).filter(($) => $ !== void 0)
+          )), B;
         }), x = await Promise.all(p);
         h || (n || (a(x), u(x.length)), o(!1));
       } catch (m) {
@@ -3757,7 +3757,7 @@ function Ci({
   samplesPerPixel: n,
   sampleRate: r
 }) {
-  const a = _e.useRef(null), s = _e.useCallback(
+  const a = Fe.useRef(null), s = Fe.useCallback(
     (c) => {
       const { transform: u, active: g } = c;
       if (!g?.data?.current) return { ...u, scaleX: 1, scaleY: 1 };
@@ -3768,30 +3768,30 @@ function Ci({
       if (!y) return { ...u, scaleX: 1, scaleY: 1 };
       const m = y.clips[d];
       if (!m) return { ...u, scaleX: 1, scaleY: 1 };
-      const p = m.startSample / r, x = m.durationSamples / r, v = u.x * n / r;
-      let f = p + v;
-      const w = [...y.clips].sort((M, _) => M.startSample - _.startSample), C = w.findIndex((M) => M === m);
+      const p = m.startSample / r, x = m.durationSamples / r, w = u.x * n / r;
+      let f = p + w;
+      const C = [...y.clips].sort((M, _) => M.startSample - _.startSample), v = C.findIndex((M) => M === m);
       f = Math.max(0, f);
-      const A = C > 0 ? w[C - 1] : null;
-      if (A) {
-        const M = (A.startSample + A.durationSamples) / r;
+      const k = v > 0 ? C[v - 1] : null;
+      if (k) {
+        const M = (k.startSample + k.durationSamples) / r;
         f = Math.max(f, M);
       }
-      const $ = C < w.length - 1 ? w[C + 1] : null;
-      if ($) {
-        const M = f + x, _ = $.startSample / r;
+      const B = v < C.length - 1 ? C[v + 1] : null;
+      if (B) {
+        const M = f + x, _ = B.startSample / r;
         M > _ && (f = _ - x);
       }
-      const B = (f - p) * r / n;
+      const A = (f - p) * r / n;
       return {
         ...u,
-        x: B,
+        x: A,
         scaleX: 1,
         scaleY: 1
       };
     },
     [e, n, r]
-  ), o = _e.useCallback(
+  ), o = Fe.useCallback(
     (c) => {
       const { active: u } = c, { boundary: g } = u.data.current;
       if (!g) {
@@ -3806,48 +3806,48 @@ function Ci({
       });
     },
     [e]
-  ), i = _e.useCallback(
+  ), i = Fe.useCallback(
     (c) => {
       const { active: u, delta: g } = c, { boundary: h } = u.data.current;
       if (!h || !a.current) return;
-      const { trackIndex: d, clipIndex: b } = u.data.current, y = 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(($, k) => $.startSample - k.startSample), C = w.findIndex(($) => $ === v.clips[b]), A = v.clips.map(($, k) => {
-          if (k !== b) return $;
-          const B = $.sourceDurationSamples;
+      const { trackIndex: d, clipIndex: b } = u.data.current, y = g.x * n, m = Math.floor(0.1 * r), p = a.current, x = e.map((w, f) => {
+        if (f !== d) return w;
+        const C = [...w.clips].sort((B, $) => B.startSample - $.startSample), v = C.findIndex((B) => B === w.clips[b]), k = w.clips.map((B, $) => {
+          if ($ !== b) return B;
+          const A = B.sourceDurationSamples;
           if (h === "left") {
             let M = Math.floor(y);
             const _ = -p.startSample;
             M < _ && (M = _);
-            const T = -p.offsetSamples;
-            M < T && (M = T);
-            const H = C > 0 ? w[C - 1] : null;
-            if (H) {
-              const J = H.startSample + H.durationSamples - p.startSample;
-              M < J && (M = J);
+            const E = -p.offsetSamples;
+            M < E && (M = E);
+            const V = v > 0 ? C[v - 1] : null;
+            if (V) {
+              const Q = V.startSample + V.durationSamples - p.startSample;
+              M < Q && (M = Q);
             }
-            const P = p.durationSamples - m;
-            M > P && (M = P);
-            const F = p.offsetSamples + M, O = p.durationSamples - M, N = p.startSample + M;
+            const z = p.durationSamples - m;
+            M > z && (M = z);
+            const P = p.offsetSamples + M, K = p.durationSamples - M, X = p.startSample + M;
             return {
-              ...$,
-              offsetSamples: F,
-              durationSamples: O,
-              startSample: N
+              ...B,
+              offsetSamples: P,
+              durationSamples: K,
+              startSample: X
             };
           } else {
             let M = Math.floor(p.durationSamples + y);
-            M = Math.max(m, M), p.offsetSamples + M > B && (M = B - p.offsetSamples);
-            const _ = C < w.length - 1 ? w[C + 1] : null;
-            return _ && p.startSample + M > _.startSample && (M = _.startSample - p.startSample, M = Math.max(m, M)), { ...$, durationSamples: M };
+            M = Math.max(m, M), p.offsetSamples + M > A && (M = A - p.offsetSamples);
+            const _ = v < C.length - 1 ? C[v + 1] : null;
+            return _ && p.startSample + M > _.startSample && (M = _.startSample - p.startSample, M = Math.max(m, M)), { ...B, durationSamples: M };
           }
         });
-        return { ...v, clips: A };
+        return { ...w, clips: k };
       });
       t(x);
     },
     [e, t, n, r]
-  ), l = _e.useCallback(
+  ), l = Fe.useCallback(
     (c) => {
       const { active: u, delta: g } = c, { trackIndex: h, clipIndex: d, boundary: b } = u.data.current, y = g.x * n;
       if (b) {
@@ -3856,24 +3856,24 @@ function Ci({
       }
       const m = e.map((p, x) => {
         if (x !== h) return p;
-        const v = [...p.clips].sort((C, A) => C.startSample - A.startSample), f = v.findIndex((C) => C === p.clips[d]), w = p.clips.map((C, A) => {
-          if (A !== d) return C;
-          let $ = Math.floor(C.startSample + y);
-          $ = Math.max(0, $);
-          const k = f > 0 ? v[f - 1] : null;
-          if (k) {
-            const M = k.startSample + k.durationSamples;
-            $ = Math.max($, M);
+        const w = [...p.clips].sort((v, k) => v.startSample - k.startSample), f = w.findIndex((v) => v === p.clips[d]), C = p.clips.map((v, k) => {
+          if (k !== d) return v;
+          let B = Math.floor(v.startSample + y);
+          B = Math.max(0, B);
+          const $ = f > 0 ? w[f - 1] : null;
+          if ($) {
+            const M = $.startSample + $.durationSamples;
+            B = Math.max(B, M);
           }
-          const B = f < v.length - 1 ? v[f + 1] : null;
-          return B && $ + C.durationSamples > B.startSample && ($ = B.startSample - C.durationSamples), {
-            ...C,
-            startSample: $
+          const A = f < w.length - 1 ? w[f + 1] : null;
+          return A && B + v.durationSamples > A.startSample && (B = A.startSample - v.durationSamples), {
+            ...v,
+            startSample: B
           };
         });
         return {
           ...p,
-          clips: w
+          clips: C
         };
       });
       t(m);
@@ -3896,7 +3896,7 @@ function Is({
   duration: a,
   linkEndpoints: s
 }) {
-  const o = _e.useRef(null), i = _e.useCallback(
+  const o = Fe.useRef(null), i = Fe.useCallback(
     (u) => {
       const { active: g } = u, h = g.data.current;
       if (!h || h.annotationIndex === void 0) {
@@ -3911,14 +3911,14 @@ function Is({
       });
     },
     [e]
-  ), l = _e.useCallback(
+  ), l = Fe.useCallback(
     (u) => {
       const { active: g, delta: h } = u;
       if (!o.current)
         return;
       const d = g.data.current;
       if (!d) return;
-      const { edge: b, annotationIndex: y } = d, m = o.current, p = h.x * n / r, x = b === "start" ? m.start + p : m.end + p, v = As({
+      const { edge: b, annotationIndex: y } = d, m = o.current, p = h.x * n / r, x = b === "start" ? m.start + p : m.end + p, w = As({
         annotationIndex: y,
         newTime: x,
         isDraggingStart: b === "start",
@@ -3926,10 +3926,10 @@ function Is({
         duration: a,
         linkEndpoints: s
       });
-      t(v);
+      t(w);
     },
     [e, t, n, r, a, s]
-  ), c = _e.useCallback(() => {
+  ), c = Fe.useCallback(() => {
     o.current = null;
   }, []);
   return {
@@ -4045,7 +4045,7 @@ function xi(e = {}) {
   );
 }
 const Ii = (e) => {
-  const { tracks: t, onTracksChange: n, sampleRate: r } = e, { currentTimeRef: a } = Fe(), { selectedTrackId: s } = Ge(), o = D(
+  const { tracks: t, onTracksChange: n, sampleRate: r } = e, { currentTimeRef: a } = Ze(), { selectedTrackId: s } = Ne(), o = D(
     (l, c, u) => {
       const { sampleRate: g, samplesPerPixel: h } = e, d = t[l];
       if (!d) return !1;
@@ -4054,10 +4054,10 @@ const Ii = (e) => {
       const y = b.startSample / g, m = (b.startSample + b.durationSamples) / g;
       if (u <= y || 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, C = f - w, A = f, $ = v - A, k = f - b.startSample, B = Yt({
+      const p = Math.round(u * g), x = Math.floor(p / h), w = b.startSample + b.durationSamples, f = x * h, C = b.startSample, v = f - C, k = f, B = w - k, $ = f - b.startSample, A = Yt({
         audioBuffer: b.audioBuffer,
-        startSample: w,
-        durationSamples: C,
+        startSample: C,
+        durationSamples: v,
         offsetSamples: b.offsetSamples,
         sampleRate: b.sampleRate,
         sourceDurationSamples: b.sourceDurationSamples,
@@ -4070,9 +4070,9 @@ const Ii = (e) => {
         // Note: fadeOut removed for first clip since it's cut
       }), M = Yt({
         audioBuffer: b.audioBuffer,
-        startSample: A,
-        durationSamples: $,
-        offsetSamples: b.offsetSamples + k,
+        startSample: k,
+        durationSamples: B,
+        offsetSamples: b.offsetSamples + $,
         sampleRate: b.sampleRate,
         sourceDurationSamples: b.sourceDurationSamples,
         gain: b.gain,
@@ -4083,12 +4083,12 @@ const Ii = (e) => {
         // Note: fadeIn removed for second clip since it's cut
         fadeOut: b.fadeOut
       }), _ = [...d.clips];
-      _.splice(c, 1, B, M);
-      const T = [...t];
-      return T[l] = {
+      _.splice(c, 1, A, M);
+      const E = [...t];
+      return E[l] = {
         ...d,
         clips: _
-      }, n(T), !0;
+      }, n(E), !0;
     },
     [t, n, e]
   );
@@ -4124,7 +4124,7 @@ const Ii = (e) => {
     },
     [t, n]
   );
-  j(() => {
+  U(() => {
     if (n)
       return window.addEventListener("keydown", r), () => {
         window.removeEventListener("keydown", r);
@@ -4134,7 +4134,7 @@ const Ii = (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("+");
 }, ki = (e = {}) => {
-  const { enabled: t = !0, additionalShortcuts: n = [], shortcuts: r } = e, { isPlaying: a } = Fe(), { setCurrentTime: s, play: o, pause: i, stop: l } = ge(), { playoutRef: c } = De(), u = D(() => {
+  const { enabled: t = !0, additionalShortcuts: n = [], shortcuts: r } = e, { isPlaying: a } = Ze(), { setCurrentTime: s, play: o, pause: i, stop: l } = ge(), { playoutRef: c } = Be(), u = D(() => {
     a ? i() : o();
   }, [a, o, i]), g = D(() => {
     l();
@@ -4185,14 +4185,14 @@ function Si({
   controlsWidth: g = 0,
   onPlay: h
 }) {
-  const d = nt(() => t ? e.findIndex((k) => k.id === t) : -1, [e, t]), b = D(
-    (k) => {
+  const d = nt(() => t ? e.findIndex(($) => $.id === t) : -1, [e, t]), b = D(
+    ($) => {
       if (!l?.current || !c || !u) return;
-      const B = e.find((Z) => Z.id === k);
-      if (!B) return;
-      const M = l.current, _ = M.clientWidth, T = B.start * u / c + g, H = B.end * u / c + g, P = (T + H) / 2, F = M.scrollLeft, O = F, N = F + _;
-      if (T < O || H > N) {
-        const Z = Math.max(0, P - _ / 2);
+      const A = e.find((Z) => Z.id === $);
+      if (!A) return;
+      const M = l.current, _ = M.clientWidth, E = A.start * u / c + g, V = A.end * u / c + g, z = (E + V) / 2, P = M.scrollLeft, K = P, X = P + _;
+      if (E < K || V > X) {
+        const Z = Math.max(0, z - _ / 2);
         M.scrollTo({
           left: Z,
           behavior: "smooth"
@@ -4201,98 +4201,98 @@ function Si({
     },
     [e, l, c, u, g]
   );
-  j(() => {
+  U(() => {
     t && l?.current && c && u && b(t);
   }, [t, b, l, c, u]);
   const y = D(
-    (k) => {
+    ($) => {
       if (d < 0) return;
-      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,
+      const A = e[d], M = Math.max(0, Math.min(A.end - 0.1, A.start + $)), _ = M - A.start, E = [...e];
+      if (E[d] = {
+        ...A,
         start: M
       }, s && d > 0) {
-        const H = T[d - 1];
-        Math.abs(H.end - B.start) < Gt && (T[d - 1] = {
-          ...H,
-          end: Math.max(H.start + 0.1, H.end + _)
+        const V = E[d - 1];
+        Math.abs(V.end - A.start) < Gt && (E[d - 1] = {
+          ...V,
+          end: Math.max(V.start + 0.1, V.end + _)
         });
       } else if (!s && d > 0) {
-        const H = T[d - 1];
-        M < H.end && (T[d - 1] = {
-          ...H,
+        const V = E[d - 1];
+        M < V.end && (E[d - 1] = {
+          ...V,
           end: M
         });
       }
-      n(T);
+      n(E);
     },
     [e, d, s, n]
   ), m = D(
-    (k) => {
+    ($) => {
       if (d < 0) return;
-      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,
+      const A = e[d], M = Math.max(A.start + 0.1, Math.min(a, A.end + $)), _ = M - A.end, E = [...e];
+      if (E[d] = {
+        ...A,
         end: M
       }, s && d < e.length - 1) {
-        const H = T[d + 1];
-        if (Math.abs(H.start - B.end) < Gt) {
-          const P = Math.min(H.end - 0.1, H.start + _);
-          T[d + 1] = {
-            ...H,
-            start: P
+        const V = E[d + 1];
+        if (Math.abs(V.start - A.end) < Gt) {
+          const z = Math.min(V.end - 0.1, V.start + _);
+          E[d + 1] = {
+            ...V,
+            start: z
           };
-          let F = d + 1;
-          for (; F < T.length - 1; ) {
-            const O = T[F], N = T[F + 1];
-            if (Math.abs(N.start - e[F].end) < Gt) {
-              const Z = O.end - e[F].end;
-              T[F + 1] = {
-                ...N,
-                start: Math.min(N.end - 0.1, N.start + Z)
-              }, F++;
+          let P = d + 1;
+          for (; P < E.length - 1; ) {
+            const K = E[P], X = E[P + 1];
+            if (Math.abs(X.start - e[P].end) < Gt) {
+              const Z = K.end - e[P].end;
+              E[P + 1] = {
+                ...X,
+                start: Math.min(X.end - 0.1, X.start + Z)
+              }, P++;
             } else
               break;
           }
         }
       } else if (!s && d < e.length - 1) {
-        const H = T[d + 1];
-        if (M > H.start) {
-          T[d + 1] = {
-            ...H,
+        const V = E[d + 1];
+        if (M > V.start) {
+          E[d + 1] = {
+            ...V,
             start: M
           };
-          let P = d + 1;
-          for (; P < T.length - 1; ) {
-            const F = T[P], O = T[P + 1];
-            if (F.end > O.start)
-              T[P + 1] = {
-                ...O,
-                start: F.end
-              }, P++;
+          let z = d + 1;
+          for (; z < E.length - 1; ) {
+            const P = E[z], K = E[z + 1];
+            if (P.end > K.start)
+              E[z + 1] = {
+                ...K,
+                start: P.end
+              }, z++;
             else
               break;
           }
         }
       }
-      n(T);
+      n(E);
     },
     [e, d, a, s, n]
   ), p = D(() => {
     !r || e.length === 0 || (d <= 0 ? r(e[e.length - 1].id) : r(e[d - 1].id));
   }, [e, d, r]), x = D(() => {
     !r || e.length === 0 || (d < 0 || d >= e.length - 1 ? r(e[0].id) : r(e[d + 1].id));
-  }, [e, d, r]), v = D(() => {
+  }, [e, d, r]), w = D(() => {
     !r || e.length === 0 || r(e[0].id);
   }, [e, r]), f = D(() => {
     !r || e.length === 0 || r(e[e.length - 1].id);
-  }, [e, r]), w = D(() => {
+  }, [e, r]), C = D(() => {
     r && r(null);
-  }, [r]), C = D(() => {
+  }, [r]), v = D(() => {
     if (d < 0 || !h) return;
-    const k = e[d], B = o ? void 0 : k.end - k.start;
-    h(k.start, B);
-  }, [e, d, o, h]), A = nt(
+    const $ = e[d], A = o ? void 0 : $.end - $.start;
+    h($.start, A);
+  }, [e, d, o, h]), k = nt(
     () => [
       {
         key: "[",
@@ -4322,13 +4322,13 @@ function Si({
       },
       {
         key: "Enter",
-        action: C,
+        action: v,
         description: "Play selected annotation",
         preventDefault: !0
       }
     ],
-    [y, m, C]
-  ), $ = nt(
+    [y, m, v]
+  ), B = nt(
     () => [
       {
         key: "ArrowUp",
@@ -4356,7 +4356,7 @@ function Si({
       },
       {
         key: "Home",
-        action: v,
+        action: w,
         description: "Select first annotation",
         preventDefault: !0
       },
@@ -4368,29 +4368,29 @@ function Si({
       },
       {
         key: "Escape",
-        action: w,
+        action: C,
         description: "Deselect annotation",
         preventDefault: !0
       }
     ],
-    [p, x, v, f, w]
+    [p, x, w, f, C]
   );
   return Ot({
-    shortcuts: A,
+    shortcuts: k,
     enabled: i && d >= 0
   }), Ot({
-    shortcuts: $,
+    shortcuts: B,
     enabled: i && e.length > 0 && !!r
   }), {
     moveStartBoundary: y,
     moveEndBoundary: m,
     selectPrevious: p,
     selectNext: x,
-    selectFirst: v,
+    selectFirst: w,
     selectLast: f,
-    clearSelection: w,
+    clearSelection: C,
     scrollToAnnotation: b,
-    playActiveAnnotation: C
+    playActiveAnnotation: v
   };
 }
 function ks(e) {
@@ -4443,99 +4443,99 @@ function Ms(e, t = {}) {
   const {
     channelCount: n = 1,
     samplesPerPixel: r = 1024
-  } = t, [a, s] = E(!1), [o, i] = E(!1), [l, c] = E(0), [u, g] = E(new Int16Array(0)), [h, d] = E(null), [b, y] = E(null), [m, p] = E(0), [x, v] = E(0), f = 16, w = R(!1), C = R(null), A = R(null), $ = R([]), k = R(0), B = R(null), M = R(0), _ = R(!1), T = R(!1), H = D(async () => {
-    if (!w.current)
+  } = t, [a, s] = R(!1), [o, i] = R(!1), [l, c] = R(0), [u, g] = R(new Int16Array(0)), [h, d] = R(null), [b, y] = R(null), [m, p] = R(0), [x, w] = R(0), f = 16, C = T(!1), v = T(null), k = T(null), B = T([]), $ = T(0), A = T(null), M = T(0), _ = T(!1), E = T(!1), V = D(async () => {
+    if (!C.current)
       try {
-        const Z = ke(), J = new URL("data:text/javascript;base64,InVzZSBzdHJpY3QiOwoKLy8gc3JjL3dvcmtsZXQvcmVjb3JkaW5nLXByb2Nlc3Nvci53b3JrbGV0LnRzCnZhciBSZWNvcmRpbmdQcm9jZXNzb3IgPSBjbGFzcyBleHRlbmRzIEF1ZGlvV29ya2xldFByb2Nlc3NvciB7CiAgY29uc3RydWN0b3IoKSB7CiAgICBzdXBlcigpOwogICAgdGhpcy5idWZmZXJTaXplID0gMDsKICAgIHRoaXMuYnVmZmVycyA9IFtdOwogICAgdGhpcy5zYW1wbGVzQ29sbGVjdGVkID0gMDsKICAgIHRoaXMuaXNSZWNvcmRpbmcgPSBmYWxzZTsKICAgIHRoaXMuY2hhbm5lbENvdW50ID0gMTsKICAgIHRoaXMucG9ydC5vbm1lc3NhZ2UgPSAoZXZlbnQpID0+IHsKICAgICAgY29uc3QgeyBjb21tYW5kLCBzYW1wbGVSYXRlOiBzYW1wbGVSYXRlMiwgY2hhbm5lbENvdW50IH0gPSBldmVudC5kYXRhOwogICAgICBpZiAoY29tbWFuZCA9PT0gInN0YXJ0IikgewogICAgICAgIHRoaXMuaXNSZWNvcmRpbmcgPSB0cnVlOwogICAgICAgIHRoaXMuY2hhbm5lbENvdW50ID0gY2hhbm5lbENvdW50IHx8IDE7CiAgICAgICAgdGhpcy5idWZmZXJTaXplID0gTWF0aC5mbG9vcigoc2FtcGxlUmF0ZTIgfHwgNDhlMykgKiAwLjAxNik7CiAgICAgICAgdGhpcy5idWZmZXJzID0gW107CiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLmNoYW5uZWxDb3VudDsgaSsrKSB7CiAgICAgICAgICB0aGlzLmJ1ZmZlcnNbaV0gPSBuZXcgRmxvYXQzMkFycmF5KHRoaXMuYnVmZmVyU2l6ZSk7CiAgICAgICAgfQogICAgICAgIHRoaXMuc2FtcGxlc0NvbGxlY3RlZCA9IDA7CiAgICAgIH0gZWxzZSBpZiAoY29tbWFuZCA9PT0gInN0b3AiKSB7CiAgICAgICAgdGhpcy5pc1JlY29yZGluZyA9IGZhbHNlOwogICAgICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPiAwKSB7CiAgICAgICAgICB0aGlzLmZsdXNoQnVmZmVycygpOwogICAgICAgIH0KICAgICAgfQogICAgfTsKICB9CiAgcHJvY2VzcyhpbnB1dHMsIG91dHB1dHMsIHBhcmFtZXRlcnMpIHsKICAgIGlmICghdGhpcy5pc1JlY29yZGluZykgewogICAgICByZXR1cm4gdHJ1ZTsKICAgIH0KICAgIGNvbnN0IGlucHV0ID0gaW5wdXRzWzBdOwogICAgaWYgKCFpbnB1dCB8fCBpbnB1dC5sZW5ndGggPT09IDApIHsKICAgICAgcmV0dXJuIHRydWU7CiAgICB9CiAgICBjb25zdCBmcmFtZUNvdW50ID0gaW5wdXRbMF0ubGVuZ3RoOwogICAgZm9yIChsZXQgY2hhbm5lbCA9IDA7IGNoYW5uZWwgPCBNYXRoLm1pbihpbnB1dC5sZW5ndGgsIHRoaXMuY2hhbm5lbENvdW50KTsgY2hhbm5lbCsrKSB7CiAgICAgIGNvbnN0IGlucHV0Q2hhbm5lbCA9IGlucHV0W2NoYW5uZWxdOwogICAgICBjb25zdCBidWZmZXIgPSB0aGlzLmJ1ZmZlcnNbY2hhbm5lbF07CiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZnJhbWVDb3VudDsgaSsrKSB7CiAgICAgICAgYnVmZmVyW3RoaXMuc2FtcGxlc0NvbGxlY3RlZCArIGldID0gaW5wdXRDaGFubmVsW2ldOwogICAgICB9CiAgICB9CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgKz0gZnJhbWVDb3VudDsKICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPj0gdGhpcy5idWZmZXJTaXplKSB7CiAgICAgIHRoaXMuZmx1c2hCdWZmZXJzKCk7CiAgICB9CiAgICByZXR1cm4gdHJ1ZTsKICB9CiAgZmx1c2hCdWZmZXJzKCkgewogICAgY29uc3Qgc2FtcGxlcyA9IHRoaXMuYnVmZmVyc1swXS5zbGljZSgwLCB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQpOwogICAgdGhpcy5wb3J0LnBvc3RNZXNzYWdlKHsKICAgICAgc2FtcGxlcywKICAgICAgc2FtcGxlUmF0ZSwKICAgICAgY2hhbm5lbENvdW50OiB0aGlzLmNoYW5uZWxDb3VudAogICAgfSk7CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPSAwOwogIH0KfTsKcmVnaXN0ZXJQcm9jZXNzb3IoInJlY29yZGluZy1wcm9jZXNzb3IiLCBSZWNvcmRpbmdQcm9jZXNzb3IpOwovLyMgc291cmNlTWFwcGluZ1VSTD1yZWNvcmRpbmctcHJvY2Vzc29yLndvcmtsZXQuanMubWFw", import.meta.url).href;
-        await Z.addAudioWorkletModule(J), w.current = !0;
+        const Z = Ae(), Q = new URL("data:text/javascript;base64,InVzZSBzdHJpY3QiOwoKLy8gc3JjL3dvcmtsZXQvcmVjb3JkaW5nLXByb2Nlc3Nvci53b3JrbGV0LnRzCnZhciBSZWNvcmRpbmdQcm9jZXNzb3IgPSBjbGFzcyBleHRlbmRzIEF1ZGlvV29ya2xldFByb2Nlc3NvciB7CiAgY29uc3RydWN0b3IoKSB7CiAgICBzdXBlcigpOwogICAgdGhpcy5idWZmZXJTaXplID0gMDsKICAgIHRoaXMuYnVmZmVycyA9IFtdOwogICAgdGhpcy5zYW1wbGVzQ29sbGVjdGVkID0gMDsKICAgIHRoaXMuaXNSZWNvcmRpbmcgPSBmYWxzZTsKICAgIHRoaXMuY2hhbm5lbENvdW50ID0gMTsKICAgIHRoaXMucG9ydC5vbm1lc3NhZ2UgPSAoZXZlbnQpID0+IHsKICAgICAgY29uc3QgeyBjb21tYW5kLCBzYW1wbGVSYXRlOiBzYW1wbGVSYXRlMiwgY2hhbm5lbENvdW50IH0gPSBldmVudC5kYXRhOwogICAgICBpZiAoY29tbWFuZCA9PT0gInN0YXJ0IikgewogICAgICAgIHRoaXMuaXNSZWNvcmRpbmcgPSB0cnVlOwogICAgICAgIHRoaXMuY2hhbm5lbENvdW50ID0gY2hhbm5lbENvdW50IHx8IDE7CiAgICAgICAgdGhpcy5idWZmZXJTaXplID0gTWF0aC5mbG9vcigoc2FtcGxlUmF0ZTIgfHwgNDhlMykgKiAwLjAxNik7CiAgICAgICAgdGhpcy5idWZmZXJzID0gW107CiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLmNoYW5uZWxDb3VudDsgaSsrKSB7CiAgICAgICAgICB0aGlzLmJ1ZmZlcnNbaV0gPSBuZXcgRmxvYXQzMkFycmF5KHRoaXMuYnVmZmVyU2l6ZSk7CiAgICAgICAgfQogICAgICAgIHRoaXMuc2FtcGxlc0NvbGxlY3RlZCA9IDA7CiAgICAgIH0gZWxzZSBpZiAoY29tbWFuZCA9PT0gInN0b3AiKSB7CiAgICAgICAgdGhpcy5pc1JlY29yZGluZyA9IGZhbHNlOwogICAgICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPiAwKSB7CiAgICAgICAgICB0aGlzLmZsdXNoQnVmZmVycygpOwogICAgICAgIH0KICAgICAgfQogICAgfTsKICB9CiAgcHJvY2VzcyhpbnB1dHMsIG91dHB1dHMsIHBhcmFtZXRlcnMpIHsKICAgIGlmICghdGhpcy5pc1JlY29yZGluZykgewogICAgICByZXR1cm4gdHJ1ZTsKICAgIH0KICAgIGNvbnN0IGlucHV0ID0gaW5wdXRzWzBdOwogICAgaWYgKCFpbnB1dCB8fCBpbnB1dC5sZW5ndGggPT09IDApIHsKICAgICAgcmV0dXJuIHRydWU7CiAgICB9CiAgICBjb25zdCBmcmFtZUNvdW50ID0gaW5wdXRbMF0ubGVuZ3RoOwogICAgZm9yIChsZXQgY2hhbm5lbCA9IDA7IGNoYW5uZWwgPCBNYXRoLm1pbihpbnB1dC5sZW5ndGgsIHRoaXMuY2hhbm5lbENvdW50KTsgY2hhbm5lbCsrKSB7CiAgICAgIGNvbnN0IGlucHV0Q2hhbm5lbCA9IGlucHV0W2NoYW5uZWxdOwogICAgICBjb25zdCBidWZmZXIgPSB0aGlzLmJ1ZmZlcnNbY2hhbm5lbF07CiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZnJhbWVDb3VudDsgaSsrKSB7CiAgICAgICAgYnVmZmVyW3RoaXMuc2FtcGxlc0NvbGxlY3RlZCArIGldID0gaW5wdXRDaGFubmVsW2ldOwogICAgICB9CiAgICB9CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgKz0gZnJhbWVDb3VudDsKICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPj0gdGhpcy5idWZmZXJTaXplKSB7CiAgICAgIHRoaXMuZmx1c2hCdWZmZXJzKCk7CiAgICB9CiAgICByZXR1cm4gdHJ1ZTsKICB9CiAgZmx1c2hCdWZmZXJzKCkgewogICAgY29uc3Qgc2FtcGxlcyA9IHRoaXMuYnVmZmVyc1swXS5zbGljZSgwLCB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQpOwogICAgdGhpcy5wb3J0LnBvc3RNZXNzYWdlKHsKICAgICAgc2FtcGxlcywKICAgICAgc2FtcGxlUmF0ZSwKICAgICAgY2hhbm5lbENvdW50OiB0aGlzLmNoYW5uZWxDb3VudAogICAgfSk7CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPSAwOwogIH0KfTsKcmVnaXN0ZXJQcm9jZXNzb3IoInJlY29yZGluZy1wcm9jZXNzb3IiLCBSZWNvcmRpbmdQcm9jZXNzb3IpOwovLyMgc291cmNlTWFwcGluZ1VSTD1yZWNvcmRpbmctcHJvY2Vzc29yLndvcmtsZXQuanMubWFw", import.meta.url).href;
+        await Z.addAudioWorkletModule(Q), C.current = !0;
       } catch (Z) {
         throw console.error("Failed to load AudioWorklet module:", Z), new Error("Failed to load recording processor");
       }
-  }, []), P = D(async () => {
+  }, []), z = D(async () => {
     if (!e) {
       y(new Error("No microphone stream available"));
       return;
     }
     try {
       y(null);
-      const Z = ke();
-      Z.state === "suspended" && await Z.resume(), await H();
-      const J = Z.createMediaStreamSource(e);
-      A.current = J;
-      const se = Z.createAudioWorkletNode("recording-processor");
-      C.current = se, J.connect(se), se.port.onmessage = (ee) => {
-        const { samples: oe } = ee.data;
-        $.current.push(oe), k.current += oe.length, g(
+      const Z = Ae();
+      Z.state === "suspended" && await Z.resume(), await V();
+      const Q = Z.createMediaStreamSource(e);
+      k.current = Q;
+      const le = Z.createAudioWorkletNode("recording-processor");
+      v.current = le, Q.connect(le), le.port.onmessage = (re) => {
+        const { samples: ae } = re.data;
+        B.current.push(ae), $.current += ae.length, g(
           (ye) => $s(
             ye,
-            oe,
+            ae,
             r,
-            k.current - oe.length,
+            $.current - ae.length,
             f
           )
         );
-      }, se.port.postMessage({
+      }, le.port.postMessage({
         command: "start",
         sampleRate: Z.sampleRate,
         channelCount: n
-      }), $.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 ae = () => {
-        if (_.current && !T.current) {
-          const ee = (performance.now() - M.current) / 1e3;
-          c(ee), B.current = requestAnimationFrame(ae);
+      }), B.current = [], $.current = 0, g(new Int16Array(0)), d(null), p(0), w(0), _.current = !0, E.current = !1, s(!0), i(!1), M.current = performance.now();
+      const te = () => {
+        if (_.current && !E.current) {
+          const re = (performance.now() - M.current) / 1e3;
+          c(re), A.current = requestAnimationFrame(te);
         }
       };
-      ae();
+      te();
     } catch (Z) {
       console.error("Failed to start recording:", Z), y(Z instanceof Error ? Z : new Error("Failed to start recording"));
     }
-  }, [e, n, r, H, a, o]), F = D(async () => {
+  }, [e, n, r, V, a, o]), P = D(async () => {
     if (!a)
       return null;
     try {
-      if (C.current) {
-        if (C.current.port.postMessage({ command: "stop" }), A.current)
+      if (v.current) {
+        if (v.current.port.postMessage({ command: "stop" }), k.current)
           try {
-            A.current.disconnect(C.current);
+            k.current.disconnect(v.current);
           } catch {
           }
-        C.current.disconnect();
+        v.current.disconnect();
       }
-      B.current !== null && (cancelAnimationFrame(B.current), B.current = null);
-      const Z = ks($.current), se = ke().rawContext, ae = Ss(
-        se,
+      A.current !== null && (cancelAnimationFrame(A.current), A.current = null);
+      const Z = ks(B.current), le = Ae().rawContext, te = Ss(
+        le,
         Z,
-        se.sampleRate,
+        le.sampleRate,
         n
       );
-      return d(ae), c(ae.duration), _.current = !1, T.current = !1, s(!1), i(!1), p(0), ae;
+      return d(te), c(te.duration), _.current = !1, E.current = !1, s(!1), i(!1), p(0), te;
     } catch (Z) {
       return console.error("Failed to stop recording:", Z), y(Z instanceof Error ? Z : new Error("Failed to stop recording")), null;
     }
-  }, [a, n]), O = D(() => {
-    a && !o && (B.current !== null && (cancelAnimationFrame(B.current), B.current = null), T.current = !0, i(!0));
-  }, [a, o]), N = D(() => {
+  }, [a, n]), K = D(() => {
+    a && !o && (A.current !== null && (cancelAnimationFrame(A.current), A.current = null), E.current = !0, i(!0));
+  }, [a, o]), X = D(() => {
     if (a && o) {
-      T.current = !1, i(!1), M.current = performance.now() - l * 1e3;
+      E.current = !1, i(!1), M.current = performance.now() - l * 1e3;
       const Z = () => {
-        if (_.current && !T.current) {
-          const J = (performance.now() - M.current) / 1e3;
-          c(J), B.current = requestAnimationFrame(Z);
+        if (_.current && !E.current) {
+          const Q = (performance.now() - M.current) / 1e3;
+          c(Q), A.current = requestAnimationFrame(Z);
         }
       };
       Z();
     }
   }, [a, o, l]);
-  return j(() => () => {
-    if (C.current) {
-      if (C.current.port.postMessage({ command: "stop" }), A.current)
+  return U(() => () => {
+    if (v.current) {
+      if (v.current.port.postMessage({ command: "stop" }), k.current)
         try {
-          A.current.disconnect(C.current);
+          k.current.disconnect(v.current);
         } catch {
         }
-      C.current.disconnect();
+      v.current.disconnect();
     }
-    B.current !== null && cancelAnimationFrame(B.current);
+    A.current !== null && cancelAnimationFrame(A.current);
   }, []), {
     isRecording: a,
     isPaused: o,
@@ -4544,15 +4544,15 @@ function Ms(e, t = {}) {
     audioBuffer: h,
     level: m,
     peakLevel: x,
-    startRecording: P,
-    stopRecording: F,
-    pauseRecording: O,
-    resumeRecording: N,
+    startRecording: z,
+    stopRecording: P,
+    pauseRecording: K,
+    resumeRecording: X,
     error: b
   };
 }
 function Bs() {
-  const [e, t] = E(null), [n, r] = E([]), [a, s] = E(!1), [o, i] = E(!1), [l, c] = E(null), u = D(async () => {
+  const [e, t] = R(null), [n, r] = R([]), [a, s] = R(!1), [o, i] = R(!1), [l, c] = R(null), u = D(async () => {
     try {
       const b = (await navigator.mediaDevices.enumerateDevices()).filter((y) => y.kind === "audioinput").map((y) => ({
         deviceId: y.deviceId,
@@ -4593,7 +4593,7 @@ function Bs() {
   }, [e, u]), h = D(() => {
     e && (e.getTracks().forEach((d) => d.stop()), t(null), s(!1));
   }, [e]);
-  return j(() => (u(), () => {
+  return U(() => (u(), () => {
     e && e.getTracks().forEach((d) => d.stop());
   }), []), {
     stream: e,
@@ -4609,8 +4609,8 @@ function Ds(e, t = {}) {
   const {
     updateRate: n = 60,
     smoothingTimeConstant: r = 0.8
-  } = t, [a, s] = E(0), [o, i] = E(0), l = R(null), c = R(null), u = R(null), g = () => i(0);
-  return j(() => {
+  } = t, [a, s] = R(0), [o, i] = R(0), l = T(null), c = T(null), u = T(null), g = () => i(0);
+  return U(() => {
     if (!e) {
       s(0), i(0);
       return;
@@ -4618,7 +4618,7 @@ function Ds(e, t = {}) {
     let h = !0;
     return (async () => {
       if (!h) return;
-      const b = ke();
+      const b = Ae();
       if (b.state === "suspended" && await b.resume(), !h) return;
       const y = new Pr({ smoothing: r, context: b });
       l.current = y;
@@ -4626,17 +4626,17 @@ function Ds(e, t = {}) {
       c.current = m, zr(m, y);
       const p = 1e3 / n;
       let x = 0;
-      const v = (f) => {
+      const w = (f) => {
         if (!(!h || !l.current)) {
           if (f - x >= p) {
             x = f;
-            const w = l.current.getValue(), C = typeof w == "number" ? w : w[0], A = Math.max(0, Math.min(1, (C + 100) / 100));
-            s(A), i(($) => Math.max($, A));
+            const C = l.current.getValue(), v = typeof C == "number" ? C : C[0], k = Math.max(0, Math.min(1, (v + 100) / 100));
+            s(k), i((B) => Math.max(B, k));
           }
-          u.current = requestAnimationFrame(v);
+          u.current = requestAnimationFrame(w);
         }
       };
-      u.current = requestAnimationFrame(v);
+      u.current = requestAnimationFrame(w);
     })(), () => {
       if (h = !1, u.current && (cancelAnimationFrame(u.current), u.current = null), c.current) {
         try {
@@ -4808,18 +4808,18 @@ var Ts = S.div`
   className: a
 }) => {
   const s = Math.max(0, Math.min(1, e)), o = t !== void 0 ? Math.max(0, Math.min(1, t)) : 0;
-  return /* @__PURE__ */ te(Ts, { $width: n, $height: r, className: a, children: [
+  return /* @__PURE__ */ ne(Ts, { $width: n, $height: r, className: a, children: [
     /* @__PURE__ */ I(Es, { $level: s, $height: r }),
     t !== void 0 && o > 0 && /* @__PURE__ */ I(Ws, { $peakLevel: o, $height: r }),
-    /* @__PURE__ */ te(_s, { $height: r, children: [
+    /* @__PURE__ */ ne(_s, { $height: r, children: [
       /* @__PURE__ */ I(In, { $position: 60, $height: r }),
       /* @__PURE__ */ I(In, { $position: 85, $height: r })
     ] })
   ] });
 };
-_e.memo(Fs);
+Fe.memo(Fs);
 function $i(e, t, n, r = {}) {
-  const { currentTime: a = 0, audioConstraints: s, ...o } = r, [i, l] = E(!1), [c, u] = E(null), {
+  const { currentTime: a = 0, audioConstraints: s, ...o } = r, [i, l] = R(!1), [c, u] = R(null), {
     stream: g,
     devices: h,
     hasPermission: d,
@@ -4827,62 +4827,62 @@ function $i(e, t, n, r = {}) {
     error: y
   } = Bs(), { level: m, peakLevel: p } = Ds(g), {
     isRecording: x,
-    isPaused: v,
+    isPaused: w,
     duration: f,
-    peaks: w,
-    startRecording: C,
-    stopRecording: A,
-    pauseRecording: $,
-    resumeRecording: k,
-    error: B
+    peaks: C,
+    startRecording: v,
+    stopRecording: k,
+    pauseRecording: B,
+    resumeRecording: $,
+    error: A
   } = Ms(g, o), M = D(async () => {
-    n && (i || (await Ht(), l(!0)), await C());
-  }, [n, i, C]), _ = D(async () => {
-    const P = await A();
-    if (P && n) {
-      const F = e.findIndex((ee) => ee.id === n);
-      if (F === -1) return;
-      const O = e[F], N = Math.floor(a * P.sampleRate);
+    n && (i || (await Ht(), l(!0)), await v());
+  }, [n, i, v]), _ = D(async () => {
+    const z = await k();
+    if (z && n) {
+      const P = e.findIndex((re) => re.id === n);
+      if (P === -1) return;
+      const K = e[P], X = Math.floor(a * z.sampleRate);
       let Z = 0;
-      if (O.clips.length > 0) {
-        const ee = O.clips.map(
-          (oe) => oe.startSample + oe.durationSamples
+      if (K.clips.length > 0) {
+        const re = K.clips.map(
+          (ae) => ae.startSample + ae.durationSamples
         );
-        Z = Math.max(...ee);
+        Z = Math.max(...re);
       }
-      const J = Math.max(N, Z), se = {
+      const Q = Math.max(X, Z), le = {
         id: `clip-${Date.now()}`,
-        audioBuffer: P,
-        startSample: J,
-        durationSamples: P.length,
+        audioBuffer: z,
+        startSample: Q,
+        durationSamples: z.length,
         offsetSamples: 0,
-        sampleRate: P.sampleRate,
-        sourceDurationSamples: P.length,
+        sampleRate: z.sampleRate,
+        sourceDurationSamples: z.length,
         gain: 1,
         name: `Recording ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`
-      }, ae = e.map((ee, oe) => oe === F ? {
-        ...ee,
-        clips: [...ee.clips, se]
-      } : ee);
-      t(ae);
+      }, te = e.map((re, ae) => ae === P ? {
+        ...re,
+        clips: [...re.clips, le]
+      } : re);
+      t(te);
     }
-  }, [n, e, t, a, A]);
-  j(() => {
+  }, [n, e, t, a, k]);
+  U(() => {
     d && h.length > 0 && c === null && u(h[0].deviceId);
   }, [d, h.length]);
-  const T = D(async () => {
+  const E = D(async () => {
     await b(void 0, s), await Ht(), l(!0);
-  }, [b, s]), H = D(async (P) => {
-    u(P), await b(P, s), await Ht(), l(!0);
+  }, [b, s]), V = D(async (z) => {
+    u(z), await b(z, s), await Ht(), l(!0);
   }, [b, s]);
   return {
     // Recording state
     isRecording: x,
-    isPaused: v,
+    isPaused: w,
     duration: f,
     level: m,
     peakLevel: p,
-    error: y || B,
+    error: y || A,
     // Microphone state
     stream: g,
     devices: h,
@@ -4891,12 +4891,12 @@ function $i(e, t, n, r = {}) {
     // Recording controls
     startRecording: M,
     stopRecording: _,
-    pauseRecording: $,
-    resumeRecording: k,
-    requestMicAccess: T,
-    changeDevice: H,
+    pauseRecording: B,
+    resumeRecording: $,
+    requestMicAccess: E,
+    changeDevice: V,
     // Track state
-    recordingPeaks: w
+    recordingPeaks: C
   };
 }
 const _t = [
@@ -5213,28 +5213,28 @@ function Di(e) {
   };
 }
 function Ti(e = 256) {
-  const [t, n] = E([]), r = R(t);
+  const [t, n] = R([]), r = T(t);
   r.current = t;
-  const a = R(/* @__PURE__ */ new Map()), s = R(null), o = R(null), i = D((m) => {
+  const a = T(/* @__PURE__ */ new Map()), s = T(null), o = T(null), i = D((m) => {
     const p = o.current;
     if (!p) return;
-    const { masterGainNode: x, destination: v, analyserNode: f } = p;
+    const { masterGainNode: x, destination: w, analyserNode: f } = p;
     try {
       x.disconnect();
     } catch {
     }
-    const w = m.map((C) => a.current.get(C.instanceId)).filter((C) => C !== void 0);
-    if (w.length === 0)
-      x.connect(f), f.connect(v);
+    const C = m.map((v) => a.current.get(v.instanceId)).filter((v) => v !== void 0);
+    if (C.length === 0)
+      x.connect(f), f.connect(w);
     else {
-      let C = x;
-      w.forEach((A) => {
+      let v = x;
+      C.forEach((k) => {
         try {
-          A.disconnect();
+          k.disconnect();
         } catch {
         }
-        C.connect(A.effect), C = A.effect;
-      }), C.connect(f), f.connect(v);
+        v.connect(k.effect), v = k.effect;
+      }), v.connect(f), f.connect(w);
     }
   }, []), l = D((m) => {
     const p = ir(m);
@@ -5243,28 +5243,28 @@ function Ti(e = 256) {
       return;
     }
     const x = {};
-    p.parameters.forEach((w) => {
-      x[w.name] = w.default;
+    p.parameters.forEach((C) => {
+      x[C.name] = C.default;
     });
-    const v = Bt(p, x);
-    a.current.set(v.instanceId, v);
+    const w = Bt(p, x);
+    a.current.set(w.instanceId, w);
     const f = {
-      instanceId: v.instanceId,
+      instanceId: w.instanceId,
       effectId: p.id,
       definition: p,
       params: x,
       bypassed: !1
     };
-    n((w) => [...w, f]);
+    n((C) => [...C, f]);
   }, []), c = D((m) => {
     const p = a.current.get(m);
-    p && (p.dispose(), a.current.delete(m)), n((x) => x.filter((v) => v.instanceId !== m));
+    p && (p.dispose(), a.current.delete(m)), n((x) => x.filter((w) => w.instanceId !== m));
   }, []), u = D(
     (m, p, x) => {
-      const v = a.current.get(m);
-      v && v.setParameter(p, x), n(
+      const w = a.current.get(m);
+      w && w.setParameter(p, x), n(
         (f) => f.map(
-          (w) => w.instanceId === m ? { ...w, params: { ...w.params, [p]: x } } : w
+          (C) => C.instanceId === m ? { ...C, params: { ...C.params, [p]: x } } : C
         )
       );
     },
@@ -5273,75 +5273,75 @@ function Ti(e = 256) {
     (m) => {
       const p = r.current.find((f) => f.instanceId === m);
       if (!p) return;
-      const x = !p.bypassed, v = a.current.get(m);
-      if (v) {
+      const x = !p.bypassed, w = a.current.get(m);
+      if (w) {
         const f = p.params.wet ?? 1;
-        v.setParameter("wet", x ? 0 : f);
+        w.setParameter("wet", x ? 0 : f);
       }
       n(
         (f) => f.map(
-          (w) => w.instanceId === m ? { ...w, bypassed: x } : w
+          (C) => C.instanceId === m ? { ...C, bypassed: x } : C
         )
       );
     },
     []
   ), h = D((m, p) => {
     n((x) => {
-      const v = [...x], [f] = v.splice(m, 1);
-      return v.splice(p, 0, f), v;
+      const w = [...x], [f] = w.splice(m, 1);
+      return w.splice(p, 0, f), w;
     });
   }, []), d = D(() => {
     a.current.forEach((m) => m.dispose()), a.current.clear(), n([]);
   }, []);
-  j(() => {
+  U(() => {
     i(t);
   }, [t, i]);
   const b = D(
     (m, p, x) => {
-      const v = new Dn("fft", e);
-      s.current = v, o.current = {
+      const w = new Dn("fft", e);
+      s.current = w, o.current = {
         masterGainNode: m,
         destination: p,
-        analyserNode: v
+        analyserNode: w
       };
-      const w = r.current.map((C) => a.current.get(C.instanceId)).filter((C) => C !== void 0);
-      if (w.length === 0)
-        m.connect(v), v.connect(p);
+      const C = r.current.map((v) => a.current.get(v.instanceId)).filter((v) => v !== void 0);
+      if (C.length === 0)
+        m.connect(w), w.connect(p);
       else {
-        let C = m;
-        w.forEach((A) => {
-          C.connect(A.effect), C = A.effect;
-        }), C.connect(v), v.connect(p);
+        let v = m;
+        C.forEach((k) => {
+          v.connect(k.effect), v = k.effect;
+        }), v.connect(w), w.connect(p);
       }
       return function() {
-        v.dispose(), s.current = null, o.current = null;
+        w.dispose(), s.current = null, o.current = null;
       };
     },
     [e]
     // Only fftSize - reads effects from ref
   );
-  j(() => () => {
+  U(() => () => {
     a.current.forEach((m) => m.dispose()), a.current.clear();
   }, []);
   const y = D(() => {
     const m = t.filter((p) => !p.bypassed);
     if (m.length !== 0)
-      return (p, x, v) => {
+      return (p, x, w) => {
         const f = [];
-        for (const w of m) {
-          const C = Bt(w.definition, w.params);
-          f.push(C);
+        for (const C of m) {
+          const v = Bt(C.definition, C.params);
+          f.push(v);
         }
         if (f.length === 0)
           p.connect(x);
         else {
-          let w = p;
-          f.forEach((C) => {
-            w.connect(C.effect), w = C.effect;
-          }), w.connect(x);
+          let C = p;
+          f.forEach((v) => {
+            C.connect(v.effect), C = v.effect;
+          }), C.connect(x);
         }
         return function() {
-          f.forEach((C) => C.dispose());
+          f.forEach((v) => v.dispose());
         };
       };
   }, [t]);
@@ -5360,9 +5360,9 @@ function Ti(e = 256) {
   };
 }
 function Ri() {
-  const [e, t] = E(
+  const [e, t] = R(
     /* @__PURE__ */ new Map()
-  ), n = R(/* @__PURE__ */ new Map()), r = R(/* @__PURE__ */ new Map()), a = D((d, b) => {
+  ), n = T(/* @__PURE__ */ new Map()), r = T(/* @__PURE__ */ new Map()), a = D((d, b) => {
     const y = r.current.get(d);
     if (!y) return;
     const { graphEnd: m, masterGainNode: p } = y, x = n.current.get(d);
@@ -5370,17 +5370,17 @@ function Ri() {
       m.disconnect();
     } catch {
     }
-    const v = b.map((f) => x?.get(f.instanceId)).filter((f) => f !== void 0);
-    if (v.length === 0)
+    const w = b.map((f) => x?.get(f.instanceId)).filter((f) => f !== void 0);
+    if (w.length === 0)
       m.connect(p);
     else {
       let f = m;
-      v.forEach((w) => {
+      w.forEach((C) => {
         try {
-          w.disconnect();
+          C.disconnect();
         } catch {
         }
-        f.connect(w.effect), f = w.effect;
+        f.connect(C.effect), f = C.effect;
       }), f.connect(p);
     }
   }, []), s = D((d, b) => {
@@ -5390,8 +5390,8 @@ function Ri() {
       return;
     }
     const m = {};
-    y.parameters.forEach((v) => {
-      m[v.name] = v.default;
+    y.parameters.forEach((w) => {
+      m[w.name] = w.default;
     });
     const p = Bt(y, m);
     n.current.has(d) || n.current.set(d, /* @__PURE__ */ new Map()), n.current.get(d).set(p.instanceId, p);
@@ -5402,25 +5402,25 @@ function Ri() {
       params: m,
       bypassed: !1
     };
-    t((v) => {
-      const f = new Map(v), w = f.get(d) || [];
-      return f.set(d, [...w, x]), f;
+    t((w) => {
+      const f = new Map(w), C = f.get(d) || [];
+      return f.set(d, [...C, x]), f;
     });
   }, []), o = D((d, b) => {
     const y = n.current.get(d), m = y?.get(b);
     m && (m.dispose(), y?.delete(b)), t((p) => {
-      const x = new Map(p), v = x.get(d) || [];
-      return x.set(d, v.filter((f) => f.instanceId !== b)), x;
+      const x = new Map(p), w = x.get(d) || [];
+      return x.set(d, w.filter((f) => f.instanceId !== b)), x;
     });
   }, []), i = D(
     (d, b, y, m) => {
       const x = n.current.get(d)?.get(b);
-      x && x.setParameter(y, m), t((v) => {
-        const f = new Map(v), w = f.get(d) || [];
+      x && x.setParameter(y, m), t((w) => {
+        const f = new Map(w), C = f.get(d) || [];
         return f.set(
           d,
-          w.map(
-            (C) => C.instanceId === b ? { ...C, params: { ...C.params, [y]: m } } : C
+          C.map(
+            (v) => v.instanceId === b ? { ...v, params: { ...v.params, [y]: m } } : v
           )
         ), f;
       });
@@ -5430,19 +5430,19 @@ function Ri() {
     (d, b) => {
       const m = (u.current.get(d) || []).find((f) => f.instanceId === b);
       if (!m) return;
-      const p = !m.bypassed, v = n.current.get(d)?.get(b);
-      if (v) {
+      const p = !m.bypassed, w = n.current.get(d)?.get(b);
+      if (w) {
         const f = m.params.wet ?? 1;
-        v.setParameter("wet", p ? 0 : f);
+        w.setParameter("wet", p ? 0 : f);
       }
       t((f) => {
-        const w = new Map(f), C = w.get(d) || [];
-        return w.set(
+        const C = new Map(f), v = C.get(d) || [];
+        return C.set(
           d,
-          C.map(
-            (A) => A.instanceId === b ? { ...A, bypassed: p } : A
+          v.map(
+            (k) => k.instanceId === b ? { ...k, bypassed: p } : k
           )
-        ), w;
+        ), C;
       });
     },
     []
@@ -5452,7 +5452,7 @@ function Ri() {
       const m = new Map(y);
       return m.set(d, []), m;
     });
-  }, []), u = R(e);
+  }, []), u = T(e);
   u.current = e;
   const g = D(
     (d) => (b, y, m) => {
@@ -5460,13 +5460,13 @@ function Ri() {
         graphEnd: b,
         masterGainNode: y
       });
-      const p = u.current.get(d) || [], x = n.current.get(d), v = p.map((f) => x?.get(f.instanceId)).filter((f) => f !== void 0);
-      if (v.length === 0)
+      const p = u.current.get(d) || [], x = n.current.get(d), w = p.map((f) => x?.get(f.instanceId)).filter((f) => f !== void 0);
+      if (w.length === 0)
         b.connect(y);
       else {
         let f = b;
-        v.forEach((w) => {
-          f.connect(w.effect), f = w.effect;
+        w.forEach((C) => {
+          f.connect(C.effect), f = C.effect;
         }), f.connect(y);
       }
       return function() {
@@ -5476,11 +5476,11 @@ function Ri() {
     []
     // No dependencies - stable function that reads from refs
   );
-  j(() => {
+  U(() => {
     e.forEach((d, b) => {
       a(b, d);
     });
-  }, [e, a]), j(() => () => {
+  }, [e, a]), U(() => () => {
     n.current.forEach((d) => {
       d.forEach((b) => b.dispose()), d.clear();
     }), n.current.clear();
@@ -5490,21 +5490,21 @@ function Ri() {
       const y = (e.get(d) || []).filter((m) => !m.bypassed);
       if (y.length !== 0)
         return (m, p, x) => {
-          const v = [];
+          const w = [];
           for (const f of y) {
-            const w = Bt(f.definition, f.params);
-            v.push(w);
+            const C = Bt(f.definition, f.params);
+            w.push(C);
           }
-          if (v.length === 0)
+          if (w.length === 0)
             m.connect(p);
           else {
             let f = m;
-            v.forEach((w) => {
-              f.connect(w.effect), f = w.effect;
+            w.forEach((C) => {
+              f.connect(C.effect), f = C.effect;
             }), f.connect(p);
           }
           return function() {
-            v.forEach((w) => w.dispose());
+            w.forEach((C) => C.dispose());
           };
         };
     },
@@ -5532,7 +5532,7 @@ function zs(e, t = {}) {
   if (n === 16)
     for (let m = 0; m < s; m++)
       for (let p = 0; p < r; p++) {
-        const x = b[p][m], v = Math.max(-1, Math.min(1, x)), f = v < 0 ? v * 32768 : v * 32767;
+        const x = b[p][m], w = Math.max(-1, Math.min(1, x)), f = w < 0 ? w * 32768 : w * 32767;
         d.setInt16(y, f, !0), y += 2;
       }
   else
@@ -5550,7 +5550,7 @@ function Hs(e, t) {
   r.href = n, r.download = t, r.style.display = "none", document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
 }
 function Xs() {
-  const [e, t] = E(!1), [n, r] = E(0), [a, s] = E(null);
+  const [e, t] = R(!1), [n, r] = R(0), [a, s] = R(null);
   return {
     exportWav: D(async (i, l, c = {}) => {
       const {
@@ -5570,23 +5570,23 @@ function Xs() {
           throw new Error("No tracks to export");
         if (g === "individual" && (h === void 0 || h < 0 || h >= i.length))
           throw new Error("Invalid track index for individual export");
-        const v = i[0].clips[0]?.sampleRate || 44100;
+        const w = i[0].clips[0]?.sampleRate || 44100;
         let f = 0;
         for (const M of i)
           for (const _ of M.clips) {
-            const T = _.startSample + _.durationSamples;
-            f = Math.max(f, T);
+            const E = _.startSample + _.durationSamples;
+            f = Math.max(f, E);
           }
-        f += Math.round(v * 0.1);
-        const w = f / v, C = 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 ((y || $) && b)
-          k = await Gs(
-            C,
+        f += Math.round(w * 0.1);
+        const C = f / w, v = g === "individual" ? [{ track: i[h], state: l[h], index: h }] : i.map((M, _) => ({ track: M, state: l[_], index: _ })), k = l.some((M) => M.soloed), B = !!m;
+        let $;
+        if ((y || B) && b)
+          $ = await Gs(
+            v,
             l,
-            A,
+            k,
+            C,
             w,
-            v,
             y,
             m,
             (M) => {
@@ -5594,32 +5594,32 @@ function Xs() {
             }
           );
         else {
-          const M = new OfflineAudioContext(2, f, v);
+          const M = new OfflineAudioContext(2, f, w);
           let _ = 0;
-          const T = C.reduce((H, { track: P }) => H + P.clips.length, 0);
-          for (const { track: H, state: P } of C)
-            if (!(P.muted && !P.soloed) && !(A && !P.soloed))
-              for (const F of H.clips) {
-                await Ls(M, F, P, v, b), _++;
-                const O = _ / T * 0.5;
-                r(O), x?.(O);
+          const E = v.reduce((V, { track: z }) => V + z.clips.length, 0);
+          for (const { track: V, state: z } of v)
+            if (!(z.muted && !z.soloed) && !(k && !z.soloed))
+              for (const P of V.clips) {
+                await Ls(M, P, z, w, b), _++;
+                const K = _ / E * 0.5;
+                r(K), x?.(K);
               }
-          r(0.5), x?.(0.5), k = await M.startRendering();
+          r(0.5), x?.(0.5), $ = await M.startRendering();
         }
         r(0.9), x?.(0.9);
-        const B = zs(k, { bitDepth: p });
+        const A = zs($, { bitDepth: p });
         if (r(1), x?.(1), d) {
           const M = g === "individual" ? `${u}_${i[h].name}` : u;
-          Hs(B, `${M}.wav`);
+          Hs(A, `${M}.wav`);
         }
         return {
-          audioBuffer: k,
-          blob: B,
-          duration: w
+          audioBuffer: $,
+          blob: A,
+          duration: C
         };
-      } catch (v) {
-        const f = v instanceof Error ? v.message : "Export failed";
-        throw s(f), v;
+      } catch (w) {
+        const f = w instanceof Error ? w.message : "Export failed";
+        throw s(f), w;
       } finally {
         t(!1);
       }
@@ -5639,21 +5639,21 @@ async function Gs(e, t, n, r, a, s, o, i) {
         const p = new c(0);
         let x;
         s ? x = s(p, m, !0) : p.connect(m);
-        for (const { track: v, state: f } of e) {
+        for (const { track: w, state: f } of e) {
           if (f.muted && !f.soloed || n && !f.soloed) continue;
-          const w = new c(Ns(f.volume)), C = new g(f.pan), A = new u(f.muted ? 0 : 1), $ = o?.(v.id);
-          $ ? $(A, p, !0) : A.connect(p), C.connect(A), w.connect(C);
-          for (const k of v.clips) {
-            const { audioBuffer: B, startSample: M, durationSamples: _, offsetSamples: T, gain: H, fadeIn: P, fadeOut: F } = k, O = M / a, N = _ / a, Z = T / a, J = new d(B), se = new h(J), ae = new u(H);
-            if (se.connect(ae), ae.connect(w), P) {
-              const ee = O, oe = O + P.duration, ye = ae.gain._param;
-              ye.setValueAtTime(0, ee), ye.linearRampToValueAtTime(H, oe);
+          const C = new c(Ns(f.volume)), v = new g(f.pan), k = new u(f.muted ? 0 : 1), B = o?.(w.id);
+          B ? B(k, p, !0) : k.connect(p), v.connect(k), C.connect(v);
+          for (const $ of w.clips) {
+            const { audioBuffer: A, startSample: M, durationSamples: _, offsetSamples: E, gain: V, fadeIn: z, fadeOut: P } = $, K = M / a, X = _ / a, Z = E / a, Q = new d(A), le = new h(Q), te = new u(V);
+            if (le.connect(te), te.connect(C), z) {
+              const re = K, ae = K + z.duration, ye = te.gain._param;
+              ye.setValueAtTime(0, re), ye.linearRampToValueAtTime(V, ae);
             }
-            if (F) {
-              const ee = O + N - F.duration, oe = O + N, ye = ae.gain._param;
-              ye.setValueAtTime(H, ee), ye.linearRampToValueAtTime(0, oe);
+            if (P) {
+              const re = K + X - P.duration, ae = K + X, ye = te.gain._param;
+              ye.setValueAtTime(V, re), ye.linearRampToValueAtTime(0, ae);
             }
-            se.start(O, Z, N);
+            le.start(K, Z, X);
           }
         }
         y.start(0);
@@ -5682,12 +5682,12 @@ async function Ls(e, t, n, r, a) {
   const m = e.createGain(), p = c * n.volume, x = e.createStereoPanner();
   if (x.pan.value = n.pan, y.connect(m), m.connect(x), x.connect(e.destination), a) {
     if (u ? m.gain.setValueAtTime(0, h) : m.gain.setValueAtTime(p, h), u) {
-      const v = h, f = h + u.duration;
-      An(m.gain, v, f, 0, p, u.type || "linear");
+      const w = h, f = h + u.duration;
+      An(m.gain, w, f, 0, p, u.type || "linear");
     }
     if (g) {
-      const v = h + d - g.duration, f = h + d;
-      (!u || u.duration < d - g.duration) && m.gain.setValueAtTime(p, v), An(m.gain, v, f, p, 0, g.type || "linear");
+      const w = h + d - g.duration, f = h + d;
+      (!u || u.duration < d - g.duration) && m.gain.setValueAtTime(p, w), An(m.gain, w, f, p, 0, g.type || "linear");
     }
   } else
     m.gain.setValueAtTime(p, h);
@@ -5725,7 +5725,7 @@ function kn(e, t, n, r) {
   }
   return a;
 }
-const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null), Ei = ({
+const lr = Me(null), cr = Me(null), ur = Me(null), dr = Me(null), mr = Me(null), Ei = ({
   tracks: e,
   timescale: t = !1,
   mono: n = !1,
@@ -5744,70 +5744,70 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
   progressBarWidth: y,
   children: m
 }) => {
-  const p = y ?? d + b, [x, v] = E([]), [f, w] = E(null), [C, A] = E(!1), [$, k] = E(0), [B, M] = E(0), [_, T] = E([]), [H, P] = E([]), [F, O] = E([]), [N, Z] = E(0), [J, se] = E(0), [ae, ee] = E(null), [oe, ye] = E(o), [be, Ue] = E(c?.isContinuousPlay ?? !1), [Oe, Se] = E(c?.linkEndpoints ?? !0), [je, K] = E(c?.editable ?? !1), [de, ne] = E(!1), [q, me] = E(0), [Ce, re] = E(0), [Ne, Ke] = E(!1), V = R(null), Pe = R(0), fe = R(0), X = R(null), ie = R(F), he = R(0), pe = R(0), Ie = R(null), Le = R(null), Je = R(!1), st = R(c?.isContinuousPlay ?? !1), et = R(null), mt = R(a), Ft = R(!1), L = R(0), Q = R(0), le = R(0), ve = R(0), { timeFormat: $e, setTimeFormat: ze, formatTime: ce } = bs(), Re = ws({ initialSamplesPerPixel: a, zoomLevels: s }), Me = Re.samplesPerPixel, { masterVolume: Qe, setMasterVolume: qe } = ys({ playoutRef: V, initialVolume: 1 }), it = D((W) => {
-    st.current = W, Ue(W);
+  const p = y ?? d + b, [x, w] = R([]), [f, C] = R(null), [v, k] = R(!1), [B, $] = R(0), [A, M] = R(0), [_, E] = R([]), [V, z] = R([]), [P, K] = R([]), [X, Z] = R(0), [Q, le] = R(0), [te, re] = R(null), [ae, ye] = R(o), [be, Ke] = R(c?.isContinuousPlay ?? !1), [Oe, ke] = R(c?.linkEndpoints ?? !1), [Ue, De] = R(c?.editable ?? !1), [ee, j] = R(!1), [oe, de] = R(0), [me, J] = R(0), [Re, je] = R(!1), F = T(null), ze = T(0), fe = T(0), G = T(null), se = T(P), he = T(0), pe = T(0), xe = T(null), Le = T(null), Je = T(!1), st = T(c?.isContinuousPlay ?? !1), et = T(null), mt = T(a), Ft = T(!1), L = T(0), q = T(0), ie = T(0), ve = T(0), { timeFormat: Se, setTimeFormat: He, formatTime: ce } = bs(), Ee = ws({ initialSamplesPerPixel: a, zoomLevels: s }), $e = Ee.samplesPerPixel, { masterVolume: Qe, setMasterVolume: qe } = ys({ playoutRef: F, initialVolume: 1 }), it = D((W) => {
+    st.current = W, Ke(W);
   }, []), Ye = D((W) => {
-    et.current = W, w(W);
+    et.current = W, C(W);
   }, []), Zt = D((W) => {
-    Ft.current = W, ne(W);
-  }, []), ft = D((W, G) => {
-    le.current = W, ve.current = G, me(W), re(G);
+    Ft.current = W, j(W);
+  }, []), ft = D((W, N) => {
+    ie.current = W, ve.current = N, de(W), J(N);
   }, []), br = D(() => {
-    const W = L.current, G = Q.current;
-    W !== G && G > W && ft(W, G);
+    const W = L.current, N = q.current;
+    W !== N && N > W && ft(W, N);
   }, [ft]), vr = D(() => {
     ft(0, 0);
   }, [ft]);
-  j(() => {
-    Je.current = oe;
-  }, [oe]), j(() => {
-    ie.current = F;
-  }, [F]), j(() => {
-    L.current = N, Q.current = J;
-  }, [N, J]), j(() => {
+  U(() => {
+    Je.current = ae;
+  }, [ae]), U(() => {
+    se.current = P;
+  }, [P]), U(() => {
+    L.current = X, q.current = Q;
+  }, [X, Q]), U(() => {
     if (!Le.current || !_.length) return;
-    const W = Le.current, G = mt.current, U = Me;
-    if (G === U) return;
-    const ue = l.show ? l.width : 0, z = W.clientWidth, Xe = W.scrollLeft + z / 2 - ue, lt = _[0].sampleRate, xe = Xe * G / lt * lt / U, Ee = Math.max(0, xe + ue - z / 2);
-    W.scrollLeft = Ee, mt.current = U;
-  }, [Me, _, l]);
-  const yt = R(null);
-  j(() => {
-    if (Ke(!1), e.length === 0) {
-      T([]), M(0), O([]), P([]), V.current && (V.current.dispose(), V.current = null);
+    const W = Le.current, N = mt.current, O = $e;
+    if (N === O) return;
+    const ue = l.show ? l.width : 0, H = W.clientWidth, Ge = W.scrollLeft + H / 2 - ue, lt = _[0].sampleRate, Ce = Ge * N / lt * lt / O, We = Math.max(0, Ce + ue - H / 2);
+    W.scrollLeft = We, mt.current = O;
+  }, [$e, _, l]);
+  const yt = T(null);
+  U(() => {
+    if (je(!1), e.length === 0) {
+      E([]), M(0), K([]), z([]), F.current && (F.current.dispose(), F.current = null);
       return;
     }
-    const W = C, G = fe.current;
-    return V.current && W && (V.current.stop(), X.current && (cancelAnimationFrame(X.current), X.current = null), yt.current = { position: G }), (async () => {
+    const W = v, N = fe.current;
+    return F.current && W && (F.current.stop(), G.current && (cancelAnimationFrame(G.current), G.current = null), yt.current = { position: N }), (async () => {
       try {
         const ue = [];
         e.forEach((we) => {
           we.clips.length > 0 && we.clips[0].audioBuffer && ue.push(we.clips[0].audioBuffer);
         });
-        let z = 0;
+        let H = 0;
         e.forEach((we) => {
-          we.clips.forEach((xe) => {
-            const Ee = xe.sampleRate, Ct = (xe.startSample + xe.durationSamples) / Ee;
-            z = Math.max(z, Ct);
+          we.clips.forEach((Ce) => {
+            const We = Ce.sampleRate, Ct = (Ce.startSample + Ce.durationSamples) / We;
+            H = Math.max(H, Ct);
           });
-        }), T(ue), M(z), O((we) => we.length === e.length ? we.map((xe, Ee) => ({
-          ...xe,
-          name: e[Ee].name
-        })) : e.map((xe) => ({
-          name: xe.name,
-          muted: xe.muted,
-          soloed: xe.soloed,
-          volume: xe.volume,
-          pan: xe.pan
-        }))), V.current && V.current.dispose();
-        const Ae = new Ca({
+        }), E(ue), M(H), K((we) => we.length === e.length ? we.map((Ce, We) => ({
+          ...Ce,
+          name: e[We].name
+        })) : e.map((Ce) => ({
+          name: Ce.name,
+          muted: Ce.muted,
+          soloed: Ce.soloed,
+          volume: Ce.volume,
+          pan: Ce.pan
+        }))), F.current && F.current.dispose();
+        const Ie = new Ca({
           effects: u
-        }), Xe = ie.current;
-        e.forEach((we, xe) => {
-          const Ee = we.clips.filter((ht) => ht.audioBuffer);
-          if (Ee.length > 0) {
-            const ht = Ee[0].sampleRate, Ct = Math.min(...Ee.map((We) => We.startSample / ht)), Rr = Math.max(...Ee.map((We) => (We.startSample + We.durationSamples) / ht)), xt = Xe[xe], Er = {
-              id: `track-${xe}`,
+        }), Ge = se.current;
+        e.forEach((we, Ce) => {
+          const We = we.clips.filter((ht) => ht.audioBuffer);
+          if (We.length > 0) {
+            const ht = We[0].sampleRate, Ct = Math.min(...We.map((_e) => _e.startSample / ht)), Rr = Math.max(...We.map((_e) => (_e.startSample + _e.durationSamples) / ht)), xt = Ge[Ce], Er = {
+              id: `track-${Ce}`,
               // Use consistent index-based ID for track controls
               name: we.name,
               gain: xt?.volume ?? we.volume,
@@ -5816,32 +5816,32 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
               stereoPan: xt?.pan ?? we.pan,
               startTime: Ct,
               endTime: Rr
-            }, Wr = Ee.map((We) => {
-              const Pt = We.sampleRate;
+            }, Wr = We.map((_e) => {
+              const Pt = _e.sampleRate;
               return {
-                buffer: We.audioBuffer,
+                buffer: _e.audioBuffer,
                 // We filtered for audioBuffer above
-                startTime: We.startSample / Pt - Ct,
+                startTime: _e.startSample / Pt - Ct,
                 // Make relative to track start
-                duration: We.durationSamples / Pt,
-                offset: We.offsetSamples / Pt,
-                fadeIn: We.fadeIn,
-                fadeOut: We.fadeOut,
-                gain: We.gain
+                duration: _e.durationSamples / Pt,
+                offset: _e.offsetSamples / Pt,
+                fadeIn: _e.fadeIn,
+                fadeOut: _e.fadeOut,
+                gain: _e.gain
               };
             });
-            Ae.addTrack({
+            Ie.addTrack({
               clips: Wr,
               track: Er,
               effects: we.effects
               // Pass track effects
             });
           }
-        }), Ae.applyInitialSoloState(), V.current = Ae, Ke(!0);
+        }), Ie.applyInitialSoloState(), F.current = Ie, je(!0);
         const lt = new CustomEvent("waveform-playlist:ready", {
           detail: {
             trackCount: e.length,
-            duration: z
+            duration: H
           }
         });
         window.dispatchEvent(lt), g?.();
@@ -5849,206 +5849,206 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
         console.error("Error loading audio:", ue);
       }
     })(), () => {
-      X.current && cancelAnimationFrame(X.current), V.current && V.current.dispose();
+      G.current && cancelAnimationFrame(G.current), F.current && F.current.dispose();
     };
-  }, [e, g, C]), j(() => {
+  }, [e, g, v]), U(() => {
     if (e.length === 0) return;
-    const W = 16, G = e.map((U) => U.clips.map((z) => {
-      if (z.waveformData) {
-        const Xe = tr(
-          z.waveformData,
+    const W = 16, N = e.map((O) => O.clips.map((H) => {
+      if (H.waveformData) {
+        const Ge = tr(
+          H.waveformData,
           // Cast to WaveformData type
-          Me,
+          $e,
           0,
           // channel index
-          z.offsetSamples,
-          z.durationSamples
+          H.offsetSamples,
+          H.durationSamples
         );
         return {
-          clipId: z.id,
-          trackName: U.name,
+          clipId: H.id,
+          trackName: O.name,
           peaks: {
-            length: Xe.length,
-            data: [Xe.data],
+            length: Ge.length,
+            data: [Ge.data],
             // Wrap in array for channel compatibility
-            bits: Xe.bits
+            bits: Ge.bits
           },
-          startSample: z.startSample,
-          durationSamples: z.durationSamples,
-          fadeIn: z.fadeIn,
-          fadeOut: z.fadeOut
+          startSample: H.startSample,
+          durationSamples: H.durationSamples,
+          fadeIn: H.fadeIn,
+          fadeOut: H.fadeOut
         };
       }
-      if (!z.audioBuffer)
-        return console.warn(`Clip "${z.name || z.id}" has neither waveformData nor audioBuffer - rendering empty`), {
-          clipId: z.id,
-          trackName: U.name,
+      if (!H.audioBuffer)
+        return console.warn(`Clip "${H.name || H.id}" has neither waveformData nor audioBuffer - rendering empty`), {
+          clipId: H.id,
+          trackName: O.name,
           peaks: {
             length: 0,
             data: [],
             bits: W
           },
-          startSample: z.startSample,
-          durationSamples: z.durationSamples,
-          fadeIn: z.fadeIn,
-          fadeOut: z.fadeOut
+          startSample: H.startSample,
+          durationSamples: H.durationSamples,
+          fadeIn: H.fadeIn,
+          fadeOut: H.fadeOut
         };
-      const Ae = To(
-        z.audioBuffer,
-        Me,
+      const Ie = To(
+        H.audioBuffer,
+        $e,
         n,
         W,
-        z.offsetSamples,
-        z.durationSamples
+        H.offsetSamples,
+        H.durationSamples
       );
       return {
-        clipId: z.id,
-        trackName: U.name,
-        peaks: Ae,
-        startSample: z.startSample,
-        durationSamples: z.durationSamples,
-        fadeIn: z.fadeIn,
-        fadeOut: z.fadeOut
+        clipId: H.id,
+        trackName: O.name,
+        peaks: Ie,
+        startSample: H.startSample,
+        durationSamples: H.durationSamples,
+        fadeIn: H.fadeIn,
+        fadeOut: H.fadeOut
       };
     }));
-    P(G);
-  }, [e, Me, n]), j(() => {
+    z(N);
+  }, [e, $e, n]), U(() => {
     if (c?.annotations) {
-      const W = c.annotations.map((G) => typeof G.start == "number" ? G : nr(G));
-      v(W);
+      const W = c.annotations.map((N) => typeof N.start == "number" ? N : nr(N));
+      w(W);
     }
   }, [c]);
   const tt = D(() => {
-    X.current && (cancelAnimationFrame(X.current), X.current = null);
+    G.current && (cancelAnimationFrame(G.current), G.current = null);
     const W = () => {
-      const G = ke().currentTime - he.current, U = pe.current + G;
-      if (fe.current = U, k(U), x.length > 0) {
-        const z = x.find(
-          (Ae) => U >= Ae.start && U < Ae.end
+      const N = Ae().currentTime - he.current, O = pe.current + N;
+      if (fe.current = O, $(O), x.length > 0) {
+        const H = x.find(
+          (Ie) => O >= Ie.start && O < Ie.end
         );
         if (st.current)
-          z && z.id !== et.current ? Ye(z.id) : !z && et.current !== null && Ye(null);
+          H && H.id !== et.current ? Ye(H.id) : !H && et.current !== null && Ye(null);
         else if (et.current) {
-          const Ae = x.find((Xe) => Xe.id === et.current);
-          if (Ae && U >= Ae.end) {
-            V.current && V.current.stop(), A(!1), fe.current = Pe.current, k(Pe.current);
+          const Ie = x.find((Ge) => Ge.id === et.current);
+          if (Ie && O >= Ie.end) {
+            F.current && F.current.stop(), k(!1), fe.current = ze.current, $(ze.current);
             return;
           }
         } else
-          z && Ye(z.id);
+          H && Ye(H.id);
       }
       if (Je.current && Le.current && _.length > 0) {
-        const z = Le.current, Ae = _[0].sampleRate, Xe = U * Ae / mt.current, lt = z.clientWidth, we = l.show ? l.width : 0, xe = Xe + we, Ee = Math.max(0, xe - lt / 2);
-        z.scrollLeft = Ee;
+        const H = Le.current, Ie = _[0].sampleRate, Ge = O * Ie / mt.current, lt = H.clientWidth, we = l.show ? l.width : 0, Ce = Ge + we, We = Math.max(0, Ce - lt / 2);
+        H.scrollLeft = We;
       }
-      if (Ie.current !== null && U >= Ie.current) {
-        V.current && V.current.stop(), A(!1), fe.current = Ie.current, k(Ie.current), Ie.current = null;
+      if (xe.current !== null && O >= xe.current) {
+        F.current && F.current.stop(), k(!1), fe.current = xe.current, $(xe.current), xe.current = null;
         return;
       }
-      const ue = le.current !== ve.current && ve.current > le.current;
-      if (Ft.current && ue && U >= ve.current) {
-        V.current?.stop();
-        const Ae = ke().currentTime;
-        he.current = Ae, pe.current = le.current, fe.current = le.current, V.current?.play(Ae, le.current), X.current = requestAnimationFrame(W);
+      const ue = ie.current !== ve.current && ve.current > ie.current;
+      if (Ft.current && ue && O >= ve.current) {
+        F.current?.stop();
+        const Ie = Ae().currentTime;
+        he.current = Ie, pe.current = ie.current, fe.current = ie.current, F.current?.play(Ie, ie.current), G.current = requestAnimationFrame(W);
         return;
       }
-      if (U >= B) {
-        V.current && V.current.stop(), A(!1), fe.current = Pe.current, k(Pe.current), Ye(null);
+      if (O >= A) {
+        F.current && F.current.stop(), k(!1), fe.current = ze.current, $(ze.current), Ye(null);
         return;
       }
-      X.current = requestAnimationFrame(W);
+      G.current = requestAnimationFrame(W);
     };
-    X.current = requestAnimationFrame(W);
-  }, [B, _, Me, x, be]), He = D(() => {
-    X.current && (cancelAnimationFrame(X.current), X.current = null);
+    G.current = requestAnimationFrame(W);
+  }, [A, _, $e, x, be]), Xe = D(() => {
+    G.current && (cancelAnimationFrame(G.current), G.current = null);
   }, []);
-  j(() => {
+  U(() => {
     (async () => {
-      if (C && X.current && V.current)
+      if (v && G.current && F.current)
         if (be) {
-          const G = fe.current;
-          V.current.stop(), He(), await V.current.init(), V.current.setOnPlaybackComplete(() => {
+          const N = fe.current;
+          F.current.stop(), Xe(), await F.current.init(), F.current.setOnPlaybackComplete(() => {
           });
-          const ue = ke().currentTime;
-          he.current = ue, pe.current = G, V.current.play(ue, G), tt();
+          const ue = Ae().currentTime;
+          he.current = ue, pe.current = N, F.current.play(ue, N), tt();
         } else
-          He(), tt();
+          Xe(), tt();
     })();
-  }, [be, C, tt, He]), j(() => {
+  }, [be, v, tt, Xe]), U(() => {
     (async () => {
-      if (yt.current && V.current) {
-        const { position: G } = yt.current;
-        yt.current = null, await V.current.init(), V.current.setOnPlaybackComplete(() => {
+      if (yt.current && F.current) {
+        const { position: N } = yt.current;
+        yt.current = null, await F.current.init(), F.current.setOnPlaybackComplete(() => {
         });
-        const ue = ke().currentTime;
-        he.current = ue, pe.current = G, V.current.play(ue, G), A(!0), tt();
+        const ue = Ae().currentTime;
+        he.current = ue, pe.current = N, F.current.play(ue, N), k(!0), tt();
       }
     })();
   }, [e, tt]);
-  const Vt = D(async (W, G) => {
-    if (!V.current || _.length === 0) return;
-    await V.current.init(), await Bn();
-    const U = W ?? fe.current;
-    Pe.current = U, fe.current = U, V.current.setOnPlaybackComplete(() => {
-    }), V.current.stop(), He();
-    const z = ke().currentTime;
-    he.current = z, pe.current = U, Ie.current = G !== void 0 ? U + G : null, V.current.play(z, U, G), A(!0), tt();
-  }, [_.length, tt, He]), wr = D(() => {
-    if (!V.current) return;
-    const W = ke().currentTime - he.current, G = pe.current + W;
-    V.current.pause(), A(!1), He(), fe.current = G, k(G);
-  }, [He]), yr = D(() => {
-    V.current && (V.current.stop(), A(!1), He(), fe.current = Pe.current, k(Pe.current), Ye(null));
-  }, [He]), Cr = D((W) => {
-    const G = Math.max(0, Math.min(W, B));
-    fe.current = G, k(G), C && V.current && (V.current.stop(), He(), Vt(G));
-  }, [B, C, Vt, He]), xr = D((W, G) => {
-    const U = [...F];
-    if (U[W] = { ...U[W], muted: G }, O(U), V.current) {
+  const Vt = D(async (W, N) => {
+    if (!F.current || _.length === 0) return;
+    await F.current.init(), await Bn();
+    const O = W ?? fe.current;
+    ze.current = O, fe.current = O, F.current.setOnPlaybackComplete(() => {
+    }), F.current.stop(), Xe();
+    const H = Ae().currentTime;
+    he.current = H, pe.current = O, xe.current = N !== void 0 ? O + N : null, F.current.play(H, O, N), k(!0), tt();
+  }, [_.length, tt, Xe]), wr = D(() => {
+    if (!F.current) return;
+    const W = Ae().currentTime - he.current, N = pe.current + W;
+    F.current.pause(), k(!1), Xe(), fe.current = N, $(N);
+  }, [Xe]), yr = D(() => {
+    F.current && (F.current.stop(), k(!1), Xe(), fe.current = ze.current, $(ze.current), Ye(null));
+  }, [Xe]), Cr = D((W) => {
+    const N = Math.max(0, Math.min(W, A));
+    fe.current = N, $(N), v && F.current && (F.current.stop(), Xe(), Vt(N));
+  }, [A, v, Vt, Xe]), xr = D((W, N) => {
+    const O = [...P];
+    if (O[W] = { ...O[W], muted: N }, K(O), F.current) {
       const ue = `track-${W}`;
-      V.current.setMute(ue, G);
+      F.current.setMute(ue, N);
     }
-  }, [F]), Ir = D((W, G) => {
-    const U = [...F];
-    if (U[W] = { ...U[W], soloed: G }, O(U), V.current) {
+  }, [P]), Ir = D((W, N) => {
+    const O = [...P];
+    if (O[W] = { ...O[W], soloed: N }, K(O), F.current) {
       const ue = `track-${W}`;
-      V.current.setSolo(ue, G);
+      F.current.setSolo(ue, N);
     }
-  }, [F]), Ar = D((W, G) => {
-    const U = [...F];
-    if (U[W] = { ...U[W], volume: G }, O(U), V.current) {
-      const ue = `track-${W}`, z = V.current.getTrack(ue);
-      z && z.setVolume(G);
+  }, [P]), Ar = D((W, N) => {
+    const O = [...P];
+    if (O[W] = { ...O[W], volume: N }, K(O), F.current) {
+      const ue = `track-${W}`, H = F.current.getTrack(ue);
+      H && H.setVolume(N);
     }
-  }, [F]), kr = D((W, G) => {
-    const U = [...F];
-    if (U[W] = { ...U[W], pan: G }, O(U), V.current) {
-      const ue = `track-${W}`, z = V.current.getTrack(ue);
-      z && z.setPan(G);
+  }, [P]), kr = D((W, N) => {
+    const O = [...P];
+    if (O[W] = { ...O[W], pan: N }, K(O), F.current) {
+      const ue = `track-${W}`, H = F.current.getTrack(ue);
+      H && H.setPan(N);
     }
-  }, [F]), Sr = D((W, G) => {
-    Z(W), se(G), fe.current = W, k(W), C && V.current && (V.current.stop(), V.current.play(ke().currentTime, W));
-  }, [C]), $r = D((W) => {
+  }, [P]), Sr = D((W, N) => {
+    Z(W), le(N), fe.current = W, $(W), v && F.current && (F.current.stop(), F.current.play(Ae().currentTime, W));
+  }, [v]), $r = D((W) => {
     Le.current = W;
   }, []), Mr = _[0]?.sampleRate || 44100, tn = t ? 30 : 0, Br = e.length * r + tn, nn = {
-    isPlaying: C,
-    currentTime: $,
+    isPlaying: v,
+    currentTime: B,
     currentTimeRef: fe,
     playbackStartTimeRef: he,
     audioStartPositionRef: pe
   }, rn = {
     continuousPlay: be,
     linkEndpoints: Oe,
-    annotationsEditable: je,
-    isAutomaticScroll: oe,
-    isLoopEnabled: de,
+    annotationsEditable: Ue,
+    isAutomaticScroll: ae,
+    isLoopEnabled: ee,
     annotations: x,
     activeAnnotationId: f,
-    selectionStart: N,
-    selectionEnd: J,
-    selectedTrackId: ae,
-    loopStart: q,
-    loopEnd: Ce
+    selectionStart: X,
+    selectionEnd: Q,
+    selectedTrackId: te,
+    loopStart: oe,
+    loopEnd: me
   }, an = {
     // Playback controls
     play: Vt,
@@ -6056,7 +6056,7 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
     stop: yr,
     seekTo: Cr,
     setCurrentTime: (W) => {
-      fe.current = W, k(W);
+      fe.current = W, $(W);
     },
     // Track controls
     setTrackMute: xr,
@@ -6065,13 +6065,13 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
     setTrackPan: kr,
     // Selection
     setSelection: Sr,
-    setSelectedTrackId: ee,
+    setSelectedTrackId: re,
     // Time format
-    setTimeFormat: ze,
+    setTimeFormat: He,
     formatTime: ce,
     // Zoom
-    zoomIn: Re.zoomIn,
-    zoomOut: Re.zoomOut,
+    zoomIn: Ee.zoomIn,
+    zoomOut: Ee.zoomOut,
     // Master volume
     setMasterVolume: qe,
     // Automatic scroll
@@ -6082,9 +6082,9 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
     scrollContainerRef: Le,
     // Annotation controls
     setContinuousPlay: it,
-    setLinkEndpoints: Se,
-    setAnnotationsEditable: K,
-    setAnnotations: v,
+    setLinkEndpoints: ke,
+    setAnnotationsEditable: De,
+    setAnnotations: w,
     setActiveAnnotationId: Ye,
     // Loop controls
     setLoopEnabled: Zt,
@@ -6092,26 +6092,26 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
     setLoopRegionFromSelection: br,
     clearLoopRegion: vr
   }, on = {
-    duration: B,
+    duration: A,
     audioBuffers: _,
-    peaksDataArray: H,
-    trackStates: F,
+    peaksDataArray: V,
+    trackStates: P,
     tracks: e,
     sampleRate: Mr,
     waveHeight: r,
     timeScaleHeight: tn,
     minimumPlaylistHeight: Br,
     controls: l,
-    playoutRef: V,
-    samplesPerPixel: Me,
-    timeFormat: $e,
+    playoutRef: F,
+    samplesPerPixel: $e,
+    timeFormat: Se,
     masterVolume: Qe,
-    canZoomIn: Re.canZoomIn,
-    canZoomOut: Re.canZoomOut,
+    canZoomIn: Ee.canZoomIn,
+    canZoomOut: Ee.canZoomOut,
     barWidth: d,
     barGap: b,
     progressBarWidth: p,
-    isReady: Ne
+    isReady: Re
   }, Dr = {
     ...nn,
     ...rn,
@@ -6119,12 +6119,12 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
     ...on
   }, Tr = { ...zn, ...i };
   return /* @__PURE__ */ I(Rn, { theme: Tr, children: /* @__PURE__ */ I(lr.Provider, { value: nn, children: /* @__PURE__ */ I(cr.Provider, { value: rn, children: /* @__PURE__ */ I(ur.Provider, { value: an, children: /* @__PURE__ */ I(dr.Provider, { value: on, children: /* @__PURE__ */ I(mr.Provider, { value: Dr, children: m }) }) }) }) }) });
-}, Fe = () => {
+}, Ze = () => {
   const e = Te(lr);
   if (!e)
     throw new Error("usePlaybackAnimation must be used within WaveformPlaylistProvider");
   return e;
-}, Ge = () => {
+}, Ne = () => {
   const e = Te(cr);
   if (!e)
     throw new Error("usePlaylistState must be used within WaveformPlaylistProvider");
@@ -6134,7 +6134,7 @@ const lr = Be(null), cr = Be(null), ur = Be(null), dr = Be(null), mr = Be(null),
   if (!e)
     throw new Error("usePlaylistControls must be used within WaveformPlaylistProvider");
   return e;
-}, De = () => {
+}, Be = () => {
   const e = Te(dr);
   if (!e)
     throw new Error("usePlaylistData must be used within WaveformPlaylistProvider");
@@ -6386,7 +6386,7 @@ var Ys = class {
     return this.track?.peaks.sample_rate ?? 44100;
   }
 };
-const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
+const fr = Me(null), hr = Me(null), pr = Me(null), gr = Me(null), _i = ({
   track: e,
   samplesPerPixel: t = 1024,
   waveHeight: n = 100,
@@ -6402,180 +6402,180 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   onReady: h,
   children: d
 }) => {
-  const b = g ?? c + u, [y, m] = E(!1), [p, x] = E(0), [v, f] = E(0), [w, C] = E([]), [A, $] = E(a), [k, B] = E([]), [M, _] = E(null), [T, H] = E(
+  const b = g ?? c + u, [y, m] = R(!1), [p, x] = R(0), [w, f] = R(0), [C, v] = R([]), [k, B] = R(a), [$, A] = R([]), [M, _] = R(null), [E, V] = R(
     l?.isContinuousPlay ?? !1
-  ), [P] = E(t), [F, O] = E(s), N = R(null), Z = R(0), J = R(null), se = R(T), ae = R(null), ee = R(null), oe = R(s), ye = R(t);
-  j(() => {
-    se.current = T;
-  }, [T]), j(() => {
-    oe.current = F;
-  }, [F]);
-  const be = D((X) => {
-    ae.current = X, _(X);
-  }, []), Ue = D((X) => {
-    se.current = X, H(X);
-  }, []), Oe = D((X) => {
-    ee.current = X;
-  }, []), Se = e.waveformData.sample_rate;
-  j(() => {
-    const X = new Os({
+  ), [z] = R(t), [P, K] = R(s), X = T(null), Z = T(0), Q = T(null), le = T(E), te = T(null), re = T(null), ae = T(s), ye = T(t);
+  U(() => {
+    le.current = E;
+  }, [E]), U(() => {
+    ae.current = P;
+  }, [P]);
+  const be = D((G) => {
+    te.current = G, _(G);
+  }, []), Ke = D((G) => {
+    le.current = G, V(G);
+  }, []), Oe = D((G) => {
+    re.current = G;
+  }, []), ke = e.waveformData.sample_rate;
+  U(() => {
+    const G = new Os({
       playbackRate: a
     });
-    X.addTrack({
+    G.addTrack({
       source: e.source,
       peaks: e.waveformData,
       name: e.name
     });
-    const ie = X.getTrack(X.track?.id ?? "");
-    return ie && ie.setOnTimeUpdateCallback((he) => {
+    const se = G.getTrack(G.track?.id ?? "");
+    return se && se.setOnTimeUpdateCallback((he) => {
       Z.current = he;
-    }), X.setOnPlaybackComplete(() => {
+    }), G.setOnPlaybackComplete(() => {
       m(!1);
-    }), N.current = X, f(e.waveformData.duration), h?.(), () => {
-      J.current && cancelAnimationFrame(J.current), X.dispose();
+    }), X.current = G, f(e.waveformData.duration), h?.(), () => {
+      Q.current && cancelAnimationFrame(Q.current), G.dispose();
     };
-  }, [e.source, e.waveformData, e.name, a, h]), j(() => {
-    const X = tr(
+  }, [e.source, e.waveformData, e.name, a, h]), U(() => {
+    const G = tr(
       e.waveformData,
-      P,
+      z,
       0,
       // channel index
       0,
       // offset
-      Math.ceil(e.waveformData.duration * Se)
+      Math.ceil(e.waveformData.duration * ke)
       // duration in samples
-    ), ie = {
+    ), se = {
       clipId: "media-element-clip",
       trackName: e.name ?? "Track",
       peaks: {
-        length: X.length,
-        data: [X.data],
-        bits: X.bits
+        length: G.length,
+        data: [G.data],
+        bits: G.bits
       },
       startSample: 0,
-      durationSamples: Math.ceil(e.waveformData.duration * Se)
+      durationSamples: Math.ceil(e.waveformData.duration * ke)
     };
-    C([[ie]]);
-  }, [e.waveformData, e.name, P, Se]), j(() => {
+    v([[se]]);
+  }, [e.waveformData, e.name, z, ke]), U(() => {
     if (l?.annotations) {
-      const X = l.annotations.map((ie) => typeof ie.start == "number" ? ie : nr(ie));
-      B(X);
+      const G = l.annotations.map((se) => typeof se.start == "number" ? se : nr(se));
+      A(G);
     }
   }, [l]);
-  const je = D(() => {
-    J.current && cancelAnimationFrame(J.current);
-    const X = () => {
-      const ie = N.current?.getCurrentTime() ?? 0;
-      if (Z.current = ie, x(ie), k.length > 0) {
-        const he = k.find(
-          (pe) => ie >= pe.start && ie < pe.end
+  const Ue = D(() => {
+    Q.current && cancelAnimationFrame(Q.current);
+    const G = () => {
+      const se = X.current?.getCurrentTime() ?? 0;
+      if (Z.current = se, x(se), $.length > 0) {
+        const he = $.find(
+          (pe) => se >= pe.start && se < pe.end
         );
-        if (se.current)
-          he && he.id !== ae.current ? be(he.id) : !he && ae.current !== null && be(null);
-        else if (ae.current) {
-          const pe = k.find(
-            (Ie) => Ie.id === ae.current
+        if (le.current)
+          he && he.id !== te.current ? be(he.id) : !he && te.current !== null && be(null);
+        else if (te.current) {
+          const pe = $.find(
+            (xe) => xe.id === te.current
           );
-          if (pe && ie >= pe.end) {
-            N.current?.stop(), m(!1);
+          if (pe && se >= pe.end) {
+            X.current?.stop(), m(!1);
             return;
           }
         } else he && be(he.id);
       }
-      if (oe.current && ee.current) {
-        const he = ee.current, pe = ie * Se / ye.current, Ie = he.clientWidth, Le = i.show ? i.width : 0, Je = pe + Le, st = Math.max(0, Je - Ie / 2);
+      if (ae.current && re.current) {
+        const he = re.current, pe = se * ke / ye.current, xe = he.clientWidth, Le = i.show ? i.width : 0, Je = pe + Le, st = Math.max(0, Je - xe / 2);
         he.scrollLeft = st;
       }
-      if (ie >= v) {
-        N.current?.stop(), m(!1), be(null);
+      if (se >= w) {
+        X.current?.stop(), m(!1), be(null);
         return;
       }
-      J.current = requestAnimationFrame(X);
+      Q.current = requestAnimationFrame(G);
     };
-    J.current = requestAnimationFrame(X);
-  }, [v, k, be, Se, i]), K = D(() => {
-    J.current && (cancelAnimationFrame(J.current), J.current = null);
-  }, []), de = D(
-    (X) => {
-      if (!N.current) return;
-      const ie = X ?? Z.current;
-      N.current.play(void 0, ie), m(!0), je();
+    Q.current = requestAnimationFrame(G);
+  }, [w, $, be, ke, i]), De = D(() => {
+    Q.current && (cancelAnimationFrame(Q.current), Q.current = null);
+  }, []), ee = D(
+    (G) => {
+      if (!X.current) return;
+      const se = G ?? Z.current;
+      X.current.play(void 0, se), m(!0), Ue();
     },
-    [je]
-  ), ne = D(() => {
-    N.current && (N.current.pause(), m(!1), K(), x(N.current.getCurrentTime()));
-  }, [K]), q = D(() => {
-    N.current && (N.current.stop(), m(!1), K(), Z.current = 0, x(0), be(null));
-  }, [K, be]), me = D(
-    (X) => {
-      const ie = Math.max(0, Math.min(X, v));
-      Z.current = ie, x(ie), N.current && N.current.seekTo(ie);
+    [Ue]
+  ), j = D(() => {
+    X.current && (X.current.pause(), m(!1), De(), x(X.current.getCurrentTime()));
+  }, [De]), oe = D(() => {
+    X.current && (X.current.stop(), m(!1), De(), Z.current = 0, x(0), be(null));
+  }, [De, be]), de = D(
+    (G) => {
+      const se = Math.max(0, Math.min(G, w));
+      Z.current = se, x(se), X.current && X.current.seekTo(se);
     },
-    [v]
-  ), Ce = D((X) => {
-    const ie = Math.max(0.5, Math.min(2, X));
-    $(ie), N.current && N.current.setPlaybackRate(ie);
-  }, []), re = r ? 30 : 0, Ne = nt(
+    [w]
+  ), me = D((G) => {
+    const se = Math.max(0.5, Math.min(2, G));
+    B(se), X.current && X.current.setPlaybackRate(se);
+  }, []), J = r ? 30 : 0, Re = nt(
     () => ({
       isPlaying: y,
       currentTime: p,
       currentTimeRef: Z
     }),
     [y, p]
-  ), Ke = nt(
+  ), je = nt(
     () => ({
-      continuousPlay: T,
-      annotations: k,
+      continuousPlay: E,
+      annotations: $,
       activeAnnotationId: M,
-      playbackRate: A,
-      isAutomaticScroll: F
+      playbackRate: k,
+      isAutomaticScroll: P
     }),
-    [T, k, M, A, F]
-  ), V = nt(
+    [E, $, M, k, P]
+  ), F = nt(
     () => ({
-      play: de,
-      pause: ne,
-      stop: q,
-      seekTo: me,
-      setPlaybackRate: Ce,
-      setContinuousPlay: Ue,
-      setAnnotations: B,
+      play: ee,
+      pause: j,
+      stop: oe,
+      seekTo: de,
+      setPlaybackRate: me,
+      setContinuousPlay: Ke,
+      setAnnotations: A,
       setActiveAnnotationId: be,
-      setAutomaticScroll: (X) => {
-        O(X);
+      setAutomaticScroll: (G) => {
+        K(G);
       },
       setScrollContainer: Oe,
-      scrollContainerRef: ee
+      scrollContainerRef: re
     }),
-    [de, ne, q, me, Ce, Ue, be, Oe]
-  ), Pe = nt(
+    [ee, j, oe, de, me, Ke, be, Oe]
+  ), ze = nt(
     () => ({
-      duration: v,
-      peaksDataArray: w,
-      sampleRate: Se,
+      duration: w,
+      peaksDataArray: C,
+      sampleRate: ke,
       waveHeight: n,
-      timeScaleHeight: re,
-      samplesPerPixel: P,
-      playoutRef: N,
+      timeScaleHeight: J,
+      samplesPerPixel: z,
+      playoutRef: X,
       controls: i,
       barWidth: c,
       barGap: u,
       progressBarWidth: b
     }),
     [
-      v,
       w,
-      Se,
+      C,
+      ke,
       n,
-      re,
-      P,
+      J,
+      z,
       i,
       c,
       u,
       b
     ]
   ), fe = { ...zn, ...o };
-  return /* @__PURE__ */ I(Rn, { theme: fe, children: /* @__PURE__ */ I(fr.Provider, { value: Ne, children: /* @__PURE__ */ I(hr.Provider, { value: Ke, children: /* @__PURE__ */ I(pr.Provider, { value: V, children: /* @__PURE__ */ I(gr.Provider, { value: Pe, children: d }) }) }) }) });
+  return /* @__PURE__ */ I(Rn, { theme: fe, children: /* @__PURE__ */ I(fr.Provider, { value: Re, children: /* @__PURE__ */ I(hr.Provider, { value: je, children: /* @__PURE__ */ I(pr.Provider, { value: F, children: /* @__PURE__ */ I(gr.Provider, { value: ze, children: d }) }) }) }) });
 }, qt = () => {
   const e = Te(fr);
   if (!e)
@@ -6605,8 +6605,8 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     );
   return e;
 }, Fi = ({ className: e }) => {
-  const { isPlaying: t, currentTimeRef: n } = Fe(), { selectionStart: r, selectionEnd: a, isLoopEnabled: s } = Ge(), { play: o } = ge();
-  return /* @__PURE__ */ I(Ve, { onClick: async () => {
+  const { isPlaying: t, currentTimeRef: n } = Ze(), { selectionStart: r, selectionEnd: a, isLoopEnabled: s } = Ne(), { play: o } = ge();
+  return /* @__PURE__ */ I(Pe, { onClick: async () => {
     if (r !== a && a > r)
       if (s)
         await o(r);
@@ -6618,27 +6618,27 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
       await o(n.current ?? 0);
   }, disabled: t, className: e, children: "Play" });
 }, Zi = ({ className: e }) => {
-  const { isPlaying: t } = Fe(), { pause: n } = ge();
-  return /* @__PURE__ */ I(Ve, { onClick: n, disabled: !t, className: e, children: "Pause" });
+  const { isPlaying: t } = Ze(), { pause: n } = ge();
+  return /* @__PURE__ */ I(Pe, { onClick: n, disabled: !t, className: e, children: "Pause" });
 }, Vi = ({ className: e }) => {
-  const { isPlaying: t } = Fe(), { stop: n } = ge();
-  return /* @__PURE__ */ I(Ve, { onClick: n, disabled: !t, className: e, children: "Stop" });
+  const { isPlaying: t } = Ze(), { stop: n } = ge();
+  return /* @__PURE__ */ I(Pe, { onClick: n, disabled: !t, className: e, children: "Stop" });
 }, Pi = ({ className: e }) => {
-  const { isPlaying: t } = Fe(), { play: n, setCurrentTime: r } = ge(), { playoutRef: a } = De();
-  return /* @__PURE__ */ I(Ve, { onClick: () => {
+  const { isPlaying: t } = Ze(), { play: n, setCurrentTime: r } = ge(), { playoutRef: a } = Be();
+  return /* @__PURE__ */ I(Pe, { 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 } = ge(), { duration: a, playoutRef: s } = De();
-  return /* @__PURE__ */ I(Ve, { onClick: () => {
+  const { isPlaying: t } = Ze(), { play: n, setCurrentTime: r } = ge(), { duration: a, playoutRef: s } = Be();
+  return /* @__PURE__ */ I(Pe, { onClick: () => {
     r(a), t && s.current && (s.current.stop(), n(a));
   }, className: e, children: "Fast Forward" });
 }, Hi = ({
   skipAmount: e = 5,
   className: t
 }) => {
-  const { currentTimeRef: n, isPlaying: r } = Fe(), { play: a, setCurrentTime: s } = ge(), { playoutRef: o } = De();
-  return /* @__PURE__ */ I(Ve, { onClick: () => {
+  const { currentTimeRef: n, isPlaying: r } = Ze(), { play: a, setCurrentTime: s } = ge(), { playoutRef: o } = Be();
+  return /* @__PURE__ */ I(Pe, { onClick: () => {
     const l = Math.max(0, (n.current ?? 0) - e);
     s(l), r && o.current && (o.current.stop(), a(l));
   }, className: t, children: "Skip Backward" });
@@ -6646,15 +6646,15 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   skipAmount: e = 5,
   className: t
 }) => {
-  const { currentTimeRef: n, isPlaying: r } = Fe(), { play: a, setCurrentTime: s } = ge(), { duration: o, playoutRef: i } = De();
-  return /* @__PURE__ */ I(Ve, { onClick: () => {
+  const { currentTimeRef: n, isPlaying: r } = Ze(), { play: a, setCurrentTime: s } = ge(), { duration: o, playoutRef: i } = Be();
+  return /* @__PURE__ */ I(Pe, { 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" });
 }, Gi = ({ className: e }) => {
-  const { isLoopEnabled: t, loopStart: n, loopEnd: r } = Ge(), { setLoopEnabled: a, setLoopRegion: s } = ge(), { duration: o } = De(), i = n !== r && r > n;
+  const { isLoopEnabled: t, loopStart: n, loopEnd: r } = Ne(), { setLoopEnabled: a, setLoopRegion: s } = ge(), { duration: o } = Be(), i = n !== r && r > n;
   return /* @__PURE__ */ I(
-    Ve,
+    Pe,
     {
       onClick: () => {
         if (!t && !i) {
@@ -6669,9 +6669,9 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     }
   );
 }, Ni = ({ className: e }) => {
-  const { selectionStart: t, selectionEnd: n, loopStart: r, loopEnd: a } = Ge(), { setLoopRegionFromSelection: s, clearLoopRegion: o } = ge(), i = t !== n && n > t, l = r !== a && a > r;
+  const { selectionStart: t, selectionEnd: n, loopStart: r, loopEnd: a } = Ne(), { setLoopRegionFromSelection: s, clearLoopRegion: o } = ge(), i = t !== n && n > t, l = r !== a && a > r;
   return /* @__PURE__ */ I(
-    Ve,
+    Pe,
     {
       onClick: () => {
         l ? o() : s();
@@ -6683,13 +6683,13 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     }
   );
 }, Li = ({ className: e, disabled: t }) => {
-  const { zoomIn: n } = ge(), { canZoomIn: r } = De();
-  return /* @__PURE__ */ I(Ve, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom In" });
+  const { zoomIn: n } = ge(), { canZoomIn: r } = Be();
+  return /* @__PURE__ */ I(Pe, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom In" });
 }, Yi = ({ className: e, disabled: t }) => {
-  const { zoomOut: n } = ge(), { canZoomOut: r } = De();
-  return /* @__PURE__ */ I(Ve, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom Out" });
+  const { zoomOut: n } = ge(), { canZoomOut: r } = Be();
+  return /* @__PURE__ */ I(Pe, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom Out" });
 }, Oi = ({ className: e }) => {
-  const { masterVolume: t } = De(), { setMasterVolume: n } = ge();
+  const { masterVolume: t } = Be(), { setMasterVolume: n } = ge();
   return /* @__PURE__ */ I(
     Ya,
     {
@@ -6699,7 +6699,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     }
   );
 }, Ki = ({ className: e }) => {
-  const { timeFormat: t } = De(), { setTimeFormat: n } = ge();
+  const { timeFormat: t } = Be(), { setTimeFormat: n } = ge();
   return /* @__PURE__ */ I(
     wo,
     {
@@ -6715,13 +6715,13 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   color: ${(e) => e.theme?.textColor || "#333"};
   user-select: none;
 `, Ui = ({ className: e }) => {
-  const t = R(null), n = R(null), { isPlaying: r, currentTimeRef: a, playbackStartTimeRef: s, audioStartPositionRef: o } = Fe(), { timeFormat: i } = De(), l = i;
-  return j(() => {
+  const t = T(null), n = T(null), { isPlaying: r, currentTimeRef: a, playbackStartTimeRef: s, audioStartPositionRef: o } = Ze(), { timeFormat: i } = Be(), l = i;
+  return U(() => {
     const c = () => {
       if (t.current) {
         let u;
         if (r) {
-          const g = ke().currentTime - (s.current ?? 0);
+          const g = Ae().currentTime - (s.current ?? 0);
           u = (o.current ?? 0) + g;
         } else
           u = a.current ?? 0;
@@ -6732,11 +6732,11 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     return r ? n.current = requestAnimationFrame(c) : c(), () => {
       n.current && (cancelAnimationFrame(n.current), n.current = null);
     };
-  }, [r, l, a, s, o]), j(() => {
+  }, [r, l, a, s, o]), U(() => {
     !r && t.current && (t.current.textContent = dt(a.current ?? 0, l));
   }), /* @__PURE__ */ I(js, { ref: t, className: e, "aria-label": "Audio position", children: dt(a.current ?? 0, l) });
 }, ji = ({ className: e }) => {
-  const { selectionStart: t, selectionEnd: n } = Ge(), { setSelection: r } = ge();
+  const { selectionStart: t, selectionEnd: n } = Ne(), { setSelection: r } = ge();
   return /* @__PURE__ */ I(
     ro,
     {
@@ -6747,7 +6747,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     }
   );
 }, Ji = ({ className: e }) => {
-  const { isAutomaticScroll: t } = Ge(), { setAutomaticScroll: n } = ge();
+  const { isAutomaticScroll: t } = Ne(), { setAutomaticScroll: n } = ge();
   return /* @__PURE__ */ I(
     $a,
     {
@@ -6757,7 +6757,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     }
   );
 }, Qi = ({ className: e }) => {
-  const { continuousPlay: t } = Ge(), { setContinuousPlay: n } = ge();
+  const { continuousPlay: t } = Ne(), { setContinuousPlay: n } = ge();
   return /* @__PURE__ */ I(
     ms,
     {
@@ -6767,7 +6767,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     }
   );
 }, qi = ({ className: e }) => {
-  const { linkEndpoints: t } = Ge(), { setLinkEndpoints: n } = ge();
+  const { linkEndpoints: t } = Ne(), { setLinkEndpoints: n } = ge();
   return /* @__PURE__ */ I(
     fs,
     {
@@ -6777,7 +6777,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     }
   );
 }, el = ({ className: e }) => {
-  const { annotationsEditable: t } = Ge(), { setAnnotationsEditable: n } = ge();
+  const { annotationsEditable: t } = Ne(), { setAnnotationsEditable: n } = ge();
   return /* @__PURE__ */ I(
     hs,
     {
@@ -6790,7 +6790,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   filename: e,
   className: t
 }) => {
-  const { annotations: n } = Ge();
+  const { annotations: n } = Ne();
   return /* @__PURE__ */ I(
     gs,
     {
@@ -6812,7 +6812,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   onExportComplete: c,
   onExportError: u
 }) => {
-  const { tracks: g, trackStates: h } = De(), { exportWav: d, isExporting: b, progress: y } = Xs(), m = async () => {
+  const { tracks: g, trackStates: h } = Be(), { exportWav: d, isExporting: b, progress: y } = Xs(), m = async () => {
     try {
       const x = await d(g, h, {
         filename: t,
@@ -6830,7 +6830,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     }
   }, p = b ? `Exporting ${Math.round(y * 100)}%` : e;
   return /* @__PURE__ */ I(
-    Ve,
+    Pe,
     {
       onClick: m,
       disabled: b || g.length === 0,
@@ -6852,13 +6852,13 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   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 } = De();
-  return j(() => {
+  const n = T(null), r = T(null), { isPlaying: a, currentTimeRef: s, playbackStartTimeRef: o, audioStartPositionRef: i } = Ze(), { samplesPerPixel: l, sampleRate: c, progressBarWidth: u } = Be();
+  return U(() => {
     const g = () => {
       if (n.current) {
         let h;
         if (a) {
-          const b = ke().currentTime - (o.current ?? 0);
+          const b = Ae().currentTime - (o.current ?? 0);
           h = (i.current ?? 0) + b;
         } else
           h = s.current ?? 0;
@@ -6870,7 +6870,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     return a ? r.current = requestAnimationFrame(g) : g(), () => {
       r.current && (cancelAnimationFrame(r.current), r.current = null);
     };
-  }, [a, c, l, t, s, o, i]), j(() => {
+  }, [a, c, l, t, s, o, i]), U(() => {
     if (!a && n.current) {
       const h = (s.current ?? 0) * c / l + t;
       n.current.style.transform = `translate3d(${h}px, 0, 0)`;
@@ -6907,44 +6907,44 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   clipDurationSamples: t,
   ...n
 }) => {
-  const r = R(null), a = R(null), s = wt(), { waveHeight: o } = vt(), { 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 r = T(null), a = T(null), s = wt(), { waveHeight: o } = vt(), { isPlaying: i, currentTimeRef: l, playbackStartTimeRef: c, audioStartPositionRef: u } = Ze(), { samplesPerPixel: g, sampleRate: h } = Be(), d = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
+  U(() => {
     const p = () => {
       if (r.current) {
         let x;
         if (i) {
-          const C = ke().currentTime - (c.current ?? 0);
-          x = (u.current ?? 0) + C;
+          const v = Ae().currentTime - (c.current ?? 0);
+          x = (u.current ?? 0) + v;
         } else
           x = l.current ?? 0;
-        const v = x * h, f = e + t;
-        let w = 0;
-        if (v <= e)
-          w = 0;
-        else if (v >= f)
-          w = n.length;
+        const w = x * h, f = e + t;
+        let C = 0;
+        if (w <= e)
+          C = 0;
+        else if (w >= f)
+          C = n.length;
         else {
-          const C = v - e;
-          w = Math.floor(C / g);
+          const v = w - e;
+          C = Math.floor(v / g);
         }
-        r.current.style.width = `${w}px`;
+        r.current.style.width = `${C}px`;
       }
       i && (a.current = requestAnimationFrame(p));
     };
     return i ? a.current = requestAnimationFrame(p) : p(), () => {
       a.current && (cancelAnimationFrame(a.current), a.current = null);
     };
-  }, [i, h, g, e, t, n.length, l, c, u]), j(() => {
+  }, [i, h, g, e, t, n.length, l, c, u]), U(() => {
     if (!i && r.current) {
-      const x = (l.current ?? 0) * h, v = e + t;
+      const x = (l.current ?? 0) * h, w = e + t;
       let f = 0;
       if (x <= e)
         f = 0;
-      else if (x >= v)
+      else if (x >= w)
         f = n.length;
       else {
-        const w = x - e;
-        f = Math.floor(w / g);
+        const C = x - e;
+        f = Math.floor(C / g);
       }
       r.current.style.width = `${f}px`;
     }
@@ -6953,7 +6953,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   let y;
   b === "inverted" ? y = n.isSelected && s ? s.selectedWaveFillColor : s?.waveFillColor || "white" : y = n.isSelected && s ? s.selectedWaveOutlineColor : s?.waveOutlineColor || "grey";
   const m = at(y);
-  return /* @__PURE__ */ te(qs, { children: [
+  return /* @__PURE__ */ ne(qs, { children: [
     /* @__PURE__ */ I(
       ei,
       {
@@ -6992,98 +6992,98 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   touchOptimized: b = !1,
   recordingState: y
 }) => {
-  const m = wt(), { isPlaying: p, currentTimeRef: x, playbackStartTimeRef: v, audioStartPositionRef: f } = Fe(), {
-    selectionStart: w,
-    selectionEnd: C,
-    annotations: A,
-    activeAnnotationId: $,
-    annotationsEditable: k,
-    linkEndpoints: B,
+  const m = wt(), { isPlaying: p, currentTimeRef: x, playbackStartTimeRef: w, audioStartPositionRef: f } = Ze(), {
+    selectionStart: C,
+    selectionEnd: v,
+    annotations: k,
+    activeAnnotationId: B,
+    annotationsEditable: $,
+    linkEndpoints: A,
     continuousPlay: M,
     selectedTrackId: _,
-    loopStart: T,
-    loopEnd: H,
-    isLoopEnabled: P
-  } = Ge(), {
-    setAnnotations: F,
-    setActiveAnnotationId: O,
-    setTrackMute: N,
+    loopStart: E,
+    loopEnd: V,
+    isLoopEnabled: z
+  } = Ne(), {
+    setAnnotations: P,
+    setActiveAnnotationId: K,
+    setTrackMute: X,
     setTrackSolo: Z,
-    setTrackVolume: J,
-    setTrackPan: se,
-    setSelection: ae,
-    play: ee,
-    setScrollContainer: oe,
+    setTrackVolume: Q,
+    setTrackPan: le,
+    setSelection: te,
+    play: re,
+    setScrollContainer: ae,
     setSelectedTrackId: ye,
     setCurrentTime: be,
-    setLoopRegion: Ue
+    setLoopRegion: Ke
   } = ge(), {
     audioBuffers: Oe,
-    peaksDataArray: Se,
-    trackStates: je,
-    tracks: K,
-    duration: de,
-    samplesPerPixel: ne,
-    sampleRate: q,
-    waveHeight: me,
-    timeScaleHeight: Ce,
-    controls: re,
-    playoutRef: Ne,
-    barWidth: Ke,
-    barGap: V,
-    isReady: Pe
-  } = De(), [fe, X] = E(!1), ie = R(null), he = D((L) => {
-    ie.current = L, oe(L);
-  }, [oe]);
-  let pe = Oe.length > 0 ? de : ri;
+    peaksDataArray: ke,
+    trackStates: Ue,
+    tracks: De,
+    duration: ee,
+    samplesPerPixel: j,
+    sampleRate: oe,
+    waveHeight: de,
+    timeScaleHeight: me,
+    controls: J,
+    playoutRef: Re,
+    barWidth: je,
+    barGap: F,
+    isReady: ze
+  } = Be(), [fe, G] = R(!1), se = T(null), he = D((L) => {
+    se.current = L, ae(L);
+  }, [ae]);
+  let pe = Oe.length > 0 ? ee : ri;
   if (y?.isRecording) {
-    const Q = (y.startSample + y.durationSamples) / q;
-    pe = Math.max(pe, Q + 10);
+    const q = (y.startSample + y.durationSamples) / oe;
+    pe = Math.max(pe, q + 10);
   }
-  const Ie = Math.floor(pe * q / ne), Le = async (L) => {
-    console.log("Annotation clicked:", L.id), O(L.id);
-    const Q = M ? void 0 : L.end - L.start;
-    await ee(L.start, Q);
+  const xe = Math.floor(pe * oe / j), Le = async (L) => {
+    console.log("Annotation clicked:", L.id), K(L.id);
+    const q = M ? void 0 : L.end - L.start;
+    await re(L.start, q);
   }, Je = D((L) => {
-    if (L >= 0 && L < K.length) {
-      const Q = K[L];
-      ye(Q.id);
+    if (L >= 0 && L < De.length) {
+      const q = De[L];
+      ye(q.id);
     }
-  }, [K, ye]), st = (L) => {
-    const Q = L.currentTarget.getBoundingClientRect(), le = re.show ? re.width : 0, $e = (L.clientX - Q.left - le) * ne / q, ce = L.clientY - Q.top;
-    let Re = 0, Me = -1;
-    for (let Qe = 0; Qe < Se.length; Qe++) {
-      const qe = Se[Qe], Ye = (qe.length > 0 ? Math.max(...qe.map((Zt) => Zt.peaks.data.length)) : 1) * me + (g ? 22 : 0);
-      if (ce >= Re && ce < Re + Ye) {
-        Me = Qe;
+  }, [De, ye]), st = (L) => {
+    const q = L.currentTarget.getBoundingClientRect(), ie = J.show ? J.width : 0, Se = (L.clientX - q.left - ie) * j / oe, ce = L.clientY - q.top;
+    let Ee = 0, $e = -1;
+    for (let Qe = 0; Qe < ke.length; Qe++) {
+      const qe = ke[Qe], Ye = (qe.length > 0 ? Math.max(...qe.map((Zt) => Zt.peaks.data.length)) : 1) * de + (g ? 22 : 0);
+      if (ce >= Ee && ce < Ee + Ye) {
+        $e = Qe;
         break;
       }
-      Re += Ye;
+      Ee += Ye;
     }
-    Me !== -1 && Je(Me), X(!0), be($e), ae($e, $e);
+    $e !== -1 && Je($e), G(!0), be(Se), te(Se, Se);
   }, et = (L) => {
     if (!fe) return;
-    const Q = L.currentTarget.getBoundingClientRect(), le = re.show ? re.width : 0, $e = (L.clientX - Q.left - le) * ne / q, ze = Math.min(w, $e), ce = Math.max(w, $e);
-    ae(ze, ce);
+    const q = L.currentTarget.getBoundingClientRect(), ie = J.show ? J.width : 0, Se = (L.clientX - q.left - ie) * j / oe, He = Math.min(C, Se), ce = Math.max(C, Se);
+    te(He, ce);
   }, mt = (L) => {
     if (!fe) return;
-    X(!1);
-    const Q = L.currentTarget.getBoundingClientRect(), le = re.show ? re.width : 0, $e = (L.clientX - Q.left - le) * ne / q, ze = Math.min(w, $e), ce = Math.max(w, $e);
-    Math.abs(ce - ze) < 0.1 ? (be(ze), p && Ne.current ? (Ne.current.stop(), ee(ze)) : Ne.current && Ne.current.stop()) : ae(ze, ce);
+    G(!1);
+    const q = L.currentTarget.getBoundingClientRect(), ie = J.show ? J.width : 0, Se = (L.clientX - q.left - ie) * j / oe, He = Math.min(C, Se), ce = Math.max(C, Se);
+    Math.abs(ce - He) < 0.1 ? (be(He), p && Re.current ? (Re.current.stop(), re(He)) : Re.current && Re.current.stop()) : te(He, ce);
   };
-  return K.some((L) => L.clips.length > 0) && (Oe.length === 0 || Se.length === 0) ? /* @__PURE__ */ I("div", { className: u, children: "Loading waveform..." }) : /* @__PURE__ */ I(On, { children: /* @__PURE__ */ te(
+  return De.some((L) => L.clips.length > 0) && (Oe.length === 0 || ke.length === 0) ? /* @__PURE__ */ I("div", { className: u, children: "Loading waveform..." }) : /* @__PURE__ */ I(On, { children: /* @__PURE__ */ ne(
     Et.Provider,
     {
       value: {
-        samplesPerPixel: ne,
-        sampleRate: q,
-        zoomLevels: [ne],
-        waveHeight: me,
-        timeScaleHeight: Ce,
+        samplesPerPixel: j,
+        sampleRate: oe,
+        zoomLevels: [j],
+        waveHeight: de,
+        timeScaleHeight: me,
         duration: pe,
-        controls: re,
-        barWidth: Ke,
-        barGap: V
+        controls: J,
+        barWidth: je,
+        barGap: F
       },
       children: [
         /* @__PURE__ */ I(
@@ -7092,17 +7092,17 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
             theme: m,
             backgroundColor: at(m.waveOutlineColor),
             timescaleBackgroundColor: m.timescaleBackgroundColor,
-            scrollContainerWidth: Ie + (re.show ? re.width : 0),
-            timescaleWidth: Ie,
-            tracksWidth: Ie,
-            controlsWidth: re.show ? re.width : 0,
+            scrollContainerWidth: xe + (J.show ? J.width : 0),
+            timescaleWidth: xe,
+            tracksWidth: xe,
+            controlsWidth: J.show ? J.width : 0,
             onTracksMouseDown: st,
             onTracksMouseMove: et,
             onTracksMouseUp: mt,
             scrollContainerRef: he,
             isSelecting: fe,
-            "data-playlist-state": Pe ? "ready" : "loading",
-            timescale: Ce > 0 ? /* @__PURE__ */ te(rt, { children: [
+            "data-playlist-state": ze ? "ready" : "loading",
+            timescale: me > 0 ? /* @__PURE__ */ ne(rt, { children: [
               /* @__PURE__ */ I(
                 jn,
                 {
@@ -7113,41 +7113,41 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
                   renderTimestamp: t
                 }
               ),
-              P && /* @__PURE__ */ I(
+              z && /* @__PURE__ */ I(
                 no,
                 {
-                  startPosition: Math.min(T, H) * q / ne,
-                  endPosition: Math.max(T, H) * q / ne,
+                  startPosition: Math.min(E, V) * oe / j,
+                  endPosition: Math.max(E, V) * oe / j,
                   markerColor: m.loopMarkerColor,
                   regionColor: m.loopRegionColor,
                   minPosition: 0,
-                  maxPosition: Ie,
-                  controlsOffset: re.show ? re.width : 0,
-                  onLoopRegionChange: (L, Q) => {
-                    const le = L * ne / q, ve = Q * ne / q;
-                    Ue(le, ve);
+                  maxPosition: xe,
+                  controlsOffset: J.show ? J.width : 0,
+                  onLoopRegionChange: (L, q) => {
+                    const ie = L * j / oe, ve = q * j / oe;
+                    Ke(ie, ve);
                   }
                 }
               )
             ] }) : void 0,
-            children: /* @__PURE__ */ te(rt, { children: [
-              Se.map((L, Q) => {
-                const le = K[Q];
-                if (!le) return null;
-                const ve = je[Q] || {
-                  name: `Track ${Q + 1}`,
+            children: /* @__PURE__ */ ne(rt, { children: [
+              ke.map((L, q) => {
+                const ie = De[q];
+                if (!ie) return null;
+                const ve = Ue[q] || {
+                  name: `Track ${q + 1}`,
                   muted: !1,
                   soloed: !1,
                   volume: 1,
                   pan: 0
-                }, $e = e ? e(Q) : /* @__PURE__ */ te(Ao, { onClick: () => Je(Q), children: [
-                  /* @__PURE__ */ I(ko, { style: { justifyContent: "center" }, children: ve.name || `Track ${Q + 1}` }),
-                  /* @__PURE__ */ te(Io, { children: [
+                }, Se = e ? e(q) : /* @__PURE__ */ ne(Ao, { onClick: () => Je(q), children: [
+                  /* @__PURE__ */ I(ko, { style: { justifyContent: "center" }, children: ve.name || `Track ${q + 1}` }),
+                  /* @__PURE__ */ ne(Io, { children: [
                     /* @__PURE__ */ I(
                       gn,
                       {
                         $variant: ve.muted ? "danger" : "outline",
-                        onClick: () => N(Q, !ve.muted),
+                        onClick: () => X(q, !ve.muted),
                         children: "Mute"
                       }
                     ),
@@ -7155,12 +7155,12 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
                       gn,
                       {
                         $variant: ve.soloed ? "info" : "outline",
-                        onClick: () => Z(Q, !ve.soloed),
+                        onClick: () => Z(q, !ve.soloed),
                         children: "Solo"
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ te(vn, { children: [
+                  /* @__PURE__ */ ne(vn, { children: [
                     /* @__PURE__ */ I(So, {}),
                     /* @__PURE__ */ I(
                       bn,
@@ -7169,12 +7169,12 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
                         max: "1",
                         step: "0.01",
                         value: ve.volume,
-                        onChange: (ce) => J(Q, parseFloat(ce.target.value))
+                        onChange: (ce) => Q(q, parseFloat(ce.target.value))
                       }
                     ),
                     /* @__PURE__ */ I($o, {})
                   ] }),
-                  /* @__PURE__ */ te(vn, { children: [
+                  /* @__PURE__ */ ne(vn, { children: [
                     /* @__PURE__ */ I("span", { children: "L" }),
                     /* @__PURE__ */ I(
                       bn,
@@ -7183,78 +7183,78 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
                         max: "1",
                         step: "0.01",
                         value: ve.pan,
-                        onChange: (ce) => se(Q, parseFloat(ce.target.value))
+                        onChange: (ce) => le(q, parseFloat(ce.target.value))
                       }
                     ),
                     /* @__PURE__ */ I("span", { children: "R" })
                   ] })
-                ] }), ze = L.length > 0 ? Math.max(...L.map((ce) => ce.peaks.data.length)) : 1;
-                return /* @__PURE__ */ I(Qt.Provider, { value: $e, children: /* @__PURE__ */ te(
+                ] }), He = L.length > 0 ? Math.max(...L.map((ce) => ce.peaks.data.length)) : 1;
+                return /* @__PURE__ */ I(Qt.Provider, { value: Se, children: /* @__PURE__ */ ne(
                   Jn,
                   {
-                    numChannels: ze,
+                    numChannels: He,
                     backgroundColor: at(m.waveOutlineColor),
                     offset: 0,
-                    width: Ie,
+                    width: xe,
                     hasClipHeaders: g,
-                    trackId: le.id,
-                    isSelected: le.id === _,
+                    trackId: ie.id,
+                    isSelected: ie.id === _,
                     children: [
-                      L.map((ce, Re) => {
-                        const Me = ce.peaks, Qe = Me.length;
+                      L.map((ce, Ee) => {
+                        const $e = ce.peaks, Qe = $e.length;
                         return /* @__PURE__ */ I(
                           Lt,
                           {
                             clipId: ce.clipId,
-                            trackIndex: Q,
-                            clipIndex: Re,
+                            trackIndex: q,
+                            clipIndex: Ee,
                             trackName: ce.trackName,
                             startSample: ce.startSample,
                             durationSamples: ce.durationSamples,
-                            samplesPerPixel: ne,
+                            samplesPerPixel: j,
                             showHeader: g,
                             disableHeaderDrag: !h,
-                            isSelected: le.id === _,
-                            trackId: le.id,
+                            isSelected: ie.id === _,
+                            trackId: ie.id,
                             fadeIn: ce.fadeIn,
                             fadeOut: ce.fadeOut,
-                            sampleRate: q,
+                            sampleRate: oe,
                             showFades: d,
                             touchOptimized: b,
                             onMouseDown: (qe) => {
-                              qe.target.closest('[role="button"][aria-roledescription="draggable"]') || Je(Q);
+                              qe.target.closest('[role="button"][aria-roledescription="draggable"]') || Je(q);
                             },
-                            children: Me.data.map((qe, it) => /* @__PURE__ */ I(
+                            children: $e.data.map((qe, it) => /* @__PURE__ */ I(
                               Sn,
                               {
                                 index: it,
                                 data: qe,
-                                bits: Me.bits,
+                                bits: $e.bits,
                                 length: Qe,
-                                isSelected: le.id === _,
+                                isSelected: ie.id === _,
                                 clipStartSample: ce.startSample,
                                 clipDurationSamples: ce.durationSamples
                               },
-                              `${Q}-${Re}-${it}`
+                              `${q}-${Ee}-${it}`
                             ))
                           },
-                          `${Q}-${Re}`
+                          `${q}-${Ee}`
                         );
                       }),
-                      y?.isRecording && y.trackId === le.id && y.peaks.length > 0 && /* @__PURE__ */ I(
+                      y?.isRecording && y.trackId === ie.id && y.peaks.length > 0 && /* @__PURE__ */ I(
                         Lt,
                         {
                           clipId: "recording-preview",
-                          trackIndex: Q,
+                          trackIndex: q,
                           clipIndex: L.length,
                           trackName: "Recording...",
                           startSample: y.startSample,
                           durationSamples: y.durationSamples,
-                          samplesPerPixel: ne,
+                          samplesPerPixel: j,
                           showHeader: g,
                           disableHeaderDrag: !0,
-                          isSelected: le.id === _,
-                          trackId: le.id,
+                          isSelected: ie.id === _,
+                          trackId: ie.id,
                           children: /* @__PURE__ */ I(
                             Sn,
                             {
@@ -7262,84 +7262,84 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
                               data: y.peaks,
                               bits: 16,
                               length: Math.floor(y.peaks.length / 2),
-                              isSelected: le.id === _,
+                              isSelected: ie.id === _,
                               clipStartSample: y.startSample,
                               clipDurationSamples: y.durationSamples
                             },
-                            `${Q}-recording-0`
+                            `${q}-recording-0`
                           )
                         },
-                        `${Q}-recording`
+                        `${q}-recording`
                       )
                     ]
                   }
-                ) }, le.id);
+                ) }, ie.id);
               }),
-              A.length > 0 && /* @__PURE__ */ I(ar, { height: 30, width: Ie, children: A.map((L, Q) => {
-                const le = L.start * q / ne, ve = L.end * q / ne, $e = i ? i(L, Q) : L.id;
+              k.length > 0 && /* @__PURE__ */ I(ar, { height: 30, width: xe, children: k.map((L, q) => {
+                const ie = L.start * oe / j, ve = L.end * oe / j, Se = i ? i(L, q) : L.id;
                 return /* @__PURE__ */ I(
                   rr,
                   {
                     annotationId: L.id,
-                    annotationIndex: Q,
-                    startPosition: le,
+                    annotationIndex: q,
+                    startPosition: ie,
                     endPosition: ve,
-                    label: $e,
+                    label: Se,
                     color: "#ff9800",
-                    isActive: L.id === $,
+                    isActive: L.id === B,
                     onClick: () => Le(L),
-                    editable: k
+                    editable: $
                   },
                   L.id
                 );
               }) }),
-              w !== C && /* @__PURE__ */ I(
+              C !== v && /* @__PURE__ */ I(
                 Nn,
                 {
-                  startPosition: Math.min(w, C) * q / ne + (re.show ? re.width : 0),
-                  endPosition: Math.max(w, C) * q / ne + (re.show ? re.width : 0),
+                  startPosition: Math.min(C, v) * oe / j + (J.show ? J.width : 0),
+                  endPosition: Math.max(C, v) * oe / j + (J.show ? J.width : 0),
                   color: m.selectionColor
                 }
               ),
-              (p || w === C) && (n ? (
+              (p || C === v) && (n ? (
                 // Custom playhead - pass all animation refs for smooth 60fps animation
                 n({
-                  position: (x.current ?? 0) * q / ne + (re.show ? re.width : 0),
+                  position: (x.current ?? 0) * oe / j + (J.show ? J.width : 0),
                   color: m.playheadColor,
                   isPlaying: p,
                   currentTimeRef: x,
-                  playbackStartTimeRef: v,
+                  playbackStartTimeRef: w,
                   audioStartPositionRef: f,
-                  samplesPerPixel: ne,
-                  sampleRate: q,
-                  controlsOffset: re.show ? re.width : 0,
-                  getAudioContextTime: () => ke().currentTime
+                  samplesPerPixel: j,
+                  sampleRate: oe,
+                  controlsOffset: J.show ? J.width : 0,
+                  getAudioContextTime: () => Ae().currentTime
                 })
               ) : /* @__PURE__ */ I(
                 Qs,
                 {
                   color: m.playheadColor,
-                  controlsOffset: re.show ? re.width : 0
+                  controlsOffset: J.show ? J.width : 0
                 }
               ))
             ] })
           }
         ),
-        A.length > 0 && /* @__PURE__ */ I(
+        k.length > 0 && /* @__PURE__ */ I(
           or,
           {
-            annotations: A,
-            activeAnnotationId: $ ?? void 0,
+            annotations: k,
+            activeAnnotationId: B ?? void 0,
             shouldScrollToActive: !0,
             scrollActivePosition: l,
             scrollActiveContainer: c,
-            editable: k,
-            controls: k ? r : void 0,
-            annotationListConfig: { linkEndpoints: B, continuousPlay: M },
+            editable: $,
+            controls: $ ? r : void 0,
+            annotationListConfig: { linkEndpoints: A, continuousPlay: M },
             height: s,
             renderAnnotationItem: o,
             onAnnotationUpdate: (L) => {
-              F(L);
+              P(L);
             }
           }
         )
@@ -7360,8 +7360,8 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   color: e = "#ff0000",
   controlsOffset: t = 0
 }) => {
-  const n = R(null), r = R(null), { isPlaying: a, currentTimeRef: s } = qt(), { samplesPerPixel: o, sampleRate: i, progressBarWidth: l } = en();
-  return j(() => {
+  const n = T(null), r = T(null), { isPlaying: a, currentTimeRef: s } = qt(), { samplesPerPixel: o, sampleRate: i, progressBarWidth: l } = en();
+  return U(() => {
     const c = () => {
       if (n.current) {
         const g = (s.current ?? 0) * i / o + t;
@@ -7372,7 +7372,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
     return a ? r.current = requestAnimationFrame(c) : c(), () => {
       r.current && (cancelAnimationFrame(r.current), r.current = null);
     };
-  }, [a, i, o, t, s]), j(() => {
+  }, [a, i, o, t, s]), U(() => {
     if (!a && n.current) {
       const u = (s.current ?? 0) * i / o + t;
       n.current.style.transform = `translate3d(${u}px, 0, 0)`;
@@ -7408,28 +7408,28 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   clipDurationSamples: t,
   ...n
 }) => {
-  const r = R(null), a = R(null), s = wt(), { waveHeight: o } = vt(), { isPlaying: i, currentTimeRef: l } = qt(), { samplesPerPixel: c, sampleRate: u } = en(), g = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
-  j(() => {
+  const r = T(null), a = T(null), s = wt(), { waveHeight: o } = vt(), { isPlaying: i, currentTimeRef: l } = qt(), { samplesPerPixel: c, sampleRate: u } = en(), g = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
+  U(() => {
     const y = () => {
       if (r.current) {
         const p = (l.current ?? 0) * u, x = e + t;
-        let v = 0;
+        let w = 0;
         if (p <= e)
-          v = 0;
+          w = 0;
         else if (p >= x)
-          v = n.length;
+          w = n.length;
         else {
           const f = p - e;
-          v = Math.floor(f / c);
+          w = Math.floor(f / c);
         }
-        r.current.style.width = `${v}px`;
+        r.current.style.width = `${w}px`;
       }
       i && (a.current = requestAnimationFrame(y));
     };
     return i ? a.current = requestAnimationFrame(y) : y(), () => {
       a.current && (cancelAnimationFrame(a.current), a.current = null);
     };
-  }, [i, u, c, e, t, n.length, l]), j(() => {
+  }, [i, u, c, e, t, n.length, l]), U(() => {
     if (!i && r.current) {
       const m = (l.current ?? 0) * u, p = e + t;
       let x = 0;
@@ -7438,8 +7438,8 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
       else if (m >= p)
         x = n.length;
       else {
-        const v = m - e;
-        x = Math.floor(v / c);
+        const w = m - e;
+        x = Math.floor(w / c);
       }
       r.current.style.width = `${x}px`;
     }
@@ -7448,7 +7448,7 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   let d;
   h === "inverted" ? d = s?.selectedWaveFillColor || s?.waveFillColor || "white" : d = s?.selectedWaveOutlineColor || s?.waveOutlineColor || "grey";
   const b = at(d);
-  return /* @__PURE__ */ te(si, { children: [
+  return /* @__PURE__ */ ne(si, { children: [
     /* @__PURE__ */ I(
       ii,
       {
@@ -7474,195 +7474,196 @@ const fr = Be(null), hr = Be(null), pr = Be(null), gr = Be(null), _i = ({
   getAnnotationBoxLabel: t,
   renderAnnotationItem: n,
   editable: r = !1,
-  onAnnotationUpdate: a,
-  scrollActivePosition: s = "center",
-  scrollActiveContainer: o = "nearest",
-  className: i
+  linkEndpoints: a = !1,
+  onAnnotationUpdate: s,
+  scrollActivePosition: o = "center",
+  scrollActiveContainer: i = "nearest",
+  className: l
 }) => {
-  const l = wt(), { isPlaying: c, currentTimeRef: u } = qt(), { annotations: g, activeAnnotationId: h, continuousPlay: d } = Ks(), { play: b, seekTo: y, setActiveAnnotationId: m, setAnnotations: p, setScrollContainer: x } = Us(), {
-    duration: v,
-    peaksDataArray: f,
-    sampleRate: w,
-    waveHeight: C,
-    timeScaleHeight: A,
+  const c = wt(), { isPlaying: u, currentTimeRef: g } = qt(), { annotations: h, activeAnnotationId: d, continuousPlay: b } = Ks(), { play: y, seekTo: m, setActiveAnnotationId: p, setAnnotations: x, setScrollContainer: w } = Us(), {
+    duration: f,
+    peaksDataArray: C,
+    sampleRate: v,
+    waveHeight: k,
+    timeScaleHeight: B,
     samplesPerPixel: $,
-    controls: k,
-    playoutRef: B,
-    barWidth: M,
-    barGap: _
-  } = en(), [T, H] = E(0), [P, F] = E(0), [O, N] = E(!1), Z = R(null), J = D((K) => {
-    Z.current = K, x(K);
-  }, [x]), se = Math.floor(v * w / $), ae = D(async (K) => {
-    m(K.id), b(K.start);
-  }, [m, b]), ee = D((K) => {
-    p(K), a?.(K);
-  }, [p, a]), { onDragStart: oe, onDragMove: ye, onDragEnd: be } = Is({
-    annotations: g,
-    onAnnotationsChange: ee,
+    controls: A,
+    playoutRef: M,
+    barWidth: _,
+    barGap: E
+  } = en(), [V, z] = R(0), [P, K] = R(0), [X, Z] = R(!1), Q = T(null), le = D((ee) => {
+    Q.current = ee, w(ee);
+  }, [w]), te = Math.floor(f * v / $), re = D(async (ee) => {
+    p(ee.id), y(ee.start);
+  }, [p, y]), ae = D((ee) => {
+    x(ee), s?.(ee);
+  }, [x, s]), { onDragStart: ye, onDragMove: be, onDragEnd: Ke } = Is({
+    annotations: h,
+    onAnnotationsChange: ae,
     samplesPerPixel: $,
-    sampleRate: w,
-    duration: v,
-    linkEndpoints: !0
-  }), Ue = D((K) => {
-    const de = K.currentTarget.getBoundingClientRect(), ne = k.show ? k.width : 0, me = (K.clientX - de.left - ne) * $ / w;
-    N(!0), H(me), F(me);
-  }, [k, $, w]), Oe = D((K) => {
-    if (!O) return;
-    const de = K.currentTarget.getBoundingClientRect(), ne = k.show ? k.width : 0, me = (K.clientX - de.left - ne) * $ / w;
-    F(me);
-  }, [O, k, $, w]), Se = D((K) => {
-    if (!O) return;
-    N(!1);
-    const de = K.currentTarget.getBoundingClientRect(), ne = k.show ? k.width : 0, me = (K.clientX - de.left - ne) * $ / w, Ce = Math.min(T, me), re = Math.max(T, me);
-    Math.abs(re - Ce) < 0.1 ? (y(Ce), H(Ce), F(Ce), c && B.current && (B.current.stop(), b(Ce))) : (H(Ce), F(re));
-  }, [O, T, $, w, k, y, c, B, b]);
-  if (f.length === 0)
-    return /* @__PURE__ */ I("div", { className: i, children: "Loading waveform..." });
-  const je = null;
-  return /* @__PURE__ */ I(On, { children: /* @__PURE__ */ te(
+    sampleRate: v,
+    duration: f,
+    linkEndpoints: a
+  }), Oe = D((ee) => {
+    const j = ee.currentTarget.getBoundingClientRect(), oe = A.show ? A.width : 0, me = (ee.clientX - j.left - oe) * $ / v;
+    Z(!0), z(me), K(me);
+  }, [A, $, v]), ke = D((ee) => {
+    if (!X) return;
+    const j = ee.currentTarget.getBoundingClientRect(), oe = A.show ? A.width : 0, me = (ee.clientX - j.left - oe) * $ / v;
+    K(me);
+  }, [X, A, $, v]), Ue = D((ee) => {
+    if (!X) return;
+    Z(!1);
+    const j = ee.currentTarget.getBoundingClientRect(), oe = A.show ? A.width : 0, me = (ee.clientX - j.left - oe) * $ / v, J = Math.min(V, me), Re = Math.max(V, me);
+    Math.abs(Re - J) < 0.1 ? (m(J), z(J), K(J), u && M.current && (M.current.stop(), y(J))) : (z(J), K(Re));
+  }, [X, V, $, v, A, m, u, M, y]);
+  if (C.length === 0)
+    return /* @__PURE__ */ I("div", { className: l, children: "Loading waveform..." });
+  const De = null;
+  return /* @__PURE__ */ I(On, { children: /* @__PURE__ */ ne(
     Et.Provider,
     {
       value: {
         samplesPerPixel: $,
-        sampleRate: w,
+        sampleRate: v,
         zoomLevels: [$],
-        waveHeight: C,
-        timeScaleHeight: A,
-        duration: v,
-        controls: k,
-        barWidth: M,
-        barGap: _
+        waveHeight: k,
+        timeScaleHeight: B,
+        duration: f,
+        controls: A,
+        barWidth: _,
+        barGap: E
       },
       children: [
         /* @__PURE__ */ I(
           Jt,
           {
-            theme: l,
-            backgroundColor: at(l.waveOutlineColor),
-            timescaleBackgroundColor: l.timescaleBackgroundColor,
-            scrollContainerWidth: se + (k.show ? k.width : 0),
-            timescaleWidth: se,
-            tracksWidth: se,
-            controlsWidth: k.show ? k.width : 0,
-            onTracksMouseDown: Ue,
-            onTracksMouseMove: Oe,
-            onTracksMouseUp: Se,
-            scrollContainerRef: J,
-            isSelecting: O,
-            timescale: A > 0 ? /* @__PURE__ */ I(
+            theme: c,
+            backgroundColor: at(c.waveOutlineColor),
+            timescaleBackgroundColor: c.timescaleBackgroundColor,
+            scrollContainerWidth: te + (A.show ? A.width : 0),
+            timescaleWidth: te,
+            tracksWidth: te,
+            controlsWidth: A.show ? A.width : 0,
+            onTracksMouseDown: Oe,
+            onTracksMouseMove: ke,
+            onTracksMouseUp: Ue,
+            scrollContainerRef: le,
+            isSelecting: X,
+            timescale: B > 0 ? /* @__PURE__ */ I(
               jn,
               {
-                duration: v * 1e3,
+                duration: f * 1e3,
                 marker: 1e4,
                 bigStep: 5e3,
                 secondStep: 1e3
               }
             ) : void 0,
-            children: /* @__PURE__ */ te(rt, { children: [
-              f.map((K, de) => {
-                const ne = K.length > 0 ? Math.max(...K.map((q) => q.peaks.data.length)) : 1;
-                return /* @__PURE__ */ I(Qt.Provider, { value: je, children: /* @__PURE__ */ I(
+            children: /* @__PURE__ */ ne(rt, { children: [
+              C.map((ee, j) => {
+                const oe = ee.length > 0 ? Math.max(...ee.map((de) => de.peaks.data.length)) : 1;
+                return /* @__PURE__ */ I(Qt.Provider, { value: De, children: /* @__PURE__ */ I(
                   Jn,
                   {
-                    numChannels: ne,
-                    backgroundColor: at(l.waveOutlineColor),
+                    numChannels: oe,
+                    backgroundColor: at(c.waveOutlineColor),
                     offset: 0,
-                    width: se,
+                    width: te,
                     hasClipHeaders: !1,
-                    trackId: `media-element-track-${de}`,
+                    trackId: `media-element-track-${j}`,
                     isSelected: !0,
-                    children: K.map((q, me) => {
-                      const Ce = q.peaks, re = Ce.length;
+                    children: ee.map((de, me) => {
+                      const J = de.peaks, Re = J.length;
                       return /* @__PURE__ */ I(
                         Lt,
                         {
-                          clipId: q.clipId,
-                          trackIndex: de,
+                          clipId: de.clipId,
+                          trackIndex: j,
                           clipIndex: me,
-                          trackName: q.trackName,
-                          startSample: q.startSample,
-                          durationSamples: q.durationSamples,
+                          trackName: de.trackName,
+                          startSample: de.startSample,
+                          durationSamples: de.durationSamples,
                           samplesPerPixel: $,
                           showHeader: !1,
                           disableHeaderDrag: !0,
                           isSelected: !0,
-                          trackId: `media-element-track-${de}`,
-                          children: Ce.data.map((Ne, Ke) => /* @__PURE__ */ I(
+                          trackId: `media-element-track-${j}`,
+                          children: J.data.map((je, F) => /* @__PURE__ */ I(
                             ui,
                             {
-                              index: Ke,
-                              data: Ne,
-                              bits: Ce.bits,
-                              length: re,
-                              clipStartSample: q.startSample,
-                              clipDurationSamples: q.durationSamples
+                              index: F,
+                              data: je,
+                              bits: J.bits,
+                              length: Re,
+                              clipStartSample: de.startSample,
+                              clipDurationSamples: de.durationSamples
                             },
-                            `${de}-${me}-${Ke}`
+                            `${j}-${me}-${F}`
                           ))
                         },
-                        `${de}-${me}`
+                        `${j}-${me}`
                       );
                     })
                   }
-                ) }, de);
+                ) }, j);
               }),
-              g.length > 0 && /* @__PURE__ */ I(
+              h.length > 0 && /* @__PURE__ */ I(
                 pa,
                 {
-                  onDragStart: oe,
-                  onDragMove: ye,
-                  onDragEnd: be,
+                  onDragStart: ye,
+                  onDragMove: be,
+                  onDragEnd: Ke,
                   modifiers: r ? [ga] : [],
-                  children: /* @__PURE__ */ I(ar, { height: 30, width: se, children: g.map((K, de) => {
-                    const ne = K.start * w / $, q = K.end * w / $, me = t ? t(K, de) : K.id;
+                  children: /* @__PURE__ */ I(ar, { height: 30, width: te, children: h.map((ee, j) => {
+                    const oe = ee.start * v / $, de = ee.end * v / $, me = t ? t(ee, j) : ee.id;
                     return /* @__PURE__ */ I(
                       rr,
                       {
-                        annotationId: K.id,
-                        annotationIndex: de,
-                        startPosition: ne,
-                        endPosition: q,
+                        annotationId: ee.id,
+                        annotationIndex: j,
+                        startPosition: oe,
+                        endPosition: de,
                         label: me,
                         color: "#ff9800",
-                        isActive: K.id === h,
-                        onClick: () => ae(K),
+                        isActive: ee.id === d,
+                        onClick: () => re(ee),
                         editable: r
                       },
-                      K.id
+                      ee.id
                     );
                   }) })
                 }
               ),
-              T !== P && /* @__PURE__ */ I(
+              V !== P && /* @__PURE__ */ I(
                 Nn,
                 {
-                  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
+                  startPosition: Math.min(V, P) * v / $ + (A.show ? A.width : 0),
+                  endPosition: Math.max(V, P) * v / $ + (A.show ? A.width : 0),
+                  color: c.selectionColor
                 }
               ),
               /* @__PURE__ */ I(
                 oi,
                 {
-                  color: l.playheadColor,
-                  controlsOffset: k.show ? k.width : 0
+                  color: c.playheadColor,
+                  controlsOffset: A.show ? A.width : 0
                 }
               )
             ] })
           }
         ),
-        g.length > 0 && /* @__PURE__ */ I(
+        h.length > 0 && /* @__PURE__ */ I(
           or,
           {
-            annotations: g,
-            activeAnnotationId: h ?? void 0,
+            annotations: h,
+            activeAnnotationId: d ?? void 0,
             shouldScrollToActive: !0,
-            scrollActivePosition: s,
-            scrollActiveContainer: o,
+            scrollActivePosition: o,
+            scrollActiveContainer: i,
             editable: r,
-            annotationListConfig: { linkEndpoints: !0, continuousPlay: d },
+            annotationListConfig: { linkEndpoints: a, continuousPlay: b },
             height: e,
-            onAnnotationUpdate: ee,
+            onAnnotationUpdate: ae,
             renderAnnotationItem: n
           }
         )
@@ -7723,11 +7724,11 @@ export {
   Us as useMediaElementControls,
   en as useMediaElementData,
   Ks as useMediaElementState,
-  Fe as usePlaybackAnimation,
+  Ze as usePlaybackAnimation,
   ki as usePlaybackShortcuts,
   ge as usePlaylistControls,
-  De as usePlaylistData,
-  Ge as usePlaylistState,
+  Be as usePlaylistData,
+  Ne as usePlaylistState,
   bs as useTimeFormat,
   Ri as useTrackDynamicEffects,
   Wi as useWaveformPlaylist,