@waveform-playlist/browser 5.2.0-next.4 → 5.2.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import * as zr from "tone";
-import { Volume as Sn, getDestination as $n, start as Mn, now as kt, getTransport as lt, getContext as Ae, Context as Hr, setContext as Xr, Panner as Gr, Gain as on, Player as sn, Analyser as Bn, Meter as Nr, connect as Lr, StereoWidener as Yr, Gate as Or, Limiter as Kr, Compressor as Ur, Chebyshev as jr, BitCrusher as Jr, Distortion as Qr, EQ3 as qr, AutoWah as ea, AutoFilter as ta, AutoPanner as na, Vibrato as ra, Tremolo as aa, Phaser as oa, Chorus as sa, PingPongDelay as ia, FeedbackDelay as la, JCReverb as ca, Freeverb as ua, Reverb as da } from "tone";
+import { Volume as Sn, getDestination as $n, start as Mn, now as kt, getTransport as lt, getContext as Ae, Context as Hr, setContext as Xr, Panner as Gr, Gain as on, Player as sn, Analyser as Dn, Meter as Nr, connect as Lr, StereoWidener as Yr, Gate as Or, Limiter as Kr, Compressor as Ur, Chebyshev as jr, BitCrusher as Jr, Distortion as Qr, EQ3 as qr, AutoWah as ea, AutoFilter as ta, AutoPanner as na, Vibrato as ra, Tremolo as aa, Phaser as oa, Chorus as sa, PingPongDelay as ia, FeedbackDelay as la, JCReverb as ca, Freeverb as ua, Reverb as da } from "tone";
 import { jsx as x, jsxs as re, Fragment as Le } from "react/jsx-runtime";
 import * as Y from "react";
-import We, { createContext as ke, useContext as De, useState as _, useEffect as Q, Fragment as ma, useRef as R, useCallback as B, useLayoutEffect as fa, useMemo as Ne } from "react";
-import k, { withTheme as Dn, ThemeContext as ha, useTheme as pa, ThemeProvider as Tn } from "styled-components";
-import { useDraggable as gt, useSensor as Zt, MouseSensor as ga, TouchSensor as ba, PointerSensor as va, useSensors as wa, DndContext as ya } from "@dnd-kit/core";
+import We, { createContext as ke, useContext as Be, useState as _, useEffect as Q, Fragment as ma, useRef as E, useCallback as D, useLayoutEffect as fa, useMemo as Ne } from "react";
+import k, { withTheme as Bn, ThemeContext as ha, useTheme as pa, ThemeProvider as Tn } from "styled-components";
+import { useDraggable as gt, useSensor as Vt, MouseSensor as ga, TouchSensor as ba, PointerSensor as va, useSensors as wa, DndContext as ya } from "@dnd-kit/core";
 import { restrictToHorizontalAxis as Ca } from "@dnd-kit/modifiers";
 function ln(e, t) {
   const n = new Float32Array(e), r = e - 1;
@@ -36,7 +36,7 @@ function Aa(e, t, n = 10) {
   }
   return r;
 }
-function Rn(e, t, n) {
+function En(e, t, n) {
   switch (e) {
     case "linear":
       return ln(t, n);
@@ -57,7 +57,7 @@ function cn(e, t, n, r = "linear", a = 0, s = 1) {
     else if (r === "exponential")
       e.setValueAtTime(Math.max(a, 1e-3), t), e.exponentialRampToValueAtTime(Math.max(s, 1e-3), t + n);
     else {
-      const o = Rn(r, 1e4, !0), i = new Float32Array(o.length), l = s - a;
+      const o = En(r, 1e4, !0), i = new Float32Array(o.length), l = s - a;
       for (let c = 0; c < o.length; c++)
         i[c] = a + o[c] * l;
       e.setValueCurveAtTime(i, t, n);
@@ -70,7 +70,7 @@ function un(e, t, n, r = "linear", a = 1, s = 0) {
     else if (r === "exponential")
       e.setValueAtTime(Math.max(a, 1e-3), t), e.exponentialRampToValueAtTime(Math.max(s, 1e-3), t + n);
     else {
-      const o = Rn(r, 1e4, !1), i = new Float32Array(o.length), l = a - s;
+      const o = En(r, 1e4, !1), i = new Float32Array(o.length), l = a - s;
       for (let c = 0; c < o.length; c++)
         i[c] = s + o[c] * l;
       e.setValueCurveAtTime(i, t, n);
@@ -376,11 +376,11 @@ var ka = class {
 function $a() {
   return xt || (xt = new Hr(), Xr(xt)), xt;
 }
-async function Vt() {
+async function Pt() {
   const e = $a();
   e.state !== "running" && await e.resume();
 }
-const Ht = /* @__PURE__ */ Object.freeze({
+const Xt = /* @__PURE__ */ Object.freeze({
   Translate: {
     toString(e) {
       if (!e)
@@ -406,7 +406,7 @@ const Ht = /* @__PURE__ */ Object.freeze({
   Transform: {
     toString(e) {
       if (e)
-        return [Ht.Translate.toString(e), Ht.Scale.toString(e)].join(" ");
+        return [Xt.Translate.toString(e), Xt.Scale.toString(e)].join(" ");
     }
   },
   Transition: {
@@ -444,7 +444,7 @@ const Ht = /* @__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.78Zm47-111.61a36,36,0,0,1,0,47.59,4,4,0,1,1-6-5.3,28,28,0,0,0,0-37,4,4,0,0,1,6-5.28ZM244,128a75.88,75.88,0,0,1-19.35,50.67,4,4,0,0,1-6-5.34,68,68,0,0,0,0-90.66,4,4,0,0,1,6-5.34A75.88,75.88,0,0,1,244,128Z" }))
   ]
-]), Ba = /* @__PURE__ */ new Map([
+]), Da = /* @__PURE__ */ new Map([
   [
     "bold",
     /* @__PURE__ */ Y.createElement(Y.Fragment, null, /* @__PURE__ */ Y.createElement("path", { d: "M157.27,21.22a12,12,0,0,0-12.64,1.31L75.88,76H32A20,20,0,0,0,12,96v64a20,20,0,0,0,20,20H75.88l68.75,53.47A12,12,0,0,0,164,224V32A12,12,0,0,0,157.27,21.22ZM36,100H68v56H36Zm104,99.46L92,162.13V93.87l48-37.33ZM212,128a44,44,0,0,1-11,29.11,12,12,0,0,1-18-15.88,20,20,0,0,0,0-26.44,12,12,0,0,1,18-15.85A43.94,43.94,0,0,1,212,128Z" }))
@@ -469,12 +469,12 @@ const Ht = /* @__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" }))
   ]
-]), Da = ke({
+]), Ba = ke({
   color: "currentColor",
   size: "1em",
   weight: "regular",
   mirrored: !1
-}), Lt = Y.forwardRef(
+}), Yt = Y.forwardRef(
   (e, t) => {
     const {
       alt: n,
@@ -491,7 +491,7 @@ const Ht = /* @__PURE__ */ Object.freeze({
       weight: p = "regular",
       mirrored: d = !1,
       ...b
-    } = Y.useContext(Da);
+    } = Y.useContext(Ba);
     return /* @__PURE__ */ Y.createElement(
       "svg",
       {
@@ -511,10 +511,10 @@ const Ht = /* @__PURE__ */ Object.freeze({
     );
   }
 );
-Lt.displayName = "IconBase";
-const En = Y.forwardRef((e, t) => /* @__PURE__ */ Y.createElement(Lt, { ref: t, ...e, weights: Ma }));
-En.displayName = "SpeakerHighIcon";
-const Wn = Y.forwardRef((e, t) => /* @__PURE__ */ Y.createElement(Lt, { ref: t, ...e, weights: Ba }));
+Yt.displayName = "IconBase";
+const Rn = Y.forwardRef((e, t) => /* @__PURE__ */ Y.createElement(Yt, { ref: t, ...e, weights: Ma }));
+Rn.displayName = "SpeakerHighIcon";
+const Wn = Y.forwardRef((e, t) => /* @__PURE__ */ Y.createElement(Yt, { ref: t, ...e, weights: Da }));
 Wn.displayName = "SpeakerLowIcon";
 k.span`
   font-family: 'Courier New', Monaco, monospace;
@@ -523,7 +523,7 @@ k.span`
   color: ${(e) => e.theme?.textColor || "#333"};
   user-select: none;
 `;
-var Yt = k.button`
+var Ot = k.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -553,26 +553,26 @@ var Yt = k.button`
     cursor: not-allowed;
   }
 `;
-k(Yt)`
+k(Ot)`
   padding: 0.25rem 0.5rem;
   font-size: ${(e) => e.theme.fontSizeSmall};
 `;
-k(Yt)`
+k(Ot)`
   padding: 0.5rem;
   min-width: 2.25rem;
   min-height: 2.25rem;
 `;
-k(Yt)`
+k(Ot)`
   padding: 0.25rem;
   min-width: 1.75rem;
   min-height: 1.75rem;
   font-size: ${(e) => e.theme.fontSizeSmall};
 `;
-var Bt = k.div`
+var Dt = k.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-`, Dt = k.input`
+`, Bt = k.input`
   cursor: pointer;
   accent-color: ${(e) => e.theme.inputFocusBorder};
 
@@ -668,7 +668,7 @@ var Ta = k.span`
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-`, Ot = k.select`
+`, Kt = k.select`
   padding: 0.5rem 2rem 0.5rem 0.75rem;
   font-family: ${(e) => e.theme.fontFamily};
   font-size: ${(e) => e.theme.fontSize};
@@ -700,7 +700,7 @@ var Ta = k.span`
     background-color: ${(e) => e.theme.inputBackground};
   }
 `;
-k(Ot)`
+k(Kt)`
   padding: 0.25rem 1.75rem 0.25rem 0.5rem;
   font-size: ${(e) => e.theme.fontSizeSmall};
 `;
@@ -780,14 +780,14 @@ var Zn = k.input.attrs({ type: "range" })`
   &:disabled::-moz-range-thumb {
     cursor: not-allowed;
   }
-`, Ra = ({
+`, Ea = ({
   checked: e,
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ re(Bt, { className: r, children: [
+}) => /* @__PURE__ */ re(Dt, { className: r, children: [
   /* @__PURE__ */ x(
-    Dt,
+    Bt,
     {
       type: "checkbox",
       id: "automatic-scroll",
@@ -876,7 +876,7 @@ var Pn = {
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif',
   fontSize: "14px",
   fontSizeSmall: "12px"
-}, Ea = 1e3;
+}, Ra = 1e3;
 function Wa(e, t, n, r) {
   if (!Vn(t))
     return t;
@@ -926,7 +926,7 @@ var _a = k.canvas.attrs((e) => ({
     barGap: g = 0,
     transparentBackground: p = !1,
     drawMode: d = "inverted"
-  } = e, b = R([]), y = B(
+  } = e, b = E([]), y = D(
     (w) => {
       if (w !== null) {
         const C = parseInt(w.dataset.index, 10);
@@ -938,30 +938,30 @@ var _a = k.canvas.attrs((e) => ({
   fa(() => {
     const w = b.current, C = u + g;
     let A = 0;
-    for (let M = 0; M < w.length; M++) {
-      const D = w[M], $ = D.getContext("2d"), S = Math.floor(i / 2), V = 2 ** (n - 1);
-      if ($) {
-        $.resetTransform(), $.clearRect(0, 0, D.width, D.height), $.imageSmoothingEnabled = !1, $.scale(o, o);
-        const T = D.width / o;
+    for (let S = 0; S < w.length; S++) {
+      const B = w[S], M = B.getContext("2d"), $ = Math.floor(i / 2), V = 2 ** (n - 1);
+      if (M) {
+        M.resetTransform(), M.clearRect(0, 0, B.width, B.height), M.imageSmoothingEnabled = !1, M.scale(o, o);
+        const T = B.width / o;
         let P;
-        d === "normal" ? P = c : P = l, $.fillStyle = Wa(
-          $,
+        d === "normal" ? P = c : P = l, M.fillStyle = Wa(
+          M,
           P,
           T,
           i
         );
-        const X = A, U = A + T, z = Math.floor((X - u + C) / C) * C;
+        const G = A, U = A + T, z = Math.floor((G - u + C) / C) * C;
         for (let ee = Math.max(0, z); ee < U; ee += C) {
-          const W = ee - X;
+          const W = ee - G;
           if (W + u <= 0) continue;
           const te = ee;
           if (te * 2 + 1 < t.length) {
-            const q = t[te * 2] / V, le = t[te * 2 + 1] / V, ne = Math.abs(q * S), ae = Math.abs(le * S);
-            d === "normal" ? $.fillRect(W, S - ae, u, ae + ne) : ($.fillRect(W, 0, u, S - ae), $.fillRect(W, S + ne, u, S - ne));
+            const q = t[te * 2] / V, le = t[te * 2 + 1] / V, ne = Math.abs(q * $), ae = Math.abs(le * $);
+            d === "normal" ? M.fillRect(W, $ - ae, u, ae + ne) : (M.fillRect(W, 0, u, $ - ae), M.fillRect(W, $ + ne, u, $ - ne));
           }
         }
       }
-      A += D.width / o;
+      A += B.width / o;
     }
   }, [
     t,
@@ -978,7 +978,7 @@ var _a = k.canvas.attrs((e) => ({
   let f = r, h = 0;
   const I = [];
   for (; f > 0; ) {
-    const w = Math.min(f, Ea), C = /* @__PURE__ */ x(
+    const w = Math.min(f, Ra), C = /* @__PURE__ */ x(
       _a,
       {
         $cssWidth: w,
@@ -1216,7 +1216,7 @@ var mn = ({
   flex: 1;
   position: relative;
   overflow: ${(e) => e.$isOverlay ? "visible" : "hidden"};
-`, Xt = ({
+`, Gt = ({
   children: e,
   className: t,
   clipId: n,
@@ -1238,17 +1238,17 @@ var mn = ({
   showFades: I = !1,
   touchOptimized: v = !1
 }) => {
-  const m = Math.floor(o / l), C = Math.floor((o + i) / l) - m, A = c && !u && !g, M = `clip-${r}-${a}`, { attributes: D, listeners: $, setNodeRef: S, setActivatorNodeRef: V, transform: T, isDragging: P } = gt({
-    id: M,
+  const m = Math.floor(o / l), C = Math.floor((o + i) / l) - m, A = c && !u && !g, S = `clip-${r}-${a}`, { attributes: B, listeners: M, setNodeRef: $, setActivatorNodeRef: V, transform: T, isDragging: P } = gt({
+    id: S,
     data: { clipId: n, trackIndex: r, clipIndex: a },
     disabled: !A
-  }), X = `clip-boundary-left-${r}-${a}`, {
+  }), G = `clip-boundary-left-${r}-${a}`, {
     attributes: U,
     listeners: z,
     setActivatorNodeRef: ee,
     isDragging: W
   } = gt({
-    id: X,
+    id: G,
     data: { clipId: n, trackIndex: r, clipIndex: a, boundary: "left" },
     disabled: !A
   }), te = `clip-boundary-right-${r}-${a}`, {
@@ -1261,14 +1261,14 @@ var mn = ({
     data: { clipId: n, trackIndex: r, clipIndex: a, boundary: "right" },
     disabled: !A
   }), ge = T ? {
-    transform: Ht.Translate.toString(T),
+    transform: Xt.Translate.toString(T),
     zIndex: P ? 100 : void 0
     // Below controls (z-index: 999) but above other clips
   } : void 0;
   return /* @__PURE__ */ re(
     Ya,
     {
-      ref: S,
+      ref: $,
       style: ge,
       className: t,
       $left: m,
@@ -1287,7 +1287,7 @@ var mn = ({
             trackName: s,
             isSelected: p,
             disableDrag: u,
-            dragHandleProps: A ? { attributes: D, listeners: $, setActivatorNodeRef: V } : void 0
+            dragHandleProps: A ? { attributes: B, listeners: M, setActivatorNodeRef: V } : void 0
           }
         ),
         /* @__PURE__ */ re(Oa, { $isOverlay: g, children: [
@@ -1454,7 +1454,7 @@ var Qa = k.div`
   cursor: crosshair;
   /* When selecting, raise z-index above clip boundaries (z-index: 105) to prevent interference */
   z-index: ${(e) => e.$isSelecting ? 110 : 1};
-`, Kt = ({
+`, Ut = ({
   children: e,
   backgroundColor: t,
   timescaleBackgroundColor: n,
@@ -1494,7 +1494,7 @@ var Qa = k.div`
     ]
   }
 ) });
-Dn(Kt);
+Bn(Ut);
 var ro = k.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`,
@@ -1622,27 +1622,27 @@ var fn = k.div.attrs((e) => ({
   minPosition: i = 0,
   maxPosition: l = 1 / 0
 }) => {
-  const [c, u] = _(null), g = R(0), p = R(0), d = R(0), b = Math.max(0, t - e), y = B((h, I) => {
+  const [c, u] = _(null), g = E(0), p = E(0), d = E(0), b = Math.max(0, t - e), y = D((h, I) => {
     h.preventDefault(), h.stopPropagation(), u(I), g.current = h.clientX, p.current = I === "start" ? e : t;
     const v = (w) => {
       const C = w.clientX - g.current, A = p.current + C;
       if (I === "start") {
-        const M = Math.max(i, Math.min(t - 10, A));
-        a?.(M);
+        const S = Math.max(i, Math.min(t - 10, A));
+        a?.(S);
       } else {
-        const M = Math.max(e + 10, Math.min(l, A));
-        s?.(M);
+        const S = Math.max(e + 10, Math.min(l, A));
+        s?.(S);
       }
     }, m = () => {
       u(null), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", m);
     };
     document.addEventListener("mousemove", v), document.addEventListener("mouseup", m);
-  }, [e, t, i, l, a, s]), f = B((h) => {
+  }, [e, t, i, l, a, s]), f = D((h) => {
     h.preventDefault(), h.stopPropagation(), u("region"), g.current = h.clientX, p.current = e, d.current = t;
     const I = t - e, v = (w) => {
       const C = w.clientX - g.current;
-      let A = p.current + C, M = d.current + C;
-      A < i && (A = i, M = i + I), M > l && (M = l, A = l - I), o?.(A, M);
+      let A = p.current + C, S = d.current + C;
+      A < i && (A = i, S = i + I), S > l && (S = l, A = l - I), o?.(A, S);
     }, m = () => {
       u(null), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", m);
     };
@@ -1704,7 +1704,7 @@ var fn = k.div.attrs((e) => ({
   maxPosition: o = 1 / 0,
   controlsOffset: i = 0
 }) => {
-  const [l, c] = _(!1), u = R(0), g = R(null), p = t > e, d = B((b) => {
+  const [l, c] = _(!1), u = E(0), g = E(null), p = t > e, d = D((b) => {
     const y = b.target;
     if (y.closest("[data-loop-marker-handle]") || y.closest("[data-loop-region-timescale]"))
       return;
@@ -1714,8 +1714,8 @@ var fn = k.div.attrs((e) => ({
     const h = b.clientX - f.left, I = Math.max(s, Math.min(o, h));
     u.current = I, a?.(I, I);
     const v = (w) => {
-      const C = w.clientX - f.left, A = Math.max(s, Math.min(o, C)), M = Math.min(u.current, A), D = Math.max(u.current, A);
-      a?.(M, D);
+      const C = w.clientX - f.left, A = Math.max(s, Math.min(o, C)), S = Math.min(u.current, A), B = Math.max(u.current, A);
+      a?.(S, B);
     }, m = () => {
       c(!1), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", m);
     };
@@ -1881,7 +1881,7 @@ var Ln = ke(St()), Yn = ({ children: e }) => {
     },
     { once: !0 }
   ), /* @__PURE__ */ x(Ln.Provider, { value: Math.ceil(t), children: e });
-}, On = () => De(Ln), Rt = ke({
+}, On = () => Be(Ln), Et = ke({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -1894,7 +1894,7 @@ var Ln = ke(St()), Yn = ({ children: e }) => {
   duration: 3e4,
   barWidth: 1,
   barGap: 0
-}), bt = () => De(Rt), vt = () => De(ha), Ut = ke(/* @__PURE__ */ x(ma, {})), co = () => De(Ut), uo = 0, mo = !1, fo = 0, ho = 0, po = {
+}), bt = () => Be(Et), vt = () => Be(ha), jt = ke(/* @__PURE__ */ x(ma, {})), co = () => Be(jt), uo = 0, mo = !1, fo = 0, ho = 0, po = {
   progress: uo,
   isPlaying: mo,
   selectionStart: fo,
@@ -1973,12 +1973,12 @@ var vo = k.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 = E(null), {
     sampleRate: u,
     samplesPerPixel: g,
     timeScaleHeight: p,
     controls: { show: d, width: b }
-  } = De(Rt), y = On();
+  } = Be(Et), y = On();
   Q(() => {
     if (c.current !== null) {
       const v = c.current, m = v.getContext("2d");
@@ -2031,7 +2031,7 @@ var vo = k.div.attrs((e) => ({
       ]
     }
   );
-}, Un = Dn(Co), xo = k.div`
+}, Un = Bn(Co), xo = k.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -2048,7 +2048,7 @@ var vo = k.div.attrs((e) => ({
   disabled: n = !1,
   className: r
 }) => /* @__PURE__ */ x(xo, { className: r, children: /* @__PURE__ */ x(
-  Ot,
+  Kt,
   {
     className: "time-format",
     value: e,
@@ -2215,7 +2215,7 @@ var vo = k.div.attrs((e) => ({
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-`, Bo = k.div`
+`, Do = k.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -2228,7 +2228,7 @@ var vo = k.div.attrs((e) => ({
   text-align: center;
   border: 1px solid ${(e) => e.theme.borderColor};
   border-radius: ${(e) => e.theme.borderRadius};
-`, Do = k.header`
+`, Bo = k.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -2239,7 +2239,7 @@ var vo = k.div.attrs((e) => ({
   font-size: ${(e) => e.theme.fontSizeSmall};
   color: ${(e) => e.theme.textColor};
   background-color: transparent;
-`, To = (e) => /* @__PURE__ */ x(Wn, { weight: "light", ...e }), Ro = (e) => /* @__PURE__ */ x(En, { weight: "light", ...e }), gn = k(Zn)`
+`, To = (e) => /* @__PURE__ */ x(Wn, { weight: "light", ...e }), Eo = (e) => /* @__PURE__ */ x(Rn, { weight: "light", ...e }), gn = k(Zn)`
   width: 75%;
   height: 5px;
   background: ${(e) => e.theme.sliderTrackColor};
@@ -2338,7 +2338,7 @@ k.button`
     transform: scale(0.9);
   }
 `;
-function Eo(e) {
+function Ro(e) {
   let t = 1 / 0, n = -1 / 0;
   for (let r = 0; r < e.length; r++) {
     const a = e[r];
@@ -2361,7 +2361,7 @@ function Jn(e, t) {
 function wn(e, t, n) {
   const r = e.length, a = Math.ceil(r / t), s = Jn(n, a * 2);
   for (let o = 0; o < a; o++) {
-    const i = o * t, l = Math.min((o + 1) * t, r), c = e.subarray(i, l), u = Eo(c), g = vn(u.min, n), p = vn(u.max, n);
+    const i = o * t, l = Math.min((o + 1) * t, r), c = e.subarray(i, l), u = Ro(c), g = vn(u.min, n), p = vn(u.max, n);
     s[o * 2] = g, s[o * 2 + 1] = p;
   }
   return s;
@@ -2435,8 +2435,8 @@ function Ho(e, t) {
   return r > 0 && n++, n;
 }
 function Xo(e) {
-  for (var t = e.scale, n = e.amplitude_scale, r = e.split_channels, a = e.length, s = e.sample_rate, o = e.channels.map(function(S) {
-    return new Float32Array(S);
+  for (var t = e.scale, n = e.amplitude_scale, r = e.split_channels, a = e.length, s = e.sample_rate, o = e.channels.map(function($) {
+    return new Float32Array($);
   }), i = r ? o.length : 1, l = 24, c = Ho(a, t), u = e.bits === 8 ? 1 : 2, g = l + c * 2 * u * i, p = new ArrayBuffer(g), d = new DataView(p), b = 0, y = l, f = new Array(i), h = new Array(i), I = 0; I < i; I++)
     f[I] = 1 / 0, h[I] = -1 / 0;
   var v = e.bits === 8 ? Vo : zo, m = e.bits === 8 ? Zo : Po;
@@ -2448,17 +2448,17 @@ function Xo(e) {
         C += o[A][w];
       C = Math.floor(m * C * n / o.length), C < f[0] && (f[0] = C, f[0] < v && (f[0] = v)), C > h[0] && (h[0] = C, h[0] > m && (h[0] = m));
     } else
-      for (var M = 0; M < i; ++M)
-        C = Math.floor(m * o[M][w] * n), C < f[M] && (f[M] = C, f[M] < v && (f[M] = v)), C > h[M] && (h[M] = C, h[M] > m && (h[M] = m));
+      for (var S = 0; S < i; ++S)
+        C = Math.floor(m * o[S][w] * n), C < f[S] && (f[S] = C, f[S] < v && (f[S] = v)), C > h[S] && (h[S] = C, h[S] > m && (h[S] = m));
     if (++b === t) {
-      for (var D = 0; D < i; D++)
-        e.bits === 8 ? (d.setInt8(y++, f[D]), d.setInt8(y++, h[D])) : (d.setInt16(y, f[D], !0), d.setInt16(y + 2, h[D], !0), y += 4), f[D] = 1 / 0, h[D] = -1 / 0;
+      for (var B = 0; B < i; B++)
+        e.bits === 8 ? (d.setInt8(y++, f[B]), d.setInt8(y++, h[B])) : (d.setInt16(y, f[B], !0), d.setInt16(y + 2, h[B], !0), y += 4), f[B] = 1 / 0, h[B] = -1 / 0;
       b = 0;
     }
   }
   if (b > 0)
-    for (var $ = 0; $ < i; $++)
-      e.bits === 8 ? (d.setInt8(y++, f[$]), d.setInt8(y++, h[$])) : (d.setInt16(y, f[$], !0), d.setInt16(y + 2, h[$], !0));
+    for (var M = 0; M < i; M++)
+      e.bits === 8 ? (d.setInt8(y++, f[M]), d.setInt8(y++, h[M])) : (d.setInt16(y, f[M], !0), d.setInt16(y + 2, h[M], !0));
   return p;
 }
 function $t(e) {
@@ -2597,7 +2597,7 @@ Ze.createFromAudio = function(e, t) {
     "WaveformData.createFromAudio(): Pass either an AudioContext and ArrayBuffer, or an AudioBuffer object"
   );
 };
-function Et(e) {
+function Rt(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;
@@ -2607,10 +2607,10 @@ function Et(e) {
     this._input_buffer_size > 0 ? (this._min[i] = this._inputData.channel(i).min_sample(this._input_index), this._max[i] = this._inputData.channel(i).max_sample(this._input_index)) : (this._min[i] = 0, this._max[i] = 0);
   this._min_value = this._inputData.bits === 8 ? -128 : -32768, this._max_value = this._inputData.bits === 8 ? 127 : 32767, this._where = 0, this._prev_where = 0, this._stop = 0, this._last_input_index = 0;
 }
-Et.prototype.sample_at_pixel = function(e) {
+Rt.prototype.sample_at_pixel = function(e) {
   return Math.floor(e * this._output_samples_per_pixel);
 };
-Et.prototype.next = function() {
+Rt.prototype.next = function() {
   for (var e = 0, t = 1e3, n = this._inputData.channels, r; this._input_index < this._input_buffer_size && e < t; ) {
     for (; Math.floor(this.sample_at_pixel(this._output_index) / this._scale) === this._input_index; ) {
       if (this._output_index > 0)
@@ -2637,7 +2637,7 @@ Et.prototype.next = function() {
       r = this._outputWaveformData.channel(l), r.set_min_sample(this._output_index - 1, this._min[l]), r.set_max_sample(this._output_index - 1, this._max[l]);
   return !0;
 };
-Et.prototype.getOutputData = function() {
+Rt.prototype.getOutputData = function() {
   return this._output_data;
 };
 Ze.prototype = {
@@ -2655,7 +2655,7 @@ Ze.prototype = {
   },
   resample: function(t) {
     t = this._getResampleOptions(t), t.waveformData = this;
-    for (var n = new Et(t); !n.next(); )
+    for (var n = new Rt(t); !n.next(); )
       ;
     return new Ze(n.getOutputData());
   },
@@ -3311,7 +3311,7 @@ var is = k.div`
   onAnnotationUpdate: u,
   renderAnnotationItem: g
 }) => {
-  const p = R(null), d = R(null), b = R(void 0);
+  const p = E(null), d = E(null), b = E(void 0);
   Q(() => {
   }), Q(() => {
     const m = d.current;
@@ -3383,7 +3383,10 @@ var is = k.div`
                   $isEditable: s,
                   contentEditable: s,
                   suppressContentEditableWarning: !0,
-                  onBlur: (M) => h(w, M.currentTarget.textContent || ""),
+                  onBlur: (S) => h(w, S.currentTarget.textContent || ""),
+                  onKeyDown: (S) => {
+                    S.key === "Enter" && (S.preventDefault(), S.currentTarget.blur());
+                  },
                   children: m.id
                 }
               ),
@@ -3393,14 +3396,14 @@ var is = k.div`
                 y(m.end)
               ] })
             ] }),
-            o.length > 0 && /* @__PURE__ */ x(fs, { onClick: (M) => M.stopPropagation(), children: o.map((M, D) => /* @__PURE__ */ x(
+            o.length > 0 && /* @__PURE__ */ x(fs, { onClick: (S) => S.stopPropagation(), children: o.map((S, B) => /* @__PURE__ */ x(
               hs,
               {
-                title: M.title,
-                onClick: () => I(M, m, w),
-                children: M.text ? M.text : /* @__PURE__ */ x("i", { className: v(M.class || "") })
+                title: S.title,
+                onClick: () => I(S, m, w),
+                children: S.text ? S.text : /* @__PURE__ */ x("i", { className: v(S.class || "") })
               },
-              D
+              B
             )) })
           ] }),
           /* @__PURE__ */ x(
@@ -3409,7 +3412,10 @@ var is = k.div`
               $isEditable: s,
               contentEditable: s,
               suppressContentEditableWarning: !0,
-              onBlur: (M) => f(w, M.currentTarget.textContent || ""),
+              onBlur: (S) => f(w, S.currentTarget.textContent || ""),
+              onKeyDown: (S) => {
+                S.key === "Enter" && (S.preventDefault(), S.currentTarget.blur());
+              },
               children: m.lines.join(`
 `)
             }
@@ -3424,9 +3430,9 @@ var is = k.div`
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ re(Bt, { className: r, children: [
+}) => /* @__PURE__ */ re(Dt, { className: r, children: [
   /* @__PURE__ */ x(
-    Dt,
+    Bt,
     {
       type: "checkbox",
       id: "continuous-play",
@@ -3444,9 +3450,9 @@ var is = k.div`
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ re(Bt, { className: r, children: [
+}) => /* @__PURE__ */ re(Dt, { className: r, children: [
   /* @__PURE__ */ x(
-    Dt,
+    Bt,
     {
       type: "checkbox",
       id: "link-endpoints",
@@ -3463,9 +3469,9 @@ var is = k.div`
   checked: e,
   onChange: t,
   className: n
-}) => /* @__PURE__ */ re(Bt, { className: n, children: [
+}) => /* @__PURE__ */ re(Dt, { className: n, children: [
   /* @__PURE__ */ x(
-    Dt,
+    Bt,
     {
       type: "checkbox",
       id: "editable-annotations",
@@ -3538,9 +3544,9 @@ function As({
   const [n, 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 = B(() => {
+  }), a = t[n], s = n > 0, o = n < t.length - 1, i = D(() => {
     r((c) => Math.max(0, c - 1));
-  }, []), l = B(() => {
+  }, []), l = D(() => {
     r((c) => Math.min(t.length - 1, c + 1));
   }, [t.length]);
   return {
@@ -3556,7 +3562,7 @@ function ks({
   initialVolume: t = 1,
   onVolumeChange: n
 }) {
-  const [r, a] = _(t), s = B((o) => {
+  const [r, a] = _(t), s = D((o) => {
     a(o), e.current && e.current.setMasterGain(o), n?.(o);
   }, [e, n]);
   return {
@@ -3565,15 +3571,15 @@ function ks({
   };
 }
 const Si = (e = 256) => {
-  const t = R(null), n = B((r, a, s) => {
-    const o = new Bn("fft", e);
+  const t = E(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;
     };
   }, [e]);
   return { analyserRef: t, masterEffects: n };
 };
-function Gt(e) {
+function Nt(e) {
   const {
     audioBuffer: t,
     startSample: n,
@@ -3630,7 +3636,7 @@ function Ss(e) {
     `Sample rate mismatch: audioBuffer (${t.sampleRate}) vs waveformData (${c.sample_rate}). Using audioBuffer sample rate. Waveform visualization may be slightly off.`
   );
   const p = e.duration ?? g;
-  return Gt({
+  return Nt({
     audioBuffer: t,
     startSample: Math.round(n * u),
     durationSamples: Math.round(p * u),
@@ -3715,16 +3721,16 @@ function $i(e, t = {}) {
         o(!0), l(null), u(0);
         const f = zr.getContext().rawContext, h = e.map(async (v, m) => {
           if (v.audioBuffer) {
-            const D = b(v, m, v.audioBuffer);
-            return n && !p && (d.set(m, D), u(($) => $ + 1), a(
-              Array.from({ length: e.length }, ($, S) => d.get(S)).filter(($) => $ !== void 0)
-            )), D;
+            const B = b(v, m, v.audioBuffer);
+            return n && !p && (d.set(m, B), u((M) => M + 1), a(
+              Array.from({ length: e.length }, (M, $) => d.get($)).filter((M) => M !== void 0)
+            )), B;
           }
           if (!v.src && v.waveformData) {
-            const D = b(v, m);
-            return n && !p && (d.set(m, D), u(($) => $ + 1), a(
-              Array.from({ length: e.length }, ($, S) => d.get(S)).filter(($) => $ !== void 0)
-            )), D;
+            const B = b(v, m);
+            return n && !p && (d.set(m, B), u((M) => M + 1), a(
+              Array.from({ length: e.length }, (M, $) => d.get($)).filter((M) => M !== void 0)
+            )), B;
           }
           if (!v.src)
             throw new Error(`Track ${m + 1}: Must provide src, audioBuffer, or waveformData`);
@@ -3734,10 +3740,10 @@ function $i(e, t = {}) {
           const C = await w.arrayBuffer(), A = await f.decodeAudioData(C);
           if (!A || !A.sampleRate || !A.duration)
             throw new Error(`Invalid audio buffer for ${v.src}`);
-          const M = b(v, m, A);
-          return n && !p && (d.set(m, M), u((D) => D + 1), a(
-            Array.from({ length: e.length }, (D, $) => d.get($)).filter((D) => D !== void 0)
-          )), M;
+          const S = b(v, m, A);
+          return n && !p && (d.set(m, S), u((B) => B + 1), a(
+            Array.from({ length: e.length }, (B, M) => d.get(M)).filter((B) => B !== void 0)
+          )), S;
         }), I = await Promise.all(h);
         p || (n || (a(I), u(I.length)), o(!1));
       } catch (f) {
@@ -3770,22 +3776,22 @@ function Mi({
       if (!f) return { ...u, scaleX: 1, scaleY: 1 };
       const h = f.startSample / r, I = f.durationSamples / r, v = u.x * n / r;
       let m = h + v;
-      const w = [...y.clips].sort((S, V) => S.startSample - V.startSample), C = w.findIndex((S) => S === f);
+      const w = [...y.clips].sort(($, V) => $.startSample - V.startSample), C = w.findIndex(($) => $ === f);
       m = Math.max(0, m);
       const A = C > 0 ? w[C - 1] : null;
       if (A) {
-        const S = (A.startSample + A.durationSamples) / r;
-        m = Math.max(m, S);
+        const $ = (A.startSample + A.durationSamples) / r;
+        m = Math.max(m, $);
       }
-      const M = C < w.length - 1 ? w[C + 1] : null;
-      if (M) {
-        const S = m + I, V = M.startSample / r;
-        S > V && (m = V - I);
+      const S = C < w.length - 1 ? w[C + 1] : null;
+      if (S) {
+        const $ = m + I, V = S.startSample / r;
+        $ > V && (m = V - I);
       }
-      const $ = (m - h) * r / n;
+      const M = (m - h) * r / n;
       return {
         ...u,
-        x: $,
+        x: M,
         scaleX: 1,
         scaleY: 1
       };
@@ -3812,34 +3818,34 @@ function Mi({
       if (!p || !a.current) return;
       const { trackIndex: d, clipIndex: b } = u.data.current, y = g.x * n, f = Math.floor(0.1 * r), h = a.current, I = e.map((v, m) => {
         if (m !== d) return v;
-        const w = [...v.clips].sort((M, D) => M.startSample - D.startSample), C = w.findIndex((M) => M === v.clips[b]), A = v.clips.map((M, D) => {
-          if (D !== b) return M;
-          const $ = M.sourceDurationSamples;
+        const w = [...v.clips].sort((S, B) => S.startSample - B.startSample), C = w.findIndex((S) => S === v.clips[b]), A = v.clips.map((S, B) => {
+          if (B !== b) return S;
+          const M = S.sourceDurationSamples;
           if (p === "left") {
-            let S = Math.floor(y);
+            let $ = Math.floor(y);
             const V = -h.startSample;
-            S < V && (S = V);
+            $ < V && ($ = V);
             const T = -h.offsetSamples;
-            S < T && (S = T);
+            $ < T && ($ = T);
             const P = C > 0 ? w[C - 1] : null;
             if (P) {
               const te = P.startSample + P.durationSamples - h.startSample;
-              S < te && (S = te);
+              $ < te && ($ = te);
             }
-            const X = h.durationSamples - f;
-            S > X && (S = X);
-            const U = h.offsetSamples + S, z = h.durationSamples - S, ee = h.startSample + S;
+            const G = h.durationSamples - f;
+            $ > G && ($ = G);
+            const U = h.offsetSamples + $, z = h.durationSamples - $, ee = h.startSample + $;
             return {
-              ...M,
+              ...S,
               offsetSamples: U,
               durationSamples: z,
               startSample: ee
             };
           } else {
-            let S = Math.floor(h.durationSamples + y);
-            S = Math.max(f, S), h.offsetSamples + S > $ && (S = $ - h.offsetSamples);
+            let $ = Math.floor(h.durationSamples + y);
+            $ = Math.max(f, $), h.offsetSamples + $ > M && ($ = M - h.offsetSamples);
             const V = C < w.length - 1 ? w[C + 1] : null;
-            return V && h.startSample + S > V.startSample && (S = V.startSample - h.startSample, S = Math.max(f, S)), { ...M, durationSamples: S };
+            return V && h.startSample + $ > V.startSample && ($ = V.startSample - h.startSample, $ = Math.max(f, $)), { ...S, durationSamples: $ };
           }
         });
         return { ...v, clips: A };
@@ -3858,17 +3864,17 @@ function Mi({
         if (I !== p) return h;
         const v = [...h.clips].sort((C, A) => C.startSample - A.startSample), m = v.findIndex((C) => C === h.clips[d]), w = h.clips.map((C, A) => {
           if (A !== d) return C;
-          let M = Math.floor(C.startSample + y);
-          M = Math.max(0, M);
-          const D = m > 0 ? v[m - 1] : null;
-          if (D) {
-            const S = D.startSample + D.durationSamples;
-            M = Math.max(M, S);
+          let S = Math.floor(C.startSample + y);
+          S = Math.max(0, S);
+          const B = m > 0 ? v[m - 1] : null;
+          if (B) {
+            const $ = B.startSample + B.durationSamples;
+            S = Math.max(S, $);
           }
-          const $ = m < v.length - 1 ? v[m + 1] : null;
-          return $ && M + C.durationSamples > $.startSample && (M = $.startSample - C.durationSamples), {
+          const M = m < v.length - 1 ? v[m + 1] : null;
+          return M && S + C.durationSamples > M.startSample && (S = M.startSample - C.durationSamples), {
             ...C,
-            startSample: M
+            startSample: S
           };
         });
         return {
@@ -3887,7 +3893,7 @@ function Mi({
     collisionModifier: s
   };
 }
-const Pt = 0.01;
+const zt = 0.01;
 function Ms({
   annotations: e,
   onAnnotationsChange: t,
@@ -3918,7 +3924,7 @@ function Ms({
         return;
       const d = g.data.current;
       if (!d) return;
-      const { edge: b, annotationIndex: y } = d, f = o.current, h = p.x * n / r, I = b === "start" ? f.start + h : f.end + h, v = Bs({
+      const { edge: b, annotationIndex: y } = d, f = o.current, h = p.x * n / r, I = b === "start" ? f.start + h : f.end + h, v = Ds({
         annotationIndex: y,
         newTime: I,
         isDraggingStart: b === "start",
@@ -3938,7 +3944,7 @@ function Ms({
     onDragEnd: c
   };
 }
-function Bs({
+function Ds({
   annotationIndex: e,
   newTime: t,
   isDraggingStart: n,
@@ -3954,7 +3960,7 @@ function Bs({
       start: l
     }, s && e > 0) {
       const u = o[e - 1];
-      Math.abs(u.end - i.start) < Pt ? o[e - 1] = {
+      Math.abs(u.end - i.start) < zt ? o[e - 1] = {
         ...u,
         end: Math.max(u.start + 0.1, u.end + c)
       } : l <= u.end && (o[e] = {
@@ -3972,7 +3978,7 @@ function Bs({
       end: l
     }, s && e < o.length - 1) {
       const u = o[e + 1];
-      if (Math.abs(u.start - i.end) < Pt) {
+      if (Math.abs(u.start - i.end) < zt) {
         const g = u.start + c;
         o[e + 1] = {
           ...u,
@@ -3981,7 +3987,7 @@ function Bs({
         let p = e + 1;
         for (; p < o.length - 1; ) {
           const d = o[p], b = o[p + 1];
-          if (Math.abs(b.start - d.end) < Pt) {
+          if (Math.abs(b.start - d.end) < zt) {
             const y = d.end - r[p].end;
             o[p + 1] = {
               ...b,
@@ -4015,17 +4021,17 @@ function Bs({
   }
   return o;
 }
-function Bi(e = {}) {
+function Di(e = {}) {
   const {
     touchOptimized: t = !1,
     touchDelay: n = 250,
     touchTolerance: r = 5,
     mouseDistance: a = 1
-  } = e, s = Zt(ga, {
+  } = e, s = Vt(ga, {
     activationConstraint: {
       distance: a
     }
-  }), o = Zt(ba, {
+  }), o = Vt(ba, {
     activationConstraint: t ? {
       // Delay-based activation for mobile - wait before starting drag
       // This allows users to scroll without accidentally triggering drag
@@ -4035,7 +4041,7 @@ function Bi(e = {}) {
       // Distance-based activation for non-optimized mode
       distance: a
     }
-  }), i = Zt(va, {
+  }), i = Vt(va, {
     activationConstraint: {
       distance: a
     }
@@ -4044,8 +4050,8 @@ function Bi(e = {}) {
     ...t ? [s, o] : [i]
   );
 }
-const Di = (e) => {
-  const { tracks: t, onTracksChange: n, sampleRate: r } = e, { currentTimeRef: a } = _e(), { selectedTrackId: s } = Fe(), o = B(
+const Bi = (e) => {
+  const { tracks: t, onTracksChange: n, sampleRate: r } = e, { currentTimeRef: a } = _e(), { selectedTrackId: s } = Fe(), o = D(
     (l, c, u) => {
       const { sampleRate: g, samplesPerPixel: p } = e, d = t[l];
       if (!d) return !1;
@@ -4054,7 +4060,7 @@ const Di = (e) => {
       const y = b.startSample / g, f = (b.startSample + b.durationSamples) / g;
       if (u <= y || u >= f)
         return console.warn("Split time is outside clip bounds"), !1;
-      const h = Math.round(u * g), I = Math.floor(h / p), v = b.startSample + b.durationSamples, m = I * p, w = b.startSample, C = m - w, A = m, M = v - A, D = m - b.startSample, $ = Gt({
+      const h = Math.round(u * g), I = Math.floor(h / p), v = b.startSample + b.durationSamples, m = I * p, w = b.startSample, C = m - w, A = m, S = v - A, B = m - b.startSample, M = Nt({
         audioBuffer: b.audioBuffer,
         startSample: w,
         durationSamples: C,
@@ -4068,11 +4074,11 @@ const Di = (e) => {
         waveformData: b.waveformData
         // Share waveformData - slicing happens at render time
         // Note: fadeOut removed for first clip since it's cut
-      }), S = Gt({
+      }), $ = Nt({
         audioBuffer: b.audioBuffer,
         startSample: A,
-        durationSamples: M,
-        offsetSamples: b.offsetSamples + D,
+        durationSamples: S,
+        offsetSamples: b.offsetSamples + B,
         sampleRate: b.sampleRate,
         sourceDurationSamples: b.sourceDurationSamples,
         gain: b.gain,
@@ -4083,7 +4089,7 @@ const Di = (e) => {
         // Note: fadeIn removed for second clip since it's cut
         fadeOut: b.fadeOut
       }), V = [...d.clips];
-      V.splice(c, 1, $, S);
+      V.splice(c, 1, M, $);
       const T = [...t];
       return T[l] = {
         ...d,
@@ -4093,7 +4099,7 @@ const Di = (e) => {
     [t, n, e]
   );
   return {
-    splitClipAtPlayhead: B(() => {
+    splitClipAtPlayhead: D(() => {
       if (!s)
         return console.log("No track selected - click a clip to select a track first"), !1;
       const l = t.findIndex((g) => g.id === s);
@@ -4109,8 +4115,8 @@ const Di = (e) => {
     }, [t, a, s, o, r]),
     splitClipAt: o
   };
-}, Nt = (e) => {
-  const { shortcuts: t, enabled: n = !0 } = e, r = B(
+}, Lt = (e) => {
+  const { shortcuts: t, enabled: n = !0 } = e, r = D(
     (a) => {
       if (!n) return;
       const s = a.target;
@@ -4133,12 +4139,12 @@ const Di = (e) => {
 }, Ti = (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("+");
-}, Ri = (e = {}) => {
-  const { enabled: t = !0, additionalShortcuts: n = [], shortcuts: r } = e, { isPlaying: a } = _e(), { setCurrentTime: s, play: o, pause: i, stop: l } = pe(), { playoutRef: c } = Se(), u = B(() => {
+}, Ei = (e = {}) => {
+  const { enabled: t = !0, additionalShortcuts: n = [], shortcuts: r } = e, { isPlaying: a } = _e(), { setCurrentTime: s, play: o, pause: i, stop: l } = pe(), { playoutRef: c } = Se(), u = D(() => {
     a ? i() : o();
-  }, [a, o, i]), g = B(() => {
+  }, [a, o, i]), g = D(() => {
     l();
-  }, [l]), p = B(() => {
+  }, [l]), p = D(() => {
     a && c.current ? (c.current.stop(), s(0), o(0)) : s(0);
   }, [a, c, s, o]), b = r ?? [...[
     {
@@ -4160,7 +4166,7 @@ const Di = (e) => {
       preventDefault: !0
     }
   ], ...n];
-  return Nt({
+  return Lt({
     shortcuts: b,
     enabled: t
   }), {
@@ -4169,8 +4175,8 @@ const Di = (e) => {
     stopPlayback: g,
     shortcuts: b
   };
-}, zt = 0.01, It = 0.01;
-function Ei({
+}, Ht = 0.01, It = 0.01;
+function Ri({
   annotations: e,
   activeAnnotationId: t,
   onAnnotationsChange: n,
@@ -4185,15 +4191,15 @@ function Ei({
   controlsWidth: g = 0,
   onPlay: p
 }) {
-  const d = Ne(() => t ? e.findIndex((D) => D.id === t) : -1, [e, t]), b = B(
-    (D) => {
+  const d = Ne(() => t ? e.findIndex((B) => B.id === t) : -1, [e, t]), b = D(
+    (B) => {
       if (!l?.current || !c || !u) return;
-      const $ = e.find((W) => W.id === D);
-      if (!$) return;
-      const S = l.current, V = S.clientWidth, T = $.start * u / c + g, P = $.end * u / c + g, X = (T + P) / 2, U = S.scrollLeft, z = U, ee = U + V;
+      const M = e.find((W) => W.id === B);
+      if (!M) return;
+      const $ = l.current, V = $.clientWidth, T = M.start * u / c + g, P = M.end * u / c + g, G = (T + P) / 2, U = $.scrollLeft, z = U, ee = U + V;
       if (T < z || P > ee) {
-        const W = Math.max(0, X - V / 2);
-        S.scrollTo({
+        const W = Math.max(0, G - V / 2);
+        $.scrollTo({
           left: W,
           behavior: "smooth"
         });
@@ -4204,48 +4210,48 @@ function Ei({
   Q(() => {
     t && l?.current && c && u && b(t);
   }, [t, b, l, c, u]);
-  const y = B(
-    (D) => {
+  const y = D(
+    (B) => {
       if (d < 0) return;
-      const $ = e[d], S = Math.max(0, Math.min($.end - 0.1, $.start + D)), V = S - $.start, T = [...e];
+      const M = e[d], $ = Math.max(0, Math.min(M.end - 0.1, M.start + B)), V = $ - M.start, T = [...e];
       if (T[d] = {
-        ...$,
-        start: S
+        ...M,
+        start: $
       }, s && d > 0) {
         const P = T[d - 1];
-        Math.abs(P.end - $.start) < zt && (T[d - 1] = {
+        Math.abs(P.end - M.start) < Ht && (T[d - 1] = {
           ...P,
           end: Math.max(P.start + 0.1, P.end + V)
         });
       } else if (!s && d > 0) {
         const P = T[d - 1];
-        S < P.end && (T[d - 1] = {
+        $ < P.end && (T[d - 1] = {
           ...P,
-          end: S
+          end: $
         });
       }
       n(T);
     },
     [e, d, s, n]
-  ), f = B(
-    (D) => {
+  ), f = D(
+    (B) => {
       if (d < 0) return;
-      const $ = e[d], S = Math.max($.start + 0.1, Math.min(a, $.end + D)), V = S - $.end, T = [...e];
+      const M = e[d], $ = Math.max(M.start + 0.1, Math.min(a, M.end + B)), V = $ - M.end, T = [...e];
       if (T[d] = {
-        ...$,
-        end: S
+        ...M,
+        end: $
       }, s && d < e.length - 1) {
         const P = T[d + 1];
-        if (Math.abs(P.start - $.end) < zt) {
-          const X = Math.min(P.end - 0.1, P.start + V);
+        if (Math.abs(P.start - M.end) < Ht) {
+          const G = Math.min(P.end - 0.1, P.start + V);
           T[d + 1] = {
             ...P,
-            start: X
+            start: G
           };
           let U = d + 1;
           for (; U < T.length - 1; ) {
             const z = T[U], ee = T[U + 1];
-            if (Math.abs(ee.start - e[U].end) < zt) {
+            if (Math.abs(ee.start - e[U].end) < Ht) {
               const W = z.end - e[U].end;
               T[U + 1] = {
                 ...ee,
@@ -4257,19 +4263,19 @@ function Ei({
         }
       } else if (!s && d < e.length - 1) {
         const P = T[d + 1];
-        if (S > P.start) {
+        if ($ > P.start) {
           T[d + 1] = {
             ...P,
-            start: S
+            start: $
           };
-          let X = d + 1;
-          for (; X < T.length - 1; ) {
-            const U = T[X], z = T[X + 1];
+          let G = d + 1;
+          for (; G < T.length - 1; ) {
+            const U = T[G], z = T[G + 1];
             if (U.end > z.start)
-              T[X + 1] = {
+              T[G + 1] = {
                 ...z,
                 start: U.end
-              }, X++;
+              }, G++;
             else
               break;
           }
@@ -4278,20 +4284,20 @@ function Ei({
       n(T);
     },
     [e, d, a, s, n]
-  ), h = B(() => {
+  ), h = D(() => {
     !r || e.length === 0 || (d <= 0 ? r(e[e.length - 1].id) : r(e[d - 1].id));
-  }, [e, d, r]), I = B(() => {
+  }, [e, d, r]), I = D(() => {
     !r || e.length === 0 || (d < 0 || d >= e.length - 1 ? r(e[0].id) : r(e[d + 1].id));
-  }, [e, d, r]), v = B(() => {
+  }, [e, d, r]), v = D(() => {
     !r || e.length === 0 || r(e[0].id);
-  }, [e, r]), m = B(() => {
+  }, [e, r]), m = D(() => {
     !r || e.length === 0 || r(e[e.length - 1].id);
-  }, [e, r]), w = B(() => {
+  }, [e, r]), w = D(() => {
     r && r(null);
-  }, [r]), C = B(() => {
+  }, [r]), C = D(() => {
     if (d < 0 || !p) return;
-    const D = e[d], $ = o ? void 0 : D.end - D.start;
-    p(D.start, $);
+    const B = e[d], M = o ? void 0 : B.end - B.start;
+    p(B.start, M);
   }, [e, d, o, p]), A = Ne(
     () => [
       {
@@ -4328,7 +4334,7 @@ function Ei({
       }
     ],
     [y, f, C]
-  ), M = Ne(
+  ), S = Ne(
     () => [
       {
         key: "ArrowUp",
@@ -4375,11 +4381,11 @@ function Ei({
     ],
     [h, I, v, m, w]
   );
-  return Nt({
+  return Lt({
     shortcuts: A,
     enabled: i && d >= 0
-  }), Nt({
-    shortcuts: M,
+  }), Lt({
+    shortcuts: S,
     enabled: i && e.length > 0 && !!r
   }), {
     moveStartBoundary: y,
@@ -4393,7 +4399,7 @@ function Ei({
     playActiveAnnotation: C
   };
 }
-function Ds(e) {
+function Bs(e) {
   const t = e.reduce((a, s) => a + s.length, 0), n = new Float32Array(t);
   let r = 0;
   for (const a of e)
@@ -4421,7 +4427,7 @@ function Cn(e, t, n = 16) {
   }
   return a;
 }
-function Rs(e, t, n, r, a = 16) {
+function Es(e, t, n, r, a = 16) {
   const s = 2 ** (a - 1), o = r % n;
   let i = 0;
   if (o > 0 && e.length > 0) {
@@ -4439,11 +4445,11 @@ function Rs(e, t, n, r, a = 16) {
   const l = Cn(t.slice(i), n, a), c = new (a === 8 ? Int8Array : Int16Array)(e.length + l.length);
   return c.set(e), c.set(l, e.length), c;
 }
-function Es(e, t = {}) {
+function Rs(e, t = {}) {
   const {
     channelCount: n = 1,
     samplesPerPixel: r = 1024
-  } = t, [a, s] = _(!1), [o, i] = _(!1), [l, c] = _(0), [u, g] = _(new Int16Array(0)), [p, d] = _(null), [b, y] = _(null), [f, h] = _(0), [I, v] = _(0), m = 16, w = R(!1), C = R(null), A = R(null), M = R([]), D = R(0), $ = R(null), S = R(0), V = R(!1), T = R(!1), P = B(async () => {
+  } = t, [a, s] = _(!1), [o, i] = _(!1), [l, c] = _(0), [u, g] = _(new Int16Array(0)), [p, d] = _(null), [b, y] = _(null), [f, h] = _(0), [I, v] = _(0), m = 16, w = E(!1), C = E(null), A = E(null), S = E([]), B = E(0), M = E(null), $ = E(0), V = E(!1), T = E(!1), P = D(async () => {
     if (!w.current)
       try {
         const W = Ae(), te = new URL("data:text/javascript;base64,InVzZSBzdHJpY3QiOwoKLy8gc3JjL3dvcmtsZXQvcmVjb3JkaW5nLXByb2Nlc3Nvci53b3JrbGV0LnRzCnZhciBSZWNvcmRpbmdQcm9jZXNzb3IgPSBjbGFzcyBleHRlbmRzIEF1ZGlvV29ya2xldFByb2Nlc3NvciB7CiAgY29uc3RydWN0b3IoKSB7CiAgICBzdXBlcigpOwogICAgdGhpcy5idWZmZXJTaXplID0gMDsKICAgIHRoaXMuYnVmZmVycyA9IFtdOwogICAgdGhpcy5zYW1wbGVzQ29sbGVjdGVkID0gMDsKICAgIHRoaXMuaXNSZWNvcmRpbmcgPSBmYWxzZTsKICAgIHRoaXMuY2hhbm5lbENvdW50ID0gMTsKICAgIHRoaXMucG9ydC5vbm1lc3NhZ2UgPSAoZXZlbnQpID0+IHsKICAgICAgY29uc3QgeyBjb21tYW5kLCBzYW1wbGVSYXRlOiBzYW1wbGVSYXRlMiwgY2hhbm5lbENvdW50IH0gPSBldmVudC5kYXRhOwogICAgICBpZiAoY29tbWFuZCA9PT0gInN0YXJ0IikgewogICAgICAgIHRoaXMuaXNSZWNvcmRpbmcgPSB0cnVlOwogICAgICAgIHRoaXMuY2hhbm5lbENvdW50ID0gY2hhbm5lbENvdW50IHx8IDE7CiAgICAgICAgdGhpcy5idWZmZXJTaXplID0gTWF0aC5mbG9vcigoc2FtcGxlUmF0ZTIgfHwgNDhlMykgKiAwLjAxNik7CiAgICAgICAgdGhpcy5idWZmZXJzID0gW107CiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLmNoYW5uZWxDb3VudDsgaSsrKSB7CiAgICAgICAgICB0aGlzLmJ1ZmZlcnNbaV0gPSBuZXcgRmxvYXQzMkFycmF5KHRoaXMuYnVmZmVyU2l6ZSk7CiAgICAgICAgfQogICAgICAgIHRoaXMuc2FtcGxlc0NvbGxlY3RlZCA9IDA7CiAgICAgIH0gZWxzZSBpZiAoY29tbWFuZCA9PT0gInN0b3AiKSB7CiAgICAgICAgdGhpcy5pc1JlY29yZGluZyA9IGZhbHNlOwogICAgICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPiAwKSB7CiAgICAgICAgICB0aGlzLmZsdXNoQnVmZmVycygpOwogICAgICAgIH0KICAgICAgfQogICAgfTsKICB9CiAgcHJvY2VzcyhpbnB1dHMsIG91dHB1dHMsIHBhcmFtZXRlcnMpIHsKICAgIGlmICghdGhpcy5pc1JlY29yZGluZykgewogICAgICByZXR1cm4gdHJ1ZTsKICAgIH0KICAgIGNvbnN0IGlucHV0ID0gaW5wdXRzWzBdOwogICAgaWYgKCFpbnB1dCB8fCBpbnB1dC5sZW5ndGggPT09IDApIHsKICAgICAgcmV0dXJuIHRydWU7CiAgICB9CiAgICBjb25zdCBmcmFtZUNvdW50ID0gaW5wdXRbMF0ubGVuZ3RoOwogICAgZm9yIChsZXQgY2hhbm5lbCA9IDA7IGNoYW5uZWwgPCBNYXRoLm1pbihpbnB1dC5sZW5ndGgsIHRoaXMuY2hhbm5lbENvdW50KTsgY2hhbm5lbCsrKSB7CiAgICAgIGNvbnN0IGlucHV0Q2hhbm5lbCA9IGlucHV0W2NoYW5uZWxdOwogICAgICBjb25zdCBidWZmZXIgPSB0aGlzLmJ1ZmZlcnNbY2hhbm5lbF07CiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZnJhbWVDb3VudDsgaSsrKSB7CiAgICAgICAgYnVmZmVyW3RoaXMuc2FtcGxlc0NvbGxlY3RlZCArIGldID0gaW5wdXRDaGFubmVsW2ldOwogICAgICB9CiAgICB9CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgKz0gZnJhbWVDb3VudDsKICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPj0gdGhpcy5idWZmZXJTaXplKSB7CiAgICAgIHRoaXMuZmx1c2hCdWZmZXJzKCk7CiAgICB9CiAgICByZXR1cm4gdHJ1ZTsKICB9CiAgZmx1c2hCdWZmZXJzKCkgewogICAgY29uc3Qgc2FtcGxlcyA9IHRoaXMuYnVmZmVyc1swXS5zbGljZSgwLCB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQpOwogICAgdGhpcy5wb3J0LnBvc3RNZXNzYWdlKHsKICAgICAgc2FtcGxlcywKICAgICAgc2FtcGxlUmF0ZSwKICAgICAgY2hhbm5lbENvdW50OiB0aGlzLmNoYW5uZWxDb3VudAogICAgfSk7CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPSAwOwogIH0KfTsKcmVnaXN0ZXJQcm9jZXNzb3IoInJlY29yZGluZy1wcm9jZXNzb3IiLCBSZWNvcmRpbmdQcm9jZXNzb3IpOwovLyMgc291cmNlTWFwcGluZ1VSTD1yZWNvcmRpbmctcHJvY2Vzc29yLndvcmtsZXQuanMubWFw", import.meta.url).href;
@@ -4451,7 +4457,7 @@ function Es(e, t = {}) {
       } catch (W) {
         throw console.error("Failed to load AudioWorklet module:", W), new Error("Failed to load recording processor");
       }
-  }, []), X = B(async () => {
+  }, []), G = D(async () => {
     if (!e) {
       y(new Error("No microphone stream available"));
       return;
@@ -4465,12 +4471,12 @@ function Es(e, t = {}) {
       const q = W.createAudioWorkletNode("recording-processor");
       C.current = q, te.connect(q), q.port.onmessage = (ne) => {
         const { samples: ae } = ne.data;
-        M.current.push(ae), D.current += ae.length, g(
-          (ge) => Rs(
+        S.current.push(ae), B.current += ae.length, g(
+          (ge) => Es(
             ge,
             ae,
             r,
-            D.current - ae.length,
+            B.current - ae.length,
             m
           )
         );
@@ -4478,18 +4484,18 @@ function Es(e, t = {}) {
         command: "start",
         sampleRate: W.sampleRate,
         channelCount: n
-      }), M.current = [], D.current = 0, g(new Int16Array(0)), d(null), h(0), v(0), V.current = !0, T.current = !1, s(!0), i(!1), S.current = performance.now();
+      }), S.current = [], B.current = 0, g(new Int16Array(0)), d(null), h(0), v(0), V.current = !0, T.current = !1, s(!0), i(!1), $.current = performance.now();
       const le = () => {
         if (V.current && !T.current) {
-          const ne = (performance.now() - S.current) / 1e3;
-          c(ne), $.current = requestAnimationFrame(le);
+          const ne = (performance.now() - $.current) / 1e3;
+          c(ne), M.current = requestAnimationFrame(le);
         }
       };
       le();
     } catch (W) {
       console.error("Failed to start recording:", W), y(W instanceof Error ? W : new Error("Failed to start recording"));
     }
-  }, [e, n, r, P, a, o]), U = B(async () => {
+  }, [e, n, r, P, a, o]), U = D(async () => {
     if (!a)
       return null;
     try {
@@ -4501,8 +4507,8 @@ function Es(e, t = {}) {
           }
         C.current.disconnect();
       }
-      $.current !== null && (cancelAnimationFrame($.current), $.current = null);
-      const W = Ds(M.current), q = Ae().rawContext, le = Ts(
+      M.current !== null && (cancelAnimationFrame(M.current), M.current = null);
+      const W = Bs(S.current), q = Ae().rawContext, le = Ts(
         q,
         W,
         q.sampleRate,
@@ -4512,15 +4518,15 @@ function Es(e, t = {}) {
     } catch (W) {
       return console.error("Failed to stop recording:", W), y(W instanceof Error ? W : new Error("Failed to stop recording")), null;
     }
-  }, [a, n]), z = B(() => {
-    a && !o && ($.current !== null && (cancelAnimationFrame($.current), $.current = null), T.current = !0, i(!0));
-  }, [a, o]), ee = B(() => {
+  }, [a, n]), z = D(() => {
+    a && !o && (M.current !== null && (cancelAnimationFrame(M.current), M.current = null), T.current = !0, i(!0));
+  }, [a, o]), ee = D(() => {
     if (a && o) {
-      T.current = !1, i(!1), S.current = performance.now() - l * 1e3;
+      T.current = !1, i(!1), $.current = performance.now() - l * 1e3;
       const W = () => {
         if (V.current && !T.current) {
-          const te = (performance.now() - S.current) / 1e3;
-          c(te), $.current = requestAnimationFrame(W);
+          const te = (performance.now() - $.current) / 1e3;
+          c(te), M.current = requestAnimationFrame(W);
         }
       };
       W();
@@ -4535,7 +4541,7 @@ function Es(e, t = {}) {
         }
       C.current.disconnect();
     }
-    $.current !== null && cancelAnimationFrame($.current);
+    M.current !== null && cancelAnimationFrame(M.current);
   }, []), {
     isRecording: a,
     isPaused: o,
@@ -4544,7 +4550,7 @@ function Es(e, t = {}) {
     audioBuffer: p,
     level: f,
     peakLevel: I,
-    startRecording: X,
+    startRecording: G,
     stopRecording: U,
     pauseRecording: z,
     resumeRecording: ee,
@@ -4552,7 +4558,7 @@ function Es(e, t = {}) {
   };
 }
 function Ws() {
-  const [e, t] = _(null), [n, r] = _([]), [a, s] = _(!1), [o, i] = _(!1), [l, c] = _(null), u = B(async () => {
+  const [e, t] = _(null), [n, r] = _([]), [a, s] = _(!1), [o, i] = _(!1), [l, c] = _(null), u = D(async () => {
     try {
       const b = (await navigator.mediaDevices.enumerateDevices()).filter((y) => y.kind === "audioinput").map((y) => ({
         deviceId: y.deviceId,
@@ -4563,7 +4569,7 @@ function Ws() {
     } catch (d) {
       console.error("Failed to enumerate devices:", d), c(d instanceof Error ? d : new Error("Failed to enumerate devices"));
     }
-  }, []), g = B(async (d, b) => {
+  }, []), g = D(async (d, b) => {
     i(!0), c(null);
     try {
       e && e.getTracks().forEach((I) => I.stop());
@@ -4590,7 +4596,7 @@ function Ws() {
     } finally {
       i(!1);
     }
-  }, [e, u]), p = B(() => {
+  }, [e, u]), p = D(() => {
     e && (e.getTracks().forEach((d) => d.stop()), t(null), s(!1));
   }, [e]);
   return Q(() => (u(), () => {
@@ -4609,7 +4615,7 @@ function _s(e, t = {}) {
   const {
     updateRate: n = 60,
     smoothingTimeConstant: r = 0.8
-  } = t, [a, s] = _(0), [o, i] = _(0), l = R(null), c = R(null), u = R(null), g = () => i(0);
+  } = t, [a, s] = _(0), [o, i] = _(0), l = E(null), c = E(null), u = E(null), g = () => i(0);
   return Q(() => {
     if (!e) {
       s(0), i(0);
@@ -4631,7 +4637,7 @@ function _s(e, t = {}) {
           if (m - I >= h) {
             I = m;
             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((M) => Math.max(M, A));
+            s(A), i((S) => Math.max(S, A));
           }
           u.current = requestAnimationFrame(v);
         }
@@ -4703,7 +4709,7 @@ k.span`
     }
   }
 `;
-k(Ot)`
+k(Kt)`
   min-width: 200px;
 `;
 k(Fn)`
@@ -4832,17 +4838,17 @@ function Wi(e, t, n, r = {}) {
     peaks: w,
     startRecording: C,
     stopRecording: A,
-    pauseRecording: M,
-    resumeRecording: D,
-    error: $
-  } = Es(g, o), S = B(async () => {
-    n && (i || (await Vt(), l(!0)), await C());
-  }, [n, i, C]), V = B(async () => {
-    const X = await A();
-    if (X && n) {
+    pauseRecording: S,
+    resumeRecording: B,
+    error: M
+  } = Rs(g, o), $ = D(async () => {
+    n && (i || (await Pt(), l(!0)), await C());
+  }, [n, i, C]), V = D(async () => {
+    const G = await A();
+    if (G && n) {
       const U = e.findIndex((ne) => ne.id === n);
       if (U === -1) return;
-      const z = e[U], ee = Math.floor(a * X.sampleRate);
+      const z = e[U], ee = Math.floor(a * G.sampleRate);
       let W = 0;
       if (z.clips.length > 0) {
         const ne = z.clips.map(
@@ -4852,12 +4858,12 @@ function Wi(e, t, n, r = {}) {
       }
       const te = Math.max(ee, W), q = {
         id: `clip-${Date.now()}`,
-        audioBuffer: X,
+        audioBuffer: G,
         startSample: te,
-        durationSamples: X.length,
+        durationSamples: G.length,
         offsetSamples: 0,
-        sampleRate: X.sampleRate,
-        sourceDurationSamples: X.length,
+        sampleRate: G.sampleRate,
+        sourceDurationSamples: G.length,
         gain: 1,
         name: `Recording ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`
       }, le = e.map((ne, ae) => ae === U ? {
@@ -4870,10 +4876,10 @@ function Wi(e, t, n, r = {}) {
   Q(() => {
     d && p.length > 0 && c === null && u(p[0].deviceId);
   }, [d, p.length]);
-  const T = B(async () => {
-    await b(void 0, s), await Vt(), l(!0);
-  }, [b, s]), P = B(async (X) => {
-    u(X), await b(X, s), await Vt(), l(!0);
+  const T = D(async () => {
+    await b(void 0, s), await Pt(), l(!0);
+  }, [b, s]), P = D(async (G) => {
+    u(G), await b(G, s), await Pt(), l(!0);
   }, [b, s]);
   return {
     // Recording state
@@ -4882,17 +4888,17 @@ function Wi(e, t, n, r = {}) {
     duration: m,
     level: f,
     peakLevel: h,
-    error: y || $,
+    error: y || M,
     // Microphone state
     stream: g,
     devices: p,
     hasPermission: d,
     selectedDevice: c,
     // Recording controls
-    startRecording: S,
+    startRecording: $,
     stopRecording: V,
-    pauseRecording: M,
-    resumeRecording: D,
+    pauseRecording: S,
+    resumeRecording: B,
     requestMicAccess: T,
     changeDevice: P,
     // Track state
@@ -5213,9 +5219,9 @@ function Zi(e) {
   };
 }
 function Vi(e = 256) {
-  const [t, n] = _([]), r = R(t);
+  const [t, n] = _([]), r = E(t);
   r.current = t;
-  const a = R(/* @__PURE__ */ new Map()), s = R(null), o = R(null), i = B((f) => {
+  const a = E(/* @__PURE__ */ new Map()), s = E(null), o = E(null), i = D((f) => {
     const h = o.current;
     if (!h) return;
     const { masterGainNode: I, destination: v, analyserNode: m } = h;
@@ -5236,7 +5242,7 @@ function Vi(e = 256) {
         C.connect(A.effect), C = A.effect;
       }), C.connect(m), m.connect(v);
     }
-  }, []), l = B((f) => {
+  }, []), l = D((f) => {
     const h = sr(f);
     if (!h) {
       console.error(`Unknown effect: ${f}`);
@@ -5256,10 +5262,10 @@ function Vi(e = 256) {
       bypassed: !1
     };
     n((w) => [...w, m]);
-  }, []), c = B((f) => {
+  }, []), c = D((f) => {
     const h = a.current.get(f);
     h && (h.dispose(), a.current.delete(f)), n((I) => I.filter((v) => v.instanceId !== f));
-  }, []), u = B(
+  }, []), u = D(
     (f, h, I) => {
       const v = a.current.get(f);
       v && v.setParameter(h, I), n(
@@ -5269,7 +5275,7 @@ function Vi(e = 256) {
       );
     },
     []
-  ), g = B(
+  ), g = D(
     (f) => {
       const h = r.current.find((m) => m.instanceId === f);
       if (!h) return;
@@ -5285,20 +5291,20 @@ function Vi(e = 256) {
       );
     },
     []
-  ), p = B((f, h) => {
+  ), p = D((f, h) => {
     n((I) => {
       const v = [...I], [m] = v.splice(f, 1);
       return v.splice(h, 0, m), v;
     });
-  }, []), d = B(() => {
+  }, []), d = D(() => {
     a.current.forEach((f) => f.dispose()), a.current.clear(), n([]);
   }, []);
   Q(() => {
     i(t);
   }, [t, i]);
-  const b = B(
+  const b = D(
     (f, h, I) => {
-      const v = new Bn("fft", e);
+      const v = new Dn("fft", e);
       s.current = v, o.current = {
         masterGainNode: f,
         destination: h,
@@ -5323,7 +5329,7 @@ function Vi(e = 256) {
   Q(() => () => {
     a.current.forEach((f) => f.dispose()), a.current.clear();
   }, []);
-  const y = B(() => {
+  const y = D(() => {
     const f = t.filter((h) => !h.bypassed);
     if (f.length !== 0)
       return (h, I, v) => {
@@ -5362,7 +5368,7 @@ function Vi(e = 256) {
 function Pi() {
   const [e, t] = _(
     /* @__PURE__ */ new Map()
-  ), n = R(/* @__PURE__ */ new Map()), r = R(/* @__PURE__ */ new Map()), a = B((d, b) => {
+  ), n = E(/* @__PURE__ */ new Map()), r = E(/* @__PURE__ */ new Map()), a = D((d, b) => {
     const y = r.current.get(d);
     if (!y) return;
     const { graphEnd: f, masterGainNode: h } = y, I = n.current.get(d);
@@ -5383,7 +5389,7 @@ function Pi() {
         m.connect(w.effect), m = w.effect;
       }), m.connect(h);
     }
-  }, []), s = B((d, b) => {
+  }, []), s = D((d, b) => {
     const y = sr(b);
     if (!y) {
       console.error(`Unknown effect: ${b}`);
@@ -5406,13 +5412,13 @@ function Pi() {
       const m = new Map(v), w = m.get(d) || [];
       return m.set(d, [...w, I]), m;
     });
-  }, []), o = B((d, b) => {
+  }, []), o = D((d, b) => {
     const y = n.current.get(d), f = y?.get(b);
     f && (f.dispose(), y?.delete(b)), t((h) => {
       const I = new Map(h), v = I.get(d) || [];
       return I.set(d, v.filter((m) => m.instanceId !== b)), I;
     });
-  }, []), i = B(
+  }, []), i = D(
     (d, b, y, f) => {
       const I = n.current.get(d)?.get(b);
       I && I.setParameter(y, f), t((v) => {
@@ -5426,7 +5432,7 @@ function Pi() {
       });
     },
     []
-  ), l = B(
+  ), l = D(
     (d, b) => {
       const f = (u.current.get(d) || []).find((m) => m.instanceId === b);
       if (!f) return;
@@ -5446,15 +5452,15 @@ function Pi() {
       });
     },
     []
-  ), c = B((d) => {
+  ), c = D((d) => {
     const b = n.current.get(d);
     b && (b.forEach((y) => y.dispose()), b.clear()), t((y) => {
       const f = new Map(y);
       return f.set(d, []), f;
     });
-  }, []), u = R(e);
+  }, []), u = E(e);
   u.current = e;
-  const g = B(
+  const g = D(
     (d) => (b, y, f) => {
       r.current.set(d, {
         graphEnd: b,
@@ -5485,7 +5491,7 @@ function Pi() {
       d.forEach((b) => b.dispose()), d.clear();
     }), n.current.clear();
   }, []);
-  const p = B(
+  const p = D(
     (d) => {
       const y = (e.get(d) || []).filter((f) => !f.bypassed);
       if (y.length !== 0)
@@ -5552,7 +5558,7 @@ function Ys(e, t) {
 function Os() {
   const [e, t] = _(!1), [n, r] = _(0), [a, s] = _(null);
   return {
-    exportWav: B(async (i, l, c = {}) => {
+    exportWav: D(async (i, l, c = {}) => {
       const {
         filename: u = "export",
         mode: g = "master",
@@ -5572,16 +5578,16 @@ function Os() {
           throw new Error("Invalid track index for individual export");
         const v = i[0].clips[0]?.sampleRate || 44100;
         let m = 0;
-        for (const S of i)
-          for (const V of S.clips) {
+        for (const $ of i)
+          for (const V of $.clips) {
             const T = V.startSample + V.durationSamples;
             m = Math.max(m, T);
           }
         m += Math.round(v * 0.1);
-        const w = m / v, C = g === "individual" ? [{ track: i[p], state: l[p], index: p }] : i.map((S, V) => ({ track: S, state: l[V], index: V })), A = l.some((S) => S.soloed), M = !!f;
-        let D;
-        if ((y || M) && b)
-          D = await Ks(
+        const w = m / v, C = g === "individual" ? [{ track: i[p], state: l[p], index: p }] : i.map(($, V) => ({ track: $, state: l[V], index: V })), A = l.some(($) => $.soloed), S = !!f;
+        let B;
+        if ((y || S) && b)
+          B = await Ks(
             C,
             l,
             A,
@@ -5589,32 +5595,32 @@ function Os() {
             v,
             y,
             f,
-            (S) => {
-              r(S), I?.(S);
+            ($) => {
+              r($), I?.($);
             }
           );
         else {
-          const S = new OfflineAudioContext(2, m, v);
+          const $ = new OfflineAudioContext(2, m, v);
           let V = 0;
-          const T = C.reduce((P, { track: X }) => P + X.clips.length, 0);
-          for (const { track: P, state: X } of C)
-            if (!(X.muted && !X.soloed) && !(A && !X.soloed))
+          const T = C.reduce((P, { track: G }) => P + G.clips.length, 0);
+          for (const { track: P, state: G } of C)
+            if (!(G.muted && !G.soloed) && !(A && !G.soloed))
               for (const U of P.clips) {
-                await js(S, U, X, v, b), V++;
+                await js($, U, G, v, b), V++;
                 const z = V / T * 0.5;
                 r(z), I?.(z);
               }
-          r(0.5), I?.(0.5), D = await S.startRendering();
+          r(0.5), I?.(0.5), B = await $.startRendering();
         }
         r(0.9), I?.(0.9);
-        const $ = Ls(D, { bitDepth: h });
+        const M = Ls(B, { bitDepth: h });
         if (r(1), I?.(1), d) {
-          const S = g === "individual" ? `${u}_${i[p].name}` : u;
-          Ys($, `${S}.wav`);
+          const $ = g === "individual" ? `${u}_${i[p].name}` : u;
+          Ys(M, `${$}.wav`);
         }
         return {
-          audioBuffer: D,
-          blob: $,
+          audioBuffer: B,
+          blob: M,
           duration: w
         };
       } catch (v) {
@@ -5641,12 +5647,12 @@ async function Ks(e, t, n, r, a, s, o, i) {
         s ? I = s(h, f, !0) : h.connect(f);
         for (const { track: v, state: m } of e) {
           if (m.muted && !m.soloed || n && !m.soloed) continue;
-          const w = new c(Us(m.volume)), C = new g(m.pan), A = new u(m.muted ? 0 : 1), M = o?.(v.id);
-          M ? M(A, h, !0) : A.connect(h), C.connect(A), w.connect(C);
-          for (const D of v.clips) {
-            const { audioBuffer: $, startSample: S, durationSamples: V, offsetSamples: T, gain: P, fadeIn: X, fadeOut: U } = D, z = S / a, ee = V / a, W = T / a, te = new d($), q = new p(te), le = new u(P);
-            if (q.connect(le), le.connect(w), X) {
-              const ne = z, ae = z + X.duration, ge = le.gain._param;
+          const w = new c(Us(m.volume)), C = new g(m.pan), A = new u(m.muted ? 0 : 1), S = o?.(v.id);
+          S ? S(A, h, !0) : A.connect(h), C.connect(A), w.connect(C);
+          for (const B of v.clips) {
+            const { audioBuffer: M, startSample: $, durationSamples: V, offsetSamples: T, gain: P, fadeIn: G, fadeOut: U } = B, z = $ / a, ee = V / a, W = T / a, te = new d(M), q = new p(te), le = new u(P);
+            if (q.connect(le), le.connect(w), G) {
+              const ne = z, ae = z + G.duration, ge = le.gain._param;
               ge.setValueAtTime(0, ne), ge.linearRampToValueAtTime(P, ae);
             }
             if (U) {
@@ -5745,20 +5751,20 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
   progressBarWidth: f,
   children: h
 }) => {
-  const I = f ?? b + y, v = Ne(() => c?.annotations ? c.annotations.map((E) => typeof E.start == "number" ? E : tr(E)) : [], [c?.annotations]), m = R(v);
+  const I = f ?? b + y, v = Ne(() => c?.annotations ? c.annotations.map((R) => typeof R.start == "number" ? R : tr(R)) : [], [c?.annotations]), m = E(v);
   m.current = v;
-  const [w, C] = _(null), [A, M] = _(!1), [D, $] = _(0), [S, V] = _(0), [T, P] = _([]), [X, U] = _([]), [z, ee] = _([]), [W, te] = _(0), [q, le] = _(0), [ne, ae] = _(null), [ge, Pe] = _(o), [G, J] = _(c?.isContinuousPlay ?? !1), [oe, ce] = _(c?.linkEndpoints ?? !1), [fe, j] = _(c?.editable ?? !1), [$e, Ye] = _(!1), [Ge, rt] = _(0), [Oe, je] = _(0), [dt, at] = _(!1), F = R(null), xe = R(0), be = R(0), he = R(null), ot = R(z), N = R(0), se = R(0), Te = R(null), Z = R(null), L = R(!1), ie = R(c?.isContinuousPlay ?? !1), me = R(null), ve = R(a), Me = R(!1), de = R(0), Xe = R(0), Be = R(0), ze = R(0), { timeFormat: Ke, setTimeFormat: st, formatTime: mt } = xs(), Je = As({ initialSamplesPerPixel: a, zoomLevels: s }), Qe = Je.samplesPerPixel, { masterVolume: br, setMasterVolume: vr } = ks({ playoutRef: F, initialVolume: 1 }), wr = B((E) => {
-    ie.current = E, J(E);
-  }, []), it = B((E) => {
-    me.current = E, C(E);
-  }, []), yr = B((E) => {
-    Me.current = E, Ye(E);
-  }, []), ft = B((E, H) => {
-    Be.current = E, ze.current = H, rt(E), je(H);
-  }, []), Cr = B(() => {
-    const E = de.current, H = Xe.current;
-    E !== H && H > E && ft(E, H);
-  }, [ft]), xr = B(() => {
+  const [w, C] = _(null), [A, S] = _(!1), [B, M] = _(0), [$, V] = _(0), [T, P] = _([]), [G, U] = _([]), [z, ee] = _([]), [W, te] = _(0), [q, le] = _(0), [ne, ae] = _(null), [ge, Pe] = _(o), [H, j] = _(c?.isContinuousPlay ?? !1), [oe, ce] = _(c?.linkEndpoints ?? !1), [fe, J] = _(c?.editable ?? !1), [$e, Ye] = _(!1), [Ge, rt] = _(0), [Oe, je] = _(0), [dt, at] = _(!1), F = E(null), xe = E(0), be = E(0), he = E(null), ot = E(z), N = E(0), se = E(0), Te = E(null), Z = E(null), L = E(!1), ie = E(c?.isContinuousPlay ?? !1), me = E(null), ve = E(a), Me = E(!1), de = E(0), Xe = E(0), De = E(0), ze = E(0), { timeFormat: Ke, setTimeFormat: st, formatTime: mt } = xs(), Je = As({ initialSamplesPerPixel: a, zoomLevels: s }), Qe = Je.samplesPerPixel, { masterVolume: br, setMasterVolume: vr } = ks({ playoutRef: F, initialVolume: 1 }), wr = D((R) => {
+    ie.current = R, j(R);
+  }, []), it = D((R) => {
+    me.current = R, C(R);
+  }, []), yr = D((R) => {
+    Me.current = R, Ye(R);
+  }, []), ft = D((R, X) => {
+    De.current = R, ze.current = X, rt(R), je(X);
+  }, []), Cr = D(() => {
+    const R = de.current, X = Xe.current;
+    R !== X && X > R && ft(R, X);
+  }, [ft]), xr = D(() => {
     ft(0, 0);
   }, [ft]);
   Q(() => {
@@ -5769,19 +5775,19 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
     de.current = W, Xe.current = q;
   }, [W, q]), Q(() => {
     if (!Z.current || !T.length) return;
-    const E = Z.current, H = ve.current, K = Qe;
-    if (H === K) return;
-    const ue = l.show ? l.width : 0, O = E.clientWidth, ye = E.scrollLeft + O / 2 - ue, Ue = T[0].sampleRate, Ce = ye * H / Ue * Ue / K, Re = Math.max(0, Ce + ue - O / 2);
-    E.scrollLeft = Re, ve.current = K;
+    const R = Z.current, X = ve.current, K = Qe;
+    if (X === K) return;
+    const ue = l.show ? l.width : 0, O = R.clientWidth, ye = R.scrollLeft + O / 2 - ue, Ue = T[0].sampleRate, Ce = ye * X / Ue * Ue / K, Ee = Math.max(0, Ce + ue - O / 2);
+    R.scrollLeft = Ee, ve.current = K;
   }, [Qe, T, l]);
-  const wt = R(null);
+  const wt = E(null);
   Q(() => {
     if (at(!1), e.length === 0) {
       P([]), V(0), ee([]), U([]), F.current && (F.current.dispose(), F.current = null);
       return;
     }
-    const E = A, H = be.current;
-    return F.current && E && (F.current.stop(), he.current && (cancelAnimationFrame(he.current), he.current = null), wt.current = { position: H }), (async () => {
+    const R = A, X = be.current;
+    return F.current && R && (F.current.stop(), he.current && (cancelAnimationFrame(he.current), he.current = null), wt.current = { position: X }), (async () => {
       try {
         const ue = [];
         e.forEach((we) => {
@@ -5790,12 +5796,12 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
         let O = 0;
         e.forEach((we) => {
           we.clips.forEach((Ce) => {
-            const Re = Ce.sampleRate, yt = (Ce.startSample + Ce.durationSamples) / Re;
+            const Ee = Ce.sampleRate, yt = (Ce.startSample + Ce.durationSamples) / Ee;
             O = Math.max(O, yt);
           });
-        }), P(ue), V(O), ee((we) => we.length === e.length ? we.map((Ce, Re) => ({
+        }), P(ue), V(O), ee((we) => we.length === e.length ? we.map((Ce, Ee) => ({
           ...Ce,
-          name: e[Re].name
+          name: e[Ee].name
         })) : e.map((Ce) => ({
           name: Ce.name,
           muted: Ce.muted,
@@ -5807,9 +5813,9 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
           effects: u
         }), ye = ot.current;
         e.forEach((we, Ce) => {
-          const Re = we.clips.filter((et) => et.audioBuffer);
-          if (Re.length > 0) {
-            const et = Re[0].sampleRate, yt = Math.min(...Re.map((Ee) => Ee.startSample / et)), Zr = Math.max(...Re.map((Ee) => (Ee.startSample + Ee.durationSamples) / et)), Ct = ye[Ce], Vr = {
+          const Ee = we.clips.filter((et) => et.audioBuffer);
+          if (Ee.length > 0) {
+            const et = Ee[0].sampleRate, yt = Math.min(...Ee.map((Re) => Re.startSample / et)), Zr = Math.max(...Ee.map((Re) => (Re.startSample + Re.durationSamples) / et)), Ct = ye[Ce], Vr = {
               id: `track-${Ce}`,
               // Use consistent index-based ID for track controls
               name: we.name,
@@ -5819,18 +5825,18 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
               stereoPan: Ct?.pan ?? we.pan,
               startTime: yt,
               endTime: Zr
-            }, Pr = Re.map((Ee) => {
-              const Ft = Ee.sampleRate;
+            }, Pr = Ee.map((Re) => {
+              const Zt = Re.sampleRate;
               return {
-                buffer: Ee.audioBuffer,
+                buffer: Re.audioBuffer,
                 // We filtered for audioBuffer above
-                startTime: Ee.startSample / Ft - yt,
+                startTime: Re.startSample / Zt - yt,
                 // Make relative to track start
-                duration: Ee.durationSamples / Ft,
-                offset: Ee.offsetSamples / Ft,
-                fadeIn: Ee.fadeIn,
-                fadeOut: Ee.fadeOut,
-                gain: Ee.gain
+                duration: Re.durationSamples / Zt,
+                offset: Re.offsetSamples / Zt,
+                fadeIn: Re.fadeIn,
+                fadeOut: Re.fadeOut,
+                gain: Re.gain
               };
             });
             Ie.addTrack({
@@ -5856,7 +5862,7 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
     };
   }, [e, g, A]), Q(() => {
     if (e.length === 0) return;
-    const E = 16, H = e.map((K) => K.clips.map((O) => {
+    const R = 16, X = e.map((K) => K.clips.map((O) => {
       if (O.waveformData) {
         const ye = er(
           O.waveformData,
@@ -5889,7 +5895,7 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
           peaks: {
             length: 0,
             data: [],
-            bits: E
+            bits: R
           },
           startSample: O.startSample,
           durationSamples: O.durationSamples,
@@ -5900,7 +5906,7 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
         O.audioBuffer,
         Qe,
         n,
-        E,
+        R,
         O.offsetSamples,
         O.durationSamples
       );
@@ -5914,13 +5920,13 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
         fadeOut: O.fadeOut
       };
     }));
-    U(H);
+    U(X);
   }, [e, Qe, n]);
-  const qe = B(() => {
+  const qe = D(() => {
     he.current && (cancelAnimationFrame(he.current), he.current = null);
-    const E = () => {
-      const H = Ae().currentTime - N.current, K = se.current + H;
-      be.current = K, $(K);
+    const R = () => {
+      const X = Ae().currentTime - N.current, K = se.current + X;
+      be.current = K, M(K);
       const ue = m.current;
       if (ue.length > 0) {
         const Ie = ue.find(
@@ -5931,121 +5937,127 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
         else if (me.current) {
           const ye = ue.find((Ue) => Ue.id === me.current);
           if (ye && K >= ye.end) {
-            F.current && F.current.stop(), M(!1), be.current = xe.current, $(xe.current);
+            F.current && F.current.stop(), S(!1), be.current = xe.current, M(xe.current);
             return;
           }
         } else
           Ie && it(Ie.id);
       }
       if (L.current && Z.current && T.length > 0) {
-        const Ie = Z.current, ye = T[0].sampleRate, Ue = K * ye / ve.current, we = Ie.clientWidth, Ce = l.show ? l.width : 0, Re = Ue + Ce, et = Math.max(0, Re - we / 2);
+        const Ie = Z.current, ye = T[0].sampleRate, Ue = K * ye / ve.current, we = Ie.clientWidth, Ce = l.show ? l.width : 0, Ee = Ue + Ce, et = Math.max(0, Ee - we / 2);
         Ie.scrollLeft = et;
       }
       if (Te.current !== null && K >= Te.current) {
-        F.current && F.current.stop(), M(!1), be.current = Te.current, $(Te.current), Te.current = null;
+        F.current && F.current.stop(), S(!1), be.current = Te.current, M(Te.current), Te.current = null;
         return;
       }
-      const O = Be.current !== ze.current && ze.current > Be.current;
+      const O = De.current !== ze.current && ze.current > De.current;
       if (Me.current && O && K >= ze.current) {
         F.current?.stop();
         const ye = Ae().currentTime;
-        N.current = ye, se.current = Be.current, be.current = Be.current, F.current?.play(ye, Be.current), he.current = requestAnimationFrame(E);
+        N.current = ye, se.current = De.current, be.current = De.current, F.current?.play(ye, De.current), he.current = requestAnimationFrame(R);
         return;
       }
-      if (K >= S) {
-        F.current && F.current.stop(), M(!1), be.current = xe.current, $(xe.current), it(null);
+      if (K >= $) {
+        F.current && F.current.stop(), S(!1), be.current = xe.current, M(xe.current), it(null);
         return;
       }
-      he.current = requestAnimationFrame(E);
+      he.current = requestAnimationFrame(R);
     };
-    he.current = requestAnimationFrame(E);
-  }, [S, T, Qe, G]), He = B(() => {
+    he.current = requestAnimationFrame(R);
+  }, [$, T, Qe, H]), He = D(() => {
     he.current && (cancelAnimationFrame(he.current), he.current = null);
   }, []);
   Q(() => {
     (async () => {
       if (A && he.current && F.current)
-        if (G) {
-          const H = be.current;
+        if (H) {
+          const X = be.current;
           F.current.stop(), He(), await F.current.init(), F.current.setOnPlaybackComplete(() => {
           });
           const ue = Ae().currentTime;
-          N.current = ue, se.current = H, F.current.play(ue, H), qe();
+          N.current = ue, se.current = X, F.current.play(ue, X), qe();
         } else
           He(), qe();
     })();
-  }, [G, A, qe, He]), Q(() => {
+  }, [H, A, qe, He]), Q(() => {
     (async () => {
       if (wt.current && F.current) {
-        const { position: H } = wt.current;
+        const { position: X } = wt.current;
         wt.current = null, await F.current.init(), F.current.setOnPlaybackComplete(() => {
         });
         const ue = Ae().currentTime;
-        N.current = ue, se.current = H, F.current.play(ue, H), M(!0), qe();
+        N.current = ue, se.current = X, F.current.play(ue, X), S(!0), qe();
       }
     })();
   }, [e, qe]);
-  const _t = B(async (E, H) => {
+  const _t = D(async (R, X) => {
     if (!F.current || T.length === 0) return;
     await F.current.init(), await Mn();
-    const K = E ?? be.current;
+    const K = R ?? be.current;
     xe.current = K, be.current = K, F.current.setOnPlaybackComplete(() => {
     }), F.current.stop(), He();
     const O = Ae().currentTime;
-    N.current = O, se.current = K, Te.current = H !== void 0 ? K + H : null, F.current.play(O, K, H), M(!0), qe();
-  }, [T.length, qe, He]), Ir = B(() => {
+    N.current = O, se.current = K, Te.current = X !== void 0 ? K + X : null, F.current.play(O, K, X), S(!0), qe();
+  }, [T.length, qe, He]), Ir = D(() => {
     if (!F.current) return;
-    const E = Ae().currentTime - N.current, H = se.current + E;
-    F.current.pause(), M(!1), He(), be.current = H, $(H);
-  }, [He]), Ar = B(() => {
-    F.current && (F.current.stop(), M(!1), He(), be.current = xe.current, $(xe.current), it(null));
-  }, [He]), kr = B((E) => {
-    const H = Math.max(0, Math.min(E, S));
-    be.current = H, $(H), A && F.current && (F.current.stop(), He(), _t(H));
-  }, [S, A, _t, He]), Sr = B((E, H) => {
+    const R = Ae().currentTime - N.current, X = se.current + R;
+    F.current.pause(), S(!1), He(), be.current = X, M(X);
+  }, [He]), Ar = D(() => {
+    F.current && (F.current.stop(), S(!1), He(), be.current = xe.current, M(xe.current), it(null));
+  }, [He]), kr = D((R) => {
+    const X = Math.max(0, Math.min(R, $));
+    be.current = X, M(X), A && F.current && (F.current.stop(), He(), _t(X));
+  }, [$, A, _t, He]), Sr = D((R, X) => {
     const K = [...z];
-    if (K[E] = { ...K[E], muted: H }, ee(K), F.current) {
-      const ue = `track-${E}`;
-      F.current.setMute(ue, H);
+    if (K[R] = { ...K[R], muted: X }, ee(K), F.current) {
+      const ue = `track-${R}`;
+      F.current.setMute(ue, X);
     }
-  }, [z]), $r = B((E, H) => {
+  }, [z]), $r = D((R, X) => {
     const K = [...z];
-    if (K[E] = { ...K[E], soloed: H }, ee(K), F.current) {
-      const ue = `track-${E}`;
-      F.current.setSolo(ue, H);
+    if (K[R] = { ...K[R], soloed: X }, ee(K), F.current) {
+      const ue = `track-${R}`;
+      F.current.setSolo(ue, X);
     }
-  }, [z]), Mr = B((E, H) => {
+  }, [z]), Mr = D((R, X) => {
     const K = [...z];
-    if (K[E] = { ...K[E], volume: H }, ee(K), F.current) {
-      const ue = `track-${E}`, O = F.current.getTrack(ue);
-      O && O.setVolume(H);
+    if (K[R] = { ...K[R], volume: X }, ee(K), F.current) {
+      const ue = `track-${R}`, O = F.current.getTrack(ue);
+      O && O.setVolume(X);
     }
-  }, [z]), Br = B((E, H) => {
+  }, [z]), Dr = D((R, X) => {
     const K = [...z];
-    if (K[E] = { ...K[E], pan: H }, ee(K), F.current) {
-      const ue = `track-${E}`, O = F.current.getTrack(ue);
-      O && O.setPan(H);
+    if (K[R] = { ...K[R], pan: X }, ee(K), F.current) {
+      const ue = `track-${R}`, O = F.current.getTrack(ue);
+      O && O.setPan(X);
     }
-  }, [z]), Dr = B((E, H) => {
-    te(E), le(H), be.current = E, $(E), A && F.current && (F.current.stop(), F.current.play(Ae().currentTime, E));
-  }, [A]), Tr = B((E) => {
-    Z.current = E;
-  }, []), qt = R(d);
-  qt.current = d;
-  const Rr = B(
-    (E) => {
-      const H = typeof E == "function" ? E(m.current) : E;
-      qt.current?.(H);
+  }, [z]), Br = D((R, X) => {
+    te(R), le(X), be.current = R, M(R), A && F.current && (F.current.stop(), F.current.play(Ae().currentTime, R));
+  }, [A]), Tr = D((R) => {
+    Z.current = R;
+  }, []), Ft = E(d);
+  Ft.current = d;
+  const Er = D(
+    (R) => {
+      const X = typeof R == "function" ? R(m.current) : R;
+      if (!Ft.current) {
+        process.env.NODE_ENV !== "production" && console.warn(
+          "waveform-playlist: setAnnotations was called but no onAnnotationsChange callback is provided. Annotation edits will not persist. Pass onAnnotationsChange to WaveformPlaylistProvider to handle annotation updates."
+        );
+        return;
+      }
+      Ft.current(X);
     },
     []
-  ), Er = T[0]?.sampleRate || 44100, en = t ? 30 : 0, Wr = e.length * r + en, tn = {
+  ), Rr = T[0]?.sampleRate || 44100, en = t ? 30 : 0, Wr = e.length * r + en, tn = {
     isPlaying: A,
-    currentTime: D,
+    currentTime: B,
     currentTimeRef: be,
     playbackStartTimeRef: N,
     audioStartPositionRef: se
   }, nn = {
-    continuousPlay: G,
+    continuousPlay: H,
     linkEndpoints: oe,
     annotationsEditable: fe,
     isAutomaticScroll: ge,
@@ -6063,16 +6075,16 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
     pause: Ir,
     stop: Ar,
     seekTo: kr,
-    setCurrentTime: (E) => {
-      be.current = E, $(E);
+    setCurrentTime: (R) => {
+      be.current = R, M(R);
     },
     // Track controls
     setTrackMute: Sr,
     setTrackSolo: $r,
     setTrackVolume: Mr,
-    setTrackPan: Br,
+    setTrackPan: Dr,
     // Selection
-    setSelection: Dr,
+    setSelection: Br,
     setSelectedTrackId: ae,
     // Time format
     setTimeFormat: st,
@@ -6083,16 +6095,16 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
     // Master volume
     setMasterVolume: vr,
     // Automatic scroll
-    setAutomaticScroll: (E) => {
-      Pe(E);
+    setAutomaticScroll: (R) => {
+      Pe(R);
     },
     setScrollContainer: Tr,
     scrollContainerRef: Z,
     // Annotation controls
     setContinuousPlay: wr,
     setLinkEndpoints: ce,
-    setAnnotationsEditable: j,
-    setAnnotations: Rr,
+    setAnnotationsEditable: J,
+    setAnnotations: Er,
     setActiveAnnotationId: it,
     // Loop controls
     setLoopEnabled: yr,
@@ -6100,12 +6112,12 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
     setLoopRegionFromSelection: Cr,
     clearLoopRegion: xr
   }, an = {
-    duration: S,
+    duration: $,
     audioBuffers: T,
-    peaksDataArray: X,
+    peaksDataArray: G,
     trackStates: z,
     tracks: e,
-    sampleRate: Er,
+    sampleRate: Rr,
     waveHeight: r,
     timeScaleHeight: en,
     minimumPlaylistHeight: Wr,
@@ -6128,27 +6140,27 @@ const ir = ke(null), lr = ke(null), cr = ke(null), ur = ke(null), dr = ke(null),
   }, Fr = { ...Pn, ...i };
   return /* @__PURE__ */ x(Tn, { theme: Fr, children: /* @__PURE__ */ x(ir.Provider, { value: tn, children: /* @__PURE__ */ x(lr.Provider, { value: nn, children: /* @__PURE__ */ x(cr.Provider, { value: rn, children: /* @__PURE__ */ x(ur.Provider, { value: an, children: /* @__PURE__ */ x(dr.Provider, { value: _r, children: h }) }) }) }) }) });
 }, _e = () => {
-  const e = De(ir);
+  const e = Be(ir);
   if (!e)
     throw new Error("usePlaybackAnimation must be used within WaveformPlaylistProvider");
   return e;
 }, Fe = () => {
-  const e = De(lr);
+  const e = Be(lr);
   if (!e)
     throw new Error("usePlaylistState must be used within WaveformPlaylistProvider");
   return e;
 }, pe = () => {
-  const e = De(cr);
+  const e = Be(cr);
   if (!e)
     throw new Error("usePlaylistControls must be used within WaveformPlaylistProvider");
   return e;
 }, Se = () => {
-  const e = De(ur);
+  const e = Be(ur);
   if (!e)
     throw new Error("usePlaylistData must be used within WaveformPlaylistProvider");
   return e;
 }, Hi = () => {
-  const e = De(dr);
+  const e = Be(dr);
   if (!e)
     throw new Error("useWaveformPlaylist must be used within WaveformPlaylistProvider");
   return e;
@@ -6411,21 +6423,21 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   onReady: d,
   children: b
 }) => {
-  const y = g ?? c + u, [f, h] = _(!1), [I, v] = _(0), [m, w] = _(0), [C, A] = _([]), [M, D] = _(a), $ = Ne(() => l?.annotations ? l.annotations.map((N) => typeof N.start == "number" ? N : tr(N)) : [], [l?.annotations]), S = R($);
-  S.current = $;
-  const [V, T] = _(null), [P, X] = _(
+  const y = g ?? c + u, [f, h] = _(!1), [I, v] = _(0), [m, w] = _(0), [C, A] = _([]), [S, B] = _(a), M = Ne(() => l?.annotations ? l.annotations.map((N) => typeof N.start == "number" ? N : tr(N)) : [], [l?.annotations]), $ = E(M);
+  $.current = M;
+  const [V, T] = _(null), [P, G] = _(
     l?.isContinuousPlay ?? !1
-  ), [U] = _(t), [z, ee] = _(s), W = R(null), te = R(0), q = R(null), le = R(P), ne = R(null), ae = R(null), ge = R(s), Pe = R(t);
+  ), [U] = _(t), [z, ee] = _(s), W = E(null), te = E(0), q = E(null), le = E(P), ne = E(null), ae = E(null), ge = E(s), Pe = E(t);
   Q(() => {
     le.current = P;
   }, [P]), Q(() => {
     ge.current = z;
   }, [z]);
-  const G = B((N) => {
+  const H = D((N) => {
     ne.current = N, T(N);
-  }, []), J = B((N) => {
-    le.current = N, X(N);
-  }, []), oe = B((N) => {
+  }, []), j = D((N) => {
+    le.current = N, G(N);
+  }, []), oe = D((N) => {
     ae.current = N;
   }, []), ce = e.waveformData.sample_rate;
   Q(() => {
@@ -6441,7 +6453,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
     return se && se.setOnTimeUpdateCallback((Te) => {
       te.current = Te;
     }), N.setOnPlaybackComplete(() => {
-      q.current && (cancelAnimationFrame(q.current), q.current = null), h(!1), G(null), te.current = 0, v(0);
+      q.current && (cancelAnimationFrame(q.current), q.current = null), h(!1), H(null), te.current = 0, v(0);
     }), W.current = N, w(e.waveformData.duration), d?.(), () => {
       q.current && cancelAnimationFrame(q.current), N.dispose();
     };
@@ -6468,18 +6480,18 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
     };
     A([[se]]);
   }, [e.waveformData, e.name, U, ce]);
-  const fe = B(() => {
+  const fe = D(() => {
     q.current && cancelAnimationFrame(q.current);
     const N = () => {
       const se = W.current?.getCurrentTime() ?? 0;
       te.current = se, v(se);
-      const Te = S.current;
+      const Te = $.current;
       if (Te.length > 0) {
         const Z = Te.find(
           (L) => se >= L.start && se < L.end
         );
         if (le.current)
-          Z && Z.id !== ne.current ? G(Z.id) : !Z && ne.current !== null && G(null);
+          Z && Z.id !== ne.current ? H(Z.id) : !Z && ne.current !== null && H(null);
         else if (ne.current) {
           const L = Te.find(
             (ie) => ie.id === ne.current
@@ -6488,7 +6500,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
             W.current?.stop(), h(!1);
             return;
           }
-        } else Z && G(Z.id);
+        } else Z && H(Z.id);
       }
       if (ge.current && ae.current) {
         const Z = ae.current, L = se * ce / Pe.current, ie = Z.clientWidth, me = i.show ? i.width : 0, ve = L + me, Me = Math.max(0, ve - ie / 2);
@@ -6497,28 +6509,28 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
       q.current = requestAnimationFrame(N);
     };
     q.current = requestAnimationFrame(N);
-  }, [G, ce, i]), j = B(() => {
+  }, [H, ce, i]), J = D(() => {
     q.current && (cancelAnimationFrame(q.current), q.current = null);
-  }, []), $e = B(
+  }, []), $e = D(
     (N) => {
       if (!W.current) return;
       const se = N ?? te.current;
       W.current.play(void 0, se), h(!0), fe();
     },
     [fe]
-  ), Ye = B(() => {
-    W.current && (W.current.pause(), h(!1), j(), v(W.current.getCurrentTime()));
-  }, [j]), Ge = B(() => {
-    W.current && (W.current.stop(), h(!1), j(), te.current = 0, v(0), G(null));
-  }, [j, G]), rt = B(
+  ), Ye = D(() => {
+    W.current && (W.current.pause(), h(!1), J(), v(W.current.getCurrentTime()));
+  }, [J]), Ge = D(() => {
+    W.current && (W.current.stop(), h(!1), J(), te.current = 0, v(0), H(null));
+  }, [J, H]), rt = D(
     (N) => {
       const se = Math.max(0, Math.min(N, m));
       te.current = se, v(se), W.current && W.current.seekTo(se);
     },
     [m]
-  ), Oe = B((N) => {
+  ), Oe = D((N) => {
     const se = Math.max(0.5, Math.min(2, N));
-    D(se), W.current && W.current.setPlaybackRate(se);
+    B(se), W.current && W.current.setPlaybackRate(se);
   }, []), je = r ? 30 : 0, dt = Ne(
     () => ({
       isPlaying: f,
@@ -6529,18 +6541,24 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   ), at = Ne(
     () => ({
       continuousPlay: P,
-      annotations: $,
+      annotations: M,
       activeAnnotationId: V,
-      playbackRate: M,
+      playbackRate: S,
       isAutomaticScroll: z
     }),
-    [P, $, V, M, z]
-  ), F = R(p);
+    [P, M, V, S, z]
+  ), F = E(p);
   F.current = p;
-  const xe = B(
+  const xe = D(
     (N) => {
-      const se = typeof N == "function" ? N(S.current) : N;
-      F.current?.(se);
+      const se = typeof N == "function" ? N($.current) : N;
+      if (!F.current) {
+        process.env.NODE_ENV !== "production" && console.warn(
+          "waveform-playlist: setAnnotations was called but no onAnnotationsChange callback is provided. Annotation edits will not persist. Pass onAnnotationsChange to MediaElementPlaylistProvider to handle annotation updates."
+        );
+        return;
+      }
+      F.current(se);
     },
     []
   ), be = Ne(
@@ -6550,16 +6568,16 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
       stop: Ge,
       seekTo: rt,
       setPlaybackRate: Oe,
-      setContinuousPlay: J,
+      setContinuousPlay: j,
       setAnnotations: xe,
-      setActiveAnnotationId: G,
+      setActiveAnnotationId: H,
       setAutomaticScroll: (N) => {
         ee(N);
       },
       setScrollContainer: oe,
       scrollContainerRef: ae
     }),
-    [$e, Ye, Ge, rt, Oe, J, xe, G, oe]
+    [$e, Ye, Ge, rt, Oe, j, xe, H, oe]
   ), he = Ne(
     () => ({
       duration: m,
@@ -6588,29 +6606,29 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
     ]
   ), ot = { ...Pn, ...o };
   return /* @__PURE__ */ x(Tn, { theme: ot, children: /* @__PURE__ */ x(mr.Provider, { value: dt, children: /* @__PURE__ */ x(fr.Provider, { value: at, children: /* @__PURE__ */ x(hr.Provider, { value: be, children: /* @__PURE__ */ x(pr.Provider, { value: he, children: b }) }) }) }) });
-}, jt = () => {
-  const e = De(mr);
+}, Jt = () => {
+  const e = Be(mr);
   if (!e)
     throw new Error(
       "useMediaElementAnimation must be used within MediaElementPlaylistProvider"
     );
   return e;
-}, Jt = () => {
-  const e = De(fr);
+}, Qt = () => {
+  const e = Be(fr);
   if (!e)
     throw new Error(
       "useMediaElementState must be used within MediaElementPlaylistProvider"
     );
   return e;
 }, gr = () => {
-  const e = De(hr);
+  const e = Be(hr);
   if (!e)
     throw new Error(
       "useMediaElementControls must be used within MediaElementPlaylistProvider"
     );
   return e;
-}, Qt = () => {
-  const e = De(pr);
+}, qt = () => {
+  const e = Be(pr);
   if (!e)
     throw new Error(
       "useMediaElementData must be used within MediaElementPlaylistProvider"
@@ -6727,7 +6745,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   color: ${(e) => e.theme?.textColor || "#333"};
   user-select: none;
 `, nl = ({ className: e }) => {
-  const t = R(null), n = R(null), { isPlaying: r, currentTimeRef: a, playbackStartTimeRef: s, audioStartPositionRef: o } = _e(), { timeFormat: i } = Se(), l = i;
+  const t = E(null), n = E(null), { isPlaying: r, currentTimeRef: a, playbackStartTimeRef: s, audioStartPositionRef: o } = _e(), { timeFormat: i } = Se(), l = i;
   return Q(() => {
     const c = () => {
       if (t.current) {
@@ -6761,7 +6779,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
 }, al = ({ className: e }) => {
   const { isAutomaticScroll: t } = Fe(), { setAutomaticScroll: n } = pe();
   return /* @__PURE__ */ x(
-    Ra,
+    Ea,
     {
       checked: t,
       onChange: n,
@@ -6864,7 +6882,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   color: e = "#ff0000",
   controlsOffset: t = 0
 }) => {
-  const n = R(null), r = R(null), { isPlaying: a, currentTimeRef: s, playbackStartTimeRef: o, audioStartPositionRef: i } = _e(), { samplesPerPixel: l, sampleRate: c, progressBarWidth: u } = Se();
+  const n = E(null), r = E(null), { isPlaying: a, currentTimeRef: s, playbackStartTimeRef: o, audioStartPositionRef: i } = _e(), { samplesPerPixel: l, sampleRate: c, progressBarWidth: u } = Se();
   return Q(() => {
     const g = () => {
       if (n.current) {
@@ -6919,7 +6937,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   clipDurationSamples: t,
   ...n
 }) => {
-  const r = R(null), a = R(null), s = vt(), { waveHeight: o } = bt(), { isPlaying: i, currentTimeRef: l, playbackStartTimeRef: c, audioStartPositionRef: u } = _e(), { samplesPerPixel: g, sampleRate: p } = Se(), d = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
+  const r = E(null), a = E(null), s = vt(), { waveHeight: o } = bt(), { isPlaying: i, currentTimeRef: l, playbackStartTimeRef: c, audioStartPositionRef: u } = _e(), { samplesPerPixel: g, sampleRate: p } = Se(), d = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
   Q(() => {
     const h = () => {
       if (r.current) {
@@ -7008,15 +7026,15 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
     linkEndpoints: w,
     continuousPlay: C,
     selectedTrackId: A,
-    loopStart: M,
-    loopEnd: D,
-    isLoopEnabled: $
+    loopStart: S,
+    loopEnd: B,
+    isLoopEnabled: M
   } = Fe(), {
-    setAnnotations: S,
+    setAnnotations: $,
     setActiveAnnotationId: V,
     setTrackMute: T,
     setTrackSolo: P,
-    setTrackVolume: X,
+    setTrackVolume: G,
     setTrackPan: U,
     setSelection: z,
     play: ee,
@@ -7029,79 +7047,83 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
     peaksDataArray: ae,
     trackStates: ge,
     tracks: Pe,
-    duration: G,
-    samplesPerPixel: J,
+    duration: H,
+    samplesPerPixel: j,
     sampleRate: oe,
     waveHeight: ce,
     timeScaleHeight: fe,
-    controls: j,
+    controls: J,
     playoutRef: $e,
     barWidth: Ye,
     barGap: Ge,
     isReady: rt
-  } = Se(), [Oe, je] = _(!1), dt = R(null), at = B((Z) => {
+  } = Se(), [Oe, je] = _(!1), dt = E(null), at = D((Z) => {
     dt.current = Z, W(Z);
   }, [W]);
-  let F = ne.length > 0 ? G : si;
+  let F = ne.length > 0 ? H : si;
   if (u?.isRecording) {
     const L = (u.startSample + u.durationSamples) / oe;
     F = Math.max(F, L + 10);
   }
-  const xe = Math.floor(F * oe / J), be = async (Z) => {
-    console.log("Annotation clicked:", Z.id), V(Z.id);
+  const xe = Math.floor(F * oe / j), be = async (Z) => {
+    V(Z.id);
     const L = C ? void 0 : Z.end - Z.start;
-    await ee(Z.start, L);
-  }, he = B((Z) => {
+    try {
+      await ee(Z.start, L);
+    } catch (ie) {
+      console.error("waveform-playlist: Failed to start playback for annotation", Z.id, ie);
+    }
+  }, he = D((Z) => {
     if (Z >= 0 && Z < Pe.length) {
       const L = Pe[Z];
       te(L.id);
     }
   }, [Pe, te]), ot = (Z) => {
-    const L = Z.currentTarget.getBoundingClientRect(), ie = j.show ? j.width : 0, ve = (Z.clientX - L.left - ie) * J / oe, de = Z.clientY - L.top;
-    let Xe = 0, Be = -1;
+    const L = Z.currentTarget.getBoundingClientRect(), ie = J.show ? J.width : 0, ve = (Z.clientX - L.left - ie) * j / oe, de = Z.clientY - L.top;
+    let Xe = 0, De = -1;
     for (let ze = 0; ze < ae.length; ze++) {
       const Ke = ae[ze], mt = (Ke.length > 0 ? Math.max(...Ke.map((Je) => Je.peaks.data.length)) : 1) * ce + (o ? 22 : 0);
       if (de >= Xe && de < Xe + mt) {
-        Be = ze;
+        De = ze;
         break;
       }
       Xe += mt;
     }
-    Be !== -1 && he(Be), je(!0), q(ve), z(ve, ve);
+    De !== -1 && he(De), je(!0), q(ve), z(ve, ve);
   }, N = (Z) => {
     if (!Oe) return;
-    const L = Z.currentTarget.getBoundingClientRect(), ie = j.show ? j.width : 0, ve = (Z.clientX - L.left - ie) * J / oe, Me = Math.min(f, ve), de = Math.max(f, ve);
+    const L = Z.currentTarget.getBoundingClientRect(), ie = J.show ? J.width : 0, ve = (Z.clientX - L.left - ie) * j / oe, Me = Math.min(f, ve), de = Math.max(f, ve);
     z(Me, de);
   }, se = (Z) => {
     if (!Oe) return;
     je(!1);
-    const L = Z.currentTarget.getBoundingClientRect(), ie = j.show ? j.width : 0, ve = (Z.clientX - L.left - ie) * J / oe, Me = Math.min(f, ve), de = Math.max(f, ve);
+    const L = Z.currentTarget.getBoundingClientRect(), ie = J.show ? J.width : 0, ve = (Z.clientX - L.left - ie) * j / oe, Me = Math.min(f, ve), de = Math.max(f, ve);
     Math.abs(de - Me) < 0.1 ? (q(Me), p && $e.current ? ($e.current.stop(), ee(Me)) : $e.current && $e.current.stop()) : z(Me, de);
   };
   return Pe.some((Z) => Z.clips.length > 0) && (ne.length === 0 || ae.length === 0) ? /* @__PURE__ */ x("div", { className: s, children: "Loading waveform..." }) : /* @__PURE__ */ x(Yn, { children: /* @__PURE__ */ x(
-    Rt.Provider,
+    Et.Provider,
     {
       value: {
-        samplesPerPixel: J,
+        samplesPerPixel: j,
         sampleRate: oe,
-        zoomLevels: [J],
+        zoomLevels: [j],
         waveHeight: ce,
         timeScaleHeight: fe,
         duration: F,
-        controls: j,
+        controls: J,
         barWidth: Ye,
         barGap: Ge
       },
       children: /* @__PURE__ */ x(
-        Kt,
+        Ut,
         {
           theme: g,
           backgroundColor: tt(g.waveOutlineColor),
           timescaleBackgroundColor: g.timescaleBackgroundColor,
-          scrollContainerWidth: xe + (j.show ? j.width : 0),
+          scrollContainerWidth: xe + (J.show ? J.width : 0),
           timescaleWidth: xe,
           tracksWidth: xe,
-          controlsWidth: j.show ? j.width : 0,
+          controlsWidth: J.show ? J.width : 0,
           onTracksMouseDown: ot,
           onTracksMouseMove: N,
           onTracksMouseUp: se,
@@ -7119,18 +7141,18 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                 renderTimestamp: t
               }
             ),
-            $ && /* @__PURE__ */ x(
+            M && /* @__PURE__ */ x(
               io,
               {
-                startPosition: Math.min(M, D) * oe / J,
-                endPosition: Math.max(M, D) * oe / J,
+                startPosition: Math.min(S, B) * oe / j,
+                endPosition: Math.max(S, B) * oe / j,
                 markerColor: g.loopMarkerColor,
                 regionColor: g.loopRegionColor,
                 minPosition: 0,
                 maxPosition: xe,
-                controlsOffset: j.show ? j.width : 0,
+                controlsOffset: J.show ? J.width : 0,
                 onLoopRegionChange: (Z, L) => {
-                  const ie = Z * J / oe, me = L * J / oe;
+                  const ie = Z * j / oe, me = L * j / oe;
                   le(ie, me);
                 }
               }
@@ -7146,8 +7168,8 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                 soloed: !1,
                 volume: 1,
                 pan: 0
-              }, ve = e ? e(L) : /* @__PURE__ */ re(Bo, { onClick: () => he(L), children: [
-                /* @__PURE__ */ x(Do, { style: { justifyContent: "center" }, children: me.name || `Track ${L + 1}` }),
+              }, ve = e ? e(L) : /* @__PURE__ */ re(Do, { onClick: () => he(L), children: [
+                /* @__PURE__ */ x(Bo, { style: { justifyContent: "center" }, children: me.name || `Track ${L + 1}` }),
                 /* @__PURE__ */ re(Mo, { children: [
                   /* @__PURE__ */ x(
                     pn,
@@ -7175,10 +7197,10 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                       max: "1",
                       step: "0.01",
                       value: me.volume,
-                      onChange: (de) => X(L, parseFloat(de.target.value))
+                      onChange: (de) => G(L, parseFloat(de.target.value))
                     }
                   ),
-                  /* @__PURE__ */ x(Ro, {})
+                  /* @__PURE__ */ x(Eo, {})
                 ] }),
                 /* @__PURE__ */ re(bn, { children: [
                   /* @__PURE__ */ x("span", { children: "L" }),
@@ -7195,7 +7217,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                   /* @__PURE__ */ x("span", { children: "R" })
                 ] })
               ] }), Me = Z.length > 0 ? Math.max(...Z.map((de) => de.peaks.data.length)) : 1;
-              return /* @__PURE__ */ x(Ut.Provider, { value: ve, children: /* @__PURE__ */ re(
+              return /* @__PURE__ */ x(jt.Provider, { value: ve, children: /* @__PURE__ */ re(
                 jn,
                 {
                   numChannels: Me,
@@ -7207,9 +7229,9 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                   isSelected: ie.id === A,
                   children: [
                     Z.map((de, Xe) => {
-                      const Be = de.peaks, ze = Be.length;
+                      const De = de.peaks, ze = De.length;
                       return /* @__PURE__ */ x(
-                        Xt,
+                        Gt,
                         {
                           clipId: de.clipId,
                           trackIndex: L,
@@ -7217,7 +7239,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                           trackName: de.trackName,
                           startSample: de.startSample,
                           durationSamples: de.durationSamples,
-                          samplesPerPixel: J,
+                          samplesPerPixel: j,
                           showHeader: o,
                           disableHeaderDrag: !i,
                           isSelected: ie.id === A,
@@ -7230,12 +7252,12 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                           onMouseDown: (Ke) => {
                             Ke.target.closest('[role="button"][aria-roledescription="draggable"]') || he(L);
                           },
-                          children: Be.data.map((Ke, st) => /* @__PURE__ */ x(
+                          children: De.data.map((Ke, st) => /* @__PURE__ */ x(
                             kn,
                             {
                               index: st,
                               data: Ke,
-                              bits: Be.bits,
+                              bits: De.bits,
                               length: ze,
                               isSelected: ie.id === A,
                               clipStartSample: de.startSample,
@@ -7248,7 +7270,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                       );
                     }),
                     u?.isRecording && u.trackId === ie.id && u.peaks.length > 0 && /* @__PURE__ */ x(
-                      Xt,
+                      Gt,
                       {
                         clipId: "recording-preview",
                         trackIndex: L,
@@ -7256,7 +7278,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                         trackName: "Recording...",
                         startSample: u.startSample,
                         durationSamples: u.durationSamples,
-                        samplesPerPixel: J,
+                        samplesPerPixel: j,
                         showHeader: o,
                         disableHeaderDrag: !0,
                         isSelected: ie.id === A,
@@ -7282,7 +7304,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
               ) }, ie.id);
             }),
             I.length > 0 && /* @__PURE__ */ x(rr, { height: 30, width: xe, children: I.map((Z, L) => {
-              const ie = Z.start * oe / J, me = Z.end * oe / J, ve = a ? a(Z, L) : Z.id;
+              const ie = Z.start * oe / j, me = Z.end * oe / j, ve = a ? a(Z, L) : Z.id;
               return /* @__PURE__ */ x(
                 nr,
                 {
@@ -7302,27 +7324,27 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
             f !== h && /* @__PURE__ */ x(
               Gn,
               {
-                startPosition: Math.min(f, h) * oe / J + (j.show ? j.width : 0),
-                endPosition: Math.max(f, h) * oe / J + (j.show ? j.width : 0),
+                startPosition: Math.min(f, h) * oe / j + (J.show ? J.width : 0),
+                endPosition: Math.max(f, h) * oe / j + (J.show ? J.width : 0),
                 color: g.selectionColor
               }
             ),
             (p || f === h) && (n ? n({
-              position: (d.current ?? 0) * oe / J + (j.show ? j.width : 0),
+              position: (d.current ?? 0) * oe / j + (J.show ? J.width : 0),
               color: g.playheadColor,
               isPlaying: p,
               currentTimeRef: d,
               playbackStartTimeRef: b,
               audioStartPositionRef: y,
-              samplesPerPixel: J,
+              samplesPerPixel: j,
               sampleRate: oe,
-              controlsOffset: j.show ? j.width : 0,
+              controlsOffset: J.show ? J.width : 0,
               getAudioContextTime: () => Ae().currentTime
             }) : /* @__PURE__ */ x(
               ti,
               {
                 color: g.playheadColor,
-                controlsOffset: j.show ? j.width : 0
+                controlsOffset: J.show ? J.width : 0
               }
             ))
           ] })
@@ -7345,7 +7367,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
     annotationsEditable: c,
     linkEndpoints: u,
     continuousPlay: g
-  } = Fe(), { setAnnotations: p } = pe(), d = a ?? { linkEndpoints: u, continuousPlay: g }, b = B((y) => {
+  } = Fe(), { setAnnotations: p } = pe(), d = a ?? { linkEndpoints: u, continuousPlay: g }, b = D((y) => {
     p(y), n?.(y);
   }, [p, n]);
   return /* @__PURE__ */ x(
@@ -7426,7 +7448,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   color: e = "#ff0000",
   controlsOffset: t = 0
 }) => {
-  const n = R(null), r = R(null), { isPlaying: a, currentTimeRef: s } = jt(), { samplesPerPixel: o, sampleRate: i, progressBarWidth: l } = Qt();
+  const n = E(null), r = E(null), { isPlaying: a, currentTimeRef: s } = Jt(), { samplesPerPixel: o, sampleRate: i, progressBarWidth: l } = qt();
   return Q(() => {
     const c = () => {
       if (n.current) {
@@ -7474,7 +7496,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   clipDurationSamples: t,
   ...n
 }) => {
-  const r = R(null), a = R(null), s = vt(), { waveHeight: o } = bt(), { isPlaying: i, currentTimeRef: l } = jt(), { samplesPerPixel: c, sampleRate: u } = Qt(), g = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
+  const r = E(null), a = E(null), s = vt(), { waveHeight: o } = bt(), { isPlaying: i, currentTimeRef: l } = Jt(), { samplesPerPixel: c, sampleRate: u } = qt(), g = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
   Q(() => {
     const y = () => {
       if (r.current) {
@@ -7542,7 +7564,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   onAnnotationUpdate: r,
   className: a
 }) => {
-  const s = vt(), { isPlaying: o, currentTimeRef: i } = jt(), { annotations: l, activeAnnotationId: c } = Jt(), { play: u, seekTo: g, setActiveAnnotationId: p, setAnnotations: d, setScrollContainer: b } = gr(), {
+  const s = vt(), { isPlaying: o, currentTimeRef: i } = Jt(), { annotations: l, activeAnnotationId: c } = Qt(), { play: u, seekTo: g, setActiveAnnotationId: p, setAnnotations: d, setScrollContainer: b } = gr(), {
     duration: y,
     peaksDataArray: f,
     sampleRate: h,
@@ -7552,13 +7574,18 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
     controls: w,
     playoutRef: C,
     barWidth: A,
-    barGap: M
-  } = Qt(), [D, $] = _(0), [S, V] = _(0), [T, P] = _(!1), X = R(null), U = B((G) => {
-    X.current = G, b(G);
-  }, [b]), z = Math.floor(y * h / m), ee = B(async (G) => {
-    p(G.id), u(G.start);
-  }, [p, u]), W = B((G) => {
-    d(G), r?.(G);
+    barGap: S
+  } = qt(), [B, M] = _(0), [$, V] = _(0), [T, P] = _(!1), G = E(null), U = D((H) => {
+    G.current = H, b(H);
+  }, [b]), z = Math.floor(y * h / m), ee = D(async (H) => {
+    p(H.id);
+    try {
+      await u(H.start);
+    } catch (j) {
+      console.error("waveform-playlist: Failed to start playback for annotation", H.id, j);
+    }
+  }, [p, u]), W = D((H) => {
+    d(H), r?.(H);
   }, [d, r]), { onDragStart: te, onDragMove: q, onDragEnd: le } = Ms({
     annotations: l,
     onAnnotationsChange: W,
@@ -7566,24 +7593,24 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
     sampleRate: h,
     duration: y,
     linkEndpoints: n
-  }), ne = B((G) => {
-    const J = G.currentTarget.getBoundingClientRect(), oe = w.show ? w.width : 0, fe = (G.clientX - J.left - oe) * m / h;
-    P(!0), $(fe), V(fe);
-  }, [w, m, h]), ae = B((G) => {
+  }), ne = D((H) => {
+    const j = H.currentTarget.getBoundingClientRect(), oe = w.show ? w.width : 0, fe = (H.clientX - j.left - oe) * m / h;
+    P(!0), M(fe), V(fe);
+  }, [w, m, h]), ae = D((H) => {
     if (!T) return;
-    const J = G.currentTarget.getBoundingClientRect(), oe = w.show ? w.width : 0, fe = (G.clientX - J.left - oe) * m / h;
+    const j = H.currentTarget.getBoundingClientRect(), oe = w.show ? w.width : 0, fe = (H.clientX - j.left - oe) * m / h;
     V(fe);
-  }, [T, w, m, h]), ge = B((G) => {
+  }, [T, w, m, h]), ge = D((H) => {
     if (!T) return;
     P(!1);
-    const J = G.currentTarget.getBoundingClientRect(), oe = w.show ? w.width : 0, fe = (G.clientX - J.left - oe) * m / h, j = Math.min(D, fe), $e = Math.max(D, fe);
-    Math.abs($e - j) < 0.1 ? (g(j), $(j), V(j), o && C.current && (C.current.stop(), u(j))) : ($(j), V($e));
-  }, [T, D, m, h, w, g, o, C, u]);
+    const j = H.currentTarget.getBoundingClientRect(), oe = w.show ? w.width : 0, fe = (H.clientX - j.left - oe) * m / h, J = Math.min(B, fe), $e = Math.max(B, fe);
+    Math.abs($e - J) < 0.1 ? (g(J), M(J), V(J), o && C.current && (C.current.stop(), u(J))) : (M(J), V($e));
+  }, [T, B, m, h, w, g, o, C, u]);
   if (f.length === 0)
     return /* @__PURE__ */ x("div", { className: a, children: "Loading waveform..." });
   const Pe = null;
   return /* @__PURE__ */ x(Yn, { children: /* @__PURE__ */ x(
-    Rt.Provider,
+    Et.Provider,
     {
       value: {
         samplesPerPixel: m,
@@ -7594,10 +7621,10 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
         duration: y,
         controls: w,
         barWidth: A,
-        barGap: M
+        barGap: S
       },
       children: /* @__PURE__ */ x(
-        Kt,
+        Ut,
         {
           theme: s,
           backgroundColor: tt(s.waveOutlineColor),
@@ -7621,9 +7648,9 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
             }
           ) : void 0,
           children: /* @__PURE__ */ re(Le, { children: [
-            f.map((G, J) => {
-              const oe = G.length > 0 ? Math.max(...G.map((ce) => ce.peaks.data.length)) : 1;
-              return /* @__PURE__ */ x(Ut.Provider, { value: Pe, children: /* @__PURE__ */ x(
+            f.map((H, j) => {
+              const oe = H.length > 0 ? Math.max(...H.map((ce) => ce.peaks.data.length)) : 1;
+              return /* @__PURE__ */ x(jt.Provider, { value: Pe, children: /* @__PURE__ */ x(
                 jn,
                 {
                   numChannels: oe,
@@ -7631,15 +7658,15 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                   offset: 0,
                   width: z,
                   hasClipHeaders: !1,
-                  trackId: `media-element-track-${J}`,
+                  trackId: `media-element-track-${j}`,
                   isSelected: !0,
-                  children: G.map((ce, fe) => {
-                    const j = ce.peaks, $e = j.length;
+                  children: H.map((ce, fe) => {
+                    const J = ce.peaks, $e = J.length;
                     return /* @__PURE__ */ x(
-                      Xt,
+                      Gt,
                       {
                         clipId: ce.clipId,
-                        trackIndex: J,
+                        trackIndex: j,
                         clipIndex: fe,
                         trackName: ce.trackName,
                         startSample: ce.startSample,
@@ -7648,25 +7675,25 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                         showHeader: !1,
                         disableHeaderDrag: !0,
                         isSelected: !0,
-                        trackId: `media-element-track-${J}`,
-                        children: j.data.map((Ye, Ge) => /* @__PURE__ */ x(
+                        trackId: `media-element-track-${j}`,
+                        children: J.data.map((Ye, Ge) => /* @__PURE__ */ x(
                           pi,
                           {
                             index: Ge,
                             data: Ye,
-                            bits: j.bits,
+                            bits: J.bits,
                             length: $e,
                             clipStartSample: ce.startSample,
                             clipDurationSamples: ce.durationSamples
                           },
-                          `${J}-${fe}-${Ge}`
+                          `${j}-${fe}-${Ge}`
                         ))
                       },
-                      `${J}-${fe}`
+                      `${j}-${fe}`
                     );
                   })
                 }
-              ) }, J);
+              ) }, j);
             }),
             l.length > 0 && /* @__PURE__ */ x(
               ya,
@@ -7675,31 +7702,31 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
                 onDragMove: q,
                 onDragEnd: le,
                 modifiers: t ? [Ca] : [],
-                children: /* @__PURE__ */ x(rr, { height: 30, width: z, children: l.map((G, J) => {
-                  const oe = G.start * h / m, ce = G.end * h / m, fe = e ? e(G, J) : G.id;
+                children: /* @__PURE__ */ x(rr, { height: 30, width: z, children: l.map((H, j) => {
+                  const oe = H.start * h / m, ce = H.end * h / m, fe = e ? e(H, j) : H.id;
                   return /* @__PURE__ */ x(
                     nr,
                     {
-                      annotationId: G.id,
-                      annotationIndex: J,
+                      annotationId: H.id,
+                      annotationIndex: j,
                       startPosition: oe,
                       endPosition: ce,
                       label: fe,
                       color: "#ff9800",
-                      isActive: G.id === c,
-                      onClick: () => ee(G),
+                      isActive: H.id === c,
+                      onClick: () => ee(H),
                       editable: t
                     },
-                    G.id
+                    H.id
                   );
                 }) })
               }
             ),
-            D !== S && /* @__PURE__ */ x(
+            B !== $ && /* @__PURE__ */ x(
               Gn,
               {
-                startPosition: Math.min(D, S) * h / m + (w.show ? w.width : 0),
-                endPosition: Math.max(D, S) * h / m + (w.show ? w.width : 0),
+                startPosition: Math.min(B, $) * h / m + (w.show ? w.width : 0),
+                endPosition: Math.max(B, $) * h / m + (w.show ? w.width : 0),
                 color: s.selectionColor
               }
             ),
@@ -7720,12 +7747,12 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   renderAnnotationItem: t,
   onAnnotationUpdate: n,
   editable: r = !1,
-  linkEndpoints: a = !1,
-  continuousPlay: s,
+  controls: a,
+  annotationListConfig: s,
   scrollActivePosition: o = "center",
   scrollActiveContainer: i = "nearest"
 }) => {
-  const { annotations: l, activeAnnotationId: c, continuousPlay: u } = Jt(), { setAnnotations: g } = gr(), p = s ?? u, d = B((b) => {
+  const { annotations: l, activeAnnotationId: c, continuousPlay: u } = Qt(), { setAnnotations: g } = gr(), p = s ?? { linkEndpoints: !1, continuousPlay: u }, d = D((b) => {
     g(b), n?.(b);
   }, [g, n]);
   return /* @__PURE__ */ x(
@@ -7737,7 +7764,8 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
       scrollActivePosition: o,
       scrollActiveContainer: i,
       editable: r,
-      annotationListConfig: { linkEndpoints: a, continuousPlay: p },
+      controls: r ? a : void 0,
+      annotationListConfig: p,
       height: e,
       onAnnotationUpdate: d,
       renderAnnotationItem: t
@@ -7754,7 +7782,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
   scrollActiveContainer: i = "nearest",
   className: l
 }) => {
-  const { annotations: c } = Jt();
+  const { annotations: c } = Qt();
   return /* @__PURE__ */ re(Le, { children: [
     /* @__PURE__ */ x(
       gi,
@@ -7773,7 +7801,7 @@ const mr = ke(null), fr = ke(null), hr = ke(null), pr = ke(null), Xi = ({
         renderAnnotationItem: n,
         onAnnotationUpdate: s,
         editable: r,
-        linkEndpoints: a,
+        annotationListConfig: { linkEndpoints: a, continuousPlay: !1 },
         scrollActivePosition: o,
         scrollActiveContainer: i
       }
@@ -7822,23 +7850,23 @@ export {
   Ai as loadPeaksFromWaveformData,
   qn as loadWaveformData,
   Ms as useAnnotationDragHandlers,
-  Ei as useAnnotationKeyboardControls,
+  Ri as useAnnotationKeyboardControls,
   $i as useAudioTracks,
   Mi as useClipDragHandlers,
-  Di as useClipSplitting,
-  Bi as useDragSensors,
+  Bi as useClipSplitting,
+  Di as useDragSensors,
   Vi as useDynamicEffects,
   Os as useExportWav,
   Wi as useIntegratedRecording,
-  Nt as useKeyboardShortcuts,
+  Lt as useKeyboardShortcuts,
   Si as useMasterAnalyser,
   ks as useMasterVolume,
-  jt as useMediaElementAnimation,
+  Jt as useMediaElementAnimation,
   gr as useMediaElementControls,
-  Qt as useMediaElementData,
-  Jt as useMediaElementState,
+  qt as useMediaElementData,
+  Qt as useMediaElementState,
   _e as usePlaybackAnimation,
-  Ri as usePlaybackShortcuts,
+  Ei as usePlaybackShortcuts,
   pe as usePlaylistControls,
   Se as usePlaylistData,
   Fe as usePlaylistState,