@waveform-playlist/browser 11.0.1 → 11.1.0

package/dist/index.js

@@ -122,7 +122,7 @@ __export(index_exports, {
   effectDefinitions: () => effectDefinitions,
   getEffectDefinition: () => getEffectDefinition,
   getEffectsByCategory: () => getEffectsByCategory,
-  getShortcutLabel: () => getShortcutLabel,
+  getShortcutLabel: () => import_core3.getShortcutLabel,
   getWaveformDataMetadata: () => getWaveformDataMetadata,
   loadPeaksFromWaveformData: () => loadPeaksFromWaveformData,
   loadWaveformData: () => loadWaveformData,
@@ -161,7 +161,7 @@ module.exports = __toCommonJS(index_exports);
 var Tone2 = __toESM(require("tone"));
 
 // src/WaveformPlaylistContext.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_styled_components = require("styled-components");
 var import_playout5 = require("@waveform-playlist/playout");
 var import_engine3 = require("@waveform-playlist/engine");
@@ -542,12 +542,52 @@ function useSelectedTrack({ engineRef }) {
   };
 }
 
-// src/hooks/useAudioEffects.ts
+// src/hooks/useUndoState.ts
 var import_react7 = require("react");
+function useUndoState({ engineRef }) {
+  const [canUndo, setCanUndo] = (0, import_react7.useState)(false);
+  const [canRedo, setCanRedo] = (0, import_react7.useState)(false);
+  const canUndoRef = (0, import_react7.useRef)(false);
+  const canRedoRef = (0, import_react7.useRef)(false);
+  const undo = (0, import_react7.useCallback)(() => {
+    if (!engineRef.current) {
+      console.warn("[waveform-playlist] undo: engine not ready, call ignored");
+      return;
+    }
+    engineRef.current.undo();
+  }, [engineRef]);
+  const redo = (0, import_react7.useCallback)(() => {
+    if (!engineRef.current) {
+      console.warn("[waveform-playlist] redo: engine not ready, call ignored");
+      return;
+    }
+    engineRef.current.redo();
+  }, [engineRef]);
+  const onEngineState = (0, import_react7.useCallback)((state) => {
+    if (state.canUndo !== canUndoRef.current) {
+      canUndoRef.current = state.canUndo;
+      setCanUndo(state.canUndo);
+    }
+    if (state.canRedo !== canRedoRef.current) {
+      canRedoRef.current = state.canRedo;
+      setCanRedo(state.canRedo);
+    }
+  }, []);
+  return {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    onEngineState
+  };
+}
+
+// src/hooks/useAudioEffects.ts
+var import_react8 = require("react");
 var import_tone = require("tone");
 var useMasterAnalyser = (fftSize = 256) => {
-  const analyserRef = (0, import_react7.useRef)(null);
-  const masterEffects = (0, import_react7.useCallback)(
+  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);
@@ -564,7 +604,7 @@ var useMasterAnalyser = (fftSize = 256) => {
 };
 
 // src/hooks/useAudioTracks.ts
-var import_react8 = require("react");
+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) {
@@ -622,14 +662,14 @@ function buildTrackFromConfig(config, index, audioBuffer, stableIds, contextSamp
 function useAudioTracks(configs, options = {}) {
   const { immediate = false, progressive = false } = options;
   const isImmediate = immediate || progressive;
-  const [loading, setLoading] = (0, import_react8.useState)(true);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const [loadedCount, setLoadedCount] = (0, import_react8.useState)(0);
+  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_react8.useState)(/* @__PURE__ */ new Map());
-  const stableIdsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
-  const contextSampleRateRef = (0, import_react8.useRef)(48e3);
-  const derivedTracks = (0, import_react8.useMemo)(() => {
+  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++) {
@@ -644,13 +684,13 @@ function useAudioTracks(configs, options = {}) {
     }
     return result;
   }, [isImmediate, configs, loadedBuffers]);
-  const [tracks, setTracks] = (0, import_react8.useState)(derivedTracks != null ? derivedTracks : []);
-  const prevDerivedRef = (0, import_react8.useRef)(derivedTracks);
+  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_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (configs.length === 0) {
       setTracks([]);
       setLoading(false);
@@ -758,7 +798,7 @@ function useAudioTracks(configs, options = {}) {
 }
 
 // src/hooks/useClipDragHandlers.ts
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/utils/boundaryTrim.ts
 var import_engine = require("@waveform-playlist/engine");
@@ -812,17 +852,24 @@ function useClipDragHandlers({
   snapSamplePosition
 }) {
   const { sampleRate } = usePlaylistData();
-  const snapSamplePositionRef = import_react9.default.useRef(snapSamplePosition);
+  const snapSamplePositionRef = import_react10.default.useRef(snapSamplePosition);
   snapSamplePositionRef.current = snapSamplePosition;
-  const originalClipStateRef = import_react9.default.useRef(null);
-  const lastBoundaryDeltaRef = import_react9.default.useRef(0);
-  const onDragStart = import_react9.default.useCallback(
+  const originalClipStateRef = import_react10.default.useRef(null);
+  const lastBoundaryDeltaRef = import_react10.default.useRef(0);
+  const onDragStart = import_react10.default.useCallback(
     (event) => {
       var _a;
       const data = (_a = event.operation.source) == null ? void 0 : _a.data;
       if (!data) return;
       if (!data.boundary) {
         originalClipStateRef.current = null;
+        if (engineRef.current) {
+          engineRef.current.beginTransaction();
+        } else {
+          console.warn(
+            "[waveform-playlist] onDragStart: engine not ready, move will not be grouped for undo"
+          );
+        }
         return;
       }
       const track = tracks[data.trackIndex];
@@ -834,11 +881,18 @@ function useClipDragHandlers({
           startSample: clip.startSample
         };
         isDraggingRef.current = true;
+        if (engineRef.current) {
+          engineRef.current.beginTransaction();
+        } else {
+          console.warn(
+            "[waveform-playlist] onDragStart: engine not ready, trim will not be grouped for undo"
+          );
+        }
       }
     },
-    [tracks, isDraggingRef]
+    [tracks, isDraggingRef, engineRef]
   );
-  const onDragMove = import_react9.default.useCallback(
+  const onDragMove = import_react10.default.useCallback(
     (event) => {
       var _a, _b, _c;
       const data = (_a = event.operation.source) == null ? void 0 : _a.data;
@@ -900,9 +954,9 @@ function useClipDragHandlers({
     },
     [tracks, onTracksChange, samplesPerPixel, sampleRate]
   );
-  const onDragEnd = import_react9.default.useCallback(
+  const onDragEnd = import_react10.default.useCallback(
     (event) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f, _g;
       if (event.canceled) {
         if (originalClipStateRef.current) {
           const cancelData = (_a = event.operation.source) == null ? void 0 : _a.data;
@@ -927,23 +981,30 @@ function useClipDragHandlers({
         isDraggingRef.current = false;
         originalClipStateRef.current = null;
         lastBoundaryDeltaRef.current = 0;
+        (_b = engineRef.current) == null ? void 0 : _b.abortTransaction();
+        return;
+      }
+      const data = (_c = event.operation.source) == null ? void 0 : _c.data;
+      if (!data) {
+        isDraggingRef.current = false;
+        (_d = engineRef.current) == null ? void 0 : _d.abortTransaction();
         return;
       }
-      const data = (_b = event.operation.source) == null ? void 0 : _b.data;
-      if (!data) return;
       const { trackIndex, clipId, boundary } = data;
       const sampleDelta = boundary ? lastBoundaryDeltaRef.current : event.operation.transform.x * samplesPerPixel;
-      const trackId = (_c = tracks[trackIndex]) == null ? void 0 : _c.id;
+      const trackId = (_e = tracks[trackIndex]) == null ? void 0 : _e.id;
       if (boundary) {
         isDraggingRef.current = false;
         if (!trackId) {
           console.warn(
             `[waveform-playlist] onDragEnd: track at index ${trackIndex} not found \u2014 trim not synced to adapter`
           );
+          (_f = engineRef.current) == null ? void 0 : _f.abortTransaction();
         } else if (!engineRef.current) {
           console.warn("[waveform-playlist] engineRef is null \u2014 trim not synced to adapter");
         } else {
           engineRef.current.trimClip(trackId, clipId, boundary, Math.floor(sampleDelta));
+          engineRef.current.commitTransaction();
         }
         originalClipStateRef.current = null;
         lastBoundaryDeltaRef.current = 0;
@@ -953,10 +1014,12 @@ function useClipDragHandlers({
         console.warn(
           `[waveform-playlist] onDragEnd: track at index ${trackIndex} not found \u2014 move not synced to adapter`
         );
+        (_g = engineRef.current) == null ? void 0 : _g.abortTransaction();
       } else if (!engineRef.current) {
         console.warn("[waveform-playlist] engineRef is null \u2014 move not synced to adapter");
       } else {
         engineRef.current.moveClip(trackId, clipId, Math.floor(sampleDelta));
+        engineRef.current.commitTransaction();
       }
     },
     [tracks, onTracksChange, samplesPerPixel, engineRef, isDraggingRef]
@@ -969,7 +1032,7 @@ function useClipDragHandlers({
 }
 
 // src/hooks/useAnnotationDragHandlers.ts
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_playout = require("@waveform-playlist/playout");
 var LINK_THRESHOLD = 0.01;
 function useAnnotationDragHandlers({
@@ -980,8 +1043,8 @@ function useAnnotationDragHandlers({
   duration,
   linkEndpoints
 }) {
-  const originalAnnotationStateRef = import_react10.default.useRef(null);
-  const onDragStart = import_react10.default.useCallback(
+  const originalAnnotationStateRef = import_react11.default.useRef(null);
+  const onDragStart = import_react11.default.useCallback(
     (event) => {
       var _a;
       const data = (_a = event.operation.source) == null ? void 0 : _a.data;
@@ -1000,7 +1063,7 @@ function useAnnotationDragHandlers({
     },
     [annotations]
   );
-  const onDragMove = import_react10.default.useCallback(
+  const onDragMove = import_react11.default.useCallback(
     (event) => {
       var _a, _b, _c;
       if (!originalAnnotationStateRef.current) {
@@ -1026,7 +1089,7 @@ function useAnnotationDragHandlers({
     },
     [annotations, onAnnotationsChange, samplesPerPixel, sampleRate, duration, linkEndpoints]
   );
-  const onDragEnd = import_react10.default.useCallback(
+  const onDragEnd = import_react11.default.useCallback(
     (event) => {
       if (event.canceled && originalAnnotationStateRef.current) {
         const { annotationIndex, start, end } = originalAnnotationStateRef.current;
@@ -1134,7 +1197,7 @@ function updateAnnotationBoundaries({
 }
 
 // src/hooks/useDragSensors.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_dom = require("@dnd-kit/dom");
 function useDragSensors(options = {}) {
   const {
@@ -1143,7 +1206,7 @@ function useDragSensors(options = {}) {
     touchTolerance = 5,
     mouseDistance = 1
   } = options;
-  return (0, import_react11.useMemo)(() => {
+  return (0, import_react12.useMemo)(() => {
     if (touchOptimized) {
       return [
         import_dom.PointerSensor.configure({
@@ -1172,14 +1235,14 @@ function useDragSensors(options = {}) {
 }
 
 // src/hooks/useClipSplitting.ts
-var import_react12 = require("react");
+var import_react13 = 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_react12.useCallback)(
+  const splitClipAt = (0, import_react13.useCallback)(
     (trackIndex, clipIndex, splitTime) => {
       const { samplesPerPixel } = options;
       const track = tracks[trackIndex];
@@ -1203,7 +1266,7 @@ var useClipSplitting = (options) => {
     },
     [tracks, options, engineRef, sampleRate]
   );
-  const splitClipAtPlayhead = (0, import_react12.useCallback)(() => {
+  const splitClipAtPlayhead = (0, import_react13.useCallback)(() => {
     var _a;
     if (!selectedTrackId) {
       console.warn("[waveform-playlist] No track selected \u2014 click a clip to select a track first");
@@ -1234,36 +1297,16 @@ var useClipSplitting = (options) => {
 };
 
 // src/hooks/useKeyboardShortcuts.ts
-var import_react13 = require("react");
-function handleKeyboardEvent(event, shortcuts, enabled) {
-  if (!enabled) return;
-  if (event.repeat) return;
-  const target = event.target;
-  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
-    return;
-  }
-  const matchingShortcut = shortcuts.find((shortcut) => {
-    const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase() || event.key === shortcut.key;
-    const ctrlMatch = shortcut.ctrlKey === void 0 || event.ctrlKey === shortcut.ctrlKey;
-    const shiftMatch = shortcut.shiftKey === void 0 || event.shiftKey === shortcut.shiftKey;
-    const metaMatch = shortcut.metaKey === void 0 || event.metaKey === shortcut.metaKey;
-    const altMatch = shortcut.altKey === void 0 || event.altKey === shortcut.altKey;
-    return keyMatch && ctrlMatch && shiftMatch && metaMatch && altMatch;
-  });
-  if (matchingShortcut) {
-    if (matchingShortcut.preventDefault !== false) {
-      event.preventDefault();
-    }
-    matchingShortcut.action();
-  }
-}
+var import_react14 = require("react");
+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_react13.useCallback)(
-    (event) => handleKeyboardEvent(event, shortcuts, enabled),
+  const handleKeyDown = (0, import_react14.useCallback)(
+    (event) => (0, import_core2.handleKeyboardEvent)(event, shortcuts, enabled),
     [shortcuts, enabled]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!enabled) return;
     window.addEventListener("keydown", handleKeyDown);
     return () => {
@@ -1271,42 +1314,24 @@ var useKeyboardShortcuts = (options) => {
     };
   }, [handleKeyDown, enabled]);
 };
-var getShortcutLabel = (shortcut) => {
-  const parts = [];
-  const isMac = typeof navigator !== "undefined" && navigator.platform.includes("Mac");
-  if (shortcut.metaKey) {
-    parts.push(isMac ? "Cmd" : "Ctrl");
-  }
-  if (shortcut.ctrlKey && !shortcut.metaKey) {
-    parts.push("Ctrl");
-  }
-  if (shortcut.altKey) {
-    parts.push(isMac ? "Option" : "Alt");
-  }
-  if (shortcut.shiftKey) {
-    parts.push("Shift");
-  }
-  parts.push(shortcut.key.toUpperCase());
-  return parts.join("+");
-};
 
 // src/hooks/usePlaybackShortcuts.ts
-var import_react14 = require("react");
+var import_react15 = 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_react14.useCallback)(() => {
+  const togglePlayPause = (0, import_react15.useCallback)(() => {
     if (isPlaying) {
       pause();
     } else {
       play();
     }
   }, [isPlaying, play, pause]);
-  const stopPlayback = (0, import_react14.useCallback)(() => {
+  const stopPlayback = (0, import_react15.useCallback)(() => {
     stop();
   }, [stop]);
-  const rewindToStart = (0, import_react14.useCallback)(() => {
+  const rewindToStart = (0, import_react15.useCallback)(() => {
     setCurrentTime(0);
     if (isPlaying) {
       play(0);
@@ -1346,7 +1371,7 @@ var usePlaybackShortcuts = (options = {}) => {
 };
 
 // src/hooks/useAnnotationKeyboardControls.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var LINK_THRESHOLD2 = 0.01;
 var TIME_DELTA = 0.01;
 function useAnnotationKeyboardControls({
@@ -1362,11 +1387,11 @@ function useAnnotationKeyboardControls({
   onPlay
 }) {
   const { samplesPerPixel, sampleRate } = usePlaylistData();
-  const activeIndex = (0, import_react15.useMemo)(() => {
+  const activeIndex = (0, import_react16.useMemo)(() => {
     if (!activeAnnotationId) return -1;
     return annotations.findIndex((a) => a.id === activeAnnotationId);
   }, [annotations, activeAnnotationId]);
-  const scrollToAnnotation = (0, import_react15.useCallback)(
+  const scrollToAnnotation = (0, import_react16.useCallback)(
     (annotationId) => {
       if (!(scrollContainerRef == null ? void 0 : scrollContainerRef.current) || !samplesPerPixel || !sampleRate) return;
       const annotation = annotations.find((a) => a.id === annotationId);
@@ -1389,12 +1414,12 @@ function useAnnotationKeyboardControls({
     },
     [annotations, scrollContainerRef, samplesPerPixel, sampleRate]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (activeAnnotationId && (scrollContainerRef == null ? void 0 : scrollContainerRef.current) && samplesPerPixel && sampleRate) {
       scrollToAnnotation(activeAnnotationId);
     }
   }, [activeAnnotationId, scrollToAnnotation, scrollContainerRef, samplesPerPixel, sampleRate]);
-  const moveStartBoundary = (0, import_react15.useCallback)(
+  const moveStartBoundary = (0, import_react16.useCallback)(
     (delta) => {
       if (activeIndex < 0) return;
       const annotation = annotations[activeIndex];
@@ -1423,7 +1448,7 @@ function useAnnotationKeyboardControls({
     },
     [annotations, activeIndex, linkEndpoints, onAnnotationsChange]
   );
-  const moveEndBoundary = (0, import_react15.useCallback)(
+  const moveEndBoundary = (0, import_react16.useCallback)(
     (delta) => {
       if (activeIndex < 0) return;
       const annotation = annotations[activeIndex];
@@ -1483,7 +1508,7 @@ function useAnnotationKeyboardControls({
     },
     [annotations, activeIndex, duration, linkEndpoints, onAnnotationsChange]
   );
-  const selectPrevious = (0, import_react15.useCallback)(() => {
+  const selectPrevious = (0, import_react16.useCallback)(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     if (activeIndex <= 0) {
       onActiveAnnotationChange(annotations[annotations.length - 1].id);
@@ -1491,7 +1516,7 @@ function useAnnotationKeyboardControls({
       onActiveAnnotationChange(annotations[activeIndex - 1].id);
     }
   }, [annotations, activeIndex, onActiveAnnotationChange]);
-  const selectNext = (0, import_react15.useCallback)(() => {
+  const selectNext = (0, import_react16.useCallback)(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     if (activeIndex < 0 || activeIndex >= annotations.length - 1) {
       onActiveAnnotationChange(annotations[0].id);
@@ -1499,25 +1524,25 @@ function useAnnotationKeyboardControls({
       onActiveAnnotationChange(annotations[activeIndex + 1].id);
     }
   }, [annotations, activeIndex, onActiveAnnotationChange]);
-  const selectFirst = (0, import_react15.useCallback)(() => {
+  const selectFirst = (0, import_react16.useCallback)(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     onActiveAnnotationChange(annotations[0].id);
   }, [annotations, onActiveAnnotationChange]);
-  const selectLast = (0, import_react15.useCallback)(() => {
+  const selectLast = (0, import_react16.useCallback)(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     onActiveAnnotationChange(annotations[annotations.length - 1].id);
   }, [annotations, onActiveAnnotationChange]);
-  const clearSelection = (0, import_react15.useCallback)(() => {
+  const clearSelection = (0, import_react16.useCallback)(() => {
     if (!onActiveAnnotationChange) return;
     onActiveAnnotationChange(null);
   }, [onActiveAnnotationChange]);
-  const playActiveAnnotation = (0, import_react15.useCallback)(() => {
+  const playActiveAnnotation = (0, import_react16.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_react15.useMemo)(
+  const activeAnnotationShortcuts = (0, import_react16.useMemo)(
     () => [
       {
         key: "[",
@@ -1554,7 +1579,7 @@ function useAnnotationKeyboardControls({
     ],
     [moveStartBoundary, moveEndBoundary, playActiveAnnotation]
   );
-  const navigationShortcuts = (0, import_react15.useMemo)(
+  const navigationShortcuts = (0, import_react16.useMemo)(
     () => [
       {
         key: "ArrowUp",
@@ -1623,7 +1648,7 @@ function useAnnotationKeyboardControls({
 }
 
 // src/hooks/useDynamicEffects.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/effects/effectDefinitions.ts
 var effectDefinitions = [
@@ -2298,13 +2323,13 @@ function createEffectChain(effects) {
 // src/hooks/useDynamicEffects.ts
 var import_tone3 = require("tone");
 function useDynamicEffects(fftSize = 256) {
-  const [activeEffects, setActiveEffects] = (0, import_react16.useState)([]);
-  const activeEffectsRef = (0, import_react16.useRef)(activeEffects);
+  const [activeEffects, setActiveEffects] = (0, import_react17.useState)([]);
+  const activeEffectsRef = (0, import_react17.useRef)(activeEffects);
   activeEffectsRef.current = activeEffects;
-  const effectInstancesRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
-  const analyserRef = (0, import_react16.useRef)(null);
-  const graphNodesRef = (0, import_react16.useRef)(null);
-  const rebuildChain = (0, import_react16.useCallback)((effects) => {
+  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;
@@ -2332,7 +2357,7 @@ function useDynamicEffects(fftSize = 256) {
       analyserNode.connect(destination);
     }
   }, []);
-  const addEffect = (0, import_react16.useCallback)((effectId) => {
+  const addEffect = (0, import_react17.useCallback)((effectId) => {
     const definition = getEffectDefinition(effectId);
     if (!definition) {
       console.error(`Unknown effect: ${effectId}`);
@@ -2353,7 +2378,7 @@ function useDynamicEffects(fftSize = 256) {
     };
     setActiveEffects((prev) => [...prev, newActiveEffect]);
   }, []);
-  const removeEffect = (0, import_react16.useCallback)((instanceId) => {
+  const removeEffect = (0, import_react17.useCallback)((instanceId) => {
     const instance = effectInstancesRef.current.get(instanceId);
     if (instance) {
       instance.dispose();
@@ -2361,7 +2386,7 @@ function useDynamicEffects(fftSize = 256) {
     }
     setActiveEffects((prev) => prev.filter((e) => e.instanceId !== instanceId));
   }, []);
-  const updateParameter = (0, import_react16.useCallback)(
+  const updateParameter = (0, import_react17.useCallback)(
     (instanceId, paramName, value) => {
       const instance = effectInstancesRef.current.get(instanceId);
       if (instance) {
@@ -2375,7 +2400,7 @@ function useDynamicEffects(fftSize = 256) {
     },
     []
   );
-  const toggleBypass = (0, import_react16.useCallback)((instanceId) => {
+  const toggleBypass = (0, import_react17.useCallback)((instanceId) => {
     var _a;
     const effect = activeEffectsRef.current.find((e) => e.instanceId === instanceId);
     if (!effect) return;
@@ -2389,7 +2414,7 @@ function useDynamicEffects(fftSize = 256) {
       (prev) => prev.map((e) => e.instanceId === instanceId ? __spreadProps(__spreadValues({}, e), { bypassed: newBypassed }) : e)
     );
   }, []);
-  const reorderEffects = (0, import_react16.useCallback)((fromIndex, toIndex) => {
+  const reorderEffects = (0, import_react17.useCallback)((fromIndex, toIndex) => {
     setActiveEffects((prev) => {
       const newEffects = [...prev];
       const [removed] = newEffects.splice(fromIndex, 1);
@@ -2397,15 +2422,15 @@ function useDynamicEffects(fftSize = 256) {
       return newEffects;
     });
   }, []);
-  const clearAllEffects = (0, import_react16.useCallback)(() => {
+  const clearAllEffects = (0, import_react17.useCallback)(() => {
     effectInstancesRef.current.forEach((inst) => inst.dispose());
     effectInstancesRef.current.clear();
     setActiveEffects([]);
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     rebuildChain(activeEffects);
   }, [activeEffects, rebuildChain]);
-  const masterEffects = (0, import_react16.useCallback)(
+  const masterEffects = (0, import_react17.useCallback)(
     (masterGainNode, destination, _isOffline) => {
       const analyserNode = new import_tone3.Analyser("fft", fftSize);
       analyserRef.current = analyserNode;
@@ -2437,14 +2462,14 @@ function useDynamicEffects(fftSize = 256) {
     [fftSize]
     // Only fftSize - reads effects from ref
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const effectInstances = effectInstancesRef.current;
     return () => {
       effectInstances.forEach((inst) => inst.dispose());
       effectInstances.clear();
     };
   }, []);
-  const createOfflineEffectsFunction = (0, import_react16.useCallback)(() => {
+  const createOfflineEffectsFunction = (0, import_react17.useCallback)(() => {
     const nonBypassedEffects = activeEffects.filter((e) => !e.bypassed);
     if (nonBypassedEffects.length === 0) {
       return void 0;
@@ -2486,14 +2511,14 @@ function useDynamicEffects(fftSize = 256) {
 }
 
 // src/hooks/useTrackDynamicEffects.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useTrackDynamicEffects() {
-  const [trackEffectsState, setTrackEffectsState] = (0, import_react17.useState)(
+  const [trackEffectsState, setTrackEffectsState] = (0, import_react18.useState)(
     /* @__PURE__ */ new Map()
   );
-  const trackEffectInstancesRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const trackGraphNodesRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const rebuildTrackChain = (0, import_react17.useCallback)((trackId, trackEffects) => {
+  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;
@@ -2523,7 +2548,7 @@ function useTrackDynamicEffects() {
       currentNode.connect(masterGainNode);
     }
   }, []);
-  const addEffectToTrack = (0, import_react17.useCallback)((trackId, effectId) => {
+  const addEffectToTrack = (0, import_react18.useCallback)((trackId, effectId) => {
     const definition = getEffectDefinition(effectId);
     if (!definition) {
       console.error(`Unknown effect: ${effectId}`);
@@ -2552,7 +2577,7 @@ function useTrackDynamicEffects() {
       return newState;
     });
   }, []);
-  const removeEffectFromTrack = (0, import_react17.useCallback)((trackId, instanceId) => {
+  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) {
@@ -2569,7 +2594,7 @@ function useTrackDynamicEffects() {
       return newState;
     });
   }, []);
-  const updateTrackEffectParameter = (0, import_react17.useCallback)(
+  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);
@@ -2590,7 +2615,7 @@ function useTrackDynamicEffects() {
     },
     []
   );
-  const toggleBypass = (0, import_react17.useCallback)((trackId, instanceId) => {
+  const toggleBypass = (0, import_react18.useCallback)((trackId, instanceId) => {
     var _a;
     const trackEffects = trackEffectsStateRef.current.get(trackId) || [];
     const effect = trackEffects.find((e) => e.instanceId === instanceId);
@@ -2612,7 +2637,7 @@ function useTrackDynamicEffects() {
       return newState;
     });
   }, []);
-  const clearTrackEffects = (0, import_react17.useCallback)((trackId) => {
+  const clearTrackEffects = (0, import_react18.useCallback)((trackId) => {
     const instancesMap = trackEffectInstancesRef.current.get(trackId);
     if (instancesMap) {
       instancesMap.forEach((inst) => inst.dispose());
@@ -2624,9 +2649,9 @@ function useTrackDynamicEffects() {
       return newState;
     });
   }, []);
-  const trackEffectsStateRef = (0, import_react17.useRef)(trackEffectsState);
+  const trackEffectsStateRef = (0, import_react18.useRef)(trackEffectsState);
   trackEffectsStateRef.current = trackEffectsState;
-  const getTrackEffectsFunction = (0, import_react17.useCallback)(
+  const getTrackEffectsFunction = (0, import_react18.useCallback)(
     (trackId) => {
       return (graphEnd, masterGainNode, _isOffline) => {
         trackGraphNodesRef.current.set(trackId, {
@@ -2654,12 +2679,12 @@ function useTrackDynamicEffects() {
     []
     // No dependencies - stable function that reads from refs
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     trackEffectsState.forEach((effects, trackId) => {
       rebuildTrackChain(trackId, effects);
     });
   }, [trackEffectsState, rebuildTrackChain]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const trackEffectInstances = trackEffectInstancesRef.current;
     return () => {
       trackEffectInstances.forEach((instancesMap) => {
@@ -2669,7 +2694,7 @@ function useTrackDynamicEffects() {
       trackEffectInstances.clear();
     };
   }, []);
-  const createOfflineTrackEffectsFunction = (0, import_react17.useCallback)(
+  const createOfflineTrackEffectsFunction = (0, import_react18.useCallback)(
     (trackId) => {
       const trackEffects = trackEffectsState.get(trackId) || [];
       const nonBypassedEffects = trackEffects.filter((e) => !e.bypassed);
@@ -2713,7 +2738,7 @@ function useTrackDynamicEffects() {
 }
 
 // src/hooks/useExportWav.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_playout2 = require("@waveform-playlist/playout");
 
 // src/utils/wavEncoder.ts
@@ -2787,10 +2812,10 @@ function downloadBlob(blob, filename) {
 
 // src/hooks/useExportWav.ts
 function useExportWav() {
-  const [isExporting, setIsExporting] = (0, import_react18.useState)(false);
-  const [progress, setProgress] = (0, import_react18.useState)(0);
-  const [error, setError] = (0, import_react18.useState)(null);
-  const exportWav = (0, import_react18.useCallback)(
+  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",
@@ -3102,23 +3127,23 @@ function generateFadeCurve(startValue, endValue, numPoints, curveType) {
 }
 
 // src/hooks/useAnimationFrameLoop.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var useAnimationFrameLoop = () => {
-  const animationFrameRef = (0, import_react19.useRef)(null);
-  const stopAnimationFrameLoop = (0, import_react19.useCallback)(() => {
+  const animationFrameRef = (0, import_react20.useRef)(null);
+  const stopAnimationFrameLoop = (0, import_react20.useCallback)(() => {
     if (animationFrameRef.current !== null) {
       cancelAnimationFrame(animationFrameRef.current);
       animationFrameRef.current = null;
     }
   }, []);
-  const startAnimationFrameLoop = (0, import_react19.useCallback)(
+  const startAnimationFrameLoop = (0, import_react20.useCallback)(
     (callback) => {
       stopAnimationFrameLoop();
       animationFrameRef.current = requestAnimationFrame(callback);
     },
     [stopAnimationFrameLoop]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     return () => {
       stopAnimationFrameLoop();
     };
@@ -3131,7 +3156,7 @@ var useAnimationFrameLoop = () => {
 };
 
 // src/hooks/useWaveformDataCache.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/workers/peaksWorker.ts
 var import_waveform_data2 = __toESM(require("waveform-data"));
@@ -3363,20 +3388,20 @@ function createPeaksWorker() {
 
 // src/hooks/useWaveformDataCache.ts
 function useWaveformDataCache(tracks, baseScale) {
-  const [cache, setCache] = (0, import_react20.useState)(() => /* @__PURE__ */ new Map());
-  const [isGenerating, setIsGenerating] = (0, import_react20.useState)(false);
-  const workerRef = (0, import_react20.useRef)(null);
-  const generatedByBufferRef = (0, import_react20.useRef)(/* @__PURE__ */ new WeakMap());
-  const inflightByBufferRef = (0, import_react20.useRef)(/* @__PURE__ */ new WeakMap());
-  const subscribersByBufferRef = (0, import_react20.useRef)(/* @__PURE__ */ new WeakMap());
-  const pendingCountRef = (0, import_react20.useRef)(0);
-  const getWorker = (0, import_react20.useCallback)(() => {
+  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)(() => {
     if (!workerRef.current) {
       workerRef.current = createPeaksWorker();
     }
     return workerRef.current;
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     let cancelled = false;
     const generatedByBuffer = generatedByBufferRef.current;
     const inflightByBuffer = inflightByBufferRef.current;
@@ -3481,7 +3506,7 @@ function useWaveformDataCache(tracks, baseScale) {
       setIsGenerating(false);
     };
   }, [tracks, baseScale, getWorker]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     return () => {
       var _a;
       (_a = workerRef.current) == null ? void 0 : _a.terminate();
@@ -3492,8 +3517,8 @@ function useWaveformDataCache(tracks, baseScale) {
 }
 
 // src/hooks/useDynamicTracks.ts
-var import_react21 = require("react");
-var import_core2 = require("@waveform-playlist/core");
+var import_react22 = require("react");
+var import_core4 = require("@waveform-playlist/core");
 var import_playout3 = require("@waveform-playlist/playout");
 function getSourceName(source) {
   var _a, _b, _c, _d, _e;
@@ -3527,13 +3552,13 @@ function decodeSource(source, audioContext, signal) {
   });
 }
 function useDynamicTracks() {
-  const [tracks, setTracks] = (0, import_react21.useState)([]);
-  const [loadingCount, setLoadingCount] = (0, import_react21.useState)(0);
-  const [errors, setErrors] = (0, import_react21.useState)([]);
-  const cancelledRef = (0, import_react21.useRef)(false);
-  const loadingIdsRef = (0, import_react21.useRef)(/* @__PURE__ */ new Set());
-  const abortControllersRef = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react21.useEffect)(() => {
+  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;
@@ -3543,11 +3568,11 @@ function useDynamicTracks() {
       controllers.clear();
     };
   }, []);
-  const addTracks = (0, import_react21.useCallback)((sources) => {
+  const addTracks = (0, import_react22.useCallback)((sources) => {
     if (sources.length === 0) return;
     const audioContext = (0, import_playout3.getGlobalAudioContext)();
     const placeholders = sources.map((source) => ({
-      track: (0, import_core2.createTrack)({ name: `${getSourceName(source)} (loading...)`, clips: [] }),
+      track: (0, import_core4.createTrack)({ name: `${getSourceName(source)} (loading...)`, clips: [] }),
       source
     }));
     setTracks((prev) => [...prev, ...placeholders.map((p) => p.track)]);
@@ -3559,7 +3584,7 @@ function useDynamicTracks() {
       (() => __async(null, null, function* () {
         try {
           const { audioBuffer, name } = yield decodeSource(source, audioContext, controller.signal);
-          const clip = (0, import_core2.createClipFromSeconds)({
+          const clip = (0, import_core4.createClipFromSeconds)({
             audioBuffer,
             startTime: 0,
             duration: audioBuffer.duration,
@@ -3593,7 +3618,7 @@ function useDynamicTracks() {
       }))();
     }
   }, []);
-  const removeTrack = (0, import_react21.useCallback)((trackId) => {
+  const removeTrack = (0, import_react22.useCallback)((trackId) => {
     setTracks((prev) => prev.filter((t) => t.id !== trackId));
     const controller = abortControllersRef.current.get(trackId);
     if (controller) {
@@ -3615,24 +3640,24 @@ function useDynamicTracks() {
 }
 
 // src/hooks/useOutputMeter.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_playout4 = require("@waveform-playlist/playout");
-var import_core3 = require("@waveform-playlist/core");
+var import_core5 = 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_react22.useState)(() => new Array(channelCount).fill(0));
-  const [peakLevels, setPeakLevels] = (0, import_react22.useState)(() => new Array(channelCount).fill(0));
-  const [rmsLevels, setRmsLevels] = (0, import_react22.useState)(() => new Array(channelCount).fill(0));
-  const workletNodeRef = (0, import_react22.useRef)(null);
-  const smoothedPeakRef = (0, import_react22.useRef)(new Array(channelCount).fill(0));
-  const [meterError, setMeterError] = (0, import_react22.useState)(null);
-  const resetPeak = (0, import_react22.useCallback)(
+  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_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!isPlaying) {
       const zeros = new Array(channelCount).fill(0);
       smoothedPeakRef.current = new Array(channelCount).fill(0);
@@ -3641,7 +3666,7 @@ function useOutputMeter(options = {}) {
       setPeakLevels(zeros);
     }
   }, [isPlaying, channelCount]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     let isMounted = true;
     const setup = () => __async(null, null, function* () {
       const context = (0, import_playout4.getGlobalContext)();
@@ -3672,8 +3697,8 @@ function useOutputMeter(options = {}) {
         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_core3.gainToNormalized)(smoothed[ch]));
-          rmsValues.push((0, import_core3.gainToNormalized)(rms[ch]));
+          peakValues.push((0, import_core5.gainToNormalized)(smoothed[ch]));
+          rmsValues.push((0, import_core5.gainToNormalized)(rms[ch]));
         }
         setLevels(peakValues);
         setRmsLevels(rmsValues);
@@ -3713,10 +3738,10 @@ function useOutputMeter(options = {}) {
 
 // src/WaveformPlaylistContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var PlaybackAnimationContext = (0, import_react23.createContext)(null);
-var PlaylistStateContext = (0, import_react23.createContext)(null);
-var PlaylistControlsContext = (0, import_react23.createContext)(null);
-var PlaylistDataContext = (0, import_react23.createContext)(null);
+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 WaveformPlaylistProvider = ({
   tracks,
   timescale = false,
@@ -3743,14 +3768,14 @@ var WaveformPlaylistProvider = ({
 }) => {
   var _a, _b, _c, _d;
   const progressBarWidth = progressBarWidthProp != null ? progressBarWidthProp : barWidth + barGap;
-  const indefinitePlaybackRef = (0, import_react23.useRef)(indefinitePlayback);
+  const indefinitePlaybackRef = (0, import_react24.useRef)(indefinitePlayback);
   indefinitePlaybackRef.current = indefinitePlayback;
-  const stableZoomLevels = (0, import_react23.useMemo)(
+  const stableZoomLevels = (0, import_react24.useMemo)(
     () => zoomLevels,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [zoomLevels == null ? void 0 : zoomLevels.join(",")]
   );
-  const annotations = (0, import_react23.useMemo)(() => {
+  const annotations = (0, import_react24.useMemo)(() => {
     if (!(annotationList == null ? void 0 : annotationList.annotations)) return [];
     if (process.env.NODE_ENV !== "production" && annotationList.annotations.length > 0) {
       const first = annotationList.annotations[0];
@@ -3763,46 +3788,46 @@ var WaveformPlaylistProvider = ({
     }
     return annotationList.annotations;
   }, [annotationList == null ? void 0 : annotationList.annotations]);
-  const annotationsRef = (0, import_react23.useRef)(annotations);
+  const annotationsRef = (0, import_react24.useRef)(annotations);
   annotationsRef.current = annotations;
-  const [activeAnnotationId, setActiveAnnotationIdState] = (0, import_react23.useState)(null);
-  const [isPlaying, setIsPlaying] = (0, import_react23.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react23.useState)(0);
-  const [duration, setDuration] = (0, import_react23.useState)(0);
-  const [audioBuffers, setAudioBuffers] = (0, import_react23.useState)([]);
-  const [peaksDataArray, setPeaksDataArray] = (0, import_react23.useState)([]);
-  const [trackStates, setTrackStates] = (0, import_react23.useState)([]);
-  const [isAutomaticScroll, setIsAutomaticScroll] = (0, import_react23.useState)(automaticScroll);
-  const [continuousPlay, setContinuousPlayState] = (0, import_react23.useState)(
+  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)(
     (_a = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _a : false
   );
-  const [linkEndpoints, setLinkEndpoints] = (0, import_react23.useState)((_b = annotationList == null ? void 0 : annotationList.linkEndpoints) != null ? _b : false);
-  const [annotationsEditable, setAnnotationsEditable] = (0, import_react23.useState)((_c = annotationList == null ? void 0 : annotationList.editable) != null ? _c : false);
-  const [isReady, setIsReady] = (0, import_react23.useState)(false);
-  const engineRef = (0, import_react23.useRef)(null);
-  const audioInitializedRef = (0, import_react23.useRef)(false);
-  const isPlayingRef = (0, import_react23.useRef)(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 audioInitializedRef = (0, import_react24.useRef)(false);
+  const isPlayingRef = (0, import_react24.useRef)(false);
   isPlayingRef.current = isPlaying;
-  const playStartPositionRef = (0, import_react23.useRef)(0);
-  const currentTimeRef = (0, import_react23.useRef)(0);
-  const tracksRef = (0, import_react23.useRef)(tracks);
-  const soundFontCacheRef = (0, import_react23.useRef)(soundFontCache);
+  const playStartPositionRef = (0, import_react24.useRef)(0);
+  const currentTimeRef = (0, import_react24.useRef)(0);
+  const tracksRef = (0, import_react24.useRef)(tracks);
+  const soundFontCacheRef = (0, import_react24.useRef)(soundFontCache);
   soundFontCacheRef.current = soundFontCache;
-  const trackStatesRef = (0, import_react23.useRef)(trackStates);
-  const playbackStartTimeRef = (0, import_react23.useRef)(0);
-  const audioStartPositionRef = (0, import_react23.useRef)(0);
-  const playbackEndTimeRef = (0, import_react23.useRef)(null);
-  const scrollContainerRef = (0, import_react23.useRef)(null);
-  const isAutomaticScrollRef = (0, import_react23.useRef)(false);
-  const continuousPlayRef = (0, import_react23.useRef)((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
-  const activeAnnotationIdRef = (0, import_react23.useRef)(null);
-  const engineTracksRef = (0, import_react23.useRef)(null);
-  const lastTracksVersionRef = (0, import_react23.useRef)(0);
-  const skipEngineDisposeRef = (0, import_react23.useRef)(false);
-  const isDraggingRef = (0, import_react23.useRef)(false);
-  const prevTracksRef = (0, import_react23.useRef)([]);
-  const samplesPerPixelRef = (0, import_react23.useRef)(initialSamplesPerPixel);
-  const sampleRateRef = (0, import_react23.useRef)(
+  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 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 sampleRateRef = (0, import_react24.useRef)(
     typeof AudioContext !== "undefined" ? (0, import_playout5.getGlobalAudioContext)().sampleRate : 48e3
   );
   const { timeFormat, setTimeFormat, formatTime: formatTime2 } = useTimeFormat();
@@ -3841,21 +3866,28 @@ var WaveformPlaylistProvider = ({
     onEngineState: onSelectedTrackEngineState,
     selectedTrackIdRef
   } = useSelectedTrack({ engineRef });
+  const {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    onEngineState: onUndoEngineState
+  } = useUndoState({ engineRef });
   const { animationFrameRef, startAnimationFrameLoop, stopAnimationFrameLoop } = useAnimationFrameLoop();
-  const baseScale = (0, import_react23.useMemo)(
+  const baseScale = (0, import_react24.useMemo)(
     () => Math.min(...stableZoomLevels != null ? stableZoomLevels : [256, 512, 1024, 2048, 4096, 8192]),
     [stableZoomLevels]
   );
   const { cache: waveformDataCache } = useWaveformDataCache(tracks, baseScale);
-  const setContinuousPlay = (0, import_react23.useCallback)((value) => {
+  const setContinuousPlay = (0, import_react24.useCallback)((value) => {
     continuousPlayRef.current = value;
     setContinuousPlayState(value);
   }, []);
-  const setActiveAnnotationId = (0, import_react23.useCallback)((value) => {
+  const setActiveAnnotationId = (0, import_react24.useCallback)((value) => {
     activeAnnotationIdRef.current = value;
     setActiveAnnotationIdState(value);
   }, []);
-  const setLoopRegionFromSelection = (0, import_react23.useCallback)(() => {
+  const setLoopRegionFromSelection = (0, import_react24.useCallback)(() => {
     var _a2, _b2;
     const start = (_a2 = selectionStartRef.current) != null ? _a2 : 0;
     const end = (_b2 = selectionEndRef.current) != null ? _b2 : 0;
@@ -3863,10 +3895,10 @@ var WaveformPlaylistProvider = ({
       setLoopRegion(start, end);
     }
   }, [setLoopRegion, selectionStartRef, selectionEndRef]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     isAutomaticScrollRef.current = isAutomaticScroll;
   }, [isAutomaticScroll]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     trackStatesRef.current = trackStates;
   }, [trackStates]);
   tracksRef.current = tracks;
@@ -3877,7 +3909,7 @@ var WaveformPlaylistProvider = ({
     return current === pt;
   });
   skipEngineDisposeRef.current = isEngineTracks || isDraggingRef.current || isIncrementalAdd;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!scrollContainerRef.current || duration === 0) return;
     const container = scrollContainerRef.current;
     const oldSamplesPerPixel = samplesPerPixelRef.current;
@@ -3893,8 +3925,8 @@ var WaveformPlaylistProvider = ({
     container.scrollLeft = newScrollLeft;
     samplesPerPixelRef.current = newSamplesPerPixel;
   }, [samplesPerPixel, duration]);
-  const pendingResumeRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => {
+  const pendingResumeRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
     var _a2, _b2, _c2, _d2;
     if (isEngineTracks || isDraggingRef.current) {
       if (isEngineTracks) {
@@ -4069,6 +4101,7 @@ var WaveformPlaylistProvider = ({
           onSelectedTrackEngineState(state);
           onZoomEngineState(state);
           onVolumeEngineState(state);
+          onUndoEngineState(state);
           if (!suppressTracksMirroring && state.tracksVersion !== lastTracksVersionRef.current) {
             lastTracksVersionRef.current = state.tracksVersion;
             engineTracksRef.current = state.tracks;
@@ -4126,6 +4159,7 @@ var WaveformPlaylistProvider = ({
     onSelectedTrackEngineState,
     onZoomEngineState,
     onVolumeEngineState,
+    onUndoEngineState,
     onTracksChange,
     masterVolumeRef,
     selectionStartRef,
@@ -4137,7 +4171,7 @@ var WaveformPlaylistProvider = ({
     soundFontCache,
     deferEngineRebuild
   ]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (tracks.length === 0) return;
     const allTrackPeaks = tracks.map((track) => {
       const clipPeaks = track.clips.map((clip) => {
@@ -4203,8 +4237,8 @@ var WaveformPlaylistProvider = ({
     });
     setPeaksDataArray(allTrackPeaks);
   }, [tracks, samplesPerPixel, mono, waveformDataCache, deferEngineRebuild]);
-  const getPlaybackTimeFallbackWarnedRef = (0, import_react23.useRef)(false);
-  const getPlaybackTime = (0, import_react23.useCallback)(() => {
+  const getPlaybackTimeFallbackWarnedRef = (0, import_react24.useRef)(false);
+  const getPlaybackTime = (0, import_react24.useCallback)(() => {
     var _a2, _b2;
     if (engineRef.current) {
       return engineRef.current.getCurrentTime();
@@ -4218,7 +4252,7 @@ var WaveformPlaylistProvider = ({
     const elapsed = (0, import_tone4.getContext)().currentTime - ((_a2 = playbackStartTimeRef.current) != null ? _a2 : 0);
     return ((_b2 = audioStartPositionRef.current) != null ? _b2 : 0) + elapsed;
   }, []);
-  const startAnimationLoop = (0, import_react23.useCallback)(() => {
+  const startAnimationLoop = (0, import_react24.useCallback)(() => {
     const updateTime = () => {
       const time = getPlaybackTime();
       currentTimeRef.current = time;
@@ -4287,7 +4321,7 @@ var WaveformPlaylistProvider = ({
     startAnimationFrameLoop(updateTime);
   }, [duration, setActiveAnnotationId, startAnimationFrameLoop, getPlaybackTime]);
   const stopAnimationLoop = stopAnimationFrameLoop;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const reschedulePlayback = () => __async(null, null, function* () {
       if (isPlaying && animationFrameRef.current && engineRef.current) {
         if (continuousPlay) {
@@ -4312,7 +4346,7 @@ var WaveformPlaylistProvider = ({
       stopAnimationLoop();
     });
   }, [continuousPlay, isPlaying, startAnimationLoop, stopAnimationLoop, animationFrameRef]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const resumePlayback = () => __async(null, null, function* () {
       if (pendingResumeRef.current && engineRef.current) {
         const { position } = pendingResumeRef.current;
@@ -4336,7 +4370,7 @@ var WaveformPlaylistProvider = ({
       stopAnimationLoop();
     });
   }, [tracks, startAnimationLoop, stopAnimationLoop]);
-  const play = (0, import_react23.useCallback)(
+  const play = (0, import_react24.useCallback)(
     (startTime, playDuration) => __async(null, null, function* () {
       if (!engineRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
@@ -4367,7 +4401,7 @@ var WaveformPlaylistProvider = ({
     }),
     [startAnimationLoop, stopAnimationLoop]
   );
-  const pause = (0, import_react23.useCallback)(() => {
+  const pause = (0, import_react24.useCallback)(() => {
     if (!engineRef.current) return;
     const pauseTime = getPlaybackTime();
     engineRef.current.pause();
@@ -4376,7 +4410,7 @@ var WaveformPlaylistProvider = ({
     currentTimeRef.current = pauseTime;
     setCurrentTime(pauseTime);
   }, [stopAnimationLoop, getPlaybackTime]);
-  const stop = (0, import_react23.useCallback)(() => {
+  const stop = (0, import_react24.useCallback)(() => {
     if (!engineRef.current) return;
     engineRef.current.stop();
     setIsPlaying(false);
@@ -4385,7 +4419,7 @@ var WaveformPlaylistProvider = ({
     setCurrentTime(playStartPositionRef.current);
     setActiveAnnotationId(null);
   }, [stopAnimationLoop, setActiveAnnotationId]);
-  const seekTo = (0, import_react23.useCallback)(
+  const seekTo = (0, import_react24.useCallback)(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
       currentTimeRef.current = clampedTime;
@@ -4396,7 +4430,7 @@ var WaveformPlaylistProvider = ({
     },
     [duration, isPlaying, play]
   );
-  const setTrackMute = (0, import_react23.useCallback)(
+  const setTrackMute = (0, import_react24.useCallback)(
     (trackIndex, muted) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4410,7 +4444,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackSolo = (0, import_react23.useCallback)(
+  const setTrackSolo = (0, import_react24.useCallback)(
     (trackIndex, soloed) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4424,7 +4458,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackVolume = (0, import_react23.useCallback)(
+  const setTrackVolume = (0, import_react24.useCallback)(
     (trackIndex, volume2) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4438,7 +4472,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackPan = (0, import_react23.useCallback)(
+  const setTrackPan = (0, import_react24.useCallback)(
     (trackIndex, pan) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4452,7 +4486,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setSelection = (0, import_react23.useCallback)(
+  const setSelection = (0, import_react24.useCallback)(
     (start, end) => {
       setSelectionEngine(start, end);
       currentTimeRef.current = start;
@@ -4465,12 +4499,12 @@ var WaveformPlaylistProvider = ({
     },
     [isPlaying, setSelectionEngine]
   );
-  const setScrollContainer = (0, import_react23.useCallback)((element) => {
+  const setScrollContainer = (0, import_react24.useCallback)((element) => {
     scrollContainerRef.current = element;
   }, []);
-  const onAnnotationsChangeRef = (0, import_react23.useRef)(onAnnotationsChange);
+  const onAnnotationsChangeRef = (0, import_react24.useRef)(onAnnotationsChange);
   onAnnotationsChangeRef.current = onAnnotationsChange;
-  const setAnnotations = (0, import_react23.useCallback)(
+  const setAnnotations = (0, import_react24.useCallback)(
     (action) => {
       const updated = typeof action === "function" ? action(annotationsRef.current) : action;
       if (!onAnnotationsChangeRef.current) {
@@ -4488,7 +4522,7 @@ var WaveformPlaylistProvider = ({
   const sampleRate = sampleRateRef.current;
   const timeScaleHeight = timescale ? 30 : 0;
   const minimumPlaylistHeight = tracks.length * waveHeight + timeScaleHeight;
-  const animationValue = (0, import_react23.useMemo)(
+  const animationValue = (0, import_react24.useMemo)(
     () => ({
       isPlaying,
       currentTime,
@@ -4506,7 +4540,7 @@ var WaveformPlaylistProvider = ({
       getPlaybackTime
     ]
   );
-  const stateValue = (0, import_react23.useMemo)(
+  const stateValue = (0, import_react24.useMemo)(
     () => ({
       continuousPlay,
       linkEndpoints,
@@ -4520,7 +4554,9 @@ var WaveformPlaylistProvider = ({
       selectedTrackId,
       loopStart,
       loopEnd,
-      indefinitePlayback
+      indefinitePlayback,
+      canUndo,
+      canRedo
     }),
     [
       continuousPlay,
@@ -4535,20 +4571,22 @@ var WaveformPlaylistProvider = ({
       selectedTrackId,
       loopStart,
       loopEnd,
-      indefinitePlayback
+      indefinitePlayback,
+      canUndo,
+      canRedo
     ]
   );
-  const setCurrentTimeControl = (0, import_react23.useCallback)(
+  const setCurrentTimeControl = (0, import_react24.useCallback)(
     (time) => {
       currentTimeRef.current = time;
       setCurrentTime(time);
     },
     [currentTimeRef]
   );
-  const setAutomaticScrollControl = (0, import_react23.useCallback)((enabled) => {
+  const setAutomaticScrollControl = (0, import_react24.useCallback)((enabled) => {
     setIsAutomaticScroll(enabled);
   }, []);
-  const controlsValue = (0, import_react23.useMemo)(
+  const controlsValue = (0, import_react24.useMemo)(
     () => ({
       // Playback controls
       play,
@@ -4586,7 +4624,10 @@ var WaveformPlaylistProvider = ({
       setLoopEnabled,
       setLoopRegion,
       setLoopRegionFromSelection,
-      clearLoopRegion
+      clearLoopRegion,
+      // Undo/redo
+      undo,
+      redo
     }),
     [
       play,
@@ -4616,10 +4657,12 @@ var WaveformPlaylistProvider = ({
       setLoopEnabled,
       setLoopRegion,
       setLoopRegionFromSelection,
-      clearLoopRegion
+      clearLoopRegion,
+      undo,
+      redo
     ]
   );
-  const dataValue = (0, import_react23.useMemo)(
+  const dataValue = (0, import_react24.useMemo)(
     () => ({
       duration,
       audioBuffers,
@@ -4675,28 +4718,28 @@ 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_react23.useContext)(PlaybackAnimationContext);
+  const context = (0, import_react24.useContext)(PlaybackAnimationContext);
   if (!context) {
     throw new Error("usePlaybackAnimation must be used within WaveformPlaylistProvider");
   }
   return context;
 };
 var usePlaylistState = () => {
-  const context = (0, import_react23.useContext)(PlaylistStateContext);
+  const context = (0, import_react24.useContext)(PlaylistStateContext);
   if (!context) {
     throw new Error("usePlaylistState must be used within WaveformPlaylistProvider");
   }
   return context;
 };
 var usePlaylistControls = () => {
-  const context = (0, import_react23.useContext)(PlaylistControlsContext);
+  const context = (0, import_react24.useContext)(PlaylistControlsContext);
   if (!context) {
     throw new Error("usePlaylistControls must be used within WaveformPlaylistProvider");
   }
   return context;
 };
 var usePlaylistData = () => {
-  const context = (0, import_react23.useContext)(PlaylistDataContext);
+  const context = (0, import_react24.useContext)(PlaylistDataContext);
   if (!context) {
     throw new Error("usePlaylistData must be used within WaveformPlaylistProvider");
   }
@@ -4704,15 +4747,15 @@ var usePlaylistData = () => {
 };
 
 // src/MediaElementPlaylistContext.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_styled_components2 = require("styled-components");
 var import_media_element_playout = require("@waveform-playlist/media-element-playout");
 var import_ui_components3 = require("@waveform-playlist/ui-components");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var MediaElementAnimationContext = (0, import_react24.createContext)(null);
-var MediaElementStateContext = (0, import_react24.createContext)(null);
-var MediaElementControlsContext = (0, import_react24.createContext)(null);
-var MediaElementDataContext = (0, import_react24.createContext)(null);
+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 MediaElementPlaylistProvider = ({
   track,
   samplesPerPixel: initialSamplesPerPixel = 1024,
@@ -4734,12 +4777,12 @@ var MediaElementPlaylistProvider = ({
 }) => {
   var _a;
   const progressBarWidth = progressBarWidthProp != null ? progressBarWidthProp : barWidth + barGap;
-  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 [peaksDataArray, setPeaksDataArray] = (0, import_react24.useState)([]);
-  const [playbackRate, setPlaybackRateState] = (0, import_react24.useState)(initialPlaybackRate);
-  const annotations = (0, import_react24.useMemo)(() => {
+  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)(() => {
     if (!(annotationList == null ? void 0 : annotationList.annotations)) return [];
     if (process.env.NODE_ENV !== "production" && annotationList.annotations.length > 0) {
       const first = annotationList.annotations[0];
@@ -4752,41 +4795,41 @@ var MediaElementPlaylistProvider = ({
     }
     return annotationList.annotations;
   }, [annotationList == null ? void 0 : annotationList.annotations]);
-  const annotationsRef = (0, import_react24.useRef)(annotations);
+  const annotationsRef = (0, import_react25.useRef)(annotations);
   annotationsRef.current = annotations;
-  const [activeAnnotationId, setActiveAnnotationIdState] = (0, import_react24.useState)(null);
-  const [continuousPlay, setContinuousPlayState] = (0, import_react24.useState)(
+  const [activeAnnotationId, setActiveAnnotationIdState] = (0, import_react25.useState)(null);
+  const [continuousPlay, setContinuousPlayState] = (0, import_react25.useState)(
     (_a = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _a : false
   );
-  const [samplesPerPixel] = (0, import_react24.useState)(initialSamplesPerPixel);
-  const [isAutomaticScroll, setIsAutomaticScroll] = (0, import_react24.useState)(automaticScroll);
-  const playoutRef = (0, import_react24.useRef)(null);
-  const currentTimeRef = (0, import_react24.useRef)(0);
-  const continuousPlayRef = (0, import_react24.useRef)(continuousPlay);
-  const activeAnnotationIdRef = (0, import_react24.useRef)(null);
-  const scrollContainerRef = (0, import_react24.useRef)(null);
-  const isAutomaticScrollRef = (0, import_react24.useRef)(automaticScroll);
-  const samplesPerPixelRef = (0, import_react24.useRef)(initialSamplesPerPixel);
+  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 { startAnimationFrameLoop, stopAnimationFrameLoop } = useAnimationFrameLoop();
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     continuousPlayRef.current = continuousPlay;
   }, [continuousPlay]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     isAutomaticScrollRef.current = isAutomaticScroll;
   }, [isAutomaticScroll]);
-  const setActiveAnnotationId = (0, import_react24.useCallback)((value) => {
+  const setActiveAnnotationId = (0, import_react25.useCallback)((value) => {
     activeAnnotationIdRef.current = value;
     setActiveAnnotationIdState(value);
   }, []);
-  const setContinuousPlay = (0, import_react24.useCallback)((value) => {
+  const setContinuousPlay = (0, import_react25.useCallback)((value) => {
     continuousPlayRef.current = value;
     setContinuousPlayState(value);
   }, []);
-  const setScrollContainer = (0, import_react24.useCallback)((element) => {
+  const setScrollContainer = (0, import_react25.useCallback)((element) => {
     scrollContainerRef.current = element;
   }, []);
   const sampleRate = track.waveformData.sample_rate;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     var _a2, _b;
     const playout = new import_media_element_playout.MediaElementPlayout({
       playbackRate: initialPlaybackRate,
@@ -4833,7 +4876,7 @@ var MediaElementPlaylistProvider = ({
     stopAnimationFrameLoop,
     setActiveAnnotationId
   ]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     var _a2;
     try {
       const extractedPeaks = extractPeaksFromWaveformData(
@@ -4862,7 +4905,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_react24.useCallback)(() => {
+  const startAnimationLoop = (0, import_react25.useCallback)(() => {
     const updateTime = () => {
       var _a2, _b, _c;
       const time = (_b = (_a2 = playoutRef.current) == null ? void 0 : _a2.getCurrentTime()) != null ? _b : 0;
@@ -4905,7 +4948,7 @@ var MediaElementPlaylistProvider = ({
     startAnimationFrameLoop(updateTime);
   }, [setActiveAnnotationId, sampleRate, startAnimationFrameLoop]);
   const stopAnimationLoop = stopAnimationFrameLoop;
-  const play = (0, import_react24.useCallback)(
+  const play = (0, import_react25.useCallback)(
     (startTime) => {
       if (!playoutRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
@@ -4915,14 +4958,14 @@ var MediaElementPlaylistProvider = ({
     },
     [startAnimationLoop]
   );
-  const pause = (0, import_react24.useCallback)(() => {
+  const pause = (0, import_react25.useCallback)(() => {
     if (!playoutRef.current) return;
     playoutRef.current.pause();
     setIsPlaying(false);
     stopAnimationLoop();
     setCurrentTime(playoutRef.current.getCurrentTime());
   }, [stopAnimationLoop]);
-  const stop = (0, import_react24.useCallback)(() => {
+  const stop = (0, import_react25.useCallback)(() => {
     if (!playoutRef.current) return;
     playoutRef.current.stop();
     setIsPlaying(false);
@@ -4931,7 +4974,7 @@ var MediaElementPlaylistProvider = ({
     setCurrentTime(0);
     setActiveAnnotationId(null);
   }, [stopAnimationLoop, setActiveAnnotationId]);
-  const seekTo = (0, import_react24.useCallback)(
+  const seekTo = (0, import_react25.useCallback)(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
       currentTimeRef.current = clampedTime;
@@ -4942,7 +4985,7 @@ var MediaElementPlaylistProvider = ({
     },
     [duration]
   );
-  const setPlaybackRate = (0, import_react24.useCallback)((rate) => {
+  const setPlaybackRate = (0, import_react25.useCallback)((rate) => {
     const clampedRate = Math.max(0.5, Math.min(2, rate));
     setPlaybackRateState(clampedRate);
     if (playoutRef.current) {
@@ -4950,7 +4993,7 @@ var MediaElementPlaylistProvider = ({
     }
   }, []);
   const timeScaleHeight = timescale ? 30 : 0;
-  const animationValue = (0, import_react24.useMemo)(
+  const animationValue = (0, import_react25.useMemo)(
     () => ({
       isPlaying,
       currentTime,
@@ -4958,7 +5001,7 @@ var MediaElementPlaylistProvider = ({
     }),
     [isPlaying, currentTime]
   );
-  const stateValue = (0, import_react24.useMemo)(
+  const stateValue = (0, import_react25.useMemo)(
     () => ({
       continuousPlay,
       annotations,
@@ -4968,9 +5011,9 @@ var MediaElementPlaylistProvider = ({
     }),
     [continuousPlay, annotations, activeAnnotationId, playbackRate, isAutomaticScroll]
   );
-  const onAnnotationsChangeRef = (0, import_react24.useRef)(onAnnotationsChange);
+  const onAnnotationsChangeRef = (0, import_react25.useRef)(onAnnotationsChange);
   onAnnotationsChangeRef.current = onAnnotationsChange;
-  const setAnnotations = (0, import_react24.useCallback)(
+  const setAnnotations = (0, import_react25.useCallback)(
     (action) => {
       const updated = typeof action === "function" ? action(annotationsRef.current) : action;
       if (!onAnnotationsChangeRef.current) {
@@ -4985,7 +5028,7 @@ var MediaElementPlaylistProvider = ({
     },
     []
   );
-  const controlsValue = (0, import_react24.useMemo)(
+  const controlsValue = (0, import_react25.useMemo)(
     () => ({
       play,
       pause,
@@ -5013,7 +5056,7 @@ var MediaElementPlaylistProvider = ({
       setScrollContainer
     ]
   );
-  const dataValue = (0, import_react24.useMemo)(
+  const dataValue = (0, import_react25.useMemo)(
     () => ({
       duration,
       peaksDataArray,
@@ -5048,28 +5091,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_react24.useContext)(MediaElementAnimationContext);
+  const context = (0, import_react25.useContext)(MediaElementAnimationContext);
   if (!context) {
     throw new Error("useMediaElementAnimation must be used within MediaElementPlaylistProvider");
   }
   return context;
 };
 var useMediaElementState = () => {
-  const context = (0, import_react24.useContext)(MediaElementStateContext);
+  const context = (0, import_react25.useContext)(MediaElementStateContext);
   if (!context) {
     throw new Error("useMediaElementState must be used within MediaElementPlaylistProvider");
   }
   return context;
 };
 var useMediaElementControls = () => {
-  const context = (0, import_react24.useContext)(MediaElementControlsContext);
+  const context = (0, import_react25.useContext)(MediaElementControlsContext);
   if (!context) {
     throw new Error("useMediaElementControls must be used within MediaElementPlaylistProvider");
   }
   return context;
 };
 var useMediaElementData = () => {
-  const context = (0, import_react24.useContext)(MediaElementDataContext);
+  const context = (0, import_react25.useContext)(MediaElementDataContext);
   if (!context) {
     throw new Error("useMediaElementData must be used within MediaElementPlaylistProvider");
   }
@@ -5077,7 +5120,7 @@ var useMediaElementData = () => {
 };
 
 // src/components/PlaybackControls.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_ui_components4 = require("@waveform-playlist/ui-components");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var PlayButton = ({ className }) => {
@@ -5213,7 +5256,7 @@ var ClearAllButton = ({
   className
 }) => {
   const { stop } = usePlaylistControls();
-  const handleClick = (0, import_react25.useCallback)(() => {
+  const handleClick = (0, import_react26.useCallback)(() => {
     stop();
     onClearAll();
   }, [stop, onClearAll]);
@@ -5241,7 +5284,7 @@ var ZoomOutButton = ({
 };
 
 // src/components/ContextualControls.tsx
-var import_react26 = require("react");
+var import_react27 = 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");
@@ -5274,11 +5317,11 @@ var PositionDisplay = import_styled_components3.default.span`
 `;
 var AudioPosition = ({ className }) => {
   var _a;
-  const timeRef = (0, import_react26.useRef)(null);
-  const animationFrameRef = (0, import_react26.useRef)(null);
+  const timeRef = (0, import_react27.useRef)(null);
+  const animationFrameRef = (0, import_react27.useRef)(null);
   const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
   const { timeFormat: format } = usePlaylistData();
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const updateTime = () => {
       var _a2;
       if (timeRef.current) {
@@ -5301,7 +5344,7 @@ var AudioPosition = ({ className }) => {
       }
     };
   }, [isPlaying, format, currentTimeRef, getPlaybackTime]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     var _a2;
     if (!isPlaying && timeRef.current) {
       timeRef.current.textContent = (0, import_ui_components6.formatTime)((_a2 = currentTimeRef.current) != null ? _a2 : 0, format);
@@ -5336,11 +5379,11 @@ var AutomaticScrollCheckbox = ({ className }) => {
 };
 
 // src/AnnotationIntegrationContext.tsx
-var import_react27 = require("react");
-var AnnotationIntegrationContext = (0, import_react27.createContext)(null);
+var import_react28 = require("react");
+var AnnotationIntegrationContext = (0, import_react28.createContext)(null);
 var AnnotationIntegrationProvider = AnnotationIntegrationContext.Provider;
 function useAnnotationIntegration() {
-  const context = (0, import_react27.useContext)(AnnotationIntegrationContext);
+  const context = (0, import_react28.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"
@@ -5426,22 +5469,22 @@ var ExportWavButton = ({
 };
 
 // src/contexts/ClipInteractionContext.tsx
-var import_react28 = require("react");
-var ClipInteractionContext = (0, import_react28.createContext)(false);
+var import_react29 = require("react");
+var ClipInteractionContext = (0, import_react29.createContext)(false);
 var ClipInteractionContextProvider = ClipInteractionContext.Provider;
 function useClipInteractionEnabled() {
-  return (0, import_react28.useContext)(ClipInteractionContext);
+  return (0, import_react29.useContext)(ClipInteractionContext);
 }
 
 // src/components/PlaylistVisualization.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_react_dom = require("react-dom");
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_playout6 = require("@waveform-playlist/playout");
 var import_ui_components9 = require("@waveform-playlist/ui-components");
 
 // src/components/AnimatedPlayhead.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var PlayheadLine = import_styled_components4.default.div.attrs((props) => ({
@@ -5459,11 +5502,11 @@ var PlayheadLine = import_styled_components4.default.div.attrs((props) => ({
   will-change: transform;
 `;
 var AnimatedPlayhead = ({ color = "#ff0000" }) => {
-  const playheadRef = (0, import_react29.useRef)(null);
-  const animationFrameRef = (0, import_react29.useRef)(null);
+  const playheadRef = (0, import_react30.useRef)(null);
+  const animationFrameRef = (0, import_react30.useRef)(null);
   const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = usePlaylistData();
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const updatePosition = () => {
       var _a;
       if (playheadRef.current) {
@@ -5487,7 +5530,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, currentTimeRef, getPlaybackTime]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     var _a;
     if (!isPlaying && playheadRef.current) {
       const time = (_a = currentTimeRef.current) != null ? _a : 0;
@@ -5499,9 +5542,9 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
 };
 
 // src/components/ChannelWithProgress.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
-var import_core4 = require("@waveform-playlist/core");
+var import_core6 = require("@waveform-playlist/core");
 var import_ui_components8 = require("@waveform-playlist/ui-components");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ChannelWrapper = import_styled_components5.default.div`
@@ -5557,19 +5600,19 @@ var ChannelWithProgress = (_a) => {
     "clipSampleRate",
     "clipOffsetSeconds"
   ]);
-  const progressRef = (0, import_react30.useRef)(null);
-  const animationFrameRef = (0, import_react30.useRef)(null);
+  const progressRef = (0, import_react31.useRef)(null);
+  const animationFrameRef = (0, import_react31.useRef)(null);
   const theme = (0, import_ui_components8.useTheme)();
   const { waveHeight } = (0, import_ui_components8.usePlaylistInfo)();
   const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate } = usePlaylistData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
-  const clipPixelWidth = (0, import_core4.clipPixelWidth)(
+  const clipPixelWidth = (0, import_core6.clipPixelWidth)(
     clipStartSample,
     clipDurationSamples,
     samplesPerPixel
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const updateProgress = () => {
       var _a2;
       if (progressRef.current) {
@@ -5611,7 +5654,7 @@ var ChannelWithProgress = (_a) => {
     currentTimeRef,
     getPlaybackTime
   ]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     var _a2;
     if (!isPlaying && progressRef.current) {
       const currentTime = (_a2 = currentTimeRef.current) != null ? _a2 : 0;
@@ -5696,11 +5739,11 @@ var ChannelWithProgress = (_a) => {
 };
 
 // src/SpectrogramIntegrationContext.tsx
-var import_react31 = require("react");
-var SpectrogramIntegrationContext = (0, import_react31.createContext)(null);
+var import_react32 = require("react");
+var SpectrogramIntegrationContext = (0, import_react32.createContext)(null);
 var SpectrogramIntegrationProvider = SpectrogramIntegrationContext.Provider;
 function useSpectrogramIntegration() {
-  const context = (0, import_react31.useContext)(SpectrogramIntegrationContext);
+  const context = (0, import_react32.useContext)(SpectrogramIntegrationContext);
   if (!context) {
     throw new Error(
       "useSpectrogramIntegration must be used within <SpectrogramProvider>. Install @waveform-playlist/spectrogram and wrap your app with <SpectrogramProvider>."
@@ -5780,7 +5823,7 @@ var PlaylistVisualization = ({
     isLoopEnabled,
     indefinitePlayback
   } = usePlaylistState();
-  const annotationIntegration = (0, import_react32.useContext)(AnnotationIntegrationContext);
+  const annotationIntegration = (0, import_react33.useContext)(AnnotationIntegrationContext);
   const {
     setAnnotations: _setAnnotations,
     setActiveAnnotationId,
@@ -5810,8 +5853,8 @@ var PlaylistVisualization = ({
     isReady,
     mono
   } = usePlaylistData();
-  const spectrogram = (0, import_react32.useContext)(SpectrogramIntegrationContext);
-  const perTrackSpectrogramHelpers = (0, import_react32.useMemo)(() => {
+  const spectrogram = (0, import_react33.useContext)(SpectrogramIntegrationContext);
+  const perTrackSpectrogramHelpers = (0, import_react33.useMemo)(() => {
     if (!spectrogram)
       return /* @__PURE__ */ new Map();
     const helpers = /* @__PURE__ */ new Map();
@@ -5830,7 +5873,7 @@ var PlaylistVisualization = ({
     });
     return helpers;
   }, [tracks, spectrogram]);
-  const workerCanvasApi = (0, import_react32.useMemo)(() => {
+  const workerCanvasApi = (0, import_react33.useMemo)(() => {
     if (!(spectrogram == null ? void 0 : spectrogram.spectrogramWorkerApi)) return void 0;
     return {
       registerCanvas: spectrogram.spectrogramWorkerApi.registerCanvas.bind(
@@ -5841,11 +5884,11 @@ var PlaylistVisualization = ({
       )
     };
   }, [spectrogram == null ? void 0 : spectrogram.spectrogramWorkerApi]);
-  const [settingsModalTrackId, setSettingsModalTrackId] = (0, import_react32.useState)(null);
-  const [isSelecting, setIsSelecting] = (0, import_react32.useState)(false);
-  const mouseDownTimeRef = (0, import_react32.useRef)(0);
-  const scrollContainerRef = (0, import_react32.useRef)(null);
-  const handleScrollContainerRef = (0, import_react32.useCallback)(
+  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)(
     (element) => {
       scrollContainerRef.current = element;
       setScrollContainer(element);
@@ -5883,7 +5926,7 @@ var PlaylistVisualization = ({
       );
     }
   });
-  const selectTrack = (0, import_react32.useCallback)(
+  const selectTrack = (0, import_react33.useCallback)(
     (trackIndex) => {
       if (trackIndex >= 0 && trackIndex < tracks.length) {
         const track = tracks[trackIndex];
@@ -6324,7 +6367,7 @@ var PlaylistVisualization = ({
 };
 
 // src/components/PlaylistAnnotationList.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var PlaylistAnnotationList = ({
   height,
@@ -6339,7 +6382,7 @@ var PlaylistAnnotationList = ({
   const integration = useAnnotationIntegration();
   const { setAnnotations } = usePlaylistControls();
   const resolvedConfig = annotationListConfig != null ? annotationListConfig : { linkEndpoints, continuousPlay };
-  const handleAnnotationUpdate = (0, import_react33.useCallback)(
+  const handleAnnotationUpdate = (0, import_react34.useCallback)(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6423,8 +6466,8 @@ var Waveform = ({
 };
 
 // src/components/MediaElementPlaylist.tsx
-var import_react36 = require("react");
-var import_react37 = require("@dnd-kit/react");
+var import_react37 = require("react");
+var import_react38 = require("@dnd-kit/react");
 var import_modifiers = require("@dnd-kit/abstract/modifiers");
 var import_ui_components11 = require("@waveform-playlist/ui-components");
 
@@ -6448,7 +6491,7 @@ var noDropAnimationPlugins = (defaults) => {
 };
 
 // src/components/AnimatedMediaElementPlayhead.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var PlayheadLine2 = import_styled_components7.default.div`
@@ -6465,11 +6508,11 @@ var PlayheadLine2 = import_styled_components7.default.div`
 var AnimatedMediaElementPlayhead = ({
   color = "#ff0000"
 }) => {
-  const playheadRef = (0, import_react34.useRef)(null);
-  const animationFrameRef = (0, import_react34.useRef)(null);
+  const playheadRef = (0, import_react35.useRef)(null);
+  const animationFrameRef = (0, import_react35.useRef)(null);
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = useMediaElementData();
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const updatePosition = () => {
       var _a;
       if (playheadRef.current) {
@@ -6493,7 +6536,7 @@ var AnimatedMediaElementPlayhead = ({
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, currentTimeRef]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     var _a;
     if (!isPlaying && playheadRef.current) {
       const time = (_a = currentTimeRef.current) != null ? _a : 0;
@@ -6505,7 +6548,7 @@ var AnimatedMediaElementPlayhead = ({
 };
 
 // src/components/ChannelWithMediaElementProgress.tsx
-var import_react35 = require("react");
+var import_react36 = 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");
@@ -6545,14 +6588,14 @@ var ChannelWithMediaElementProgress = (_a) => {
     "clipStartSample",
     "clipDurationSamples"
   ]);
-  const progressRef = (0, import_react35.useRef)(null);
-  const animationFrameRef = (0, import_react35.useRef)(null);
+  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 { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate } = useMediaElementData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const updateProgress = () => {
       var _a2;
       if (progressRef.current) {
@@ -6594,7 +6637,7 @@ var ChannelWithMediaElementProgress = (_a) => {
     smartChannelProps.length,
     currentTimeRef
   ]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     var _a2;
     if (!isPlaying && progressRef.current) {
       const currentTime = (_a2 = currentTimeRef.current) != null ? _a2 : 0;
@@ -6673,7 +6716,7 @@ var MediaElementPlaylist = ({
   const theme = (0, import_ui_components11.useTheme)();
   const { isPlaying } = useMediaElementAnimation();
   const { annotations, activeAnnotationId } = useMediaElementState();
-  const annotationIntegration = (0, import_react36.useContext)(AnnotationIntegrationContext);
+  const annotationIntegration = (0, import_react37.useContext)(AnnotationIntegrationContext);
   const { play, seekTo, setActiveAnnotationId, setAnnotations, setScrollContainer } = useMediaElementControls();
   const {
     duration,
@@ -6689,11 +6732,11 @@ var MediaElementPlaylist = ({
     fadeIn,
     fadeOut
   } = useMediaElementData();
-  const [selectionStart, setSelectionStart] = (0, import_react36.useState)(0);
-  const [selectionEnd, setSelectionEnd] = (0, import_react36.useState)(0);
-  const [isSelecting, setIsSelecting] = (0, import_react36.useState)(false);
-  const scrollContainerRef = (0, import_react36.useRef)(null);
-  const handleScrollContainerRef = (0, import_react36.useCallback)(
+  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)(
     (el) => {
       scrollContainerRef.current = el;
       setScrollContainer(el);
@@ -6701,7 +6744,7 @@ var MediaElementPlaylist = ({
     [setScrollContainer]
   );
   const tracksFullWidth = Math.floor(duration * sampleRate / samplesPerPixel);
-  const handleAnnotationClick = (0, import_react36.useCallback)(
+  const handleAnnotationClick = (0, import_react37.useCallback)(
     (annotation) => __async(null, null, function* () {
       setActiveAnnotationId(annotation.id);
       try {
@@ -6716,7 +6759,7 @@ var MediaElementPlaylist = ({
     }),
     [setActiveAnnotationId, play]
   );
-  const handleAnnotationUpdate = (0, import_react36.useCallback)(
+  const handleAnnotationUpdate = (0, import_react37.useCallback)(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6730,8 +6773,8 @@ var MediaElementPlaylist = ({
     duration,
     linkEndpoints: linkEndpointsProp
   });
-  const mouseDownTimeRef = (0, import_react36.useRef)(0);
-  const handleMouseDown = (0, import_react36.useCallback)(
+  const mouseDownTimeRef = (0, import_react37.useRef)(0);
+  const handleMouseDown = (0, import_react37.useCallback)(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
@@ -6743,7 +6786,7 @@ var MediaElementPlaylist = ({
     },
     [samplesPerPixel, sampleRate]
   );
-  const handleMouseMove = (0, import_react36.useCallback)(
+  const handleMouseMove = (0, import_react37.useCallback)(
     (e) => {
       if (!isSelecting) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -6753,7 +6796,7 @@ var MediaElementPlaylist = ({
     },
     [isSelecting, samplesPerPixel, sampleRate]
   );
-  const handleMouseUp = (0, import_react36.useCallback)(
+  const handleMouseUp = (0, import_react37.useCallback)(
     (e) => {
       if (!isSelecting) return;
       setIsSelecting(false);
@@ -6885,7 +6928,7 @@ var MediaElementPlaylist = ({
               );
             }),
             annotations.length > 0 && annotationIntegration && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_react37.DragDropProvider,
+              import_react38.DragDropProvider,
               {
                 onDragStart,
                 onDragMove,
@@ -6939,7 +6982,7 @@ var MediaElementPlaylist = ({
 };
 
 // src/components/MediaElementAnnotationList.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var MediaElementAnnotationList = ({
   height,
@@ -6955,7 +6998,7 @@ var MediaElementAnnotationList = ({
   const integration = useAnnotationIntegration();
   const { setAnnotations } = useMediaElementControls();
   const resolvedConfig = annotationListConfig != null ? annotationListConfig : { linkEndpoints: false, continuousPlay };
-  const handleAnnotationUpdate = (0, import_react38.useCallback)(
+  const handleAnnotationUpdate = (0, import_react39.useCallback)(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -7030,6 +7073,7 @@ var KeyboardShortcuts = ({
   playback = false,
   clipSplitting = false,
   annotations = false,
+  undo: undoEnabled = false,
   additionalShortcuts = []
 }) => {
   const { tracks, samplesPerPixel, playoutRef, duration } = usePlaylistData();
@@ -7039,7 +7083,7 @@ var KeyboardShortcuts = ({
     activeAnnotationId,
     continuousPlay
   } = usePlaylistState();
-  const { setAnnotations, setActiveAnnotationId, scrollContainerRef, play } = usePlaylistControls();
+  const { setAnnotations, setActiveAnnotationId, scrollContainerRef, play, undo, redo } = usePlaylistControls();
   const { splitClipAtPlayhead } = useClipSplitting({
     tracks,
     samplesPerPixel,
@@ -7054,6 +7098,14 @@ var KeyboardShortcuts = ({
       preventDefault: true
     });
   }
+  if (undoEnabled) {
+    allAdditional.push(
+      { key: "z", ctrlKey: true, shiftKey: false, action: undo, description: "Undo" },
+      { key: "z", metaKey: true, shiftKey: false, action: undo, description: "Undo" },
+      { key: "z", ctrlKey: true, shiftKey: true, action: redo, description: "Redo" },
+      { key: "z", metaKey: true, shiftKey: true, action: redo, description: "Redo" }
+    );
+  }
   if (additionalShortcuts.length > 0) {
     allAdditional.push(...additionalShortcuts);
   }
@@ -7076,10 +7128,10 @@ var KeyboardShortcuts = ({
 };
 
 // src/components/ClipInteractionProvider.tsx
-var import_react39 = __toESM(require("react"));
-var import_react40 = require("@dnd-kit/react");
+var import_react40 = __toESM(require("react"));
+var import_react41 = require("@dnd-kit/react");
 var import_modifiers2 = require("@dnd-kit/abstract/modifiers");
-var import_core6 = require("@waveform-playlist/core");
+var import_core8 = require("@waveform-playlist/core");
 var import_ui_components12 = require("@waveform-playlist/ui-components");
 
 // src/modifiers/ClipCollisionModifier.ts
@@ -7108,7 +7160,7 @@ var ClipCollisionModifier = _ClipCollisionModifier;
 
 // src/modifiers/SnapToGridModifier.ts
 var import_abstract2 = require("@dnd-kit/abstract");
-var import_core5 = require("@waveform-playlist/core");
+var import_core7 = require("@waveform-playlist/core");
 var _SnapToGridModifier = class _SnapToGridModifier extends import_abstract2.Modifier {
   apply(operation) {
     const { transform, source } = operation;
@@ -7129,18 +7181,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_core5.ticksPerBar)(timeSignature) : (0, import_core5.ticksPerBeat)(timeSignature);
+    const gridTicks = snapTo === "bar" ? (0, import_core7.ticksPerBar)(timeSignature) : (0, import_core7.ticksPerBeat)(timeSignature);
     if (startSample !== void 0) {
       const proposedSamples = startSample + transform.x * samplesPerPixel;
-      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);
+      const proposedTicks = (0, import_core7.samplesToTicks)(proposedSamples, bpm, sampleRate);
+      const snappedTicks2 = (0, import_core7.snapToGrid)(proposedTicks, gridTicks);
+      const snappedSamples2 = (0, import_core7.ticksToSamples)(snappedTicks2, bpm, sampleRate);
       return { x: (snappedSamples2 - startSample) / samplesPerPixel, y: 0 };
     }
     const deltaSamples = transform.x * samplesPerPixel;
-    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);
+    const deltaTicks = (0, import_core7.samplesToTicks)(deltaSamples, bpm, sampleRate);
+    const snappedTicks = (0, import_core7.snapToGrid)(deltaTicks, gridTicks);
+    const snappedSamples = (0, import_core7.ticksToSamples)(snappedTicks, bpm, sampleRate);
     return { x: snappedSamples / samplesPerPixel, y: 0 };
   }
 };
@@ -7161,21 +7213,21 @@ var ClipInteractionProvider = ({
   const beatsAndBars = (0, import_ui_components12.useBeatsAndBars)();
   const useBeatsSnap = snap && beatsAndBars != null && beatsAndBars.scaleMode === "beats" && beatsAndBars.snapTo !== "off";
   const useTimescaleSnap = snap && !useBeatsSnap;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.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_react39.useMemo)(() => {
+  const snapSamplePosition = (0, import_react40.useMemo)(() => {
     if (useBeatsSnap && beatsAndBars) {
       const { bpm, timeSignature, snapTo } = beatsAndBars;
-      const gridTicks = snapTo === "bar" ? (0, import_core6.ticksPerBar)(timeSignature) : (0, import_core6.ticksPerBeat)(timeSignature);
+      const gridTicks = snapTo === "bar" ? (0, import_core8.ticksPerBar)(timeSignature) : (0, import_core8.ticksPerBeat)(timeSignature);
       return (samplePos) => {
-        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);
+        const ticks = (0, import_core8.samplesToTicks)(samplePos, bpm, sampleRate);
+        const snapped = (0, import_core8.snapToGrid)(ticks, gridTicks);
+        return (0, import_core8.ticksToSamples)(snapped, bpm, sampleRate);
       };
     }
     if (useTimescaleSnap) {
@@ -7197,7 +7249,7 @@ var ClipInteractionProvider = ({
     isDraggingRef,
     snapSamplePosition
   });
-  const onDragStart = import_react39.default.useCallback(
+  const onDragStart = import_react40.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;
@@ -7208,7 +7260,7 @@ var ClipInteractionProvider = ({
     },
     [handleDragStart, tracks, setSelectedTrackId]
   );
-  const modifiers = (0, import_react39.useMemo)(() => {
+  const modifiers = (0, import_react40.useMemo)(() => {
     const mods = [import_modifiers2.RestrictToHorizontalAxis];
     if (useBeatsSnap && beatsAndBars) {
       mods.push(
@@ -7234,7 +7286,7 @@ var ClipInteractionProvider = ({
     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_react40.DragDropProvider,
+    import_react41.DragDropProvider,
     {
       sensors,
       onDragStart,