@waveform-playlist/browser 13.1.2 → 14.0.0

package/dist/index.js

@@ -88,7 +88,6 @@ __export(index_exports, {
   ContinuousPlayCheckbox: () => ContinuousPlayCheckbox,
   DownloadAnnotationsButton: () => DownloadAnnotationsButton,
   EditableCheckbox: () => EditableCheckbox,
-  ExportWavButton: () => ExportWavButton,
   FastForwardButton: () => FastForwardButton,
   KeyboardShortcuts: () => KeyboardShortcuts,
   LinkEndpointsCheckbox: () => LinkEndpointsCheckbox,
@@ -111,18 +110,11 @@ __export(index_exports, {
   SpectrogramIntegrationProvider: () => SpectrogramIntegrationProvider,
   StopButton: () => StopButton,
   TimeFormatSelect: () => TimeFormatSelect,
-  Tone: () => Tone2,
   Waveform: () => Waveform,
   WaveformPlaylistProvider: () => WaveformPlaylistProvider,
   ZoomInButton: () => ZoomInButton,
   ZoomOutButton: () => ZoomOutButton,
-  createEffectChain: () => createEffectChain,
-  createEffectInstance: () => createEffectInstance,
-  effectCategories: () => effectCategories,
-  effectDefinitions: () => effectDefinitions,
-  getEffectDefinition: () => getEffectDefinition,
-  getEffectsByCategory: () => getEffectsByCategory,
-  getShortcutLabel: () => import_core3.getShortcutLabel,
+  getShortcutLabel: () => import_core2.getShortcutLabel,
   getWaveformDataMetadata: () => getWaveformDataMetadata,
   loadPeaksFromWaveformData: () => loadPeaksFromWaveformData,
   loadWaveformData: () => loadWaveformData,
@@ -130,43 +122,65 @@ __export(index_exports, {
   useAnnotationDragHandlers: () => useAnnotationDragHandlers,
   useAnnotationIntegration: () => useAnnotationIntegration,
   useAnnotationKeyboardControls: () => useAnnotationKeyboardControls,
-  useAudioTracks: () => useAudioTracks,
   useClipDragHandlers: () => useClipDragHandlers,
   useClipInteractionEnabled: () => useClipInteractionEnabled,
   useClipSplitting: () => useClipSplitting,
   useDragSensors: () => useDragSensors,
-  useDynamicEffects: () => useDynamicEffects,
-  useDynamicTracks: () => useDynamicTracks,
-  useExportWav: () => useExportWav,
   useKeyboardShortcuts: () => useKeyboardShortcuts,
-  useMasterAnalyser: () => useMasterAnalyser,
   useMasterVolume: () => useMasterVolume,
   useMediaElementAnimation: () => useMediaElementAnimation,
   useMediaElementControls: () => useMediaElementControls,
   useMediaElementData: () => useMediaElementData,
   useMediaElementState: () => useMediaElementState,
-  useOutputMeter: () => useOutputMeter,
   usePlaybackAnimation: () => usePlaybackAnimation,
   usePlaybackShortcuts: () => usePlaybackShortcuts,
   usePlaylistControls: () => usePlaylistControls,
   usePlaylistData: () => usePlaylistData,
+  usePlaylistDataOptional: () => usePlaylistDataOptional,
   usePlaylistState: () => usePlaylistState,
   useSpectrogramIntegration: () => useSpectrogramIntegration,
   useTimeFormat: () => useTimeFormat,
-  useTrackDynamicEffects: () => useTrackDynamicEffects,
   useZoomControls: () => useZoomControls,
   waveformDataToPeaks: () => waveformDataToPeaks
 });
 module.exports = __toCommonJS(index_exports);
-var Tone2 = __toESM(require("tone"));
 
 // src/WaveformPlaylistContext.tsx
-var import_react24 = require("react");
+var import_react17 = require("react");
 var import_styled_components = require("styled-components");
-var import_playout6 = require("@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
 var import_engine3 = require("@waveform-playlist/engine");
 var import_ui_components2 = require("@waveform-playlist/ui-components");
-var import_tone4 = require("tone");
 
 // src/waveformDataLoader.ts
 var import_waveform_data = __toESM(require("waveform-data"));
@@ -332,9 +346,11 @@ function extractPeaksFromWaveformDataFull(waveformData, samplesPerPixel, isMono,
 }
 
 // src/soundFontSync.ts
-var import_playout = require("@waveform-playlist/playout");
+function supportsSoundFont(adapter) {
+  return adapter != null && typeof adapter.setSoundFontCache === "function";
+}
 function syncSoundFontCacheToAdapter(adapter, cache) {
-  if (!(0, import_playout.isToneAdapter)(adapter)) return;
+  if (!supportsSoundFont(adapter)) return;
   adapter.setSoundFontCache(cache);
 }
 
@@ -591,223 +607,8 @@ function useUndoState({ engineRef }) {
   };
 }
 
-// src/hooks/useAudioEffects.ts
-var import_react8 = require("react");
-var import_tone = require("tone");
-var useMasterAnalyser = (fftSize = 256) => {
-  const analyserRef = (0, import_react8.useRef)(null);
-  const masterEffects = (0, import_react8.useCallback)(
-    (masterGainNode, destination, _isOffline) => {
-      const analyserNode = new import_tone.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
-var import_react9 = require("react");
-var import_core = require("@waveform-playlist/core");
-var Tone = __toESM(require("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 = (0, import_core.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({}, (0, import_core.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] = (0, import_react9.useState)(true);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [loadedCount, setLoadedCount] = (0, import_react9.useState)(0);
-  const totalCount = configs.length;
-  const [loadedBuffers, setLoadedBuffers] = (0, import_react9.useState)(/* @__PURE__ */ new Map());
-  const stableIdsRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
-  const contextSampleRateRef = (0, import_react9.useRef)(48e3);
-  const derivedTracks = (0, import_react9.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] = (0, import_react9.useState)(derivedTracks != null ? derivedTracks : []);
-  const prevDerivedRef = (0, import_react9.useRef)(derivedTracks);
-  if (derivedTracks !== prevDerivedRef.current) {
-    prevDerivedRef.current = derivedTracks;
-    if (derivedTracks) setTracks(derivedTracks);
-  }
-  (0, import_react9.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
-var import_react10 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/utils/boundaryTrim.ts
 var import_engine = require("@waveform-playlist/engine");
@@ -861,11 +662,11 @@ function useClipDragHandlers({
   snapSamplePosition
 }) {
   const { sampleRate } = usePlaylistData();
-  const snapSamplePositionRef = import_react10.default.useRef(snapSamplePosition);
+  const snapSamplePositionRef = import_react8.default.useRef(snapSamplePosition);
   snapSamplePositionRef.current = snapSamplePosition;
-  const originalClipStateRef = import_react10.default.useRef(null);
-  const lastBoundaryDeltaRef = import_react10.default.useRef(0);
-  const onDragStart = import_react10.default.useCallback(
+  const originalClipStateRef = import_react8.default.useRef(null);
+  const lastBoundaryDeltaRef = import_react8.default.useRef(0);
+  const onDragStart = import_react8.default.useCallback(
     (event) => {
       var _a;
       const data = (_a = event.operation.source) == null ? void 0 : _a.data;
@@ -901,7 +702,7 @@ function useClipDragHandlers({
     },
     [tracks, isDraggingRef, engineRef]
   );
-  const onDragMove = import_react10.default.useCallback(
+  const onDragMove = import_react8.default.useCallback(
     (event) => {
       var _a, _b, _c;
       const data = (_a = event.operation.source) == null ? void 0 : _a.data;
@@ -963,7 +764,7 @@ function useClipDragHandlers({
     },
     [tracks, onTracksChange, samplesPerPixel, sampleRate]
   );
-  const onDragEnd = import_react10.default.useCallback(
+  const onDragEnd = import_react8.default.useCallback(
     (event) => {
       var _a, _b, _c, _d, _e, _f, _g;
       if (event.canceled) {
@@ -1041,19 +842,19 @@ function useClipDragHandlers({
 }
 
 // src/hooks/useAnnotationDragHandlers.ts
-var import_react11 = __toESM(require("react"));
-var import_playout2 = require("@waveform-playlist/playout");
+var import_react9 = __toESM(require("react"));
 var LINK_THRESHOLD = 0.01;
 function useAnnotationDragHandlers({
   annotations,
   onAnnotationsChange,
   samplesPerPixel,
-  sampleRate = (0, import_playout2.getGlobalAudioContext)().sampleRate,
+  // Default mirrors the engine default; the providers always pass the real rate from context (#510).
+  sampleRate = 48e3,
   duration,
   linkEndpoints
 }) {
-  const originalAnnotationStateRef = import_react11.default.useRef(null);
-  const onDragStart = import_react11.default.useCallback(
+  const originalAnnotationStateRef = import_react9.default.useRef(null);
+  const onDragStart = import_react9.default.useCallback(
     (event) => {
       var _a;
       const data = (_a = event.operation.source) == null ? void 0 : _a.data;
@@ -1072,7 +873,7 @@ function useAnnotationDragHandlers({
     },
     [annotations]
   );
-  const onDragMove = import_react11.default.useCallback(
+  const onDragMove = import_react9.default.useCallback(
     (event) => {
       var _a, _b, _c;
       if (!originalAnnotationStateRef.current) {
@@ -1098,7 +899,7 @@ function useAnnotationDragHandlers({
     },
     [annotations, onAnnotationsChange, samplesPerPixel, sampleRate, duration, linkEndpoints]
   );
-  const onDragEnd = import_react11.default.useCallback(
+  const onDragEnd = import_react9.default.useCallback(
     (event) => {
       if (event.canceled && originalAnnotationStateRef.current) {
         const { annotationIndex, start, end } = originalAnnotationStateRef.current;
@@ -1206,7 +1007,7 @@ function updateAnnotationBoundaries({
 }
 
 // src/hooks/useDragSensors.ts
-var import_react12 = require("react");
+var import_react10 = require("react");
 var import_dom = require("@dnd-kit/dom");
 function useDragSensors(options = {}) {
   const {
@@ -1215,7 +1016,7 @@ function useDragSensors(options = {}) {
     touchTolerance = 5,
     mouseDistance = 1
   } = options;
-  return (0, import_react12.useMemo)(() => {
+  return (0, import_react10.useMemo)(() => {
     if (touchOptimized) {
       return [
         import_dom.PointerSensor.configure({
@@ -1244,14 +1045,14 @@ function useDragSensors(options = {}) {
 }
 
 // src/hooks/useClipSplitting.ts
-var import_react13 = require("react");
+var import_react11 = require("react");
 var import_engine2 = require("@waveform-playlist/engine");
 var useClipSplitting = (options) => {
   const { tracks, engineRef } = options;
   const { sampleRate } = usePlaylistData();
   const { currentTimeRef } = usePlaybackAnimation();
   const { selectedTrackId } = usePlaylistState();
-  const splitClipAt = (0, import_react13.useCallback)(
+  const splitClipAt = (0, import_react11.useCallback)(
     (trackIndex, clipIndex, splitTime) => {
       const { samplesPerPixel } = options;
       const track = tracks[trackIndex];
@@ -1275,7 +1076,7 @@ var useClipSplitting = (options) => {
     },
     [tracks, options, engineRef, sampleRate]
   );
-  const splitClipAtPlayhead = (0, import_react13.useCallback)(() => {
+  const splitClipAtPlayhead = (0, import_react11.useCallback)(() => {
     var _a;
     if (!selectedTrackId) {
       console.warn("[waveform-playlist] No track selected \u2014 click a clip to select a track first");
@@ -1306,16 +1107,16 @@ var useClipSplitting = (options) => {
 };
 
 // src/hooks/useKeyboardShortcuts.ts
-var import_react14 = require("react");
+var import_react12 = require("react");
+var import_core = require("@waveform-playlist/core");
 var import_core2 = require("@waveform-playlist/core");
-var import_core3 = require("@waveform-playlist/core");
 var useKeyboardShortcuts = (options) => {
   const { shortcuts, enabled = true } = options;
-  const handleKeyDown = (0, import_react14.useCallback)(
-    (event) => (0, import_core2.handleKeyboardEvent)(event, shortcuts, enabled),
+  const handleKeyDown = (0, import_react12.useCallback)(
+    (event) => (0, import_core.handleKeyboardEvent)(event, shortcuts, enabled),
     [shortcuts, enabled]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!enabled) return;
     window.addEventListener("keydown", handleKeyDown);
     return () => {
@@ -1325,22 +1126,22 @@ var useKeyboardShortcuts = (options) => {
 };
 
 // src/hooks/usePlaybackShortcuts.ts
-var import_react15 = require("react");
+var import_react13 = require("react");
 var usePlaybackShortcuts = (options = {}) => {
   const { enabled = true, additionalShortcuts = [], shortcuts: overrideShortcuts } = options;
   const { isPlaying } = usePlaybackAnimation();
   const { setCurrentTime, play, pause, stop } = usePlaylistControls();
-  const togglePlayPause = (0, import_react15.useCallback)(() => {
+  const togglePlayPause = (0, import_react13.useCallback)(() => {
     if (isPlaying) {
       pause();
     } else {
       play();
     }
   }, [isPlaying, play, pause]);
-  const stopPlayback = (0, import_react15.useCallback)(() => {
+  const stopPlayback = (0, import_react13.useCallback)(() => {
     stop();
   }, [stop]);
-  const rewindToStart = (0, import_react15.useCallback)(() => {
+  const rewindToStart = (0, import_react13.useCallback)(() => {
     setCurrentTime(0);
     if (isPlaying) {
       play(0);
@@ -1380,7 +1181,7 @@ var usePlaybackShortcuts = (options = {}) => {
 };
 
 // src/hooks/useAnnotationKeyboardControls.ts
-var import_react16 = require("react");
+var import_react14 = require("react");
 var LINK_THRESHOLD2 = 0.01;
 var TIME_DELTA = 0.01;
 function useAnnotationKeyboardControls({
@@ -1393,14 +1194,18 @@ function useAnnotationKeyboardControls({
   continuousPlay = false,
   enabled = true,
   scrollContainerRef,
-  onPlay
+  onPlay,
+  samplesPerPixel: samplesPerPixelProp,
+  sampleRate: sampleRateProp
 }) {
-  const { samplesPerPixel, sampleRate } = usePlaylistData();
-  const activeIndex = (0, import_react16.useMemo)(() => {
+  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 = (0, import_react14.useMemo)(() => {
     if (!activeAnnotationId) return -1;
     return annotations.findIndex((a) => a.id === activeAnnotationId);
   }, [annotations, activeAnnotationId]);
-  const scrollToAnnotation = (0, import_react16.useCallback)(
+  const scrollToAnnotation = (0, import_react14.useCallback)(
     (annotationId) => {
       if (!(scrollContainerRef == null ? void 0 : scrollContainerRef.current) || !samplesPerPixel || !sampleRate) return;
       const annotation = annotations.find((a) => a.id === annotationId);
@@ -1423,12 +1228,12 @@ function useAnnotationKeyboardControls({
     },
     [annotations, scrollContainerRef, samplesPerPixel, sampleRate]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (activeAnnotationId && (scrollContainerRef == null ? void 0 : scrollContainerRef.current) && samplesPerPixel && sampleRate) {
       scrollToAnnotation(activeAnnotationId);
     }
   }, [activeAnnotationId, scrollToAnnotation, scrollContainerRef, samplesPerPixel, sampleRate]);
-  const moveStartBoundary = (0, import_react16.useCallback)(
+  const moveStartBoundary = (0, import_react14.useCallback)(
     (delta) => {
       if (activeIndex < 0) return;
       const annotation = annotations[activeIndex];
@@ -1457,7 +1262,7 @@ function useAnnotationKeyboardControls({
     },
     [annotations, activeIndex, linkEndpoints, onAnnotationsChange]
   );
-  const moveEndBoundary = (0, import_react16.useCallback)(
+  const moveEndBoundary = (0, import_react14.useCallback)(
     (delta) => {
       if (activeIndex < 0) return;
       const annotation = annotations[activeIndex];
@@ -1517,7 +1322,7 @@ function useAnnotationKeyboardControls({
     },
     [annotations, activeIndex, duration, linkEndpoints, onAnnotationsChange]
   );
-  const selectPrevious = (0, import_react16.useCallback)(() => {
+  const selectPrevious = (0, import_react14.useCallback)(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     if (activeIndex <= 0) {
       onActiveAnnotationChange(annotations[annotations.length - 1].id);
@@ -1525,7 +1330,7 @@ function useAnnotationKeyboardControls({
       onActiveAnnotationChange(annotations[activeIndex - 1].id);
     }
   }, [annotations, activeIndex, onActiveAnnotationChange]);
-  const selectNext = (0, import_react16.useCallback)(() => {
+  const selectNext = (0, import_react14.useCallback)(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     if (activeIndex < 0 || activeIndex >= annotations.length - 1) {
       onActiveAnnotationChange(annotations[0].id);
@@ -1533,25 +1338,25 @@ function useAnnotationKeyboardControls({
       onActiveAnnotationChange(annotations[activeIndex + 1].id);
     }
   }, [annotations, activeIndex, onActiveAnnotationChange]);
-  const selectFirst = (0, import_react16.useCallback)(() => {
+  const selectFirst = (0, import_react14.useCallback)(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     onActiveAnnotationChange(annotations[0].id);
   }, [annotations, onActiveAnnotationChange]);
-  const selectLast = (0, import_react16.useCallback)(() => {
+  const selectLast = (0, import_react14.useCallback)(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     onActiveAnnotationChange(annotations[annotations.length - 1].id);
   }, [annotations, onActiveAnnotationChange]);
-  const clearSelection = (0, import_react16.useCallback)(() => {
+  const clearSelection = (0, import_react14.useCallback)(() => {
     if (!onActiveAnnotationChange) return;
     onActiveAnnotationChange(null);
   }, [onActiveAnnotationChange]);
-  const playActiveAnnotation = (0, import_react16.useCallback)(() => {
+  const playActiveAnnotation = (0, import_react14.useCallback)(() => {
     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 = (0, import_react16.useMemo)(
+  const activeAnnotationShortcuts = (0, import_react14.useMemo)(
     () => [
       {
         key: "[",
@@ -1588,7 +1393,7 @@ function useAnnotationKeyboardControls({
     ],
     [moveStartBoundary, moveEndBoundary, playActiveAnnotation]
   );
-  const navigationShortcuts = (0, import_react16.useMemo)(
+  const navigationShortcuts = (0, import_react14.useMemo)(
     () => [
       {
         key: "ArrowUp",
@@ -1634,1404 +1439,46 @@ function useAnnotationKeyboardControls({
       }
     ],
     [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
-var import_react17 = require("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
-var import_tone2 = require("tone");
-function asEffectConstructor(ctor) {
-  return ctor;
-}
-var effectConstructors = {
-  reverb: asEffectConstructor(import_tone2.Reverb),
-  freeverb: asEffectConstructor(import_tone2.Freeverb),
-  jcReverb: asEffectConstructor(import_tone2.JCReverb),
-  feedbackDelay: asEffectConstructor(import_tone2.FeedbackDelay),
-  pingPongDelay: asEffectConstructor(import_tone2.PingPongDelay),
-  chorus: asEffectConstructor(import_tone2.Chorus),
-  phaser: asEffectConstructor(import_tone2.Phaser),
-  tremolo: asEffectConstructor(import_tone2.Tremolo),
-  vibrato: asEffectConstructor(import_tone2.Vibrato),
-  autoPanner: asEffectConstructor(import_tone2.AutoPanner),
-  autoFilter: asEffectConstructor(import_tone2.AutoFilter),
-  autoWah: asEffectConstructor(import_tone2.AutoWah),
-  eq3: asEffectConstructor(import_tone2.EQ3),
-  distortion: asEffectConstructor(import_tone2.Distortion),
-  bitCrusher: asEffectConstructor(import_tone2.BitCrusher),
-  chebyshev: asEffectConstructor(import_tone2.Chebyshev),
-  compressor: asEffectConstructor(import_tone2.Compressor),
-  limiter: asEffectConstructor(import_tone2.Limiter),
-  gate: asEffectConstructor(import_tone2.Gate),
-  stereoWidener: asEffectConstructor(import_tone2.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
-var import_tone3 = require("tone");
-function useDynamicEffects(fftSize = 256) {
-  const [activeEffects, setActiveEffects] = (0, import_react17.useState)([]);
-  const activeEffectsRef = (0, import_react17.useRef)(activeEffects);
-  activeEffectsRef.current = activeEffects;
-  const effectInstancesRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const analyserRef = (0, import_react17.useRef)(null);
-  const graphNodesRef = (0, import_react17.useRef)(null);
-  const rebuildChain = (0, import_react17.useCallback)((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 = (0, import_react17.useCallback)((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 = (0, import_react17.useCallback)((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 = (0, import_react17.useCallback)(
-    (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 = (0, import_react17.useCallback)((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 = (0, import_react17.useCallback)((fromIndex, toIndex) => {
-    setActiveEffects((prev) => {
-      const newEffects = [...prev];
-      const [removed] = newEffects.splice(fromIndex, 1);
-      newEffects.splice(toIndex, 0, removed);
-      return newEffects;
-    });
-  }, []);
-  const clearAllEffects = (0, import_react17.useCallback)(() => {
-    effectInstancesRef.current.forEach((inst) => inst.dispose());
-    effectInstancesRef.current.clear();
-    setActiveEffects([]);
-  }, []);
-  (0, import_react17.useEffect)(() => {
-    rebuildChain(activeEffects);
-  }, [activeEffects, rebuildChain]);
-  const masterEffects = (0, import_react17.useCallback)(
-    (masterGainNode, destination, _isOffline) => {
-      const analyserNode = new import_tone3.Analyser("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
-  );
-  (0, import_react17.useEffect)(() => {
-    const effectInstances = effectInstancesRef.current;
-    return () => {
-      effectInstances.forEach((inst) => inst.dispose());
-      effectInstances.clear();
-    };
-  }, []);
-  const createOfflineEffectsFunction = (0, import_react17.useCallback)(() => {
-    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
-var import_react18 = require("react");
-function useTrackDynamicEffects() {
-  const [trackEffectsState, setTrackEffectsState] = (0, import_react18.useState)(
-    /* @__PURE__ */ new Map()
-  );
-  const trackEffectInstancesRef = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
-  const trackGraphNodesRef = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
-  const rebuildTrackChain = (0, import_react18.useCallback)((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 = (0, import_react18.useCallback)((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 = (0, import_react18.useCallback)((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 = (0, import_react18.useCallback)(
-    (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 = (0, import_react18.useCallback)((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 = (0, import_react18.useCallback)((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 = (0, import_react18.useRef)(trackEffectsState);
-  trackEffectsStateRef.current = trackEffectsState;
-  const getTrackEffectsFunction = (0, import_react18.useCallback)(
-    (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
-  );
-  (0, import_react18.useEffect)(() => {
-    trackEffectsState.forEach((effects, trackId) => {
-      rebuildTrackChain(trackId, effects);
-    });
-  }, [trackEffectsState, rebuildTrackChain]);
-  (0, import_react18.useEffect)(() => {
-    const trackEffectInstances = trackEffectInstancesRef.current;
-    return () => {
-      trackEffectInstances.forEach((instancesMap) => {
-        instancesMap.forEach((inst) => inst.dispose());
-        instancesMap.clear();
-      });
-      trackEffectInstances.clear();
-    };
-  }, []);
-  const createOfflineTrackEffectsFunction = (0, import_react18.useCallback)(
-    (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
-var import_react19 = require("react");
-var import_core4 = require("@waveform-playlist/core");
-var import_playout3 = require("@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] = (0, import_react19.useState)(false);
-  const [progress, setProgress] = (0, import_react19.useState)(0);
-  const [error, setError] = (0, import_react19.useState)(null);
-  const exportWav = (0, import_react19.useCallback)(
-    (_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 = (0, import_playout3.getGlobalAudioContext)().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);
-      }
-    }),
-    []
-  );
-  return {
-    exportWav,
-    isExporting,
-    progress,
-    error
-  };
-}
-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, (0, import_core4.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((0, import_core4.gainToDb)(state.volume));
-            const trackPan = new Panner({ pan: state.pan, channelCount: (0, import_core4.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 = (0, import_playout3.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;
+  );
+  useKeyboardShortcuts({
+    shortcuts: activeAnnotationShortcuts,
+    enabled: enabled && activeIndex >= 0
   });
-}
-function applyClipFades(gainParam, clipGain, startTime, clipDuration, fadeIn, fadeOut) {
-  if (fadeIn) {
-    gainParam.setValueAtTime(0, startTime);
-  } else {
-    gainParam.setValueAtTime(clipGain, startTime);
-  }
-  if (fadeIn) {
-    (0, import_core4.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);
-    }
-    (0, import_core4.applyFadeOut)(gainParam, fadeOutStart, fadeOut.duration, fadeOut.type || "linear", clipGain, 0);
-  }
+  useKeyboardShortcuts({
+    shortcuts: navigationShortcuts,
+    enabled: enabled && annotations.length > 0 && !!onActiveAnnotationChange
+  });
+  return {
+    moveStartBoundary,
+    moveEndBoundary,
+    selectPrevious,
+    selectNext,
+    selectFirst,
+    selectLast,
+    clearSelection,
+    scrollToAnnotation,
+    playActiveAnnotation
+  };
 }
 
 // src/hooks/useAnimationFrameLoop.ts
-var import_react20 = require("react");
+var import_react15 = require("react");
 var useAnimationFrameLoop = () => {
-  const animationFrameRef = (0, import_react20.useRef)(null);
-  const stopAnimationFrameLoop = (0, import_react20.useCallback)(() => {
+  const animationFrameRef = (0, import_react15.useRef)(null);
+  const stopAnimationFrameLoop = (0, import_react15.useCallback)(() => {
     if (animationFrameRef.current !== null) {
       cancelAnimationFrame(animationFrameRef.current);
       animationFrameRef.current = null;
     }
   }, []);
-  const startAnimationFrameLoop = (0, import_react20.useCallback)(
+  const startAnimationFrameLoop = (0, import_react15.useCallback)(
     (callback) => {
       stopAnimationFrameLoop();
       animationFrameRef.current = requestAnimationFrame(callback);
     },
     [stopAnimationFrameLoop]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     return () => {
       stopAnimationFrameLoop();
     };
@@ -3044,7 +1491,7 @@ var useAnimationFrameLoop = () => {
 };
 
 // src/hooks/useWaveformDataCache.ts
-var import_react21 = require("react");
+var import_react16 = require("react");
 
 // src/workers/peaksWorker.ts
 var import_waveform_data2 = __toESM(require("waveform-data"));
@@ -3276,20 +1723,20 @@ function createPeaksWorker() {
 
 // src/hooks/useWaveformDataCache.ts
 function useWaveformDataCache(tracks, baseScale) {
-  const [cache, setCache] = (0, import_react21.useState)(() => /* @__PURE__ */ new Map());
-  const [isGenerating, setIsGenerating] = (0, import_react21.useState)(false);
-  const workerRef = (0, import_react21.useRef)(null);
-  const generatedByBufferRef = (0, import_react21.useRef)(/* @__PURE__ */ new WeakMap());
-  const inflightByBufferRef = (0, import_react21.useRef)(/* @__PURE__ */ new WeakMap());
-  const subscribersByBufferRef = (0, import_react21.useRef)(/* @__PURE__ */ new WeakMap());
-  const pendingCountRef = (0, import_react21.useRef)(0);
-  const getWorker = (0, import_react21.useCallback)(() => {
+  const [cache, setCache] = (0, import_react16.useState)(() => /* @__PURE__ */ new Map());
+  const [isGenerating, setIsGenerating] = (0, import_react16.useState)(false);
+  const workerRef = (0, import_react16.useRef)(null);
+  const generatedByBufferRef = (0, import_react16.useRef)(/* @__PURE__ */ new WeakMap());
+  const inflightByBufferRef = (0, import_react16.useRef)(/* @__PURE__ */ new WeakMap());
+  const subscribersByBufferRef = (0, import_react16.useRef)(/* @__PURE__ */ new WeakMap());
+  const pendingCountRef = (0, import_react16.useRef)(0);
+  const getWorker = (0, import_react16.useCallback)(() => {
     if (!workerRef.current) {
       workerRef.current = createPeaksWorker();
     }
     return workerRef.current;
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     let cancelled = false;
     const generatedByBuffer = generatedByBufferRef.current;
     const inflightByBuffer = inflightByBufferRef.current;
@@ -3394,7 +1841,7 @@ function useWaveformDataCache(tracks, baseScale) {
       setIsGenerating(false);
     };
   }, [tracks, baseScale, getWorker]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     return () => {
       var _a;
       (_a = workerRef.current) == null ? void 0 : _a.terminate();
@@ -3404,232 +1851,12 @@ function useWaveformDataCache(tracks, baseScale) {
   return { cache, isGenerating };
 }
 
-// src/hooks/useDynamicTracks.ts
-var import_react22 = require("react");
-var import_core5 = require("@waveform-playlist/core");
-var import_playout4 = require("@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] = (0, import_react22.useState)([]);
-  const [loadingCount, setLoadingCount] = (0, import_react22.useState)(0);
-  const [errors, setErrors] = (0, import_react22.useState)([]);
-  const cancelledRef = (0, import_react22.useRef)(false);
-  const loadingIdsRef = (0, import_react22.useRef)(/* @__PURE__ */ new Set());
-  const abortControllersRef = (0, import_react22.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react22.useEffect)(() => {
-    const controllers = abortControllersRef.current;
-    return () => {
-      cancelledRef.current = true;
-      for (const controller of controllers.values()) {
-        controller.abort();
-      }
-      controllers.clear();
-    };
-  }, []);
-  const addTracks = (0, import_react22.useCallback)((sources) => {
-    if (sources.length === 0) return;
-    const audioContext = (0, import_playout4.getGlobalAudioContext)();
-    const placeholders = sources.map((source) => ({
-      track: (0, import_core5.createTrack)({ 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 = (0, import_core5.createClipFromSeconds)({
-            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 = (0, import_react22.useCallback)((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
-var import_react23 = require("react");
-var import_playout5 = require("@waveform-playlist/playout");
-var import_core6 = require("@waveform-playlist/core");
-var import_worklets = require("@waveform-playlist/worklets");
-var PEAK_DECAY = 0.98;
-function useOutputMeter(options = {}) {
-  const { channelCount = 2, updateRate = 60, isPlaying = false } = options;
-  const [levels, setLevels] = (0, import_react23.useState)(() => new Array(channelCount).fill(0));
-  const [peakLevels, setPeakLevels] = (0, import_react23.useState)(() => new Array(channelCount).fill(0));
-  const [rmsLevels, setRmsLevels] = (0, import_react23.useState)(() => new Array(channelCount).fill(0));
-  const workletNodeRef = (0, import_react23.useRef)(null);
-  const smoothedPeakRef = (0, import_react23.useRef)(new Array(channelCount).fill(0));
-  const [meterError, setMeterError] = (0, import_react23.useState)(null);
-  const resetPeak = (0, import_react23.useCallback)(
-    () => setPeakLevels(new Array(channelCount).fill(0)),
-    [channelCount]
-  );
-  (0, import_react23.useEffect)(() => {
-    if (!isPlaying) {
-      const zeros = new Array(channelCount).fill(0);
-      smoothedPeakRef.current = new Array(channelCount).fill(0);
-      setLevels(zeros);
-      setRmsLevels(zeros);
-      setPeakLevels(zeros);
-    }
-  }, [isPlaying, channelCount]);
-  (0, import_react23.useEffect)(() => {
-    let isMounted = true;
-    const setup = () => __async(null, null, function* () {
-      const context = (0, import_playout5.getGlobalContext)();
-      const rawCtx = context.rawContext;
-      yield rawCtx.audioWorklet.addModule(import_worklets.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((0, import_core6.gainToNormalized)(smoothed[ch]));
-          rmsValues.push((0, import_core6.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 = (0, import_playout5.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
 var import_jsx_runtime = require("react/jsx-runtime");
-var PlaybackAnimationContext = (0, import_react24.createContext)(null);
-var PlaylistStateContext = (0, import_react24.createContext)(null);
-var PlaylistControlsContext = (0, import_react24.createContext)(null);
-var PlaylistDataContext = (0, import_react24.createContext)(null);
+var PlaybackAnimationContext = (0, import_react17.createContext)(null);
+var PlaylistStateContext = (0, import_react17.createContext)(null);
+var PlaylistControlsContext = (0, import_react17.createContext)(null);
+var PlaylistDataContext = (0, import_react17.createContext)(null);
 var WaveformPlaylistProvider = ({
   tracks,
   timescale = false,
@@ -3643,6 +1870,7 @@ var WaveformPlaylistProvider = ({
   annotationList,
   effects,
   onReady,
+  onError,
   onAnnotationUpdate: _onAnnotationUpdate,
   onAnnotationsChange,
   barWidth = 1,
@@ -3653,18 +1881,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 = (0, import_react24.useRef)(indefinitePlayback);
+  const indefinitePlaybackRef = (0, import_react17.useRef)(indefinitePlayback);
   indefinitePlaybackRef.current = indefinitePlayback;
-  const stableZoomLevels = (0, import_react24.useMemo)(
+  const stableZoomLevels = (0, import_react17.useMemo)(
     () => zoomLevels,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [zoomLevels == null ? void 0 : zoomLevels.join(",")]
   );
-  const annotations = (0, import_react24.useMemo)(() => {
+  const annotations = (0, import_react17.useMemo)(() => {
     if (!(annotationList == null ? void 0 : annotationList.annotations)) return [];
     if (process.env.NODE_ENV !== "production" && annotationList.annotations.length > 0) {
       const first = annotationList.annotations[0];
@@ -3677,63 +1906,50 @@ var WaveformPlaylistProvider = ({
     }
     return annotationList.annotations;
   }, [annotationList == null ? void 0 : annotationList.annotations]);
-  const annotationsRef = (0, import_react24.useRef)(annotations);
+  const annotationsRef = (0, import_react17.useRef)(annotations);
   annotationsRef.current = annotations;
-  const [activeAnnotationId, setActiveAnnotationIdState] = (0, import_react24.useState)(null);
-  const [isPlaying, setIsPlaying] = (0, import_react24.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react24.useState)(0);
-  const [duration, setDuration] = (0, import_react24.useState)(0);
-  const [audioBuffers, setAudioBuffers] = (0, import_react24.useState)([]);
-  const [peaksDataArray, setPeaksDataArray] = (0, import_react24.useState)([]);
-  const [trackStates, setTrackStates] = (0, import_react24.useState)([]);
-  const [isAutomaticScroll, setIsAutomaticScroll] = (0, import_react24.useState)(automaticScroll);
-  const [continuousPlay, setContinuousPlayState] = (0, import_react24.useState)(
+  const [activeAnnotationId, setActiveAnnotationIdState] = (0, import_react17.useState)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react17.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react17.useState)(0);
+  const [duration, setDuration] = (0, import_react17.useState)(0);
+  const [audioBuffers, setAudioBuffers] = (0, import_react17.useState)([]);
+  const [peaksDataArray, setPeaksDataArray] = (0, import_react17.useState)([]);
+  const [trackStates, setTrackStates] = (0, import_react17.useState)([]);
+  const [isAutomaticScroll, setIsAutomaticScroll] = (0, import_react17.useState)(automaticScroll);
+  const [continuousPlay, setContinuousPlayState] = (0, import_react17.useState)(
     (_a = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _a : false
   );
-  const [linkEndpoints, setLinkEndpoints] = (0, import_react24.useState)((_b = annotationList == null ? void 0 : annotationList.linkEndpoints) != null ? _b : false);
-  const [annotationsEditable, setAnnotationsEditable] = (0, import_react24.useState)((_c = annotationList == null ? void 0 : annotationList.editable) != null ? _c : false);
-  const [isReady, setIsReady] = (0, import_react24.useState)(false);
-  const engineRef = (0, import_react24.useRef)(null);
-  const adapterRef = (0, import_react24.useRef)(null);
-  const audioInitializedRef = (0, import_react24.useRef)(false);
-  const isPlayingRef = (0, import_react24.useRef)(false);
+  const [linkEndpoints, setLinkEndpoints] = (0, import_react17.useState)((_b = annotationList == null ? void 0 : annotationList.linkEndpoints) != null ? _b : false);
+  const [annotationsEditable, setAnnotationsEditable] = (0, import_react17.useState)((_c = annotationList == null ? void 0 : annotationList.editable) != null ? _c : false);
+  const [isReady, setIsReady] = (0, import_react17.useState)(false);
+  const engineRef = (0, import_react17.useRef)(null);
+  const adapterRef = (0, import_react17.useRef)(null);
+  const audioInitializedRef = (0, import_react17.useRef)(false);
+  const isPlayingRef = (0, import_react17.useRef)(false);
   isPlayingRef.current = isPlaying;
-  const playStartPositionRef = (0, import_react24.useRef)(0);
-  const currentTimeRef = (0, import_react24.useRef)(0);
-  const visualTimeRef = (0, import_react24.useRef)(0);
-  const tracksRef = (0, import_react24.useRef)(tracks);
-  const soundFontCacheRef = (0, import_react24.useRef)(soundFontCache);
+  const playStartPositionRef = (0, import_react17.useRef)(0);
+  const currentTimeRef = (0, import_react17.useRef)(0);
+  const visualTimeRef = (0, import_react17.useRef)(0);
+  const tracksRef = (0, import_react17.useRef)(tracks);
+  const soundFontCacheRef = (0, import_react17.useRef)(soundFontCache);
   soundFontCacheRef.current = soundFontCache;
-  const trackStatesRef = (0, import_react24.useRef)(trackStates);
-  const playbackStartTimeRef = (0, import_react24.useRef)(0);
-  const audioStartPositionRef = (0, import_react24.useRef)(0);
-  const playbackEndTimeRef = (0, import_react24.useRef)(null);
-  const scrollContainerRef = (0, import_react24.useRef)(null);
-  const isAutomaticScrollRef = (0, import_react24.useRef)(false);
-  const frameCallbacksRef = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
-  const continuousPlayRef = (0, import_react24.useRef)((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
-  const activeAnnotationIdRef = (0, import_react24.useRef)(null);
-  const engineTracksRef = (0, import_react24.useRef)(null);
-  const lastTracksVersionRef = (0, import_react24.useRef)(0);
-  const skipEngineDisposeRef = (0, import_react24.useRef)(false);
-  const isDraggingRef = (0, import_react24.useRef)(false);
-  const prevTracksRef = (0, import_react24.useRef)([]);
-  const samplesPerPixelRef = (0, import_react24.useRef)(initialSamplesPerPixel);
-  const [initialSampleRate] = (0, import_react24.useState)(() => {
-    if (typeof AudioContext === "undefined") return sampleRateProp != null ? sampleRateProp : 48e3;
-    try {
-      if (sampleRateProp !== void 0) {
-        return (0, import_playout6.configureGlobalContext)({ sampleRate: sampleRateProp });
-      }
-      return (0, import_playout6.getGlobalAudioContext)().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 = (0, import_react24.useRef)(initialSampleRate);
+  const trackStatesRef = (0, import_react17.useRef)(trackStates);
+  const playbackStartTimeRef = (0, import_react17.useRef)(0);
+  const audioStartPositionRef = (0, import_react17.useRef)(0);
+  const playbackEndTimeRef = (0, import_react17.useRef)(null);
+  const scrollContainerRef = (0, import_react17.useRef)(null);
+  const isAutomaticScrollRef = (0, import_react17.useRef)(false);
+  const frameCallbacksRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
+  const continuousPlayRef = (0, import_react17.useRef)((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
+  const activeAnnotationIdRef = (0, import_react17.useRef)(null);
+  const engineTracksRef = (0, import_react17.useRef)(null);
+  const lastTracksVersionRef = (0, import_react17.useRef)(0);
+  const skipEngineDisposeRef = (0, import_react17.useRef)(false);
+  const isDraggingRef = (0, import_react17.useRef)(false);
+  const prevTracksRef = (0, import_react17.useRef)([]);
+  const samplesPerPixelRef = (0, import_react17.useRef)(initialSamplesPerPixel);
+  const [initialSampleRate] = (0, import_react17.useState)(() => sampleRateProp != null ? sampleRateProp : 48e3);
+  const sampleRateRef = (0, import_react17.useRef)(initialSampleRate);
   const { timeFormat, setTimeFormat, formatTime: formatTime2 } = useTimeFormat();
   const zoom = useZoomControls({ engineRef, initialSamplesPerPixel });
   const { samplesPerPixel, onEngineState: onZoomEngineState } = zoom;
@@ -3778,20 +1994,20 @@ var WaveformPlaylistProvider = ({
     onEngineState: onUndoEngineState
   } = useUndoState({ engineRef });
   const { animationFrameRef, startAnimationFrameLoop, stopAnimationFrameLoop } = useAnimationFrameLoop();
-  const baseScale = (0, import_react24.useMemo)(
+  const baseScale = (0, import_react17.useMemo)(
     () => Math.min(...stableZoomLevels != null ? stableZoomLevels : [256, 512, 1024, 2048, 4096, 8192]),
     [stableZoomLevels]
   );
   const { cache: waveformDataCache } = useWaveformDataCache(tracks, baseScale);
-  const setContinuousPlay = (0, import_react24.useCallback)((value) => {
+  const setContinuousPlay = (0, import_react17.useCallback)((value) => {
     continuousPlayRef.current = value;
     setContinuousPlayState(value);
   }, []);
-  const setActiveAnnotationId = (0, import_react24.useCallback)((value) => {
+  const setActiveAnnotationId = (0, import_react17.useCallback)((value) => {
     activeAnnotationIdRef.current = value;
     setActiveAnnotationIdState(value);
   }, []);
-  const setLoopRegionFromSelection = (0, import_react24.useCallback)(() => {
+  const setLoopRegionFromSelection = (0, import_react17.useCallback)(() => {
     var _a2, _b2;
     const start = (_a2 = selectionStartRef.current) != null ? _a2 : 0;
     const end = (_b2 = selectionEndRef.current) != null ? _b2 : 0;
@@ -3799,10 +2015,10 @@ var WaveformPlaylistProvider = ({
       setLoopRegion(start, end);
     }
   }, [setLoopRegion, selectionStartRef, selectionEndRef]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     isAutomaticScrollRef.current = isAutomaticScroll;
   }, [isAutomaticScroll]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     trackStatesRef.current = trackStates;
   }, [trackStates]);
   tracksRef.current = tracks;
@@ -3813,7 +2029,7 @@ var WaveformPlaylistProvider = ({
     return current === pt;
   });
   skipEngineDisposeRef.current = isEngineTracks || isDraggingRef.current || isIncrementalAdd;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!scrollContainerRef.current || duration === 0) return;
     const container = scrollContainerRef.current;
     const oldSamplesPerPixel = samplesPerPixelRef.current;
@@ -3829,8 +2045,8 @@ var WaveformPlaylistProvider = ({
     container.scrollLeft = newScrollLeft;
     samplesPerPixelRef.current = newSamplesPerPixel;
   }, [samplesPerPixel, duration]);
-  const pendingResumeRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
+  const pendingResumeRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     var _a2, _b2, _c2, _d2;
     if (isEngineTracks || isDraggingRef.current) {
       if (isEngineTracks) {
@@ -3935,6 +2151,7 @@ var WaveformPlaylistProvider = ({
       stopAnimationFrameLoop();
       pendingResumeRef.current = { position: resumePosition };
     }
+    let cancelled = false;
     const loadAudio = () => __async(null, null, function* () {
       var _a3, _b3, _c3, _d3, _e;
       try {
@@ -3977,7 +2194,17 @@ var WaveformPlaylistProvider = ({
         lastTracksVersionRef.current = 0;
         engineTracksRef.current = null;
         audioInitializedRef.current = false;
-        const adapter = (0, import_playout6.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 import_engine3.PlaylistEngine({
           adapter,
@@ -4035,11 +2262,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;
@@ -4062,6 +2301,7 @@ var WaveformPlaylistProvider = ({
     // to the live adapter by the sync effect below; only adapter creation reads it
     // (via soundFontCacheRef).
     onReady,
+    onError,
     effects,
     stopAnimationFrameLoop,
     onSelectionEngineState,
@@ -4080,10 +2320,10 @@ var WaveformPlaylistProvider = ({
     stableZoomLevels,
     deferEngineRebuild
   ]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     syncSoundFontCacheToAdapter(adapterRef.current, soundFontCache);
   }, [soundFontCache]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (tracks.length === 0) return;
     const allTrackPeaks = tracks.map((track) => {
       const clipPeaks = track.clips.map((clip) => {
@@ -4164,8 +2404,15 @@ var WaveformPlaylistProvider = ({
     });
     setPeaksDataArray(allTrackPeaks);
   }, [tracks, samplesPerPixel, mono, waveformDataCache, deferEngineRebuild]);
-  const getPlaybackTimeFallbackWarnedRef = (0, import_react24.useRef)(false);
-  const getPlaybackTime = (0, import_react24.useCallback)(() => {
+  const getAudioContextTime = (0, import_react17.useCallback)(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = adapterRef.current) == null ? void 0 : _a2.audioContext.currentTime) != null ? _b2 : 0;
+    },
+    []
+  );
+  const getPlaybackTimeFallbackWarnedRef = (0, import_react17.useRef)(false);
+  const getPlaybackTime = (0, import_react17.useCallback)(() => {
     var _a2, _b2;
     if (engineRef.current) {
       return engineRef.current.getCurrentTime();
@@ -4176,30 +2423,35 @@ var WaveformPlaylistProvider = ({
         "[waveform-playlist] getPlaybackTime called without engine. Falling back to manual elapsed time (loop wrapping will not work)."
       );
     }
-    const elapsed = (0, import_tone4.getContext)().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 = (0, import_react24.useCallback)((rawTime) => {
+  }, [getAudioContextTime]);
+  const toVisualTime = (0, import_react17.useCallback)((rawTime) => {
     return Number.isFinite(rawTime) ? Math.max(0, rawTime) : 0;
   }, []);
-  const setCurrentTimeRefs = (0, import_react24.useCallback)(
+  const setCurrentTimeRefs = (0, import_react17.useCallback)(
     (rawTime) => {
       currentTimeRef.current = rawTime;
       visualTimeRef.current = toVisualTime(rawTime);
     },
     [toVisualTime]
   );
-  const getLookAhead = (0, import_react24.useCallback)(() => {
+  const getLookAhead = (0, import_react17.useCallback)(() => {
     var _a2, _b2;
     return (_b2 = (_a2 = engineRef.current) == null ? void 0 : _a2.lookAhead) != null ? _b2 : 0;
   }, []);
-  const registerFrameCallback = (0, import_react24.useCallback)((id, cb) => {
+  const getOutputLatency = (0, import_react17.useCallback)(() => {
+    var _a2;
+    const audioCtx = (_a2 = adapterRef.current) == null ? void 0 : _a2.audioContext;
+    return audioCtx && "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
+  }, []);
+  const registerFrameCallback = (0, import_react17.useCallback)((id, cb) => {
     frameCallbacksRef.current.set(id, cb);
   }, []);
-  const unregisterFrameCallback = (0, import_react24.useCallback)((id) => {
+  const unregisterFrameCallback = (0, import_react17.useCallback)((id) => {
     frameCallbacksRef.current.delete(id);
   }, []);
-  const startAnimationLoop = (0, import_react24.useCallback)(() => {
+  const startAnimationLoop = (0, import_react17.useCallback)(() => {
     const updateTime = () => {
       const time = getPlaybackTime();
       currentTimeRef.current = time;
@@ -4287,15 +2539,14 @@ var WaveformPlaylistProvider = ({
     setCurrentTimeRefs
   ]);
   const stopAnimationLoop = stopAnimationFrameLoop;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const reschedulePlayback = () => __async(null, null, function* () {
       if (isPlaying && animationFrameRef.current && engineRef.current) {
         if (continuousPlay) {
           const currentPos = currentTimeRef.current;
           engineRef.current.stop();
           stopAnimationLoop();
-          const context = (0, import_tone4.getContext)();
-          const timeNow = context.currentTime;
+          const timeNow = getAudioContextTime();
           playbackStartTimeRef.current = timeNow;
           audioStartPositionRef.current = currentPos;
           engineRef.current.play(currentPos);
@@ -4311,14 +2562,20 @@ var WaveformPlaylistProvider = ({
       setIsPlaying(false);
       stopAnimationLoop();
     });
-  }, [continuousPlay, isPlaying, startAnimationLoop, stopAnimationLoop, animationFrameRef]);
-  (0, import_react24.useEffect)(() => {
+  }, [
+    continuousPlay,
+    isPlaying,
+    startAnimationLoop,
+    stopAnimationLoop,
+    animationFrameRef,
+    getAudioContextTime
+  ]);
+  (0, import_react17.useEffect)(() => {
     const resumePlayback = () => __async(null, null, function* () {
       if (pendingResumeRef.current && engineRef.current) {
         const { position } = pendingResumeRef.current;
         pendingResumeRef.current = null;
-        const context = (0, import_tone4.getContext)();
-        const timeNow = context.currentTime;
+        const timeNow = getAudioContextTime();
         playbackStartTimeRef.current = timeNow;
         audioStartPositionRef.current = position;
         if (!audioInitializedRef.current) {
@@ -4335,8 +2592,8 @@ var WaveformPlaylistProvider = ({
       setIsPlaying(false);
       stopAnimationLoop();
     });
-  }, [tracks, startAnimationLoop, stopAnimationLoop]);
-  const play = (0, import_react24.useCallback)(
+  }, [tracks, startAnimationLoop, stopAnimationLoop, getAudioContextTime]);
+  const play = (0, import_react17.useCallback)(
     (startTime, playDuration) => __async(null, null, function* () {
       if (!engineRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
@@ -4345,8 +2602,7 @@ var WaveformPlaylistProvider = ({
       engineRef.current.stop();
       engineRef.current.seek(actualStartTime);
       stopAnimationLoop();
-      const context = (0, import_tone4.getContext)();
-      const startTimeNow = context.currentTime;
+      const startTimeNow = getAudioContextTime();
       playbackStartTimeRef.current = startTimeNow;
       audioStartPositionRef.current = actualStartTime;
       playbackEndTimeRef.current = playDuration !== void 0 ? actualStartTime + playDuration : null;
@@ -4365,9 +2621,9 @@ var WaveformPlaylistProvider = ({
       setIsPlaying(true);
       startAnimationLoop();
     }),
-    [startAnimationLoop, stopAnimationLoop, setCurrentTimeRefs]
+    [startAnimationLoop, stopAnimationLoop, setCurrentTimeRefs, getAudioContextTime]
   );
-  const pause = (0, import_react24.useCallback)(() => {
+  const pause = (0, import_react17.useCallback)(() => {
     if (!engineRef.current) return;
     const pauseTime = getPlaybackTime();
     engineRef.current.pause();
@@ -4376,7 +2632,7 @@ var WaveformPlaylistProvider = ({
     setCurrentTimeRefs(pauseTime);
     setCurrentTime(pauseTime);
   }, [stopAnimationLoop, getPlaybackTime, setCurrentTimeRefs]);
-  const stop = (0, import_react24.useCallback)(() => {
+  const stop = (0, import_react17.useCallback)(() => {
     if (!engineRef.current) return;
     engineRef.current.stop();
     setIsPlaying(false);
@@ -4385,7 +2641,7 @@ var WaveformPlaylistProvider = ({
     setCurrentTime(playStartPositionRef.current);
     setActiveAnnotationId(null);
   }, [stopAnimationLoop, setActiveAnnotationId, setCurrentTimeRefs]);
-  const seekTo = (0, import_react24.useCallback)(
+  const seekTo = (0, import_react17.useCallback)(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
       setCurrentTimeRefs(clampedTime);
@@ -4396,7 +2652,7 @@ var WaveformPlaylistProvider = ({
     },
     [duration, isPlaying, play, setCurrentTimeRefs]
   );
-  const setTrackMute = (0, import_react24.useCallback)(
+  const setTrackMute = (0, import_react17.useCallback)(
     (trackIndex, muted) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4410,7 +2666,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackSolo = (0, import_react24.useCallback)(
+  const setTrackSolo = (0, import_react17.useCallback)(
     (trackIndex, soloed) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4424,7 +2680,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackVolume = (0, import_react24.useCallback)(
+  const setTrackVolume = (0, import_react17.useCallback)(
     (trackIndex, volume2) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4438,7 +2694,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackPan = (0, import_react24.useCallback)(
+  const setTrackPan = (0, import_react17.useCallback)(
     (trackIndex, pan) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4452,7 +2708,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setSelection = (0, import_react24.useCallback)(
+  const setSelection = (0, import_react17.useCallback)(
     (start, end) => {
       setSelectionEngine(start, end);
       setCurrentTimeRefs(start);
@@ -4465,12 +2721,12 @@ var WaveformPlaylistProvider = ({
     },
     [isPlaying, setSelectionEngine, setCurrentTimeRefs]
   );
-  const setScrollContainer = (0, import_react24.useCallback)((element) => {
+  const setScrollContainer = (0, import_react17.useCallback)((element) => {
     scrollContainerRef.current = element;
   }, []);
-  const onAnnotationsChangeRef = (0, import_react24.useRef)(onAnnotationsChange);
+  const onAnnotationsChangeRef = (0, import_react17.useRef)(onAnnotationsChange);
   onAnnotationsChangeRef.current = onAnnotationsChange;
-  const setAnnotations = (0, import_react24.useCallback)(
+  const setAnnotations = (0, import_react17.useCallback)(
     (action) => {
       const updated = typeof action === "function" ? action(annotationsRef.current) : action;
       if (!onAnnotationsChangeRef.current) {
@@ -4488,7 +2744,7 @@ var WaveformPlaylistProvider = ({
   const sampleRate = sampleRateRef.current;
   const timeScaleHeight = timescale ? 30 : 0;
   const minimumPlaylistHeight = tracks.length * waveHeight + timeScaleHeight;
-  const animationValue = (0, import_react24.useMemo)(
+  const animationValue = (0, import_react17.useMemo)(
     () => ({
       isPlaying,
       currentTime,
@@ -4497,7 +2753,9 @@ var WaveformPlaylistProvider = ({
       playbackStartTimeRef,
       audioStartPositionRef,
       getPlaybackTime,
+      getAudioContextTime,
       getLookAhead,
+      getOutputLatency,
       registerFrameCallback,
       unregisterFrameCallback
     }),
@@ -4509,12 +2767,14 @@ var WaveformPlaylistProvider = ({
       playbackStartTimeRef,
       audioStartPositionRef,
       getPlaybackTime,
+      getAudioContextTime,
       getLookAhead,
+      getOutputLatency,
       registerFrameCallback,
       unregisterFrameCallback
     ]
   );
-  const stateValue = (0, import_react24.useMemo)(
+  const stateValue = (0, import_react17.useMemo)(
     () => ({
       continuousPlay,
       linkEndpoints,
@@ -4550,17 +2810,17 @@ var WaveformPlaylistProvider = ({
       canRedo
     ]
   );
-  const setCurrentTimeControl = (0, import_react24.useCallback)(
+  const setCurrentTimeControl = (0, import_react17.useCallback)(
     (time) => {
       setCurrentTimeRefs(time);
       setCurrentTime(time);
     },
     [setCurrentTimeRefs]
   );
-  const setAutomaticScrollControl = (0, import_react24.useCallback)((enabled) => {
+  const setAutomaticScrollControl = (0, import_react17.useCallback)((enabled) => {
     setIsAutomaticScroll(enabled);
   }, []);
-  const controlsValue = (0, import_react24.useMemo)(
+  const controlsValue = (0, import_react17.useMemo)(
     () => ({
       // Playback controls
       play,
@@ -4636,7 +2896,7 @@ var WaveformPlaylistProvider = ({
       redo
     ]
   );
-  const dataValue = (0, import_react24.useMemo)(
+  const dataValue = (0, import_react17.useMemo)(
     () => ({
       duration,
       audioBuffers,
@@ -4692,44 +2952,69 @@ var WaveformPlaylistProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { theme: mergedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlaybackAnimationContext.Provider, { value: animationValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlaylistStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlaylistControlsContext.Provider, { value: controlsValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlaylistDataContext.Provider, { value: dataValue, children }) }) }) }) });
 };
 var usePlaybackAnimation = () => {
-  const context = (0, import_react24.useContext)(PlaybackAnimationContext);
+  const context = (0, import_react17.useContext)(PlaybackAnimationContext);
   if (!context) {
     throw new Error("usePlaybackAnimation must be used within WaveformPlaylistProvider");
   }
   return context;
 };
 var usePlaylistState = () => {
-  const context = (0, import_react24.useContext)(PlaylistStateContext);
+  const context = (0, import_react17.useContext)(PlaylistStateContext);
   if (!context) {
     throw new Error("usePlaylistState must be used within WaveformPlaylistProvider");
   }
   return context;
 };
 var usePlaylistControls = () => {
-  const context = (0, import_react24.useContext)(PlaylistControlsContext);
+  const context = (0, import_react17.useContext)(PlaylistControlsContext);
   if (!context) {
     throw new Error("usePlaylistControls must be used within WaveformPlaylistProvider");
   }
   return context;
 };
 var usePlaylistData = () => {
-  const context = (0, import_react24.useContext)(PlaylistDataContext);
+  const context = (0, import_react17.useContext)(PlaylistDataContext);
   if (!context) {
     throw new Error("usePlaylistData must be used within WaveformPlaylistProvider");
   }
   return context;
 };
+var usePlaylistDataOptional = () => (0, import_react17.useContext)(PlaylistDataContext);
 
 // src/MediaElementPlaylistContext.tsx
-var import_react25 = require("react");
+var import_react18 = require("react");
 var import_styled_components2 = require("styled-components");
-var import_media_element_playout = require("@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
 var import_ui_components3 = require("@waveform-playlist/ui-components");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var MediaElementAnimationContext = (0, import_react25.createContext)(null);
-var MediaElementStateContext = (0, import_react25.createContext)(null);
-var MediaElementControlsContext = (0, import_react25.createContext)(null);
-var MediaElementDataContext = (0, import_react25.createContext)(null);
+var MediaElementAnimationContext = (0, import_react18.createContext)(null);
+var MediaElementStateContext = (0, import_react18.createContext)(null);
+var MediaElementControlsContext = (0, import_react18.createContext)(null);
+var MediaElementDataContext = (0, import_react18.createContext)(null);
 var MediaElementPlaylistProvider = ({
   track,
   samplesPerPixel: initialSamplesPerPixel = 1024,
@@ -4747,16 +3032,18 @@ var MediaElementPlaylistProvider = ({
   audioContext,
   onAnnotationsChange,
   onReady,
+  onError,
+  createPlayout,
   children
 }) => {
   var _a;
   const progressBarWidth = progressBarWidthProp != null ? progressBarWidthProp : barWidth + barGap;
-  const [isPlaying, setIsPlaying] = (0, import_react25.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react25.useState)(0);
-  const [duration, setDuration] = (0, import_react25.useState)(0);
-  const [peaksDataArray, setPeaksDataArray] = (0, import_react25.useState)([]);
-  const [playbackRate, setPlaybackRateState] = (0, import_react25.useState)(initialPlaybackRate);
-  const annotations = (0, import_react25.useMemo)(() => {
+  const [isPlaying, setIsPlaying] = (0, import_react18.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react18.useState)(0);
+  const [duration, setDuration] = (0, import_react18.useState)(0);
+  const [peaksDataArray, setPeaksDataArray] = (0, import_react18.useState)([]);
+  const [playbackRate, setPlaybackRateState] = (0, import_react18.useState)(initialPlaybackRate);
+  const annotations = (0, import_react18.useMemo)(() => {
     if (!(annotationList == null ? void 0 : annotationList.annotations)) return [];
     if (process.env.NODE_ENV !== "production" && annotationList.annotations.length > 0) {
       const first = annotationList.annotations[0];
@@ -4769,73 +3056,92 @@ var MediaElementPlaylistProvider = ({
     }
     return annotationList.annotations;
   }, [annotationList == null ? void 0 : annotationList.annotations]);
-  const annotationsRef = (0, import_react25.useRef)(annotations);
+  const annotationsRef = (0, import_react18.useRef)(annotations);
   annotationsRef.current = annotations;
-  const [activeAnnotationId, setActiveAnnotationIdState] = (0, import_react25.useState)(null);
-  const [continuousPlay, setContinuousPlayState] = (0, import_react25.useState)(
+  const [activeAnnotationId, setActiveAnnotationIdState] = (0, import_react18.useState)(null);
+  const [continuousPlay, setContinuousPlayState] = (0, import_react18.useState)(
     (_a = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _a : false
   );
-  const [samplesPerPixel] = (0, import_react25.useState)(initialSamplesPerPixel);
-  const [isAutomaticScroll, setIsAutomaticScroll] = (0, import_react25.useState)(automaticScroll);
-  const playoutRef = (0, import_react25.useRef)(null);
-  const currentTimeRef = (0, import_react25.useRef)(0);
-  const continuousPlayRef = (0, import_react25.useRef)(continuousPlay);
-  const activeAnnotationIdRef = (0, import_react25.useRef)(null);
-  const scrollContainerRef = (0, import_react25.useRef)(null);
-  const isAutomaticScrollRef = (0, import_react25.useRef)(automaticScroll);
-  const samplesPerPixelRef = (0, import_react25.useRef)(initialSamplesPerPixel);
+  const [samplesPerPixel] = (0, import_react18.useState)(initialSamplesPerPixel);
+  const [isAutomaticScroll, setIsAutomaticScroll] = (0, import_react18.useState)(automaticScroll);
+  const playoutRef = (0, import_react18.useRef)(null);
+  const currentTimeRef = (0, import_react18.useRef)(0);
+  const continuousPlayRef = (0, import_react18.useRef)(continuousPlay);
+  const activeAnnotationIdRef = (0, import_react18.useRef)(null);
+  const scrollContainerRef = (0, import_react18.useRef)(null);
+  const isAutomaticScrollRef = (0, import_react18.useRef)(automaticScroll);
+  const samplesPerPixelRef = (0, import_react18.useRef)(initialSamplesPerPixel);
   const { startAnimationFrameLoop, stopAnimationFrameLoop } = useAnimationFrameLoop();
-  (0, import_react25.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     continuousPlayRef.current = continuousPlay;
   }, [continuousPlay]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     isAutomaticScrollRef.current = isAutomaticScroll;
   }, [isAutomaticScroll]);
-  const setActiveAnnotationId = (0, import_react25.useCallback)((value) => {
+  const setActiveAnnotationId = (0, import_react18.useCallback)((value) => {
     activeAnnotationIdRef.current = value;
     setActiveAnnotationIdState(value);
   }, []);
-  const setContinuousPlay = (0, import_react25.useCallback)((value) => {
+  const setContinuousPlay = (0, import_react18.useCallback)((value) => {
     continuousPlayRef.current = value;
     setContinuousPlayState(value);
   }, []);
-  const setScrollContainer = (0, import_react25.useCallback)((element) => {
+  const setScrollContainer = (0, import_react18.useCallback)((element) => {
     scrollContainerRef.current = element;
   }, []);
   const sampleRate = track.waveformData.sample_rate;
-  (0, import_react25.useEffect)(() => {
-    var _a2, _b;
-    const playout = new import_media_element_playout.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();
+  (0, import_react18.useEffect)(() => {
+    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,
@@ -4847,10 +3153,12 @@ var MediaElementPlaylistProvider = ({
     initialPlaybackRate,
     preservesPitch,
     onReady,
+    onError,
     stopAnimationFrameLoop,
-    setActiveAnnotationId
+    setActiveAnnotationId,
+    createPlayout
   ]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     var _a2;
     try {
       const extractedPeaks = extractPeaksFromWaveformData(
@@ -4879,7 +3187,7 @@ var MediaElementPlaylistProvider = ({
       console.warn("[waveform-playlist] Failed to extract peaks from waveform data:", err);
     }
   }, [track.waveformData, track.name, samplesPerPixel, sampleRate]);
-  const startAnimationLoop = (0, import_react25.useCallback)(() => {
+  const startAnimationLoop = (0, import_react18.useCallback)(() => {
     const updateTime = () => {
       var _a2, _b, _c;
       const time = (_b = (_a2 = playoutRef.current) == null ? void 0 : _a2.getCurrentTime()) != null ? _b : 0;
@@ -4922,7 +3230,7 @@ var MediaElementPlaylistProvider = ({
     startAnimationFrameLoop(updateTime);
   }, [setActiveAnnotationId, sampleRate, startAnimationFrameLoop]);
   const stopAnimationLoop = stopAnimationFrameLoop;
-  const play = (0, import_react25.useCallback)(
+  const play = (0, import_react18.useCallback)(
     (startTime) => {
       if (!playoutRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
@@ -4932,14 +3240,14 @@ var MediaElementPlaylistProvider = ({
     },
     [startAnimationLoop]
   );
-  const pause = (0, import_react25.useCallback)(() => {
+  const pause = (0, import_react18.useCallback)(() => {
     if (!playoutRef.current) return;
     playoutRef.current.pause();
     setIsPlaying(false);
     stopAnimationLoop();
     setCurrentTime(playoutRef.current.getCurrentTime());
   }, [stopAnimationLoop]);
-  const stop = (0, import_react25.useCallback)(() => {
+  const stop = (0, import_react18.useCallback)(() => {
     if (!playoutRef.current) return;
     playoutRef.current.stop();
     setIsPlaying(false);
@@ -4948,7 +3256,7 @@ var MediaElementPlaylistProvider = ({
     setCurrentTime(0);
     setActiveAnnotationId(null);
   }, [stopAnimationLoop, setActiveAnnotationId]);
-  const seekTo = (0, import_react25.useCallback)(
+  const seekTo = (0, import_react18.useCallback)(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
       currentTimeRef.current = clampedTime;
@@ -4959,7 +3267,7 @@ var MediaElementPlaylistProvider = ({
     },
     [duration]
   );
-  const setPlaybackRate = (0, import_react25.useCallback)((rate) => {
+  const setPlaybackRate = (0, import_react18.useCallback)((rate) => {
     const clampedRate = Math.max(0.5, Math.min(2, rate));
     setPlaybackRateState(clampedRate);
     if (playoutRef.current) {
@@ -4967,7 +3275,7 @@ var MediaElementPlaylistProvider = ({
     }
   }, []);
   const timeScaleHeight = timescale ? 30 : 0;
-  const animationValue = (0, import_react25.useMemo)(
+  const animationValue = (0, import_react18.useMemo)(
     () => ({
       isPlaying,
       currentTime,
@@ -4975,7 +3283,7 @@ var MediaElementPlaylistProvider = ({
     }),
     [isPlaying, currentTime]
   );
-  const stateValue = (0, import_react25.useMemo)(
+  const stateValue = (0, import_react18.useMemo)(
     () => ({
       continuousPlay,
       annotations,
@@ -4985,9 +3293,9 @@ var MediaElementPlaylistProvider = ({
     }),
     [continuousPlay, annotations, activeAnnotationId, playbackRate, isAutomaticScroll]
   );
-  const onAnnotationsChangeRef = (0, import_react25.useRef)(onAnnotationsChange);
+  const onAnnotationsChangeRef = (0, import_react18.useRef)(onAnnotationsChange);
   onAnnotationsChangeRef.current = onAnnotationsChange;
-  const setAnnotations = (0, import_react25.useCallback)(
+  const setAnnotations = (0, import_react18.useCallback)(
     (action) => {
       const updated = typeof action === "function" ? action(annotationsRef.current) : action;
       if (!onAnnotationsChangeRef.current) {
@@ -5002,7 +3310,7 @@ var MediaElementPlaylistProvider = ({
     },
     []
   );
-  const controlsValue = (0, import_react25.useMemo)(
+  const controlsValue = (0, import_react18.useMemo)(
     () => ({
       play,
       pause,
@@ -5030,7 +3338,7 @@ var MediaElementPlaylistProvider = ({
       setScrollContainer
     ]
   );
-  const dataValue = (0, import_react25.useMemo)(
+  const dataValue = (0, import_react18.useMemo)(
     () => ({
       duration,
       peaksDataArray,
@@ -5065,28 +3373,28 @@ var MediaElementPlaylistProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_styled_components2.ThemeProvider, { theme: mergedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MediaElementAnimationContext.Provider, { value: animationValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MediaElementStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MediaElementControlsContext.Provider, { value: controlsValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MediaElementDataContext.Provider, { value: dataValue, children }) }) }) }) });
 };
 var useMediaElementAnimation = () => {
-  const context = (0, import_react25.useContext)(MediaElementAnimationContext);
+  const context = (0, import_react18.useContext)(MediaElementAnimationContext);
   if (!context) {
     throw new Error("useMediaElementAnimation must be used within MediaElementPlaylistProvider");
   }
   return context;
 };
 var useMediaElementState = () => {
-  const context = (0, import_react25.useContext)(MediaElementStateContext);
+  const context = (0, import_react18.useContext)(MediaElementStateContext);
   if (!context) {
     throw new Error("useMediaElementState must be used within MediaElementPlaylistProvider");
   }
   return context;
 };
 var useMediaElementControls = () => {
-  const context = (0, import_react25.useContext)(MediaElementControlsContext);
+  const context = (0, import_react18.useContext)(MediaElementControlsContext);
   if (!context) {
     throw new Error("useMediaElementControls must be used within MediaElementPlaylistProvider");
   }
   return context;
 };
 var useMediaElementData = () => {
-  const context = (0, import_react25.useContext)(MediaElementDataContext);
+  const context = (0, import_react18.useContext)(MediaElementDataContext);
   if (!context) {
     throw new Error("useMediaElementData must be used within MediaElementPlaylistProvider");
   }
@@ -5094,7 +3402,7 @@ var useMediaElementData = () => {
 };
 
 // src/components/PlaybackControls.tsx
-var import_react26 = require("react");
+var import_react19 = require("react");
 var import_ui_components4 = require("@waveform-playlist/ui-components");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var PlayButton = ({ className }) => {
@@ -5230,7 +3538,7 @@ var ClearAllButton = ({
   className
 }) => {
   const { stop } = usePlaylistControls();
-  const handleClick = (0, import_react26.useCallback)(() => {
+  const handleClick = (0, import_react19.useCallback)(() => {
     stop();
     onClearAll();
   }, [stop, onClearAll]);
@@ -5258,7 +3566,7 @@ var ZoomOutButton = ({
 };
 
 // src/components/ContextualControls.tsx
-var import_react27 = require("react");
+var import_react20 = require("react");
 var import_ui_components6 = require("@waveform-playlist/ui-components");
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -5291,10 +3599,10 @@ var PositionDisplay = import_styled_components3.default.span`
 `;
 var AudioPosition = ({ className }) => {
   var _a;
-  const timeRef = (0, import_react27.useRef)(null);
+  const timeRef = (0, import_react20.useRef)(null);
   const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { timeFormat: format } = usePlaylistData();
-  (0, import_react27.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const id = "audio-position";
     if (isPlaying) {
       registerFrameCallback(id, ({ time }) => {
@@ -5305,7 +3613,7 @@ var AudioPosition = ({ className }) => {
     }
     return () => unregisterFrameCallback(id);
   }, [isPlaying, format, registerFrameCallback, unregisterFrameCallback]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     var _a2;
     if (!isPlaying && timeRef.current) {
       timeRef.current.textContent = (0, import_ui_components6.formatTime)((_a2 = currentTimeRef.current) != null ? _a2 : 0, format);
@@ -5340,11 +3648,11 @@ var AutomaticScrollCheckbox = ({ className }) => {
 };
 
 // src/AnnotationIntegrationContext.tsx
-var import_react28 = require("react");
-var AnnotationIntegrationContext = (0, import_react28.createContext)(null);
+var import_react21 = require("react");
+var AnnotationIntegrationContext = (0, import_react21.createContext)(null);
 var AnnotationIntegrationProvider = AnnotationIntegrationContext.Provider;
 function useAnnotationIntegration() {
-  const context = (0, import_react28.useContext)(AnnotationIntegrationContext);
+  const context = (0, import_react21.useContext)(AnnotationIntegrationContext);
   if (!context) {
     throw new Error(
       "useAnnotationIntegration must be used within <AnnotationProvider>. Install @waveform-playlist/annotations and wrap your app with <AnnotationProvider>. See: https://waveform-playlist.naomiaro.com/docs/guides/annotations"
@@ -5382,73 +3690,25 @@ var DownloadAnnotationsButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Base, { annotations, filename, className });
 };
 
-// src/components/ExportControls.tsx
-var import_ui_components7 = require("@waveform-playlist/ui-components");
-var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsx)(
-    import_ui_components7.BaseControlButton,
-    {
-      onClick: handleExport,
-      disabled: isExporting || tracks.length === 0,
-      className,
-      children: buttonLabel
-    }
-  );
-};
-
 // src/contexts/ClipInteractionContext.tsx
-var import_react29 = require("react");
-var ClipInteractionContext = (0, import_react29.createContext)(false);
+var import_react22 = require("react");
+var ClipInteractionContext = (0, import_react22.createContext)(false);
 var ClipInteractionContextProvider = ClipInteractionContext.Provider;
 function useClipInteractionEnabled() {
-  return (0, import_react29.useContext)(ClipInteractionContext);
+  return (0, import_react22.useContext)(ClipInteractionContext);
 }
 
 // src/components/PlaylistVisualization.tsx
-var import_react33 = require("react");
+var import_react26 = require("react");
 var import_react_dom = require("react-dom");
 var import_styled_components6 = __toESM(require("styled-components"));
-var import_playout7 = require("@waveform-playlist/playout");
-var import_ui_components9 = require("@waveform-playlist/ui-components");
-var import_core8 = require("@waveform-playlist/core");
+var import_ui_components8 = require("@waveform-playlist/ui-components");
+var import_core4 = require("@waveform-playlist/core");
 
 // src/components/AnimatedPlayhead.tsx
-var import_react30 = require("react");
+var import_react23 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var PlayheadLine = import_styled_components4.default.div.attrs((props) => ({
   style: {
     width: `${props.$width}px`,
@@ -5464,7 +3724,7 @@ var PlayheadLine = import_styled_components4.default.div.attrs((props) => ({
   will-change: transform;
 `;
 var AnimatedPlayhead = ({ color = "#ff0000" }) => {
-  const playheadRef = (0, import_react30.useRef)(null);
+  const playheadRef = (0, import_react23.useRef)(null);
   const {
     isPlaying,
     currentTimeRef,
@@ -5473,7 +3733,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
     unregisterFrameCallback
   } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = usePlaylistData();
-  (0, import_react30.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const id = "playhead";
     if (isPlaying) {
       registerFrameCallback(id, ({ visualTime, sampleRate: sr, samplesPerPixel: spp }) => {
@@ -5485,7 +3745,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
     }
     return () => unregisterFrameCallback(id);
   }, [isPlaying, registerFrameCallback, unregisterFrameCallback]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     var _a, _b;
     if (!isPlaying && playheadRef.current) {
       const time = (_b = (_a = visualTimeRef.current) != null ? _a : currentTimeRef.current) != null ? _b : 0;
@@ -5493,15 +3753,15 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
       playheadRef.current.style.transform = `translate3d(${position}px, 0, 0)`;
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlayheadLine, { ref: playheadRef, $color: color, $width: progressBarWidth, "data-playhead": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlayheadLine, { ref: playheadRef, $color: color, $width: progressBarWidth, "data-playhead": true });
 };
 
 // src/components/ChannelWithProgress.tsx
-var import_react31 = require("react");
+var import_react24 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
-var import_core7 = require("@waveform-playlist/core");
-var import_ui_components8 = require("@waveform-playlist/ui-components");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_core3 = require("@waveform-playlist/core");
+var import_ui_components7 = require("@waveform-playlist/ui-components");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ChannelWrapper = import_styled_components5.default.div`
   position: relative;
 `;
@@ -5555,10 +3815,10 @@ var ChannelWithProgress = (_a) => {
     "clipSampleRate",
     "clipOffsetSeconds"
   ]);
-  const progressRef = (0, import_react31.useRef)(null);
-  const callbackId = (0, import_react31.useId)();
-  const theme = (0, import_ui_components8.useTheme)();
-  const { waveHeight } = (0, import_ui_components8.usePlaylistInfo)();
+  const progressRef = (0, import_react24.useRef)(null);
+  const callbackId = (0, import_react24.useId)();
+  const theme = (0, import_ui_components7.useTheme)();
+  const { waveHeight } = (0, import_ui_components7.usePlaylistInfo)();
   const {
     isPlaying,
     currentTimeRef,
@@ -5568,12 +3828,12 @@ var ChannelWithProgress = (_a) => {
   } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate } = usePlaylistData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
-  const clipPixelWidth = (0, import_core7.clipPixelWidth)(
+  const clipPixelWidth = (0, import_core3.clipPixelWidth)(
     clipStartSample,
     clipDurationSamples,
     samplesPerPixel
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (isPlaying) {
       registerFrameCallback(callbackId, ({ visualTime, sampleRate: sr }) => {
         if (progressRef.current) {
@@ -5601,7 +3861,7 @@ var ChannelWithProgress = (_a) => {
     registerFrameCallback,
     unregisterFrameCallback
   ]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     var _a2, _b2;
     if (!isPlaying && progressRef.current) {
       const currentTime = (_b2 = (_a2 = visualTimeRef.current) != null ? _a2 : currentTimeRef.current) != null ? _b2 : 0;
@@ -5629,14 +3889,14 @@ var ChannelWithProgress = (_a) => {
   const isSpectrogramMode = smartChannelProps.renderMode === "spectrogram" || smartChannelProps.renderMode === "both";
   const isPianoRollMode = smartChannelProps.renderMode === "piano-roll";
   const isBothMode = smartChannelProps.renderMode === "both";
-  const backgroundCss = isSpectrogramMode ? "#000" : isPianoRollMode ? (theme == null ? void 0 : theme.pianoRollBackgroundColor) || "#1a1a2e" : (0, import_ui_components8.waveformColorToCss)(backgroundColor);
+  const backgroundCss = isSpectrogramMode ? "#000" : isPianoRollMode ? (theme == null ? void 0 : theme.pianoRollBackgroundColor) || "#1a1a2e" : (0, import_ui_components7.waveformColorToCss)(backgroundColor);
   const halfHeight = Math.floor(waveHeight / 2);
   const effectiveHeight = waveHeight;
   const effectiveTop = isBothMode ? smartChannelProps.index * waveHeight : smartChannelProps.index * waveHeight;
-  const waveformBackgroundCss = (0, import_ui_components8.waveformColorToCss)(backgroundColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ChannelWrapper, { children: [
-    isBothMode ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const waveformBackgroundCss = (0, import_ui_components7.waveformColorToCss)(backgroundColor);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ChannelWrapper, { children: [
+    isBothMode ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Background,
         {
           $color: "#000",
@@ -5645,7 +3905,7 @@ var ChannelWithProgress = (_a) => {
           $width: smartChannelProps.length
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Background,
         {
           $color: waveformBackgroundCss,
@@ -5654,7 +3914,7 @@ var ChannelWithProgress = (_a) => {
           $width: smartChannelProps.length
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Background,
       {
         $color: backgroundCss,
@@ -5663,7 +3923,7 @@ var ChannelWithProgress = (_a) => {
         $width: smartChannelProps.length
       }
     ),
-    !isPianoRollMode && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    !isPianoRollMode && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ProgressOverlay,
       {
         ref: progressRef,
@@ -5673,8 +3933,8 @@ var ChannelWithProgress = (_a) => {
         $width: clipPixelWidth
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChannelContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_ui_components8.SmartChannel,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChannelContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_ui_components7.SmartChannel,
       __spreadProps(__spreadValues({}, smartChannelProps), {
         transparentBackground: true,
         midiNotes,
@@ -5686,11 +3946,11 @@ var ChannelWithProgress = (_a) => {
 };
 
 // src/SpectrogramIntegrationContext.tsx
-var import_react32 = require("react");
-var SpectrogramIntegrationContext = (0, import_react32.createContext)(null);
+var import_react25 = require("react");
+var SpectrogramIntegrationContext = (0, import_react25.createContext)(null);
 var SpectrogramIntegrationProvider = SpectrogramIntegrationContext.Provider;
 function useSpectrogramIntegration() {
-  const context = (0, import_react32.useContext)(SpectrogramIntegrationContext);
+  const context = (0, import_react25.useContext)(SpectrogramIntegrationContext);
   if (!context) {
     throw new Error(
       "useSpectrogramIntegration must be used within <SpectrogramProvider>. Install @waveform-playlist/spectrogram and wrap your app with <SpectrogramProvider>."
@@ -5700,7 +3960,7 @@ function useSpectrogramIntegration() {
 }
 
 // src/components/PlaylistVisualization.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_EMPTY_TRACK_DURATION = 60;
 var ControlSlot = import_styled_components6.default.div.attrs((props) => ({
   style: { height: `${props.$height}px` }
@@ -5719,7 +3979,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({
@@ -5733,7 +3994,7 @@ var CustomPlayhead = ({ renderPlayhead, color, samplesPerPixel, sampleRate }) =>
     samplesPerPixel,
     sampleRate,
     controlsOffset: 0,
-    getAudioContextTime: () => (0, import_playout7.getGlobalAudioContext)().currentTime,
+    getAudioContextTime,
     getPlaybackTime
   });
 };
@@ -5757,8 +4018,8 @@ var PlaylistVisualization = ({
   recordingState
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-  const theme = (0, import_ui_components9.useTheme)();
-  const { isPlaying, getLookAhead } = usePlaybackAnimation();
+  const theme = (0, import_ui_components8.useTheme)();
+  const { isPlaying, getLookAhead, getOutputLatency } = usePlaybackAnimation();
   const {
     selectionStart,
     selectionEnd,
@@ -5773,7 +4034,7 @@ var PlaylistVisualization = ({
     isLoopEnabled,
     indefinitePlayback
   } = usePlaylistState();
-  const annotationIntegration = (0, import_react33.useContext)(AnnotationIntegrationContext);
+  const annotationIntegration = (0, import_react26.useContext)(AnnotationIntegrationContext);
   const {
     setAnnotations: _setAnnotations,
     setActiveAnnotationId,
@@ -5803,8 +4064,8 @@ var PlaylistVisualization = ({
     isReady,
     mono
   } = usePlaylistData();
-  const spectrogram = (0, import_react33.useContext)(SpectrogramIntegrationContext);
-  const perTrackSpectrogramHelpers = (0, import_react33.useMemo)(() => {
+  const spectrogram = (0, import_react26.useContext)(SpectrogramIntegrationContext);
+  const perTrackSpectrogramHelpers = (0, import_react26.useMemo)(() => {
     if (!spectrogram)
       return /* @__PURE__ */ new Map();
     const helpers = /* @__PURE__ */ new Map();
@@ -5823,11 +4084,11 @@ var PlaylistVisualization = ({
     });
     return helpers;
   }, [tracks, spectrogram]);
-  const [settingsModalTrackId, setSettingsModalTrackId] = (0, import_react33.useState)(null);
-  const [isSelecting, setIsSelecting] = (0, import_react33.useState)(false);
-  const mouseDownTimeRef = (0, import_react33.useRef)(0);
-  const scrollContainerRef = (0, import_react33.useRef)(null);
-  const handleScrollContainerRef = (0, import_react33.useCallback)(
+  const [settingsModalTrackId, setSettingsModalTrackId] = (0, import_react26.useState)(null);
+  const [isSelecting, setIsSelecting] = (0, import_react26.useState)(false);
+  const mouseDownTimeRef = (0, import_react26.useRef)(0);
+  const scrollContainerRef = (0, import_react26.useRef)(null);
+  const handleScrollContainerRef = (0, import_react26.useCallback)(
     (element) => {
       scrollContainerRef.current = element;
       setScrollContainer(element);
@@ -5865,7 +4126,7 @@ var PlaylistVisualization = ({
       );
     }
   });
-  const selectTrack = (0, import_react33.useCallback)(
+  const selectTrack = (0, import_react26.useCallback)(
     (trackIndex) => {
       if (trackIndex >= 0 && trackIndex < tracks.length) {
         const track = tracks[trackIndex];
@@ -5935,7 +4196,7 @@ var PlaylistVisualization = ({
   };
   const hasClips = tracks.some((track) => track.clips.length > 0);
   if (hasClips && peaksDataArray.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, children: "Loading waveform..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children: "Loading waveform..." });
   }
   const trackControlsSlots = controls.show ? peaksDataArray.map((trackClipPeaks, trackIndex) => {
     var _a2, _b2, _c2;
@@ -5951,11 +4212,11 @@ var PlaylistVisualization = ({
     const hasMidiNotes = track.clips.some((c) => c.midiNotes && c.midiNotes.length > 0);
     const effectiveRenderMode = (_c2 = (_b2 = (_a2 = spectrogram == null ? void 0 : spectrogram.trackSpectrogramOverrides.get(track.id)) == null ? void 0 : _a2.renderMode) != null ? _b2 : track.renderMode) != null ? _c2 : hasMidiNotes ? "piano-roll" : "waveform";
     const maxChannels = getTrackChannelCount(trackClipPeaks, recordingState, track.id, mono);
-    const slotHeight = waveHeight * maxChannels + (showClipHeaders ? import_ui_components9.CLIP_HEADER_HEIGHT : 0);
-    const trackControlContent = renderTrackControls ? renderTrackControls(trackIndex) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_ui_components9.Controls, { onClick: () => selectTrack(trackIndex), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_ui_components9.Header, { style: { justifyContent: "center", position: "relative" }, children: [
-        onRemoveTrack && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_ui_components9.CloseButton,
+    const slotHeight = waveHeight * maxChannels + (showClipHeaders ? import_ui_components8.CLIP_HEADER_HEIGHT : 0);
+    const trackControlContent = renderTrackControls ? renderTrackControls(trackIndex) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ui_components8.Controls, { onClick: () => selectTrack(trackIndex), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ui_components8.Header, { style: { justifyContent: "center", position: "relative" }, children: [
+        onRemoveTrack && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_ui_components8.CloseButton,
           {
             onClick: (e) => {
               e.stopPropagation();
@@ -5963,7 +4224,7 @@ var PlaylistVisualization = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: {
@@ -5976,8 +4237,8 @@ var PlaylistVisualization = ({
             children: trackState.name || `Track ${trackIndex + 1}`
           }
         ),
-        (spectrogram == null ? void 0 : spectrogram.renderMenuItems) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { position: "absolute", right: 0, top: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_ui_components9.TrackMenu,
+        (spectrogram == null ? void 0 : spectrogram.renderMenuItems) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { position: "absolute", right: 0, top: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_ui_components8.TrackMenu,
           {
             items: (onClose) => spectrogram.renderMenuItems({
               renderMode: effectiveRenderMode,
@@ -5988,17 +4249,17 @@ var PlaylistVisualization = ({
           }
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_ui_components9.ButtonGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_ui_components9.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ui_components8.ButtonGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_ui_components8.Button,
           {
             $variant: trackState.muted ? "danger" : "outline",
             onClick: () => setTrackMute(trackIndex, !trackState.muted),
             children: "Mute"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_ui_components9.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_ui_components8.Button,
           {
             $variant: trackState.soloed ? "info" : "outline",
             onClick: () => setTrackSolo(trackIndex, !trackState.soloed),
@@ -6006,10 +4267,10 @@ var PlaylistVisualization = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_ui_components9.SliderWrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ui_components9.VolumeDownIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_ui_components9.Slider,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ui_components8.SliderWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_ui_components8.VolumeDownIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_ui_components8.Slider,
           {
             min: "0",
             max: "1",
@@ -6018,12 +4279,12 @@ var PlaylistVisualization = ({
             onChange: (e) => setTrackVolume(trackIndex, parseFloat(e.target.value))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ui_components9.VolumeUpIcon, {})
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_ui_components8.VolumeUpIcon, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_ui_components9.SliderWrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "L" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_ui_components9.Slider,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ui_components8.SliderWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "L" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_ui_components8.Slider,
           {
             min: "-1",
             max: "1",
@@ -6032,10 +4293,10 @@ var PlaylistVisualization = ({
             onChange: (e) => setTrackPan(trackIndex, parseFloat(e.target.value))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "R" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "R" })
       ] })
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ControlSlot,
       {
         $height: slotHeight,
@@ -6045,9 +4306,9 @@ var PlaylistVisualization = ({
       track.id
     );
   }) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_ui_components9.DevicePixelRatioProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_ui_components9.PlaylistInfoContext.Provider,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ui_components8.DevicePixelRatioProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_ui_components8.PlaylistInfoContext.Provider,
       {
         value: {
           samplesPerPixel,
@@ -6060,11 +4321,11 @@ var PlaylistVisualization = ({
           barWidth,
           barGap
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_ui_components9.Playlist,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_ui_components8.Playlist,
           {
             theme,
-            backgroundColor: theme.playlistBackgroundColor || (0, import_ui_components9.waveformColorToCss)(theme.waveOutlineColor),
+            backgroundColor: theme.playlistBackgroundColor || (0, import_ui_components8.waveformColorToCss)(theme.waveOutlineColor),
             timescaleBackgroundColor: theme.timescaleBackgroundColor,
             timescaleWidth: tracksFullWidth,
             tracksWidth: tracksFullWidth,
@@ -6077,10 +4338,10 @@ var PlaylistVisualization = ({
             "data-playlist-state": isReady ? "ready" : "loading",
             trackControlsSlots,
             timescaleGapHeight: timeScaleHeight > 0 ? timeScaleHeight + 1 : 0,
-            timescale: timeScaleHeight > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ui_components9.SmartScale, { renderTick }),
-              isLoopEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_ui_components9.TimescaleLoopRegion,
+            timescale: timeScaleHeight > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_ui_components8.SmartScale, { renderTick }),
+              isLoopEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                import_ui_components8.TimescaleLoopRegion,
                 {
                   startPosition: Math.min(loopStart, loopEnd) * sampleRate / samplesPerPixel,
                   endPosition: Math.max(loopStart, loopEnd) * sampleRate / samplesPerPixel,
@@ -6096,7 +4357,7 @@ var PlaylistVisualization = ({
                 }
               )
             ] }) : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
               peaksDataArray.map((trackClipPeaks, trackIndex) => {
                 var _a2, _b2, _c2, _d2;
                 const track = tracks[trackIndex];
@@ -6109,11 +4370,11 @@ var PlaylistVisualization = ({
                   track.id,
                   mono
                 );
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                  import_ui_components9.Track,
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  import_ui_components8.Track,
                   {
                     numChannels: maxChannels,
-                    backgroundColor: effectiveRenderMode === "piano-roll" ? theme.pianoRollBackgroundColor || "#1a1a2e" : (0, import_ui_components9.waveformColorToCss)(theme.waveOutlineColor),
+                    backgroundColor: effectiveRenderMode === "piano-roll" ? theme.pianoRollBackgroundColor || "#1a1a2e" : (0, import_ui_components8.waveformColorToCss)(theme.waveOutlineColor),
                     offset: 0,
                     width: tracksFullWidth,
                     hasClipHeaders: showClipHeaders,
@@ -6125,8 +4386,8 @@ 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__ */ (0, import_jsx_runtime10.jsx)(
-                          import_ui_components9.SpectrogramLabels,
+                        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_ui_components8.SpectrogramLabels,
                           {
                             waveHeight,
                             numChannels: maxChannels,
@@ -6143,8 +4404,8 @@ var PlaylistVisualization = ({
                       trackClipPeaks.map((clip, clipIndex) => {
                         const peaksData = clip.peaks;
                         const width = peaksData.length;
-                        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          import_ui_components9.Clip,
+                        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_ui_components8.Clip,
                           {
                             clipId: clip.clipId,
                             trackIndex,
@@ -6173,7 +4434,7 @@ var PlaylistVisualization = ({
                               selectTrack(trackIndex);
                             },
                             children: peaksData.data.map((channelPeaks, channelIndex) => {
-                              return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                                 ChannelWithProgress,
                                 {
                                   index: channelIndex,
@@ -6200,10 +4461,9 @@ var PlaylistVisualization = ({
                         );
                       }),
                       (recordingState == null ? void 0 : recordingState.isRecording) && recordingState.trackId === track.id && ((_d2 = recordingState.peaks[0]) == null ? void 0 : _d2.length) > 0 && (() => {
-                        const audioCtx = (0, import_playout7.getGlobalAudioContext)();
-                        const outputLatency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
+                        const outputLatency = getOutputLatency();
                         const lookAhead = getLookAhead();
-                        const latencyOffsetSamples = (0, import_core8.audibleLatencySamples)(
+                        const latencyOffsetSamples = (0, import_core4.audibleLatencySamples)(
                           outputLatency,
                           lookAhead,
                           sampleRate
@@ -6217,8 +4477,8 @@ 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__ */ (0, import_jsx_runtime10.jsx)(
-                          import_ui_components9.Clip,
+                        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_ui_components8.Clip,
                           {
                             clipId: "recording-preview",
                             trackIndex,
@@ -6231,7 +4491,7 @@ var PlaylistVisualization = ({
                             disableHeaderDrag: true,
                             isSelected: track.id === selectedTrackId,
                             trackId: track.id,
-                            children: previewChannels.map((channelPeaks, chIdx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            children: previewChannels.map((channelPeaks, chIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                               ChannelWithProgress,
                               {
                                 index: chIdx,
@@ -6253,11 +4513,11 @@ var PlaylistVisualization = ({
                   track.id
                 );
               }),
-              annotations.length > 0 && annotationIntegration && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(annotationIntegration.AnnotationBoxesWrapper, { height: 30, width: tracksFullWidth, children: annotations.map((annotation, index) => {
+              annotations.length > 0 && annotationIntegration && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   annotationIntegration.AnnotationBox,
                   {
                     annotationId: annotation.id,
@@ -6273,15 +4533,15 @@ var PlaylistVisualization = ({
                   annotation.id
                 );
               }) }),
-              selectionStart !== selectionEnd && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_ui_components9.Selection,
+              selectionStart !== selectionEnd && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                import_ui_components8.Selection,
                 {
                   startPosition: Math.min(selectionStart, selectionEnd) * sampleRate / samplesPerPixel,
                   endPosition: Math.max(selectionStart, selectionEnd) * sampleRate / samplesPerPixel,
                   color: theme.selectionColor
                 }
               ),
-              (isPlaying || selectionStart === selectionEnd) && (renderPlayhead ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              (isPlaying || selectionStart === selectionEnd) && (renderPlayhead ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 CustomPlayhead,
                 {
                   renderPlayhead,
@@ -6289,14 +4549,14 @@ var PlaylistVisualization = ({
                   samplesPerPixel,
                   sampleRate
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AnimatedPlayhead, { color: theme.playheadColor }))
+              ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AnimatedPlayhead, { color: theme.playheadColor }))
             ] })
           }
         )
       }
     ),
     (spectrogram == null ? void 0 : spectrogram.SettingsModal) && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         spectrogram.SettingsModal,
         {
           open: settingsModalTrackId !== null,
@@ -6316,8 +4576,8 @@ var PlaylistVisualization = ({
 };
 
 // src/components/PlaylistAnnotationList.tsx
-var import_react34 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var PlaylistAnnotationList = ({
   height,
   renderAnnotationItem,
@@ -6331,7 +4591,7 @@ var PlaylistAnnotationList = ({
   const integration = useAnnotationIntegration();
   const { setAnnotations } = usePlaylistControls();
   const resolvedConfig = annotationListConfig != null ? annotationListConfig : { linkEndpoints, continuousPlay };
-  const handleAnnotationUpdate = (0, import_react34.useCallback)(
+  const handleAnnotationUpdate = (0, import_react27.useCallback)(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6339,7 +4599,7 @@ var PlaylistAnnotationList = ({
     [setAnnotations, onAnnotationUpdate]
   );
   const { AnnotationText } = integration;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     AnnotationText,
     {
       annotations,
@@ -6358,7 +4618,7 @@ var PlaylistAnnotationList = ({
 };
 
 // src/components/Waveform.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Waveform = ({
   renderTrackControls,
   renderTick,
@@ -6382,8 +4642,8 @@ var Waveform = ({
   const { annotations } = usePlaylistState();
   const clipInteractionEnabled = useClipInteractionEnabled();
   const effectiveInteractiveClips = interactiveClips || clipInteractionEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       PlaylistVisualization,
       {
         renderTrackControls,
@@ -6400,7 +4660,7 @@ var Waveform = ({
         recordingState
       }
     ),
-    annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       PlaylistAnnotationList,
       {
         height: annotationTextHeight,
@@ -6415,10 +4675,10 @@ var Waveform = ({
 };
 
 // src/components/MediaElementPlaylist.tsx
-var import_react37 = require("react");
-var import_react38 = require("@dnd-kit/react");
+var import_react30 = require("react");
+var import_react31 = require("@dnd-kit/react");
 var import_modifiers = require("@dnd-kit/abstract/modifiers");
-var import_ui_components11 = require("@waveform-playlist/ui-components");
+var import_ui_components10 = require("@waveform-playlist/ui-components");
 
 // src/plugins/noDropAnimationPlugins.ts
 var import_dom2 = require("@dnd-kit/dom");
@@ -6440,9 +4700,9 @@ var noDropAnimationPlugins = (defaults) => {
 };
 
 // src/components/AnimatedMediaElementPlayhead.tsx
-var import_react35 = require("react");
+var import_react28 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var PlayheadLine2 = import_styled_components7.default.div`
   position: absolute;
   top: 0;
@@ -6457,11 +4717,11 @@ var PlayheadLine2 = import_styled_components7.default.div`
 var AnimatedMediaElementPlayhead = ({
   color = "#ff0000"
 }) => {
-  const playheadRef = (0, import_react35.useRef)(null);
-  const animationFrameRef = (0, import_react35.useRef)(null);
+  const playheadRef = (0, import_react28.useRef)(null);
+  const animationFrameRef = (0, import_react28.useRef)(null);
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = useMediaElementData();
-  (0, import_react35.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const updatePosition = () => {
       var _a;
       if (playheadRef.current) {
@@ -6485,7 +4745,7 @@ var AnimatedMediaElementPlayhead = ({
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, currentTimeRef]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     var _a;
     if (!isPlaying && playheadRef.current) {
       const time = (_a = currentTimeRef.current) != null ? _a : 0;
@@ -6493,14 +4753,14 @@ var AnimatedMediaElementPlayhead = ({
       playheadRef.current.style.transform = `translate3d(${position}px, 0, 0)`;
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlayheadLine2, { ref: playheadRef, $color: color, $width: progressBarWidth, "data-playhead": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlayheadLine2, { ref: playheadRef, $color: color, $width: progressBarWidth, "data-playhead": true });
 };
 
 // src/components/ChannelWithMediaElementProgress.tsx
-var import_react36 = require("react");
+var import_react29 = require("react");
 var import_styled_components8 = __toESM(require("styled-components"));
-var import_ui_components10 = require("@waveform-playlist/ui-components");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_ui_components9 = require("@waveform-playlist/ui-components");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var ChannelWrapper2 = import_styled_components8.default.div`
   position: relative;
 `;
@@ -6537,14 +4797,14 @@ var ChannelWithMediaElementProgress = (_a) => {
     "clipStartSample",
     "clipDurationSamples"
   ]);
-  const progressRef = (0, import_react36.useRef)(null);
-  const animationFrameRef = (0, import_react36.useRef)(null);
-  const theme = (0, import_ui_components10.useTheme)();
-  const { waveHeight } = (0, import_ui_components10.usePlaylistInfo)();
+  const progressRef = (0, import_react29.useRef)(null);
+  const animationFrameRef = (0, import_react29.useRef)(null);
+  const theme = (0, import_ui_components9.useTheme)();
+  const { waveHeight } = (0, import_ui_components9.usePlaylistInfo)();
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate } = useMediaElementData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
-  (0, import_react36.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const updateProgress = () => {
       var _a2;
       if (progressRef.current) {
@@ -6586,7 +4846,7 @@ var ChannelWithMediaElementProgress = (_a) => {
     smartChannelProps.length,
     currentTimeRef
   ]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     var _a2;
     if (!isPlaying && progressRef.current) {
       const currentTime = (_a2 = currentTimeRef.current) != null ? _a2 : 0;
@@ -6611,9 +4871,9 @@ var ChannelWithMediaElementProgress = (_a) => {
   } else {
     backgroundColor = (theme == null ? void 0 : theme.selectedWaveOutlineColor) || (theme == null ? void 0 : theme.waveOutlineColor) || "grey";
   }
-  const backgroundCss = (0, import_ui_components10.waveformColorToCss)(backgroundColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ChannelWrapper2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const backgroundCss = (0, import_ui_components9.waveformColorToCss)(backgroundColor);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ChannelWrapper2, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Background2,
       {
         $color: backgroundCss,
@@ -6622,7 +4882,7 @@ var ChannelWithMediaElementProgress = (_a) => {
         $width: smartChannelProps.length
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ProgressOverlay2,
       {
         ref: progressRef,
@@ -6631,12 +4891,12 @@ var ChannelWithMediaElementProgress = (_a) => {
         $top: smartChannelProps.index * waveHeight
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChannelContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui_components10.SmartChannel, __spreadProps(__spreadValues({}, smartChannelProps), { isSelected: true, transparentBackground: true })) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChannelContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui_components9.SmartChannel, __spreadProps(__spreadValues({}, smartChannelProps), { isSelected: true, transparentBackground: true })) })
   ] });
 };
 
 // src/components/MediaElementPlaylist.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ZERO_REF = { current: 0 };
 var CustomMediaElementPlayhead = ({ renderPlayhead, color, samplesPerPixel, sampleRate }) => {
   var _a;
@@ -6662,10 +4922,10 @@ var MediaElementPlaylist = ({
   showFades = false,
   className
 }) => {
-  const theme = (0, import_ui_components11.useTheme)();
+  const theme = (0, import_ui_components10.useTheme)();
   const { isPlaying } = useMediaElementAnimation();
   const { annotations, activeAnnotationId } = useMediaElementState();
-  const annotationIntegration = (0, import_react37.useContext)(AnnotationIntegrationContext);
+  const annotationIntegration = (0, import_react30.useContext)(AnnotationIntegrationContext);
   const { play, seekTo, setActiveAnnotationId, setAnnotations, setScrollContainer } = useMediaElementControls();
   const {
     duration,
@@ -6681,11 +4941,11 @@ var MediaElementPlaylist = ({
     fadeIn,
     fadeOut
   } = useMediaElementData();
-  const [selectionStart, setSelectionStart] = (0, import_react37.useState)(0);
-  const [selectionEnd, setSelectionEnd] = (0, import_react37.useState)(0);
-  const [isSelecting, setIsSelecting] = (0, import_react37.useState)(false);
-  const scrollContainerRef = (0, import_react37.useRef)(null);
-  const handleScrollContainerRef = (0, import_react37.useCallback)(
+  const [selectionStart, setSelectionStart] = (0, import_react30.useState)(0);
+  const [selectionEnd, setSelectionEnd] = (0, import_react30.useState)(0);
+  const [isSelecting, setIsSelecting] = (0, import_react30.useState)(false);
+  const scrollContainerRef = (0, import_react30.useRef)(null);
+  const handleScrollContainerRef = (0, import_react30.useCallback)(
     (el) => {
       scrollContainerRef.current = el;
       setScrollContainer(el);
@@ -6693,7 +4953,7 @@ var MediaElementPlaylist = ({
     [setScrollContainer]
   );
   const tracksFullWidth = Math.floor(duration * sampleRate / samplesPerPixel);
-  const handleAnnotationClick = (0, import_react37.useCallback)(
+  const handleAnnotationClick = (0, import_react30.useCallback)(
     (annotation) => __async(null, null, function* () {
       setActiveAnnotationId(annotation.id);
       try {
@@ -6708,7 +4968,7 @@ var MediaElementPlaylist = ({
     }),
     [setActiveAnnotationId, play]
   );
-  const handleAnnotationUpdate = (0, import_react37.useCallback)(
+  const handleAnnotationUpdate = (0, import_react30.useCallback)(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6722,8 +4982,8 @@ var MediaElementPlaylist = ({
     duration,
     linkEndpoints: linkEndpointsProp
   });
-  const mouseDownTimeRef = (0, import_react37.useRef)(0);
-  const handleMouseDown = (0, import_react37.useCallback)(
+  const mouseDownTimeRef = (0, import_react30.useRef)(0);
+  const handleMouseDown = (0, import_react30.useCallback)(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
@@ -6735,7 +4995,7 @@ var MediaElementPlaylist = ({
     },
     [samplesPerPixel, sampleRate]
   );
-  const handleMouseMove = (0, import_react37.useCallback)(
+  const handleMouseMove = (0, import_react30.useCallback)(
     (e) => {
       if (!isSelecting) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -6745,7 +5005,7 @@ var MediaElementPlaylist = ({
     },
     [isSelecting, samplesPerPixel, sampleRate]
   );
-  const handleMouseUp = (0, import_react37.useCallback)(
+  const handleMouseUp = (0, import_react30.useCallback)(
     (e) => {
       if (!isSelecting) return;
       setIsSelecting(false);
@@ -6775,10 +5035,10 @@ var MediaElementPlaylist = ({
     [isSelecting, selectionStart, samplesPerPixel, sampleRate, seekTo, isPlaying, playoutRef, play]
   );
   if (peaksDataArray.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className, children: "Loading waveform..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className, children: "Loading waveform..." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui_components11.DevicePixelRatioProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_ui_components11.PlaylistInfoContext.Provider,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui_components10.DevicePixelRatioProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_ui_components10.PlaylistInfoContext.Provider,
     {
       value: {
         samplesPerPixel,
@@ -6791,11 +5051,11 @@ var MediaElementPlaylist = ({
         barWidth,
         barGap
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_ui_components11.Playlist,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_ui_components10.Playlist,
         {
           theme,
-          backgroundColor: (0, import_ui_components11.waveformColorToCss)(theme.waveOutlineColor),
+          backgroundColor: (0, import_ui_components10.waveformColorToCss)(theme.waveOutlineColor),
           timescaleBackgroundColor: theme.timescaleBackgroundColor,
           timescaleWidth: tracksFullWidth,
           tracksWidth: tracksFullWidth,
@@ -6805,15 +5065,15 @@ var MediaElementPlaylist = ({
           onTracksMouseUp: handleMouseUp,
           scrollContainerRef: handleScrollContainerRef,
           isSelecting,
-          timescale: timeScaleHeight > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui_components11.SmartScale, {}) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          timescale: timeScaleHeight > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui_components10.SmartScale, {}) : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
             peaksDataArray.map((trackClipPeaks, trackIndex) => {
               const maxChannels = trackClipPeaks.length > 0 ? Math.max(...trackClipPeaks.map((clip) => clip.peaks.data.length)) : 1;
-              return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                import_ui_components11.Track,
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_ui_components10.Track,
                 {
                   numChannels: maxChannels,
-                  backgroundColor: (0, import_ui_components11.waveformColorToCss)(theme.waveOutlineColor),
+                  backgroundColor: (0, import_ui_components10.waveformColorToCss)(theme.waveOutlineColor),
                   offset: 0,
                   width: tracksFullWidth,
                   hasClipHeaders: false,
@@ -6822,8 +5082,8 @@ var MediaElementPlaylist = ({
                   children: trackClipPeaks.map((clip, clipIndex) => {
                     const peaksData = clip.peaks;
                     const width = peaksData.length;
-                    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                      import_ui_components11.Clip,
+                    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                      import_ui_components10.Clip,
                       {
                         clipId: clip.clipId,
                         trackIndex,
@@ -6837,7 +5097,7 @@ var MediaElementPlaylist = ({
                         isSelected: true,
                         trackId: `media-element-track-${trackIndex}`,
                         children: [
-                          peaksData.data.map((channelPeaks, channelIndex) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                          peaksData.data.map((channelPeaks, channelIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                             ChannelWithMediaElementProgress,
                             {
                               index: channelIndex,
@@ -6849,8 +5109,8 @@ var MediaElementPlaylist = ({
                             },
                             `${trackIndex}-${clipIndex}-${channelIndex}`
                           )),
-                          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                            import_ui_components11.FadeOverlay,
+                          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            import_ui_components10.FadeOverlay,
                             {
                               left: 0,
                               width: Math.floor(fadeIn.duration * sampleRate / samplesPerPixel),
@@ -6858,8 +5118,8 @@ var MediaElementPlaylist = ({
                               curveType: fadeIn.type
                             }
                           ),
-                          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                            import_ui_components11.FadeOverlay,
+                          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            import_ui_components10.FadeOverlay,
                             {
                               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
                               width: Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -6876,19 +5136,19 @@ var MediaElementPlaylist = ({
                 trackIndex
               );
             }),
-            annotations.length > 0 && annotationIntegration && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_react38.DragDropProvider,
+            annotations.length > 0 && annotationIntegration && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_react31.DragDropProvider,
               {
                 onDragStart,
                 onDragMove,
                 onDragEnd,
                 modifiers: editable ? [import_modifiers.RestrictToHorizontalAxis] : [],
                 plugins: noDropAnimationPlugins,
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(annotationIntegration.AnnotationBoxesWrapper, { height: 30, width: tracksFullWidth, children: annotations.map((annotation, index) => {
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(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__ */ (0, import_jsx_runtime15.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                     annotationIntegration.AnnotationBox,
                     {
                       annotationId: annotation.id,
@@ -6906,15 +5166,15 @@ var MediaElementPlaylist = ({
                 }) })
               }
             ),
-            selectionStart !== selectionEnd && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_ui_components11.Selection,
+            selectionStart !== selectionEnd && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_ui_components10.Selection,
               {
                 startPosition: Math.min(selectionStart, selectionEnd) * sampleRate / samplesPerPixel,
                 endPosition: Math.max(selectionStart, selectionEnd) * sampleRate / samplesPerPixel,
                 color: theme.selectionColor
               }
             ),
-            renderPlayhead ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            renderPlayhead ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               CustomMediaElementPlayhead,
               {
                 renderPlayhead,
@@ -6922,7 +5182,7 @@ var MediaElementPlaylist = ({
                 samplesPerPixel,
                 sampleRate
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedMediaElementPlayhead, { color: theme.playheadColor })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AnimatedMediaElementPlayhead, { color: theme.playheadColor })
           ] })
         }
       )
@@ -6931,8 +5191,8 @@ var MediaElementPlaylist = ({
 };
 
 // src/components/MediaElementAnnotationList.tsx
-var import_react39 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react32 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var MediaElementAnnotationList = ({
   height,
   renderAnnotationItem,
@@ -6947,7 +5207,7 @@ var MediaElementAnnotationList = ({
   const integration = useAnnotationIntegration();
   const { setAnnotations } = useMediaElementControls();
   const resolvedConfig = annotationListConfig != null ? annotationListConfig : { linkEndpoints: false, continuousPlay };
-  const handleAnnotationUpdate = (0, import_react39.useCallback)(
+  const handleAnnotationUpdate = (0, import_react32.useCallback)(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6955,7 +5215,7 @@ var MediaElementAnnotationList = ({
     [setAnnotations, onAnnotationUpdate]
   );
   const { AnnotationText } = integration;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     AnnotationText,
     {
       annotations,
@@ -6974,7 +5234,7 @@ var MediaElementAnnotationList = ({
 };
 
 // src/components/MediaElementWaveform.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var MediaElementWaveform = ({
   annotationTextHeight,
   getAnnotationBoxLabel,
@@ -6989,8 +5249,8 @@ var MediaElementWaveform = ({
   className
 }) => {
   const { annotations } = useMediaElementState();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       MediaElementPlaylist,
       {
         getAnnotationBoxLabel,
@@ -7002,7 +5262,7 @@ var MediaElementWaveform = ({
         className
       }
     ),
-    annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       MediaElementAnnotationList,
       {
         height: annotationTextHeight,
@@ -7077,11 +5337,11 @@ var KeyboardShortcuts = ({
 };
 
 // src/components/ClipInteractionProvider.tsx
-var import_react40 = __toESM(require("react"));
-var import_react41 = require("@dnd-kit/react");
+var import_react33 = __toESM(require("react"));
+var import_react34 = require("@dnd-kit/react");
 var import_modifiers2 = require("@dnd-kit/abstract/modifiers");
-var import_core10 = require("@waveform-playlist/core");
-var import_ui_components12 = require("@waveform-playlist/ui-components");
+var import_core6 = require("@waveform-playlist/core");
+var import_ui_components11 = require("@waveform-playlist/ui-components");
 
 // src/modifiers/ClipCollisionModifier.ts
 var import_abstract = require("@dnd-kit/abstract");
@@ -7109,7 +5369,7 @@ var ClipCollisionModifier = _ClipCollisionModifier;
 
 // src/modifiers/SnapToGridModifier.ts
 var import_abstract2 = require("@dnd-kit/abstract");
-var import_core9 = require("@waveform-playlist/core");
+var import_core5 = require("@waveform-playlist/core");
 var _SnapToGridModifier = class _SnapToGridModifier extends import_abstract2.Modifier {
   apply(operation) {
     const { transform, source } = operation;
@@ -7130,18 +5390,18 @@ var _SnapToGridModifier = class _SnapToGridModifier extends import_abstract2.Mod
     }
     const { snapTo, bpm, timeSignature, sampleRate } = this.options;
     if (snapTo === "off") return transform;
-    const gridTicks = snapTo === "bar" ? (0, import_core9.ticksPerBar)(timeSignature) : (0, import_core9.ticksPerBeat)(timeSignature);
+    const gridTicks = snapTo === "bar" ? (0, import_core5.ticksPerBar)(timeSignature) : (0, import_core5.ticksPerBeat)(timeSignature);
     if (startSample !== void 0) {
       const proposedSamples = startSample + transform.x * samplesPerPixel;
-      const proposedTicks = (0, import_core9.samplesToTicks)(proposedSamples, bpm, sampleRate);
-      const snappedTicks2 = (0, import_core9.snapToGrid)(proposedTicks, gridTicks);
-      const snappedSamples2 = (0, import_core9.ticksToSamples)(snappedTicks2, bpm, sampleRate);
+      const proposedTicks = (0, import_core5.samplesToTicks)(proposedSamples, bpm, sampleRate);
+      const snappedTicks2 = (0, import_core5.snapToGrid)(proposedTicks, gridTicks);
+      const snappedSamples2 = (0, import_core5.ticksToSamples)(snappedTicks2, bpm, sampleRate);
       return { x: (snappedSamples2 - startSample) / samplesPerPixel, y: 0 };
     }
     const deltaSamples = transform.x * samplesPerPixel;
-    const deltaTicks = (0, import_core9.samplesToTicks)(deltaSamples, bpm, sampleRate);
-    const snappedTicks = (0, import_core9.snapToGrid)(deltaTicks, gridTicks);
-    const snappedSamples = (0, import_core9.ticksToSamples)(snappedTicks, bpm, sampleRate);
+    const deltaTicks = (0, import_core5.samplesToTicks)(deltaSamples, bpm, sampleRate);
+    const snappedTicks = (0, import_core5.snapToGrid)(deltaTicks, gridTicks);
+    const snappedSamples = (0, import_core5.ticksToSamples)(snappedTicks, bpm, sampleRate);
     return { x: snappedSamples / samplesPerPixel, y: 0 };
   }
 };
@@ -7149,7 +5409,7 @@ _SnapToGridModifier.configure = (0, import_abstract2.configurator)(_SnapToGridMo
 var SnapToGridModifier = _SnapToGridModifier;
 
 // src/components/ClipInteractionProvider.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var NOOP_TRACKS_CHANGE = () => {
 };
 var ClipInteractionProvider = ({
@@ -7159,28 +5419,28 @@ var ClipInteractionProvider = ({
 }) => {
   const { tracks, samplesPerPixel, sampleRate, playoutRef, isDraggingRef, onTracksChange } = usePlaylistData();
   const { setSelectedTrackId } = usePlaylistControls();
-  const beatsAndBars = (0, import_ui_components12.useBeatsAndBars)();
+  const beatsAndBars = (0, import_ui_components11.useBeatsAndBars)();
   const useBeatsSnap = snap && beatsAndBars != null && beatsAndBars.scaleMode === "beats" && beatsAndBars.snapTo !== "off";
   const useTimescaleSnap = snap && !useBeatsSnap;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     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 = (0, import_react40.useMemo)(() => {
+  const snapSamplePosition = (0, import_react33.useMemo)(() => {
     if (useBeatsSnap && beatsAndBars) {
       const { bpm, timeSignature, snapTo } = beatsAndBars;
-      const gridTicks = snapTo === "bar" ? (0, import_core10.ticksPerBar)(timeSignature) : (0, import_core10.ticksPerBeat)(timeSignature);
+      const gridTicks = snapTo === "bar" ? (0, import_core6.ticksPerBar)(timeSignature) : (0, import_core6.ticksPerBeat)(timeSignature);
       return (samplePos) => {
-        const ticks = (0, import_core10.samplesToTicks)(samplePos, bpm, sampleRate);
-        const snapped = (0, import_core10.snapToGrid)(ticks, gridTicks);
-        return (0, import_core10.ticksToSamples)(snapped, bpm, sampleRate);
+        const ticks = (0, import_core6.samplesToTicks)(samplePos, bpm, sampleRate);
+        const snapped = (0, import_core6.snapToGrid)(ticks, gridTicks);
+        return (0, import_core6.ticksToSamples)(snapped, bpm, sampleRate);
       };
     }
     if (useTimescaleSnap) {
-      const gridSamples = Math.round((0, import_ui_components12.getScaleInfo)(samplesPerPixel).smallStep / 1e3 * sampleRate);
+      const gridSamples = Math.round((0, import_ui_components11.getScaleInfo)(samplesPerPixel).smallStep / 1e3 * sampleRate);
       return (samplePos) => Math.round(samplePos / gridSamples) * gridSamples;
     }
     return void 0;
@@ -7198,7 +5458,7 @@ var ClipInteractionProvider = ({
     isDraggingRef,
     snapSamplePosition
   });
-  const onDragStart = import_react40.default.useCallback(
+  const onDragStart = import_react33.default.useCallback(
     (event) => {
       var _a, _b, _c;
       const trackIndex = (_c = (_b = (_a = event.operation) == null ? void 0 : _a.source) == null ? void 0 : _b.data) == null ? void 0 : _c.trackIndex;
@@ -7209,7 +5469,7 @@ var ClipInteractionProvider = ({
     },
     [handleDragStart, tracks, setSelectedTrackId]
   );
-  const modifiers = (0, import_react40.useMemo)(() => {
+  const modifiers = (0, import_react33.useMemo)(() => {
     const mods = [import_modifiers2.RestrictToHorizontalAxis];
     if (useBeatsSnap && beatsAndBars) {
       mods.push(
@@ -7226,7 +5486,7 @@ var ClipInteractionProvider = ({
       mods.push(
         SnapToGridModifier.configure({
           mode: "timescale",
-          gridSamples: Math.round((0, import_ui_components12.getScaleInfo)(samplesPerPixel).smallStep / 1e3 * sampleRate),
+          gridSamples: Math.round((0, import_ui_components11.getScaleInfo)(samplesPerPixel).smallStep / 1e3 * sampleRate),
           samplesPerPixel
         })
       );
@@ -7234,8 +5494,8 @@ var ClipInteractionProvider = ({
     mods.push(ClipCollisionModifier.configure({ tracks, samplesPerPixel }));
     return mods;
   }, [useBeatsSnap, useTimescaleSnap, beatsAndBars, tracks, samplesPerPixel, sampleRate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ClipInteractionContextProvider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_react41.DragDropProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ClipInteractionContextProvider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react34.DragDropProvider,
     {
       sensors,
       onDragStart,
@@ -7258,7 +5518,6 @@ var ClipInteractionProvider = ({
   ContinuousPlayCheckbox,
   DownloadAnnotationsButton,
   EditableCheckbox,
-  ExportWavButton,
   FastForwardButton,
   KeyboardShortcuts,
   LinkEndpointsCheckbox,
@@ -7281,17 +5540,10 @@ var ClipInteractionProvider = ({
   SpectrogramIntegrationProvider,
   StopButton,
   TimeFormatSelect,
-  Tone,
   Waveform,
   WaveformPlaylistProvider,
   ZoomInButton,
   ZoomOutButton,
-  createEffectChain,
-  createEffectInstance,
-  effectCategories,
-  effectDefinitions,
-  getEffectDefinition,
-  getEffectsByCategory,
   getShortcutLabel,
   getWaveformDataMetadata,
   loadPeaksFromWaveformData,
@@ -7300,30 +5552,24 @@ var ClipInteractionProvider = ({
   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
 });