@waveform-playlist/browser 13.1.2 → 14.0.0

package/dist/index.mjs

@@ -50,30 +50,52 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/index.tsx
-import * as Tone2 from "tone";
-
 // src/WaveformPlaylistContext.tsx
 import {
   createContext,
   useContext,
-  useState as useState15,
-  useEffect as useEffect10,
-  useRef as useRef15,
-  useCallback as useCallback19,
-  useMemo as useMemo4
+  useState as useState9,
+  useEffect as useEffect5,
+  useRef as useRef9,
+  useCallback as useCallback13,
+  useMemo as useMemo3
 } from "react";
 import { ThemeProvider } from "styled-components";
-import {
-  configureGlobalContext,
-  createToneAdapter,
-  getGlobalAudioContext as getGlobalAudioContext4
-} from "@waveform-playlist/playout";
+
+// src/playout/resolvePlayoutAdapter.ts
+var INSTALL_HINT = "@waveform-playlist/playout (and its peer `tone`) is required for the default WebAudio engine. Install with: npm install @waveform-playlist/playout tone \u2014 or pass a custom `createAdapter`.";
+function resolvePlayoutAdapter(opts) {
+  return __async(this, null, function* () {
+    if (opts.createAdapter) {
+      return opts.createAdapter();
+    }
+    let mod;
+    try {
+      mod = yield import("@waveform-playlist/playout");
+    } catch (originalErr) {
+      console.warn(
+        "[waveform-playlist] @waveform-playlist/playout dynamic import failed: " + String(originalErr)
+      );
+      throw new Error(INSTALL_HINT);
+    }
+    if (opts.sampleRate !== void 0) {
+      try {
+        mod.configureGlobalContext({ sampleRate: opts.sampleRate });
+      } catch (ctxErr) {
+        console.warn(
+          "[waveform-playlist] configureGlobalContext failed (continuing with default rate): " + String(ctxErr)
+        );
+      }
+    }
+    return mod.createToneAdapter({ effects: opts.effects, soundFontCache: opts.soundFontCache });
+  });
+}
+
+// src/WaveformPlaylistContext.tsx
 import { PlaylistEngine } from "@waveform-playlist/engine";
 import {
   defaultTheme
 } from "@waveform-playlist/ui-components";
-import { getContext as getContext2 } from "tone";
 
 // src/waveformDataLoader.ts
 import WaveformData from "waveform-data";
@@ -239,9 +261,11 @@ function extractPeaksFromWaveformDataFull(waveformData, samplesPerPixel, isMono,
 }
 
 // src/soundFontSync.ts
-import { isToneAdapter } from "@waveform-playlist/playout";
+function supportsSoundFont(adapter) {
+  return adapter != null && typeof adapter.setSoundFontCache === "function";
+}
 function syncSoundFontCacheToAdapter(adapter, cache) {
-  if (!isToneAdapter(adapter)) return;
+  if (!supportsSoundFont(adapter)) return;
   adapter.setSoundFontCache(cache);
 }
 
@@ -501,224 +525,6 @@ function useUndoState({ engineRef }) {
   };
 }
 
-// src/hooks/useAudioEffects.ts
-import { useRef as useRef7, useCallback as useCallback7 } from "react";
-import { Analyser } from "tone";
-var useMasterAnalyser = (fftSize = 256) => {
-  const analyserRef = useRef7(null);
-  const masterEffects = useCallback7(
-    (masterGainNode, destination, _isOffline) => {
-      const analyserNode = new Analyser("fft", fftSize);
-      masterGainNode.connect(analyserNode);
-      masterGainNode.connect(destination);
-      analyserRef.current = analyserNode;
-      return function cleanup() {
-        analyserNode.dispose();
-        analyserRef.current = null;
-      };
-    },
-    [fftSize]
-  );
-  return { analyserRef, masterEffects };
-};
-
-// src/hooks/useAudioTracks.ts
-import { useState as useState8, useEffect, useRef as useRef8, useMemo } from "react";
-import {
-  createTrack,
-  createClipFromSeconds
-} from "@waveform-playlist/core";
-import * as Tone from "tone";
-function buildTrackFromConfig(config, index, audioBuffer, stableIds, contextSampleRate = 48e3) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-  const buffer = audioBuffer != null ? audioBuffer : config.audioBuffer;
-  const sampleRate = (_c = (_b = buffer == null ? void 0 : buffer.sampleRate) != null ? _b : (_a = config.waveformData) == null ? void 0 : _a.sample_rate) != null ? _c : contextSampleRate;
-  const sourceDuration = (_g = (_e = buffer == null ? void 0 : buffer.duration) != null ? _e : (_d = config.waveformData) == null ? void 0 : _d.duration) != null ? _g : config.duration != null ? config.duration + ((_f = config.offset) != null ? _f : 0) : void 0;
-  if (sourceDuration === void 0) {
-    console.warn(
-      `[waveform-playlist] Track ${index + 1} ("${(_h = config.name) != null ? _h : "unnamed"}"): Cannot create track \u2014 provide duration, audioBuffer, or waveformData with duration.`
-    );
-    return null;
-  }
-  const clip = createClipFromSeconds({
-    audioBuffer: buffer,
-    sampleRate,
-    sourceDuration,
-    startTime: (_i = config.startTime) != null ? _i : 0,
-    duration: (_j = config.duration) != null ? _j : sourceDuration,
-    offset: (_k = config.offset) != null ? _k : 0,
-    name: config.name || `Track ${index + 1}`,
-    fadeIn: config.fadeIn,
-    fadeOut: config.fadeOut,
-    waveformData: config.waveformData
-  });
-  if (isNaN(clip.startSample) || isNaN(clip.durationSamples) || isNaN(clip.offsetSamples)) {
-    console.error(
-      `[waveform-playlist] Invalid clip values for track ${index + 1} ("${(_l = config.name) != null ? _l : "unnamed"}"): startSample=${clip.startSample}, durationSamples=${clip.durationSamples}, offsetSamples=${clip.offsetSamples}`
-    );
-    return null;
-  }
-  const track = __spreadProps(__spreadValues({}, createTrack({
-    name: config.name || `Track ${index + 1}`,
-    clips: [clip],
-    muted: (_m = config.muted) != null ? _m : false,
-    soloed: (_n = config.soloed) != null ? _n : false,
-    volume: (_o = config.volume) != null ? _o : 1,
-    pan: (_p = config.pan) != null ? _p : 0,
-    color: config.color
-  })), {
-    effects: config.effects,
-    renderMode: config.renderMode,
-    spectrogramConfig: config.spectrogramConfig,
-    spectrogramColorMap: config.spectrogramColorMap
-  });
-  const existingIds = stableIds.get(index);
-  if (existingIds) {
-    track.id = existingIds.trackId;
-    track.clips[0] = __spreadProps(__spreadValues({}, track.clips[0]), { id: existingIds.clipId });
-  } else {
-    stableIds.set(index, { trackId: track.id, clipId: track.clips[0].id });
-  }
-  return track;
-}
-function useAudioTracks(configs, options = {}) {
-  const { immediate = false, progressive = false } = options;
-  const isImmediate = immediate || progressive;
-  const [loading, setLoading] = useState8(true);
-  const [error, setError] = useState8(null);
-  const [loadedCount, setLoadedCount] = useState8(0);
-  const totalCount = configs.length;
-  const [loadedBuffers, setLoadedBuffers] = useState8(/* @__PURE__ */ new Map());
-  const stableIdsRef = useRef8(/* @__PURE__ */ new Map());
-  const contextSampleRateRef = useRef8(48e3);
-  const derivedTracks = useMemo(() => {
-    if (!isImmediate) return null;
-    const result = [];
-    for (let i = 0; i < configs.length; i++) {
-      const track = buildTrackFromConfig(
-        configs[i],
-        i,
-        loadedBuffers.get(i),
-        stableIdsRef.current,
-        contextSampleRateRef.current
-      );
-      if (track) result.push(track);
-    }
-    return result;
-  }, [isImmediate, configs, loadedBuffers]);
-  const [tracks, setTracks] = useState8(derivedTracks != null ? derivedTracks : []);
-  const prevDerivedRef = useRef8(derivedTracks);
-  if (derivedTracks !== prevDerivedRef.current) {
-    prevDerivedRef.current = derivedTracks;
-    if (derivedTracks) setTracks(derivedTracks);
-  }
-  useEffect(() => {
-    if (configs.length === 0) {
-      setTracks([]);
-      setLoading(false);
-      setLoadedCount(0);
-      return;
-    }
-    let cancelled = false;
-    const abortController = new AbortController();
-    const loadTracks = () => __async(null, null, function* () {
-      try {
-        setLoading(true);
-        setError(null);
-        setLoadedCount(0);
-        if (isImmediate) {
-          setLoadedBuffers(/* @__PURE__ */ new Map());
-        }
-        const audioContext = Tone.getContext().rawContext;
-        contextSampleRateRef.current = audioContext.sampleRate;
-        const loadPromises = configs.map((config, index) => __async(null, null, function* () {
-          if (config.audioBuffer) {
-            if (isImmediate && !cancelled) {
-              setLoadedBuffers((prev) => {
-                const next = new Map(prev);
-                next.set(index, config.audioBuffer);
-                return next;
-              });
-              setLoadedCount((prev) => prev + 1);
-              return;
-            }
-            return buildTrackFromConfig(
-              config,
-              index,
-              config.audioBuffer,
-              stableIdsRef.current,
-              audioContext.sampleRate
-            );
-          }
-          if (!config.src && config.waveformData) {
-            if (isImmediate && !cancelled) {
-              setLoadedCount((prev) => prev + 1);
-              return;
-            }
-            return buildTrackFromConfig(
-              config,
-              index,
-              void 0,
-              stableIdsRef.current,
-              audioContext.sampleRate
-            );
-          }
-          if (!config.src) {
-            throw new Error(`Track ${index + 1}: Must provide src, audioBuffer, or waveformData`);
-          }
-          const response = yield fetch(config.src, { signal: abortController.signal });
-          if (!response.ok) {
-            throw new Error(`Failed to fetch ${config.src}: ${response.statusText}`);
-          }
-          const arrayBuffer = yield response.arrayBuffer();
-          const audioBuffer = yield audioContext.decodeAudioData(arrayBuffer);
-          if (!audioBuffer || !audioBuffer.sampleRate || !audioBuffer.duration) {
-            throw new Error(`Invalid audio buffer for ${config.src}`);
-          }
-          if (isImmediate && !cancelled) {
-            setLoadedBuffers((prev) => {
-              const next = new Map(prev);
-              next.set(index, audioBuffer);
-              return next;
-            });
-            setLoadedCount((prev) => prev + 1);
-            return;
-          }
-          return buildTrackFromConfig(
-            config,
-            index,
-            audioBuffer,
-            stableIdsRef.current,
-            audioContext.sampleRate
-          );
-        }));
-        const loadedTracks = yield Promise.all(loadPromises);
-        if (!cancelled) {
-          if (!isImmediate) {
-            const validTracks = loadedTracks.filter((t) => t != null);
-            setTracks(validTracks);
-            setLoadedCount(validTracks.length);
-          }
-          setLoading(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          const errorMessage = err instanceof Error ? err.message : "Unknown error loading audio";
-          setError(errorMessage);
-          setLoading(false);
-          console.error(`[waveform-playlist] Error loading audio tracks: ${errorMessage}`);
-        }
-      }
-    });
-    loadTracks();
-    return () => {
-      cancelled = true;
-      abortController.abort();
-    };
-  }, [configs, isImmediate]);
-  return { tracks, loading, error, loadedCount, totalCount };
-}
-
 // src/hooks/useClipDragHandlers.ts
 import React from "react";
 
@@ -955,13 +761,13 @@ function useClipDragHandlers({
 
 // src/hooks/useAnnotationDragHandlers.ts
 import React2 from "react";
-import { getGlobalAudioContext } from "@waveform-playlist/playout";
 var LINK_THRESHOLD = 0.01;
 function useAnnotationDragHandlers({
   annotations,
   onAnnotationsChange,
   samplesPerPixel,
-  sampleRate = getGlobalAudioContext().sampleRate,
+  // Default mirrors the engine default; the providers always pass the real rate from context (#510).
+  sampleRate = 48e3,
   duration,
   linkEndpoints
 }) {
@@ -1119,7 +925,7 @@ function updateAnnotationBoundaries({
 }
 
 // src/hooks/useDragSensors.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo } from "react";
 import { PointerSensor, PointerActivationConstraints } from "@dnd-kit/dom";
 function useDragSensors(options = {}) {
   const {
@@ -1128,7 +934,7 @@ function useDragSensors(options = {}) {
     touchTolerance = 5,
     mouseDistance = 1
   } = options;
-  return useMemo2(() => {
+  return useMemo(() => {
     if (touchOptimized) {
       return [
         PointerSensor.configure({
@@ -1157,14 +963,14 @@ function useDragSensors(options = {}) {
 }
 
 // src/hooks/useClipSplitting.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback7 } from "react";
 import { calculateSplitPoint, canSplitAt } from "@waveform-playlist/engine";
 var useClipSplitting = (options) => {
   const { tracks, engineRef } = options;
   const { sampleRate } = usePlaylistData();
   const { currentTimeRef } = usePlaybackAnimation();
   const { selectedTrackId } = usePlaylistState();
-  const splitClipAt = useCallback8(
+  const splitClipAt = useCallback7(
     (trackIndex, clipIndex, splitTime) => {
       const { samplesPerPixel } = options;
       const track = tracks[trackIndex];
@@ -1188,7 +994,7 @@ var useClipSplitting = (options) => {
     },
     [tracks, options, engineRef, sampleRate]
   );
-  const splitClipAtPlayhead = useCallback8(() => {
+  const splitClipAtPlayhead = useCallback7(() => {
     var _a;
     if (!selectedTrackId) {
       console.warn("[waveform-playlist] No track selected \u2014 click a clip to select a track first");
@@ -1219,16 +1025,16 @@ var useClipSplitting = (options) => {
 };
 
 // src/hooks/useKeyboardShortcuts.ts
-import { useEffect as useEffect2, useCallback as useCallback9 } from "react";
+import { useEffect, useCallback as useCallback8 } from "react";
 import { handleKeyboardEvent } from "@waveform-playlist/core";
 import { handleKeyboardEvent as handleKeyboardEvent2, getShortcutLabel } from "@waveform-playlist/core";
 var useKeyboardShortcuts = (options) => {
   const { shortcuts, enabled = true } = options;
-  const handleKeyDown = useCallback9(
+  const handleKeyDown = useCallback8(
     (event) => handleKeyboardEvent(event, shortcuts, enabled),
     [shortcuts, enabled]
   );
-  useEffect2(() => {
+  useEffect(() => {
     if (!enabled) return;
     window.addEventListener("keydown", handleKeyDown);
     return () => {
@@ -1238,22 +1044,22 @@ var useKeyboardShortcuts = (options) => {
 };
 
 // src/hooks/usePlaybackShortcuts.ts
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback9 } from "react";
 var usePlaybackShortcuts = (options = {}) => {
   const { enabled = true, additionalShortcuts = [], shortcuts: overrideShortcuts } = options;
   const { isPlaying } = usePlaybackAnimation();
   const { setCurrentTime, play, pause, stop } = usePlaylistControls();
-  const togglePlayPause = useCallback10(() => {
+  const togglePlayPause = useCallback9(() => {
     if (isPlaying) {
       pause();
     } else {
       play();
     }
   }, [isPlaying, play, pause]);
-  const stopPlayback = useCallback10(() => {
+  const stopPlayback = useCallback9(() => {
     stop();
   }, [stop]);
-  const rewindToStart = useCallback10(() => {
+  const rewindToStart = useCallback9(() => {
     setCurrentTime(0);
     if (isPlaying) {
       play(0);
@@ -1293,7 +1099,7 @@ var usePlaybackShortcuts = (options = {}) => {
 };
 
 // src/hooks/useAnnotationKeyboardControls.ts
-import { useCallback as useCallback11, useMemo as useMemo3, useEffect as useEffect3 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo2, useEffect as useEffect2 } from "react";
 var LINK_THRESHOLD2 = 0.01;
 var TIME_DELTA = 0.01;
 function useAnnotationKeyboardControls({
@@ -1306,14 +1112,18 @@ function useAnnotationKeyboardControls({
   continuousPlay = false,
   enabled = true,
   scrollContainerRef,
-  onPlay
+  onPlay,
+  samplesPerPixel: samplesPerPixelProp,
+  sampleRate: sampleRateProp
 }) {
-  const { samplesPerPixel, sampleRate } = usePlaylistData();
-  const activeIndex = useMemo3(() => {
+  const playlistData = usePlaylistDataOptional();
+  const samplesPerPixel = samplesPerPixelProp != null ? samplesPerPixelProp : playlistData == null ? void 0 : playlistData.samplesPerPixel;
+  const sampleRate = sampleRateProp != null ? sampleRateProp : playlistData == null ? void 0 : playlistData.sampleRate;
+  const activeIndex = useMemo2(() => {
     if (!activeAnnotationId) return -1;
     return annotations.findIndex((a) => a.id === activeAnnotationId);
   }, [annotations, activeAnnotationId]);
-  const scrollToAnnotation = useCallback11(
+  const scrollToAnnotation = useCallback10(
     (annotationId) => {
       if (!(scrollContainerRef == null ? void 0 : scrollContainerRef.current) || !samplesPerPixel || !sampleRate) return;
       const annotation = annotations.find((a) => a.id === annotationId);
@@ -1336,12 +1146,12 @@ function useAnnotationKeyboardControls({
     },
     [annotations, scrollContainerRef, samplesPerPixel, sampleRate]
   );
-  useEffect3(() => {
+  useEffect2(() => {
     if (activeAnnotationId && (scrollContainerRef == null ? void 0 : scrollContainerRef.current) && samplesPerPixel && sampleRate) {
       scrollToAnnotation(activeAnnotationId);
     }
   }, [activeAnnotationId, scrollToAnnotation, scrollContainerRef, samplesPerPixel, sampleRate]);
-  const moveStartBoundary = useCallback11(
+  const moveStartBoundary = useCallback10(
     (delta) => {
       if (activeIndex < 0) return;
       const annotation = annotations[activeIndex];
@@ -1370,7 +1180,7 @@ function useAnnotationKeyboardControls({
     },
     [annotations, activeIndex, linkEndpoints, onAnnotationsChange]
   );
-  const moveEndBoundary = useCallback11(
+  const moveEndBoundary = useCallback10(
     (delta) => {
       if (activeIndex < 0) return;
       const annotation = annotations[activeIndex];
@@ -1430,7 +1240,7 @@ function useAnnotationKeyboardControls({
     },
     [annotations, activeIndex, duration, linkEndpoints, onAnnotationsChange]
   );
-  const selectPrevious = useCallback11(() => {
+  const selectPrevious = useCallback10(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     if (activeIndex <= 0) {
       onActiveAnnotationChange(annotations[annotations.length - 1].id);
@@ -1438,7 +1248,7 @@ function useAnnotationKeyboardControls({
       onActiveAnnotationChange(annotations[activeIndex - 1].id);
     }
   }, [annotations, activeIndex, onActiveAnnotationChange]);
-  const selectNext = useCallback11(() => {
+  const selectNext = useCallback10(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     if (activeIndex < 0 || activeIndex >= annotations.length - 1) {
       onActiveAnnotationChange(annotations[0].id);
@@ -1446,25 +1256,25 @@ function useAnnotationKeyboardControls({
       onActiveAnnotationChange(annotations[activeIndex + 1].id);
     }
   }, [annotations, activeIndex, onActiveAnnotationChange]);
-  const selectFirst = useCallback11(() => {
+  const selectFirst = useCallback10(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     onActiveAnnotationChange(annotations[0].id);
   }, [annotations, onActiveAnnotationChange]);
-  const selectLast = useCallback11(() => {
+  const selectLast = useCallback10(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     onActiveAnnotationChange(annotations[annotations.length - 1].id);
   }, [annotations, onActiveAnnotationChange]);
-  const clearSelection = useCallback11(() => {
+  const clearSelection = useCallback10(() => {
     if (!onActiveAnnotationChange) return;
     onActiveAnnotationChange(null);
   }, [onActiveAnnotationChange]);
-  const playActiveAnnotation = useCallback11(() => {
+  const playActiveAnnotation = useCallback10(() => {
     if (activeIndex < 0 || !onPlay) return;
     const annotation = annotations[activeIndex];
     const playDuration = !continuousPlay ? annotation.end - annotation.start : void 0;
     onPlay(annotation.start, playDuration);
   }, [annotations, activeIndex, continuousPlay, onPlay]);
-  const activeAnnotationShortcuts = useMemo3(
+  const activeAnnotationShortcuts = useMemo2(
     () => [
       {
         key: "[",
@@ -1501,7 +1311,7 @@ function useAnnotationKeyboardControls({
     ],
     [moveStartBoundary, moveEndBoundary, playActiveAnnotation]
   );
-  const navigationShortcuts = useMemo3(
+  const navigationShortcuts = useMemo2(
     () => [
       {
         key: "ArrowUp",
@@ -1528,1452 +1338,65 @@ function useAnnotationKeyboardControls({
         preventDefault: true
       },
       {
-        key: "Home",
-        action: selectFirst,
-        description: "Select first annotation",
-        preventDefault: true
-      },
-      {
-        key: "End",
-        action: selectLast,
-        description: "Select last annotation",
-        preventDefault: true
-      },
-      {
-        key: "Escape",
-        action: clearSelection,
-        description: "Deselect annotation",
-        preventDefault: true
-      }
-    ],
-    [selectPrevious, selectNext, selectFirst, selectLast, clearSelection]
-  );
-  useKeyboardShortcuts({
-    shortcuts: activeAnnotationShortcuts,
-    enabled: enabled && activeIndex >= 0
-  });
-  useKeyboardShortcuts({
-    shortcuts: navigationShortcuts,
-    enabled: enabled && annotations.length > 0 && !!onActiveAnnotationChange
-  });
-  return {
-    moveStartBoundary,
-    moveEndBoundary,
-    selectPrevious,
-    selectNext,
-    selectFirst,
-    selectLast,
-    clearSelection,
-    scrollToAnnotation,
-    playActiveAnnotation
-  };
-}
-
-// src/hooks/useDynamicEffects.ts
-import { useState as useState9, useCallback as useCallback12, useRef as useRef9, useEffect as useEffect4 } from "react";
-
-// src/effects/effectDefinitions.ts
-var effectDefinitions = [
-  // === REVERB EFFECTS ===
-  {
-    id: "reverb",
-    name: "Reverb",
-    category: "reverb",
-    description: "Simple convolution reverb with adjustable decay time",
-    parameters: [
-      {
-        name: "decay",
-        label: "Decay",
-        type: "number",
-        min: 0.1,
-        max: 10,
-        step: 0.1,
-        default: 1.5,
-        unit: "s"
-      },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 }
-    ]
-  },
-  {
-    id: "freeverb",
-    name: "Freeverb",
-    category: "reverb",
-    description: "Classic Schroeder/Moorer reverb with room size and dampening",
-    parameters: [
-      {
-        name: "roomSize",
-        label: "Room Size",
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 0.01,
-        default: 0.7
-      },
-      {
-        name: "dampening",
-        label: "Dampening",
-        type: "number",
-        min: 0,
-        max: 1e4,
-        step: 100,
-        default: 3e3,
-        unit: "Hz"
-      },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 }
-    ]
-  },
-  {
-    id: "jcReverb",
-    name: "JC Reverb",
-    category: "reverb",
-    description: "Attempt at Roland JC-120 chorus reverb emulation",
-    parameters: [
-      {
-        name: "roomSize",
-        label: "Room Size",
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 0.01,
-        default: 0.5
-      },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 }
-    ]
-  },
-  // === DELAY EFFECTS ===
-  {
-    id: "feedbackDelay",
-    name: "Feedback Delay",
-    category: "delay",
-    description: "Delay line with feedback for echo effects",
-    parameters: [
-      {
-        name: "delayTime",
-        label: "Delay Time",
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 0.01,
-        default: 0.25,
-        unit: "s"
-      },
-      {
-        name: "feedback",
-        label: "Feedback",
-        type: "number",
-        min: 0,
-        max: 0.95,
-        step: 0.01,
-        default: 0.5
-      },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 }
-    ]
-  },
-  {
-    id: "pingPongDelay",
-    name: "Ping Pong Delay",
-    category: "delay",
-    description: "Stereo delay bouncing between left and right channels",
-    parameters: [
-      {
-        name: "delayTime",
-        label: "Delay Time",
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 0.01,
-        default: 0.25,
-        unit: "s"
-      },
-      {
-        name: "feedback",
-        label: "Feedback",
-        type: "number",
-        min: 0,
-        max: 0.95,
-        step: 0.01,
-        default: 0.5
-      },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 }
-    ]
-  },
-  // === MODULATION EFFECTS ===
-  {
-    id: "chorus",
-    name: "Chorus",
-    category: "modulation",
-    description: "Creates thickness by layering detuned copies of the signal",
-    parameters: [
-      {
-        name: "frequency",
-        label: "Rate",
-        type: "number",
-        min: 0.1,
-        max: 10,
-        step: 0.1,
-        default: 1.5,
-        unit: "Hz"
-      },
-      {
-        name: "delayTime",
-        label: "Delay",
-        type: "number",
-        min: 0,
-        max: 20,
-        step: 0.5,
-        default: 3.5,
-        unit: "ms"
-      },
-      { name: "depth", label: "Depth", type: "number", min: 0, max: 1, step: 0.01, default: 0.7 },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 }
-    ]
-  },
-  {
-    id: "phaser",
-    name: "Phaser",
-    category: "modulation",
-    description: "Classic phaser effect using allpass filters",
-    parameters: [
-      {
-        name: "frequency",
-        label: "Rate",
-        type: "number",
-        min: 0.1,
-        max: 10,
-        step: 0.1,
-        default: 0.5,
-        unit: "Hz"
-      },
-      { name: "octaves", label: "Octaves", type: "number", min: 1, max: 6, step: 1, default: 3 },
-      {
-        name: "baseFrequency",
-        label: "Base Freq",
-        type: "number",
-        min: 100,
-        max: 2e3,
-        step: 10,
-        default: 350,
-        unit: "Hz"
-      },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 }
-    ]
-  },
-  {
-    id: "tremolo",
-    name: "Tremolo",
-    category: "modulation",
-    description: "Rhythmic volume modulation",
-    parameters: [
-      {
-        name: "frequency",
-        label: "Rate",
-        type: "number",
-        min: 0.1,
-        max: 20,
-        step: 0.1,
-        default: 4,
-        unit: "Hz"
-      },
-      { name: "depth", label: "Depth", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 1 }
-    ]
-  },
-  {
-    id: "vibrato",
-    name: "Vibrato",
-    category: "modulation",
-    description: "Pitch modulation effect",
-    parameters: [
-      {
-        name: "frequency",
-        label: "Rate",
-        type: "number",
-        min: 0.1,
-        max: 20,
-        step: 0.1,
-        default: 5,
-        unit: "Hz"
-      },
-      { name: "depth", label: "Depth", type: "number", min: 0, max: 1, step: 0.01, default: 0.1 },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 1 }
-    ]
-  },
-  {
-    id: "autoPanner",
-    name: "Auto Panner",
-    category: "modulation",
-    description: "Automatic left-right panning",
-    parameters: [
-      {
-        name: "frequency",
-        label: "Rate",
-        type: "number",
-        min: 0.1,
-        max: 10,
-        step: 0.1,
-        default: 1,
-        unit: "Hz"
-      },
-      { name: "depth", label: "Depth", type: "number", min: 0, max: 1, step: 0.01, default: 1 },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 1 }
-    ]
-  },
-  // === FILTER EFFECTS ===
-  {
-    id: "autoFilter",
-    name: "Auto Filter",
-    category: "filter",
-    description: "Automated filter sweep with LFO",
-    parameters: [
-      {
-        name: "frequency",
-        label: "Rate",
-        type: "number",
-        min: 0.1,
-        max: 10,
-        step: 0.1,
-        default: 1,
-        unit: "Hz"
-      },
-      {
-        name: "baseFrequency",
-        label: "Base Freq",
-        type: "number",
-        min: 20,
-        max: 2e3,
-        step: 10,
-        default: 200,
-        unit: "Hz"
-      },
-      {
-        name: "octaves",
-        label: "Octaves",
-        type: "number",
-        min: 0.5,
-        max: 8,
-        step: 0.5,
-        default: 2.6
-      },
-      { name: "depth", label: "Depth", type: "number", min: 0, max: 1, step: 0.01, default: 1 },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 1 }
-    ]
-  },
-  {
-    id: "autoWah",
-    name: "Auto Wah",
-    category: "filter",
-    description: "Envelope follower filter effect",
-    parameters: [
-      {
-        name: "baseFrequency",
-        label: "Base Freq",
-        type: "number",
-        min: 20,
-        max: 500,
-        step: 10,
-        default: 100,
-        unit: "Hz"
-      },
-      { name: "octaves", label: "Octaves", type: "number", min: 1, max: 8, step: 1, default: 6 },
-      {
-        name: "sensitivity",
-        label: "Sensitivity",
-        type: "number",
-        min: -40,
-        max: 0,
-        step: 1,
-        default: 0,
-        unit: "dB"
-      },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 1 }
-    ]
-  },
-  {
-    id: "eq3",
-    name: "3-Band EQ",
-    category: "filter",
-    description: "Three band equalizer with low, mid, and high controls",
-    parameters: [
-      {
-        name: "low",
-        label: "Low",
-        type: "number",
-        min: -24,
-        max: 24,
-        step: 0.5,
-        default: 0,
-        unit: "dB"
-      },
-      {
-        name: "mid",
-        label: "Mid",
-        type: "number",
-        min: -24,
-        max: 24,
-        step: 0.5,
-        default: 0,
-        unit: "dB"
-      },
-      {
-        name: "high",
-        label: "High",
-        type: "number",
-        min: -24,
-        max: 24,
-        step: 0.5,
-        default: 0,
-        unit: "dB"
-      },
-      {
-        name: "lowFrequency",
-        label: "Low Freq",
-        type: "number",
-        min: 20,
-        max: 500,
-        step: 10,
-        default: 400,
-        unit: "Hz"
-      },
-      {
-        name: "highFrequency",
-        label: "High Freq",
-        type: "number",
-        min: 1e3,
-        max: 1e4,
-        step: 100,
-        default: 2500,
-        unit: "Hz"
-      }
-    ]
-  },
-  // === DISTORTION EFFECTS ===
-  {
-    id: "distortion",
-    name: "Distortion",
-    category: "distortion",
-    description: "Wave shaping distortion effect",
-    parameters: [
-      {
-        name: "distortion",
-        label: "Drive",
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 0.01,
-        default: 0.4
-      },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 1 }
-    ]
-  },
-  {
-    id: "bitCrusher",
-    name: "Bit Crusher",
-    category: "distortion",
-    description: "Reduces bit depth for lo-fi digital texture",
-    parameters: [
-      { name: "bits", label: "Bits", type: "number", min: 1, max: 16, step: 1, default: 4 },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 1 }
-    ]
-  },
-  {
-    id: "chebyshev",
-    name: "Chebyshev",
-    category: "distortion",
-    description: "Waveshaping distortion using Chebyshev polynomials",
-    parameters: [
-      { name: "order", label: "Order", type: "number", min: 1, max: 100, step: 1, default: 50 },
-      { name: "wet", label: "Mix", type: "number", min: 0, max: 1, step: 0.01, default: 1 }
-    ]
-  },
-  // === DYNAMICS EFFECTS ===
-  {
-    id: "compressor",
-    name: "Compressor",
-    category: "dynamics",
-    description: "Dynamic range compressor",
-    parameters: [
-      {
-        name: "threshold",
-        label: "Threshold",
-        type: "number",
-        min: -60,
-        max: 0,
-        step: 1,
-        default: -24,
-        unit: "dB"
-      },
-      { name: "ratio", label: "Ratio", type: "number", min: 1, max: 20, step: 0.5, default: 4 },
-      {
-        name: "attack",
-        label: "Attack",
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 1e-3,
-        default: 3e-3,
-        unit: "s"
-      },
-      {
-        name: "release",
-        label: "Release",
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 0.01,
-        default: 0.25,
-        unit: "s"
-      },
-      {
-        name: "knee",
-        label: "Knee",
-        type: "number",
-        min: 0,
-        max: 40,
-        step: 1,
-        default: 30,
-        unit: "dB"
-      }
-    ]
-  },
-  {
-    id: "limiter",
-    name: "Limiter",
-    category: "dynamics",
-    description: "Hard limiter to prevent clipping",
-    parameters: [
-      {
-        name: "threshold",
-        label: "Threshold",
-        type: "number",
-        min: -12,
-        max: 0,
-        step: 0.5,
-        default: -6,
-        unit: "dB"
-      }
-    ]
-  },
-  {
-    id: "gate",
-    name: "Gate",
-    category: "dynamics",
-    description: "Noise gate to silence signal below threshold",
-    parameters: [
-      {
-        name: "threshold",
-        label: "Threshold",
-        type: "number",
-        min: -100,
-        max: 0,
-        step: 1,
-        default: -40,
-        unit: "dB"
-      },
-      {
-        name: "attack",
-        label: "Attack",
-        type: "number",
-        min: 0,
-        max: 0.3,
-        step: 1e-3,
-        default: 1e-3,
-        unit: "s"
-      },
-      {
-        name: "release",
-        label: "Release",
-        type: "number",
-        min: 0,
-        max: 0.5,
-        step: 0.01,
-        default: 0.1,
-        unit: "s"
-      }
-    ]
-  },
-  // === SPATIAL EFFECTS ===
-  {
-    id: "stereoWidener",
-    name: "Stereo Widener",
-    category: "spatial",
-    description: "Expands or narrows the stereo image",
-    parameters: [
-      { name: "width", label: "Width", type: "number", min: 0, max: 1, step: 0.01, default: 0.5 }
-    ]
-  }
-];
-var getEffectDefinition = (id) => {
-  return effectDefinitions.find((def) => def.id === id);
-};
-var getEffectsByCategory = (category) => {
-  return effectDefinitions.filter((def) => def.category === category);
-};
-var effectCategories = [
-  { id: "reverb", name: "Reverb" },
-  { id: "delay", name: "Delay" },
-  { id: "modulation", name: "Modulation" },
-  { id: "filter", name: "Filter" },
-  { id: "distortion", name: "Distortion" },
-  { id: "dynamics", name: "Dynamics" },
-  { id: "spatial", name: "Spatial" }
-];
-
-// src/effects/effectFactory.ts
-import {
-  Reverb,
-  Freeverb,
-  JCReverb,
-  FeedbackDelay,
-  PingPongDelay,
-  Chorus,
-  Phaser,
-  Tremolo,
-  Vibrato,
-  AutoPanner,
-  AutoFilter,
-  AutoWah,
-  EQ3,
-  Distortion,
-  BitCrusher,
-  Chebyshev,
-  Compressor,
-  Limiter,
-  Gate,
-  StereoWidener
-} from "tone";
-function asEffectConstructor(ctor) {
-  return ctor;
-}
-var effectConstructors = {
-  reverb: asEffectConstructor(Reverb),
-  freeverb: asEffectConstructor(Freeverb),
-  jcReverb: asEffectConstructor(JCReverb),
-  feedbackDelay: asEffectConstructor(FeedbackDelay),
-  pingPongDelay: asEffectConstructor(PingPongDelay),
-  chorus: asEffectConstructor(Chorus),
-  phaser: asEffectConstructor(Phaser),
-  tremolo: asEffectConstructor(Tremolo),
-  vibrato: asEffectConstructor(Vibrato),
-  autoPanner: asEffectConstructor(AutoPanner),
-  autoFilter: asEffectConstructor(AutoFilter),
-  autoWah: asEffectConstructor(AutoWah),
-  eq3: asEffectConstructor(EQ3),
-  distortion: asEffectConstructor(Distortion),
-  bitCrusher: asEffectConstructor(BitCrusher),
-  chebyshev: asEffectConstructor(Chebyshev),
-  compressor: asEffectConstructor(Compressor),
-  limiter: asEffectConstructor(Limiter),
-  gate: asEffectConstructor(Gate),
-  stereoWidener: asEffectConstructor(StereoWidener)
-};
-var instanceCounter = 0;
-var generateInstanceId = () => {
-  return `effect_${Date.now()}_${++instanceCounter}`;
-};
-function createEffectInstance(definition, initialParams) {
-  const Constructor = effectConstructors[definition.id];
-  if (!Constructor) {
-    throw new Error(`Unknown effect type: ${definition.id}`);
-  }
-  const options = {};
-  definition.parameters.forEach((param) => {
-    var _a;
-    const value = (_a = initialParams == null ? void 0 : initialParams[param.name]) != null ? _a : param.default;
-    options[param.name] = value;
-  });
-  const effect = new Constructor(options);
-  const instanceId = generateInstanceId();
-  const effectRecord = effect;
-  return {
-    effect,
-    id: definition.id,
-    instanceId,
-    dispose() {
-      try {
-        effect.disconnect();
-        effect.dispose();
-      } catch (e) {
-        console.warn(
-          `[waveform-playlist] Error disposing effect "${definition.id}" (${instanceId}):`,
-          e
-        );
-      }
-    },
-    setParameter(name, value) {
-      const prop = effectRecord[name];
-      if (name === "wet") {
-        const wetProp = effectRecord["wet"];
-        if (wetProp && typeof wetProp === "object" && "value" in wetProp) {
-          wetProp.value = value;
-          return;
-        }
-      }
-      if (prop !== void 0) {
-        if (prop && typeof prop === "object" && "value" in prop) {
-          prop.value = value;
-        } else {
-          effectRecord[name] = value;
-        }
-      }
-    },
-    getParameter(name) {
-      if (name === "wet") {
-        const wetProp = effectRecord["wet"];
-        if (wetProp && typeof wetProp === "object" && "value" in wetProp) {
-          return wetProp.value;
-        }
-      }
-      const prop = effectRecord[name];
-      if (prop !== void 0) {
-        if (prop && typeof prop === "object" && "value" in prop) {
-          return prop.value;
-        }
-        return prop;
-      }
-      return void 0;
-    },
-    connect(destination) {
-      effect.connect(destination);
-    },
-    disconnect() {
-      try {
-        effect.disconnect();
-      } catch (e) {
-        console.warn(
-          `[waveform-playlist] Error disconnecting effect "${definition.id}" (${instanceId}):`,
-          e
-        );
-      }
-    }
-  };
-}
-function createEffectChain(effects) {
-  if (effects.length === 0) {
-    throw new Error("Cannot create effect chain with no effects");
-  }
-  for (let i = 0; i < effects.length - 1; i++) {
-    effects[i].effect.connect(effects[i + 1].effect);
-  }
-  return {
-    input: effects[0].effect,
-    output: effects[effects.length - 1].effect,
-    dispose() {
-      effects.forEach((e) => e.dispose());
-    }
-  };
-}
-
-// src/hooks/useDynamicEffects.ts
-import { Analyser as Analyser2 } from "tone";
-function useDynamicEffects(fftSize = 256) {
-  const [activeEffects, setActiveEffects] = useState9([]);
-  const activeEffectsRef = useRef9(activeEffects);
-  activeEffectsRef.current = activeEffects;
-  const effectInstancesRef = useRef9(/* @__PURE__ */ new Map());
-  const analyserRef = useRef9(null);
-  const graphNodesRef = useRef9(null);
-  const rebuildChain = useCallback12((effects) => {
-    const nodes = graphNodesRef.current;
-    if (!nodes) return;
-    const { masterGainNode, destination, analyserNode } = nodes;
-    try {
-      masterGainNode.disconnect();
-    } catch (e) {
-      console.warn("[waveform-playlist] Error disconnecting master effects chain:", e);
-    }
-    const instances = effects.map((ae) => effectInstancesRef.current.get(ae.instanceId)).filter((inst) => inst !== void 0);
-    if (instances.length === 0) {
-      masterGainNode.connect(analyserNode);
-      analyserNode.connect(destination);
-    } else {
-      let currentNode = masterGainNode;
-      instances.forEach((inst) => {
-        try {
-          inst.disconnect();
-        } catch (e) {
-          console.warn(`[waveform-playlist] Error disconnecting effect "${inst.id}":`, e);
-        }
-        currentNode.connect(inst.effect);
-        currentNode = inst.effect;
-      });
-      currentNode.connect(analyserNode);
-      analyserNode.connect(destination);
-    }
-  }, []);
-  const addEffect = useCallback12((effectId) => {
-    const definition = getEffectDefinition(effectId);
-    if (!definition) {
-      console.error(`Unknown effect: ${effectId}`);
-      return;
-    }
-    const params = {};
-    definition.parameters.forEach((p) => {
-      params[p.name] = p.default;
-    });
-    const instance = createEffectInstance(definition, params);
-    effectInstancesRef.current.set(instance.instanceId, instance);
-    const newActiveEffect = {
-      instanceId: instance.instanceId,
-      effectId: definition.id,
-      definition,
-      params,
-      bypassed: false
-    };
-    setActiveEffects((prev) => [...prev, newActiveEffect]);
-  }, []);
-  const removeEffect = useCallback12((instanceId) => {
-    const instance = effectInstancesRef.current.get(instanceId);
-    if (instance) {
-      instance.dispose();
-      effectInstancesRef.current.delete(instanceId);
-    }
-    setActiveEffects((prev) => prev.filter((e) => e.instanceId !== instanceId));
-  }, []);
-  const updateParameter = useCallback12(
-    (instanceId, paramName, value) => {
-      const instance = effectInstancesRef.current.get(instanceId);
-      if (instance) {
-        instance.setParameter(paramName, value);
-      }
-      setActiveEffects(
-        (prev) => prev.map(
-          (e) => e.instanceId === instanceId ? __spreadProps(__spreadValues({}, e), { params: __spreadProps(__spreadValues({}, e.params), { [paramName]: value }) }) : e
-        )
-      );
-    },
-    []
-  );
-  const toggleBypass = useCallback12((instanceId) => {
-    var _a;
-    const effect = activeEffectsRef.current.find((e) => e.instanceId === instanceId);
-    if (!effect) return;
-    const newBypassed = !effect.bypassed;
-    const instance = effectInstancesRef.current.get(instanceId);
-    if (instance) {
-      const originalWet = (_a = effect.params.wet) != null ? _a : 1;
-      instance.setParameter("wet", newBypassed ? 0 : originalWet);
-    }
-    setActiveEffects(
-      (prev) => prev.map((e) => e.instanceId === instanceId ? __spreadProps(__spreadValues({}, e), { bypassed: newBypassed }) : e)
-    );
-  }, []);
-  const reorderEffects = useCallback12((fromIndex, toIndex) => {
-    setActiveEffects((prev) => {
-      const newEffects = [...prev];
-      const [removed] = newEffects.splice(fromIndex, 1);
-      newEffects.splice(toIndex, 0, removed);
-      return newEffects;
-    });
-  }, []);
-  const clearAllEffects = useCallback12(() => {
-    effectInstancesRef.current.forEach((inst) => inst.dispose());
-    effectInstancesRef.current.clear();
-    setActiveEffects([]);
-  }, []);
-  useEffect4(() => {
-    rebuildChain(activeEffects);
-  }, [activeEffects, rebuildChain]);
-  const masterEffects = useCallback12(
-    (masterGainNode, destination, _isOffline) => {
-      const analyserNode = new Analyser2("fft", fftSize);
-      analyserRef.current = analyserNode;
-      graphNodesRef.current = {
-        masterGainNode,
-        destination,
-        analyserNode
-      };
-      const effects = activeEffectsRef.current;
-      const instances = effects.map((ae) => effectInstancesRef.current.get(ae.instanceId)).filter((inst) => inst !== void 0);
-      if (instances.length === 0) {
-        masterGainNode.connect(analyserNode);
-        analyserNode.connect(destination);
-      } else {
-        let currentNode = masterGainNode;
-        instances.forEach((inst) => {
-          currentNode.connect(inst.effect);
-          currentNode = inst.effect;
-        });
-        currentNode.connect(analyserNode);
-        analyserNode.connect(destination);
-      }
-      return function cleanup() {
-        analyserNode.dispose();
-        analyserRef.current = null;
-        graphNodesRef.current = null;
-      };
-    },
-    [fftSize]
-    // Only fftSize - reads effects from ref
-  );
-  useEffect4(() => {
-    const effectInstances = effectInstancesRef.current;
-    return () => {
-      effectInstances.forEach((inst) => inst.dispose());
-      effectInstances.clear();
-    };
-  }, []);
-  const createOfflineEffectsFunction = useCallback12(() => {
-    const nonBypassedEffects = activeEffects.filter((e) => !e.bypassed);
-    if (nonBypassedEffects.length === 0) {
-      return void 0;
-    }
-    return (masterGainNode, destination, _isOffline) => {
-      const offlineInstances = [];
-      for (const activeEffect of nonBypassedEffects) {
-        const instance = createEffectInstance(activeEffect.definition, activeEffect.params);
-        offlineInstances.push(instance);
-      }
-      if (offlineInstances.length === 0) {
-        masterGainNode.connect(destination);
-      } else {
-        let currentNode = masterGainNode;
-        offlineInstances.forEach((inst) => {
-          currentNode.connect(inst.effect);
-          currentNode = inst.effect;
-        });
-        currentNode.connect(destination);
-      }
-      return function cleanup() {
-        offlineInstances.forEach((inst) => inst.dispose());
-      };
-    };
-  }, [activeEffects]);
-  return {
-    activeEffects,
-    availableEffects: effectDefinitions,
-    addEffect,
-    removeEffect,
-    updateParameter,
-    toggleBypass,
-    reorderEffects,
-    clearAllEffects,
-    masterEffects,
-    createOfflineEffectsFunction,
-    analyserRef
-  };
-}
-
-// src/hooks/useTrackDynamicEffects.ts
-import { useState as useState10, useCallback as useCallback13, useRef as useRef10, useEffect as useEffect5 } from "react";
-function useTrackDynamicEffects() {
-  const [trackEffectsState, setTrackEffectsState] = useState10(
-    /* @__PURE__ */ new Map()
-  );
-  const trackEffectInstancesRef = useRef10(/* @__PURE__ */ new Map());
-  const trackGraphNodesRef = useRef10(/* @__PURE__ */ new Map());
-  const rebuildTrackChain = useCallback13((trackId, trackEffects) => {
-    const nodes = trackGraphNodesRef.current.get(trackId);
-    if (!nodes) return;
-    const { graphEnd, masterGainNode } = nodes;
-    const instancesMap = trackEffectInstancesRef.current.get(trackId);
-    try {
-      graphEnd.disconnect();
-    } catch (e) {
-      console.warn(`[waveform-playlist] Error disconnecting track "${trackId}" effect chain:`, e);
-    }
-    const instances = trackEffects.map((ae) => instancesMap == null ? void 0 : instancesMap.get(ae.instanceId)).filter((inst) => inst !== void 0);
-    if (instances.length === 0) {
-      graphEnd.connect(masterGainNode);
-    } else {
-      let currentNode = graphEnd;
-      instances.forEach((inst) => {
-        try {
-          inst.disconnect();
-        } catch (e) {
-          console.warn(
-            `[waveform-playlist] Error disconnecting effect "${inst.id}" on track "${trackId}":`,
-            e
-          );
-        }
-        currentNode.connect(inst.effect);
-        currentNode = inst.effect;
-      });
-      currentNode.connect(masterGainNode);
-    }
-  }, []);
-  const addEffectToTrack = useCallback13((trackId, effectId) => {
-    const definition = getEffectDefinition(effectId);
-    if (!definition) {
-      console.error(`Unknown effect: ${effectId}`);
-      return;
-    }
-    const params = {};
-    definition.parameters.forEach((p) => {
-      params[p.name] = p.default;
-    });
-    const instance = createEffectInstance(definition, params);
-    if (!trackEffectInstancesRef.current.has(trackId)) {
-      trackEffectInstancesRef.current.set(trackId, /* @__PURE__ */ new Map());
-    }
-    trackEffectInstancesRef.current.get(trackId).set(instance.instanceId, instance);
-    const newActiveEffect = {
-      instanceId: instance.instanceId,
-      effectId: definition.id,
-      definition,
-      params,
-      bypassed: false
-    };
-    setTrackEffectsState((prev) => {
-      const newState = new Map(prev);
-      const existing = newState.get(trackId) || [];
-      newState.set(trackId, [...existing, newActiveEffect]);
-      return newState;
-    });
-  }, []);
-  const removeEffectFromTrack = useCallback13((trackId, instanceId) => {
-    const instancesMap = trackEffectInstancesRef.current.get(trackId);
-    const instance = instancesMap == null ? void 0 : instancesMap.get(instanceId);
-    if (instance) {
-      instance.dispose();
-      instancesMap == null ? void 0 : instancesMap.delete(instanceId);
-    }
-    setTrackEffectsState((prev) => {
-      const newState = new Map(prev);
-      const existing = newState.get(trackId) || [];
-      newState.set(
-        trackId,
-        existing.filter((e) => e.instanceId !== instanceId)
-      );
-      return newState;
-    });
-  }, []);
-  const updateTrackEffectParameter = useCallback13(
-    (trackId, instanceId, paramName, value) => {
-      const instancesMap = trackEffectInstancesRef.current.get(trackId);
-      const instance = instancesMap == null ? void 0 : instancesMap.get(instanceId);
-      if (instance) {
-        instance.setParameter(paramName, value);
-      }
-      setTrackEffectsState((prev) => {
-        const newState = new Map(prev);
-        const existing = newState.get(trackId) || [];
-        newState.set(
-          trackId,
-          existing.map(
-            (e) => e.instanceId === instanceId ? __spreadProps(__spreadValues({}, e), { params: __spreadProps(__spreadValues({}, e.params), { [paramName]: value }) }) : e
-          )
-        );
-        return newState;
-      });
-    },
-    []
-  );
-  const toggleBypass = useCallback13((trackId, instanceId) => {
-    var _a;
-    const trackEffects = trackEffectsStateRef.current.get(trackId) || [];
-    const effect = trackEffects.find((e) => e.instanceId === instanceId);
-    if (!effect) return;
-    const newBypassed = !effect.bypassed;
-    const instancesMap = trackEffectInstancesRef.current.get(trackId);
-    const instance = instancesMap == null ? void 0 : instancesMap.get(instanceId);
-    if (instance) {
-      const originalWet = (_a = effect.params.wet) != null ? _a : 1;
-      instance.setParameter("wet", newBypassed ? 0 : originalWet);
-    }
-    setTrackEffectsState((prev) => {
-      const newState = new Map(prev);
-      const existing = newState.get(trackId) || [];
-      newState.set(
-        trackId,
-        existing.map((e) => e.instanceId === instanceId ? __spreadProps(__spreadValues({}, e), { bypassed: newBypassed }) : e)
-      );
-      return newState;
-    });
-  }, []);
-  const clearTrackEffects = useCallback13((trackId) => {
-    const instancesMap = trackEffectInstancesRef.current.get(trackId);
-    if (instancesMap) {
-      instancesMap.forEach((inst) => inst.dispose());
-      instancesMap.clear();
-    }
-    setTrackEffectsState((prev) => {
-      const newState = new Map(prev);
-      newState.set(trackId, []);
-      return newState;
-    });
-  }, []);
-  const trackEffectsStateRef = useRef10(trackEffectsState);
-  trackEffectsStateRef.current = trackEffectsState;
-  const getTrackEffectsFunction = useCallback13(
-    (trackId) => {
-      return (graphEnd, masterGainNode, _isOffline) => {
-        trackGraphNodesRef.current.set(trackId, {
-          graphEnd,
-          masterGainNode
-        });
-        const trackEffects = trackEffectsStateRef.current.get(trackId) || [];
-        const instancesMap = trackEffectInstancesRef.current.get(trackId);
-        const instances = trackEffects.map((ae) => instancesMap == null ? void 0 : instancesMap.get(ae.instanceId)).filter((inst) => inst !== void 0);
-        if (instances.length === 0) {
-          graphEnd.connect(masterGainNode);
-        } else {
-          let currentNode = graphEnd;
-          instances.forEach((inst) => {
-            currentNode.connect(inst.effect);
-            currentNode = inst.effect;
-          });
-          currentNode.connect(masterGainNode);
-        }
-        return function cleanup() {
-          trackGraphNodesRef.current.delete(trackId);
-        };
-      };
-    },
-    []
-    // No dependencies - stable function that reads from refs
-  );
-  useEffect5(() => {
-    trackEffectsState.forEach((effects, trackId) => {
-      rebuildTrackChain(trackId, effects);
-    });
-  }, [trackEffectsState, rebuildTrackChain]);
-  useEffect5(() => {
-    const trackEffectInstances = trackEffectInstancesRef.current;
-    return () => {
-      trackEffectInstances.forEach((instancesMap) => {
-        instancesMap.forEach((inst) => inst.dispose());
-        instancesMap.clear();
-      });
-      trackEffectInstances.clear();
-    };
-  }, []);
-  const createOfflineTrackEffectsFunction = useCallback13(
-    (trackId) => {
-      const trackEffects = trackEffectsState.get(trackId) || [];
-      const nonBypassedEffects = trackEffects.filter((e) => !e.bypassed);
-      if (nonBypassedEffects.length === 0) {
-        return void 0;
-      }
-      return (graphEnd, masterGainNode, _isOffline) => {
-        const offlineInstances = [];
-        for (const activeEffect of nonBypassedEffects) {
-          const instance = createEffectInstance(activeEffect.definition, activeEffect.params);
-          offlineInstances.push(instance);
-        }
-        if (offlineInstances.length === 0) {
-          graphEnd.connect(masterGainNode);
-        } else {
-          let currentNode = graphEnd;
-          offlineInstances.forEach((inst) => {
-            currentNode.connect(inst.effect);
-            currentNode = inst.effect;
-          });
-          currentNode.connect(masterGainNode);
-        }
-        return function cleanup() {
-          offlineInstances.forEach((inst) => inst.dispose());
-        };
-      };
-    },
-    [trackEffectsState]
-  );
-  return {
-    trackEffectsState,
-    addEffectToTrack,
-    removeEffectFromTrack,
-    updateTrackEffectParameter,
-    toggleBypass,
-    clearTrackEffects,
-    getTrackEffectsFunction,
-    createOfflineTrackEffectsFunction,
-    availableEffects: effectDefinitions
-  };
-}
-
-// src/hooks/useExportWav.ts
-import { useState as useState11, useCallback as useCallback14 } from "react";
-import {
-  gainToDb,
-  trackChannelCount,
-  applyFadeIn,
-  applyFadeOut
-} from "@waveform-playlist/core";
-import {
-  getUnderlyingAudioParam,
-  getGlobalAudioContext as getGlobalAudioContext2
-} from "@waveform-playlist/playout";
-
-// src/utils/wavEncoder.ts
-function encodeWav(audioBuffer, options = {}) {
-  const { bitDepth = 16 } = options;
-  const numChannels = audioBuffer.numberOfChannels;
-  const sampleRate = audioBuffer.sampleRate;
-  const numSamples = audioBuffer.length;
-  const bytesPerSample = bitDepth / 8;
-  const blockAlign = numChannels * bytesPerSample;
-  const byteRate = sampleRate * blockAlign;
-  const dataSize = numSamples * blockAlign;
-  const headerSize = 44;
-  const totalSize = headerSize + dataSize;
-  const buffer = new ArrayBuffer(totalSize);
-  const view = new DataView(buffer);
-  writeString(view, 0, "RIFF");
-  view.setUint32(4, totalSize - 8, true);
-  writeString(view, 8, "WAVE");
-  writeString(view, 12, "fmt ");
-  view.setUint32(16, 16, true);
-  view.setUint16(20, bitDepth === 32 ? 3 : 1, true);
-  view.setUint16(22, numChannels, true);
-  view.setUint32(24, sampleRate, true);
-  view.setUint32(28, byteRate, true);
-  view.setUint16(32, blockAlign, true);
-  view.setUint16(34, bitDepth, true);
-  writeString(view, 36, "data");
-  view.setUint32(40, dataSize, true);
-  const channelData = [];
-  for (let ch = 0; ch < numChannels; ch++) {
-    channelData.push(audioBuffer.getChannelData(ch));
-  }
-  let offset = headerSize;
-  if (bitDepth === 16) {
-    for (let i = 0; i < numSamples; i++) {
-      for (let ch = 0; ch < numChannels; ch++) {
-        const sample = channelData[ch][i];
-        const clampedSample = Math.max(-1, Math.min(1, sample));
-        const intSample = clampedSample < 0 ? clampedSample * 32768 : clampedSample * 32767;
-        view.setInt16(offset, intSample, true);
-        offset += 2;
-      }
-    }
-  } else {
-    for (let i = 0; i < numSamples; i++) {
-      for (let ch = 0; ch < numChannels; ch++) {
-        view.setFloat32(offset, channelData[ch][i], true);
-        offset += 4;
-      }
-    }
-  }
-  return new Blob([buffer], { type: "audio/wav" });
-}
-function writeString(view, offset, str) {
-  for (let i = 0; i < str.length; i++) {
-    view.setUint8(offset + i, str.charCodeAt(i));
-  }
-}
-function downloadBlob(blob, filename) {
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  a.style.display = "none";
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-}
-
-// src/hooks/useExportWav.ts
-function useExportWav() {
-  const [isExporting, setIsExporting] = useState11(false);
-  const [progress, setProgress] = useState11(0);
-  const [error, setError] = useState11(null);
-  const exportWav = useCallback14(
-    (_0, _1, ..._2) => __async(null, [_0, _1, ..._2], function* (tracks, trackStates, options = {}) {
-      const {
-        filename = "export",
-        mode = "master",
-        trackIndex,
-        autoDownload = true,
-        applyEffects = true,
-        effectsFunction,
-        createOfflineTrackEffects,
-        bitDepth = 16,
-        onProgress
-      } = options;
-      setIsExporting(true);
-      setProgress(0);
-      setError(null);
-      try {
-        if (tracks.length === 0) {
-          throw new Error("No tracks to export");
-        }
-        if (mode === "individual" && (trackIndex === void 0 || trackIndex < 0 || trackIndex >= tracks.length)) {
-          throw new Error("Invalid track index for individual export");
-        }
-        const sampleRate = getGlobalAudioContext2().sampleRate;
-        let totalDurationSamples = 0;
-        for (const track of tracks) {
-          for (const clip of track.clips) {
-            const clipEndSample = clip.startSample + clip.durationSamples;
-            totalDurationSamples = Math.max(totalDurationSamples, clipEndSample);
-          }
-        }
-        totalDurationSamples += Math.round(sampleRate * 0.1);
-        const duration = totalDurationSamples / sampleRate;
-        const tracksToRender = mode === "individual" ? [{ track: tracks[trackIndex], state: trackStates[trackIndex], index: trackIndex }] : tracks.map((track, index) => ({ track, state: trackStates[index], index }));
-        const hasSolo = mode === "master" && trackStates.some((state) => state.soloed);
-        const reportProgress = (p) => {
-          setProgress(p);
-          onProgress == null ? void 0 : onProgress(p);
-        };
-        const renderedBuffer = yield renderOffline(
-          tracksToRender,
-          hasSolo,
-          duration,
-          sampleRate,
-          applyEffects,
-          effectsFunction,
-          createOfflineTrackEffects,
-          reportProgress
-        );
-        reportProgress(0.9);
-        const blob = encodeWav(renderedBuffer, { bitDepth });
-        reportProgress(1);
-        if (autoDownload) {
-          const exportFilename = mode === "individual" ? `${filename}_${tracks[trackIndex].name}` : filename;
-          downloadBlob(blob, `${exportFilename}.wav`);
-        }
-        return {
-          audioBuffer: renderedBuffer,
-          blob,
-          duration
-        };
-      } catch (err) {
-        const message = err instanceof Error ? err.message : "Export failed";
-        setError(message);
-        throw err;
-      } finally {
-        setIsExporting(false);
+        key: "Home",
+        action: selectFirst,
+        description: "Select first annotation",
+        preventDefault: true
+      },
+      {
+        key: "End",
+        action: selectLast,
+        description: "Select last annotation",
+        preventDefault: true
+      },
+      {
+        key: "Escape",
+        action: clearSelection,
+        description: "Deselect annotation",
+        preventDefault: true
       }
-    }),
-    []
+    ],
+    [selectPrevious, selectNext, selectFirst, selectLast, clearSelection]
   );
+  useKeyboardShortcuts({
+    shortcuts: activeAnnotationShortcuts,
+    enabled: enabled && activeIndex >= 0
+  });
+  useKeyboardShortcuts({
+    shortcuts: navigationShortcuts,
+    enabled: enabled && annotations.length > 0 && !!onActiveAnnotationChange
+  });
   return {
-    exportWav,
-    isExporting,
-    progress,
-    error
+    moveStartBoundary,
+    moveEndBoundary,
+    selectPrevious,
+    selectNext,
+    selectFirst,
+    selectLast,
+    clearSelection,
+    scrollToAnnotation,
+    playActiveAnnotation
   };
 }
-function renderOffline(tracksToRender, hasSolo, duration, sampleRate, applyEffects, effectsFunction, createOfflineTrackEffects, onProgress) {
-  return __async(this, null, function* () {
-    const { Offline, Volume: Volume2, Gain, Panner, Player, ToneAudioBuffer } = yield import("tone");
-    onProgress(0.1);
-    const audibleTracks = tracksToRender.filter(({ state }) => {
-      if (state.muted && !state.soloed) return false;
-      if (hasSolo && !state.soloed) return false;
-      return true;
-    });
-    const outputChannels = audibleTracks.reduce(
-      (max, { track }) => Math.max(max, trackChannelCount(track)),
-      1
-    );
-    let buffer;
-    try {
-      buffer = yield Offline(
-        (_0) => __async(null, [_0], function* ({ transport, destination }) {
-          const masterVolume = new Volume2(0);
-          if (effectsFunction && applyEffects) {
-            effectsFunction(masterVolume, destination, true);
-          } else {
-            masterVolume.connect(destination);
-          }
-          for (const { track, state } of audibleTracks) {
-            const trackVolume = new Volume2(gainToDb(state.volume));
-            const trackPan = new Panner({ pan: state.pan, channelCount: trackChannelCount(track) });
-            const trackMute = new Gain(state.muted ? 0 : 1);
-            const trackEffects = createOfflineTrackEffects == null ? void 0 : createOfflineTrackEffects(track.id);
-            if (trackEffects && applyEffects) {
-              trackEffects(trackMute, masterVolume, true);
-            } else {
-              trackMute.connect(masterVolume);
-            }
-            trackPan.connect(trackMute);
-            trackVolume.connect(trackPan);
-            for (const clip of track.clips) {
-              const {
-                audioBuffer,
-                startSample,
-                durationSamples,
-                offsetSamples,
-                gain: clipGain,
-                fadeIn,
-                fadeOut
-              } = clip;
-              if (!audioBuffer) {
-                console.warn(
-                  '[waveform-playlist] Skipping clip "' + (clip.name || clip.id) + '" - no audioBuffer for export'
-                );
-                continue;
-              }
-              const startTime = startSample / sampleRate;
-              const clipDuration = durationSamples / sampleRate;
-              const offset = offsetSamples / sampleRate;
-              const toneBuffer = new ToneAudioBuffer(audioBuffer);
-              const player = new Player(toneBuffer);
-              const fadeGain = new Gain(clipGain);
-              player.connect(fadeGain);
-              fadeGain.connect(trackVolume);
-              if (applyEffects) {
-                const audioParam = getUnderlyingAudioParam(fadeGain.gain);
-                if (audioParam) {
-                  applyClipFades(audioParam, clipGain, startTime, clipDuration, fadeIn, fadeOut);
-                } else if (fadeIn || fadeOut) {
-                  console.warn(
-                    '[waveform-playlist] Cannot apply fades for clip "' + (clip.name || clip.id) + '" - AudioParam not accessible'
-                  );
-                }
-              }
-              player.start(startTime, offset, clipDuration);
-            }
-          }
-          transport.start(0);
-        }),
-        duration,
-        outputChannels,
-        sampleRate
-      );
-    } catch (err) {
-      if (err instanceof Error) {
-        throw err;
-      } else {
-        throw new Error("Tone.Offline rendering failed: " + String(err));
-      }
-    }
-    onProgress(0.9);
-    const result = buffer.get();
-    if (!result) {
-      throw new Error("Offline rendering produced no audio buffer");
-    }
-    return result;
-  });
-}
-function applyClipFades(gainParam, clipGain, startTime, clipDuration, fadeIn, fadeOut) {
-  if (fadeIn) {
-    gainParam.setValueAtTime(0, startTime);
-  } else {
-    gainParam.setValueAtTime(clipGain, startTime);
-  }
-  if (fadeIn) {
-    applyFadeIn(gainParam, startTime, fadeIn.duration, fadeIn.type || "linear", 0, clipGain);
-  }
-  if (fadeOut) {
-    const fadeOutStart = startTime + clipDuration - fadeOut.duration;
-    if (!fadeIn || fadeIn.duration < clipDuration - fadeOut.duration) {
-      gainParam.setValueAtTime(clipGain, fadeOutStart);
-    }
-    applyFadeOut(gainParam, fadeOutStart, fadeOut.duration, fadeOut.type || "linear", clipGain, 0);
-  }
-}
 
 // src/hooks/useAnimationFrameLoop.ts
-import { useCallback as useCallback15, useEffect as useEffect6, useRef as useRef11 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect3, useRef as useRef7 } from "react";
 var useAnimationFrameLoop = () => {
-  const animationFrameRef = useRef11(null);
-  const stopAnimationFrameLoop = useCallback15(() => {
+  const animationFrameRef = useRef7(null);
+  const stopAnimationFrameLoop = useCallback11(() => {
     if (animationFrameRef.current !== null) {
       cancelAnimationFrame(animationFrameRef.current);
       animationFrameRef.current = null;
     }
   }, []);
-  const startAnimationFrameLoop = useCallback15(
+  const startAnimationFrameLoop = useCallback11(
     (callback) => {
       stopAnimationFrameLoop();
       animationFrameRef.current = requestAnimationFrame(callback);
     },
     [stopAnimationFrameLoop]
   );
-  useEffect6(() => {
+  useEffect3(() => {
     return () => {
       stopAnimationFrameLoop();
     };
@@ -2986,7 +1409,7 @@ var useAnimationFrameLoop = () => {
 };
 
 // src/hooks/useWaveformDataCache.ts
-import { useState as useState12, useEffect as useEffect7, useRef as useRef12, useCallback as useCallback16 } from "react";
+import { useState as useState8, useEffect as useEffect4, useRef as useRef8, useCallback as useCallback12 } from "react";
 
 // src/workers/peaksWorker.ts
 import WaveformData2 from "waveform-data";
@@ -3218,20 +1641,20 @@ function createPeaksWorker() {
 
 // src/hooks/useWaveformDataCache.ts
 function useWaveformDataCache(tracks, baseScale) {
-  const [cache, setCache] = useState12(() => /* @__PURE__ */ new Map());
-  const [isGenerating, setIsGenerating] = useState12(false);
-  const workerRef = useRef12(null);
-  const generatedByBufferRef = useRef12(/* @__PURE__ */ new WeakMap());
-  const inflightByBufferRef = useRef12(/* @__PURE__ */ new WeakMap());
-  const subscribersByBufferRef = useRef12(/* @__PURE__ */ new WeakMap());
-  const pendingCountRef = useRef12(0);
-  const getWorker = useCallback16(() => {
+  const [cache, setCache] = useState8(() => /* @__PURE__ */ new Map());
+  const [isGenerating, setIsGenerating] = useState8(false);
+  const workerRef = useRef8(null);
+  const generatedByBufferRef = useRef8(/* @__PURE__ */ new WeakMap());
+  const inflightByBufferRef = useRef8(/* @__PURE__ */ new WeakMap());
+  const subscribersByBufferRef = useRef8(/* @__PURE__ */ new WeakMap());
+  const pendingCountRef = useRef8(0);
+  const getWorker = useCallback12(() => {
     if (!workerRef.current) {
       workerRef.current = createPeaksWorker();
     }
     return workerRef.current;
   }, []);
-  useEffect7(() => {
+  useEffect4(() => {
     let cancelled = false;
     const generatedByBuffer = generatedByBufferRef.current;
     const inflightByBuffer = inflightByBufferRef.current;
@@ -3336,7 +1759,7 @@ function useWaveformDataCache(tracks, baseScale) {
       setIsGenerating(false);
     };
   }, [tracks, baseScale, getWorker]);
-  useEffect7(() => {
+  useEffect4(() => {
     return () => {
       var _a;
       (_a = workerRef.current) == null ? void 0 : _a.terminate();
@@ -3346,226 +1769,6 @@ function useWaveformDataCache(tracks, baseScale) {
   return { cache, isGenerating };
 }
 
-// src/hooks/useDynamicTracks.ts
-import { useState as useState13, useCallback as useCallback17, useRef as useRef13, useEffect as useEffect8 } from "react";
-import { createTrack as createTrack2, createClipFromSeconds as createClipFromSeconds2 } from "@waveform-playlist/core";
-import { getGlobalAudioContext as getGlobalAudioContext3 } from "@waveform-playlist/playout";
-function getSourceName(source) {
-  var _a, _b, _c, _d, _e;
-  if (source instanceof File) {
-    return source.name.replace(/\.[^/.]+$/, "");
-  }
-  if (source instanceof Blob) {
-    return "Untitled";
-  }
-  if (typeof source === "string") {
-    return (_b = (_a = source.split("/").pop()) == null ? void 0 : _a.replace(/\.[^/.]+$/, "")) != null ? _b : "Untitled";
-  }
-  return (_e = (_d = source.name) != null ? _d : (_c = source.src.split("/").pop()) == null ? void 0 : _c.replace(/\.[^/.]+$/, "")) != null ? _e : "Untitled";
-}
-function decodeSource(source, audioContext, signal) {
-  return __async(this, null, function* () {
-    const name = getSourceName(source);
-    if (source instanceof Blob) {
-      const arrayBuffer2 = yield source.arrayBuffer();
-      signal == null ? void 0 : signal.throwIfAborted();
-      const audioBuffer2 = yield audioContext.decodeAudioData(arrayBuffer2);
-      return { audioBuffer: audioBuffer2, name };
-    }
-    const url = typeof source === "string" ? source : source.src;
-    const response = yield fetch(url, { signal });
-    if (!response.ok) throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
-    const arrayBuffer = yield response.arrayBuffer();
-    signal == null ? void 0 : signal.throwIfAborted();
-    const audioBuffer = yield audioContext.decodeAudioData(arrayBuffer);
-    return { audioBuffer, name };
-  });
-}
-function useDynamicTracks() {
-  const [tracks, setTracks] = useState13([]);
-  const [loadingCount, setLoadingCount] = useState13(0);
-  const [errors, setErrors] = useState13([]);
-  const cancelledRef = useRef13(false);
-  const loadingIdsRef = useRef13(/* @__PURE__ */ new Set());
-  const abortControllersRef = useRef13(/* @__PURE__ */ new Map());
-  useEffect8(() => {
-    const controllers = abortControllersRef.current;
-    return () => {
-      cancelledRef.current = true;
-      for (const controller of controllers.values()) {
-        controller.abort();
-      }
-      controllers.clear();
-    };
-  }, []);
-  const addTracks = useCallback17((sources) => {
-    if (sources.length === 0) return;
-    const audioContext = getGlobalAudioContext3();
-    const placeholders = sources.map((source) => ({
-      track: createTrack2({ name: `${getSourceName(source)} (loading...)`, clips: [] }),
-      source
-    }));
-    setTracks((prev) => [...prev, ...placeholders.map((p) => p.track)]);
-    setLoadingCount((prev) => prev + sources.length);
-    for (const { track, source } of placeholders) {
-      loadingIdsRef.current.add(track.id);
-      const controller = new AbortController();
-      abortControllersRef.current.set(track.id, controller);
-      (() => __async(null, null, function* () {
-        try {
-          const { audioBuffer, name } = yield decodeSource(source, audioContext, controller.signal);
-          const clip = createClipFromSeconds2({
-            audioBuffer,
-            startTime: 0,
-            duration: audioBuffer.duration,
-            offset: 0,
-            name
-          });
-          if (!cancelledRef.current && loadingIdsRef.current.has(track.id)) {
-            setTracks(
-              (prev) => prev.map((t) => t.id === track.id ? __spreadProps(__spreadValues({}, t), { name, clips: [clip] }) : t)
-            );
-          }
-        } catch (error) {
-          if (error instanceof DOMException && error.name === "AbortError") return;
-          console.warn("[waveform-playlist] Error loading audio:", error);
-          if (!cancelledRef.current && loadingIdsRef.current.has(track.id)) {
-            setTracks((prev) => prev.filter((t) => t.id !== track.id));
-            setErrors((prev) => [
-              ...prev,
-              {
-                name: getSourceName(source),
-                error: error instanceof Error ? error : new Error(String(error))
-              }
-            ]);
-          }
-        } finally {
-          abortControllersRef.current.delete(track.id);
-          if (!cancelledRef.current && loadingIdsRef.current.delete(track.id)) {
-            setLoadingCount((prev) => prev - 1);
-          }
-        }
-      }))();
-    }
-  }, []);
-  const removeTrack = useCallback17((trackId) => {
-    setTracks((prev) => prev.filter((t) => t.id !== trackId));
-    const controller = abortControllersRef.current.get(trackId);
-    if (controller) {
-      controller.abort();
-      abortControllersRef.current.delete(trackId);
-    }
-    if (loadingIdsRef.current.delete(trackId)) {
-      setLoadingCount((prev) => prev - 1);
-    }
-  }, []);
-  return {
-    tracks,
-    addTracks,
-    removeTrack,
-    loadingCount,
-    isLoading: loadingCount > 0,
-    errors
-  };
-}
-
-// src/hooks/useOutputMeter.ts
-import { useEffect as useEffect9, useState as useState14, useRef as useRef14, useCallback as useCallback18 } from "react";
-import { getGlobalContext } from "@waveform-playlist/playout";
-import { gainToNormalized } from "@waveform-playlist/core";
-import { meterProcessorUrl } from "@waveform-playlist/worklets";
-var PEAK_DECAY = 0.98;
-function useOutputMeter(options = {}) {
-  const { channelCount = 2, updateRate = 60, isPlaying = false } = options;
-  const [levels, setLevels] = useState14(() => new Array(channelCount).fill(0));
-  const [peakLevels, setPeakLevels] = useState14(() => new Array(channelCount).fill(0));
-  const [rmsLevels, setRmsLevels] = useState14(() => new Array(channelCount).fill(0));
-  const workletNodeRef = useRef14(null);
-  const smoothedPeakRef = useRef14(new Array(channelCount).fill(0));
-  const [meterError, setMeterError] = useState14(null);
-  const resetPeak = useCallback18(
-    () => setPeakLevels(new Array(channelCount).fill(0)),
-    [channelCount]
-  );
-  useEffect9(() => {
-    if (!isPlaying) {
-      const zeros = new Array(channelCount).fill(0);
-      smoothedPeakRef.current = new Array(channelCount).fill(0);
-      setLevels(zeros);
-      setRmsLevels(zeros);
-      setPeakLevels(zeros);
-    }
-  }, [isPlaying, channelCount]);
-  useEffect9(() => {
-    let isMounted = true;
-    const setup = () => __async(null, null, function* () {
-      const context = getGlobalContext();
-      const rawCtx = context.rawContext;
-      yield rawCtx.audioWorklet.addModule(meterProcessorUrl);
-      if (!isMounted) return;
-      const workletNode = context.createAudioWorkletNode("meter-processor", {
-        channelCount,
-        channelCountMode: "explicit",
-        processorOptions: {
-          numberOfChannels: channelCount,
-          updateRate
-        }
-      });
-      workletNodeRef.current = workletNode;
-      workletNode.onprocessorerror = (event) => {
-        console.warn("[waveform-playlist] Output meter worklet processor error:", String(event));
-      };
-      const destination = context.destination;
-      destination.chain(workletNode);
-      smoothedPeakRef.current = new Array(channelCount).fill(0);
-      workletNode.port.onmessage = (event) => {
-        var _a;
-        if (!isMounted) return;
-        const { peak, rms } = event.data;
-        const smoothed = smoothedPeakRef.current;
-        const peakValues = [];
-        const rmsValues = [];
-        for (let ch = 0; ch < peak.length; ch++) {
-          smoothed[ch] = Math.max(peak[ch], ((_a = smoothed[ch]) != null ? _a : 0) * PEAK_DECAY);
-          peakValues.push(gainToNormalized(smoothed[ch]));
-          rmsValues.push(gainToNormalized(rms[ch]));
-        }
-        setLevels(peakValues);
-        setRmsLevels(rmsValues);
-        setPeakLevels((prev) => peakValues.map((val, i) => {
-          var _a2;
-          return Math.max((_a2 = prev[i]) != null ? _a2 : 0, val);
-        }));
-      };
-    });
-    setup().catch((err) => {
-      console.warn("[waveform-playlist] Failed to set up output meter:", String(err));
-      if (isMounted) {
-        setMeterError(err instanceof Error ? err : new Error(String(err)));
-      }
-    });
-    return () => {
-      isMounted = false;
-      if (workletNodeRef.current) {
-        try {
-          const context = getGlobalContext();
-          context.destination.chain();
-        } catch (err) {
-          console.warn("[waveform-playlist] Failed to restore destination chain:", String(err));
-        }
-        try {
-          workletNodeRef.current.disconnect();
-          workletNodeRef.current.port.close();
-        } catch (err) {
-          console.warn("[waveform-playlist] Output meter disconnect during cleanup:", String(err));
-        }
-        workletNodeRef.current = null;
-      }
-    };
-  }, [channelCount, updateRate]);
-  return { levels, peakLevels, rmsLevels, resetPeak, error: meterError };
-}
-
 // src/WaveformPlaylistContext.tsx
 import { jsx } from "react/jsx-runtime";
 var PlaybackAnimationContext = createContext(null);
@@ -3585,6 +1788,7 @@ var WaveformPlaylistProvider = ({
   annotationList,
   effects,
   onReady,
+  onError,
   onAnnotationUpdate: _onAnnotationUpdate,
   onAnnotationsChange,
   barWidth = 1,
@@ -3595,18 +1799,19 @@ var WaveformPlaylistProvider = ({
   deferEngineRebuild = false,
   indefinitePlayback = false,
   sampleRate: sampleRateProp,
+  createAdapter,
   children
 }) => {
   var _a, _b, _c, _d;
   const progressBarWidth = progressBarWidthProp != null ? progressBarWidthProp : barWidth + barGap;
-  const indefinitePlaybackRef = useRef15(indefinitePlayback);
+  const indefinitePlaybackRef = useRef9(indefinitePlayback);
   indefinitePlaybackRef.current = indefinitePlayback;
-  const stableZoomLevels = useMemo4(
+  const stableZoomLevels = useMemo3(
     () => zoomLevels,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [zoomLevels == null ? void 0 : zoomLevels.join(",")]
   );
-  const annotations = useMemo4(() => {
+  const annotations = useMemo3(() => {
     if (!(annotationList == null ? void 0 : annotationList.annotations)) return [];
     if (process.env.NODE_ENV !== "production" && annotationList.annotations.length > 0) {
       const first = annotationList.annotations[0];
@@ -3619,63 +1824,50 @@ var WaveformPlaylistProvider = ({
     }
     return annotationList.annotations;
   }, [annotationList == null ? void 0 : annotationList.annotations]);
-  const annotationsRef = useRef15(annotations);
+  const annotationsRef = useRef9(annotations);
   annotationsRef.current = annotations;
-  const [activeAnnotationId, setActiveAnnotationIdState] = useState15(null);
-  const [isPlaying, setIsPlaying] = useState15(false);
-  const [currentTime, setCurrentTime] = useState15(0);
-  const [duration, setDuration] = useState15(0);
-  const [audioBuffers, setAudioBuffers] = useState15([]);
-  const [peaksDataArray, setPeaksDataArray] = useState15([]);
-  const [trackStates, setTrackStates] = useState15([]);
-  const [isAutomaticScroll, setIsAutomaticScroll] = useState15(automaticScroll);
-  const [continuousPlay, setContinuousPlayState] = useState15(
+  const [activeAnnotationId, setActiveAnnotationIdState] = useState9(null);
+  const [isPlaying, setIsPlaying] = useState9(false);
+  const [currentTime, setCurrentTime] = useState9(0);
+  const [duration, setDuration] = useState9(0);
+  const [audioBuffers, setAudioBuffers] = useState9([]);
+  const [peaksDataArray, setPeaksDataArray] = useState9([]);
+  const [trackStates, setTrackStates] = useState9([]);
+  const [isAutomaticScroll, setIsAutomaticScroll] = useState9(automaticScroll);
+  const [continuousPlay, setContinuousPlayState] = useState9(
     (_a = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _a : false
   );
-  const [linkEndpoints, setLinkEndpoints] = useState15((_b = annotationList == null ? void 0 : annotationList.linkEndpoints) != null ? _b : false);
-  const [annotationsEditable, setAnnotationsEditable] = useState15((_c = annotationList == null ? void 0 : annotationList.editable) != null ? _c : false);
-  const [isReady, setIsReady] = useState15(false);
-  const engineRef = useRef15(null);
-  const adapterRef = useRef15(null);
-  const audioInitializedRef = useRef15(false);
-  const isPlayingRef = useRef15(false);
+  const [linkEndpoints, setLinkEndpoints] = useState9((_b = annotationList == null ? void 0 : annotationList.linkEndpoints) != null ? _b : false);
+  const [annotationsEditable, setAnnotationsEditable] = useState9((_c = annotationList == null ? void 0 : annotationList.editable) != null ? _c : false);
+  const [isReady, setIsReady] = useState9(false);
+  const engineRef = useRef9(null);
+  const adapterRef = useRef9(null);
+  const audioInitializedRef = useRef9(false);
+  const isPlayingRef = useRef9(false);
   isPlayingRef.current = isPlaying;
-  const playStartPositionRef = useRef15(0);
-  const currentTimeRef = useRef15(0);
-  const visualTimeRef = useRef15(0);
-  const tracksRef = useRef15(tracks);
-  const soundFontCacheRef = useRef15(soundFontCache);
+  const playStartPositionRef = useRef9(0);
+  const currentTimeRef = useRef9(0);
+  const visualTimeRef = useRef9(0);
+  const tracksRef = useRef9(tracks);
+  const soundFontCacheRef = useRef9(soundFontCache);
   soundFontCacheRef.current = soundFontCache;
-  const trackStatesRef = useRef15(trackStates);
-  const playbackStartTimeRef = useRef15(0);
-  const audioStartPositionRef = useRef15(0);
-  const playbackEndTimeRef = useRef15(null);
-  const scrollContainerRef = useRef15(null);
-  const isAutomaticScrollRef = useRef15(false);
-  const frameCallbacksRef = useRef15(/* @__PURE__ */ new Map());
-  const continuousPlayRef = useRef15((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
-  const activeAnnotationIdRef = useRef15(null);
-  const engineTracksRef = useRef15(null);
-  const lastTracksVersionRef = useRef15(0);
-  const skipEngineDisposeRef = useRef15(false);
-  const isDraggingRef = useRef15(false);
-  const prevTracksRef = useRef15([]);
-  const samplesPerPixelRef = useRef15(initialSamplesPerPixel);
-  const [initialSampleRate] = useState15(() => {
-    if (typeof AudioContext === "undefined") return sampleRateProp != null ? sampleRateProp : 48e3;
-    try {
-      if (sampleRateProp !== void 0) {
-        return configureGlobalContext({ sampleRate: sampleRateProp });
-      }
-      return getGlobalAudioContext4().sampleRate;
-    } catch (err) {
-      console.warn(
-        "[waveform-playlist] Failed to configure AudioContext: " + String(err) + " \u2014 falling back to " + (sampleRateProp != null ? sampleRateProp : 48e3) + " Hz"
-      );
-      return sampleRateProp != null ? sampleRateProp : 48e3;
-    }
-  });
-  const sampleRateRef = useRef15(initialSampleRate);
+  const trackStatesRef = useRef9(trackStates);
+  const playbackStartTimeRef = useRef9(0);
+  const audioStartPositionRef = useRef9(0);
+  const playbackEndTimeRef = useRef9(null);
+  const scrollContainerRef = useRef9(null);
+  const isAutomaticScrollRef = useRef9(false);
+  const frameCallbacksRef = useRef9(/* @__PURE__ */ new Map());
+  const continuousPlayRef = useRef9((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
+  const activeAnnotationIdRef = useRef9(null);
+  const engineTracksRef = useRef9(null);
+  const lastTracksVersionRef = useRef9(0);
+  const skipEngineDisposeRef = useRef9(false);
+  const isDraggingRef = useRef9(false);
+  const prevTracksRef = useRef9([]);
+  const samplesPerPixelRef = useRef9(initialSamplesPerPixel);
+  const [initialSampleRate] = useState9(() => sampleRateProp != null ? sampleRateProp : 48e3);
+  const sampleRateRef = useRef9(initialSampleRate);
   const { timeFormat, setTimeFormat, formatTime: formatTime2 } = useTimeFormat();
   const zoom = useZoomControls({ engineRef, initialSamplesPerPixel });
   const { samplesPerPixel, onEngineState: onZoomEngineState } = zoom;
@@ -3720,20 +1912,20 @@ var WaveformPlaylistProvider = ({
     onEngineState: onUndoEngineState
   } = useUndoState({ engineRef });
   const { animationFrameRef, startAnimationFrameLoop, stopAnimationFrameLoop } = useAnimationFrameLoop();
-  const baseScale = useMemo4(
+  const baseScale = useMemo3(
     () => Math.min(...stableZoomLevels != null ? stableZoomLevels : [256, 512, 1024, 2048, 4096, 8192]),
     [stableZoomLevels]
   );
   const { cache: waveformDataCache } = useWaveformDataCache(tracks, baseScale);
-  const setContinuousPlay = useCallback19((value) => {
+  const setContinuousPlay = useCallback13((value) => {
     continuousPlayRef.current = value;
     setContinuousPlayState(value);
   }, []);
-  const setActiveAnnotationId = useCallback19((value) => {
+  const setActiveAnnotationId = useCallback13((value) => {
     activeAnnotationIdRef.current = value;
     setActiveAnnotationIdState(value);
   }, []);
-  const setLoopRegionFromSelection = useCallback19(() => {
+  const setLoopRegionFromSelection = useCallback13(() => {
     var _a2, _b2;
     const start = (_a2 = selectionStartRef.current) != null ? _a2 : 0;
     const end = (_b2 = selectionEndRef.current) != null ? _b2 : 0;
@@ -3741,10 +1933,10 @@ var WaveformPlaylistProvider = ({
       setLoopRegion(start, end);
     }
   }, [setLoopRegion, selectionStartRef, selectionEndRef]);
-  useEffect10(() => {
+  useEffect5(() => {
     isAutomaticScrollRef.current = isAutomaticScroll;
   }, [isAutomaticScroll]);
-  useEffect10(() => {
+  useEffect5(() => {
     trackStatesRef.current = trackStates;
   }, [trackStates]);
   tracksRef.current = tracks;
@@ -3755,7 +1947,7 @@ var WaveformPlaylistProvider = ({
     return current === pt;
   });
   skipEngineDisposeRef.current = isEngineTracks || isDraggingRef.current || isIncrementalAdd;
-  useEffect10(() => {
+  useEffect5(() => {
     if (!scrollContainerRef.current || duration === 0) return;
     const container = scrollContainerRef.current;
     const oldSamplesPerPixel = samplesPerPixelRef.current;
@@ -3771,8 +1963,8 @@ var WaveformPlaylistProvider = ({
     container.scrollLeft = newScrollLeft;
     samplesPerPixelRef.current = newSamplesPerPixel;
   }, [samplesPerPixel, duration]);
-  const pendingResumeRef = useRef15(null);
-  useEffect10(() => {
+  const pendingResumeRef = useRef9(null);
+  useEffect5(() => {
     var _a2, _b2, _c2, _d2;
     if (isEngineTracks || isDraggingRef.current) {
       if (isEngineTracks) {
@@ -3877,6 +2069,7 @@ var WaveformPlaylistProvider = ({
       stopAnimationFrameLoop();
       pendingResumeRef.current = { position: resumePosition };
     }
+    let cancelled = false;
     const loadAudio = () => __async(null, null, function* () {
       var _a3, _b3, _c3, _d3, _e;
       try {
@@ -3919,7 +2112,17 @@ var WaveformPlaylistProvider = ({
         lastTracksVersionRef.current = 0;
         engineTracksRef.current = null;
         audioInitializedRef.current = false;
-        const adapter = createToneAdapter({ effects, soundFontCache: soundFontCacheRef.current });
+        const adapter = yield resolvePlayoutAdapter({
+          createAdapter,
+          effects,
+          soundFontCache: soundFontCacheRef.current,
+          sampleRate: sampleRateProp
+        });
+        if (cancelled) {
+          adapter.dispose();
+          return;
+        }
+        sampleRateRef.current = adapter.audioContext.sampleRate;
         adapterRef.current = adapter;
         const engine = new PlaylistEngine({
           adapter,
@@ -3977,11 +2180,23 @@ var WaveformPlaylistProvider = ({
         prevTracksRef.current = tracks;
         onReady == null ? void 0 : onReady();
       } catch (error) {
-        console.warn("[waveform-playlist] Error loading audio:", String(error));
+        if (!engineRef.current && adapterRef.current) {
+          try {
+            adapterRef.current.dispose();
+          } catch (disposeErr) {
+            console.warn(
+              "[waveform-playlist] adapter dispose after load failure threw: " + String(disposeErr)
+            );
+          }
+          adapterRef.current = null;
+        }
+        console.warn("[waveform-playlist] Error loading audio: " + String(error));
+        onError == null ? void 0 : onError(error instanceof Error ? error : new Error(String(error)));
       }
     });
     loadAudio();
     return () => {
+      cancelled = true;
       if (skipEngineDisposeRef.current) {
         skipEngineDisposeRef.current = false;
         return;
@@ -4004,6 +2219,7 @@ var WaveformPlaylistProvider = ({
     // to the live adapter by the sync effect below; only adapter creation reads it
     // (via soundFontCacheRef).
     onReady,
+    onError,
     effects,
     stopAnimationFrameLoop,
     onSelectionEngineState,
@@ -4022,10 +2238,10 @@ var WaveformPlaylistProvider = ({
     stableZoomLevels,
     deferEngineRebuild
   ]);
-  useEffect10(() => {
+  useEffect5(() => {
     syncSoundFontCacheToAdapter(adapterRef.current, soundFontCache);
   }, [soundFontCache]);
-  useEffect10(() => {
+  useEffect5(() => {
     if (tracks.length === 0) return;
     const allTrackPeaks = tracks.map((track) => {
       const clipPeaks = track.clips.map((clip) => {
@@ -4106,8 +2322,15 @@ var WaveformPlaylistProvider = ({
     });
     setPeaksDataArray(allTrackPeaks);
   }, [tracks, samplesPerPixel, mono, waveformDataCache, deferEngineRebuild]);
-  const getPlaybackTimeFallbackWarnedRef = useRef15(false);
-  const getPlaybackTime = useCallback19(() => {
+  const getAudioContextTime = useCallback13(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = adapterRef.current) == null ? void 0 : _a2.audioContext.currentTime) != null ? _b2 : 0;
+    },
+    []
+  );
+  const getPlaybackTimeFallbackWarnedRef = useRef9(false);
+  const getPlaybackTime = useCallback13(() => {
     var _a2, _b2;
     if (engineRef.current) {
       return engineRef.current.getCurrentTime();
@@ -4118,30 +2341,35 @@ var WaveformPlaylistProvider = ({
         "[waveform-playlist] getPlaybackTime called without engine. Falling back to manual elapsed time (loop wrapping will not work)."
       );
     }
-    const elapsed = getContext2().currentTime - ((_a2 = playbackStartTimeRef.current) != null ? _a2 : 0);
+    const elapsed = getAudioContextTime() - ((_a2 = playbackStartTimeRef.current) != null ? _a2 : 0);
     return ((_b2 = audioStartPositionRef.current) != null ? _b2 : 0) + elapsed;
-  }, []);
-  const toVisualTime = useCallback19((rawTime) => {
+  }, [getAudioContextTime]);
+  const toVisualTime = useCallback13((rawTime) => {
     return Number.isFinite(rawTime) ? Math.max(0, rawTime) : 0;
   }, []);
-  const setCurrentTimeRefs = useCallback19(
+  const setCurrentTimeRefs = useCallback13(
     (rawTime) => {
       currentTimeRef.current = rawTime;
       visualTimeRef.current = toVisualTime(rawTime);
     },
     [toVisualTime]
   );
-  const getLookAhead = useCallback19(() => {
+  const getLookAhead = useCallback13(() => {
     var _a2, _b2;
     return (_b2 = (_a2 = engineRef.current) == null ? void 0 : _a2.lookAhead) != null ? _b2 : 0;
   }, []);
-  const registerFrameCallback = useCallback19((id, cb) => {
+  const getOutputLatency = useCallback13(() => {
+    var _a2;
+    const audioCtx = (_a2 = adapterRef.current) == null ? void 0 : _a2.audioContext;
+    return audioCtx && "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
+  }, []);
+  const registerFrameCallback = useCallback13((id, cb) => {
     frameCallbacksRef.current.set(id, cb);
   }, []);
-  const unregisterFrameCallback = useCallback19((id) => {
+  const unregisterFrameCallback = useCallback13((id) => {
     frameCallbacksRef.current.delete(id);
   }, []);
-  const startAnimationLoop = useCallback19(() => {
+  const startAnimationLoop = useCallback13(() => {
     const updateTime = () => {
       const time = getPlaybackTime();
       currentTimeRef.current = time;
@@ -4229,15 +2457,14 @@ var WaveformPlaylistProvider = ({
     setCurrentTimeRefs
   ]);
   const stopAnimationLoop = stopAnimationFrameLoop;
-  useEffect10(() => {
+  useEffect5(() => {
     const reschedulePlayback = () => __async(null, null, function* () {
       if (isPlaying && animationFrameRef.current && engineRef.current) {
         if (continuousPlay) {
           const currentPos = currentTimeRef.current;
           engineRef.current.stop();
           stopAnimationLoop();
-          const context = getContext2();
-          const timeNow = context.currentTime;
+          const timeNow = getAudioContextTime();
           playbackStartTimeRef.current = timeNow;
           audioStartPositionRef.current = currentPos;
           engineRef.current.play(currentPos);
@@ -4253,14 +2480,20 @@ var WaveformPlaylistProvider = ({
       setIsPlaying(false);
       stopAnimationLoop();
     });
-  }, [continuousPlay, isPlaying, startAnimationLoop, stopAnimationLoop, animationFrameRef]);
-  useEffect10(() => {
+  }, [
+    continuousPlay,
+    isPlaying,
+    startAnimationLoop,
+    stopAnimationLoop,
+    animationFrameRef,
+    getAudioContextTime
+  ]);
+  useEffect5(() => {
     const resumePlayback = () => __async(null, null, function* () {
       if (pendingResumeRef.current && engineRef.current) {
         const { position } = pendingResumeRef.current;
         pendingResumeRef.current = null;
-        const context = getContext2();
-        const timeNow = context.currentTime;
+        const timeNow = getAudioContextTime();
         playbackStartTimeRef.current = timeNow;
         audioStartPositionRef.current = position;
         if (!audioInitializedRef.current) {
@@ -4277,8 +2510,8 @@ var WaveformPlaylistProvider = ({
       setIsPlaying(false);
       stopAnimationLoop();
     });
-  }, [tracks, startAnimationLoop, stopAnimationLoop]);
-  const play = useCallback19(
+  }, [tracks, startAnimationLoop, stopAnimationLoop, getAudioContextTime]);
+  const play = useCallback13(
     (startTime, playDuration) => __async(null, null, function* () {
       if (!engineRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
@@ -4287,8 +2520,7 @@ var WaveformPlaylistProvider = ({
       engineRef.current.stop();
       engineRef.current.seek(actualStartTime);
       stopAnimationLoop();
-      const context = getContext2();
-      const startTimeNow = context.currentTime;
+      const startTimeNow = getAudioContextTime();
       playbackStartTimeRef.current = startTimeNow;
       audioStartPositionRef.current = actualStartTime;
       playbackEndTimeRef.current = playDuration !== void 0 ? actualStartTime + playDuration : null;
@@ -4307,9 +2539,9 @@ var WaveformPlaylistProvider = ({
       setIsPlaying(true);
       startAnimationLoop();
     }),
-    [startAnimationLoop, stopAnimationLoop, setCurrentTimeRefs]
+    [startAnimationLoop, stopAnimationLoop, setCurrentTimeRefs, getAudioContextTime]
   );
-  const pause = useCallback19(() => {
+  const pause = useCallback13(() => {
     if (!engineRef.current) return;
     const pauseTime = getPlaybackTime();
     engineRef.current.pause();
@@ -4318,7 +2550,7 @@ var WaveformPlaylistProvider = ({
     setCurrentTimeRefs(pauseTime);
     setCurrentTime(pauseTime);
   }, [stopAnimationLoop, getPlaybackTime, setCurrentTimeRefs]);
-  const stop = useCallback19(() => {
+  const stop = useCallback13(() => {
     if (!engineRef.current) return;
     engineRef.current.stop();
     setIsPlaying(false);
@@ -4327,7 +2559,7 @@ var WaveformPlaylistProvider = ({
     setCurrentTime(playStartPositionRef.current);
     setActiveAnnotationId(null);
   }, [stopAnimationLoop, setActiveAnnotationId, setCurrentTimeRefs]);
-  const seekTo = useCallback19(
+  const seekTo = useCallback13(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
       setCurrentTimeRefs(clampedTime);
@@ -4338,7 +2570,7 @@ var WaveformPlaylistProvider = ({
     },
     [duration, isPlaying, play, setCurrentTimeRefs]
   );
-  const setTrackMute = useCallback19(
+  const setTrackMute = useCallback13(
     (trackIndex, muted) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4352,7 +2584,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackSolo = useCallback19(
+  const setTrackSolo = useCallback13(
     (trackIndex, soloed) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4366,7 +2598,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackVolume = useCallback19(
+  const setTrackVolume = useCallback13(
     (trackIndex, volume2) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4380,7 +2612,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackPan = useCallback19(
+  const setTrackPan = useCallback13(
     (trackIndex, pan) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4394,7 +2626,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setSelection = useCallback19(
+  const setSelection = useCallback13(
     (start, end) => {
       setSelectionEngine(start, end);
       setCurrentTimeRefs(start);
@@ -4407,12 +2639,12 @@ var WaveformPlaylistProvider = ({
     },
     [isPlaying, setSelectionEngine, setCurrentTimeRefs]
   );
-  const setScrollContainer = useCallback19((element) => {
+  const setScrollContainer = useCallback13((element) => {
     scrollContainerRef.current = element;
   }, []);
-  const onAnnotationsChangeRef = useRef15(onAnnotationsChange);
+  const onAnnotationsChangeRef = useRef9(onAnnotationsChange);
   onAnnotationsChangeRef.current = onAnnotationsChange;
-  const setAnnotations = useCallback19(
+  const setAnnotations = useCallback13(
     (action) => {
       const updated = typeof action === "function" ? action(annotationsRef.current) : action;
       if (!onAnnotationsChangeRef.current) {
@@ -4430,7 +2662,7 @@ var WaveformPlaylistProvider = ({
   const sampleRate = sampleRateRef.current;
   const timeScaleHeight = timescale ? 30 : 0;
   const minimumPlaylistHeight = tracks.length * waveHeight + timeScaleHeight;
-  const animationValue = useMemo4(
+  const animationValue = useMemo3(
     () => ({
       isPlaying,
       currentTime,
@@ -4439,7 +2671,9 @@ var WaveformPlaylistProvider = ({
       playbackStartTimeRef,
       audioStartPositionRef,
       getPlaybackTime,
+      getAudioContextTime,
       getLookAhead,
+      getOutputLatency,
       registerFrameCallback,
       unregisterFrameCallback
     }),
@@ -4451,12 +2685,14 @@ var WaveformPlaylistProvider = ({
       playbackStartTimeRef,
       audioStartPositionRef,
       getPlaybackTime,
+      getAudioContextTime,
       getLookAhead,
+      getOutputLatency,
       registerFrameCallback,
       unregisterFrameCallback
     ]
   );
-  const stateValue = useMemo4(
+  const stateValue = useMemo3(
     () => ({
       continuousPlay,
       linkEndpoints,
@@ -4492,17 +2728,17 @@ var WaveformPlaylistProvider = ({
       canRedo
     ]
   );
-  const setCurrentTimeControl = useCallback19(
+  const setCurrentTimeControl = useCallback13(
     (time) => {
       setCurrentTimeRefs(time);
       setCurrentTime(time);
     },
     [setCurrentTimeRefs]
   );
-  const setAutomaticScrollControl = useCallback19((enabled) => {
+  const setAutomaticScrollControl = useCallback13((enabled) => {
     setIsAutomaticScroll(enabled);
   }, []);
-  const controlsValue = useMemo4(
+  const controlsValue = useMemo3(
     () => ({
       // Playback controls
       play,
@@ -4578,7 +2814,7 @@ var WaveformPlaylistProvider = ({
       redo
     ]
   );
-  const dataValue = useMemo4(
+  const dataValue = useMemo3(
     () => ({
       duration,
       audioBuffers,
@@ -4661,19 +2897,44 @@ var usePlaylistData = () => {
   }
   return context;
 };
+var usePlaylistDataOptional = () => useContext(PlaylistDataContext);
 
 // src/MediaElementPlaylistContext.tsx
 import {
   createContext as createContext2,
   useContext as useContext2,
-  useState as useState16,
-  useEffect as useEffect11,
-  useRef as useRef16,
-  useCallback as useCallback20,
-  useMemo as useMemo5
+  useState as useState10,
+  useEffect as useEffect6,
+  useRef as useRef10,
+  useCallback as useCallback14,
+  useMemo as useMemo4
 } from "react";
 import { ThemeProvider as ThemeProvider2 } from "styled-components";
-import { MediaElementPlayout } from "@waveform-playlist/media-element-playout";
+
+// src/playout/resolveMediaElementPlayout.ts
+var INSTALL_HINT2 = "@waveform-playlist/media-element-playout is required for the default MediaElement engine. Install with: npm install @waveform-playlist/media-element-playout \u2014 or pass a custom `createPlayout`.";
+function resolveMediaElementPlayout(opts) {
+  return __async(this, null, function* () {
+    if (opts.createPlayout) {
+      return opts.createPlayout();
+    }
+    let mod;
+    try {
+      mod = yield import("@waveform-playlist/media-element-playout");
+    } catch (originalErr) {
+      console.warn(
+        "[waveform-playlist] @waveform-playlist/media-element-playout dynamic import failed: " + String(originalErr)
+      );
+      throw new Error(INSTALL_HINT2);
+    }
+    return new mod.MediaElementPlayout({
+      playbackRate: opts.playbackRate,
+      preservesPitch: opts.preservesPitch
+    });
+  });
+}
+
+// src/MediaElementPlaylistContext.tsx
 import { defaultTheme as defaultTheme2 } from "@waveform-playlist/ui-components";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var MediaElementAnimationContext = createContext2(null);
@@ -4697,16 +2958,18 @@ var MediaElementPlaylistProvider = ({
   audioContext,
   onAnnotationsChange,
   onReady,
+  onError,
+  createPlayout,
   children
 }) => {
   var _a;
   const progressBarWidth = progressBarWidthProp != null ? progressBarWidthProp : barWidth + barGap;
-  const [isPlaying, setIsPlaying] = useState16(false);
-  const [currentTime, setCurrentTime] = useState16(0);
-  const [duration, setDuration] = useState16(0);
-  const [peaksDataArray, setPeaksDataArray] = useState16([]);
-  const [playbackRate, setPlaybackRateState] = useState16(initialPlaybackRate);
-  const annotations = useMemo5(() => {
+  const [isPlaying, setIsPlaying] = useState10(false);
+  const [currentTime, setCurrentTime] = useState10(0);
+  const [duration, setDuration] = useState10(0);
+  const [peaksDataArray, setPeaksDataArray] = useState10([]);
+  const [playbackRate, setPlaybackRateState] = useState10(initialPlaybackRate);
+  const annotations = useMemo4(() => {
     if (!(annotationList == null ? void 0 : annotationList.annotations)) return [];
     if (process.env.NODE_ENV !== "production" && annotationList.annotations.length > 0) {
       const first = annotationList.annotations[0];
@@ -4719,73 +2982,92 @@ var MediaElementPlaylistProvider = ({
     }
     return annotationList.annotations;
   }, [annotationList == null ? void 0 : annotationList.annotations]);
-  const annotationsRef = useRef16(annotations);
+  const annotationsRef = useRef10(annotations);
   annotationsRef.current = annotations;
-  const [activeAnnotationId, setActiveAnnotationIdState] = useState16(null);
-  const [continuousPlay, setContinuousPlayState] = useState16(
+  const [activeAnnotationId, setActiveAnnotationIdState] = useState10(null);
+  const [continuousPlay, setContinuousPlayState] = useState10(
     (_a = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _a : false
   );
-  const [samplesPerPixel] = useState16(initialSamplesPerPixel);
-  const [isAutomaticScroll, setIsAutomaticScroll] = useState16(automaticScroll);
-  const playoutRef = useRef16(null);
-  const currentTimeRef = useRef16(0);
-  const continuousPlayRef = useRef16(continuousPlay);
-  const activeAnnotationIdRef = useRef16(null);
-  const scrollContainerRef = useRef16(null);
-  const isAutomaticScrollRef = useRef16(automaticScroll);
-  const samplesPerPixelRef = useRef16(initialSamplesPerPixel);
+  const [samplesPerPixel] = useState10(initialSamplesPerPixel);
+  const [isAutomaticScroll, setIsAutomaticScroll] = useState10(automaticScroll);
+  const playoutRef = useRef10(null);
+  const currentTimeRef = useRef10(0);
+  const continuousPlayRef = useRef10(continuousPlay);
+  const activeAnnotationIdRef = useRef10(null);
+  const scrollContainerRef = useRef10(null);
+  const isAutomaticScrollRef = useRef10(automaticScroll);
+  const samplesPerPixelRef = useRef10(initialSamplesPerPixel);
   const { startAnimationFrameLoop, stopAnimationFrameLoop } = useAnimationFrameLoop();
-  useEffect11(() => {
+  useEffect6(() => {
     continuousPlayRef.current = continuousPlay;
   }, [continuousPlay]);
-  useEffect11(() => {
+  useEffect6(() => {
     isAutomaticScrollRef.current = isAutomaticScroll;
   }, [isAutomaticScroll]);
-  const setActiveAnnotationId = useCallback20((value) => {
+  const setActiveAnnotationId = useCallback14((value) => {
     activeAnnotationIdRef.current = value;
     setActiveAnnotationIdState(value);
   }, []);
-  const setContinuousPlay = useCallback20((value) => {
+  const setContinuousPlay = useCallback14((value) => {
     continuousPlayRef.current = value;
     setContinuousPlayState(value);
   }, []);
-  const setScrollContainer = useCallback20((element) => {
+  const setScrollContainer = useCallback14((element) => {
     scrollContainerRef.current = element;
   }, []);
   const sampleRate = track.waveformData.sample_rate;
-  useEffect11(() => {
-    var _a2, _b;
-    const playout = new MediaElementPlayout({
-      playbackRate: initialPlaybackRate,
-      preservesPitch
-    });
-    playout.addTrack({
-      source: track.source,
-      peaks: track.waveformData,
-      name: track.name,
-      audioContext,
-      fadeIn: track.fadeIn,
-      fadeOut: track.fadeOut
-    });
-    const mediaTrack = playout.getTrack((_b = (_a2 = playout["track"]) == null ? void 0 : _a2.id) != null ? _b : "");
-    if (mediaTrack) {
-      mediaTrack.setOnTimeUpdateCallback((time) => {
-        currentTimeRef.current = time;
-      });
-    }
-    playout.setOnPlaybackComplete(() => {
-      stopAnimationFrameLoop();
-      setIsPlaying(false);
-      setActiveAnnotationId(null);
-      currentTimeRef.current = 0;
-      setCurrentTime(0);
-    });
-    playoutRef.current = playout;
-    setDuration(track.waveformData.duration);
-    onReady == null ? void 0 : onReady();
+  useEffect6(() => {
+    let cancelled = false;
+    let createdPlayout = null;
+    (() => __async(null, null, function* () {
+      var _a2, _b;
+      try {
+        const playout = yield resolveMediaElementPlayout({
+          createPlayout,
+          playbackRate: initialPlaybackRate,
+          preservesPitch
+        });
+        if (cancelled) {
+          playout.dispose();
+          return;
+        }
+        createdPlayout = playout;
+        playout.addTrack({
+          source: track.source,
+          peaks: track.waveformData,
+          name: track.name,
+          audioContext,
+          fadeIn: track.fadeIn,
+          fadeOut: track.fadeOut
+        });
+        const mediaTrack = playout.getTrack((_b = (_a2 = playout["track"]) == null ? void 0 : _a2.id) != null ? _b : "");
+        if (mediaTrack) {
+          mediaTrack.setOnTimeUpdateCallback((time) => {
+            currentTimeRef.current = time;
+          });
+        }
+        playout.setOnPlaybackComplete(() => {
+          stopAnimationFrameLoop();
+          setIsPlaying(false);
+          setActiveAnnotationId(null);
+          currentTimeRef.current = 0;
+          setCurrentTime(0);
+        });
+        playoutRef.current = playout;
+        setDuration(track.waveformData.duration);
+        onReady == null ? void 0 : onReady();
+      } catch (err) {
+        console.warn("[waveform-playlist] MediaElement playout init failed: " + String(err));
+        onError == null ? void 0 : onError(err instanceof Error ? err : new Error(String(err)));
+      }
+    }))();
     return () => {
+      cancelled = true;
       stopAnimationFrameLoop();
-      playout.dispose();
+      if (createdPlayout) {
+        createdPlayout.dispose();
+      }
+      playoutRef.current = null;
     };
   }, [
     track.source,
@@ -4797,10 +3079,12 @@ var MediaElementPlaylistProvider = ({
     initialPlaybackRate,
     preservesPitch,
     onReady,
+    onError,
     stopAnimationFrameLoop,
-    setActiveAnnotationId
+    setActiveAnnotationId,
+    createPlayout
   ]);
-  useEffect11(() => {
+  useEffect6(() => {
     var _a2;
     try {
       const extractedPeaks = extractPeaksFromWaveformData(
@@ -4829,7 +3113,7 @@ var MediaElementPlaylistProvider = ({
       console.warn("[waveform-playlist] Failed to extract peaks from waveform data:", err);
     }
   }, [track.waveformData, track.name, samplesPerPixel, sampleRate]);
-  const startAnimationLoop = useCallback20(() => {
+  const startAnimationLoop = useCallback14(() => {
     const updateTime = () => {
       var _a2, _b, _c;
       const time = (_b = (_a2 = playoutRef.current) == null ? void 0 : _a2.getCurrentTime()) != null ? _b : 0;
@@ -4872,7 +3156,7 @@ var MediaElementPlaylistProvider = ({
     startAnimationFrameLoop(updateTime);
   }, [setActiveAnnotationId, sampleRate, startAnimationFrameLoop]);
   const stopAnimationLoop = stopAnimationFrameLoop;
-  const play = useCallback20(
+  const play = useCallback14(
     (startTime) => {
       if (!playoutRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
@@ -4882,14 +3166,14 @@ var MediaElementPlaylistProvider = ({
     },
     [startAnimationLoop]
   );
-  const pause = useCallback20(() => {
+  const pause = useCallback14(() => {
     if (!playoutRef.current) return;
     playoutRef.current.pause();
     setIsPlaying(false);
     stopAnimationLoop();
     setCurrentTime(playoutRef.current.getCurrentTime());
   }, [stopAnimationLoop]);
-  const stop = useCallback20(() => {
+  const stop = useCallback14(() => {
     if (!playoutRef.current) return;
     playoutRef.current.stop();
     setIsPlaying(false);
@@ -4898,7 +3182,7 @@ var MediaElementPlaylistProvider = ({
     setCurrentTime(0);
     setActiveAnnotationId(null);
   }, [stopAnimationLoop, setActiveAnnotationId]);
-  const seekTo = useCallback20(
+  const seekTo = useCallback14(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
       currentTimeRef.current = clampedTime;
@@ -4909,7 +3193,7 @@ var MediaElementPlaylistProvider = ({
     },
     [duration]
   );
-  const setPlaybackRate = useCallback20((rate) => {
+  const setPlaybackRate = useCallback14((rate) => {
     const clampedRate = Math.max(0.5, Math.min(2, rate));
     setPlaybackRateState(clampedRate);
     if (playoutRef.current) {
@@ -4917,7 +3201,7 @@ var MediaElementPlaylistProvider = ({
     }
   }, []);
   const timeScaleHeight = timescale ? 30 : 0;
-  const animationValue = useMemo5(
+  const animationValue = useMemo4(
     () => ({
       isPlaying,
       currentTime,
@@ -4925,7 +3209,7 @@ var MediaElementPlaylistProvider = ({
     }),
     [isPlaying, currentTime]
   );
-  const stateValue = useMemo5(
+  const stateValue = useMemo4(
     () => ({
       continuousPlay,
       annotations,
@@ -4935,9 +3219,9 @@ var MediaElementPlaylistProvider = ({
     }),
     [continuousPlay, annotations, activeAnnotationId, playbackRate, isAutomaticScroll]
   );
-  const onAnnotationsChangeRef = useRef16(onAnnotationsChange);
+  const onAnnotationsChangeRef = useRef10(onAnnotationsChange);
   onAnnotationsChangeRef.current = onAnnotationsChange;
-  const setAnnotations = useCallback20(
+  const setAnnotations = useCallback14(
     (action) => {
       const updated = typeof action === "function" ? action(annotationsRef.current) : action;
       if (!onAnnotationsChangeRef.current) {
@@ -4952,7 +3236,7 @@ var MediaElementPlaylistProvider = ({
     },
     []
   );
-  const controlsValue = useMemo5(
+  const controlsValue = useMemo4(
     () => ({
       play,
       pause,
@@ -4980,7 +3264,7 @@ var MediaElementPlaylistProvider = ({
       setScrollContainer
     ]
   );
-  const dataValue = useMemo5(
+  const dataValue = useMemo4(
     () => ({
       duration,
       peaksDataArray,
@@ -5044,7 +3328,7 @@ var useMediaElementData = () => {
 };
 
 // src/components/PlaybackControls.tsx
-import { useCallback as useCallback21 } from "react";
+import { useCallback as useCallback15 } from "react";
 import { BaseControlButton } from "@waveform-playlist/ui-components";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var PlayButton = ({ className }) => {
@@ -5180,7 +3464,7 @@ var ClearAllButton = ({
   className
 }) => {
   const { stop } = usePlaylistControls();
-  const handleClick = useCallback21(() => {
+  const handleClick = useCallback15(() => {
     stop();
     onClearAll();
   }, [stop, onClearAll]);
@@ -5208,7 +3492,7 @@ var ZoomOutButton = ({
 };
 
 // src/components/ContextualControls.tsx
-import { useRef as useRef17, useEffect as useEffect12 } from "react";
+import { useRef as useRef11, useEffect as useEffect7 } from "react";
 import {
   MasterVolumeControl as BaseMasterVolumeControl,
   TimeFormatSelect as BaseTimeFormatSelect,
@@ -5247,10 +3531,10 @@ var PositionDisplay = styled.span`
 `;
 var AudioPosition = ({ className }) => {
   var _a;
-  const timeRef = useRef17(null);
+  const timeRef = useRef11(null);
   const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { timeFormat: format } = usePlaylistData();
-  useEffect12(() => {
+  useEffect7(() => {
     const id = "audio-position";
     if (isPlaying) {
       registerFrameCallback(id, ({ time }) => {
@@ -5261,7 +3545,7 @@ var AudioPosition = ({ className }) => {
     }
     return () => unregisterFrameCallback(id);
   }, [isPlaying, format, registerFrameCallback, unregisterFrameCallback]);
-  useEffect12(() => {
+  useEffect7(() => {
     var _a2;
     if (!isPlaying && timeRef.current) {
       timeRef.current.textContent = formatTime((_a2 = currentTimeRef.current) != null ? _a2 : 0, format);
@@ -5338,53 +3622,6 @@ var DownloadAnnotationsButton = ({
   return /* @__PURE__ */ jsx6(Base, { annotations, filename, className });
 };
 
-// src/components/ExportControls.tsx
-import { BaseControlButton as BaseControlButton3 } from "@waveform-playlist/ui-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ExportWavButton = ({
-  label = "Export WAV",
-  filename = "export",
-  mode = "master",
-  trackIndex,
-  bitDepth = 16,
-  applyEffects = true,
-  effectsFunction,
-  createOfflineTrackEffects,
-  className,
-  onExportComplete,
-  onExportError
-}) => {
-  const { tracks, trackStates } = usePlaylistData();
-  const { exportWav, isExporting, progress } = useExportWav();
-  const handleExport = () => __async(null, null, function* () {
-    try {
-      const result = yield exportWav(tracks, trackStates, {
-        filename,
-        mode,
-        trackIndex,
-        bitDepth,
-        applyEffects,
-        effectsFunction,
-        createOfflineTrackEffects,
-        autoDownload: true
-      });
-      onExportComplete == null ? void 0 : onExportComplete(result.blob);
-    } catch (error) {
-      onExportError == null ? void 0 : onExportError(error instanceof Error ? error : new Error("Export failed"));
-    }
-  });
-  const buttonLabel = isExporting ? `Exporting ${Math.round(progress * 100)}%` : label;
-  return /* @__PURE__ */ jsx7(
-    BaseControlButton3,
-    {
-      onClick: handleExport,
-      disabled: isExporting || tracks.length === 0,
-      className,
-      children: buttonLabel
-    }
-  );
-};
-
 // src/contexts/ClipInteractionContext.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
 var ClipInteractionContext = createContext4(false);
@@ -5394,10 +3631,9 @@ function useClipInteractionEnabled() {
 }
 
 // src/components/PlaylistVisualization.tsx
-import { useContext as useContext6, useRef as useRef20, useState as useState17, useMemo as useMemo6, useCallback as useCallback22 } from "react";
+import { useContext as useContext6, useRef as useRef14, useState as useState11, useMemo as useMemo5, useCallback as useCallback16 } from "react";
 import { createPortal } from "react-dom";
 import styled4 from "styled-components";
-import { getGlobalAudioContext as getGlobalAudioContext5 } from "@waveform-playlist/playout";
 import {
   Playlist,
   Track as TrackComponent,
@@ -5425,9 +3661,9 @@ import {
 import { audibleLatencySamples } from "@waveform-playlist/core";
 
 // src/components/AnimatedPlayhead.tsx
-import { useRef as useRef18, useEffect as useEffect13 } from "react";
+import { useRef as useRef12, useEffect as useEffect8 } from "react";
 import styled2 from "styled-components";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var PlayheadLine = styled2.div.attrs((props) => ({
   style: {
     width: `${props.$width}px`,
@@ -5443,7 +3679,7 @@ var PlayheadLine = styled2.div.attrs((props) => ({
   will-change: transform;
 `;
 var AnimatedPlayhead = ({ color = "#ff0000" }) => {
-  const playheadRef = useRef18(null);
+  const playheadRef = useRef12(null);
   const {
     isPlaying,
     currentTimeRef,
@@ -5452,7 +3688,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
     unregisterFrameCallback
   } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = usePlaylistData();
-  useEffect13(() => {
+  useEffect8(() => {
     const id = "playhead";
     if (isPlaying) {
       registerFrameCallback(id, ({ visualTime, sampleRate: sr, samplesPerPixel: spp }) => {
@@ -5464,7 +3700,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
     }
     return () => unregisterFrameCallback(id);
   }, [isPlaying, registerFrameCallback, unregisterFrameCallback]);
-  useEffect13(() => {
+  useEffect8(() => {
     var _a, _b;
     if (!isPlaying && playheadRef.current) {
       const time = (_b = (_a = visualTimeRef.current) != null ? _a : currentTimeRef.current) != null ? _b : 0;
@@ -5472,11 +3708,11 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
       playheadRef.current.style.transform = `translate3d(${position}px, 0, 0)`;
     }
   });
-  return /* @__PURE__ */ jsx8(PlayheadLine, { ref: playheadRef, $color: color, $width: progressBarWidth, "data-playhead": true });
+  return /* @__PURE__ */ jsx7(PlayheadLine, { ref: playheadRef, $color: color, $width: progressBarWidth, "data-playhead": true });
 };
 
 // src/components/ChannelWithProgress.tsx
-import { useId, useRef as useRef19, useEffect as useEffect14 } from "react";
+import { useId, useRef as useRef13, useEffect as useEffect9 } from "react";
 import styled3 from "styled-components";
 import {
   clipPixelWidth as computeClipPixelWidth
@@ -5487,7 +3723,7 @@ import {
   usePlaylistInfo,
   waveformColorToCss
 } from "@waveform-playlist/ui-components";
-import { Fragment, jsx as jsx9, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs } from "react/jsx-runtime";
 var ChannelWrapper = styled3.div`
   position: relative;
 `;
@@ -5541,7 +3777,7 @@ var ChannelWithProgress = (_a) => {
     "clipSampleRate",
     "clipOffsetSeconds"
   ]);
-  const progressRef = useRef19(null);
+  const progressRef = useRef13(null);
   const callbackId = useId();
   const theme = useTheme();
   const { waveHeight } = usePlaylistInfo();
@@ -5559,7 +3795,7 @@ var ChannelWithProgress = (_a) => {
     clipDurationSamples,
     samplesPerPixel
   );
-  useEffect14(() => {
+  useEffect9(() => {
     if (isPlaying) {
       registerFrameCallback(callbackId, ({ visualTime, sampleRate: sr }) => {
         if (progressRef.current) {
@@ -5587,7 +3823,7 @@ var ChannelWithProgress = (_a) => {
     registerFrameCallback,
     unregisterFrameCallback
   ]);
-  useEffect14(() => {
+  useEffect9(() => {
     var _a2, _b2;
     if (!isPlaying && progressRef.current) {
       const currentTime = (_b2 = (_a2 = visualTimeRef.current) != null ? _a2 : currentTimeRef.current) != null ? _b2 : 0;
@@ -5622,7 +3858,7 @@ var ChannelWithProgress = (_a) => {
   const waveformBackgroundCss = waveformColorToCss(backgroundColor);
   return /* @__PURE__ */ jsxs(ChannelWrapper, { children: [
     isBothMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx8(
         Background,
         {
           $color: "#000",
@@ -5631,7 +3867,7 @@ var ChannelWithProgress = (_a) => {
           $width: smartChannelProps.length
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx8(
         Background,
         {
           $color: waveformBackgroundCss,
@@ -5640,7 +3876,7 @@ var ChannelWithProgress = (_a) => {
           $width: smartChannelProps.length
         }
       )
-    ] }) : /* @__PURE__ */ jsx9(
+    ] }) : /* @__PURE__ */ jsx8(
       Background,
       {
         $color: backgroundCss,
@@ -5649,7 +3885,7 @@ var ChannelWithProgress = (_a) => {
         $width: smartChannelProps.length
       }
     ),
-    !isPianoRollMode && /* @__PURE__ */ jsx9(
+    !isPianoRollMode && /* @__PURE__ */ jsx8(
       ProgressOverlay,
       {
         ref: progressRef,
@@ -5659,7 +3895,7 @@ var ChannelWithProgress = (_a) => {
         $width: clipPixelWidth
       }
     ),
-    /* @__PURE__ */ jsx9(ChannelContainer, { children: /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx8(ChannelContainer, { children: /* @__PURE__ */ jsx8(
       SmartChannel,
       __spreadProps(__spreadValues({}, smartChannelProps), {
         transparentBackground: true,
@@ -5686,7 +3922,7 @@ function useSpectrogramIntegration() {
 }
 
 // src/components/PlaylistVisualization.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_EMPTY_TRACK_DURATION = 60;
 var ControlSlot = styled4.div.attrs((props) => ({
   style: { height: `${props.$height}px` }
@@ -5705,7 +3941,8 @@ var CustomPlayhead = ({ renderPlayhead, color, samplesPerPixel, sampleRate }) =>
     visualTimeRef,
     playbackStartTimeRef,
     audioStartPositionRef,
-    getPlaybackTime
+    getPlaybackTime,
+    getAudioContextTime
   } = usePlaybackAnimation();
   const visualTime = (_b = (_a = visualTimeRef.current) != null ? _a : currentTimeRef.current) != null ? _b : 0;
   return renderPlayhead({
@@ -5719,7 +3956,7 @@ var CustomPlayhead = ({ renderPlayhead, color, samplesPerPixel, sampleRate }) =>
     samplesPerPixel,
     sampleRate,
     controlsOffset: 0,
-    getAudioContextTime: () => getGlobalAudioContext5().currentTime,
+    getAudioContextTime,
     getPlaybackTime
   });
 };
@@ -5744,7 +3981,7 @@ var PlaylistVisualization = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const theme = useTheme2();
-  const { isPlaying, getLookAhead } = usePlaybackAnimation();
+  const { isPlaying, getLookAhead, getOutputLatency } = usePlaybackAnimation();
   const {
     selectionStart,
     selectionEnd,
@@ -5790,7 +4027,7 @@ var PlaylistVisualization = ({
     mono
   } = usePlaylistData();
   const spectrogram = useContext6(SpectrogramIntegrationContext);
-  const perTrackSpectrogramHelpers = useMemo6(() => {
+  const perTrackSpectrogramHelpers = useMemo5(() => {
     if (!spectrogram)
       return /* @__PURE__ */ new Map();
     const helpers = /* @__PURE__ */ new Map();
@@ -5809,11 +4046,11 @@ var PlaylistVisualization = ({
     });
     return helpers;
   }, [tracks, spectrogram]);
-  const [settingsModalTrackId, setSettingsModalTrackId] = useState17(null);
-  const [isSelecting, setIsSelecting] = useState17(false);
-  const mouseDownTimeRef = useRef20(0);
-  const scrollContainerRef = useRef20(null);
-  const handleScrollContainerRef = useCallback22(
+  const [settingsModalTrackId, setSettingsModalTrackId] = useState11(null);
+  const [isSelecting, setIsSelecting] = useState11(false);
+  const mouseDownTimeRef = useRef14(0);
+  const scrollContainerRef = useRef14(null);
+  const handleScrollContainerRef = useCallback16(
     (element) => {
       scrollContainerRef.current = element;
       setScrollContainer(element);
@@ -5851,7 +4088,7 @@ var PlaylistVisualization = ({
       );
     }
   });
-  const selectTrack = useCallback22(
+  const selectTrack = useCallback16(
     (trackIndex) => {
       if (trackIndex >= 0 && trackIndex < tracks.length) {
         const track = tracks[trackIndex];
@@ -5921,7 +4158,7 @@ var PlaylistVisualization = ({
   };
   const hasClips = tracks.some((track) => track.clips.length > 0);
   if (hasClips && peaksDataArray.length === 0) {
-    return /* @__PURE__ */ jsx10("div", { className, children: "Loading waveform..." });
+    return /* @__PURE__ */ jsx9("div", { className, children: "Loading waveform..." });
   }
   const trackControlsSlots = controls.show ? peaksDataArray.map((trackClipPeaks, trackIndex) => {
     var _a2, _b2, _c2;
@@ -5940,7 +4177,7 @@ var PlaylistVisualization = ({
     const slotHeight = waveHeight * maxChannels + (showClipHeaders ? CLIP_HEADER_HEIGHT : 0);
     const trackControlContent = renderTrackControls ? renderTrackControls(trackIndex) : /* @__PURE__ */ jsxs2(Controls, { onClick: () => selectTrack(trackIndex), children: [
       /* @__PURE__ */ jsxs2(Header, { style: { justifyContent: "center", position: "relative" }, children: [
-        onRemoveTrack && /* @__PURE__ */ jsx10(
+        onRemoveTrack && /* @__PURE__ */ jsx9(
           CloseButton,
           {
             onClick: (e) => {
@@ -5949,7 +4186,7 @@ var PlaylistVisualization = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           "span",
           {
             style: {
@@ -5962,7 +4199,7 @@ var PlaylistVisualization = ({
             children: trackState.name || `Track ${trackIndex + 1}`
           }
         ),
-        (spectrogram == null ? void 0 : spectrogram.renderMenuItems) && /* @__PURE__ */ jsx10("span", { style: { position: "absolute", right: 0, top: 0 }, children: /* @__PURE__ */ jsx10(
+        (spectrogram == null ? void 0 : spectrogram.renderMenuItems) && /* @__PURE__ */ jsx9("span", { style: { position: "absolute", right: 0, top: 0 }, children: /* @__PURE__ */ jsx9(
           TrackMenu,
           {
             items: (onClose) => spectrogram.renderMenuItems({
@@ -5975,7 +4212,7 @@ var PlaylistVisualization = ({
         ) })
       ] }),
       /* @__PURE__ */ jsxs2(ButtonGroup, { children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           Button,
           {
             $variant: trackState.muted ? "danger" : "outline",
@@ -5983,7 +4220,7 @@ var PlaylistVisualization = ({
             children: "Mute"
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           Button,
           {
             $variant: trackState.soloed ? "info" : "outline",
@@ -5993,8 +4230,8 @@ var PlaylistVisualization = ({
         )
       ] }),
       /* @__PURE__ */ jsxs2(SliderWrapper, { children: [
-        /* @__PURE__ */ jsx10(VolumeDownIcon, {}),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(VolumeDownIcon, {}),
+        /* @__PURE__ */ jsx9(
           Slider,
           {
             min: "0",
@@ -6004,11 +4241,11 @@ var PlaylistVisualization = ({
             onChange: (e) => setTrackVolume(trackIndex, parseFloat(e.target.value))
           }
         ),
-        /* @__PURE__ */ jsx10(VolumeUpIcon, {})
+        /* @__PURE__ */ jsx9(VolumeUpIcon, {})
       ] }),
       /* @__PURE__ */ jsxs2(SliderWrapper, { children: [
-        /* @__PURE__ */ jsx10("span", { children: "L" }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9("span", { children: "L" }),
+        /* @__PURE__ */ jsx9(
           Slider,
           {
             min: "-1",
@@ -6018,10 +4255,10 @@ var PlaylistVisualization = ({
             onChange: (e) => setTrackPan(trackIndex, parseFloat(e.target.value))
           }
         ),
-        /* @__PURE__ */ jsx10("span", { children: "R" })
+        /* @__PURE__ */ jsx9("span", { children: "R" })
       ] })
     ] });
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx9(
       ControlSlot,
       {
         $height: slotHeight,
@@ -6032,7 +4269,7 @@ var PlaylistVisualization = ({
     );
   }) : void 0;
   return /* @__PURE__ */ jsxs2(DevicePixelRatioProvider, { children: [
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx9(
       PlaylistInfoContext.Provider,
       {
         value: {
@@ -6046,7 +4283,7 @@ var PlaylistVisualization = ({
           barWidth,
           barGap
         },
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx9(
           Playlist,
           {
             theme,
@@ -6064,8 +4301,8 @@ var PlaylistVisualization = ({
             trackControlsSlots,
             timescaleGapHeight: timeScaleHeight > 0 ? timeScaleHeight + 1 : 0,
             timescale: timeScaleHeight > 0 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-              /* @__PURE__ */ jsx10(SmartScale, { renderTick }),
-              isLoopEnabled && /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx9(SmartScale, { renderTick }),
+              isLoopEnabled && /* @__PURE__ */ jsx9(
                 TimescaleLoopRegion,
                 {
                   startPosition: Math.min(loopStart, loopEnd) * sampleRate / samplesPerPixel,
@@ -6111,7 +4348,7 @@ var PlaylistVisualization = ({
                         const helpers = perTrackSpectrogramHelpers.get(track.id);
                         const trackCfg = helpers == null ? void 0 : helpers.config;
                         if (!(trackCfg == null ? void 0 : trackCfg.labels) || !helpers) return null;
-                        return /* @__PURE__ */ jsx10(
+                        return /* @__PURE__ */ jsx9(
                           SpectrogramLabels,
                           {
                             waveHeight,
@@ -6129,7 +4366,7 @@ var PlaylistVisualization = ({
                       trackClipPeaks.map((clip, clipIndex) => {
                         const peaksData = clip.peaks;
                         const width = peaksData.length;
-                        return /* @__PURE__ */ jsx10(
+                        return /* @__PURE__ */ jsx9(
                           Clip,
                           {
                             clipId: clip.clipId,
@@ -6159,7 +4396,7 @@ var PlaylistVisualization = ({
                               selectTrack(trackIndex);
                             },
                             children: peaksData.data.map((channelPeaks, channelIndex) => {
-                              return /* @__PURE__ */ jsx10(
+                              return /* @__PURE__ */ jsx9(
                                 ChannelWithProgress,
                                 {
                                   index: channelIndex,
@@ -6186,8 +4423,7 @@ var PlaylistVisualization = ({
                         );
                       }),
                       (recordingState == null ? void 0 : recordingState.isRecording) && recordingState.trackId === track.id && ((_d2 = recordingState.peaks[0]) == null ? void 0 : _d2.length) > 0 && (() => {
-                        const audioCtx = getGlobalAudioContext5();
-                        const outputLatency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
+                        const outputLatency = getOutputLatency();
                         const lookAhead = getLookAhead();
                         const latencyOffsetSamples = audibleLatencySamples(
                           outputLatency,
@@ -6203,7 +4439,7 @@ var PlaylistVisualization = ({
                         const previewChannels = (mono ? recordingState.peaks.slice(0, 1) : recordingState.peaks).map(
                           (channelPeaks) => skipPeakElements > 0 && skipPeakElements < channelPeaks.length ? channelPeaks.subarray(skipPeakElements) : channelPeaks
                         );
-                        return /* @__PURE__ */ jsx10(
+                        return /* @__PURE__ */ jsx9(
                           Clip,
                           {
                             clipId: "recording-preview",
@@ -6217,7 +4453,7 @@ var PlaylistVisualization = ({
                             disableHeaderDrag: true,
                             isSelected: track.id === selectedTrackId,
                             trackId: track.id,
-                            children: previewChannels.map((channelPeaks, chIdx) => /* @__PURE__ */ jsx10(
+                            children: previewChannels.map((channelPeaks, chIdx) => /* @__PURE__ */ jsx9(
                               ChannelWithProgress,
                               {
                                 index: chIdx,
@@ -6239,11 +4475,11 @@ var PlaylistVisualization = ({
                   track.id
                 );
               }),
-              annotations.length > 0 && annotationIntegration && /* @__PURE__ */ jsx10(annotationIntegration.AnnotationBoxesWrapper, { height: 30, width: tracksFullWidth, children: annotations.map((annotation, index) => {
+              annotations.length > 0 && annotationIntegration && /* @__PURE__ */ jsx9(annotationIntegration.AnnotationBoxesWrapper, { height: 30, width: tracksFullWidth, children: annotations.map((annotation, index) => {
                 const startPosition = annotation.start * sampleRate / samplesPerPixel;
                 const endPosition = annotation.end * sampleRate / samplesPerPixel;
                 const label = getAnnotationBoxLabel ? getAnnotationBoxLabel(annotation, index) : annotation.id;
-                return /* @__PURE__ */ jsx10(
+                return /* @__PURE__ */ jsx9(
                   annotationIntegration.AnnotationBox,
                   {
                     annotationId: annotation.id,
@@ -6259,7 +4495,7 @@ var PlaylistVisualization = ({
                   annotation.id
                 );
               }) }),
-              selectionStart !== selectionEnd && /* @__PURE__ */ jsx10(
+              selectionStart !== selectionEnd && /* @__PURE__ */ jsx9(
                 Selection,
                 {
                   startPosition: Math.min(selectionStart, selectionEnd) * sampleRate / samplesPerPixel,
@@ -6267,7 +4503,7 @@ var PlaylistVisualization = ({
                   color: theme.selectionColor
                 }
               ),
-              (isPlaying || selectionStart === selectionEnd) && (renderPlayhead ? /* @__PURE__ */ jsx10(
+              (isPlaying || selectionStart === selectionEnd) && (renderPlayhead ? /* @__PURE__ */ jsx9(
                 CustomPlayhead,
                 {
                   renderPlayhead,
@@ -6275,14 +4511,14 @@ var PlaylistVisualization = ({
                   samplesPerPixel,
                   sampleRate
                 }
-              ) : /* @__PURE__ */ jsx10(AnimatedPlayhead, { color: theme.playheadColor }))
+              ) : /* @__PURE__ */ jsx9(AnimatedPlayhead, { color: theme.playheadColor }))
             ] })
           }
         )
       }
     ),
     (spectrogram == null ? void 0 : spectrogram.SettingsModal) && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx9(
         spectrogram.SettingsModal,
         {
           open: settingsModalTrackId !== null,
@@ -6302,8 +4538,8 @@ var PlaylistVisualization = ({
 };
 
 // src/components/PlaylistAnnotationList.tsx
-import { useCallback as useCallback23 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { useCallback as useCallback17 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var PlaylistAnnotationList = ({
   height,
   renderAnnotationItem,
@@ -6317,7 +4553,7 @@ var PlaylistAnnotationList = ({
   const integration = useAnnotationIntegration();
   const { setAnnotations } = usePlaylistControls();
   const resolvedConfig = annotationListConfig != null ? annotationListConfig : { linkEndpoints, continuousPlay };
-  const handleAnnotationUpdate = useCallback23(
+  const handleAnnotationUpdate = useCallback17(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6325,7 +4561,7 @@ var PlaylistAnnotationList = ({
     [setAnnotations, onAnnotationUpdate]
   );
   const { AnnotationText } = integration;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     AnnotationText,
     {
       annotations,
@@ -6344,7 +4580,7 @@ var PlaylistAnnotationList = ({
 };
 
 // src/components/Waveform.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var Waveform = ({
   renderTrackControls,
   renderTick,
@@ -6369,7 +4605,7 @@ var Waveform = ({
   const clipInteractionEnabled = useClipInteractionEnabled();
   const effectiveInteractiveClips = interactiveClips || clipInteractionEnabled;
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx11(
       PlaylistVisualization,
       {
         renderTrackControls,
@@ -6386,7 +4622,7 @@ var Waveform = ({
         recordingState
       }
     ),
-    annotations.length > 0 && /* @__PURE__ */ jsx12(
+    annotations.length > 0 && /* @__PURE__ */ jsx11(
       PlaylistAnnotationList,
       {
         height: annotationTextHeight,
@@ -6401,7 +4637,7 @@ var Waveform = ({
 };
 
 // src/components/MediaElementPlaylist.tsx
-import { useContext as useContext7, useRef as useRef23, useState as useState18, useCallback as useCallback24 } from "react";
+import { useContext as useContext7, useRef as useRef17, useState as useState12, useCallback as useCallback18 } from "react";
 import { DragDropProvider } from "@dnd-kit/react";
 import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers";
 import {
@@ -6437,9 +4673,9 @@ var noDropAnimationPlugins = (defaults) => {
 };
 
 // src/components/AnimatedMediaElementPlayhead.tsx
-import { useRef as useRef21, useEffect as useEffect15 } from "react";
+import { useRef as useRef15, useEffect as useEffect10 } from "react";
 import styled5 from "styled-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var PlayheadLine2 = styled5.div`
   position: absolute;
   top: 0;
@@ -6454,11 +4690,11 @@ var PlayheadLine2 = styled5.div`
 var AnimatedMediaElementPlayhead = ({
   color = "#ff0000"
 }) => {
-  const playheadRef = useRef21(null);
-  const animationFrameRef = useRef21(null);
+  const playheadRef = useRef15(null);
+  const animationFrameRef = useRef15(null);
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = useMediaElementData();
-  useEffect15(() => {
+  useEffect10(() => {
     const updatePosition = () => {
       var _a;
       if (playheadRef.current) {
@@ -6482,7 +4718,7 @@ var AnimatedMediaElementPlayhead = ({
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, currentTimeRef]);
-  useEffect15(() => {
+  useEffect10(() => {
     var _a;
     if (!isPlaying && playheadRef.current) {
       const time = (_a = currentTimeRef.current) != null ? _a : 0;
@@ -6490,11 +4726,11 @@ var AnimatedMediaElementPlayhead = ({
       playheadRef.current.style.transform = `translate3d(${position}px, 0, 0)`;
     }
   });
-  return /* @__PURE__ */ jsx13(PlayheadLine2, { ref: playheadRef, $color: color, $width: progressBarWidth, "data-playhead": true });
+  return /* @__PURE__ */ jsx12(PlayheadLine2, { ref: playheadRef, $color: color, $width: progressBarWidth, "data-playhead": true });
 };
 
 // src/components/ChannelWithMediaElementProgress.tsx
-import { useRef as useRef22, useEffect as useEffect16 } from "react";
+import { useRef as useRef16, useEffect as useEffect11 } from "react";
 import styled6 from "styled-components";
 import {
   SmartChannel as SmartChannel2,
@@ -6502,7 +4738,7 @@ import {
   usePlaylistInfo as usePlaylistInfo2,
   waveformColorToCss as waveformColorToCss3
 } from "@waveform-playlist/ui-components";
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var ChannelWrapper2 = styled6.div`
   position: relative;
 `;
@@ -6539,14 +4775,14 @@ var ChannelWithMediaElementProgress = (_a) => {
     "clipStartSample",
     "clipDurationSamples"
   ]);
-  const progressRef = useRef22(null);
-  const animationFrameRef = useRef22(null);
+  const progressRef = useRef16(null);
+  const animationFrameRef = useRef16(null);
   const theme = useTheme3();
   const { waveHeight } = usePlaylistInfo2();
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate } = useMediaElementData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
-  useEffect16(() => {
+  useEffect11(() => {
     const updateProgress = () => {
       var _a2;
       if (progressRef.current) {
@@ -6588,7 +4824,7 @@ var ChannelWithMediaElementProgress = (_a) => {
     smartChannelProps.length,
     currentTimeRef
   ]);
-  useEffect16(() => {
+  useEffect11(() => {
     var _a2;
     if (!isPlaying && progressRef.current) {
       const currentTime = (_a2 = currentTimeRef.current) != null ? _a2 : 0;
@@ -6615,7 +4851,7 @@ var ChannelWithMediaElementProgress = (_a) => {
   }
   const backgroundCss = waveformColorToCss3(backgroundColor);
   return /* @__PURE__ */ jsxs4(ChannelWrapper2, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       Background2,
       {
         $color: backgroundCss,
@@ -6624,7 +4860,7 @@ var ChannelWithMediaElementProgress = (_a) => {
         $width: smartChannelProps.length
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       ProgressOverlay2,
       {
         ref: progressRef,
@@ -6633,12 +4869,12 @@ var ChannelWithMediaElementProgress = (_a) => {
         $top: smartChannelProps.index * waveHeight
       }
     ),
-    /* @__PURE__ */ jsx14(ChannelContainer2, { children: /* @__PURE__ */ jsx14(SmartChannel2, __spreadProps(__spreadValues({}, smartChannelProps), { isSelected: true, transparentBackground: true })) })
+    /* @__PURE__ */ jsx13(ChannelContainer2, { children: /* @__PURE__ */ jsx13(SmartChannel2, __spreadProps(__spreadValues({}, smartChannelProps), { isSelected: true, transparentBackground: true })) })
   ] });
 };
 
 // src/components/MediaElementPlaylist.tsx
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var ZERO_REF = { current: 0 };
 var CustomMediaElementPlayhead = ({ renderPlayhead, color, samplesPerPixel, sampleRate }) => {
   var _a;
@@ -6683,11 +4919,11 @@ var MediaElementPlaylist = ({
     fadeIn,
     fadeOut
   } = useMediaElementData();
-  const [selectionStart, setSelectionStart] = useState18(0);
-  const [selectionEnd, setSelectionEnd] = useState18(0);
-  const [isSelecting, setIsSelecting] = useState18(false);
-  const scrollContainerRef = useRef23(null);
-  const handleScrollContainerRef = useCallback24(
+  const [selectionStart, setSelectionStart] = useState12(0);
+  const [selectionEnd, setSelectionEnd] = useState12(0);
+  const [isSelecting, setIsSelecting] = useState12(false);
+  const scrollContainerRef = useRef17(null);
+  const handleScrollContainerRef = useCallback18(
     (el) => {
       scrollContainerRef.current = el;
       setScrollContainer(el);
@@ -6695,7 +4931,7 @@ var MediaElementPlaylist = ({
     [setScrollContainer]
   );
   const tracksFullWidth = Math.floor(duration * sampleRate / samplesPerPixel);
-  const handleAnnotationClick = useCallback24(
+  const handleAnnotationClick = useCallback18(
     (annotation) => __async(null, null, function* () {
       setActiveAnnotationId(annotation.id);
       try {
@@ -6710,7 +4946,7 @@ var MediaElementPlaylist = ({
     }),
     [setActiveAnnotationId, play]
   );
-  const handleAnnotationUpdate = useCallback24(
+  const handleAnnotationUpdate = useCallback18(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6724,8 +4960,8 @@ var MediaElementPlaylist = ({
     duration,
     linkEndpoints: linkEndpointsProp
   });
-  const mouseDownTimeRef = useRef23(0);
-  const handleMouseDown = useCallback24(
+  const mouseDownTimeRef = useRef17(0);
+  const handleMouseDown = useCallback18(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
@@ -6737,7 +4973,7 @@ var MediaElementPlaylist = ({
     },
     [samplesPerPixel, sampleRate]
   );
-  const handleMouseMove = useCallback24(
+  const handleMouseMove = useCallback18(
     (e) => {
       if (!isSelecting) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -6747,7 +4983,7 @@ var MediaElementPlaylist = ({
     },
     [isSelecting, samplesPerPixel, sampleRate]
   );
-  const handleMouseUp = useCallback24(
+  const handleMouseUp = useCallback18(
     (e) => {
       if (!isSelecting) return;
       setIsSelecting(false);
@@ -6777,9 +5013,9 @@ var MediaElementPlaylist = ({
     [isSelecting, selectionStart, samplesPerPixel, sampleRate, seekTo, isPlaying, playoutRef, play]
   );
   if (peaksDataArray.length === 0) {
-    return /* @__PURE__ */ jsx15("div", { className, children: "Loading waveform..." });
+    return /* @__PURE__ */ jsx14("div", { className, children: "Loading waveform..." });
   }
-  return /* @__PURE__ */ jsx15(DevicePixelRatioProvider2, { children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx14(DevicePixelRatioProvider2, { children: /* @__PURE__ */ jsx14(
     PlaylistInfoContext2.Provider,
     {
       value: {
@@ -6793,7 +5029,7 @@ var MediaElementPlaylist = ({
         barWidth,
         barGap
       },
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx14(
         Playlist2,
         {
           theme,
@@ -6807,11 +5043,11 @@ var MediaElementPlaylist = ({
           onTracksMouseUp: handleMouseUp,
           scrollContainerRef: handleScrollContainerRef,
           isSelecting,
-          timescale: timeScaleHeight > 0 ? /* @__PURE__ */ jsx15(SmartScale2, {}) : void 0,
+          timescale: timeScaleHeight > 0 ? /* @__PURE__ */ jsx14(SmartScale2, {}) : void 0,
           children: /* @__PURE__ */ jsxs5(Fragment4, { children: [
             peaksDataArray.map((trackClipPeaks, trackIndex) => {
               const maxChannels = trackClipPeaks.length > 0 ? Math.max(...trackClipPeaks.map((clip) => clip.peaks.data.length)) : 1;
-              return /* @__PURE__ */ jsx15(
+              return /* @__PURE__ */ jsx14(
                 TrackComponent2,
                 {
                   numChannels: maxChannels,
@@ -6839,7 +5075,7 @@ var MediaElementPlaylist = ({
                         isSelected: true,
                         trackId: `media-element-track-${trackIndex}`,
                         children: [
-                          peaksData.data.map((channelPeaks, channelIndex) => /* @__PURE__ */ jsx15(
+                          peaksData.data.map((channelPeaks, channelIndex) => /* @__PURE__ */ jsx14(
                             ChannelWithMediaElementProgress,
                             {
                               index: channelIndex,
@@ -6851,7 +5087,7 @@ var MediaElementPlaylist = ({
                             },
                             `${trackIndex}-${clipIndex}-${channelIndex}`
                           )),
-                          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ jsx15(
+                          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ jsx14(
                             FadeOverlay,
                             {
                               left: 0,
@@ -6860,7 +5096,7 @@ var MediaElementPlaylist = ({
                               curveType: fadeIn.type
                             }
                           ),
-                          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ jsx15(
+                          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ jsx14(
                             FadeOverlay,
                             {
                               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -6878,7 +5114,7 @@ var MediaElementPlaylist = ({
                 trackIndex
               );
             }),
-            annotations.length > 0 && annotationIntegration && /* @__PURE__ */ jsx15(
+            annotations.length > 0 && annotationIntegration && /* @__PURE__ */ jsx14(
               DragDropProvider,
               {
                 onDragStart,
@@ -6886,11 +5122,11 @@ var MediaElementPlaylist = ({
                 onDragEnd,
                 modifiers: editable ? [RestrictToHorizontalAxis] : [],
                 plugins: noDropAnimationPlugins,
-                children: /* @__PURE__ */ jsx15(annotationIntegration.AnnotationBoxesWrapper, { height: 30, width: tracksFullWidth, children: annotations.map((annotation, index) => {
+                children: /* @__PURE__ */ jsx14(annotationIntegration.AnnotationBoxesWrapper, { height: 30, width: tracksFullWidth, children: annotations.map((annotation, index) => {
                   const startPosition = annotation.start * sampleRate / samplesPerPixel;
                   const endPosition = annotation.end * sampleRate / samplesPerPixel;
                   const label = getAnnotationBoxLabel ? getAnnotationBoxLabel(annotation, index) : annotation.id;
-                  return /* @__PURE__ */ jsx15(
+                  return /* @__PURE__ */ jsx14(
                     annotationIntegration.AnnotationBox,
                     {
                       annotationId: annotation.id,
@@ -6908,7 +5144,7 @@ var MediaElementPlaylist = ({
                 }) })
               }
             ),
-            selectionStart !== selectionEnd && /* @__PURE__ */ jsx15(
+            selectionStart !== selectionEnd && /* @__PURE__ */ jsx14(
               Selection2,
               {
                 startPosition: Math.min(selectionStart, selectionEnd) * sampleRate / samplesPerPixel,
@@ -6916,7 +5152,7 @@ var MediaElementPlaylist = ({
                 color: theme.selectionColor
               }
             ),
-            renderPlayhead ? /* @__PURE__ */ jsx15(
+            renderPlayhead ? /* @__PURE__ */ jsx14(
               CustomMediaElementPlayhead,
               {
                 renderPlayhead,
@@ -6924,7 +5160,7 @@ var MediaElementPlaylist = ({
                 samplesPerPixel,
                 sampleRate
               }
-            ) : /* @__PURE__ */ jsx15(AnimatedMediaElementPlayhead, { color: theme.playheadColor })
+            ) : /* @__PURE__ */ jsx14(AnimatedMediaElementPlayhead, { color: theme.playheadColor })
           ] })
         }
       )
@@ -6933,8 +5169,8 @@ var MediaElementPlaylist = ({
 };
 
 // src/components/MediaElementAnnotationList.tsx
-import { useCallback as useCallback25 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { useCallback as useCallback19 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var MediaElementAnnotationList = ({
   height,
   renderAnnotationItem,
@@ -6949,7 +5185,7 @@ var MediaElementAnnotationList = ({
   const integration = useAnnotationIntegration();
   const { setAnnotations } = useMediaElementControls();
   const resolvedConfig = annotationListConfig != null ? annotationListConfig : { linkEndpoints: false, continuousPlay };
-  const handleAnnotationUpdate = useCallback25(
+  const handleAnnotationUpdate = useCallback19(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6957,7 +5193,7 @@ var MediaElementAnnotationList = ({
     [setAnnotations, onAnnotationUpdate]
   );
   const { AnnotationText } = integration;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(
     AnnotationText,
     {
       annotations,
@@ -6976,7 +5212,7 @@ var MediaElementAnnotationList = ({
 };
 
 // src/components/MediaElementWaveform.tsx
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var MediaElementWaveform = ({
   annotationTextHeight,
   getAnnotationBoxLabel,
@@ -6992,7 +5228,7 @@ var MediaElementWaveform = ({
 }) => {
   const { annotations } = useMediaElementState();
   return /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx16(
       MediaElementPlaylist,
       {
         getAnnotationBoxLabel,
@@ -7004,7 +5240,7 @@ var MediaElementWaveform = ({
         className
       }
     ),
-    annotations.length > 0 && /* @__PURE__ */ jsx17(
+    annotations.length > 0 && /* @__PURE__ */ jsx16(
       MediaElementAnnotationList,
       {
         height: annotationTextHeight,
@@ -7079,7 +5315,7 @@ var KeyboardShortcuts = ({
 };
 
 // src/components/ClipInteractionProvider.tsx
-import React16, { useEffect as useEffect17, useMemo as useMemo7 } from "react";
+import React16, { useEffect as useEffect12, useMemo as useMemo6 } from "react";
 import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
 import { RestrictToHorizontalAxis as RestrictToHorizontalAxis2 } from "@dnd-kit/abstract/modifiers";
 import {
@@ -7169,7 +5405,7 @@ _SnapToGridModifier.configure = configurator2(_SnapToGridModifier);
 var SnapToGridModifier = _SnapToGridModifier;
 
 // src/components/ClipInteractionProvider.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var NOOP_TRACKS_CHANGE = () => {
 };
 var ClipInteractionProvider = ({
@@ -7182,14 +5418,14 @@ var ClipInteractionProvider = ({
   const beatsAndBars = useBeatsAndBars();
   const useBeatsSnap = snap && beatsAndBars != null && beatsAndBars.scaleMode === "beats" && beatsAndBars.snapTo !== "off";
   const useTimescaleSnap = snap && !useBeatsSnap;
-  useEffect17(() => {
+  useEffect12(() => {
     if (onTracksChange == null) {
       console.warn(
         "[waveform-playlist] ClipInteractionProvider: onTracksChange is not set on WaveformPlaylistProvider. Drag and trim edits will not be persisted."
       );
     }
   }, [onTracksChange]);
-  const snapSamplePosition = useMemo7(() => {
+  const snapSamplePosition = useMemo6(() => {
     if (useBeatsSnap && beatsAndBars) {
       const { bpm, timeSignature, snapTo } = beatsAndBars;
       const gridTicks = snapTo === "bar" ? ticksPerBar2(timeSignature) : ticksPerBeat2(timeSignature);
@@ -7229,7 +5465,7 @@ var ClipInteractionProvider = ({
     },
     [handleDragStart, tracks, setSelectedTrackId]
   );
-  const modifiers = useMemo7(() => {
+  const modifiers = useMemo6(() => {
     const mods = [RestrictToHorizontalAxis2];
     if (useBeatsSnap && beatsAndBars) {
       mods.push(
@@ -7254,7 +5490,7 @@ var ClipInteractionProvider = ({
     mods.push(ClipCollisionModifier.configure({ tracks, samplesPerPixel }));
     return mods;
   }, [useBeatsSnap, useTimescaleSnap, beatsAndBars, tracks, samplesPerPixel, sampleRate]);
-  return /* @__PURE__ */ jsx18(ClipInteractionContextProvider, { value: true, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(ClipInteractionContextProvider, { value: true, children: /* @__PURE__ */ jsx17(
     DragDropProvider2,
     {
       sensors,
@@ -7277,7 +5513,6 @@ export {
   ContinuousPlayCheckbox,
   DownloadAnnotationsButton,
   EditableCheckbox,
-  ExportWavButton,
   FastForwardButton,
   KeyboardShortcuts,
   LinkEndpointsCheckbox,
@@ -7300,17 +5535,10 @@ export {
   SpectrogramIntegrationProvider,
   StopButton,
   TimeFormatSelect,
-  Tone2 as Tone,
   Waveform,
   WaveformPlaylistProvider,
   ZoomInButton,
   ZoomOutButton,
-  createEffectChain,
-  createEffectInstance,
-  effectCategories,
-  effectDefinitions,
-  getEffectDefinition,
-  getEffectsByCategory,
   getShortcutLabel,
   getWaveformDataMetadata,
   loadPeaksFromWaveformData,
@@ -7319,30 +5547,24 @@ export {
   useAnnotationDragHandlers,
   useAnnotationIntegration,
   useAnnotationKeyboardControls,
-  useAudioTracks,
   useClipDragHandlers,
   useClipInteractionEnabled,
   useClipSplitting,
   useDragSensors,
-  useDynamicEffects,
-  useDynamicTracks,
-  useExportWav,
   useKeyboardShortcuts,
-  useMasterAnalyser,
   useMasterVolume,
   useMediaElementAnimation,
   useMediaElementControls,
   useMediaElementData,
   useMediaElementState,
-  useOutputMeter,
   usePlaybackAnimation,
   usePlaybackShortcuts,
   usePlaylistControls,
   usePlaylistData,
+  usePlaylistDataOptional,
   usePlaylistState,
   useSpectrogramIntegration,
   useTimeFormat,
-  useTrackDynamicEffects,
   useZoomControls,
   waveformDataToPeaks
 };