@waveform-playlist/browser 5.3.0 → 5.3.2

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import * as Jr from "tone";
 import { Volume as zn, getDestination as Hn, start as Xn, now as Wt, getTransport as pt, getContext as Me, Context as qr, setContext as Qr, Panner as ea, Gain as gn, Player as bn, Analyser as Ln, Meter as ta, connect as na, StereoWidener as ra, Gate as aa, Limiter as oa, Compressor as sa, Chebyshev as ia, BitCrusher as la, Distortion as ca, EQ3 as ua, AutoWah as da, AutoFilter as ma, AutoPanner as fa, Vibrato as ha, Tremolo as pa, Phaser as ga, Chorus as ba, PingPongDelay as va, FeedbackDelay as wa, JCReverb as ya, Freeverb as Ca, Reverb as xa } from "tone";
-import { jsx as C, jsxs as ne, Fragment as je } from "react/jsx-runtime";
+import { jsx as C, jsxs as te, Fragment as qe } from "react/jsx-runtime";
 import * as T from "react";
-import _e, { createContext as Ee, useContext as De, useState as _, useEffect as Q, Fragment as Ia, useRef as W, useLayoutEffect as tn, useCallback as D, useMemo as Ue } from "react";
-import $, { ThemeContext as Aa, withTheme as Gn, useTheme as ka, ThemeProvider as Nn } from "styled-components";
+import We, { createContext as Ee, useContext as De, useState as Z, useEffect as ee, Fragment as Ia, useRef as R, useLayoutEffect as tn, useCallback as D, useMemo as Je } from "react";
+import M, { ThemeContext as Aa, withTheme as Gn, useTheme as ka, ThemeProvider as Nn } from "styled-components";
 import { useDraggable as It, useSensor as Yt, MouseSensor as Sa, TouchSensor as $a, PointerSensor as Ma, useSensors as Ea, DndContext as Da } from "@dnd-kit/core";
 import { createPortal as Yn } from "react-dom";
 import { restrictToHorizontalAxis as Ta } from "@dnd-kit/modifiers";
@@ -586,14 +586,14 @@ jn.displayName = "SpeakerLowIcon";
 const Jn = T.forwardRef((e, t) => /* @__PURE__ */ T.createElement(At, { ref: t, ...e, weights: Ha }));
 Jn.displayName = "XIcon";
 const La = Jn;
-$.span`
+M.span`
   font-family: 'Courier New', Monaco, monospace;
   font-size: 1rem;
   font-weight: 600;
   color: ${(e) => e.theme?.textColor || "#333"};
   user-select: none;
 `;
-var nn = $.button`
+var nn = M.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -623,40 +623,40 @@ var nn = $.button`
     cursor: not-allowed;
   }
 `;
-$(nn)`
+M(nn)`
   padding: 0.25rem 0.5rem;
   font-size: ${(e) => e.theme.fontSizeSmall};
 `;
-$(nn)`
+M(nn)`
   padding: 0.5rem;
   min-width: 2.25rem;
   min-height: 2.25rem;
 `;
-$(nn)`
+M(nn)`
   padding: 0.25rem;
   min-width: 1.75rem;
   min-height: 1.75rem;
   font-size: ${(e) => e.theme.fontSizeSmall};
 `;
-var Vt = $.div`
+var Vt = M.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-`, Pt = $.input`
+`, Pt = M.input`
   cursor: pointer;
   accent-color: ${(e) => e.theme.inputFocusBorder};
 
   &:disabled {
     cursor: not-allowed;
   }
-`, zt = $.label`
+`, zt = M.label`
   margin: 0;
   cursor: pointer;
   user-select: none;
   font-family: ${(e) => e.theme.fontFamily};
   font-size: ${(e) => e.theme.fontSize};
   color: ${(e) => e.theme.textColor};
-`, Ye = $.button`
+`, Ye = M.button`
   padding: 0.5rem 1rem;
   background: ${(e) => e.theme.buttonBackground || "#007bff"};
   color: ${(e) => e.theme.buttonText || "white"};
@@ -682,7 +682,7 @@ var Vt = $.div`
     cursor: not-allowed;
     opacity: 0.6;
   }
-`, qn = $.input`
+`, qn = M.input`
   padding: 0.5rem 0.75rem;
   font-family: ${(e) => e.theme.fontFamily};
   font-size: ${(e) => e.theme.fontSize};
@@ -707,11 +707,11 @@ var Vt = $.div`
     cursor: not-allowed;
   }
 `;
-$(qn)`
+M(qn)`
   padding: 0.25rem 0.5rem;
   font-size: ${(e) => e.theme.fontSizeSmall};
 `;
-var Qn = $.label`
+var Qn = M.label`
   font-family: ${(e) => e.theme.fontFamily};
   font-size: ${(e) => e.theme.fontSizeSmall};
   font-weight: 500;
@@ -719,7 +719,7 @@ var Qn = $.label`
   margin-bottom: 0.25rem;
   display: block;
 `;
-$.label`
+M.label`
   font-family: ${(e) => e.theme.fontFamily};
   font-size: ${(e) => e.theme.fontSize};
   color: ${(e) => e.theme.textColor};
@@ -728,7 +728,7 @@ $.label`
   gap: 0.5rem;
   cursor: pointer;
 `;
-var Ga = $.span`
+var Ga = M.span`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -738,7 +738,7 @@ var Ga = $.span`
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-`, rn = $.select`
+`, rn = M.select`
   padding: 0.5rem 2rem 0.5rem 0.75rem;
   font-family: ${(e) => e.theme.fontFamily};
   font-size: ${(e) => e.theme.fontSize};
@@ -770,11 +770,11 @@ var Ga = $.span`
     background-color: ${(e) => e.theme.inputBackground};
   }
 `;
-$(rn)`
+M(rn)`
   padding: 0.25rem 1.75rem 0.25rem 0.5rem;
   font-size: ${(e) => e.theme.fontSizeSmall};
 `;
-var er = $.input.attrs({ type: "range" })`
+var er = M.input.attrs({ type: "range" })`
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
@@ -855,7 +855,7 @@ var er = $.input.attrs({ type: "range" })`
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ ne(Vt, { className: r, children: [
+}) => /* @__PURE__ */ te(Vt, { className: r, children: [
   /* @__PURE__ */ C(
     Pt,
     {
@@ -874,7 +874,7 @@ var er = $.input.attrs({ type: "range" })`
 function tr(e) {
   return typeof e == "object" && e !== null && "type" in e;
 }
-function it(e) {
+function lt(e) {
   if (!tr(e))
     return e;
   const t = e.direction === "vertical" ? "to bottom" : "to right", n = e.stops.map((r) => `${r.color} ${r.offset * 100}%`).join(", ");
@@ -956,7 +956,7 @@ function Oa(e, t, n, r) {
     a.addColorStop(s.offset, s.color);
   return a;
 }
-var Ka = $.canvas.attrs((e) => ({
+var Ka = M.canvas.attrs((e) => ({
   style: {
     width: `${e.$cssWidth}px`,
     height: `${e.$waveHeight}px`
@@ -969,7 +969,7 @@ var Ka = $.canvas.attrs((e) => ({
   /* Disable image rendering interpolation */
   image-rendering: pixelated;
   image-rendering: crisp-edges;
-`, Ua = $.div.attrs((e) => ({
+`, Ua = M.div.attrs((e) => ({
   style: {
     top: `${e.$waveHeight * e.$index}px`,
     width: `${e.$cssWidth}px`,
@@ -996,7 +996,7 @@ var Ka = $.canvas.attrs((e) => ({
     barGap: g = 0,
     transparentBackground: f = !1,
     drawMode: d = "inverted"
-  } = e, b = W([]), v = D(
+  } = e, b = R([]), v = D(
     (y) => {
       if (y !== null) {
         const x = parseInt(y.dataset.index, 10);
@@ -1009,25 +1009,25 @@ var Ka = $.canvas.attrs((e) => ({
     const y = b.current, x = u + g;
     let k = 0;
     for (let A = 0; A < y.length; A++) {
-      const E = y[A], M = E.getContext("2d"), S = Math.floor(i / 2), Z = 2 ** (n - 1);
-      if (M) {
-        M.resetTransform(), M.clearRect(0, 0, E.width, E.height), M.imageSmoothingEnabled = !1, M.scale(o, o);
+      const E = y[A], S = E.getContext("2d"), $ = Math.floor(i / 2), _ = 2 ** (n - 1);
+      if (S) {
+        S.resetTransform(), S.clearRect(0, 0, E.width, E.height), S.imageSmoothingEnabled = !1, S.scale(o, o);
         const B = E.width / o;
         let P;
-        d === "normal" ? P = c : P = l, M.fillStyle = Oa(
-          M,
+        d === "normal" ? P = c : P = l, S.fillStyle = Oa(
+          S,
           P,
           B,
           i
         );
-        const L = k, K = k + B, H = Math.floor((L - u + x) / x) * x;
-        for (let G = Math.max(0, H); G < K; G += x) {
-          const R = G - L;
-          if (R + u <= 0) continue;
-          const ee = G;
-          if (ee * 2 + 1 < t.length) {
-            const J = t[ee * 2] / Z, ue = t[ee * 2 + 1] / Z, ae = Math.abs(J * S), te = Math.abs(ue * S);
-            d === "normal" ? M.fillRect(R, S - te, u, te + ae) : (M.fillRect(R, 0, u, S - te), M.fillRect(R, S + ae, u, S - ae));
+        const H = k, K = k + B, X = Math.floor((H - u + x) / x) * x;
+        for (let U = Math.max(0, X); U < K; U += x) {
+          const W = U - H;
+          if (W + u <= 0) continue;
+          const Y = U;
+          if (Y * 2 + 1 < t.length) {
+            const j = t[Y * 2] / _, ue = t[Y * 2 + 1] / _, ae = Math.abs(j * $), se = Math.abs(ue * $);
+            d === "normal" ? S.fillRect(W, $ - se, u, se + ae) : (S.fillRect(W, 0, u, $ - se), S.fillRect(W, $ + ae, u, $ - ae));
           }
         }
       }
@@ -1062,7 +1062,7 @@ var Ka = $.canvas.attrs((e) => ({
     );
     I.push(x), p -= y, h += 1;
   }
-  const m = f ? "transparent" : it(c);
+  const m = f ? "transparent" : lt(c);
   return /* @__PURE__ */ C(
     Ua,
     {
@@ -1074,7 +1074,7 @@ var Ka = $.canvas.attrs((e) => ({
       children: I
     }
   );
-}, rr = 22, ar = $.div`
+}, rr = 22, ar = M.div`
   position: relative;
   height: ${rr}px;
   background: ${(e) => e.$isSelected ? e.theme.selectedClipHeaderBackgroundColor : e.theme.clipHeaderBackgroundColor};
@@ -1098,7 +1098,7 @@ var Ka = $.canvas.attrs((e) => ({
       cursor: grabbing;
     }
   `}
-`, or = $.span`
+`, or = M.span`
   font-size: 11px;
   font-weight: 600;
   font-family: ${(e) => e.theme.clipHeaderFontFamily};
@@ -1147,7 +1147,7 @@ var Ka = $.canvas.attrs((e) => ({
       children: /* @__PURE__ */ C(or, { children: r })
     }
   );
-}, qa = 8, Qa = 24, eo = $.div`
+}, qa = 8, Qa = 24, eo = M.div`
   position: absolute;
   ${(e) => e.$edge === "left" ? "left: 0;" : "right: 0;"}
   top: 0;
@@ -1183,7 +1183,7 @@ var Ka = $.canvas.attrs((e) => ({
   dragHandleProps: a,
   touchOptimized: s = !1
 }) => {
-  const [o, i] = _e.useState(!1);
+  const [o, i] = We.useState(!1);
   if (!a)
     return null;
   const { attributes: l, listeners: c, setActivatorNodeRef: u, isDragging: g } = a;
@@ -1203,7 +1203,7 @@ var Ka = $.canvas.attrs((e) => ({
       ...l
     }
   );
-}, to = $.div.attrs((e) => ({
+}, to = M.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`,
     width: `${e.$width}px`
@@ -1214,7 +1214,7 @@ var Ka = $.canvas.attrs((e) => ({
   bottom: 0;
   pointer-events: none;
   z-index: 50;
-`, no = $.svg`
+`, no = M.svg`
   width: 100%;
   height: 100%;
   display: block;
@@ -1263,7 +1263,7 @@ var In = ({
       fill: o
     }
   ) }) });
-}, ao = $.div.attrs((e) => ({
+}, ao = M.div.attrs((e) => ({
   style: e.$isOverlay ? {} : {
     left: `${e.$left}px`,
     width: `${e.$width}px`
@@ -1282,7 +1282,7 @@ var In = ({
   &:hover {
     background: rgba(255, 255, 255, 0.08);
   }
-`, oo = $.div`
+`, oo = M.div`
   flex: 1;
   position: relative;
   overflow: ${(e) => e.$isOverlay ? "visible" : "hidden"};
@@ -1308,26 +1308,26 @@ var In = ({
   showFades: I = !1,
   touchOptimized: w = !1
 }) => {
-  const m = Math.floor(o / l), x = Math.floor((o + i) / l) - m, k = c && !u && !g, A = `clip-${r}-${a}`, { attributes: E, listeners: M, setNodeRef: S, setActivatorNodeRef: Z, transform: B, isDragging: P } = It({
+  const m = Math.floor(o / l), x = Math.floor((o + i) / l) - m, k = c && !u && !g, A = `clip-${r}-${a}`, { attributes: E, listeners: S, setNodeRef: $, setActivatorNodeRef: _, transform: B, isDragging: P } = It({
     id: A,
     data: { clipId: n, trackIndex: r, clipIndex: a },
     disabled: !k
-  }), L = `clip-boundary-left-${r}-${a}`, {
+  }), H = `clip-boundary-left-${r}-${a}`, {
     attributes: K,
-    listeners: H,
-    setActivatorNodeRef: G,
-    isDragging: R
+    listeners: X,
+    setActivatorNodeRef: U,
+    isDragging: W
   } = It({
-    id: L,
+    id: H,
     data: { clipId: n, trackIndex: r, clipIndex: a, boundary: "left" },
     disabled: !k
-  }), ee = `clip-boundary-right-${r}-${a}`, {
-    attributes: J,
+  }), Y = `clip-boundary-right-${r}-${a}`, {
+    attributes: j,
     listeners: ue,
     setActivatorNodeRef: ae,
-    isDragging: te
+    isDragging: se
   } = It({
-    id: ee,
+    id: Y,
     data: { clipId: n, trackIndex: r, clipIndex: a, boundary: "right" },
     disabled: !k
   }), de = B ? {
@@ -1335,10 +1335,10 @@ var In = ({
     zIndex: P ? 100 : void 0
     // Below controls (z-index: 999) but above other clips
   } : void 0;
-  return /* @__PURE__ */ ne(
+  return /* @__PURE__ */ te(
     ao,
     {
-      ref: S,
+      ref: $,
       style: de,
       className: t,
       $left: m,
@@ -1357,10 +1357,10 @@ var In = ({
             trackName: s,
             isSelected: f,
             disableDrag: u,
-            dragHandleProps: k ? { attributes: E, listeners: M, setActivatorNodeRef: Z } : void 0
+            dragHandleProps: k ? { attributes: E, listeners: S, setActivatorNodeRef: _ } : void 0
           }
         ),
-        /* @__PURE__ */ ne(oo, { $isOverlay: g, children: [
+        /* @__PURE__ */ te(oo, { $isOverlay: g, children: [
           e,
           I && v && v.duration > 0 && /* @__PURE__ */ C(
             In,
@@ -1381,7 +1381,7 @@ var In = ({
             }
           )
         ] }),
-        c && !u && !g && /* @__PURE__ */ ne(je, { children: [
+        c && !u && !g && /* @__PURE__ */ te(qe, { children: [
           /* @__PURE__ */ C(
             xn,
             {
@@ -1392,9 +1392,9 @@ var In = ({
               touchOptimized: w,
               dragHandleProps: {
                 attributes: K,
-                listeners: H,
-                setActivatorNodeRef: G,
-                isDragging: R
+                listeners: X,
+                setActivatorNodeRef: U,
+                isDragging: W
               }
             }
           ),
@@ -1407,10 +1407,10 @@ var In = ({
               edge: "right",
               touchOptimized: w,
               dragHandleProps: {
-                attributes: J,
+                attributes: j,
                 listeners: ue,
                 setActivatorNodeRef: ae,
-                isDragging: te
+                isDragging: se
               }
             }
           )
@@ -1418,14 +1418,14 @@ var In = ({
       ]
     }
   );
-}, so = $.div`
+}, so = M.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-`, io = $(Qn)`
+`, io = M(Qn)`
   margin: 0;
   white-space: nowrap;
-`, lo = $(er)`
+`, lo = M(er)`
   width: 120px;
 `, co = ({
   volume: e,
@@ -1436,7 +1436,7 @@ var In = ({
   const a = (s) => {
     t(parseFloat(s.target.value) / 100);
   };
-  return /* @__PURE__ */ ne(so, { className: r, children: [
+  return /* @__PURE__ */ te(so, { className: r, children: [
     /* @__PURE__ */ C(io, { htmlFor: "master-gain", children: "Master Volume" }),
     /* @__PURE__ */ C(
       lo,
@@ -1451,7 +1451,7 @@ var In = ({
     )
   ] });
 };
-$.div.attrs((e) => ({
+M.div.attrs((e) => ({
   style: {
     transform: `translate3d(${e.$position}px, 0, 0)`
   }
@@ -1466,7 +1466,7 @@ $.div.attrs((e) => ({
   pointer-events: none;
   will-change: transform;
 `;
-$.div`
+M.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1475,7 +1475,7 @@ $.div`
   pointer-events: none;
   will-change: transform;
 `;
-$.div`
+M.div`
   position: absolute;
   top: -10px;
   left: -6px;
@@ -1485,7 +1485,7 @@ $.div`
   border-right: 7px solid transparent;
   border-top: 10px solid ${(e) => e.$color};
 `;
-$.div`
+M.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1493,29 +1493,29 @@ $.div`
   height: 100%;
   background: ${(e) => e.$color};
 `;
-var uo = $.div`
+var uo = M.div`
   overflow-y: hidden;
   overflow-x: auto;
   position: relative;
-`, mo = $.div.attrs((e) => ({
+`, mo = M.div.attrs((e) => ({
   style: e.$width !== void 0 ? { width: `${e.$width}px` } : {}
 }))`
   position: relative;
   background: ${(e) => e.$backgroundColor || "transparent"};
-`, fo = $.div.attrs((e) => ({
+`, fo = M.div.attrs((e) => ({
   style: e.$width ? { minWidth: `${e.$width}px` } : {}
 }))`
   background: ${(e) => e.$backgroundColor || "white"};
   width: 100%;
   position: relative;
   overflow: hidden; /* Constrain loop region to timescale area */
-`, ho = $.div.attrs((e) => ({
+`, ho = M.div.attrs((e) => ({
   style: e.$width !== void 0 ? { minWidth: `${e.$width}px` } : {}
 }))`
   position: relative;
   background: ${(e) => e.$backgroundColor || "transparent"};
   width: 100%;
-`, po = $.div`
+`, po = M.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1540,14 +1540,14 @@ var uo = $.div`
   scrollContainerRef: f,
   isSelecting: d,
   "data-playlist-state": b
-}) => /* @__PURE__ */ C(uo, { "data-scroll-container": "true", "data-playlist-state": b, ref: f, children: /* @__PURE__ */ ne(
+}) => /* @__PURE__ */ C(uo, { "data-scroll-container": "true", "data-playlist-state": b, ref: f, children: /* @__PURE__ */ te(
   mo,
   {
     $backgroundColor: t,
     $width: o,
     children: [
       r && /* @__PURE__ */ C(fo, { $width: a, $backgroundColor: n, children: r }),
-      /* @__PURE__ */ ne(ho, { $width: s, $backgroundColor: t, children: [
+      /* @__PURE__ */ te(ho, { $width: s, $backgroundColor: t, children: [
         e,
         (l || c) && /* @__PURE__ */ C(
           po,
@@ -1565,7 +1565,7 @@ var uo = $.div`
   }
 ) });
 Gn(an);
-var go = $.div.attrs((e) => ({
+var go = M.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`,
     width: `${e.$width}px`
@@ -1586,7 +1586,7 @@ var go = $.div.attrs((e) => ({
   const r = Math.max(0, t - e);
   return r <= 0 ? null : /* @__PURE__ */ C(go, { $left: e, $width: r, $color: n, "data-selection": !0 });
 };
-$.div.attrs((e) => ({
+M.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`,
     width: `${e.$width}px`
@@ -1599,7 +1599,7 @@ $.div.attrs((e) => ({
   z-index: 55; /* Between clips (z-index: 50) and selection (z-index: 60) */
   pointer-events: none;
 `;
-$.div.attrs((e) => ({
+M.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`
   }
@@ -1624,7 +1624,7 @@ $.div.attrs((e) => ({
     ${(e) => e.$isStart ? "border-right: 8px solid transparent;" : "border-left: 8px solid transparent;"}
   }
 `;
-var An = $.div.attrs((e) => ({
+var An = M.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`
   }
@@ -1665,7 +1665,7 @@ var An = $.div.attrs((e) => ({
   &:hover::before {
     opacity: 1;
   }
-`, bo = $.div.attrs((e) => ({
+`, bo = M.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`,
     width: `${e.$width}px`
@@ -1692,7 +1692,7 @@ var An = $.div.attrs((e) => ({
   minPosition: i = 0,
   maxPosition: l = 1 / 0
 }) => {
-  const [c, u] = _(null), g = W(0), f = W(0), d = W(0), b = Math.max(0, t - e), v = D((h, I) => {
+  const [c, u] = Z(null), g = R(0), f = R(0), d = R(0), b = Math.max(0, t - e), v = D((h, I) => {
     h.preventDefault(), h.stopPropagation(), u(I), g.current = h.clientX, f.current = I === "start" ? e : t;
     const w = (y) => {
       const x = y.clientX - g.current, k = f.current + x;
@@ -1718,7 +1718,7 @@ var An = $.div.attrs((e) => ({
     };
     document.addEventListener("mousemove", w), document.addEventListener("mouseup", m);
   }, [e, t, i, l, o]);
-  return b <= 0 ? null : /* @__PURE__ */ ne(je, { children: [
+  return b <= 0 ? null : /* @__PURE__ */ te(qe, { children: [
     /* @__PURE__ */ C(
       bo,
       {
@@ -1753,7 +1753,7 @@ var An = $.div.attrs((e) => ({
       }
     )
   ] });
-}, wo = $.div.attrs((e) => ({
+}, wo = M.div.attrs((e) => ({
   style: {
     left: `${e.$leftOffset || 0}px`
   }
@@ -1774,7 +1774,7 @@ var An = $.div.attrs((e) => ({
   maxPosition: o = 1 / 0,
   controlsOffset: i = 0
 }) => {
-  const [l, c] = _(!1), u = W(0), g = W(null), f = t > e, d = D((b) => {
+  const [l, c] = Z(!1), u = R(0), g = R(null), f = t > e, d = D((b) => {
     const v = b.target;
     if (v.closest("[data-loop-marker-handle]") || v.closest("[data-loop-region-timescale]"))
       return;
@@ -1865,11 +1865,11 @@ var kn = ({
   onChange: s,
   readOnly: o = !1
 }) => {
-  const [i, l] = _("");
-  return Q(() => {
+  const [i, l] = Z("");
+  return ee(() => {
     const f = bt(n, r);
     l(f);
-  }, [n, r, e]), /* @__PURE__ */ ne(je, { children: [
+  }, [n, r, e]), /* @__PURE__ */ te(qe, { children: [
     /* @__PURE__ */ C(Ga, { as: "label", htmlFor: e, children: t }),
     /* @__PURE__ */ C(
       qn,
@@ -1902,15 +1902,15 @@ var kn = ({
   onSelectionChange: n,
   className: r
 }) => {
-  const [a, s] = _("hh:mm:ss.uuu");
-  return Q(() => {
+  const [a, s] = Z("hh:mm:ss.uuu");
+  return ee(() => {
     const l = document.querySelector(".time-format"), c = () => {
       l && s(l.value);
     };
     return l && (s(l.value), l.addEventListener("change", c)), () => {
       l?.removeEventListener("change", c);
     };
-  }, []), /* @__PURE__ */ ne(je, { children: [
+  }, []), /* @__PURE__ */ te(qe, { children: [
     /* @__PURE__ */ C(
       kn,
       {
@@ -1943,7 +1943,7 @@ function Ft() {
   return window.devicePixelRatio;
 }
 var lr = Ee(Ft()), cr = ({ children: e }) => {
-  const [t, n] = _(Ft());
+  const [t, n] = Z(Ft());
   return matchMedia(`(resolution: ${Ft()}dppx)`).addEventListener(
     "change",
     () => {
@@ -1979,7 +1979,7 @@ Ee({
   setSelection: () => {
   }
 });
-var Tt = 1e3, Mo = $.div.attrs((e) => ({
+var Tt = 1e3, Mo = M.div.attrs((e) => ({
   style: {
     top: `${e.$waveHeight * e.$index}px`,
     width: `${e.$cssWidth}px`,
@@ -1990,7 +1990,7 @@ var Tt = 1e3, Mo = $.div.attrs((e) => ({
   background: #000;
   transform: translateZ(0);
   backface-visibility: hidden;
-`, Eo = $.canvas.attrs((e) => ({
+`, Eo = M.canvas.attrs((e) => ({
   style: {
     width: `${e.$cssWidth}px`,
     height: `${e.$waveHeight}px`
@@ -2023,102 +2023,102 @@ var Sn = ({
   clipId: g,
   onCanvasesReady: f
 }) => {
-  const d = W([]), b = W([]), v = !!(u && g), p = D(
-    (k) => {
-      if (k !== null) {
-        const A = parseInt(k.dataset.index, 10);
-        d.current[A] = k;
+  const d = R([]), b = R([]), v = R(/* @__PURE__ */ new WeakSet()), p = !!(u && g), h = D(
+    (A) => {
+      if (A !== null) {
+        const E = parseInt(A.dataset.index, 10);
+        d.current[E] = A;
       }
     },
     []
   );
-  Q(() => {
-    if (!v) return;
-    const k = Math.ceil(n / Tt);
-    d.current.length = k;
-    const A = d.current, E = [], M = [];
-    for (let S = 0; S < A.length; S++) {
-      const Z = A[S];
-      if (!Z) continue;
-      const B = `${g}-ch${e}-chunk${S}`;
+  ee(() => {
+    if (!p) return;
+    const A = Math.ceil(n / Tt);
+    d.current.length = A;
+    const E = d.current, S = [], $ = [];
+    for (let _ = 0; _ < E.length; _++) {
+      const B = E[_];
+      if (!B || v.current.has(B)) continue;
+      const P = `${g}-ch${e}-chunk${_}`;
       try {
-        const P = Z.transferControlToOffscreen();
-        u.registerCanvas(B, P), E.push(B), M.push(Math.min(n - S * Tt, Tt));
-      } catch (P) {
-        console.warn(`[spectrogram] transferControlToOffscreen failed for ${B}:`, P);
+        const H = B.transferControlToOffscreen();
+        u.registerCanvas(P, H), v.current.add(B), S.push(P), $.push(Math.min(n - _ * Tt, Tt));
+      } catch (H) {
+        console.warn(`[spectrogram] transferControlToOffscreen failed for ${P}:`, H);
         continue;
       }
     }
-    return b.current = E, E.length > 0 && f && f(E, M), () => {
-      for (const S of b.current)
-        u.unregisterCanvas(S);
+    return b.current = S, S.length > 0 && f && f(S, $), () => {
+      for (const _ of b.current)
+        u.unregisterCanvas(_);
       b.current = [];
     };
-  }, [v, g, e, n]);
-  const h = o ?? Do(), I = c ?? (t ? t.sampleRate / 2 : 22050), w = i ?? ((k, A, E) => (k - A) / (E - A));
+  }, [p, g, e, n]);
+  const I = o ?? Do(), w = c ?? (t ? t.sampleRate / 2 : 22050), m = i ?? ((A, E, S) => (A - E) / (S - E));
   tn(() => {
-    if (v || !t) return;
-    const k = d.current, { frequencyBinCount: A, frameCount: E, hopSize: M, sampleRate: S, gainDb: Z, rangeDb: B } = t, P = B === 0 ? 1 : B;
-    let L = 0;
-    const K = (H) => H / A * (S / 2);
-    for (let H = 0; H < k.length; H++) {
-      const G = k[H];
-      if (!G) continue;
-      const R = G.getContext("2d");
-      if (!R) continue;
-      const ee = G.width / a, J = r;
-      R.resetTransform(), R.clearRect(0, 0, G.width, G.height), R.imageSmoothingEnabled = !1, R.scale(a, a);
-      const ue = R.createImageData(ee, J), ae = ue.data;
-      for (let te = 0; te < ee; te++) {
-        const Qe = (L + te) * s, z = Math.floor(Qe / M);
-        if (z < 0 || z >= E) continue;
-        const he = z * A;
-        for (let oe = 0; oe < J; oe++) {
-          const O = 1 - oe / J;
-          let me = Math.floor(O * A);
+    if (p || !t) return;
+    const A = d.current, { frequencyBinCount: E, frameCount: S, hopSize: $, sampleRate: _, gainDb: B, rangeDb: P } = t, H = P === 0 ? 1 : P;
+    let K = 0;
+    const X = (U) => U / E * (_ / 2);
+    for (let U = 0; U < A.length; U++) {
+      const W = A[U];
+      if (!W) continue;
+      const Y = W.getContext("2d");
+      if (!Y) continue;
+      const j = W.width / a, ue = r;
+      Y.resetTransform(), Y.clearRect(0, 0, W.width, W.height), Y.imageSmoothingEnabled = !1, Y.scale(a, a);
+      const ae = Y.createImageData(j, ue), se = ae.data;
+      for (let de = 0; de < j; de++) {
+        const z = (K + de) * s, me = Math.floor(z / $);
+        if (me < 0 || me >= S) continue;
+        const ie = me * E;
+        for (let G = 0; G < ue; G++) {
+          const he = 1 - G / ue;
+          let pe = Math.floor(he * E);
           if (i) {
-            let Oe = 0, Je = A - 1;
-            for (; Oe < Je; ) {
-              const ie = Oe + Je >> 1, nt = K(ie);
-              w(nt, l, I) < O ? Oe = ie + 1 : Je = ie;
+            let Ue = 0, oe = E - 1;
+            for (; Ue < oe; ) {
+              const Qe = Ue + oe >> 1, rt = X(Qe);
+              m(rt, l, w) < he ? Ue = Qe + 1 : oe = Qe;
             }
-            me = Oe;
+            pe = Ue;
           }
-          if (me < 0 || me >= A) continue;
-          const pe = t.data[he + me], le = Math.max(0, Math.min(1, (pe + P + Z) / P)), Te = Math.floor(le * 255), Re = (oe * ee + te) * 4;
-          ae[Re] = h[Te * 3], ae[Re + 1] = h[Te * 3 + 1], ae[Re + 2] = h[Te * 3 + 2], ae[Re + 3] = 255;
+          if (pe < 0 || pe >= E) continue;
+          const le = t.data[ie + pe], Fe = Math.max(0, Math.min(1, (le + H + B) / H)), _e = Math.floor(Fe * 255), Ke = (G * j + de) * 4;
+          se[Ke] = I[_e * 3], se[Ke + 1] = I[_e * 3 + 1], se[Ke + 2] = I[_e * 3 + 2], se[Ke + 3] = 255;
         }
       }
-      if (R.resetTransform(), R.putImageData(ue, 0, 0), a !== 1) {
-        const te = document.createElement("canvas");
-        te.width = ee, te.height = J;
-        const de = te.getContext("2d");
-        if (!de) continue;
-        de.putImageData(ue, 0, 0), R.clearRect(0, 0, G.width, G.height), R.imageSmoothingEnabled = !1, R.drawImage(te, 0, 0, G.width, G.height);
+      if (Y.resetTransform(), Y.putImageData(ae, 0, 0), a !== 1) {
+        const de = document.createElement("canvas");
+        de.width = j, de.height = ue;
+        const Oe = de.getContext("2d");
+        if (!Oe) continue;
+        Oe.putImageData(ae, 0, 0), Y.clearRect(0, 0, W.width, W.height), Y.imageSmoothingEnabled = !1, Y.drawImage(de, 0, 0, W.width, W.height);
       }
-      L += ee;
+      K += j;
     }
-  }, [v, t, n, r, a, s, h, i, l, I, w]);
-  let m = n, y = 0;
-  const x = [];
-  for (; m > 0; ) {
-    const k = Math.min(m, Tt);
-    x.push(
+  }, [p, t, n, r, a, s, I, i, l, w, m]);
+  let y = n, x = 0;
+  const k = [];
+  for (; y > 0; ) {
+    const A = Math.min(y, Tt);
+    k.push(
       /* @__PURE__ */ C(
         Eo,
         {
-          $cssWidth: k,
-          width: k * a,
+          $cssWidth: A,
+          width: A * a,
           height: r * a,
           $waveHeight: r,
-          "data-index": y,
-          ref: p
+          "data-index": x,
+          ref: h
         },
-        `${n}-${y}`
+        `${n}-${x}`
       )
-    ), m -= k, y++;
+    ), y -= A, x++;
   }
-  return /* @__PURE__ */ C(Mo, { $index: e, $cssWidth: n, $waveHeight: r, children: x });
+  return /* @__PURE__ */ C(Mo, { $index: e, $cssWidth: n, $waveHeight: r, children: k });
 }, ur = ({
   isSelected: e,
   transparentBackground: t,
@@ -2156,7 +2156,7 @@ var Sn = ({
     );
   if (n === "both" && k) {
     const A = Math.floor(b / 2);
-    return /* @__PURE__ */ ne(je, { children: [
+    return /* @__PURE__ */ te(qe, { children: [
       /* @__PURE__ */ C(
         Sn,
         {
@@ -2208,7 +2208,7 @@ var Sn = ({
       drawMode: x
     }
   );
-}, $n = 72, To = $.div`
+}, $n = 72, To = M.div`
   position: sticky;
   left: 0;
   z-index: 101;
@@ -2252,7 +2252,7 @@ var Ro = ({
   renderMode: i = "spectrogram",
   hasClipHeaders: l = !1
 }) => {
-  const c = W(null), u = on(), g = i === "both" ? Math.floor(e / 2) : e, f = t * e, d = l ? 22 : 0;
+  const c = R(null), u = on(), g = i === "both" ? Math.floor(e / 2) : e, f = t * e, d = l ? 22 : 0;
   return tn(() => {
     const b = c.current;
     if (!b) return;
@@ -2291,7 +2291,7 @@ function Fo(e) {
   const t = Math.floor(e / 1e3), n = t % 60;
   return `${(t - n) / 60}:${String(n).padStart(2, "0")}`;
 }
-var _o = $.div.attrs((e) => ({
+var _o = M.div.attrs((e) => ({
   style: {
     width: `${e.$cssWidth}px`,
     marginLeft: `${e.$controlWidth}px`,
@@ -2302,7 +2302,7 @@ var _o = $.div.attrs((e) => ({
   overflow: visible; /* Allow time labels to render above the container */
   border-bottom: 1px solid ${(e) => e.theme.timeColor};
   box-sizing: border-box;
-`, Zo = $.canvas.attrs((e) => ({
+`, Zo = M.canvas.attrs((e) => ({
   style: {
     width: `${e.$cssWidth}px`,
     height: `${e.$timeScaleHeight}px`
@@ -2312,7 +2312,7 @@ var _o = $.div.attrs((e) => ({
   left: 0;
   right: 0;
   bottom: 0;
-`, Vo = $.div.attrs((e) => ({
+`, Vo = M.div.attrs((e) => ({
   style: {
     left: `${e.$left + 4}px`
     // Offset 4px to the right of the tick
@@ -2330,13 +2330,13 @@ var _o = $.div.attrs((e) => ({
     bigStep: a,
     secondStep: s,
     renderTimestamp: o
-  } = e, i = /* @__PURE__ */ new Map(), l = [], c = W(null), {
+  } = e, i = /* @__PURE__ */ new Map(), l = [], c = R(null), {
     sampleRate: u,
     samplesPerPixel: g,
     timeScaleHeight: f,
     controls: { show: d, width: b }
   } = De(kt), v = on();
-  Q(() => {
+  ee(() => {
     if (c.current !== null) {
       const w = c.current, m = w.getContext("2d");
       if (m) {
@@ -2362,12 +2362,12 @@ var _o = $.div.attrs((e) => ({
   for (let w = 0; w < p; w += h * s / 1e3) {
     const m = Math.floor(w);
     if (I % r === 0) {
-      const y = I, x = Fo(y), k = o ? /* @__PURE__ */ C(_e.Fragment, { children: o(y, m) }, `timestamp-${I}`) : /* @__PURE__ */ C(Vo, { $left: m, children: x }, x);
+      const y = I, x = Fo(y), k = o ? /* @__PURE__ */ C(We.Fragment, { children: o(y, m) }, `timestamp-${I}`) : /* @__PURE__ */ C(Vo, { $left: m, children: x }, x);
       l.push(k), i.set(m, f);
     } else I % a === 0 ? i.set(m, Math.floor(f / 2)) : I % s === 0 && i.set(m, Math.floor(f / 5));
     I += s;
   }
-  return /* @__PURE__ */ ne(
+  return /* @__PURE__ */ te(
     _o,
     {
       $cssWidth: p,
@@ -2469,7 +2469,7 @@ var dr = ({ renderTimestamp: e }) => {
       renderTimestamp: e
     }
   );
-}, Xo = $.div`
+}, Xo = M.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -2497,7 +2497,7 @@ var dr = ({ renderTimestamp: e }) => {
     "aria-label": "Time format selection",
     children: Lo.map((s) => /* @__PURE__ */ C("option", { value: s.value, children: s.label }, s.value))
   }
-) }), No = $.div.attrs((e) => ({
+) }), No = M.div.attrs((e) => ({
   style: {
     height: `${e.$waveHeight * e.$numChannels + (e.$hasClipHeaders ? rr : 0)}px`
   }
@@ -2505,7 +2505,7 @@ var dr = ({ renderTimestamp: e }) => {
   position: relative;
   display: flex;
   ${(e) => e.$width !== void 0 && `width: ${e.$width}px;`}
-`, Yo = $.div.attrs((e) => ({
+`, Yo = M.div.attrs((e) => ({
   style: {
     paddingLeft: `${e.$offset || 0}px`
   }
@@ -2513,7 +2513,7 @@ var dr = ({ renderTimestamp: e }) => {
   position: relative;
   background: ${(e) => e.$backgroundColor || "transparent"};
   flex: 1;
-`, Oo = $.div.attrs((e) => ({
+`, Oo = M.div.attrs((e) => ({
   style: {
     width: `${e.$controlWidth}px`
   }
@@ -2547,7 +2547,7 @@ var dr = ({ renderTimestamp: e }) => {
     waveHeight: u,
     controls: { show: g, width: f }
   } = St(), d = xo();
-  return /* @__PURE__ */ ne(
+  return /* @__PURE__ */ te(
     No,
     {
       $numChannels: e,
@@ -2580,7 +2580,7 @@ var dr = ({ renderTimestamp: e }) => {
       ]
     }
   );
-}, En = $.button.attrs({
+}, En = M.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -2641,7 +2641,7 @@ var dr = ({ renderTimestamp: e }) => {
           box-shadow: 0 0 0 0.2rem ${e.theme.inputFocusBorder}33;
         }
       `}
-`, Ko = $.div`
+`, Ko = M.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -2653,7 +2653,7 @@ var dr = ({ renderTimestamp: e }) => {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-`, Uo = $.button`
+`, Uo = M.button`
   position: absolute;
   left: 0;
   top: 0;
@@ -2676,7 +2676,7 @@ var dr = ({ renderTimestamp: e }) => {
 `, jo = ({
   onClick: e,
   title: t = "Remove track"
-}) => /* @__PURE__ */ C(Uo, { onClick: e, title: t, children: /* @__PURE__ */ C(La, { size: 12, weight: "bold" }) }), Jo = $.div`
+}) => /* @__PURE__ */ C(Uo, { onClick: e, title: t, children: /* @__PURE__ */ C(La, { size: 12, weight: "bold" }) }), Jo = M.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -2689,7 +2689,7 @@ var dr = ({ renderTimestamp: e }) => {
   text-align: center;
   border: 1px solid ${(e) => e.theme.borderColor};
   border-radius: ${(e) => e.theme.borderRadius};
-`, qo = $.header`
+`, qo = M.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -2700,7 +2700,7 @@ var dr = ({ renderTimestamp: e }) => {
   font-size: ${(e) => e.theme.fontSizeSmall};
   color: ${(e) => e.theme.textColor};
   background-color: transparent;
-`, Qo = (e) => /* @__PURE__ */ C(jn, { weight: "light", ...e }), es = (e) => /* @__PURE__ */ C(Un, { weight: "light", ...e }), ts = (e) => /* @__PURE__ */ C(Kn, { weight: "bold", ...e }), Dn = $(er)`
+`, Qo = (e) => /* @__PURE__ */ C(jn, { weight: "light", ...e }), es = (e) => /* @__PURE__ */ C(Un, { weight: "light", ...e }), ts = (e) => /* @__PURE__ */ C(Kn, { weight: "bold", ...e }), Dn = M(er)`
   width: 75%;
   height: 5px;
   background: ${(e) => e.theme.sliderTrackColor};
@@ -2749,7 +2749,7 @@ var dr = ({ renderTimestamp: e }) => {
   &:focus::-moz-range-thumb {
     border: 2px solid ${(e) => e.theme.textColor};
   }
-`, Tn = $.label`
+`, Tn = M.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -2757,10 +2757,10 @@ var dr = ({ renderTimestamp: e }) => {
   padding: 0 1rem;
   margin-bottom: 0.2rem;
   font-size: 14px;
-`, ns = $.div`
+`, ns = M.div`
   position: relative;
   display: inline-block;
-`, rs = $.button`
+`, rs = M.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -2774,7 +2774,7 @@ var dr = ({ renderTimestamp: e }) => {
   &:hover {
     opacity: 1;
   }
-`, as = $.div`
+`, as = M.div`
   position: fixed;
   top: ${(e) => e.$top}px;
   left: ${(e) => e.$left}px;
@@ -2786,15 +2786,15 @@ var dr = ({ renderTimestamp: e }) => {
   padding: 0.5rem 0;
   min-width: 180px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-`, os = $.hr`
+`, os = M.hr`
   border: none;
   border-top: 1px solid rgba(128, 128, 128, 0.3);
   margin: 0.35rem 0;
 `, ss = ({
   items: e
 }) => {
-  const [t, n] = _(!1), a = typeof e == "function" ? e(() => n(!1)) : e, [s, o] = _({ top: 0, left: 0 }), i = W(null), l = W(null);
-  return Q(() => {
+  const [t, n] = Z(!1), a = typeof e == "function" ? e(() => n(!1)) : e, [s, o] = Z({ top: 0, left: 0 }), i = R(null), l = R(null);
+  return ee(() => {
     if (t && i.current) {
       const c = i.current.getBoundingClientRect();
       o({
@@ -2802,14 +2802,14 @@ var dr = ({ renderTimestamp: e }) => {
         left: Math.max(0, c.right - 180)
       });
     }
-  }, [t]), Q(() => {
+  }, [t]), ee(() => {
     if (!t) return;
     const c = (u) => {
       const g = u.target;
       i.current && !i.current.contains(g) && l.current && !l.current.contains(g) && n(!1);
     };
     return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
-  }, [t]), /* @__PURE__ */ ne(ns, { children: [
+  }, [t]), /* @__PURE__ */ te(ns, { children: [
     /* @__PURE__ */ C(
       rs,
       {
@@ -2831,7 +2831,7 @@ var dr = ({ renderTimestamp: e }) => {
           $top: s.top,
           $left: s.left,
           onMouseDown: (c) => c.stopPropagation(),
-          children: a.map((c, u) => /* @__PURE__ */ ne(_e.Fragment, { children: [
+          children: a.map((c, u) => /* @__PURE__ */ te(We.Fragment, { children: [
             u > 0 && /* @__PURE__ */ C(os, {}),
             c.content
           ] }, c.id))
@@ -2938,8 +2938,8 @@ function ps(e, t) {
   return r > 0 && n++, n;
 }
 function gs(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 = ps(a, t), u = e.bits === 8 ? 1 : 2, g = l + c * 2 * u * i, f = new ArrayBuffer(g), d = new DataView(f), b = 0, v = l, p = new Array(i), h = new Array(i), I = 0; I < i; I++)
     p[I] = 1 / 0, h[I] = -1 / 0;
   var w = e.bits === 8 ? ms : hs, m = e.bits === 8 ? ds : fs;
@@ -2960,8 +2960,8 @@ function gs(e) {
     }
   }
   if (b > 0)
-    for (var M = 0; M < i; M++)
-      e.bits === 8 ? (d.setInt8(v++, p[M]), d.setInt8(v++, h[M])) : (d.setInt16(v, p[M], !0), d.setInt16(v + 2, h[M], !0));
+    for (var S = 0; S < i; S++)
+      e.bits === 8 ? (d.setInt8(v++, p[S]), d.setInt8(v++, h[S])) : (d.setInt16(v, p[S], !0), d.setInt16(v + 2, h[S], !0));
   return f;
 }
 function _t(e) {
@@ -3388,7 +3388,7 @@ function Ms(e) {
     language: e.lang || "en"
   };
 }
-$.div.attrs((e) => ({
+M.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`,
     width: `${e.$width}px`
@@ -3410,7 +3410,7 @@ $.div.attrs((e) => ({
     border-color: ${(e) => e.$color};
   }
 `;
-$.div`
+M.div`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3427,7 +3427,7 @@ $.div`
   white-space: pre-wrap;
   word-break: break-word;
 `;
-$.textarea`
+M.textarea`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3448,7 +3448,7 @@ $.textarea`
     border-color: #4CAF50;
   }
 `;
-$.div`
+M.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -3460,7 +3460,7 @@ $.div`
   justify-content: flex-start;
   align-items: center;
 `;
-$.button`
+M.button`
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.5);
   color: white;
@@ -3483,7 +3483,7 @@ $.button`
     background: rgba(255, 255, 255, 0.3);
   }
 `;
-var Es = $.div.attrs((e) => ({
+var Es = M.div.attrs((e) => ({
   style: {
     left: `${e.$left}px`,
     width: `${e.$width}px`
@@ -3493,7 +3493,7 @@ var Es = $.div.attrs((e) => ({
   top: 0;
   height: 100%;
   pointer-events: none; /* Let events pass through to children */
-`, Ds = $.div`
+`, Ds = M.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -3517,7 +3517,7 @@ var Es = $.div.attrs((e) => ({
     border-width: 3px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   }
-`, Ts = $.span`
+`, Ts = M.span`
   font-size: 12px;
   font-weight: 600;
   color: ${(e) => e.theme?.annotationLabelColor || "#2a2a2a"};
@@ -3527,7 +3527,7 @@ var Es = $.div.attrs((e) => ({
   padding: 0 6px;
   letter-spacing: 0.3px;
   user-select: none;
-`, Wn = $.div`
+`, Wn = M.div`
   position: absolute;
   top: 0;
   ${(e) => e.$position === "left" ? "left: 0" : "right: 0"};
@@ -3599,7 +3599,7 @@ var Es = $.div.attrs((e) => ({
   }, y = (x) => {
     x.stopPropagation();
   };
-  return /* @__PURE__ */ ne(Es, { $left: n, $width: c, children: [
+  return /* @__PURE__ */ te(Es, { $left: n, $width: c, children: [
     /* @__PURE__ */ C(
       Ds,
       {
@@ -3634,7 +3634,7 @@ var Es = $.div.attrs((e) => ({
       }
     )
   ] });
-}, Bs = $.div.attrs((e) => ({
+}, Bs = M.div.attrs((e) => ({
   style: {
     height: `${e.$height}px`
   }
@@ -3644,7 +3644,7 @@ var Es = $.div.attrs((e) => ({
   ${(e) => e.$width !== void 0 && `width: ${e.$width}px;`}
   background: transparent;
   z-index: 110;
-`, Rs = $.div`
+`, Rs = M.div`
   position: sticky;
   z-index: 200;
   left: 0;
@@ -3652,7 +3652,7 @@ var Es = $.div.attrs((e) => ({
   width: ${(e) => e.$controlWidth}px;
   flex-shrink: 0;
   background: transparent;
-`, Ws = $.div`
+`, Ws = M.div`
   position: relative;
   flex: 1;
   padding-left: ${(e) => e.$offset || 0}px;
@@ -3666,7 +3666,7 @@ var Es = $.div.attrs((e) => ({
   const {
     controls: { show: s, width: o }
   } = St();
-  return /* @__PURE__ */ ne(
+  return /* @__PURE__ */ te(
     Bs,
     {
       className: t,
@@ -3680,7 +3680,7 @@ var Es = $.div.attrs((e) => ({
     }
   );
 };
-$.div.attrs((e) => ({
+M.div.attrs((e) => ({
   style: {
     height: `${e.$height}px`
   }
@@ -3690,7 +3690,7 @@ $.div.attrs((e) => ({
   ${(e) => e.$width !== void 0 && `width: ${e.$width}px;`}
   background: transparent;
 `;
-$.div`
+M.div`
   position: sticky;
   z-index: 200;
   left: 0;
@@ -3705,17 +3705,17 @@ $.div`
   color: ${(e) => e.theme?.textColorMuted || "#666"};
   font-weight: bold;
 `;
-$.div`
+M.div`
   position: relative;
   flex: 1;
   padding-left: ${(e) => e.$offset || 0}px;
 `;
-var Fs = $.div`
+var Fs = M.div`
   background: ${(e) => e.theme?.backgroundColor || "#fff"};
   ${(e) => e.$height ? `height: ${e.$height}px;` : "max-height: 200px;"}
   overflow-y: auto;
   padding: 8px;
-`, _s = $.div`
+`, _s = M.div`
   padding: 12px;
   margin-bottom: 6px;
   border-left: 4px solid ${(e) => e.$isActive ? "#ff9800" : "transparent"};
@@ -3734,16 +3734,16 @@ var Fs = $.div`
     outline: 2px solid #ff9800;
     outline-offset: 2px;
   }
-`, Zs = $.div`
+`, Zs = M.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 6px;
-`, Vs = $.div`
+`, Vs = M.div`
   display: flex;
   align-items: center;
   gap: 8px;
-`, Ps = $.span`
+`, Ps = M.span`
   font-size: 11px;
   font-weight: 600;
   color: ${(e) => e.theme?.textColorMuted || "#666"};
@@ -3757,16 +3757,16 @@ var Fs = $.div`
     outline: 2px solid #ff9800;
     background: rgba(255, 152, 0, 0.1);
   }
-`, zs = $.span`
+`, zs = M.span`
   font-size: 12px;
   font-weight: 500;
   color: ${(e) => e.theme?.textColorMuted || "#555"};
   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   letter-spacing: 0.5px;
-`, Hs = $.div`
+`, Hs = M.div`
   display: flex;
   gap: 6px;
-`, Xs = $.button`
+`, Xs = M.button`
   background: ${(e) => e.theme?.surfaceColor || "#f5f5f5"};
   border: 1px solid ${(e) => e.theme?.borderColor || "#ccc"};
   color: ${(e) => e.theme?.textColor || "#333"};
@@ -3785,7 +3785,7 @@ var Fs = $.div`
   &:active {
     transform: scale(0.95);
   }
-`, Ls = $.div`
+`, Ls = M.div`
   font-size: 14px;
   line-height: 1.6;
   color: ${(e) => e.theme?.textColor || "#2a2a2a"};
@@ -3814,15 +3814,15 @@ var Fs = $.div`
   onAnnotationUpdate: u,
   renderAnnotationItem: g
 }) => {
-  const f = W(null), d = W(null), b = W(void 0);
-  Q(() => {
-  }), Q(() => {
+  const f = R(null), d = R(null), b = R(void 0);
+  ee(() => {
+  }), ee(() => {
     const m = d.current;
     if (!m) return;
     const y = () => {
     };
     return m.addEventListener("scroll", y), () => m.removeEventListener("scroll", y);
-  }, []), Q(() => {
+  }, []), ee(() => {
     t && f.current && n && f.current.scrollIntoView({
       behavior: "smooth",
       block: r,
@@ -3871,15 +3871,15 @@ var Fs = $.div`
         })
       },
       m.id
-    ) : /* @__PURE__ */ ne(
+    ) : /* @__PURE__ */ te(
       _s,
       {
         ref: x ? f : null,
         $isActive: x,
         onClick: k,
         children: [
-          /* @__PURE__ */ ne(Zs, { children: [
-            /* @__PURE__ */ ne(Vs, { children: [
+          /* @__PURE__ */ te(Zs, { children: [
+            /* @__PURE__ */ te(Vs, { children: [
               /* @__PURE__ */ C(
                 Ps,
                 {
@@ -3893,7 +3893,7 @@ var Fs = $.div`
                   children: m.id
                 }
               ),
-              /* @__PURE__ */ ne(zs, { children: [
+              /* @__PURE__ */ te(zs, { children: [
                 v(m.start),
                 " - ",
                 v(m.end)
@@ -3928,12 +3928,12 @@ var Fs = $.div`
       m.id
     );
   }) });
-}, yr = _e.memo(Gs), Ns = ({
+}, yr = We.memo(Gs), Ns = ({
   checked: e,
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ ne(Vt, { className: r, children: [
+}) => /* @__PURE__ */ te(Vt, { className: r, children: [
   /* @__PURE__ */ C(
     Pt,
     {
@@ -3953,7 +3953,7 @@ var Fs = $.div`
   onChange: t,
   disabled: n = !1,
   className: r
-}) => /* @__PURE__ */ ne(Vt, { className: r, children: [
+}) => /* @__PURE__ */ te(Vt, { className: r, children: [
   /* @__PURE__ */ C(
     Pt,
     {
@@ -3972,7 +3972,7 @@ var Fs = $.div`
   checked: e,
   onChange: t,
   className: n
-}) => /* @__PURE__ */ ne(Vt, { className: n, children: [
+}) => /* @__PURE__ */ te(Vt, { className: n, children: [
   /* @__PURE__ */ C(
     Pt,
     {
@@ -3983,7 +3983,7 @@ var Fs = $.div`
     }
   ),
   /* @__PURE__ */ C(zt, { htmlFor: "editable-annotations", children: "Editable Annotations" })
-] }), Ks = $.button`
+] }), Ks = M.button`
   padding: 0.5rem 1rem;
   background: ${(e) => e.theme?.surfaceColor || "#f5f5f5"};
   color: ${(e) => e.theme?.textColor || "#333"};
@@ -4031,7 +4031,7 @@ var Fs = $.div`
   }
 );
 function js() {
-  const [e, t] = _("hh:mm:ss.uuu");
+  const [e, t] = Z("hh:mm:ss.uuu");
   return {
     timeFormat: e,
     setTimeFormat: t,
@@ -4044,7 +4044,7 @@ function qs({
   initialSamplesPerPixel: e,
   zoomLevels: t = Js
 }) {
-  const [n, r] = _(() => {
+  const [n, r] = Z(() => {
     const c = t.indexOf(e);
     return c !== -1 ? c : Math.floor(t.length / 2);
   }), a = t[n], s = n > 0, o = n < t.length - 1, i = D(() => {
@@ -4065,7 +4065,7 @@ function Qs({
   initialVolume: t = 1,
   onVolumeChange: n
 }) {
-  const [r, a] = _(t), s = D((o) => {
+  const [r, a] = Z(t), s = D((o) => {
     a(o), e.current && e.current.setMasterGain(o), n?.(o);
   }, [e, n]);
   return {
@@ -4074,7 +4074,7 @@ function Qs({
   };
 }
 const tl = (e = 256) => {
-  const t = W(null), n = D((r, a, s) => {
+  const t = R(null), n = D((r, a, s) => {
     const o = new Ln("fft", e);
     return r.connect(o), r.connect(a), t.current = o, function() {
       o.dispose(), t.current = null;
@@ -4181,8 +4181,8 @@ function Cr() {
   return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
 function nl(e, t = {}) {
-  const { progressive: n = !1 } = t, [r, a] = _([]), [s, o] = _(!0), [i, l] = _(null), [c, u] = _(0), g = e.length;
-  return Q(() => {
+  const { progressive: n = !1 } = t, [r, a] = Z([]), [s, o] = Z(!0), [i, l] = Z(null), [c, u] = Z(0), g = e.length;
+  return ee(() => {
     if (e.length === 0) {
       a([]), o(!1), u(0);
       return;
@@ -4228,14 +4228,14 @@ function nl(e, t = {}) {
         const p = Jr.getContext().rawContext, h = e.map(async (w, m) => {
           if (w.audioBuffer) {
             const E = b(w, m, w.audioBuffer);
-            return n && !f && (d.set(m, E), u((M) => M + 1), a(
-              Array.from({ length: e.length }, (M, S) => d.get(S)).filter((M) => M !== void 0)
+            return n && !f && (d.set(m, E), u((S) => S + 1), a(
+              Array.from({ length: e.length }, (S, $) => d.get($)).filter((S) => S !== void 0)
             )), E;
           }
           if (!w.src && w.waveformData) {
             const E = b(w, m);
-            return n && !f && (d.set(m, E), u((M) => M + 1), a(
-              Array.from({ length: e.length }, (M, S) => d.get(S)).filter((M) => M !== void 0)
+            return n && !f && (d.set(m, E), u((S) => S + 1), a(
+              Array.from({ length: e.length }, (S, $) => d.get($)).filter((S) => S !== void 0)
             )), E;
           }
           if (!w.src)
@@ -4248,7 +4248,7 @@ function nl(e, t = {}) {
             throw new Error(`Invalid audio buffer for ${w.src}`);
           const A = b(w, m, k);
           return n && !f && (d.set(m, A), u((E) => E + 1), a(
-            Array.from({ length: e.length }, (E, M) => d.get(M)).filter((E) => E !== void 0)
+            Array.from({ length: e.length }, (E, S) => d.get(S)).filter((E) => E !== void 0)
           )), A;
         }), I = await Promise.all(h);
         f || (n || (a(I), u(I.length)), o(!1));
@@ -4269,7 +4269,7 @@ function rl({
   samplesPerPixel: n,
   sampleRate: r
 }) {
-  const a = _e.useRef(null), s = _e.useCallback(
+  const a = We.useRef(null), s = We.useCallback(
     (c) => {
       const { transform: u, active: g } = c;
       if (!g?.data?.current) return { ...u, scaleX: 1, scaleY: 1 };
@@ -4282,28 +4282,28 @@ function rl({
       if (!p) return { ...u, scaleX: 1, scaleY: 1 };
       const h = p.startSample / r, I = p.durationSamples / r, w = u.x * n / r;
       let m = h + w;
-      const y = [...v.clips].sort((S, Z) => S.startSample - Z.startSample), x = y.findIndex((S) => S === p);
+      const y = [...v.clips].sort(($, _) => $.startSample - _.startSample), x = y.findIndex(($) => $ === p);
       m = Math.max(0, m);
       const k = x > 0 ? y[x - 1] : null;
       if (k) {
-        const S = (k.startSample + k.durationSamples) / r;
-        m = Math.max(m, S);
+        const $ = (k.startSample + k.durationSamples) / r;
+        m = Math.max(m, $);
       }
       const A = x < y.length - 1 ? y[x + 1] : null;
       if (A) {
-        const S = m + I, Z = A.startSample / r;
-        S > Z && (m = Z - I);
+        const $ = m + I, _ = A.startSample / r;
+        $ > _ && (m = _ - I);
       }
-      const M = (m - h) * r / n;
+      const S = (m - h) * r / n;
       return {
         ...u,
-        x: M,
+        x: S,
         scaleX: 1,
         scaleY: 1
       };
     },
     [e, n, r]
-  ), o = _e.useCallback(
+  ), o = We.useCallback(
     (c) => {
       const { active: u } = c, { boundary: g } = u.data.current;
       if (!g) {
@@ -4318,7 +4318,7 @@ function rl({
       });
     },
     [e]
-  ), i = _e.useCallback(
+  ), i = We.useCallback(
     (c) => {
       const { active: u, delta: g } = c, { boundary: f } = u.data.current;
       if (!f || !a.current) return;
@@ -4326,32 +4326,32 @@ function rl({
         if (m !== d) return w;
         const y = [...w.clips].sort((A, E) => A.startSample - E.startSample), x = y.findIndex((A) => A === w.clips[b]), k = w.clips.map((A, E) => {
           if (E !== b) return A;
-          const M = A.sourceDurationSamples;
+          const S = A.sourceDurationSamples;
           if (f === "left") {
-            let S = Math.floor(v);
-            const Z = -h.startSample;
-            S < Z && (S = Z);
+            let $ = Math.floor(v);
+            const _ = -h.startSample;
+            $ < _ && ($ = _);
             const B = -h.offsetSamples;
-            S < B && (S = B);
+            $ < B && ($ = B);
             const P = x > 0 ? y[x - 1] : null;
             if (P) {
-              const ee = P.startSample + P.durationSamples - h.startSample;
-              S < ee && (S = ee);
+              const Y = P.startSample + P.durationSamples - h.startSample;
+              $ < Y && ($ = Y);
             }
-            const L = h.durationSamples - p;
-            S > L && (S = L);
-            const K = h.offsetSamples + S, H = h.durationSamples - S, G = h.startSample + S;
+            const H = h.durationSamples - p;
+            $ > H && ($ = H);
+            const K = h.offsetSamples + $, X = h.durationSamples - $, U = h.startSample + $;
             return {
               ...A,
               offsetSamples: K,
-              durationSamples: H,
-              startSample: G
+              durationSamples: X,
+              startSample: U
             };
           } else {
-            let S = Math.floor(h.durationSamples + v);
-            S = Math.max(p, S), h.offsetSamples + S > M && (S = M - h.offsetSamples);
-            const Z = x < y.length - 1 ? y[x + 1] : null;
-            return Z && h.startSample + S > Z.startSample && (S = Z.startSample - h.startSample, S = Math.max(p, S)), { ...A, durationSamples: S };
+            let $ = Math.floor(h.durationSamples + v);
+            $ = Math.max(p, $), h.offsetSamples + $ > S && ($ = S - h.offsetSamples);
+            const _ = x < y.length - 1 ? y[x + 1] : null;
+            return _ && h.startSample + $ > _.startSample && ($ = _.startSample - h.startSample, $ = Math.max(p, $)), { ...A, durationSamples: $ };
           }
         });
         return { ...w, clips: k };
@@ -4359,7 +4359,7 @@ function rl({
       t(I);
     },
     [e, t, n, r]
-  ), l = _e.useCallback(
+  ), l = We.useCallback(
     (c) => {
       const { active: u, delta: g } = c, { trackIndex: f, clipIndex: d, boundary: b } = u.data.current, v = g.x * n;
       if (b) {
@@ -4374,11 +4374,11 @@ function rl({
           A = Math.max(0, A);
           const E = m > 0 ? w[m - 1] : null;
           if (E) {
-            const S = E.startSample + E.durationSamples;
-            A = Math.max(A, S);
+            const $ = E.startSample + E.durationSamples;
+            A = Math.max(A, $);
           }
-          const M = m < w.length - 1 ? w[m + 1] : null;
-          return M && A + x.durationSamples > M.startSample && (A = M.startSample - x.durationSamples), {
+          const S = m < w.length - 1 ? w[m + 1] : null;
+          return S && A + x.durationSamples > S.startSample && (A = S.startSample - x.durationSamples), {
             ...x,
             startSample: A
           };
@@ -4408,7 +4408,7 @@ function ni({
   duration: a,
   linkEndpoints: s
 }) {
-  const o = _e.useRef(null), i = _e.useCallback(
+  const o = We.useRef(null), i = We.useCallback(
     (u) => {
       const { active: g } = u, f = g.data.current;
       if (!f || f.annotationIndex === void 0) {
@@ -4423,7 +4423,7 @@ function ni({
       });
     },
     [e]
-  ), l = _e.useCallback(
+  ), l = We.useCallback(
     (u) => {
       const { active: g, delta: f } = u;
       if (!o.current)
@@ -4441,7 +4441,7 @@ function ni({
       t(w);
     },
     [e, t, n, r, a, s]
-  ), c = _e.useCallback(() => {
+  ), c = We.useCallback(() => {
     o.current = null;
   }, []);
   return {
@@ -4566,7 +4566,7 @@ const ol = (e) => {
       const v = b.startSample / g, p = (b.startSample + b.durationSamples) / g;
       if (u <= v || u >= p)
         return console.warn("Split time is outside clip bounds"), !1;
-      const h = Math.round(u * g), I = Math.floor(h / f), w = b.startSample + b.durationSamples, m = I * f, y = b.startSample, x = m - y, k = m, A = w - k, E = m - b.startSample, M = Qt({
+      const h = Math.round(u * g), I = Math.floor(h / f), w = b.startSample + b.durationSamples, m = I * f, y = b.startSample, x = m - y, k = m, A = w - k, E = m - b.startSample, S = Qt({
         audioBuffer: b.audioBuffer,
         startSample: y,
         durationSamples: x,
@@ -4580,7 +4580,7 @@ const ol = (e) => {
         waveformData: b.waveformData
         // Share waveformData - slicing happens at render time
         // Note: fadeOut removed for first clip since it's cut
-      }), S = Qt({
+      }), $ = Qt({
         audioBuffer: b.audioBuffer,
         startSample: k,
         durationSamples: A,
@@ -4594,12 +4594,12 @@ const ol = (e) => {
         // Share waveformData - slicing happens at render time
         // Note: fadeIn removed for second clip since it's cut
         fadeOut: b.fadeOut
-      }), Z = [...d.clips];
-      Z.splice(c, 1, M, S);
+      }), _ = [...d.clips];
+      _.splice(c, 1, S, $);
       const B = [...t];
       return B[l] = {
         ...d,
-        clips: Z
+        clips: _
       }, n(B), !0;
     },
     [t, n, e]
@@ -4636,7 +4636,7 @@ const ol = (e) => {
     },
     [t, n]
   );
-  Q(() => {
+  ee(() => {
     if (n)
       return window.addEventListener("keydown", r), () => {
         window.removeEventListener("keydown", r);
@@ -4646,7 +4646,7 @@ const ol = (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("+");
 }, il = (e = {}) => {
-  const { enabled: t = !0, additionalShortcuts: n = [], shortcuts: r } = e, { isPlaying: a } = He(), { setCurrentTime: s, play: o, pause: i, stop: l } = ve(), { playoutRef: c } = Be(), u = D(() => {
+  const { enabled: t = !0, additionalShortcuts: n = [], shortcuts: r } = e, { isPlaying: a } = He(), { setCurrentTime: s, play: o, pause: i, stop: l } = ve(), { playoutRef: c } = Te(), u = D(() => {
     a ? i() : o();
   }, [a, o, i]), g = D(() => {
     l();
@@ -4697,43 +4697,43 @@ function ll({
   controlsWidth: g = 0,
   onPlay: f
 }) {
-  const d = Ue(() => t ? e.findIndex((E) => E.id === t) : -1, [e, t]), b = D(
+  const d = Je(() => t ? e.findIndex((E) => E.id === t) : -1, [e, t]), b = D(
     (E) => {
       if (!l?.current || !c || !u) return;
-      const M = e.find((R) => R.id === E);
-      if (!M) return;
-      const S = l.current, Z = S.clientWidth, B = M.start * u / c + g, P = M.end * u / c + g, L = (B + P) / 2, K = S.scrollLeft, H = K, G = K + Z;
-      if (B < H || P > G) {
-        const R = Math.max(0, L - Z / 2);
-        S.scrollTo({
-          left: R,
+      const S = e.find((W) => W.id === E);
+      if (!S) return;
+      const $ = l.current, _ = $.clientWidth, B = S.start * u / c + g, P = S.end * u / c + g, H = (B + P) / 2, K = $.scrollLeft, X = K, U = K + _;
+      if (B < X || P > U) {
+        const W = Math.max(0, H - _ / 2);
+        $.scrollTo({
+          left: W,
           behavior: "smooth"
         });
       }
     },
     [e, l, c, u, g]
   );
-  Q(() => {
+  ee(() => {
     t && l?.current && c && u && b(t);
   }, [t, b, l, c, u]);
   const v = D(
     (E) => {
       if (d < 0) return;
-      const M = e[d], S = Math.max(0, Math.min(M.end - 0.1, M.start + E)), Z = S - M.start, B = [...e];
+      const S = e[d], $ = Math.max(0, Math.min(S.end - 0.1, S.start + E)), _ = $ - S.start, B = [...e];
       if (B[d] = {
-        ...M,
-        start: S
+        ...S,
+        start: $
       }, s && d > 0) {
         const P = B[d - 1];
-        Math.abs(P.end - M.start) < Ut && (B[d - 1] = {
+        Math.abs(P.end - S.start) < Ut && (B[d - 1] = {
           ...P,
-          end: Math.max(P.start + 0.1, P.end + Z)
+          end: Math.max(P.start + 0.1, P.end + _)
         });
       } else if (!s && d > 0) {
         const P = B[d - 1];
-        S < P.end && (B[d - 1] = {
+        $ < P.end && (B[d - 1] = {
           ...P,
-          end: S
+          end: $
         });
       }
       n(B);
@@ -4742,26 +4742,26 @@ function ll({
   ), p = D(
     (E) => {
       if (d < 0) return;
-      const M = e[d], S = Math.max(M.start + 0.1, Math.min(a, M.end + E)), Z = S - M.end, B = [...e];
+      const S = e[d], $ = Math.max(S.start + 0.1, Math.min(a, S.end + E)), _ = $ - S.end, B = [...e];
       if (B[d] = {
-        ...M,
-        end: S
+        ...S,
+        end: $
       }, s && d < e.length - 1) {
         const P = B[d + 1];
-        if (Math.abs(P.start - M.end) < Ut) {
-          const L = Math.min(P.end - 0.1, P.start + Z);
+        if (Math.abs(P.start - S.end) < Ut) {
+          const H = Math.min(P.end - 0.1, P.start + _);
           B[d + 1] = {
             ...P,
-            start: L
+            start: H
           };
           let K = d + 1;
           for (; K < B.length - 1; ) {
-            const H = B[K], G = B[K + 1];
-            if (Math.abs(G.start - e[K].end) < Ut) {
-              const R = H.end - e[K].end;
+            const X = B[K], U = B[K + 1];
+            if (Math.abs(U.start - e[K].end) < Ut) {
+              const W = X.end - e[K].end;
               B[K + 1] = {
-                ...G,
-                start: Math.min(G.end - 0.1, G.start + R)
+                ...U,
+                start: Math.min(U.end - 0.1, U.start + W)
               }, K++;
             } else
               break;
@@ -4769,19 +4769,19 @@ function ll({
         }
       } else if (!s && d < e.length - 1) {
         const P = B[d + 1];
-        if (S > P.start) {
+        if ($ > P.start) {
           B[d + 1] = {
             ...P,
-            start: S
+            start: $
           };
-          let L = d + 1;
-          for (; L < B.length - 1; ) {
-            const K = B[L], H = B[L + 1];
-            if (K.end > H.start)
-              B[L + 1] = {
-                ...H,
+          let H = d + 1;
+          for (; H < B.length - 1; ) {
+            const K = B[H], X = B[H + 1];
+            if (K.end > X.start)
+              B[H + 1] = {
+                ...X,
                 start: K.end
-              }, L++;
+              }, H++;
             else
               break;
           }
@@ -4802,9 +4802,9 @@ function ll({
     r && r(null);
   }, [r]), x = D(() => {
     if (d < 0 || !f) return;
-    const E = e[d], M = o ? void 0 : E.end - E.start;
-    f(E.start, M);
-  }, [e, d, o, f]), k = Ue(
+    const E = e[d], S = o ? void 0 : E.end - E.start;
+    f(E.start, S);
+  }, [e, d, o, f]), k = Je(
     () => [
       {
         key: "[",
@@ -4840,7 +4840,7 @@ function ll({
       }
     ],
     [v, p, x]
-  ), A = Ue(
+  ), A = Je(
     () => [
       {
         key: "ArrowUp",
@@ -4955,51 +4955,51 @@ function ii(e, t = {}) {
   const {
     channelCount: n = 1,
     samplesPerPixel: r = 1024
-  } = t, [a, s] = _(!1), [o, i] = _(!1), [l, c] = _(0), [u, g] = _(new Int16Array(0)), [f, d] = _(null), [b, v] = _(null), [p, h] = _(0), [I, w] = _(0), m = 16, y = W(!1), x = W(null), k = W(null), A = W([]), E = W(0), M = W(null), S = W(0), Z = W(!1), B = W(!1), P = D(async () => {
+  } = t, [a, s] = Z(!1), [o, i] = Z(!1), [l, c] = Z(0), [u, g] = Z(new Int16Array(0)), [f, d] = Z(null), [b, v] = Z(null), [p, h] = Z(0), [I, w] = Z(0), m = 16, y = R(!1), x = R(null), k = R(null), A = R([]), E = R(0), S = R(null), $ = R(0), _ = R(!1), B = R(!1), P = D(async () => {
     if (!y.current)
       try {
-        const R = Me(), ee = new URL("data:text/javascript;base64,InVzZSBzdHJpY3QiOwoKLy8gc3JjL3dvcmtsZXQvcmVjb3JkaW5nLXByb2Nlc3Nvci53b3JrbGV0LnRzCnZhciBSZWNvcmRpbmdQcm9jZXNzb3IgPSBjbGFzcyBleHRlbmRzIEF1ZGlvV29ya2xldFByb2Nlc3NvciB7CiAgY29uc3RydWN0b3IoKSB7CiAgICBzdXBlcigpOwogICAgdGhpcy5idWZmZXJTaXplID0gMDsKICAgIHRoaXMuYnVmZmVycyA9IFtdOwogICAgdGhpcy5zYW1wbGVzQ29sbGVjdGVkID0gMDsKICAgIHRoaXMuaXNSZWNvcmRpbmcgPSBmYWxzZTsKICAgIHRoaXMuY2hhbm5lbENvdW50ID0gMTsKICAgIHRoaXMucG9ydC5vbm1lc3NhZ2UgPSAoZXZlbnQpID0+IHsKICAgICAgY29uc3QgeyBjb21tYW5kLCBzYW1wbGVSYXRlOiBzYW1wbGVSYXRlMiwgY2hhbm5lbENvdW50IH0gPSBldmVudC5kYXRhOwogICAgICBpZiAoY29tbWFuZCA9PT0gInN0YXJ0IikgewogICAgICAgIHRoaXMuaXNSZWNvcmRpbmcgPSB0cnVlOwogICAgICAgIHRoaXMuY2hhbm5lbENvdW50ID0gY2hhbm5lbENvdW50IHx8IDE7CiAgICAgICAgdGhpcy5idWZmZXJTaXplID0gTWF0aC5mbG9vcigoc2FtcGxlUmF0ZTIgfHwgNDhlMykgKiAwLjAxNik7CiAgICAgICAgdGhpcy5idWZmZXJzID0gW107CiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLmNoYW5uZWxDb3VudDsgaSsrKSB7CiAgICAgICAgICB0aGlzLmJ1ZmZlcnNbaV0gPSBuZXcgRmxvYXQzMkFycmF5KHRoaXMuYnVmZmVyU2l6ZSk7CiAgICAgICAgfQogICAgICAgIHRoaXMuc2FtcGxlc0NvbGxlY3RlZCA9IDA7CiAgICAgIH0gZWxzZSBpZiAoY29tbWFuZCA9PT0gInN0b3AiKSB7CiAgICAgICAgdGhpcy5pc1JlY29yZGluZyA9IGZhbHNlOwogICAgICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPiAwKSB7CiAgICAgICAgICB0aGlzLmZsdXNoQnVmZmVycygpOwogICAgICAgIH0KICAgICAgfQogICAgfTsKICB9CiAgcHJvY2VzcyhpbnB1dHMsIG91dHB1dHMsIHBhcmFtZXRlcnMpIHsKICAgIGlmICghdGhpcy5pc1JlY29yZGluZykgewogICAgICByZXR1cm4gdHJ1ZTsKICAgIH0KICAgIGNvbnN0IGlucHV0ID0gaW5wdXRzWzBdOwogICAgaWYgKCFpbnB1dCB8fCBpbnB1dC5sZW5ndGggPT09IDApIHsKICAgICAgcmV0dXJuIHRydWU7CiAgICB9CiAgICBjb25zdCBmcmFtZUNvdW50ID0gaW5wdXRbMF0ubGVuZ3RoOwogICAgZm9yIChsZXQgY2hhbm5lbCA9IDA7IGNoYW5uZWwgPCBNYXRoLm1pbihpbnB1dC5sZW5ndGgsIHRoaXMuY2hhbm5lbENvdW50KTsgY2hhbm5lbCsrKSB7CiAgICAgIGNvbnN0IGlucHV0Q2hhbm5lbCA9IGlucHV0W2NoYW5uZWxdOwogICAgICBjb25zdCBidWZmZXIgPSB0aGlzLmJ1ZmZlcnNbY2hhbm5lbF07CiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZnJhbWVDb3VudDsgaSsrKSB7CiAgICAgICAgYnVmZmVyW3RoaXMuc2FtcGxlc0NvbGxlY3RlZCArIGldID0gaW5wdXRDaGFubmVsW2ldOwogICAgICB9CiAgICB9CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgKz0gZnJhbWVDb3VudDsKICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPj0gdGhpcy5idWZmZXJTaXplKSB7CiAgICAgIHRoaXMuZmx1c2hCdWZmZXJzKCk7CiAgICB9CiAgICByZXR1cm4gdHJ1ZTsKICB9CiAgZmx1c2hCdWZmZXJzKCkgewogICAgY29uc3Qgc2FtcGxlcyA9IHRoaXMuYnVmZmVyc1swXS5zbGljZSgwLCB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQpOwogICAgdGhpcy5wb3J0LnBvc3RNZXNzYWdlKHsKICAgICAgc2FtcGxlcywKICAgICAgc2FtcGxlUmF0ZSwKICAgICAgY2hhbm5lbENvdW50OiB0aGlzLmNoYW5uZWxDb3VudAogICAgfSk7CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPSAwOwogIH0KfTsKcmVnaXN0ZXJQcm9jZXNzb3IoInJlY29yZGluZy1wcm9jZXNzb3IiLCBSZWNvcmRpbmdQcm9jZXNzb3IpOwovLyMgc291cmNlTWFwcGluZ1VSTD1yZWNvcmRpbmctcHJvY2Vzc29yLndvcmtsZXQuanMubWFw", import.meta.url).href;
-        await R.addAudioWorkletModule(ee), y.current = !0;
-      } catch (R) {
-        throw console.error("Failed to load AudioWorklet module:", R), new Error("Failed to load recording processor");
+        const W = Me(), Y = new URL("data:text/javascript;base64,InVzZSBzdHJpY3QiOwoKLy8gc3JjL3dvcmtsZXQvcmVjb3JkaW5nLXByb2Nlc3Nvci53b3JrbGV0LnRzCnZhciBSZWNvcmRpbmdQcm9jZXNzb3IgPSBjbGFzcyBleHRlbmRzIEF1ZGlvV29ya2xldFByb2Nlc3NvciB7CiAgY29uc3RydWN0b3IoKSB7CiAgICBzdXBlcigpOwogICAgdGhpcy5idWZmZXJTaXplID0gMDsKICAgIHRoaXMuYnVmZmVycyA9IFtdOwogICAgdGhpcy5zYW1wbGVzQ29sbGVjdGVkID0gMDsKICAgIHRoaXMuaXNSZWNvcmRpbmcgPSBmYWxzZTsKICAgIHRoaXMuY2hhbm5lbENvdW50ID0gMTsKICAgIHRoaXMucG9ydC5vbm1lc3NhZ2UgPSAoZXZlbnQpID0+IHsKICAgICAgY29uc3QgeyBjb21tYW5kLCBzYW1wbGVSYXRlOiBzYW1wbGVSYXRlMiwgY2hhbm5lbENvdW50IH0gPSBldmVudC5kYXRhOwogICAgICBpZiAoY29tbWFuZCA9PT0gInN0YXJ0IikgewogICAgICAgIHRoaXMuaXNSZWNvcmRpbmcgPSB0cnVlOwogICAgICAgIHRoaXMuY2hhbm5lbENvdW50ID0gY2hhbm5lbENvdW50IHx8IDE7CiAgICAgICAgdGhpcy5idWZmZXJTaXplID0gTWF0aC5mbG9vcigoc2FtcGxlUmF0ZTIgfHwgNDhlMykgKiAwLjAxNik7CiAgICAgICAgdGhpcy5idWZmZXJzID0gW107CiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLmNoYW5uZWxDb3VudDsgaSsrKSB7CiAgICAgICAgICB0aGlzLmJ1ZmZlcnNbaV0gPSBuZXcgRmxvYXQzMkFycmF5KHRoaXMuYnVmZmVyU2l6ZSk7CiAgICAgICAgfQogICAgICAgIHRoaXMuc2FtcGxlc0NvbGxlY3RlZCA9IDA7CiAgICAgIH0gZWxzZSBpZiAoY29tbWFuZCA9PT0gInN0b3AiKSB7CiAgICAgICAgdGhpcy5pc1JlY29yZGluZyA9IGZhbHNlOwogICAgICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPiAwKSB7CiAgICAgICAgICB0aGlzLmZsdXNoQnVmZmVycygpOwogICAgICAgIH0KICAgICAgfQogICAgfTsKICB9CiAgcHJvY2VzcyhpbnB1dHMsIG91dHB1dHMsIHBhcmFtZXRlcnMpIHsKICAgIGlmICghdGhpcy5pc1JlY29yZGluZykgewogICAgICByZXR1cm4gdHJ1ZTsKICAgIH0KICAgIGNvbnN0IGlucHV0ID0gaW5wdXRzWzBdOwogICAgaWYgKCFpbnB1dCB8fCBpbnB1dC5sZW5ndGggPT09IDApIHsKICAgICAgcmV0dXJuIHRydWU7CiAgICB9CiAgICBjb25zdCBmcmFtZUNvdW50ID0gaW5wdXRbMF0ubGVuZ3RoOwogICAgZm9yIChsZXQgY2hhbm5lbCA9IDA7IGNoYW5uZWwgPCBNYXRoLm1pbihpbnB1dC5sZW5ndGgsIHRoaXMuY2hhbm5lbENvdW50KTsgY2hhbm5lbCsrKSB7CiAgICAgIGNvbnN0IGlucHV0Q2hhbm5lbCA9IGlucHV0W2NoYW5uZWxdOwogICAgICBjb25zdCBidWZmZXIgPSB0aGlzLmJ1ZmZlcnNbY2hhbm5lbF07CiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZnJhbWVDb3VudDsgaSsrKSB7CiAgICAgICAgYnVmZmVyW3RoaXMuc2FtcGxlc0NvbGxlY3RlZCArIGldID0gaW5wdXRDaGFubmVsW2ldOwogICAgICB9CiAgICB9CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgKz0gZnJhbWVDb3VudDsKICAgIGlmICh0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPj0gdGhpcy5idWZmZXJTaXplKSB7CiAgICAgIHRoaXMuZmx1c2hCdWZmZXJzKCk7CiAgICB9CiAgICByZXR1cm4gdHJ1ZTsKICB9CiAgZmx1c2hCdWZmZXJzKCkgewogICAgY29uc3Qgc2FtcGxlcyA9IHRoaXMuYnVmZmVyc1swXS5zbGljZSgwLCB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQpOwogICAgdGhpcy5wb3J0LnBvc3RNZXNzYWdlKHsKICAgICAgc2FtcGxlcywKICAgICAgc2FtcGxlUmF0ZSwKICAgICAgY2hhbm5lbENvdW50OiB0aGlzLmNoYW5uZWxDb3VudAogICAgfSk7CiAgICB0aGlzLnNhbXBsZXNDb2xsZWN0ZWQgPSAwOwogIH0KfTsKcmVnaXN0ZXJQcm9jZXNzb3IoInJlY29yZGluZy1wcm9jZXNzb3IiLCBSZWNvcmRpbmdQcm9jZXNzb3IpOwovLyMgc291cmNlTWFwcGluZ1VSTD1yZWNvcmRpbmctcHJvY2Vzc29yLndvcmtsZXQuanMubWFw", import.meta.url).href;
+        await W.addAudioWorkletModule(Y), y.current = !0;
+      } catch (W) {
+        throw console.error("Failed to load AudioWorklet module:", W), new Error("Failed to load recording processor");
       }
-  }, []), L = D(async () => {
+  }, []), H = D(async () => {
     if (!e) {
       v(new Error("No microphone stream available"));
       return;
     }
     try {
       v(null);
-      const R = Me();
-      R.state === "suspended" && await R.resume(), await P();
-      const ee = R.createMediaStreamSource(e);
-      k.current = ee;
-      const J = R.createAudioWorkletNode("recording-processor");
-      x.current = J, ee.connect(J), J.port.onmessage = (ae) => {
-        const { samples: te } = ae.data;
-        A.current.push(te), E.current += te.length, g(
+      const W = Me();
+      W.state === "suspended" && await W.resume(), await P();
+      const Y = W.createMediaStreamSource(e);
+      k.current = Y;
+      const j = W.createAudioWorkletNode("recording-processor");
+      x.current = j, Y.connect(j), j.port.onmessage = (ae) => {
+        const { samples: se } = ae.data;
+        A.current.push(se), E.current += se.length, g(
           (de) => si(
             de,
-            te,
+            se,
             r,
-            E.current - te.length,
+            E.current - se.length,
             m
           )
         );
-      }, J.port.postMessage({
+      }, j.port.postMessage({
         command: "start",
-        sampleRate: R.sampleRate,
+        sampleRate: W.sampleRate,
         channelCount: n
-      }), A.current = [], E.current = 0, g(new Int16Array(0)), d(null), h(0), w(0), Z.current = !0, B.current = !1, s(!0), i(!1), S.current = performance.now();
+      }), A.current = [], E.current = 0, g(new Int16Array(0)), d(null), h(0), w(0), _.current = !0, B.current = !1, s(!0), i(!1), $.current = performance.now();
       const ue = () => {
-        if (Z.current && !B.current) {
-          const ae = (performance.now() - S.current) / 1e3;
-          c(ae), M.current = requestAnimationFrame(ue);
+        if (_.current && !B.current) {
+          const ae = (performance.now() - $.current) / 1e3;
+          c(ae), S.current = requestAnimationFrame(ue);
         }
       };
       ue();
-    } catch (R) {
-      console.error("Failed to start recording:", R), v(R instanceof Error ? R : new Error("Failed to start recording"));
+    } catch (W) {
+      console.error("Failed to start recording:", W), v(W instanceof Error ? W : new Error("Failed to start recording"));
     }
   }, [e, n, r, P, a, o]), K = D(async () => {
     if (!a)
@@ -5013,32 +5013,32 @@ function ii(e, t = {}) {
           }
         x.current.disconnect();
       }
-      M.current !== null && (cancelAnimationFrame(M.current), M.current = null);
-      const R = ai(A.current), J = Me().rawContext, ue = oi(
-        J,
-        R,
-        J.sampleRate,
+      S.current !== null && (cancelAnimationFrame(S.current), S.current = null);
+      const W = ai(A.current), j = Me().rawContext, ue = oi(
+        j,
+        W,
+        j.sampleRate,
         n
       );
-      return d(ue), c(ue.duration), Z.current = !1, B.current = !1, s(!1), i(!1), h(0), ue;
-    } catch (R) {
-      return console.error("Failed to stop recording:", R), v(R instanceof Error ? R : new Error("Failed to stop recording")), null;
+      return d(ue), c(ue.duration), _.current = !1, B.current = !1, s(!1), i(!1), h(0), ue;
+    } catch (W) {
+      return console.error("Failed to stop recording:", W), v(W instanceof Error ? W : new Error("Failed to stop recording")), null;
     }
-  }, [a, n]), H = D(() => {
-    a && !o && (M.current !== null && (cancelAnimationFrame(M.current), M.current = null), B.current = !0, i(!0));
-  }, [a, o]), G = D(() => {
+  }, [a, n]), X = D(() => {
+    a && !o && (S.current !== null && (cancelAnimationFrame(S.current), S.current = null), B.current = !0, i(!0));
+  }, [a, o]), U = D(() => {
     if (a && o) {
-      B.current = !1, i(!1), S.current = performance.now() - l * 1e3;
-      const R = () => {
-        if (Z.current && !B.current) {
-          const ee = (performance.now() - S.current) / 1e3;
-          c(ee), M.current = requestAnimationFrame(R);
+      B.current = !1, i(!1), $.current = performance.now() - l * 1e3;
+      const W = () => {
+        if (_.current && !B.current) {
+          const Y = (performance.now() - $.current) / 1e3;
+          c(Y), S.current = requestAnimationFrame(W);
         }
       };
-      R();
+      W();
     }
   }, [a, o, l]);
-  return Q(() => () => {
+  return ee(() => () => {
     if (x.current) {
       if (x.current.port.postMessage({ command: "stop" }), k.current)
         try {
@@ -5047,7 +5047,7 @@ function ii(e, t = {}) {
         }
       x.current.disconnect();
     }
-    M.current !== null && cancelAnimationFrame(M.current);
+    S.current !== null && cancelAnimationFrame(S.current);
   }, []), {
     isRecording: a,
     isPaused: o,
@@ -5056,15 +5056,15 @@ function ii(e, t = {}) {
     audioBuffer: f,
     level: p,
     peakLevel: I,
-    startRecording: L,
+    startRecording: H,
     stopRecording: K,
-    pauseRecording: H,
-    resumeRecording: G,
+    pauseRecording: X,
+    resumeRecording: U,
     error: b
   };
 }
 function li() {
-  const [e, t] = _(null), [n, r] = _([]), [a, s] = _(!1), [o, i] = _(!1), [l, c] = _(null), u = D(async () => {
+  const [e, t] = Z(null), [n, r] = Z([]), [a, s] = Z(!1), [o, i] = Z(!1), [l, c] = Z(null), u = D(async () => {
     try {
       const b = (await navigator.mediaDevices.enumerateDevices()).filter((v) => v.kind === "audioinput").map((v) => ({
         deviceId: v.deviceId,
@@ -5105,7 +5105,7 @@ function li() {
   }, [e, u]), f = D(() => {
     e && (e.getTracks().forEach((d) => d.stop()), t(null), s(!1));
   }, [e]);
-  return Q(() => (u(), () => {
+  return ee(() => (u(), () => {
     e && e.getTracks().forEach((d) => d.stop());
   }), []), {
     stream: e,
@@ -5121,8 +5121,8 @@ function ci(e, t = {}) {
   const {
     updateRate: n = 60,
     smoothingTimeConstant: r = 0.8
-  } = t, [a, s] = _(0), [o, i] = _(0), l = W(null), c = W(null), u = W(null), g = () => i(0);
-  return Q(() => {
+  } = t, [a, s] = Z(0), [o, i] = Z(0), l = R(null), c = R(null), u = R(null), g = () => i(0);
+  return ee(() => {
     if (!e) {
       s(0), i(0);
       return;
@@ -5165,7 +5165,7 @@ function ci(e, t = {}) {
     resetPeak: g
   };
 }
-$.button`
+M.button`
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -5196,7 +5196,7 @@ $.button`
     box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3);
   }
 `;
-$.span`
+M.span`
   display: inline-block;
   width: 8px;
   height: 8px;
@@ -5215,15 +5215,15 @@ $.span`
     }
   }
 `;
-$(rn)`
+M(rn)`
   min-width: 200px;
 `;
-$(Qn)`
+M(Qn)`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 `;
-$.div`
+M.div`
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -5232,7 +5232,7 @@ $.div`
   border-radius: 0.25rem;
   transition: background 0.2s ease-in-out;
 `;
-$.div`
+M.div`
   width: 12px;
   height: 12px;
   border-radius: 50%;
@@ -5253,20 +5253,20 @@ $.div`
     }
   `}
 `;
-$.span`
+M.span`
   font-family: 'Courier New', Monaco, monospace;
   font-size: 1rem;
   font-weight: 600;
   color: #495057;
   min-width: 70px;
 `;
-$.span`
+M.span`
   font-size: 0.75rem;
   font-weight: 500;
   color: ${(e) => e.$isPaused ? "#ffc107" : "#dc3545"};
   text-transform: uppercase;
 `;
-var ui = $.div`
+var ui = M.div`
   position: relative;
   width: ${(e) => e.$width}px;
   height: ${(e) => e.$height}px;
@@ -5274,7 +5274,7 @@ var ui = $.div`
   border-radius: 4px;
   overflow: hidden;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
-`, di = (e) => e < 0.6 ? "linear-gradient(90deg, #27ae60, #2ecc71)" : e < 0.85 ? "linear-gradient(90deg, #f39c12, #f1c40f)" : "linear-gradient(90deg, #c0392b, #e74c3c)", mi = $.div.attrs((e) => ({
+`, di = (e) => e < 0.6 ? "linear-gradient(90deg, #27ae60, #2ecc71)" : e < 0.85 ? "linear-gradient(90deg, #f39c12, #f1c40f)" : "linear-gradient(90deg, #c0392b, #e74c3c)", mi = M.div.attrs((e) => ({
   style: {
     width: `${e.$level * 100}%`,
     height: `${e.$height}px`,
@@ -5286,7 +5286,7 @@ var ui = $.div`
   left: 0;
   top: 0;
   transition: width 0.05s ease-out, background 0.1s ease-out;
-`, fi = $.div.attrs((e) => ({
+`, fi = M.div.attrs((e) => ({
   style: {
     left: `${e.$peakLevel * 100}%`,
     height: `${e.$height}px`
@@ -5298,14 +5298,14 @@ var ui = $.div`
   background: #ecf0f1;
   box-shadow: 0 0 4px rgba(236, 240, 241, 0.8);
   transition: left 0.1s ease-out;
-`, hi = $.div`
+`, hi = M.div`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: ${(e) => e.$height}px;
   pointer-events: none;
-`, _n = $.div`
+`, _n = M.div`
   position: absolute;
   left: ${(e) => e.$position}%;
   top: 0;
@@ -5320,18 +5320,18 @@ var ui = $.div`
   className: a
 }) => {
   const s = Math.max(0, Math.min(1, e)), o = t !== void 0 ? Math.max(0, Math.min(1, t)) : 0;
-  return /* @__PURE__ */ ne(ui, { $width: n, $height: r, className: a, children: [
+  return /* @__PURE__ */ te(ui, { $width: n, $height: r, className: a, children: [
     /* @__PURE__ */ C(mi, { $level: s, $height: r }),
     t !== void 0 && o > 0 && /* @__PURE__ */ C(fi, { $peakLevel: o, $height: r }),
-    /* @__PURE__ */ ne(hi, { $height: r, children: [
+    /* @__PURE__ */ te(hi, { $height: r, children: [
       /* @__PURE__ */ C(_n, { $position: 60, $height: r }),
       /* @__PURE__ */ C(_n, { $position: 85, $height: r })
     ] })
   ] });
 };
-_e.memo(pi);
+We.memo(pi);
 function cl(e, t, n, r = {}) {
-  const { currentTime: a = 0, audioConstraints: s, ...o } = r, [i, l] = _(!1), [c, u] = _(null), {
+  const { currentTime: a = 0, audioConstraints: s, ...o } = r, [i, l] = Z(!1), [c, u] = Z(null), {
     stream: g,
     devices: f,
     hasPermission: d,
@@ -5346,46 +5346,46 @@ function cl(e, t, n, r = {}) {
     stopRecording: k,
     pauseRecording: A,
     resumeRecording: E,
-    error: M
-  } = ii(g, o), S = D(async () => {
+    error: S
+  } = ii(g, o), $ = D(async () => {
     n && (i || (await Ot(), l(!0)), await x());
-  }, [n, i, x]), Z = D(async () => {
-    const L = await k();
-    if (L && n) {
+  }, [n, i, x]), _ = D(async () => {
+    const H = await k();
+    if (H && n) {
       const K = e.findIndex((ae) => ae.id === n);
       if (K === -1) return;
-      const H = e[K], G = Math.floor(a * L.sampleRate);
-      let R = 0;
-      if (H.clips.length > 0) {
-        const ae = H.clips.map(
-          (te) => te.startSample + te.durationSamples
+      const X = e[K], U = Math.floor(a * H.sampleRate);
+      let W = 0;
+      if (X.clips.length > 0) {
+        const ae = X.clips.map(
+          (se) => se.startSample + se.durationSamples
         );
-        R = Math.max(...ae);
+        W = Math.max(...ae);
       }
-      const ee = Math.max(G, R), J = {
+      const Y = Math.max(U, W), j = {
         id: `clip-${Date.now()}`,
-        audioBuffer: L,
-        startSample: ee,
-        durationSamples: L.length,
+        audioBuffer: H,
+        startSample: Y,
+        durationSamples: H.length,
         offsetSamples: 0,
-        sampleRate: L.sampleRate,
-        sourceDurationSamples: L.length,
+        sampleRate: H.sampleRate,
+        sourceDurationSamples: H.length,
         gain: 1,
         name: `Recording ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`
-      }, ue = e.map((ae, te) => te === K ? {
+      }, ue = e.map((ae, se) => se === K ? {
         ...ae,
-        clips: [...ae.clips, J]
+        clips: [...ae.clips, j]
       } : ae);
       t(ue);
     }
   }, [n, e, t, a, k]);
-  Q(() => {
+  ee(() => {
     d && f.length > 0 && c === null && u(f[0].deviceId);
   }, [d, f.length]);
   const B = D(async () => {
     await b(void 0, s), await Ot(), l(!0);
-  }, [b, s]), P = D(async (L) => {
-    u(L), await b(L, s), await Ot(), l(!0);
+  }, [b, s]), P = D(async (H) => {
+    u(H), await b(H, s), await Ot(), l(!0);
   }, [b, s]);
   return {
     // Recording state
@@ -5394,15 +5394,15 @@ function cl(e, t, n, r = {}) {
     duration: m,
     level: p,
     peakLevel: h,
-    error: v || M,
+    error: v || S,
     // Microphone state
     stream: g,
     devices: f,
     hasPermission: d,
     selectedDevice: c,
     // Recording controls
-    startRecording: S,
-    stopRecording: Z,
+    startRecording: $,
+    stopRecording: _,
     pauseRecording: A,
     resumeRecording: E,
     requestMicAccess: B,
@@ -5725,9 +5725,9 @@ function ml(e) {
   };
 }
 function fl(e = 256) {
-  const [t, n] = _([]), r = W(t);
+  const [t, n] = Z([]), r = R(t);
   r.current = t;
-  const a = W(/* @__PURE__ */ new Map()), s = W(null), o = W(null), i = D((p) => {
+  const a = R(/* @__PURE__ */ new Map()), s = R(null), o = R(null), i = D((p) => {
     const h = o.current;
     if (!h) return;
     const { masterGainNode: I, destination: w, analyserNode: m } = h;
@@ -5805,7 +5805,7 @@ function fl(e = 256) {
   }, []), d = D(() => {
     a.current.forEach((p) => p.dispose()), a.current.clear(), n([]);
   }, []);
-  Q(() => {
+  ee(() => {
     i(t);
   }, [t, i]);
   const b = D(
@@ -5832,7 +5832,7 @@ function fl(e = 256) {
     [e]
     // Only fftSize - reads effects from ref
   );
-  Q(() => () => {
+  ee(() => () => {
     a.current.forEach((p) => p.dispose()), a.current.clear();
   }, []);
   const v = D(() => {
@@ -5872,9 +5872,9 @@ function fl(e = 256) {
   };
 }
 function hl() {
-  const [e, t] = _(
+  const [e, t] = Z(
     /* @__PURE__ */ new Map()
-  ), n = W(/* @__PURE__ */ new Map()), r = W(/* @__PURE__ */ new Map()), a = D((d, b) => {
+  ), n = R(/* @__PURE__ */ new Map()), r = R(/* @__PURE__ */ new Map()), a = D((d, b) => {
     const v = r.current.get(d);
     if (!v) return;
     const { graphEnd: p, masterGainNode: h } = v, I = n.current.get(d);
@@ -5964,7 +5964,7 @@ function hl() {
       const p = new Map(v);
       return p.set(d, []), p;
     });
-  }, []), u = W(e);
+  }, []), u = R(e);
   u.current = e;
   const g = D(
     (d) => (b, v, p) => {
@@ -5988,11 +5988,11 @@ function hl() {
     []
     // No dependencies - stable function that reads from refs
   );
-  Q(() => {
+  ee(() => {
     e.forEach((d, b) => {
       a(b, d);
     });
-  }, [e, a]), Q(() => () => {
+  }, [e, a]), ee(() => () => {
     n.current.forEach((d) => {
       d.forEach((b) => b.dispose()), d.clear();
     }), n.current.clear();
@@ -6062,7 +6062,7 @@ function yi(e, t) {
   r.href = n, r.download = t, r.style.display = "none", document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
 }
 function Ci() {
-  const [e, t] = _(!1), [n, r] = _(0), [a, s] = _(null);
+  const [e, t] = Z(!1), [n, r] = Z(0), [a, s] = Z(null);
   return {
     exportWav: D(async (i, l, c = {}) => {
       const {
@@ -6084,13 +6084,13 @@ function Ci() {
           throw new Error("Invalid track index for individual export");
         const w = i[0].clips[0]?.sampleRate || 44100;
         let m = 0;
-        for (const S of i)
-          for (const Z of S.clips) {
-            const B = Z.startSample + Z.durationSamples;
+        for (const $ of i)
+          for (const _ of $.clips) {
+            const B = _.startSample + _.durationSamples;
             m = Math.max(m, B);
           }
         m += Math.round(w * 0.1);
-        const y = m / w, x = g === "individual" ? [{ track: i[f], state: l[f], index: f }] : i.map((S, Z) => ({ track: S, state: l[Z], index: Z })), k = l.some((S) => S.soloed), A = !!p;
+        const y = m / w, x = g === "individual" ? [{ track: i[f], state: l[f], index: f }] : i.map(($, _) => ({ track: $, state: l[_], index: _ })), k = l.some(($) => $.soloed), A = !!p;
         let E;
         if ((v || A) && b)
           E = await xi(
@@ -6101,32 +6101,32 @@ function Ci() {
             w,
             v,
             p,
-            (S) => {
-              r(S), I?.(S);
+            ($) => {
+              r($), I?.($);
             }
           );
         else {
-          const S = new OfflineAudioContext(2, m, w);
-          let Z = 0;
-          const B = x.reduce((P, { track: L }) => P + L.clips.length, 0);
-          for (const { track: P, state: L } of x)
-            if (!(L.muted && !L.soloed) && !(k && !L.soloed))
+          const $ = new OfflineAudioContext(2, m, w);
+          let _ = 0;
+          const B = x.reduce((P, { track: H }) => P + H.clips.length, 0);
+          for (const { track: P, state: H } of x)
+            if (!(H.muted && !H.soloed) && !(k && !H.soloed))
               for (const K of P.clips) {
-                await Ai(S, K, L, w, b), Z++;
-                const H = Z / B * 0.5;
-                r(H), I?.(H);
+                await Ai($, K, H, w, b), _++;
+                const X = _ / B * 0.5;
+                r(X), I?.(X);
               }
-          r(0.5), I?.(0.5), E = await S.startRendering();
+          r(0.5), I?.(0.5), E = await $.startRendering();
         }
         r(0.9), I?.(0.9);
-        const M = wi(E, { bitDepth: h });
+        const S = wi(E, { bitDepth: h });
         if (r(1), I?.(1), d) {
-          const S = g === "individual" ? `${u}_${i[f].name}` : u;
-          yi(M, `${S}.wav`);
+          const $ = g === "individual" ? `${u}_${i[f].name}` : u;
+          yi(S, `${$}.wav`);
         }
         return {
           audioBuffer: E,
-          blob: M,
+          blob: S,
           duration: y
         };
       } catch (w) {
@@ -6156,16 +6156,16 @@ async function xi(e, t, n, r, a, s, o, i) {
           const y = new c(Ii(m.volume)), x = new g(m.pan), k = new u(m.muted ? 0 : 1), A = o?.(w.id);
           A ? A(k, h, !0) : k.connect(h), x.connect(k), y.connect(x);
           for (const E of w.clips) {
-            const { audioBuffer: M, startSample: S, durationSamples: Z, offsetSamples: B, gain: P, fadeIn: L, fadeOut: K } = E, H = S / a, G = Z / a, R = B / a, ee = new d(M), J = new f(ee), ue = new u(P);
-            if (J.connect(ue), ue.connect(y), L) {
-              const ae = H, te = H + L.duration, de = ue.gain._param;
-              de.setValueAtTime(0, ae), de.linearRampToValueAtTime(P, te);
+            const { audioBuffer: S, startSample: $, durationSamples: _, offsetSamples: B, gain: P, fadeIn: H, fadeOut: K } = E, X = $ / a, U = _ / a, W = B / a, Y = new d(S), j = new f(Y), ue = new u(P);
+            if (j.connect(ue), ue.connect(y), H) {
+              const ae = X, se = X + H.duration, de = ue.gain._param;
+              de.setValueAtTime(0, ae), de.linearRampToValueAtTime(P, se);
             }
             if (K) {
-              const ae = H + G - K.duration, te = H + G, de = ue.gain._param;
-              de.setValueAtTime(P, ae), de.linearRampToValueAtTime(0, te);
+              const ae = X + U - K.duration, se = X + U, de = ue.gain._param;
+              de.setValueAtTime(P, ae), de.linearRampToValueAtTime(0, se);
             }
-            J.start(H, R, G);
+            j.start(X, W, U);
           }
         }
         v.start(0);
@@ -6257,39 +6257,39 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
   progressBarWidth: p,
   children: h
 }) => {
-  const I = p ?? b + v, w = Ue(() => c?.annotations ? c.annotations.map((F) => typeof F.start == "number" ? F : br(F)) : [], [c?.annotations]), m = W(w);
+  const I = p ?? b + v, w = Je(() => c?.annotations ? c.annotations.map((F) => typeof F.start == "number" ? F : br(F)) : [], [c?.annotations]), m = R(w);
   m.current = w;
-  const [y, x] = _(null), [k, A] = _(!1), [E, M] = _(0), [S, Z] = _(0), [B, P] = _([]), [L, K] = _([]), [H, G] = _([]), [R, ee] = _(0), [J, ue] = _(0), [ae, te] = _(null), [de, Qe] = _(o), [z, he] = _(c?.isContinuousPlay ?? !1), [oe, O] = _(c?.linkEndpoints ?? !1), [me, pe] = _(c?.editable ?? !1), [le, Te] = _(!1), [Re, Oe] = _(0), [Je, ie] = _(0), [nt, lt] = _(!1), V = W(null), Ze = W(0), be = W(0), we = W(null), ft = W(H), Y = W(0), ce = W(0), Ce = W(null), Ie = W(null), We = W(!1), rt = W(c?.isContinuousPlay ?? !1), et = W(null), ct = W(a), vt = W(!1), X = W(0), U = W(0), se = W(0), ge = W(0), { timeFormat: ye, setTimeFormat: Fe, formatTime: qe } = js(), Le = qs({ initialSamplesPerPixel: a, zoomLevels: s }), re = Le.samplesPerPixel, { masterVolume: Ae, setMasterVolume: at } = Qs({ playoutRef: V, initialVolume: 1 }), ht = D((F) => {
-    rt.current = F, he(F);
-  }, []), Ke = D((F) => {
-    et.current = F, x(F);
-  }, []), ot = D((F) => {
-    vt.current = F, Te(F);
+  const [y, x] = Z(null), [k, A] = Z(!1), [E, S] = Z(0), [$, _] = Z(0), [B, P] = Z([]), [H, K] = Z([]), [X, U] = Z([]), [W, Y] = Z(0), [j, ue] = Z(0), [ae, se] = Z(null), [de, Oe] = Z(o), [z, me] = Z(c?.isContinuousPlay ?? !1), [ie, G] = Z(c?.linkEndpoints ?? !1), [he, pe] = Z(c?.editable ?? !1), [le, Fe] = Z(!1), [_e, Ke] = Z(0), [Ue, oe] = Z(0), [Qe, rt] = Z(!1), V = R(null), Ze = R(0), be = R(0), we = R(null), ft = R(X), O = R(0), ce = R(0), Ce = R(null), Ie = R(null), Be = R(!1), at = R(c?.isContinuousPlay ?? !1), tt = R(null), ct = R(a), vt = R(!1), L = R(0), J = R(0), re = R(0), ge = R(0), { timeFormat: ye, setTimeFormat: Re, formatTime: et } = js(), Le = qs({ initialSamplesPerPixel: a, zoomLevels: s }), ne = Le.samplesPerPixel, { masterVolume: Ae, setMasterVolume: ot } = Qs({ playoutRef: V, initialVolume: 1 }), ht = D((F) => {
+    at.current = F, me(F);
+  }, []), je = D((F) => {
+    tt.current = F, x(F);
+  }, []), st = D((F) => {
+    vt.current = F, Fe(F);
   }, []), Ge = D((F, N) => {
-    se.current = F, ge.current = N, Oe(F), ie(N);
+    re.current = F, ge.current = N, Ke(F), oe(N);
   }, []), wt = D(() => {
-    const F = X.current, N = U.current;
+    const F = L.current, N = J.current;
     F !== N && N > F && Ge(F, N);
   }, [Ge]), yt = D(() => {
     Ge(0, 0);
   }, [Ge]);
-  Q(() => {
-    We.current = de;
-  }, [de]), Q(() => {
-    ft.current = H;
-  }, [H]), Q(() => {
-    X.current = R, U.current = J;
-  }, [R, J]), Q(() => {
+  ee(() => {
+    Be.current = de;
+  }, [de]), ee(() => {
+    ft.current = X;
+  }, [X]), ee(() => {
+    L.current = W, J.current = j;
+  }, [W, j]), ee(() => {
     if (!Ie.current || !B.length) return;
-    const F = Ie.current, N = ct.current, q = re;
-    if (N === q) return;
-    const fe = l.show ? l.width : 0, j = F.clientWidth, ke = F.scrollLeft + j / 2 - fe, st = B[0].sampleRate, Se = ke * N / st * st / q, Pe = Math.max(0, Se + fe - j / 2);
-    F.scrollLeft = Pe, ct.current = q;
-  }, [re, B, l]);
-  const ut = W(null);
-  Q(() => {
-    if (lt(!1), e.length === 0) {
-      P([]), Z(0), G([]), K([]), V.current && (V.current.dispose(), V.current = null);
+    const F = Ie.current, N = ct.current, Q = ne;
+    if (N === Q) return;
+    const fe = l.show ? l.width : 0, q = F.clientWidth, ke = F.scrollLeft + q / 2 - fe, it = B[0].sampleRate, Se = ke * N / it * it / Q, Pe = Math.max(0, Se + fe - q / 2);
+    F.scrollLeft = Pe, ct.current = Q;
+  }, [ne, B, l]);
+  const ut = R(null);
+  ee(() => {
+    if (rt(!1), e.length === 0) {
+      P([]), _(0), U([]), K([]), V.current && (V.current.dispose(), V.current = null);
       return;
     }
     const F = k, N = be.current;
@@ -6299,13 +6299,13 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
         e.forEach((xe) => {
           xe.clips.length > 0 && xe.clips[0].audioBuffer && fe.push(xe.clips[0].audioBuffer);
         });
-        let j = 0;
+        let q = 0;
         e.forEach((xe) => {
           xe.clips.forEach((Se) => {
             const Pe = Se.sampleRate, Mt = (Se.startSample + Se.durationSamples) / Pe;
-            j = Math.max(j, Mt);
+            q = Math.max(q, Mt);
           });
-        }), P(fe), Z(j), G((xe) => xe.length === e.length ? xe.map((Se, Pe) => ({
+        }), P(fe), _(q), U((xe) => xe.length === e.length ? xe.map((Se, Pe) => ({
           ...Se,
           name: e[Pe].name
         })) : e.map((Se) => ({
@@ -6352,129 +6352,129 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
               // Pass track effects
             });
           }
-        }), $e.applyInitialSoloState(), V.current = $e, lt(!0);
-        const st = new CustomEvent("waveform-playlist:ready", {
+        }), $e.applyInitialSoloState(), V.current = $e, rt(!0);
+        const it = new CustomEvent("waveform-playlist:ready", {
           detail: {
             trackCount: e.length,
-            duration: j
+            duration: q
           }
         });
-        window.dispatchEvent(st), g?.();
+        window.dispatchEvent(it), g?.();
       } catch (fe) {
         console.error("Error loading audio:", fe);
       }
     })(), () => {
       we.current && cancelAnimationFrame(we.current), V.current && V.current.dispose();
     };
-  }, [e, g, k]), Q(() => {
+  }, [e, g, k]), ee(() => {
     if (e.length === 0) return;
-    const F = 16, N = e.map((q) => q.clips.map((j) => {
-      if (j.waveformData) {
+    const F = 16, N = e.map((Q) => Q.clips.map((q) => {
+      if (q.waveformData) {
         const ke = gr(
-          j.waveformData,
+          q.waveformData,
           // Cast to WaveformData type
-          re,
+          ne,
           0,
           // channel index
-          j.offsetSamples,
-          j.durationSamples
+          q.offsetSamples,
+          q.durationSamples
         );
         return {
-          clipId: j.id,
-          trackName: q.name,
+          clipId: q.id,
+          trackName: Q.name,
           peaks: {
             length: ke.length,
             data: [ke.data],
             // Wrap in array for channel compatibility
             bits: ke.bits
           },
-          startSample: j.startSample,
-          durationSamples: j.durationSamples,
-          fadeIn: j.fadeIn,
-          fadeOut: j.fadeOut
+          startSample: q.startSample,
+          durationSamples: q.durationSamples,
+          fadeIn: q.fadeIn,
+          fadeOut: q.fadeOut
         };
       }
-      if (!j.audioBuffer)
-        return console.warn(`Clip "${j.name || j.id}" has neither waveformData nor audioBuffer - rendering empty`), {
-          clipId: j.id,
-          trackName: q.name,
+      if (!q.audioBuffer)
+        return console.warn(`Clip "${q.name || q.id}" has neither waveformData nor audioBuffer - rendering empty`), {
+          clipId: q.id,
+          trackName: Q.name,
           peaks: {
             length: 0,
             data: [],
             bits: F
           },
-          startSample: j.startSample,
-          durationSamples: j.durationSamples,
-          fadeIn: j.fadeIn,
-          fadeOut: j.fadeOut
+          startSample: q.startSample,
+          durationSamples: q.durationSamples,
+          fadeIn: q.fadeIn,
+          fadeOut: q.fadeOut
         };
       const $e = us(
-        j.audioBuffer,
-        re,
+        q.audioBuffer,
+        ne,
         n,
         F,
-        j.offsetSamples,
-        j.durationSamples
+        q.offsetSamples,
+        q.durationSamples
       );
       return {
-        clipId: j.id,
-        trackName: q.name,
+        clipId: q.id,
+        trackName: Q.name,
         peaks: $e,
-        startSample: j.startSample,
-        durationSamples: j.durationSamples,
-        fadeIn: j.fadeIn,
-        fadeOut: j.fadeOut
+        startSample: q.startSample,
+        durationSamples: q.durationSamples,
+        fadeIn: q.fadeIn,
+        fadeOut: q.fadeOut
       };
     }));
     K(N);
-  }, [e, re, n]);
-  const tt = D(() => {
+  }, [e, ne, n]);
+  const nt = D(() => {
     we.current && (cancelAnimationFrame(we.current), we.current = null);
     const F = () => {
-      const N = Me().currentTime - Y.current, q = ce.current + N;
-      be.current = q, M(q);
+      const N = Me().currentTime - O.current, Q = ce.current + N;
+      be.current = Q, S(Q);
       const fe = m.current;
       if (fe.length > 0) {
         const $e = fe.find(
-          (ke) => q >= ke.start && q < ke.end
+          (ke) => Q >= ke.start && Q < ke.end
         );
-        if (rt.current)
-          $e && $e.id !== et.current ? Ke($e.id) : !$e && et.current !== null && Ke(null);
-        else if (et.current) {
-          const ke = fe.find((st) => st.id === et.current);
-          if (ke && q >= ke.end) {
-            V.current && V.current.stop(), A(!1), be.current = Ze.current, M(Ze.current);
+        if (at.current)
+          $e && $e.id !== tt.current ? je($e.id) : !$e && tt.current !== null && je(null);
+        else if (tt.current) {
+          const ke = fe.find((it) => it.id === tt.current);
+          if (ke && Q >= ke.end) {
+            V.current && V.current.stop(), A(!1), be.current = Ze.current, S(Ze.current);
             return;
           }
         } else
-          $e && Ke($e.id);
+          $e && je($e.id);
       }
-      if (We.current && Ie.current && B.length > 0) {
-        const $e = Ie.current, ke = B[0].sampleRate, st = q * ke / ct.current, xe = $e.clientWidth, Se = l.show ? l.width : 0, Pe = st + Se, dt = Math.max(0, Pe - xe / 2);
+      if (Be.current && Ie.current && B.length > 0) {
+        const $e = Ie.current, ke = B[0].sampleRate, it = Q * ke / ct.current, xe = $e.clientWidth, Se = l.show ? l.width : 0, Pe = it + Se, dt = Math.max(0, Pe - xe / 2);
         $e.scrollLeft = dt;
       }
-      if (Ce.current !== null && q >= Ce.current) {
-        V.current && V.current.stop(), A(!1), be.current = Ce.current, M(Ce.current), Ce.current = null;
+      if (Ce.current !== null && Q >= Ce.current) {
+        V.current && V.current.stop(), A(!1), be.current = Ce.current, S(Ce.current), Ce.current = null;
         return;
       }
-      const j = se.current !== ge.current && ge.current > se.current;
-      if (vt.current && j && q >= ge.current) {
+      const q = re.current !== ge.current && ge.current > re.current;
+      if (vt.current && q && Q >= ge.current) {
         V.current?.stop();
         const ke = Me().currentTime;
-        Y.current = ke, ce.current = se.current, be.current = se.current, V.current?.play(ke, se.current), we.current = requestAnimationFrame(F);
+        O.current = ke, ce.current = re.current, be.current = re.current, V.current?.play(ke, re.current), we.current = requestAnimationFrame(F);
         return;
       }
-      if (q >= S) {
-        V.current && V.current.stop(), A(!1), be.current = Ze.current, M(Ze.current), Ke(null);
+      if (Q >= $) {
+        V.current && V.current.stop(), A(!1), be.current = Ze.current, S(Ze.current), je(null);
         return;
       }
       we.current = requestAnimationFrame(F);
     };
     we.current = requestAnimationFrame(F);
-  }, [S, B, re, z]), Ve = D(() => {
+  }, [$, B, ne, z]), Ve = D(() => {
     we.current && (cancelAnimationFrame(we.current), we.current = null);
   }, []);
-  Q(() => {
+  ee(() => {
     (async () => {
       if (k && we.current && V.current)
         if (z) {
@@ -6482,67 +6482,67 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
           V.current.stop(), Ve(), await V.current.init(), V.current.setOnPlaybackComplete(() => {
           });
           const fe = Me().currentTime;
-          Y.current = fe, ce.current = N, V.current.play(fe, N), tt();
+          O.current = fe, ce.current = N, V.current.play(fe, N), nt();
         } else
-          Ve(), tt();
+          Ve(), nt();
     })();
-  }, [z, k, tt, Ve]), Q(() => {
+  }, [z, k, nt, Ve]), ee(() => {
     (async () => {
       if (ut.current && V.current) {
         const { position: N } = ut.current;
         ut.current = null, await V.current.init(), V.current.setOnPlaybackComplete(() => {
         });
         const fe = Me().currentTime;
-        Y.current = fe, ce.current = N, V.current.play(fe, N), A(!0), tt();
+        O.current = fe, ce.current = N, V.current.play(fe, N), A(!0), nt();
       }
     })();
-  }, [e, tt]);
+  }, [e, nt]);
   const Lt = D(async (F, N) => {
     if (!V.current || B.length === 0) return;
     await V.current.init(), await Xn();
-    const q = F ?? be.current;
-    Ze.current = q, be.current = q, V.current.setOnPlaybackComplete(() => {
+    const Q = F ?? be.current;
+    Ze.current = Q, be.current = Q, V.current.setOnPlaybackComplete(() => {
     }), V.current.stop(), Ve();
-    const j = Me().currentTime;
-    Y.current = j, ce.current = q, Ce.current = N !== void 0 ? q + N : null, V.current.play(j, q, N), A(!0), tt();
-  }, [B.length, tt, Ve]), Wr = D(() => {
+    const q = Me().currentTime;
+    O.current = q, ce.current = Q, Ce.current = N !== void 0 ? Q + N : null, V.current.play(q, Q, N), A(!0), nt();
+  }, [B.length, nt, Ve]), Wr = D(() => {
     if (!V.current) return;
-    const F = Me().currentTime - Y.current, N = ce.current + F;
-    V.current.pause(), A(!1), Ve(), be.current = N, M(N);
+    const F = Me().currentTime - O.current, N = ce.current + F;
+    V.current.pause(), A(!1), Ve(), be.current = N, S(N);
   }, [Ve]), Fr = D(() => {
-    V.current && (V.current.stop(), A(!1), Ve(), be.current = Ze.current, M(Ze.current), Ke(null));
+    V.current && (V.current.stop(), A(!1), Ve(), be.current = Ze.current, S(Ze.current), je(null));
   }, [Ve]), _r = D((F) => {
-    const N = Math.max(0, Math.min(F, S));
-    be.current = N, M(N), k && V.current && (V.current.stop(), Ve(), Lt(N));
-  }, [S, k, Lt, Ve]), Zr = D((F, N) => {
-    const q = [...H];
-    if (q[F] = { ...q[F], muted: N }, G(q), V.current) {
+    const N = Math.max(0, Math.min(F, $));
+    be.current = N, S(N), k && V.current && (V.current.stop(), Ve(), Lt(N));
+  }, [$, k, Lt, Ve]), Zr = D((F, N) => {
+    const Q = [...X];
+    if (Q[F] = { ...Q[F], muted: N }, U(Q), V.current) {
       const fe = `track-${F}`;
       V.current.setMute(fe, N);
     }
-  }, [H]), Vr = D((F, N) => {
-    const q = [...H];
-    if (q[F] = { ...q[F], soloed: N }, G(q), V.current) {
+  }, [X]), Vr = D((F, N) => {
+    const Q = [...X];
+    if (Q[F] = { ...Q[F], soloed: N }, U(Q), V.current) {
       const fe = `track-${F}`;
       V.current.setSolo(fe, N);
     }
-  }, [H]), Pr = D((F, N) => {
-    const q = [...H];
-    if (q[F] = { ...q[F], volume: N }, G(q), V.current) {
-      const fe = `track-${F}`, j = V.current.getTrack(fe);
-      j && j.setVolume(N);
+  }, [X]), Pr = D((F, N) => {
+    const Q = [...X];
+    if (Q[F] = { ...Q[F], volume: N }, U(Q), V.current) {
+      const fe = `track-${F}`, q = V.current.getTrack(fe);
+      q && q.setVolume(N);
     }
-  }, [H]), zr = D((F, N) => {
-    const q = [...H];
-    if (q[F] = { ...q[F], pan: N }, G(q), V.current) {
-      const fe = `track-${F}`, j = V.current.getTrack(fe);
-      j && j.setPan(N);
+  }, [X]), zr = D((F, N) => {
+    const Q = [...X];
+    if (Q[F] = { ...Q[F], pan: N }, U(Q), V.current) {
+      const fe = `track-${F}`, q = V.current.getTrack(fe);
+      q && q.setPan(N);
     }
-  }, [H]), Hr = D((F, N) => {
-    ee(F), ue(N), be.current = F, M(F), k && V.current && (V.current.stop(), V.current.play(Me().currentTime, F));
+  }, [X]), Hr = D((F, N) => {
+    Y(F), ue(N), be.current = F, S(F), k && V.current && (V.current.stop(), V.current.play(Me().currentTime, F));
   }, [k]), Xr = D((F) => {
     Ie.current = F;
-  }, []), Gt = W(d);
+  }, []), Gt = R(d);
   Gt.current = d;
   const Lr = D(
     (F) => {
@@ -6560,21 +6560,21 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
     isPlaying: k,
     currentTime: E,
     currentTimeRef: be,
-    playbackStartTimeRef: Y,
+    playbackStartTimeRef: O,
     audioStartPositionRef: ce
   }, fn = {
     continuousPlay: z,
-    linkEndpoints: oe,
-    annotationsEditable: me,
+    linkEndpoints: ie,
+    annotationsEditable: he,
     isAutomaticScroll: de,
     isLoopEnabled: le,
     annotations: w,
     activeAnnotationId: y,
-    selectionStart: R,
-    selectionEnd: J,
+    selectionStart: W,
+    selectionEnd: j,
     selectedTrackId: ae,
-    loopStart: Re,
-    loopEnd: Je
+    loopStart: _e,
+    loopEnd: Ue
   }, hn = {
     // Playback controls
     play: Lt,
@@ -6582,7 +6582,7 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
     stop: Fr,
     seekTo: _r,
     setCurrentTime: (F) => {
-      be.current = F, M(F);
+      be.current = F, S(F);
     },
     // Track controls
     setTrackMute: Zr,
@@ -6591,37 +6591,37 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
     setTrackPan: zr,
     // Selection
     setSelection: Hr,
-    setSelectedTrackId: te,
+    setSelectedTrackId: se,
     // Time format
-    setTimeFormat: Fe,
-    formatTime: qe,
+    setTimeFormat: Re,
+    formatTime: et,
     // Zoom
     zoomIn: Le.zoomIn,
     zoomOut: Le.zoomOut,
     // Master volume
-    setMasterVolume: at,
+    setMasterVolume: ot,
     // Automatic scroll
     setAutomaticScroll: (F) => {
-      Qe(F);
+      Oe(F);
     },
     setScrollContainer: Xr,
     scrollContainerRef: Ie,
     // Annotation controls
     setContinuousPlay: ht,
-    setLinkEndpoints: O,
+    setLinkEndpoints: G,
     setAnnotationsEditable: pe,
     setAnnotations: Lr,
-    setActiveAnnotationId: Ke,
+    setActiveAnnotationId: je,
     // Loop controls
-    setLoopEnabled: ot,
+    setLoopEnabled: st,
     setLoopRegion: Ge,
     setLoopRegionFromSelection: wt,
     clearLoopRegion: yt
   }, pn = {
-    duration: S,
+    duration: $,
     audioBuffers: B,
-    peaksDataArray: L,
-    trackStates: H,
+    peaksDataArray: H,
+    trackStates: X,
     tracks: e,
     sampleRate: Gr,
     waveHeight: r,
@@ -6629,7 +6629,7 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
     minimumPlaylistHeight: Nr,
     controls: l,
     playoutRef: V,
-    samplesPerPixel: re,
+    samplesPerPixel: ne,
     timeFormat: ye,
     masterVolume: Ae,
     canZoomIn: Le.canZoomIn,
@@ -6637,7 +6637,7 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
     barWidth: b,
     barGap: v,
     progressBarWidth: I,
-    isReady: nt,
+    isReady: Qe,
     mono: n
   }, Yr = {
     ...mn,
@@ -6661,7 +6661,7 @@ const Ir = Ee(null), Ar = Ee(null), kr = Ee(null), Sr = Ee(null), $r = Ee(null),
   if (!e)
     throw new Error("usePlaylistControls must be used within WaveformPlaylistProvider");
   return e;
-}, Be = () => {
+}, Te = () => {
   const e = De(Sr);
   if (!e)
     throw new Error("usePlaylistData must be used within WaveformPlaylistProvider");
@@ -6930,135 +6930,135 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   onReady: d,
   children: b
 }) => {
-  const v = g ?? c + u, [p, h] = _(!1), [I, w] = _(0), [m, y] = _(0), [x, k] = _([]), [A, E] = _(a), M = Ue(() => l?.annotations ? l.annotations.map((Y) => typeof Y.start == "number" ? Y : br(Y)) : [], [l?.annotations]), S = W(M);
-  S.current = M;
-  const [Z, B] = _(null), [P, L] = _(
+  const v = g ?? c + u, [p, h] = Z(!1), [I, w] = Z(0), [m, y] = Z(0), [x, k] = Z([]), [A, E] = Z(a), S = Je(() => l?.annotations ? l.annotations.map((O) => typeof O.start == "number" ? O : br(O)) : [], [l?.annotations]), $ = R(S);
+  $.current = S;
+  const [_, B] = Z(null), [P, H] = Z(
     l?.isContinuousPlay ?? !1
-  ), [K] = _(t), [H, G] = _(s), R = W(null), ee = W(0), J = W(null), ue = W(P), ae = W(null), te = W(null), de = W(s), Qe = W(t);
-  Q(() => {
+  ), [K] = Z(t), [X, U] = Z(s), W = R(null), Y = R(0), j = R(null), ue = R(P), ae = R(null), se = R(null), de = R(s), Oe = R(t);
+  ee(() => {
     ue.current = P;
-  }, [P]), Q(() => {
-    de.current = H;
-  }, [H]);
-  const z = D((Y) => {
-    ae.current = Y, B(Y);
-  }, []), he = D((Y) => {
-    ue.current = Y, L(Y);
-  }, []), oe = D((Y) => {
-    te.current = Y;
-  }, []), O = e.waveformData.sample_rate;
-  Q(() => {
-    const Y = new Si({
+  }, [P]), ee(() => {
+    de.current = X;
+  }, [X]);
+  const z = D((O) => {
+    ae.current = O, B(O);
+  }, []), me = D((O) => {
+    ue.current = O, H(O);
+  }, []), ie = D((O) => {
+    se.current = O;
+  }, []), G = e.waveformData.sample_rate;
+  ee(() => {
+    const O = new Si({
       playbackRate: a
     });
-    Y.addTrack({
+    O.addTrack({
       source: e.source,
       peaks: e.waveformData,
       name: e.name
     });
-    const ce = Y.getTrack(Y.track?.id ?? "");
+    const ce = O.getTrack(O.track?.id ?? "");
     return ce && ce.setOnTimeUpdateCallback((Ce) => {
-      ee.current = Ce;
-    }), Y.setOnPlaybackComplete(() => {
-      J.current && (cancelAnimationFrame(J.current), J.current = null), h(!1), z(null), ee.current = 0, w(0);
-    }), R.current = Y, y(e.waveformData.duration), d?.(), () => {
-      J.current && cancelAnimationFrame(J.current), Y.dispose();
+      Y.current = Ce;
+    }), O.setOnPlaybackComplete(() => {
+      j.current && (cancelAnimationFrame(j.current), j.current = null), h(!1), z(null), Y.current = 0, w(0);
+    }), W.current = O, y(e.waveformData.duration), d?.(), () => {
+      j.current && cancelAnimationFrame(j.current), O.dispose();
     };
-  }, [e.source, e.waveformData, e.name, a, d]), Q(() => {
-    const Y = gr(
+  }, [e.source, e.waveformData, e.name, a, d]), ee(() => {
+    const O = gr(
       e.waveformData,
       K,
       0,
       // channel index
       0,
       // offset
-      Math.ceil(e.waveformData.duration * O)
+      Math.ceil(e.waveformData.duration * G)
       // duration in samples
     ), ce = {
       clipId: "media-element-clip",
       trackName: e.name ?? "Track",
       peaks: {
-        length: Y.length,
-        data: [Y.data],
-        bits: Y.bits
+        length: O.length,
+        data: [O.data],
+        bits: O.bits
       },
       startSample: 0,
-      durationSamples: Math.ceil(e.waveformData.duration * O)
+      durationSamples: Math.ceil(e.waveformData.duration * G)
     };
     k([[ce]]);
-  }, [e.waveformData, e.name, K, O]);
-  const me = D(() => {
-    J.current && cancelAnimationFrame(J.current);
-    const Y = () => {
-      const ce = R.current?.getCurrentTime() ?? 0;
-      ee.current = ce, w(ce);
-      const Ce = S.current;
+  }, [e.waveformData, e.name, K, G]);
+  const he = D(() => {
+    j.current && cancelAnimationFrame(j.current);
+    const O = () => {
+      const ce = W.current?.getCurrentTime() ?? 0;
+      Y.current = ce, w(ce);
+      const Ce = $.current;
       if (Ce.length > 0) {
         const Ie = Ce.find(
-          (We) => ce >= We.start && ce < We.end
+          (Be) => ce >= Be.start && ce < Be.end
         );
         if (ue.current)
           Ie && Ie.id !== ae.current ? z(Ie.id) : !Ie && ae.current !== null && z(null);
         else if (ae.current) {
-          const We = Ce.find(
-            (rt) => rt.id === ae.current
+          const Be = Ce.find(
+            (at) => at.id === ae.current
           );
-          if (We && ce >= We.end) {
-            R.current?.stop(), h(!1);
+          if (Be && ce >= Be.end) {
+            W.current?.stop(), h(!1);
             return;
           }
         } else Ie && z(Ie.id);
       }
-      if (de.current && te.current) {
-        const Ie = te.current, We = ce * O / Qe.current, rt = Ie.clientWidth, et = i.show ? i.width : 0, ct = We + et, vt = Math.max(0, ct - rt / 2);
+      if (de.current && se.current) {
+        const Ie = se.current, Be = ce * G / Oe.current, at = Ie.clientWidth, tt = i.show ? i.width : 0, ct = Be + tt, vt = Math.max(0, ct - at / 2);
         Ie.scrollLeft = vt;
       }
-      J.current = requestAnimationFrame(Y);
+      j.current = requestAnimationFrame(O);
     };
-    J.current = requestAnimationFrame(Y);
-  }, [z, O, i]), pe = D(() => {
-    J.current && (cancelAnimationFrame(J.current), J.current = null);
+    j.current = requestAnimationFrame(O);
+  }, [z, G, i]), pe = D(() => {
+    j.current && (cancelAnimationFrame(j.current), j.current = null);
   }, []), le = D(
-    (Y) => {
-      if (!R.current) return;
-      const ce = Y ?? ee.current;
-      R.current.play(void 0, ce), h(!0), me();
+    (O) => {
+      if (!W.current) return;
+      const ce = O ?? Y.current;
+      W.current.play(void 0, ce), h(!0), he();
     },
-    [me]
-  ), Te = D(() => {
-    R.current && (R.current.pause(), h(!1), pe(), w(R.current.getCurrentTime()));
-  }, [pe]), Re = D(() => {
-    R.current && (R.current.stop(), h(!1), pe(), ee.current = 0, w(0), z(null));
-  }, [pe, z]), Oe = D(
-    (Y) => {
-      const ce = Math.max(0, Math.min(Y, m));
-      ee.current = ce, w(ce), R.current && R.current.seekTo(ce);
+    [he]
+  ), Fe = D(() => {
+    W.current && (W.current.pause(), h(!1), pe(), w(W.current.getCurrentTime()));
+  }, [pe]), _e = D(() => {
+    W.current && (W.current.stop(), h(!1), pe(), Y.current = 0, w(0), z(null));
+  }, [pe, z]), Ke = D(
+    (O) => {
+      const ce = Math.max(0, Math.min(O, m));
+      Y.current = ce, w(ce), W.current && W.current.seekTo(ce);
     },
     [m]
-  ), Je = D((Y) => {
-    const ce = Math.max(0.5, Math.min(2, Y));
-    E(ce), R.current && R.current.setPlaybackRate(ce);
-  }, []), ie = r ? 30 : 0, nt = Ue(
+  ), Ue = D((O) => {
+    const ce = Math.max(0.5, Math.min(2, O));
+    E(ce), W.current && W.current.setPlaybackRate(ce);
+  }, []), oe = r ? 30 : 0, Qe = Je(
     () => ({
       isPlaying: p,
       currentTime: I,
-      currentTimeRef: ee
+      currentTimeRef: Y
     }),
     [p, I]
-  ), lt = Ue(
+  ), rt = Je(
     () => ({
       continuousPlay: P,
-      annotations: M,
-      activeAnnotationId: Z,
+      annotations: S,
+      activeAnnotationId: _,
       playbackRate: A,
-      isAutomaticScroll: H
+      isAutomaticScroll: X
     }),
-    [P, M, Z, A, H]
-  ), V = W(f);
+    [P, S, _, A, X]
+  ), V = R(f);
   V.current = f;
   const Ze = D(
-    (Y) => {
-      const ce = typeof Y == "function" ? Y(S.current) : Y;
+    (O) => {
+      const ce = typeof O == "function" ? O($.current) : O;
       if (!V.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."
@@ -7068,32 +7068,32 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
       V.current(ce);
     },
     []
-  ), be = Ue(
+  ), be = Je(
     () => ({
       play: le,
-      pause: Te,
-      stop: Re,
-      seekTo: Oe,
-      setPlaybackRate: Je,
-      setContinuousPlay: he,
+      pause: Fe,
+      stop: _e,
+      seekTo: Ke,
+      setPlaybackRate: Ue,
+      setContinuousPlay: me,
       setAnnotations: Ze,
       setActiveAnnotationId: z,
-      setAutomaticScroll: (Y) => {
-        G(Y);
+      setAutomaticScroll: (O) => {
+        U(O);
       },
-      setScrollContainer: oe,
-      scrollContainerRef: te
+      setScrollContainer: ie,
+      scrollContainerRef: se
     }),
-    [le, Te, Re, Oe, Je, he, Ze, z, oe]
-  ), we = Ue(
+    [le, Fe, _e, Ke, Ue, me, Ze, z, ie]
+  ), we = Je(
     () => ({
       duration: m,
       peaksDataArray: x,
-      sampleRate: O,
+      sampleRate: G,
       waveHeight: n,
-      timeScaleHeight: ie,
+      timeScaleHeight: oe,
       samplesPerPixel: K,
-      playoutRef: R,
+      playoutRef: W,
       controls: i,
       barWidth: c,
       barGap: u,
@@ -7102,9 +7102,9 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
     [
       m,
       x,
-      O,
+      G,
       n,
-      ie,
+      oe,
       K,
       i,
       c,
@@ -7112,7 +7112,7 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
       v
     ]
   ), ft = { ...nr, ...o };
-  return /* @__PURE__ */ C(Nn, { theme: ft, children: /* @__PURE__ */ C(Mr.Provider, { value: nt, children: /* @__PURE__ */ C(Er.Provider, { value: lt, children: /* @__PURE__ */ C(Dr.Provider, { value: be, children: /* @__PURE__ */ C(Tr.Provider, { value: we, children: b }) }) }) }) });
+  return /* @__PURE__ */ C(Nn, { theme: ft, children: /* @__PURE__ */ C(Mr.Provider, { value: Qe, children: /* @__PURE__ */ C(Er.Provider, { value: rt, children: /* @__PURE__ */ C(Dr.Provider, { value: be, children: /* @__PURE__ */ C(Tr.Provider, { value: we, children: b }) }) }) }) });
 }, ln = () => {
   const e = De(Mr);
   if (!e)
@@ -7161,12 +7161,12 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   const { isPlaying: t } = He(), { stop: n } = ve();
   return /* @__PURE__ */ C(Ye, { onClick: n, disabled: !t, className: e, children: "Stop" });
 }, Cl = ({ className: e }) => {
-  const { isPlaying: t } = He(), { play: n, setCurrentTime: r } = ve(), { playoutRef: a } = Be();
+  const { isPlaying: t } = He(), { play: n, setCurrentTime: r } = ve(), { playoutRef: a } = Te();
   return /* @__PURE__ */ C(Ye, { onClick: () => {
     r(0), t && a.current && (a.current.stop(), n(0));
   }, className: e, children: "Rewind" });
 }, xl = ({ className: e }) => {
-  const { isPlaying: t } = He(), { play: n, setCurrentTime: r } = ve(), { duration: a, playoutRef: s } = Be();
+  const { isPlaying: t } = He(), { play: n, setCurrentTime: r } = ve(), { duration: a, playoutRef: s } = Te();
   return /* @__PURE__ */ C(Ye, { onClick: () => {
     r(a), t && s.current && (s.current.stop(), n(a));
   }, className: e, children: "Fast Forward" });
@@ -7174,7 +7174,7 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   skipAmount: e = 5,
   className: t
 }) => {
-  const { currentTimeRef: n, isPlaying: r } = He(), { play: a, setCurrentTime: s } = ve(), { playoutRef: o } = Be();
+  const { currentTimeRef: n, isPlaying: r } = He(), { play: a, setCurrentTime: s } = ve(), { playoutRef: o } = Te();
   return /* @__PURE__ */ C(Ye, { onClick: () => {
     const l = Math.max(0, (n.current ?? 0) - e);
     s(l), r && o.current && (o.current.stop(), a(l));
@@ -7183,13 +7183,13 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   skipAmount: e = 5,
   className: t
 }) => {
-  const { currentTimeRef: n, isPlaying: r } = He(), { play: a, setCurrentTime: s } = ve(), { duration: o, playoutRef: i } = Be();
+  const { currentTimeRef: n, isPlaying: r } = He(), { play: a, setCurrentTime: s } = ve(), { duration: o, playoutRef: i } = Te();
   return /* @__PURE__ */ C(Ye, { onClick: () => {
     const c = Math.min(o, (n.current ?? 0) + e);
     s(c), r && i.current && (i.current.stop(), a(c));
   }, className: t, children: "Skip Forward" });
 }, kl = ({ className: e }) => {
-  const { isLoopEnabled: t, loopStart: n, loopEnd: r } = Xe(), { setLoopEnabled: a, setLoopRegion: s } = ve(), { duration: o } = Be(), i = n !== r && r > n;
+  const { isLoopEnabled: t, loopStart: n, loopEnd: r } = Xe(), { setLoopEnabled: a, setLoopRegion: s } = ve(), { duration: o } = Te(), i = n !== r && r > n;
   return /* @__PURE__ */ C(
     Ye,
     {
@@ -7220,13 +7220,13 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
     }
   );
 }, $l = ({ className: e, disabled: t }) => {
-  const { zoomIn: n } = ve(), { canZoomIn: r } = Be();
-  return /* @__PURE__ */ C(Ye, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom In" });
+  const { zoomIn: n } = ve(), { canZoomIn: r } = Te();
+  return /* @__PURE__ */ C(Ye, { onClick: n, disabled: t || !r, className: e, children: "Zoom In" });
 }, Ml = ({ className: e, disabled: t }) => {
-  const { zoomOut: n } = ve(), { canZoomOut: r } = Be();
-  return /* @__PURE__ */ C(Ye, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom Out" });
+  const { zoomOut: n } = ve(), { canZoomOut: r } = Te();
+  return /* @__PURE__ */ C(Ye, { onClick: n, disabled: t || !r, className: e, children: "Zoom Out" });
 }, El = ({ className: e }) => {
-  const { masterVolume: t } = Be(), { setMasterVolume: n } = ve();
+  const { masterVolume: t } = Te(), { setMasterVolume: n } = ve();
   return /* @__PURE__ */ C(
     co,
     {
@@ -7236,7 +7236,7 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
     }
   );
 }, Dl = ({ className: e }) => {
-  const { timeFormat: t } = Be(), { setTimeFormat: n } = ve();
+  const { timeFormat: t } = Te(), { setTimeFormat: n } = ve();
   return /* @__PURE__ */ C(
     Go,
     {
@@ -7245,15 +7245,15 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
       className: e
     }
   );
-}, $i = $.span`
+}, $i = M.span`
   font-family: 'Courier New', Monaco, monospace;
   font-size: 1rem;
   font-weight: 600;
   color: ${(e) => e.theme?.textColor || "#333"};
   user-select: none;
 `, Tl = ({ className: e }) => {
-  const t = W(null), n = W(null), { isPlaying: r, currentTimeRef: a, playbackStartTimeRef: s, audioStartPositionRef: o } = He(), { timeFormat: i } = Be(), l = i;
-  return Q(() => {
+  const t = R(null), n = R(null), { isPlaying: r, currentTimeRef: a, playbackStartTimeRef: s, audioStartPositionRef: o } = He(), { timeFormat: i } = Te(), l = i;
+  return ee(() => {
     const c = () => {
       if (t.current) {
         let u;
@@ -7269,7 +7269,7 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
     return r ? n.current = requestAnimationFrame(c) : c(), () => {
       n.current && (cancelAnimationFrame(n.current), n.current = null);
     };
-  }, [r, l, a, s, o]), Q(() => {
+  }, [r, l, a, s, o]), ee(() => {
     !r && t.current && (t.current.textContent = bt(a.current ?? 0, l));
   }), /* @__PURE__ */ C($i, { ref: t, className: e, "aria-label": "Audio position", children: bt(a.current ?? 0, l) });
 }, Bl = ({ className: e }) => {
@@ -7349,7 +7349,7 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   onExportComplete: c,
   onExportError: u
 }) => {
-  const { tracks: g, trackStates: f } = Be(), { exportWav: d, isExporting: b, progress: v } = Ci(), p = async () => {
+  const { tracks: g, trackStates: f } = Te(), { exportWav: d, isExporting: b, progress: v } = Ci(), p = async () => {
     try {
       const I = await d(g, f, {
         filename: t,
@@ -7375,12 +7375,15 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
       children: h
     }
   );
-}, Mi = $.div`
+}, Mi = M.div.attrs((e) => ({
+  style: {
+    width: `${e.$width}px`,
+    background: e.$color
+  }
+}))`
   position: absolute;
   top: 0;
   left: 0;
-  width: ${(e) => e.$width}px;
-  background: ${(e) => e.$color};
   height: 100%;
   z-index: 100; /* Below sticky controls (z-index: 101) so playhead is hidden when scrolled behind controls */
   pointer-events: none;
@@ -7389,8 +7392,8 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   color: e = "#ff0000",
   controlsOffset: t = 0
 }) => {
-  const n = W(null), r = W(null), { isPlaying: a, currentTimeRef: s, playbackStartTimeRef: o, audioStartPositionRef: i } = He(), { samplesPerPixel: l, sampleRate: c, progressBarWidth: u } = Be();
-  return Q(() => {
+  const n = R(null), r = R(null), { isPlaying: a, currentTimeRef: s, playbackStartTimeRef: o, audioStartPositionRef: i } = He(), { samplesPerPixel: l, sampleRate: c, progressBarWidth: u } = Te();
+  return ee(() => {
     const g = () => {
       if (n.current) {
         let f;
@@ -7407,36 +7410,42 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
     return a ? r.current = requestAnimationFrame(g) : g(), () => {
       r.current && (cancelAnimationFrame(r.current), r.current = null);
     };
-  }, [a, c, l, t, s, o, i]), Q(() => {
+  }, [a, c, l, t, s, o, i]), ee(() => {
     if (!a && n.current) {
       const f = (s.current ?? 0) * c / l + t;
       n.current.style.transform = `translate3d(${f}px, 0, 0)`;
     }
   }), /* @__PURE__ */ C(Mi, { ref: n, $color: e, $width: u, "data-playhead": !0 });
-}, Di = $.div`
+}, Di = M.div`
   position: relative;
-`, jt = $.div`
+`, jt = M.div.attrs((e) => ({
+  style: {
+    top: `${e.$top}px`,
+    width: `${e.$width}px`,
+    height: `${e.$height}px`,
+    background: e.$color
+  }
+}))`
   position: absolute;
-  top: ${(e) => e.$top}px;
   left: 0;
-  width: ${(e) => e.$width}px;
-  height: ${(e) => e.$height}px;
-  background: ${(e) => e.$color};
   z-index: 0;
   /* Force GPU compositing layer to prevent gradient flickering during scroll */
   transform: translateZ(0);
   backface-visibility: hidden;
   will-change: transform;
-`, Ti = $.div`
+`, Ti = M.div.attrs((e) => ({
+  style: {
+    top: `${e.$top}px`,
+    height: `${e.$height}px`,
+    background: e.$color
+  }
+}))`
   position: absolute;
-  top: ${(e) => e.$top}px;
   left: 0;
-  height: ${(e) => e.$height}px;
-  background: ${(e) => e.$color};
   pointer-events: none;
   z-index: 1;
   will-change: width;
-`, Bi = $.div`
+`, Bi = M.div`
   position: relative;
   z-index: 2;
 `, Pn = ({
@@ -7444,54 +7453,54 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   clipDurationSamples: t,
   ...n
 }) => {
-  const r = W(null), a = W(null), s = $t(), { waveHeight: o } = St(), { isPlaying: i, currentTimeRef: l, playbackStartTimeRef: c, audioStartPositionRef: u } = He(), { samplesPerPixel: g, sampleRate: f } = Be(), d = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
-  Q(() => {
+  const r = R(null), a = R(null), s = $t(), { waveHeight: o } = St(), { isPlaying: i, currentTimeRef: l, playbackStartTimeRef: c, audioStartPositionRef: u } = He(), { samplesPerPixel: g, sampleRate: f } = Te(), d = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
+  ee(() => {
     const k = () => {
       if (r.current) {
         let A;
         if (i) {
-          const Z = Me().currentTime - (c.current ?? 0);
-          A = (u.current ?? 0) + Z;
+          const _ = Me().currentTime - (c.current ?? 0);
+          A = (u.current ?? 0) + _;
         } else
           A = l.current ?? 0;
-        const E = A * f, M = e + t;
-        let S = 0;
+        const E = A * f, S = e + t;
+        let $ = 0;
         if (E <= e)
-          S = 0;
-        else if (E >= M)
-          S = n.length;
+          $ = 0;
+        else if (E >= S)
+          $ = n.length;
         else {
-          const Z = E - e;
-          S = Math.floor(Z / g);
+          const _ = E - e;
+          $ = Math.floor(_ / g);
         }
-        r.current.style.width = `${S}px`;
+        r.current.style.width = `${$}px`;
       }
       i && (a.current = requestAnimationFrame(k));
     };
     return i ? a.current = requestAnimationFrame(k) : k(), () => {
       a.current && (cancelAnimationFrame(a.current), a.current = null);
     };
-  }, [i, f, g, e, t, n.length, l, c, u]), Q(() => {
+  }, [i, f, g, e, t, n.length, l, c, u]), ee(() => {
     if (!i && r.current) {
       const A = (l.current ?? 0) * f, E = e + t;
-      let M = 0;
+      let S = 0;
       if (A <= e)
-        M = 0;
+        S = 0;
       else if (A >= E)
-        M = n.length;
+        S = n.length;
       else {
-        const S = A - e;
-        M = Math.floor(S / g);
+        const $ = A - e;
+        S = Math.floor($ / g);
       }
-      r.current.style.width = `${M}px`;
+      r.current.style.width = `${S}px`;
     }
   });
   const b = s?.waveformDrawMode || "inverted";
   let v;
   b === "inverted" ? v = n.isSelected && s ? s.selectedWaveFillColor : s?.waveFillColor || "white" : v = n.isSelected && s ? s.selectedWaveOutlineColor : s?.waveOutlineColor || "grey";
-  const p = n.renderMode === "spectrogram" || n.renderMode === "both", h = n.renderMode === "both", I = p ? "#000" : it(v), w = Math.floor(o / 2), m = o, y = n.index * o, x = it(v);
-  return /* @__PURE__ */ ne(Di, { children: [
-    h ? /* @__PURE__ */ ne(je, { children: [
+  const p = n.renderMode === "spectrogram" || n.renderMode === "both", h = n.renderMode === "both", I = p ? "#000" : lt(v), w = Math.floor(o / 2), m = o, y = n.index * o, x = lt(v);
+  return /* @__PURE__ */ te(Di, { children: [
+    h ? /* @__PURE__ */ te(qe, { children: [
       /* @__PURE__ */ C(
         jt,
         {
@@ -7558,161 +7567,161 @@ const Wi = 60, Fi = ({
     continuousPlay: k,
     selectedTrackId: A,
     loopStart: E,
-    loopEnd: M,
-    isLoopEnabled: S
+    loopEnd: S,
+    isLoopEnabled: $
   } = Xe(), {
-    setAnnotations: Z,
+    setAnnotations: _,
     setActiveAnnotationId: B,
     setTrackMute: P,
-    setTrackSolo: L,
+    setTrackSolo: H,
     setTrackVolume: K,
-    setTrackPan: H,
-    setSelection: G,
-    play: R,
-    setScrollContainer: ee,
-    setSelectedTrackId: J,
+    setTrackPan: X,
+    setSelection: U,
+    play: W,
+    setScrollContainer: Y,
+    setSelectedTrackId: j,
     setCurrentTime: ue,
     setLoopRegion: ae
   } = ve(), {
-    audioBuffers: te,
+    audioBuffers: se,
     peaksDataArray: de,
-    trackStates: Qe,
+    trackStates: Oe,
     tracks: z,
-    duration: he,
-    samplesPerPixel: oe,
-    sampleRate: O,
-    waveHeight: me,
+    duration: me,
+    samplesPerPixel: ie,
+    sampleRate: G,
+    waveHeight: he,
     timeScaleHeight: pe,
     controls: le,
-    playoutRef: Te,
-    barWidth: Re,
-    barGap: Oe,
-    isReady: Je
-  } = Be(), ie = Ri(), nt = Ue(() => {
-    if (!ie) return /* @__PURE__ */ new Map();
-    const X = /* @__PURE__ */ new Map();
-    return z.forEach((U) => {
-      if ((ie.trackSpectrogramOverrides.get(U.id)?.renderMode ?? U.renderMode ?? "waveform") === "waveform") return;
-      const ge = ie.trackSpectrogramOverrides.get(U.id), ye = ge?.colorMap ?? U.spectrogramColorMap ?? ie.spectrogramColorMap ?? "viridis", Fe = ge?.config ?? U.spectrogramConfig ?? ie.spectrogramConfig;
-      X.set(U.id, {
-        colorLUT: ie.getColorMap(ye),
-        frequencyScaleFn: ie.getFrequencyScale(Fe?.frequencyScale ?? "mel"),
-        config: Fe
+    playoutRef: Fe,
+    barWidth: _e,
+    barGap: Ke,
+    isReady: Ue
+  } = Te(), oe = Ri(), Qe = Je(() => {
+    if (!oe) return /* @__PURE__ */ new Map();
+    const L = /* @__PURE__ */ new Map();
+    return z.forEach((J) => {
+      if ((oe.trackSpectrogramOverrides.get(J.id)?.renderMode ?? J.renderMode ?? "waveform") === "waveform") return;
+      const ge = oe.trackSpectrogramOverrides.get(J.id), ye = ge?.colorMap ?? J.spectrogramColorMap ?? oe.spectrogramColorMap ?? "viridis", Re = ge?.config ?? J.spectrogramConfig ?? oe.spectrogramConfig;
+      L.set(J.id, {
+        colorLUT: oe.getColorMap(ye),
+        frequencyScaleFn: oe.getFrequencyScale(Re?.frequencyScale ?? "mel"),
+        config: Re
       });
-    }), X;
-  }, [z, ie]), lt = Ue(() => {
-    if (ie?.spectrogramWorkerApi)
+    }), L;
+  }, [z, oe]), rt = Je(() => {
+    if (oe?.spectrogramWorkerApi)
       return {
-        registerCanvas: ie.spectrogramWorkerApi.registerCanvas.bind(ie.spectrogramWorkerApi),
-        unregisterCanvas: ie.spectrogramWorkerApi.unregisterCanvas.bind(ie.spectrogramWorkerApi)
+        registerCanvas: oe.spectrogramWorkerApi.registerCanvas.bind(oe.spectrogramWorkerApi),
+        unregisterCanvas: oe.spectrogramWorkerApi.unregisterCanvas.bind(oe.spectrogramWorkerApi)
       };
-  }, [ie?.spectrogramWorkerApi]), [V, Ze] = _(null), [be, we] = _(!1), ft = W(null), Y = D((X) => {
-    ft.current = X, ee(X);
-  }, [ee]);
-  let ce = te.length > 0 ? he : Wi;
+  }, [oe?.spectrogramWorkerApi]), [V, Ze] = Z(null), [be, we] = Z(!1), ft = R(null), O = D((L) => {
+    ft.current = L, Y(L);
+  }, [Y]);
+  let ce = se.length > 0 ? me : Wi;
   if (g?.isRecording) {
-    const U = (g.startSample + g.durationSamples) / O;
-    ce = Math.max(ce, U + 10);
+    const J = (g.startSample + g.durationSamples) / G;
+    ce = Math.max(ce, J + 10);
   }
-  const Ce = Math.floor(ce * O / oe), Ie = async (X) => {
-    B(X.id);
-    const U = k ? void 0 : X.end - X.start;
+  const Ce = Math.floor(ce * G / ie), Ie = async (L) => {
+    B(L.id);
+    const J = k ? void 0 : L.end - L.start;
     try {
-      await R(X.start, U);
-    } catch (se) {
-      console.error("waveform-playlist: Failed to start playback for annotation", X.id, se);
+      await W(L.start, J);
+    } catch (re) {
+      console.error("waveform-playlist: Failed to start playback for annotation", L.id, re);
     }
-  }, We = D((X) => {
-    if (X >= 0 && X < z.length) {
-      const U = z[X];
-      J(U.id);
+  }, Be = D((L) => {
+    if (L >= 0 && L < z.length) {
+      const J = z[L];
+      j(J.id);
     }
-  }, [z, J]), rt = (X) => {
-    const U = X.currentTarget.getBoundingClientRect(), se = le.show ? le.width : 0, ye = (X.clientX - U.left - se) * oe / O, qe = X.clientY - U.top;
-    let Le = 0, re = -1;
+  }, [z, j]), at = (L) => {
+    const J = L.currentTarget.getBoundingClientRect(), re = le.show ? le.width : 0, ye = (L.clientX - J.left - re) * ie / G, et = L.clientY - J.top;
+    let Le = 0, ne = -1;
     for (let Ae = 0; Ae < de.length; Ae++) {
-      const at = de[Ae], ht = at.length > 0 ? Math.max(...at.map((wt) => wt.peaks.data.length)) : 1, Ge = ((ie?.trackSpectrogramOverrides.get(z[Ae]?.id)?.renderMode ?? z[Ae]?.renderMode ?? "waveform") === "both" ? ht * 2 : ht) * me + (o ? 22 : 0);
-      if (qe >= Le && qe < Le + Ge) {
-        re = Ae;
+      const ot = de[Ae], ht = ot.length > 0 ? Math.max(...ot.map((wt) => wt.peaks.data.length)) : 1, Ge = ((oe?.trackSpectrogramOverrides.get(z[Ae]?.id)?.renderMode ?? z[Ae]?.renderMode ?? "waveform") === "both" ? ht * 2 : ht) * he + (o ? 22 : 0);
+      if (et >= Le && et < Le + Ge) {
+        ne = Ae;
         break;
       }
       Le += Ge;
     }
-    re !== -1 && We(re), we(!0), ue(ye), G(ye, ye);
-  }, et = (X) => {
+    ne !== -1 && Be(ne), we(!0), ue(ye), U(ye, ye);
+  }, tt = (L) => {
     if (!be) return;
-    const U = X.currentTarget.getBoundingClientRect(), se = le.show ? le.width : 0, ye = (X.clientX - U.left - se) * oe / O, Fe = Math.min(h, ye), qe = Math.max(h, ye);
-    G(Fe, qe);
-  }, ct = (X) => {
+    const J = L.currentTarget.getBoundingClientRect(), re = le.show ? le.width : 0, ye = (L.clientX - J.left - re) * ie / G, Re = Math.min(h, ye), et = Math.max(h, ye);
+    U(Re, et);
+  }, ct = (L) => {
     if (!be) return;
     we(!1);
-    const U = X.currentTarget.getBoundingClientRect(), se = le.show ? le.width : 0, ye = (X.clientX - U.left - se) * oe / O, Fe = Math.min(h, ye), qe = Math.max(h, ye);
-    Math.abs(qe - Fe) < 0.1 ? (ue(Fe), d && Te.current ? (Te.current.stop(), R(Fe)) : Te.current && Te.current.stop()) : G(Fe, qe);
+    const J = L.currentTarget.getBoundingClientRect(), re = le.show ? le.width : 0, ye = (L.clientX - J.left - re) * ie / G, Re = Math.min(h, ye), et = Math.max(h, ye);
+    Math.abs(et - Re) < 0.1 ? (ue(Re), d && Fe.current ? (Fe.current.stop(), W(Re)) : Fe.current && Fe.current.stop()) : U(Re, et);
   };
-  return z.some((X) => X.clips.length > 0) && (te.length === 0 || de.length === 0) ? /* @__PURE__ */ C("div", { className: s, children: "Loading waveform..." }) : /* @__PURE__ */ ne(cr, { children: [
+  return z.some((L) => L.clips.length > 0) && (se.length === 0 || de.length === 0) ? /* @__PURE__ */ C("div", { className: s, children: "Loading waveform..." }) : /* @__PURE__ */ te(cr, { children: [
     /* @__PURE__ */ C(
       kt.Provider,
       {
         value: {
-          samplesPerPixel: oe,
-          sampleRate: O,
-          zoomLevels: [oe],
-          waveHeight: me,
+          samplesPerPixel: ie,
+          sampleRate: G,
+          zoomLevels: [ie],
+          waveHeight: he,
           timeScaleHeight: pe,
           duration: ce * 1e3,
           controls: le,
-          barWidth: Re,
-          barGap: Oe
+          barWidth: _e,
+          barGap: Ke
         },
         children: /* @__PURE__ */ C(
           an,
           {
             theme: f,
-            backgroundColor: it(f.waveOutlineColor),
+            backgroundColor: lt(f.waveOutlineColor),
             timescaleBackgroundColor: f.timescaleBackgroundColor,
             scrollContainerWidth: Ce + (le.show ? le.width : 0),
             timescaleWidth: Ce,
             tracksWidth: Ce,
             controlsWidth: le.show ? le.width : 0,
-            onTracksMouseDown: rt,
-            onTracksMouseMove: et,
+            onTracksMouseDown: at,
+            onTracksMouseMove: tt,
             onTracksMouseUp: ct,
-            scrollContainerRef: Y,
+            scrollContainerRef: O,
             isSelecting: be,
-            "data-playlist-state": Je ? "ready" : "loading",
-            timescale: pe > 0 ? /* @__PURE__ */ ne(je, { children: [
+            "data-playlist-state": Ue ? "ready" : "loading",
+            timescale: pe > 0 ? /* @__PURE__ */ te(qe, { children: [
               /* @__PURE__ */ C(dr, { renderTimestamp: t }),
-              S && /* @__PURE__ */ C(
+              $ && /* @__PURE__ */ C(
                 yo,
                 {
-                  startPosition: Math.min(E, M) * O / oe,
-                  endPosition: Math.max(E, M) * O / oe,
+                  startPosition: Math.min(E, S) * G / ie,
+                  endPosition: Math.max(E, S) * G / ie,
                   markerColor: f.loopMarkerColor,
                   regionColor: f.loopRegionColor,
                   minPosition: 0,
                   maxPosition: Ce,
                   controlsOffset: le.show ? le.width : 0,
-                  onLoopRegionChange: (X, U) => {
-                    const se = X * oe / O, ge = U * oe / O;
-                    ae(se, ge);
+                  onLoopRegionChange: (L, J) => {
+                    const re = L * ie / G, ge = J * ie / G;
+                    ae(re, ge);
                   }
                 }
               )
             ] }) : void 0,
-            children: /* @__PURE__ */ ne(je, { children: [
-              de.map((X, U) => {
-                const se = z[U];
-                if (!se) return null;
-                const ge = Qe[U] || {
-                  name: `Track ${U + 1}`,
+            children: /* @__PURE__ */ te(qe, { children: [
+              de.map((L, J) => {
+                const re = z[J];
+                if (!re) return null;
+                const ge = Oe[J] || {
+                  name: `Track ${J + 1}`,
                   muted: !1,
                   soloed: !1,
                   volume: 1,
                   pan: 0
-                }, ye = ie?.trackSpectrogramOverrides.get(se.id)?.renderMode ?? se.renderMode ?? "waveform", Fe = e ? e(U) : /* @__PURE__ */ ne(Jo, { onClick: () => We(U), children: [
-                  /* @__PURE__ */ ne(qo, { style: { justifyContent: "center", position: "relative" }, children: [
-                    u && /* @__PURE__ */ C(jo, { onClick: (re) => {
-                      re.stopPropagation(), u(U);
+                }, ye = oe?.trackSpectrogramOverrides.get(re.id)?.renderMode ?? re.renderMode ?? "waveform", Re = e ? e(J) : /* @__PURE__ */ te(Jo, { onClick: () => Be(J), children: [
+                  /* @__PURE__ */ te(qo, { style: { justifyContent: "center", position: "relative" }, children: [
+                    u && /* @__PURE__ */ C(jo, { onClick: (ne) => {
+                      ne.stopPropagation(), u(J);
                     } }),
                     /* @__PURE__ */ C("span", { style: {
                       overflow: "hidden",
@@ -7720,25 +7729,25 @@ const Wi = 60, Fi = ({
                       whiteSpace: "nowrap",
                       padding: "0 24px",
                       display: "block"
-                    }, children: ge.name || `Track ${U + 1}` }),
-                    ie?.renderMenuItems && /* @__PURE__ */ C("span", { style: { position: "absolute", right: 0, top: 0 }, children: /* @__PURE__ */ C(
+                    }, children: ge.name || `Track ${J + 1}` }),
+                    oe?.renderMenuItems && /* @__PURE__ */ C("span", { style: { position: "absolute", right: 0, top: 0 }, children: /* @__PURE__ */ C(
                       ss,
                       {
-                        items: (re) => ie.renderMenuItems({
+                        items: (ne) => oe.renderMenuItems({
                           renderMode: ye,
-                          onRenderModeChange: (Ae) => ie.setTrackRenderMode(se.id, Ae),
-                          onOpenSettings: () => Ze(se.id),
-                          onClose: re
+                          onRenderModeChange: (Ae) => oe.setTrackRenderMode(re.id, Ae),
+                          onOpenSettings: () => Ze(re.id),
+                          onClose: ne
                         })
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ ne(Ko, { children: [
+                  /* @__PURE__ */ te(Ko, { children: [
                     /* @__PURE__ */ C(
                       En,
                       {
                         $variant: ge.muted ? "danger" : "outline",
-                        onClick: () => P(U, !ge.muted),
+                        onClick: () => P(J, !ge.muted),
                         children: "Mute"
                       }
                     ),
@@ -7746,12 +7755,12 @@ const Wi = 60, Fi = ({
                       En,
                       {
                         $variant: ge.soloed ? "info" : "outline",
-                        onClick: () => L(U, !ge.soloed),
+                        onClick: () => H(J, !ge.soloed),
                         children: "Solo"
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ ne(Tn, { children: [
+                  /* @__PURE__ */ te(Tn, { children: [
                     /* @__PURE__ */ C(Qo, {}),
                     /* @__PURE__ */ C(
                       Dn,
@@ -7760,12 +7769,12 @@ const Wi = 60, Fi = ({
                         max: "1",
                         step: "0.01",
                         value: ge.volume,
-                        onChange: (re) => K(U, parseFloat(re.target.value))
+                        onChange: (ne) => K(J, parseFloat(ne.target.value))
                       }
                     ),
                     /* @__PURE__ */ C(es, {})
                   ] }),
-                  /* @__PURE__ */ ne(Tn, { children: [
+                  /* @__PURE__ */ te(Tn, { children: [
                     /* @__PURE__ */ C("span", { children: "L" }),
                     /* @__PURE__ */ C(
                       Dn,
@@ -7774,33 +7783,33 @@ const Wi = 60, Fi = ({
                         max: "1",
                         step: "0.01",
                         value: ge.pan,
-                        onChange: (re) => H(U, parseFloat(re.target.value))
+                        onChange: (ne) => X(J, parseFloat(ne.target.value))
                       }
                     ),
                     /* @__PURE__ */ C("span", { children: "R" })
                   ] })
-                ] }), Le = X.length > 0 ? Math.max(...X.map((re) => re.peaks.data.length)) : 1;
-                return /* @__PURE__ */ C(sn.Provider, { value: Fe, children: /* @__PURE__ */ ne(
+                ] }), Le = L.length > 0 ? Math.max(...L.map((ne) => ne.peaks.data.length)) : 1;
+                return /* @__PURE__ */ C(sn.Provider, { value: Re, children: /* @__PURE__ */ te(
                   mr,
                   {
                     numChannels: Le,
-                    backgroundColor: it(f.waveOutlineColor),
+                    backgroundColor: lt(f.waveOutlineColor),
                     offset: 0,
                     width: Ce,
                     hasClipHeaders: o,
-                    trackId: se.id,
-                    isSelected: se.id === A,
+                    trackId: re.id,
+                    isSelected: re.id === A,
                     children: [
                       ye !== "waveform" && (() => {
-                        const re = nt.get(se.id), Ae = re?.config;
-                        return !Ae?.labels || !re ? null : /* @__PURE__ */ C(
+                        const ne = Qe.get(re.id), Ae = ne?.config;
+                        return !Ae?.labels || !ne ? null : /* @__PURE__ */ C(
                           Ro,
                           {
-                            waveHeight: me,
+                            waveHeight: he,
                             numChannels: Le,
-                            frequencyScaleFn: re.frequencyScaleFn,
+                            frequencyScaleFn: ne.frequencyScaleFn,
                             minFrequency: Ae.minFrequency ?? 0,
-                            maxFrequency: Ae.maxFrequency ?? O / 2,
+                            maxFrequency: Ae.maxFrequency ?? G / 2,
                             labelsColor: Ae.labelsColor,
                             labelsBackground: Ae.labelsBackground,
                             renderMode: ye,
@@ -7808,76 +7817,76 @@ const Wi = 60, Fi = ({
                           }
                         );
                       })(),
-                      X.map((re, Ae) => {
-                        const at = re.peaks, ht = at.length;
+                      L.map((ne, Ae) => {
+                        const ot = ne.peaks, ht = ot.length;
                         return /* @__PURE__ */ C(
                           qt,
                           {
-                            clipId: re.clipId,
-                            trackIndex: U,
+                            clipId: ne.clipId,
+                            trackIndex: J,
                             clipIndex: Ae,
-                            trackName: re.trackName,
-                            startSample: re.startSample,
-                            durationSamples: re.durationSamples,
-                            samplesPerPixel: oe,
+                            trackName: ne.trackName,
+                            startSample: ne.startSample,
+                            durationSamples: ne.durationSamples,
+                            samplesPerPixel: ie,
                             showHeader: o,
                             disableHeaderDrag: !i,
-                            isSelected: se.id === A,
-                            trackId: se.id,
-                            fadeIn: re.fadeIn,
-                            fadeOut: re.fadeOut,
-                            sampleRate: O,
+                            isSelected: re.id === A,
+                            trackId: re.id,
+                            fadeIn: ne.fadeIn,
+                            fadeOut: ne.fadeOut,
+                            sampleRate: G,
                             showFades: l,
                             touchOptimized: c,
-                            onMouseDown: (Ke) => {
-                              Ke.target.closest('[role="button"][aria-roledescription="draggable"]') || We(U);
+                            onMouseDown: (je) => {
+                              je.target.closest('[role="button"][aria-roledescription="draggable"]') || Be(J);
                             },
-                            children: at.data.map((Ke, ot) => {
-                              const Ge = ie?.spectrogramDataMap.get(re.clipId), wt = Ge?.[ot] ?? Ge?.[0], yt = nt.get(se.id), ut = yt?.config;
+                            children: ot.data.map((je, st) => {
+                              const Ge = oe?.spectrogramDataMap.get(ne.clipId), wt = Ge?.[st] ?? Ge?.[0], yt = Qe.get(re.id), ut = yt?.config;
                               return /* @__PURE__ */ C(
                                 Pn,
                                 {
-                                  index: ot,
-                                  data: Ke,
-                                  bits: at.bits,
+                                  index: st,
+                                  data: je,
+                                  bits: ot.bits,
                                   length: ht,
-                                  isSelected: se.id === A,
-                                  clipStartSample: re.startSample,
-                                  clipDurationSamples: re.durationSamples,
+                                  isSelected: re.id === A,
+                                  clipStartSample: ne.startSample,
+                                  clipDurationSamples: ne.durationSamples,
                                   renderMode: ye,
                                   spectrogramData: wt,
-                                  samplesPerPixel: oe,
+                                  samplesPerPixel: ie,
                                   spectrogramColorLUT: yt?.colorLUT,
                                   spectrogramFrequencyScaleFn: yt?.frequencyScaleFn,
                                   spectrogramMinFrequency: ut?.minFrequency,
                                   spectrogramMaxFrequency: ut?.maxFrequency,
-                                  spectrogramWorkerApi: lt,
-                                  spectrogramClipId: re.clipId,
-                                  spectrogramOnCanvasesReady: ie ? (tt, Ve) => {
-                                    ie.registerSpectrogramCanvases(re.clipId, ot, tt, Ve);
+                                  spectrogramWorkerApi: rt,
+                                  spectrogramClipId: ne.clipId,
+                                  spectrogramOnCanvasesReady: oe ? (nt, Ve) => {
+                                    oe.registerSpectrogramCanvases(ne.clipId, st, nt, Ve);
                                   } : void 0
                                 },
-                                `${re.clipId}-${ot}`
+                                `${ne.clipId}-${st}`
                               );
                             })
                           },
-                          re.clipId
+                          ne.clipId
                         );
                       }),
-                      g?.isRecording && g.trackId === se.id && g.peaks.length > 0 && /* @__PURE__ */ C(
+                      g?.isRecording && g.trackId === re.id && g.peaks.length > 0 && /* @__PURE__ */ C(
                         qt,
                         {
                           clipId: "recording-preview",
-                          trackIndex: U,
-                          clipIndex: X.length,
+                          trackIndex: J,
+                          clipIndex: L.length,
                           trackName: "Recording...",
                           startSample: g.startSample,
                           durationSamples: g.durationSamples,
-                          samplesPerPixel: oe,
+                          samplesPerPixel: ie,
                           showHeader: o,
                           disableHeaderDrag: !0,
-                          isSelected: se.id === A,
-                          trackId: se.id,
+                          isSelected: re.id === A,
+                          trackId: re.id,
                           children: /* @__PURE__ */ C(
                             Pn,
                             {
@@ -7885,54 +7894,54 @@ const Wi = 60, Fi = ({
                               data: g.peaks,
                               bits: 16,
                               length: Math.floor(g.peaks.length / 2),
-                              isSelected: se.id === A,
+                              isSelected: re.id === A,
                               clipStartSample: g.startSample,
                               clipDurationSamples: g.durationSamples
                             },
-                            `${se.id}-recording-0`
+                            `${re.id}-recording-0`
                           )
                         },
-                        `${se.id}-recording`
+                        `${re.id}-recording`
                       )
                     ]
                   }
-                ) }, se.id);
+                ) }, re.id);
               }),
-              w.length > 0 && /* @__PURE__ */ C(wr, { height: 30, width: Ce, children: w.map((X, U) => {
-                const se = X.start * O / oe, ge = X.end * O / oe, ye = a ? a(X, U) : X.id;
+              w.length > 0 && /* @__PURE__ */ C(wr, { height: 30, width: Ce, children: w.map((L, J) => {
+                const re = L.start * G / ie, ge = L.end * G / ie, ye = a ? a(L, J) : L.id;
                 return /* @__PURE__ */ C(
                   vr,
                   {
-                    annotationId: X.id,
-                    annotationIndex: U,
-                    startPosition: se,
+                    annotationId: L.id,
+                    annotationIndex: J,
+                    startPosition: re,
                     endPosition: ge,
                     label: ye,
                     color: "#ff9800",
-                    isActive: X.id === m,
-                    onClick: () => Ie(X),
+                    isActive: L.id === m,
+                    onClick: () => Ie(L),
                     editable: y
                   },
-                  X.id
+                  L.id
                 );
               }) }),
               h !== I && /* @__PURE__ */ C(
                 sr,
                 {
-                  startPosition: Math.min(h, I) * O / oe + (le.show ? le.width : 0),
-                  endPosition: Math.max(h, I) * O / oe + (le.show ? le.width : 0),
+                  startPosition: Math.min(h, I) * G / ie + (le.show ? le.width : 0),
+                  endPosition: Math.max(h, I) * G / ie + (le.show ? le.width : 0),
                   color: f.selectionColor
                 }
               ),
               (d || h === I) && (n ? n({
-                position: (b.current ?? 0) * O / oe + (le.show ? le.width : 0),
+                position: (b.current ?? 0) * G / ie + (le.show ? le.width : 0),
                 color: f.playheadColor,
                 isPlaying: d,
                 currentTimeRef: b,
                 playbackStartTimeRef: v,
                 audioStartPositionRef: p,
-                samplesPerPixel: oe,
-                sampleRate: O,
+                samplesPerPixel: ie,
+                sampleRate: G,
                 controlsOffset: le.show ? le.width : 0,
                 getAudioContextTime: () => Me().currentTime
               }) : /* @__PURE__ */ C(
@@ -7947,16 +7956,16 @@ const Wi = 60, Fi = ({
         )
       }
     ),
-    ie?.SettingsModal && typeof document < "u" && Yn(
+    oe?.SettingsModal && typeof document < "u" && Yn(
       /* @__PURE__ */ C(
-        ie.SettingsModal,
+        oe.SettingsModal,
         {
           open: V !== null,
           onClose: () => Ze(null),
-          config: V !== null ? ie.trackSpectrogramOverrides.get(V)?.config ?? z.find((X) => X.id === V)?.spectrogramConfig ?? ie.spectrogramConfig ?? {} : {},
-          colorMap: V !== null ? ie.trackSpectrogramOverrides.get(V)?.colorMap ?? z.find((X) => X.id === V)?.spectrogramColorMap ?? ie.spectrogramColorMap ?? "viridis" : "viridis",
-          onApply: (X, U) => {
-            V !== null && ie.setTrackSpectrogramConfig(V, X, U);
+          config: V !== null ? oe.trackSpectrogramOverrides.get(V)?.config ?? z.find((L) => L.id === V)?.spectrogramConfig ?? oe.spectrogramConfig ?? {} : {},
+          colorMap: V !== null ? oe.trackSpectrogramOverrides.get(V)?.colorMap ?? z.find((L) => L.id === V)?.spectrogramColorMap ?? oe.spectrogramColorMap ?? "viridis" : "viridis",
+          onApply: (L, J) => {
+            V !== null && oe.setTrackSpectrogramConfig(V, L, J);
           }
         }
       ),
@@ -8017,7 +8026,7 @@ const Wi = 60, Fi = ({
   recordingState: p
 }) => {
   const { annotations: h } = Xe();
-  return /* @__PURE__ */ ne(je, { children: [
+  return /* @__PURE__ */ te(qe, { children: [
     /* @__PURE__ */ C(
       Fi,
       {
@@ -8047,7 +8056,7 @@ const Wi = 60, Fi = ({
       }
     )
   ] });
-}, Zi = $.div`
+}, Zi = M.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -8061,8 +8070,8 @@ const Wi = 60, Fi = ({
   color: e = "#ff0000",
   controlsOffset: t = 0
 }) => {
-  const n = W(null), r = W(null), { isPlaying: a, currentTimeRef: s } = ln(), { samplesPerPixel: o, sampleRate: i, progressBarWidth: l } = un();
-  return Q(() => {
+  const n = R(null), r = R(null), { isPlaying: a, currentTimeRef: s } = ln(), { samplesPerPixel: o, sampleRate: i, progressBarWidth: l } = un();
+  return ee(() => {
     const c = () => {
       if (n.current) {
         const g = (s.current ?? 0) * i / o + t;
@@ -8073,15 +8082,15 @@ const Wi = 60, Fi = ({
     return a ? r.current = requestAnimationFrame(c) : c(), () => {
       r.current && (cancelAnimationFrame(r.current), r.current = null);
     };
-  }, [a, i, o, t, s]), Q(() => {
+  }, [a, i, o, t, s]), ee(() => {
     if (!a && n.current) {
       const u = (s.current ?? 0) * i / o + t;
       n.current.style.transform = `translate3d(${u}px, 0, 0)`;
     }
   }), /* @__PURE__ */ C(Zi, { ref: n, $color: e, $width: l, "data-playhead": !0 });
-}, Pi = $.div`
+}, Pi = M.div`
   position: relative;
-`, zi = $.div`
+`, zi = M.div`
   position: absolute;
   top: ${(e) => e.$top}px;
   left: 0;
@@ -8092,7 +8101,7 @@ const Wi = 60, Fi = ({
   transform: translateZ(0);
   backface-visibility: hidden;
   will-change: transform;
-`, Hi = $.div`
+`, Hi = M.div`
   position: absolute;
   top: ${(e) => e.$top}px;
   left: 0;
@@ -8101,7 +8110,7 @@ const Wi = 60, Fi = ({
   pointer-events: none;
   z-index: 1;
   will-change: width;
-`, Xi = $.div`
+`, Xi = M.div`
   position: relative;
   z-index: 2;
 `, Li = ({
@@ -8109,8 +8118,8 @@ const Wi = 60, Fi = ({
   clipDurationSamples: t,
   ...n
 }) => {
-  const r = W(null), a = W(null), s = $t(), { waveHeight: o } = St(), { isPlaying: i, currentTimeRef: l } = ln(), { samplesPerPixel: c, sampleRate: u } = un(), g = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
-  Q(() => {
+  const r = R(null), a = R(null), s = $t(), { waveHeight: o } = St(), { isPlaying: i, currentTimeRef: l } = ln(), { samplesPerPixel: c, sampleRate: u } = un(), g = s?.waveProgressColor || "rgba(0, 0, 0, 0.1)";
+  ee(() => {
     const v = () => {
       if (r.current) {
         const h = (l.current ?? 0) * u, I = e + t;
@@ -8130,7 +8139,7 @@ const Wi = 60, Fi = ({
     return i ? a.current = requestAnimationFrame(v) : v(), () => {
       a.current && (cancelAnimationFrame(a.current), a.current = null);
     };
-  }, [i, u, c, e, t, n.length, l]), Q(() => {
+  }, [i, u, c, e, t, n.length, l]), ee(() => {
     if (!i && r.current) {
       const p = (l.current ?? 0) * u, h = e + t;
       let I = 0;
@@ -8148,8 +8157,8 @@ const Wi = 60, Fi = ({
   const f = s?.waveformDrawMode || "inverted";
   let d;
   f === "inverted" ? d = s?.selectedWaveFillColor || s?.waveFillColor || "white" : d = s?.selectedWaveOutlineColor || s?.waveOutlineColor || "grey";
-  const b = it(d);
-  return /* @__PURE__ */ ne(Pi, { children: [
+  const b = lt(d);
+  return /* @__PURE__ */ te(Pi, { children: [
     /* @__PURE__ */ C(
       zi,
       {
@@ -8188,40 +8197,40 @@ const Wi = 60, Fi = ({
     playoutRef: x,
     barWidth: k,
     barGap: A
-  } = un(), [E, M] = _(0), [S, Z] = _(0), [B, P] = _(!1), L = W(null), K = D((z) => {
-    L.current = z, b(z);
-  }, [b]), H = Math.floor(v * h / m), G = D(async (z) => {
+  } = un(), [E, S] = Z(0), [$, _] = Z(0), [B, P] = Z(!1), H = R(null), K = D((z) => {
+    H.current = z, b(z);
+  }, [b]), X = Math.floor(v * h / m), U = D(async (z) => {
     f(z.id);
     try {
       await u(z.start);
-    } catch (he) {
-      console.error("waveform-playlist: Failed to start playback for annotation", z.id, he);
+    } catch (me) {
+      console.error("waveform-playlist: Failed to start playback for annotation", z.id, me);
     }
-  }, [f, u]), R = D((z) => {
+  }, [f, u]), W = D((z) => {
     d(z), r?.(z);
-  }, [d, r]), { onDragStart: ee, onDragMove: J, onDragEnd: ue } = ni({
+  }, [d, r]), { onDragStart: Y, onDragMove: j, onDragEnd: ue } = ni({
     annotations: l,
-    onAnnotationsChange: R,
+    onAnnotationsChange: W,
     samplesPerPixel: m,
     sampleRate: h,
     duration: v,
     linkEndpoints: n
   }), ae = D((z) => {
-    const he = z.currentTarget.getBoundingClientRect(), oe = y.show ? y.width : 0, me = (z.clientX - he.left - oe) * m / h;
-    P(!0), M(me), Z(me);
-  }, [y, m, h]), te = D((z) => {
+    const me = z.currentTarget.getBoundingClientRect(), ie = y.show ? y.width : 0, he = (z.clientX - me.left - ie) * m / h;
+    P(!0), S(he), _(he);
+  }, [y, m, h]), se = D((z) => {
     if (!B) return;
-    const he = z.currentTarget.getBoundingClientRect(), oe = y.show ? y.width : 0, me = (z.clientX - he.left - oe) * m / h;
-    Z(me);
+    const me = z.currentTarget.getBoundingClientRect(), ie = y.show ? y.width : 0, he = (z.clientX - me.left - ie) * m / h;
+    _(he);
   }, [B, y, m, h]), de = D((z) => {
     if (!B) return;
     P(!1);
-    const he = z.currentTarget.getBoundingClientRect(), oe = y.show ? y.width : 0, me = (z.clientX - he.left - oe) * m / h, pe = Math.min(E, me), le = Math.max(E, me);
-    Math.abs(le - pe) < 0.1 ? (g(pe), M(pe), Z(pe), o && x.current && (x.current.stop(), u(pe))) : (M(pe), Z(le));
+    const me = z.currentTarget.getBoundingClientRect(), ie = y.show ? y.width : 0, he = (z.clientX - me.left - ie) * m / h, pe = Math.min(E, he), le = Math.max(E, he);
+    Math.abs(le - pe) < 0.1 ? (g(pe), S(pe), _(pe), o && x.current && (x.current.stop(), u(pe))) : (S(pe), _(le));
   }, [B, E, m, h, y, g, o, x, u]);
   if (p.length === 0)
     return /* @__PURE__ */ C("div", { className: a, children: "Loading waveform..." });
-  const Qe = null;
+  const Oe = null;
   return /* @__PURE__ */ C(cr, { children: /* @__PURE__ */ C(
     kt.Provider,
     {
@@ -8240,86 +8249,86 @@ const Wi = 60, Fi = ({
         an,
         {
           theme: s,
-          backgroundColor: it(s.waveOutlineColor),
+          backgroundColor: lt(s.waveOutlineColor),
           timescaleBackgroundColor: s.timescaleBackgroundColor,
-          scrollContainerWidth: H + (y.show ? y.width : 0),
-          timescaleWidth: H,
-          tracksWidth: H,
+          scrollContainerWidth: X + (y.show ? y.width : 0),
+          timescaleWidth: X,
+          tracksWidth: X,
           controlsWidth: y.show ? y.width : 0,
           onTracksMouseDown: ae,
-          onTracksMouseMove: te,
+          onTracksMouseMove: se,
           onTracksMouseUp: de,
           scrollContainerRef: K,
           isSelecting: B,
           timescale: w > 0 ? /* @__PURE__ */ C(dr, {}) : void 0,
-          children: /* @__PURE__ */ ne(je, { children: [
-            p.map((z, he) => {
-              const oe = z.length > 0 ? Math.max(...z.map((O) => O.peaks.data.length)) : 1;
-              return /* @__PURE__ */ C(sn.Provider, { value: Qe, children: /* @__PURE__ */ C(
+          children: /* @__PURE__ */ te(qe, { children: [
+            p.map((z, me) => {
+              const ie = z.length > 0 ? Math.max(...z.map((G) => G.peaks.data.length)) : 1;
+              return /* @__PURE__ */ C(sn.Provider, { value: Oe, children: /* @__PURE__ */ C(
                 mr,
                 {
-                  numChannels: oe,
-                  backgroundColor: it(s.waveOutlineColor),
+                  numChannels: ie,
+                  backgroundColor: lt(s.waveOutlineColor),
                   offset: 0,
-                  width: H,
+                  width: X,
                   hasClipHeaders: !1,
-                  trackId: `media-element-track-${he}`,
+                  trackId: `media-element-track-${me}`,
                   isSelected: !0,
-                  children: z.map((O, me) => {
-                    const pe = O.peaks, le = pe.length;
+                  children: z.map((G, he) => {
+                    const pe = G.peaks, le = pe.length;
                     return /* @__PURE__ */ C(
                       qt,
                       {
-                        clipId: O.clipId,
-                        trackIndex: he,
-                        clipIndex: me,
-                        trackName: O.trackName,
-                        startSample: O.startSample,
-                        durationSamples: O.durationSamples,
+                        clipId: G.clipId,
+                        trackIndex: me,
+                        clipIndex: he,
+                        trackName: G.trackName,
+                        startSample: G.startSample,
+                        durationSamples: G.durationSamples,
                         samplesPerPixel: m,
                         showHeader: !1,
                         disableHeaderDrag: !0,
                         isSelected: !0,
-                        trackId: `media-element-track-${he}`,
-                        children: pe.data.map((Te, Re) => /* @__PURE__ */ C(
+                        trackId: `media-element-track-${me}`,
+                        children: pe.data.map((Fe, _e) => /* @__PURE__ */ C(
                           Li,
                           {
-                            index: Re,
-                            data: Te,
+                            index: _e,
+                            data: Fe,
                             bits: pe.bits,
                             length: le,
-                            clipStartSample: O.startSample,
-                            clipDurationSamples: O.durationSamples
+                            clipStartSample: G.startSample,
+                            clipDurationSamples: G.durationSamples
                           },
-                          `${he}-${me}-${Re}`
+                          `${me}-${he}-${_e}`
                         ))
                       },
-                      `${he}-${me}`
+                      `${me}-${he}`
                     );
                   })
                 }
-              ) }, he);
+              ) }, me);
             }),
             l.length > 0 && /* @__PURE__ */ C(
               Da,
               {
-                onDragStart: ee,
-                onDragMove: J,
+                onDragStart: Y,
+                onDragMove: j,
                 onDragEnd: ue,
                 modifiers: t ? [Ta] : [],
-                children: /* @__PURE__ */ C(wr, { height: 30, width: H, children: l.map((z, he) => {
-                  const oe = z.start * h / m, O = z.end * h / m, me = e ? e(z, he) : z.id;
+                children: /* @__PURE__ */ C(wr, { height: 30, width: X, children: l.map((z, me) => {
+                  const ie = z.start * h / m, G = z.end * h / m, he = e ? e(z, me) : z.id;
                   return /* @__PURE__ */ C(
                     vr,
                     {
                       annotationId: z.id,
-                      annotationIndex: he,
-                      startPosition: oe,
-                      endPosition: O,
-                      label: me,
+                      annotationIndex: me,
+                      startPosition: ie,
+                      endPosition: G,
+                      label: he,
                       color: "#ff9800",
                       isActive: z.id === c,
-                      onClick: () => G(z),
+                      onClick: () => U(z),
                       editable: t
                     },
                     z.id
@@ -8327,11 +8336,11 @@ const Wi = 60, Fi = ({
                 }) })
               }
             ),
-            E !== S && /* @__PURE__ */ C(
+            E !== $ && /* @__PURE__ */ C(
               sr,
               {
-                startPosition: Math.min(E, S) * h / m + (y.show ? y.width : 0),
-                endPosition: Math.max(E, S) * h / m + (y.show ? y.width : 0),
+                startPosition: Math.min(E, $) * h / m + (y.show ? y.width : 0),
+                endPosition: Math.max(E, $) * h / m + (y.show ? y.width : 0),
                 color: s.selectionColor
               }
             ),
@@ -8388,7 +8397,7 @@ const Wi = 60, Fi = ({
   className: l
 }) => {
   const { annotations: c } = cn();
-  return /* @__PURE__ */ ne(je, { children: [
+  return /* @__PURE__ */ te(qe, { children: [
     /* @__PURE__ */ C(
       Gi,
       {
@@ -8474,7 +8483,7 @@ export {
   He as usePlaybackAnimation,
   il as usePlaybackShortcuts,
   ve as usePlaylistControls,
-  Be as usePlaylistData,
+  Te as usePlaylistData,
   Xe as usePlaylistState,
   Ri as useSpectrogramIntegration,
   js as useTimeFormat,