@waveform-playlist/browser 11.0.1 → 11.1.0

package/dist/index.mjs

@@ -57,10 +57,10 @@ import * as Tone2 from "tone";
 import {
   createContext,
   useContext,
-  useState as useState14,
+  useState as useState15,
   useEffect as useEffect10,
-  useRef as useRef14,
-  useCallback as useCallback18,
+  useRef as useRef15,
+  useCallback as useCallback19,
   useMemo as useMemo4
 } from "react";
 import { ThemeProvider } from "styled-components";
@@ -451,12 +451,52 @@ function useSelectedTrack({ engineRef }) {
   };
 }
 
+// src/hooks/useUndoState.ts
+import { useState as useState7, useCallback as useCallback6, useRef as useRef6 } from "react";
+function useUndoState({ engineRef }) {
+  const [canUndo, setCanUndo] = useState7(false);
+  const [canRedo, setCanRedo] = useState7(false);
+  const canUndoRef = useRef6(false);
+  const canRedoRef = useRef6(false);
+  const undo = useCallback6(() => {
+    if (!engineRef.current) {
+      console.warn("[waveform-playlist] undo: engine not ready, call ignored");
+      return;
+    }
+    engineRef.current.undo();
+  }, [engineRef]);
+  const redo = useCallback6(() => {
+    if (!engineRef.current) {
+      console.warn("[waveform-playlist] redo: engine not ready, call ignored");
+      return;
+    }
+    engineRef.current.redo();
+  }, [engineRef]);
+  const onEngineState = useCallback6((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
-import { useRef as useRef6, useCallback as useCallback6 } from "react";
+import { useRef as useRef7, useCallback as useCallback7 } from "react";
 import { Analyser } from "tone";
 var useMasterAnalyser = (fftSize = 256) => {
-  const analyserRef = useRef6(null);
-  const masterEffects = useCallback6(
+  const analyserRef = useRef7(null);
+  const masterEffects = useCallback7(
     (masterGainNode, destination, _isOffline) => {
       const analyserNode = new Analyser("fft", fftSize);
       masterGainNode.connect(analyserNode);
@@ -473,7 +513,7 @@ var useMasterAnalyser = (fftSize = 256) => {
 };
 
 // src/hooks/useAudioTracks.ts
-import { useState as useState7, useEffect, useRef as useRef7, useMemo } from "react";
+import { useState as useState8, useEffect, useRef as useRef8, useMemo } from "react";
 import {
   createTrack,
   createClipFromSeconds
@@ -534,13 +574,13 @@ function buildTrackFromConfig(config, index, audioBuffer, stableIds, contextSamp
 function useAudioTracks(configs, options = {}) {
   const { immediate = false, progressive = false } = options;
   const isImmediate = immediate || progressive;
-  const [loading, setLoading] = useState7(true);
-  const [error, setError] = useState7(null);
-  const [loadedCount, setLoadedCount] = useState7(0);
+  const [loading, setLoading] = useState8(true);
+  const [error, setError] = useState8(null);
+  const [loadedCount, setLoadedCount] = useState8(0);
   const totalCount = configs.length;
-  const [loadedBuffers, setLoadedBuffers] = useState7(/* @__PURE__ */ new Map());
-  const stableIdsRef = useRef7(/* @__PURE__ */ new Map());
-  const contextSampleRateRef = useRef7(48e3);
+  const [loadedBuffers, setLoadedBuffers] = useState8(/* @__PURE__ */ new Map());
+  const stableIdsRef = useRef8(/* @__PURE__ */ new Map());
+  const contextSampleRateRef = useRef8(48e3);
   const derivedTracks = useMemo(() => {
     if (!isImmediate) return null;
     const result = [];
@@ -556,8 +596,8 @@ function useAudioTracks(configs, options = {}) {
     }
     return result;
   }, [isImmediate, configs, loadedBuffers]);
-  const [tracks, setTracks] = useState7(derivedTracks != null ? derivedTracks : []);
-  const prevDerivedRef = useRef7(derivedTracks);
+  const [tracks, setTracks] = useState8(derivedTracks != null ? derivedTracks : []);
+  const prevDerivedRef = useRef8(derivedTracks);
   if (derivedTracks !== prevDerivedRef.current) {
     prevDerivedRef.current = derivedTracks;
     if (derivedTracks) setTracks(derivedTracks);
@@ -735,6 +775,13 @@ function useClipDragHandlers({
       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];
@@ -746,9 +793,16 @@ 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 = React.useCallback(
     (event) => {
@@ -814,7 +868,7 @@ function useClipDragHandlers({
   );
   const onDragEnd = React.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;
@@ -839,23 +893,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;
@@ -865,10 +926,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]
@@ -1084,14 +1147,14 @@ function useDragSensors(options = {}) {
 }
 
 // src/hooks/useClipSplitting.ts
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback8 } from "react";
 import { calculateSplitPoint, canSplitAt } from "@waveform-playlist/engine";
 var useClipSplitting = (options) => {
   const { tracks, engineRef } = options;
   const { sampleRate } = usePlaylistData();
   const { currentTimeRef } = usePlaybackAnimation();
   const { selectedTrackId } = usePlaylistState();
-  const splitClipAt = useCallback7(
+  const splitClipAt = useCallback8(
     (trackIndex, clipIndex, splitTime) => {
       const { samplesPerPixel } = options;
       const track = tracks[trackIndex];
@@ -1115,7 +1178,7 @@ var useClipSplitting = (options) => {
     },
     [tracks, options, engineRef, sampleRate]
   );
-  const splitClipAtPlayhead = useCallback7(() => {
+  const splitClipAtPlayhead = useCallback8(() => {
     var _a;
     if (!selectedTrackId) {
       console.warn("[waveform-playlist] No track selected \u2014 click a clip to select a track first");
@@ -1146,32 +1209,12 @@ var useClipSplitting = (options) => {
 };
 
 // src/hooks/useKeyboardShortcuts.ts
-import { useEffect as useEffect2, useCallback as useCallback8 } from "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();
-  }
-}
+import { useEffect as useEffect2, useCallback as useCallback9 } from "react";
+import { handleKeyboardEvent } from "@waveform-playlist/core";
+import { handleKeyboardEvent as handleKeyboardEvent2, getShortcutLabel } from "@waveform-playlist/core";
 var useKeyboardShortcuts = (options) => {
   const { shortcuts, enabled = true } = options;
-  const handleKeyDown = useCallback8(
+  const handleKeyDown = useCallback9(
     (event) => handleKeyboardEvent(event, shortcuts, enabled),
     [shortcuts, enabled]
   );
@@ -1183,42 +1226,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
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback10 } from "react";
 var usePlaybackShortcuts = (options = {}) => {
   const { enabled = true, additionalShortcuts = [], shortcuts: overrideShortcuts } = options;
   const { isPlaying } = usePlaybackAnimation();
   const { setCurrentTime, play, pause, stop } = usePlaylistControls();
-  const togglePlayPause = useCallback9(() => {
+  const togglePlayPause = useCallback10(() => {
     if (isPlaying) {
       pause();
     } else {
       play();
     }
   }, [isPlaying, play, pause]);
-  const stopPlayback = useCallback9(() => {
+  const stopPlayback = useCallback10(() => {
     stop();
   }, [stop]);
-  const rewindToStart = useCallback9(() => {
+  const rewindToStart = useCallback10(() => {
     setCurrentTime(0);
     if (isPlaying) {
       play(0);
@@ -1258,7 +1283,7 @@ var usePlaybackShortcuts = (options = {}) => {
 };
 
 // src/hooks/useAnnotationKeyboardControls.ts
-import { useCallback as useCallback10, useMemo as useMemo3, useEffect as useEffect3 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo3, useEffect as useEffect3 } from "react";
 var LINK_THRESHOLD2 = 0.01;
 var TIME_DELTA = 0.01;
 function useAnnotationKeyboardControls({
@@ -1278,7 +1303,7 @@ function useAnnotationKeyboardControls({
     if (!activeAnnotationId) return -1;
     return annotations.findIndex((a) => a.id === activeAnnotationId);
   }, [annotations, activeAnnotationId]);
-  const scrollToAnnotation = useCallback10(
+  const scrollToAnnotation = useCallback11(
     (annotationId) => {
       if (!(scrollContainerRef == null ? void 0 : scrollContainerRef.current) || !samplesPerPixel || !sampleRate) return;
       const annotation = annotations.find((a) => a.id === annotationId);
@@ -1306,7 +1331,7 @@ function useAnnotationKeyboardControls({
       scrollToAnnotation(activeAnnotationId);
     }
   }, [activeAnnotationId, scrollToAnnotation, scrollContainerRef, samplesPerPixel, sampleRate]);
-  const moveStartBoundary = useCallback10(
+  const moveStartBoundary = useCallback11(
     (delta) => {
       if (activeIndex < 0) return;
       const annotation = annotations[activeIndex];
@@ -1335,7 +1360,7 @@ function useAnnotationKeyboardControls({
     },
     [annotations, activeIndex, linkEndpoints, onAnnotationsChange]
   );
-  const moveEndBoundary = useCallback10(
+  const moveEndBoundary = useCallback11(
     (delta) => {
       if (activeIndex < 0) return;
       const annotation = annotations[activeIndex];
@@ -1395,7 +1420,7 @@ function useAnnotationKeyboardControls({
     },
     [annotations, activeIndex, duration, linkEndpoints, onAnnotationsChange]
   );
-  const selectPrevious = useCallback10(() => {
+  const selectPrevious = useCallback11(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     if (activeIndex <= 0) {
       onActiveAnnotationChange(annotations[annotations.length - 1].id);
@@ -1403,7 +1428,7 @@ function useAnnotationKeyboardControls({
       onActiveAnnotationChange(annotations[activeIndex - 1].id);
     }
   }, [annotations, activeIndex, onActiveAnnotationChange]);
-  const selectNext = useCallback10(() => {
+  const selectNext = useCallback11(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     if (activeIndex < 0 || activeIndex >= annotations.length - 1) {
       onActiveAnnotationChange(annotations[0].id);
@@ -1411,19 +1436,19 @@ function useAnnotationKeyboardControls({
       onActiveAnnotationChange(annotations[activeIndex + 1].id);
     }
   }, [annotations, activeIndex, onActiveAnnotationChange]);
-  const selectFirst = useCallback10(() => {
+  const selectFirst = useCallback11(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     onActiveAnnotationChange(annotations[0].id);
   }, [annotations, onActiveAnnotationChange]);
-  const selectLast = useCallback10(() => {
+  const selectLast = useCallback11(() => {
     if (!onActiveAnnotationChange || annotations.length === 0) return;
     onActiveAnnotationChange(annotations[annotations.length - 1].id);
   }, [annotations, onActiveAnnotationChange]);
-  const clearSelection = useCallback10(() => {
+  const clearSelection = useCallback11(() => {
     if (!onActiveAnnotationChange) return;
     onActiveAnnotationChange(null);
   }, [onActiveAnnotationChange]);
-  const playActiveAnnotation = useCallback10(() => {
+  const playActiveAnnotation = useCallback11(() => {
     if (activeIndex < 0 || !onPlay) return;
     const annotation = annotations[activeIndex];
     const playDuration = !continuousPlay ? annotation.end - annotation.start : void 0;
@@ -1535,7 +1560,7 @@ function useAnnotationKeyboardControls({
 }
 
 // src/hooks/useDynamicEffects.ts
-import { useState as useState8, useCallback as useCallback11, useRef as useRef8, useEffect as useEffect4 } from "react";
+import { useState as useState9, useCallback as useCallback12, useRef as useRef9, useEffect as useEffect4 } from "react";
 
 // src/effects/effectDefinitions.ts
 var effectDefinitions = [
@@ -2231,13 +2256,13 @@ function createEffectChain(effects) {
 // src/hooks/useDynamicEffects.ts
 import { Analyser as Analyser2 } from "tone";
 function useDynamicEffects(fftSize = 256) {
-  const [activeEffects, setActiveEffects] = useState8([]);
-  const activeEffectsRef = useRef8(activeEffects);
+  const [activeEffects, setActiveEffects] = useState9([]);
+  const activeEffectsRef = useRef9(activeEffects);
   activeEffectsRef.current = activeEffects;
-  const effectInstancesRef = useRef8(/* @__PURE__ */ new Map());
-  const analyserRef = useRef8(null);
-  const graphNodesRef = useRef8(null);
-  const rebuildChain = useCallback11((effects) => {
+  const effectInstancesRef = useRef9(/* @__PURE__ */ new Map());
+  const analyserRef = useRef9(null);
+  const graphNodesRef = useRef9(null);
+  const rebuildChain = useCallback12((effects) => {
     const nodes = graphNodesRef.current;
     if (!nodes) return;
     const { masterGainNode, destination, analyserNode } = nodes;
@@ -2265,7 +2290,7 @@ function useDynamicEffects(fftSize = 256) {
       analyserNode.connect(destination);
     }
   }, []);
-  const addEffect = useCallback11((effectId) => {
+  const addEffect = useCallback12((effectId) => {
     const definition = getEffectDefinition(effectId);
     if (!definition) {
       console.error(`Unknown effect: ${effectId}`);
@@ -2286,7 +2311,7 @@ function useDynamicEffects(fftSize = 256) {
     };
     setActiveEffects((prev) => [...prev, newActiveEffect]);
   }, []);
-  const removeEffect = useCallback11((instanceId) => {
+  const removeEffect = useCallback12((instanceId) => {
     const instance = effectInstancesRef.current.get(instanceId);
     if (instance) {
       instance.dispose();
@@ -2294,7 +2319,7 @@ function useDynamicEffects(fftSize = 256) {
     }
     setActiveEffects((prev) => prev.filter((e) => e.instanceId !== instanceId));
   }, []);
-  const updateParameter = useCallback11(
+  const updateParameter = useCallback12(
     (instanceId, paramName, value) => {
       const instance = effectInstancesRef.current.get(instanceId);
       if (instance) {
@@ -2308,7 +2333,7 @@ function useDynamicEffects(fftSize = 256) {
     },
     []
   );
-  const toggleBypass = useCallback11((instanceId) => {
+  const toggleBypass = useCallback12((instanceId) => {
     var _a;
     const effect = activeEffectsRef.current.find((e) => e.instanceId === instanceId);
     if (!effect) return;
@@ -2322,7 +2347,7 @@ function useDynamicEffects(fftSize = 256) {
       (prev) => prev.map((e) => e.instanceId === instanceId ? __spreadProps(__spreadValues({}, e), { bypassed: newBypassed }) : e)
     );
   }, []);
-  const reorderEffects = useCallback11((fromIndex, toIndex) => {
+  const reorderEffects = useCallback12((fromIndex, toIndex) => {
     setActiveEffects((prev) => {
       const newEffects = [...prev];
       const [removed] = newEffects.splice(fromIndex, 1);
@@ -2330,7 +2355,7 @@ function useDynamicEffects(fftSize = 256) {
       return newEffects;
     });
   }, []);
-  const clearAllEffects = useCallback11(() => {
+  const clearAllEffects = useCallback12(() => {
     effectInstancesRef.current.forEach((inst) => inst.dispose());
     effectInstancesRef.current.clear();
     setActiveEffects([]);
@@ -2338,7 +2363,7 @@ function useDynamicEffects(fftSize = 256) {
   useEffect4(() => {
     rebuildChain(activeEffects);
   }, [activeEffects, rebuildChain]);
-  const masterEffects = useCallback11(
+  const masterEffects = useCallback12(
     (masterGainNode, destination, _isOffline) => {
       const analyserNode = new Analyser2("fft", fftSize);
       analyserRef.current = analyserNode;
@@ -2377,7 +2402,7 @@ function useDynamicEffects(fftSize = 256) {
       effectInstances.clear();
     };
   }, []);
-  const createOfflineEffectsFunction = useCallback11(() => {
+  const createOfflineEffectsFunction = useCallback12(() => {
     const nonBypassedEffects = activeEffects.filter((e) => !e.bypassed);
     if (nonBypassedEffects.length === 0) {
       return void 0;
@@ -2419,14 +2444,14 @@ function useDynamicEffects(fftSize = 256) {
 }
 
 // src/hooks/useTrackDynamicEffects.ts
-import { useState as useState9, useCallback as useCallback12, useRef as useRef9, useEffect as useEffect5 } from "react";
+import { useState as useState10, useCallback as useCallback13, useRef as useRef10, useEffect as useEffect5 } from "react";
 function useTrackDynamicEffects() {
-  const [trackEffectsState, setTrackEffectsState] = useState9(
+  const [trackEffectsState, setTrackEffectsState] = useState10(
     /* @__PURE__ */ new Map()
   );
-  const trackEffectInstancesRef = useRef9(/* @__PURE__ */ new Map());
-  const trackGraphNodesRef = useRef9(/* @__PURE__ */ new Map());
-  const rebuildTrackChain = useCallback12((trackId, trackEffects) => {
+  const trackEffectInstancesRef = useRef10(/* @__PURE__ */ new Map());
+  const trackGraphNodesRef = useRef10(/* @__PURE__ */ new Map());
+  const rebuildTrackChain = useCallback13((trackId, trackEffects) => {
     const nodes = trackGraphNodesRef.current.get(trackId);
     if (!nodes) return;
     const { graphEnd, masterGainNode } = nodes;
@@ -2456,7 +2481,7 @@ function useTrackDynamicEffects() {
       currentNode.connect(masterGainNode);
     }
   }, []);
-  const addEffectToTrack = useCallback12((trackId, effectId) => {
+  const addEffectToTrack = useCallback13((trackId, effectId) => {
     const definition = getEffectDefinition(effectId);
     if (!definition) {
       console.error(`Unknown effect: ${effectId}`);
@@ -2485,7 +2510,7 @@ function useTrackDynamicEffects() {
       return newState;
     });
   }, []);
-  const removeEffectFromTrack = useCallback12((trackId, instanceId) => {
+  const removeEffectFromTrack = useCallback13((trackId, instanceId) => {
     const instancesMap = trackEffectInstancesRef.current.get(trackId);
     const instance = instancesMap == null ? void 0 : instancesMap.get(instanceId);
     if (instance) {
@@ -2502,7 +2527,7 @@ function useTrackDynamicEffects() {
       return newState;
     });
   }, []);
-  const updateTrackEffectParameter = useCallback12(
+  const updateTrackEffectParameter = useCallback13(
     (trackId, instanceId, paramName, value) => {
       const instancesMap = trackEffectInstancesRef.current.get(trackId);
       const instance = instancesMap == null ? void 0 : instancesMap.get(instanceId);
@@ -2523,7 +2548,7 @@ function useTrackDynamicEffects() {
     },
     []
   );
-  const toggleBypass = useCallback12((trackId, instanceId) => {
+  const toggleBypass = useCallback13((trackId, instanceId) => {
     var _a;
     const trackEffects = trackEffectsStateRef.current.get(trackId) || [];
     const effect = trackEffects.find((e) => e.instanceId === instanceId);
@@ -2545,7 +2570,7 @@ function useTrackDynamicEffects() {
       return newState;
     });
   }, []);
-  const clearTrackEffects = useCallback12((trackId) => {
+  const clearTrackEffects = useCallback13((trackId) => {
     const instancesMap = trackEffectInstancesRef.current.get(trackId);
     if (instancesMap) {
       instancesMap.forEach((inst) => inst.dispose());
@@ -2557,9 +2582,9 @@ function useTrackDynamicEffects() {
       return newState;
     });
   }, []);
-  const trackEffectsStateRef = useRef9(trackEffectsState);
+  const trackEffectsStateRef = useRef10(trackEffectsState);
   trackEffectsStateRef.current = trackEffectsState;
-  const getTrackEffectsFunction = useCallback12(
+  const getTrackEffectsFunction = useCallback13(
     (trackId) => {
       return (graphEnd, masterGainNode, _isOffline) => {
         trackGraphNodesRef.current.set(trackId, {
@@ -2602,7 +2627,7 @@ function useTrackDynamicEffects() {
       trackEffectInstances.clear();
     };
   }, []);
-  const createOfflineTrackEffectsFunction = useCallback12(
+  const createOfflineTrackEffectsFunction = useCallback13(
     (trackId) => {
       const trackEffects = trackEffectsState.get(trackId) || [];
       const nonBypassedEffects = trackEffects.filter((e) => !e.bypassed);
@@ -2646,7 +2671,7 @@ function useTrackDynamicEffects() {
 }
 
 // src/hooks/useExportWav.ts
-import { useState as useState10, useCallback as useCallback13 } from "react";
+import { useState as useState11, useCallback as useCallback14 } from "react";
 import {
   getUnderlyingAudioParam,
   getGlobalAudioContext as getGlobalAudioContext2
@@ -2723,10 +2748,10 @@ function downloadBlob(blob, filename) {
 
 // src/hooks/useExportWav.ts
 function useExportWav() {
-  const [isExporting, setIsExporting] = useState10(false);
-  const [progress, setProgress] = useState10(0);
-  const [error, setError] = useState10(null);
-  const exportWav = useCallback13(
+  const [isExporting, setIsExporting] = useState11(false);
+  const [progress, setProgress] = useState11(0);
+  const [error, setError] = useState11(null);
+  const exportWav = useCallback14(
     (_0, _1, ..._2) => __async(null, [_0, _1, ..._2], function* (tracks, trackStates, options = {}) {
       const {
         filename = "export",
@@ -3038,16 +3063,16 @@ function generateFadeCurve(startValue, endValue, numPoints, curveType) {
 }
 
 // src/hooks/useAnimationFrameLoop.ts
-import { useCallback as useCallback14, useEffect as useEffect6, useRef as useRef10 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect6, useRef as useRef11 } from "react";
 var useAnimationFrameLoop = () => {
-  const animationFrameRef = useRef10(null);
-  const stopAnimationFrameLoop = useCallback14(() => {
+  const animationFrameRef = useRef11(null);
+  const stopAnimationFrameLoop = useCallback15(() => {
     if (animationFrameRef.current !== null) {
       cancelAnimationFrame(animationFrameRef.current);
       animationFrameRef.current = null;
     }
   }, []);
-  const startAnimationFrameLoop = useCallback14(
+  const startAnimationFrameLoop = useCallback15(
     (callback) => {
       stopAnimationFrameLoop();
       animationFrameRef.current = requestAnimationFrame(callback);
@@ -3067,7 +3092,7 @@ var useAnimationFrameLoop = () => {
 };
 
 // src/hooks/useWaveformDataCache.ts
-import { useState as useState11, useEffect as useEffect7, useRef as useRef11, useCallback as useCallback15 } from "react";
+import { useState as useState12, useEffect as useEffect7, useRef as useRef12, useCallback as useCallback16 } from "react";
 
 // src/workers/peaksWorker.ts
 import WaveformData2 from "waveform-data";
@@ -3299,14 +3324,14 @@ function createPeaksWorker() {
 
 // src/hooks/useWaveformDataCache.ts
 function useWaveformDataCache(tracks, baseScale) {
-  const [cache, setCache] = useState11(() => /* @__PURE__ */ new Map());
-  const [isGenerating, setIsGenerating] = useState11(false);
-  const workerRef = useRef11(null);
-  const generatedByBufferRef = useRef11(/* @__PURE__ */ new WeakMap());
-  const inflightByBufferRef = useRef11(/* @__PURE__ */ new WeakMap());
-  const subscribersByBufferRef = useRef11(/* @__PURE__ */ new WeakMap());
-  const pendingCountRef = useRef11(0);
-  const getWorker = useCallback15(() => {
+  const [cache, setCache] = useState12(() => /* @__PURE__ */ new Map());
+  const [isGenerating, setIsGenerating] = useState12(false);
+  const workerRef = useRef12(null);
+  const generatedByBufferRef = useRef12(/* @__PURE__ */ new WeakMap());
+  const inflightByBufferRef = useRef12(/* @__PURE__ */ new WeakMap());
+  const subscribersByBufferRef = useRef12(/* @__PURE__ */ new WeakMap());
+  const pendingCountRef = useRef12(0);
+  const getWorker = useCallback16(() => {
     if (!workerRef.current) {
       workerRef.current = createPeaksWorker();
     }
@@ -3428,7 +3453,7 @@ function useWaveformDataCache(tracks, baseScale) {
 }
 
 // src/hooks/useDynamicTracks.ts
-import { useState as useState12, useCallback as useCallback16, useRef as useRef12, useEffect as useEffect8 } from "react";
+import { useState as useState13, useCallback as useCallback17, useRef as useRef13, useEffect as useEffect8 } from "react";
 import { createTrack as createTrack2, createClipFromSeconds as createClipFromSeconds2 } from "@waveform-playlist/core";
 import { getGlobalAudioContext as getGlobalAudioContext3 } from "@waveform-playlist/playout";
 function getSourceName(source) {
@@ -3463,12 +3488,12 @@ function decodeSource(source, audioContext, signal) {
   });
 }
 function useDynamicTracks() {
-  const [tracks, setTracks] = useState12([]);
-  const [loadingCount, setLoadingCount] = useState12(0);
-  const [errors, setErrors] = useState12([]);
-  const cancelledRef = useRef12(false);
-  const loadingIdsRef = useRef12(/* @__PURE__ */ new Set());
-  const abortControllersRef = useRef12(/* @__PURE__ */ new Map());
+  const [tracks, setTracks] = useState13([]);
+  const [loadingCount, setLoadingCount] = useState13(0);
+  const [errors, setErrors] = useState13([]);
+  const cancelledRef = useRef13(false);
+  const loadingIdsRef = useRef13(/* @__PURE__ */ new Set());
+  const abortControllersRef = useRef13(/* @__PURE__ */ new Map());
   useEffect8(() => {
     const controllers = abortControllersRef.current;
     return () => {
@@ -3479,7 +3504,7 @@ function useDynamicTracks() {
       controllers.clear();
     };
   }, []);
-  const addTracks = useCallback16((sources) => {
+  const addTracks = useCallback17((sources) => {
     if (sources.length === 0) return;
     const audioContext = getGlobalAudioContext3();
     const placeholders = sources.map((source) => ({
@@ -3529,7 +3554,7 @@ function useDynamicTracks() {
       }))();
     }
   }, []);
-  const removeTrack = useCallback16((trackId) => {
+  const removeTrack = useCallback17((trackId) => {
     setTracks((prev) => prev.filter((t) => t.id !== trackId));
     const controller = abortControllersRef.current.get(trackId);
     if (controller) {
@@ -3551,20 +3576,20 @@ function useDynamicTracks() {
 }
 
 // src/hooks/useOutputMeter.ts
-import { useEffect as useEffect9, useState as useState13, useRef as useRef13, useCallback as useCallback17 } from "react";
+import { useEffect as useEffect9, useState as useState14, useRef as useRef14, useCallback as useCallback18 } from "react";
 import { getGlobalContext } from "@waveform-playlist/playout";
 import { gainToNormalized } from "@waveform-playlist/core";
 import { meterProcessorUrl } from "@waveform-playlist/worklets";
 var PEAK_DECAY = 0.98;
 function useOutputMeter(options = {}) {
   const { channelCount = 2, updateRate = 60, isPlaying = false } = options;
-  const [levels, setLevels] = useState13(() => new Array(channelCount).fill(0));
-  const [peakLevels, setPeakLevels] = useState13(() => new Array(channelCount).fill(0));
-  const [rmsLevels, setRmsLevels] = useState13(() => new Array(channelCount).fill(0));
-  const workletNodeRef = useRef13(null);
-  const smoothedPeakRef = useRef13(new Array(channelCount).fill(0));
-  const [meterError, setMeterError] = useState13(null);
-  const resetPeak = useCallback17(
+  const [levels, setLevels] = useState14(() => new Array(channelCount).fill(0));
+  const [peakLevels, setPeakLevels] = useState14(() => new Array(channelCount).fill(0));
+  const [rmsLevels, setRmsLevels] = useState14(() => new Array(channelCount).fill(0));
+  const workletNodeRef = useRef14(null);
+  const smoothedPeakRef = useRef14(new Array(channelCount).fill(0));
+  const [meterError, setMeterError] = useState14(null);
+  const resetPeak = useCallback18(
     () => setPeakLevels(new Array(channelCount).fill(0)),
     [channelCount]
   );
@@ -3679,7 +3704,7 @@ var WaveformPlaylistProvider = ({
 }) => {
   var _a, _b, _c, _d;
   const progressBarWidth = progressBarWidthProp != null ? progressBarWidthProp : barWidth + barGap;
-  const indefinitePlaybackRef = useRef14(indefinitePlayback);
+  const indefinitePlaybackRef = useRef15(indefinitePlayback);
   indefinitePlaybackRef.current = indefinitePlayback;
   const stableZoomLevels = useMemo4(
     () => zoomLevels,
@@ -3699,46 +3724,46 @@ var WaveformPlaylistProvider = ({
     }
     return annotationList.annotations;
   }, [annotationList == null ? void 0 : annotationList.annotations]);
-  const annotationsRef = useRef14(annotations);
+  const annotationsRef = useRef15(annotations);
   annotationsRef.current = annotations;
-  const [activeAnnotationId, setActiveAnnotationIdState] = useState14(null);
-  const [isPlaying, setIsPlaying] = useState14(false);
-  const [currentTime, setCurrentTime] = useState14(0);
-  const [duration, setDuration] = useState14(0);
-  const [audioBuffers, setAudioBuffers] = useState14([]);
-  const [peaksDataArray, setPeaksDataArray] = useState14([]);
-  const [trackStates, setTrackStates] = useState14([]);
-  const [isAutomaticScroll, setIsAutomaticScroll] = useState14(automaticScroll);
-  const [continuousPlay, setContinuousPlayState] = useState14(
+  const [activeAnnotationId, setActiveAnnotationIdState] = useState15(null);
+  const [isPlaying, setIsPlaying] = useState15(false);
+  const [currentTime, setCurrentTime] = useState15(0);
+  const [duration, setDuration] = useState15(0);
+  const [audioBuffers, setAudioBuffers] = useState15([]);
+  const [peaksDataArray, setPeaksDataArray] = useState15([]);
+  const [trackStates, setTrackStates] = useState15([]);
+  const [isAutomaticScroll, setIsAutomaticScroll] = useState15(automaticScroll);
+  const [continuousPlay, setContinuousPlayState] = useState15(
     (_a = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _a : false
   );
-  const [linkEndpoints, setLinkEndpoints] = useState14((_b = annotationList == null ? void 0 : annotationList.linkEndpoints) != null ? _b : false);
-  const [annotationsEditable, setAnnotationsEditable] = useState14((_c = annotationList == null ? void 0 : annotationList.editable) != null ? _c : false);
-  const [isReady, setIsReady] = useState14(false);
-  const engineRef = useRef14(null);
-  const audioInitializedRef = useRef14(false);
-  const isPlayingRef = useRef14(false);
+  const [linkEndpoints, setLinkEndpoints] = useState15((_b = annotationList == null ? void 0 : annotationList.linkEndpoints) != null ? _b : false);
+  const [annotationsEditable, setAnnotationsEditable] = useState15((_c = annotationList == null ? void 0 : annotationList.editable) != null ? _c : false);
+  const [isReady, setIsReady] = useState15(false);
+  const engineRef = useRef15(null);
+  const audioInitializedRef = useRef15(false);
+  const isPlayingRef = useRef15(false);
   isPlayingRef.current = isPlaying;
-  const playStartPositionRef = useRef14(0);
-  const currentTimeRef = useRef14(0);
-  const tracksRef = useRef14(tracks);
-  const soundFontCacheRef = useRef14(soundFontCache);
+  const playStartPositionRef = useRef15(0);
+  const currentTimeRef = useRef15(0);
+  const tracksRef = useRef15(tracks);
+  const soundFontCacheRef = useRef15(soundFontCache);
   soundFontCacheRef.current = soundFontCache;
-  const trackStatesRef = useRef14(trackStates);
-  const playbackStartTimeRef = useRef14(0);
-  const audioStartPositionRef = useRef14(0);
-  const playbackEndTimeRef = useRef14(null);
-  const scrollContainerRef = useRef14(null);
-  const isAutomaticScrollRef = useRef14(false);
-  const continuousPlayRef = useRef14((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
-  const activeAnnotationIdRef = useRef14(null);
-  const engineTracksRef = useRef14(null);
-  const lastTracksVersionRef = useRef14(0);
-  const skipEngineDisposeRef = useRef14(false);
-  const isDraggingRef = useRef14(false);
-  const prevTracksRef = useRef14([]);
-  const samplesPerPixelRef = useRef14(initialSamplesPerPixel);
-  const sampleRateRef = useRef14(
+  const trackStatesRef = useRef15(trackStates);
+  const playbackStartTimeRef = useRef15(0);
+  const audioStartPositionRef = useRef15(0);
+  const playbackEndTimeRef = useRef15(null);
+  const scrollContainerRef = useRef15(null);
+  const isAutomaticScrollRef = useRef15(false);
+  const continuousPlayRef = useRef15((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
+  const activeAnnotationIdRef = useRef15(null);
+  const engineTracksRef = useRef15(null);
+  const lastTracksVersionRef = useRef15(0);
+  const skipEngineDisposeRef = useRef15(false);
+  const isDraggingRef = useRef15(false);
+  const prevTracksRef = useRef15([]);
+  const samplesPerPixelRef = useRef15(initialSamplesPerPixel);
+  const sampleRateRef = useRef15(
     typeof AudioContext !== "undefined" ? getGlobalAudioContext4().sampleRate : 48e3
   );
   const { timeFormat, setTimeFormat, formatTime: formatTime2 } = useTimeFormat();
@@ -3777,21 +3802,28 @@ var WaveformPlaylistProvider = ({
     onEngineState: onSelectedTrackEngineState,
     selectedTrackIdRef
   } = useSelectedTrack({ engineRef });
+  const {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    onEngineState: onUndoEngineState
+  } = useUndoState({ engineRef });
   const { animationFrameRef, startAnimationFrameLoop, stopAnimationFrameLoop } = useAnimationFrameLoop();
   const baseScale = useMemo4(
     () => Math.min(...stableZoomLevels != null ? stableZoomLevels : [256, 512, 1024, 2048, 4096, 8192]),
     [stableZoomLevels]
   );
   const { cache: waveformDataCache } = useWaveformDataCache(tracks, baseScale);
-  const setContinuousPlay = useCallback18((value) => {
+  const setContinuousPlay = useCallback19((value) => {
     continuousPlayRef.current = value;
     setContinuousPlayState(value);
   }, []);
-  const setActiveAnnotationId = useCallback18((value) => {
+  const setActiveAnnotationId = useCallback19((value) => {
     activeAnnotationIdRef.current = value;
     setActiveAnnotationIdState(value);
   }, []);
-  const setLoopRegionFromSelection = useCallback18(() => {
+  const setLoopRegionFromSelection = useCallback19(() => {
     var _a2, _b2;
     const start = (_a2 = selectionStartRef.current) != null ? _a2 : 0;
     const end = (_b2 = selectionEndRef.current) != null ? _b2 : 0;
@@ -3829,7 +3861,7 @@ var WaveformPlaylistProvider = ({
     container.scrollLeft = newScrollLeft;
     samplesPerPixelRef.current = newSamplesPerPixel;
   }, [samplesPerPixel, duration]);
-  const pendingResumeRef = useRef14(null);
+  const pendingResumeRef = useRef15(null);
   useEffect10(() => {
     var _a2, _b2, _c2, _d2;
     if (isEngineTracks || isDraggingRef.current) {
@@ -4005,6 +4037,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;
@@ -4062,6 +4095,7 @@ var WaveformPlaylistProvider = ({
     onSelectedTrackEngineState,
     onZoomEngineState,
     onVolumeEngineState,
+    onUndoEngineState,
     onTracksChange,
     masterVolumeRef,
     selectionStartRef,
@@ -4139,8 +4173,8 @@ var WaveformPlaylistProvider = ({
     });
     setPeaksDataArray(allTrackPeaks);
   }, [tracks, samplesPerPixel, mono, waveformDataCache, deferEngineRebuild]);
-  const getPlaybackTimeFallbackWarnedRef = useRef14(false);
-  const getPlaybackTime = useCallback18(() => {
+  const getPlaybackTimeFallbackWarnedRef = useRef15(false);
+  const getPlaybackTime = useCallback19(() => {
     var _a2, _b2;
     if (engineRef.current) {
       return engineRef.current.getCurrentTime();
@@ -4154,7 +4188,7 @@ var WaveformPlaylistProvider = ({
     const elapsed = getContext2().currentTime - ((_a2 = playbackStartTimeRef.current) != null ? _a2 : 0);
     return ((_b2 = audioStartPositionRef.current) != null ? _b2 : 0) + elapsed;
   }, []);
-  const startAnimationLoop = useCallback18(() => {
+  const startAnimationLoop = useCallback19(() => {
     const updateTime = () => {
       const time = getPlaybackTime();
       currentTimeRef.current = time;
@@ -4272,7 +4306,7 @@ var WaveformPlaylistProvider = ({
       stopAnimationLoop();
     });
   }, [tracks, startAnimationLoop, stopAnimationLoop]);
-  const play = useCallback18(
+  const play = useCallback19(
     (startTime, playDuration) => __async(null, null, function* () {
       if (!engineRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
@@ -4303,7 +4337,7 @@ var WaveformPlaylistProvider = ({
     }),
     [startAnimationLoop, stopAnimationLoop]
   );
-  const pause = useCallback18(() => {
+  const pause = useCallback19(() => {
     if (!engineRef.current) return;
     const pauseTime = getPlaybackTime();
     engineRef.current.pause();
@@ -4312,7 +4346,7 @@ var WaveformPlaylistProvider = ({
     currentTimeRef.current = pauseTime;
     setCurrentTime(pauseTime);
   }, [stopAnimationLoop, getPlaybackTime]);
-  const stop = useCallback18(() => {
+  const stop = useCallback19(() => {
     if (!engineRef.current) return;
     engineRef.current.stop();
     setIsPlaying(false);
@@ -4321,7 +4355,7 @@ var WaveformPlaylistProvider = ({
     setCurrentTime(playStartPositionRef.current);
     setActiveAnnotationId(null);
   }, [stopAnimationLoop, setActiveAnnotationId]);
-  const seekTo = useCallback18(
+  const seekTo = useCallback19(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
       currentTimeRef.current = clampedTime;
@@ -4332,7 +4366,7 @@ var WaveformPlaylistProvider = ({
     },
     [duration, isPlaying, play]
   );
-  const setTrackMute = useCallback18(
+  const setTrackMute = useCallback19(
     (trackIndex, muted) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4346,7 +4380,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackSolo = useCallback18(
+  const setTrackSolo = useCallback19(
     (trackIndex, soloed) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4360,7 +4394,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackVolume = useCallback18(
+  const setTrackVolume = useCallback19(
     (trackIndex, volume2) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4374,7 +4408,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setTrackPan = useCallback18(
+  const setTrackPan = useCallback19(
     (trackIndex, pan) => {
       var _a2;
       const trackId = (_a2 = tracksRef.current[trackIndex]) == null ? void 0 : _a2.id;
@@ -4388,7 +4422,7 @@ var WaveformPlaylistProvider = ({
     },
     [trackStates]
   );
-  const setSelection = useCallback18(
+  const setSelection = useCallback19(
     (start, end) => {
       setSelectionEngine(start, end);
       currentTimeRef.current = start;
@@ -4401,12 +4435,12 @@ var WaveformPlaylistProvider = ({
     },
     [isPlaying, setSelectionEngine]
   );
-  const setScrollContainer = useCallback18((element) => {
+  const setScrollContainer = useCallback19((element) => {
     scrollContainerRef.current = element;
   }, []);
-  const onAnnotationsChangeRef = useRef14(onAnnotationsChange);
+  const onAnnotationsChangeRef = useRef15(onAnnotationsChange);
   onAnnotationsChangeRef.current = onAnnotationsChange;
-  const setAnnotations = useCallback18(
+  const setAnnotations = useCallback19(
     (action) => {
       const updated = typeof action === "function" ? action(annotationsRef.current) : action;
       if (!onAnnotationsChangeRef.current) {
@@ -4456,7 +4490,9 @@ var WaveformPlaylistProvider = ({
       selectedTrackId,
       loopStart,
       loopEnd,
-      indefinitePlayback
+      indefinitePlayback,
+      canUndo,
+      canRedo
     }),
     [
       continuousPlay,
@@ -4471,17 +4507,19 @@ var WaveformPlaylistProvider = ({
       selectedTrackId,
       loopStart,
       loopEnd,
-      indefinitePlayback
+      indefinitePlayback,
+      canUndo,
+      canRedo
     ]
   );
-  const setCurrentTimeControl = useCallback18(
+  const setCurrentTimeControl = useCallback19(
     (time) => {
       currentTimeRef.current = time;
       setCurrentTime(time);
     },
     [currentTimeRef]
   );
-  const setAutomaticScrollControl = useCallback18((enabled) => {
+  const setAutomaticScrollControl = useCallback19((enabled) => {
     setIsAutomaticScroll(enabled);
   }, []);
   const controlsValue = useMemo4(
@@ -4522,7 +4560,10 @@ var WaveformPlaylistProvider = ({
       setLoopEnabled,
       setLoopRegion,
       setLoopRegionFromSelection,
-      clearLoopRegion
+      clearLoopRegion,
+      // Undo/redo
+      undo,
+      redo
     }),
     [
       play,
@@ -4552,7 +4593,9 @@ var WaveformPlaylistProvider = ({
       setLoopEnabled,
       setLoopRegion,
       setLoopRegionFromSelection,
-      clearLoopRegion
+      clearLoopRegion,
+      undo,
+      redo
     ]
   );
   const dataValue = useMemo4(
@@ -4643,10 +4686,10 @@ var usePlaylistData = () => {
 import {
   createContext as createContext2,
   useContext as useContext2,
-  useState as useState15,
+  useState as useState16,
   useEffect as useEffect11,
-  useRef as useRef15,
-  useCallback as useCallback19,
+  useRef as useRef16,
+  useCallback as useCallback20,
   useMemo as useMemo5
 } from "react";
 import { ThemeProvider as ThemeProvider2 } from "styled-components";
@@ -4678,11 +4721,11 @@ var MediaElementPlaylistProvider = ({
 }) => {
   var _a;
   const progressBarWidth = progressBarWidthProp != null ? progressBarWidthProp : barWidth + barGap;
-  const [isPlaying, setIsPlaying] = useState15(false);
-  const [currentTime, setCurrentTime] = useState15(0);
-  const [duration, setDuration] = useState15(0);
-  const [peaksDataArray, setPeaksDataArray] = useState15([]);
-  const [playbackRate, setPlaybackRateState] = useState15(initialPlaybackRate);
+  const [isPlaying, setIsPlaying] = useState16(false);
+  const [currentTime, setCurrentTime] = useState16(0);
+  const [duration, setDuration] = useState16(0);
+  const [peaksDataArray, setPeaksDataArray] = useState16([]);
+  const [playbackRate, setPlaybackRateState] = useState16(initialPlaybackRate);
   const annotations = useMemo5(() => {
     if (!(annotationList == null ? void 0 : annotationList.annotations)) return [];
     if (process.env.NODE_ENV !== "production" && annotationList.annotations.length > 0) {
@@ -4696,21 +4739,21 @@ var MediaElementPlaylistProvider = ({
     }
     return annotationList.annotations;
   }, [annotationList == null ? void 0 : annotationList.annotations]);
-  const annotationsRef = useRef15(annotations);
+  const annotationsRef = useRef16(annotations);
   annotationsRef.current = annotations;
-  const [activeAnnotationId, setActiveAnnotationIdState] = useState15(null);
-  const [continuousPlay, setContinuousPlayState] = useState15(
+  const [activeAnnotationId, setActiveAnnotationIdState] = useState16(null);
+  const [continuousPlay, setContinuousPlayState] = useState16(
     (_a = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _a : false
   );
-  const [samplesPerPixel] = useState15(initialSamplesPerPixel);
-  const [isAutomaticScroll, setIsAutomaticScroll] = useState15(automaticScroll);
-  const playoutRef = useRef15(null);
-  const currentTimeRef = useRef15(0);
-  const continuousPlayRef = useRef15(continuousPlay);
-  const activeAnnotationIdRef = useRef15(null);
-  const scrollContainerRef = useRef15(null);
-  const isAutomaticScrollRef = useRef15(automaticScroll);
-  const samplesPerPixelRef = useRef15(initialSamplesPerPixel);
+  const [samplesPerPixel] = useState16(initialSamplesPerPixel);
+  const [isAutomaticScroll, setIsAutomaticScroll] = useState16(automaticScroll);
+  const playoutRef = useRef16(null);
+  const currentTimeRef = useRef16(0);
+  const continuousPlayRef = useRef16(continuousPlay);
+  const activeAnnotationIdRef = useRef16(null);
+  const scrollContainerRef = useRef16(null);
+  const isAutomaticScrollRef = useRef16(automaticScroll);
+  const samplesPerPixelRef = useRef16(initialSamplesPerPixel);
   const { startAnimationFrameLoop, stopAnimationFrameLoop } = useAnimationFrameLoop();
   useEffect11(() => {
     continuousPlayRef.current = continuousPlay;
@@ -4718,15 +4761,15 @@ var MediaElementPlaylistProvider = ({
   useEffect11(() => {
     isAutomaticScrollRef.current = isAutomaticScroll;
   }, [isAutomaticScroll]);
-  const setActiveAnnotationId = useCallback19((value) => {
+  const setActiveAnnotationId = useCallback20((value) => {
     activeAnnotationIdRef.current = value;
     setActiveAnnotationIdState(value);
   }, []);
-  const setContinuousPlay = useCallback19((value) => {
+  const setContinuousPlay = useCallback20((value) => {
     continuousPlayRef.current = value;
     setContinuousPlayState(value);
   }, []);
-  const setScrollContainer = useCallback19((element) => {
+  const setScrollContainer = useCallback20((element) => {
     scrollContainerRef.current = element;
   }, []);
   const sampleRate = track.waveformData.sample_rate;
@@ -4806,7 +4849,7 @@ var MediaElementPlaylistProvider = ({
       console.warn("[waveform-playlist] Failed to extract peaks from waveform data:", err);
     }
   }, [track.waveformData, track.name, samplesPerPixel, sampleRate]);
-  const startAnimationLoop = useCallback19(() => {
+  const startAnimationLoop = useCallback20(() => {
     const updateTime = () => {
       var _a2, _b, _c;
       const time = (_b = (_a2 = playoutRef.current) == null ? void 0 : _a2.getCurrentTime()) != null ? _b : 0;
@@ -4849,7 +4892,7 @@ var MediaElementPlaylistProvider = ({
     startAnimationFrameLoop(updateTime);
   }, [setActiveAnnotationId, sampleRate, startAnimationFrameLoop]);
   const stopAnimationLoop = stopAnimationFrameLoop;
-  const play = useCallback19(
+  const play = useCallback20(
     (startTime) => {
       if (!playoutRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
@@ -4859,14 +4902,14 @@ var MediaElementPlaylistProvider = ({
     },
     [startAnimationLoop]
   );
-  const pause = useCallback19(() => {
+  const pause = useCallback20(() => {
     if (!playoutRef.current) return;
     playoutRef.current.pause();
     setIsPlaying(false);
     stopAnimationLoop();
     setCurrentTime(playoutRef.current.getCurrentTime());
   }, [stopAnimationLoop]);
-  const stop = useCallback19(() => {
+  const stop = useCallback20(() => {
     if (!playoutRef.current) return;
     playoutRef.current.stop();
     setIsPlaying(false);
@@ -4875,7 +4918,7 @@ var MediaElementPlaylistProvider = ({
     setCurrentTime(0);
     setActiveAnnotationId(null);
   }, [stopAnimationLoop, setActiveAnnotationId]);
-  const seekTo = useCallback19(
+  const seekTo = useCallback20(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
       currentTimeRef.current = clampedTime;
@@ -4886,7 +4929,7 @@ var MediaElementPlaylistProvider = ({
     },
     [duration]
   );
-  const setPlaybackRate = useCallback19((rate) => {
+  const setPlaybackRate = useCallback20((rate) => {
     const clampedRate = Math.max(0.5, Math.min(2, rate));
     setPlaybackRateState(clampedRate);
     if (playoutRef.current) {
@@ -4912,9 +4955,9 @@ var MediaElementPlaylistProvider = ({
     }),
     [continuousPlay, annotations, activeAnnotationId, playbackRate, isAutomaticScroll]
   );
-  const onAnnotationsChangeRef = useRef15(onAnnotationsChange);
+  const onAnnotationsChangeRef = useRef16(onAnnotationsChange);
   onAnnotationsChangeRef.current = onAnnotationsChange;
-  const setAnnotations = useCallback19(
+  const setAnnotations = useCallback20(
     (action) => {
       const updated = typeof action === "function" ? action(annotationsRef.current) : action;
       if (!onAnnotationsChangeRef.current) {
@@ -5021,7 +5064,7 @@ var useMediaElementData = () => {
 };
 
 // src/components/PlaybackControls.tsx
-import { useCallback as useCallback20 } from "react";
+import { useCallback as useCallback21 } from "react";
 import { BaseControlButton } from "@waveform-playlist/ui-components";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var PlayButton = ({ className }) => {
@@ -5157,7 +5200,7 @@ var ClearAllButton = ({
   className
 }) => {
   const { stop } = usePlaylistControls();
-  const handleClick = useCallback20(() => {
+  const handleClick = useCallback21(() => {
     stop();
     onClearAll();
   }, [stop, onClearAll]);
@@ -5185,7 +5228,7 @@ var ZoomOutButton = ({
 };
 
 // src/components/ContextualControls.tsx
-import { useRef as useRef16, useEffect as useEffect12 } from "react";
+import { useRef as useRef17, useEffect as useEffect12 } from "react";
 import {
   MasterVolumeControl as BaseMasterVolumeControl,
   TimeFormatSelect as BaseTimeFormatSelect,
@@ -5224,8 +5267,8 @@ var PositionDisplay = styled.span`
 `;
 var AudioPosition = ({ className }) => {
   var _a;
-  const timeRef = useRef16(null);
-  const animationFrameRef = useRef16(null);
+  const timeRef = useRef17(null);
+  const animationFrameRef = useRef17(null);
   const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
   const { timeFormat: format } = usePlaylistData();
   useEffect12(() => {
@@ -5384,7 +5427,7 @@ function useClipInteractionEnabled() {
 }
 
 // src/components/PlaylistVisualization.tsx
-import { useContext as useContext6, useRef as useRef19, useState as useState16, useMemo as useMemo6, useCallback as useCallback21 } from "react";
+import { useContext as useContext6, useRef as useRef20, useState as useState17, useMemo as useMemo6, useCallback as useCallback22 } from "react";
 import { createPortal } from "react-dom";
 import styled4 from "styled-components";
 import { getGlobalContext as getGlobalContext2 } from "@waveform-playlist/playout";
@@ -5414,7 +5457,7 @@ import {
 } from "@waveform-playlist/ui-components";
 
 // src/components/AnimatedPlayhead.tsx
-import { useRef as useRef17, useEffect as useEffect13 } from "react";
+import { useRef as useRef18, useEffect as useEffect13 } from "react";
 import styled2 from "styled-components";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var PlayheadLine = styled2.div.attrs((props) => ({
@@ -5432,8 +5475,8 @@ var PlayheadLine = styled2.div.attrs((props) => ({
   will-change: transform;
 `;
 var AnimatedPlayhead = ({ color = "#ff0000" }) => {
-  const playheadRef = useRef17(null);
-  const animationFrameRef = useRef17(null);
+  const playheadRef = useRef18(null);
+  const animationFrameRef = useRef18(null);
   const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = usePlaylistData();
   useEffect13(() => {
@@ -5472,7 +5515,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
 };
 
 // src/components/ChannelWithProgress.tsx
-import { useRef as useRef18, useEffect as useEffect14 } from "react";
+import { useRef as useRef19, useEffect as useEffect14 } from "react";
 import styled3 from "styled-components";
 import {
   clipPixelWidth as computeClipPixelWidth
@@ -5537,8 +5580,8 @@ var ChannelWithProgress = (_a) => {
     "clipSampleRate",
     "clipOffsetSeconds"
   ]);
-  const progressRef = useRef18(null);
-  const animationFrameRef = useRef18(null);
+  const progressRef = useRef19(null);
+  const animationFrameRef = useRef19(null);
   const theme = useTheme();
   const { waveHeight } = usePlaylistInfo();
   const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
@@ -5821,11 +5864,11 @@ var PlaylistVisualization = ({
       )
     };
   }, [spectrogram == null ? void 0 : spectrogram.spectrogramWorkerApi]);
-  const [settingsModalTrackId, setSettingsModalTrackId] = useState16(null);
-  const [isSelecting, setIsSelecting] = useState16(false);
-  const mouseDownTimeRef = useRef19(0);
-  const scrollContainerRef = useRef19(null);
-  const handleScrollContainerRef = useCallback21(
+  const [settingsModalTrackId, setSettingsModalTrackId] = useState17(null);
+  const [isSelecting, setIsSelecting] = useState17(false);
+  const mouseDownTimeRef = useRef20(0);
+  const scrollContainerRef = useRef20(null);
+  const handleScrollContainerRef = useCallback22(
     (element) => {
       scrollContainerRef.current = element;
       setScrollContainer(element);
@@ -5863,7 +5906,7 @@ var PlaylistVisualization = ({
       );
     }
   });
-  const selectTrack = useCallback21(
+  const selectTrack = useCallback22(
     (trackIndex) => {
       if (trackIndex >= 0 && trackIndex < tracks.length) {
         const track = tracks[trackIndex];
@@ -6304,7 +6347,7 @@ var PlaylistVisualization = ({
 };
 
 // src/components/PlaylistAnnotationList.tsx
-import { useCallback as useCallback22 } from "react";
+import { useCallback as useCallback23 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var PlaylistAnnotationList = ({
   height,
@@ -6319,7 +6362,7 @@ var PlaylistAnnotationList = ({
   const integration = useAnnotationIntegration();
   const { setAnnotations } = usePlaylistControls();
   const resolvedConfig = annotationListConfig != null ? annotationListConfig : { linkEndpoints, continuousPlay };
-  const handleAnnotationUpdate = useCallback22(
+  const handleAnnotationUpdate = useCallback23(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6403,7 +6446,7 @@ var Waveform = ({
 };
 
 // src/components/MediaElementPlaylist.tsx
-import { useContext as useContext7, useRef as useRef22, useState as useState17, useCallback as useCallback23 } from "react";
+import { useContext as useContext7, useRef as useRef23, useState as useState18, useCallback as useCallback24 } from "react";
 import { DragDropProvider } from "@dnd-kit/react";
 import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers";
 import {
@@ -6439,7 +6482,7 @@ var noDropAnimationPlugins = (defaults) => {
 };
 
 // src/components/AnimatedMediaElementPlayhead.tsx
-import { useRef as useRef20, useEffect as useEffect15 } from "react";
+import { useRef as useRef21, useEffect as useEffect15 } from "react";
 import styled5 from "styled-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var PlayheadLine2 = styled5.div`
@@ -6456,8 +6499,8 @@ var PlayheadLine2 = styled5.div`
 var AnimatedMediaElementPlayhead = ({
   color = "#ff0000"
 }) => {
-  const playheadRef = useRef20(null);
-  const animationFrameRef = useRef20(null);
+  const playheadRef = useRef21(null);
+  const animationFrameRef = useRef21(null);
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = useMediaElementData();
   useEffect15(() => {
@@ -6496,7 +6539,7 @@ var AnimatedMediaElementPlayhead = ({
 };
 
 // src/components/ChannelWithMediaElementProgress.tsx
-import { useRef as useRef21, useEffect as useEffect16 } from "react";
+import { useRef as useRef22, useEffect as useEffect16 } from "react";
 import styled6 from "styled-components";
 import {
   SmartChannel as SmartChannel2,
@@ -6541,8 +6584,8 @@ var ChannelWithMediaElementProgress = (_a) => {
     "clipStartSample",
     "clipDurationSamples"
   ]);
-  const progressRef = useRef21(null);
-  const animationFrameRef = useRef21(null);
+  const progressRef = useRef22(null);
+  const animationFrameRef = useRef22(null);
   const theme = useTheme3();
   const { waveHeight } = usePlaylistInfo2();
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
@@ -6685,11 +6728,11 @@ var MediaElementPlaylist = ({
     fadeIn,
     fadeOut
   } = useMediaElementData();
-  const [selectionStart, setSelectionStart] = useState17(0);
-  const [selectionEnd, setSelectionEnd] = useState17(0);
-  const [isSelecting, setIsSelecting] = useState17(false);
-  const scrollContainerRef = useRef22(null);
-  const handleScrollContainerRef = useCallback23(
+  const [selectionStart, setSelectionStart] = useState18(0);
+  const [selectionEnd, setSelectionEnd] = useState18(0);
+  const [isSelecting, setIsSelecting] = useState18(false);
+  const scrollContainerRef = useRef23(null);
+  const handleScrollContainerRef = useCallback24(
     (el) => {
       scrollContainerRef.current = el;
       setScrollContainer(el);
@@ -6697,7 +6740,7 @@ var MediaElementPlaylist = ({
     [setScrollContainer]
   );
   const tracksFullWidth = Math.floor(duration * sampleRate / samplesPerPixel);
-  const handleAnnotationClick = useCallback23(
+  const handleAnnotationClick = useCallback24(
     (annotation) => __async(null, null, function* () {
       setActiveAnnotationId(annotation.id);
       try {
@@ -6712,7 +6755,7 @@ var MediaElementPlaylist = ({
     }),
     [setActiveAnnotationId, play]
   );
-  const handleAnnotationUpdate = useCallback23(
+  const handleAnnotationUpdate = useCallback24(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -6726,8 +6769,8 @@ var MediaElementPlaylist = ({
     duration,
     linkEndpoints: linkEndpointsProp
   });
-  const mouseDownTimeRef = useRef22(0);
-  const handleMouseDown = useCallback23(
+  const mouseDownTimeRef = useRef23(0);
+  const handleMouseDown = useCallback24(
     (e) => {
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
@@ -6739,7 +6782,7 @@ var MediaElementPlaylist = ({
     },
     [samplesPerPixel, sampleRate]
   );
-  const handleMouseMove = useCallback23(
+  const handleMouseMove = useCallback24(
     (e) => {
       if (!isSelecting) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -6749,7 +6792,7 @@ var MediaElementPlaylist = ({
     },
     [isSelecting, samplesPerPixel, sampleRate]
   );
-  const handleMouseUp = useCallback23(
+  const handleMouseUp = useCallback24(
     (e) => {
       if (!isSelecting) return;
       setIsSelecting(false);
@@ -6935,7 +6978,7 @@ var MediaElementPlaylist = ({
 };
 
 // src/components/MediaElementAnnotationList.tsx
-import { useCallback as useCallback24 } from "react";
+import { useCallback as useCallback25 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var MediaElementAnnotationList = ({
   height,
@@ -6951,7 +6994,7 @@ var MediaElementAnnotationList = ({
   const integration = useAnnotationIntegration();
   const { setAnnotations } = useMediaElementControls();
   const resolvedConfig = annotationListConfig != null ? annotationListConfig : { linkEndpoints: false, continuousPlay };
-  const handleAnnotationUpdate = useCallback24(
+  const handleAnnotationUpdate = useCallback25(
     (updatedAnnotations) => {
       setAnnotations(updatedAnnotations);
       onAnnotationUpdate == null ? void 0 : onAnnotationUpdate(updatedAnnotations);
@@ -7026,6 +7069,7 @@ var KeyboardShortcuts = ({
   playback = false,
   clipSplitting = false,
   annotations = false,
+  undo: undoEnabled = false,
   additionalShortcuts = []
 }) => {
   const { tracks, samplesPerPixel, playoutRef, duration } = usePlaylistData();
@@ -7035,7 +7079,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,
@@ -7050,6 +7094,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);
   }