@waveform-playlist/browser 10.1.0 → 10.1.2

package/dist/index.d.mts

@@ -0,0 +1,1824 @@
+import { Analyser, ToneAudioNode, InputNode } from 'tone';
+import * as tone from 'tone';
+export { tone as Tone };
+import { EffectsFunction, SoundFontCache, TrackEffectsFunction as TrackEffectsFunction$1 } from '@waveform-playlist/playout';
+export { EffectsFunction, TrackEffectsFunction } from '@waveform-playlist/playout';
+import * as React$1 from 'react';
+import React__default, { ReactNode, RefObject } from 'react';
+import { PlaylistEngine, EngineState } from '@waveform-playlist/engine';
+import { ClipTrack, AnnotationData, AnnotationAction, PeakData, Fade, MidiNoteData, WaveformDataObject, TrackEffectsFunction as TrackEffectsFunction$2, RenderMode, SpectrogramConfig, ColorMapValue, AnnotationActionOptions, RenderAnnotationItemProps, TrackSpectrogramOverrides } from '@waveform-playlist/core';
+export { AnnotationData, AudioClip, ClipTrack, Fade } from '@waveform-playlist/core';
+import { WaveformPlaylistTheme, TimeFormat, RenderPlayheadFunction, TrackMenuItem, SnapTo } from '@waveform-playlist/ui-components';
+export { TimeFormat } from '@waveform-playlist/ui-components';
+import { FadeConfig, MediaElementPlayout } from '@waveform-playlist/media-element-playout';
+import * as _dnd_kit_abstract from '@dnd-kit/abstract';
+import { DragStartEvent, DragMoveEvent, DragEndEvent, PluginDescriptor, Modifier, DragDropManager, DragOperation, Plugins } from '@dnd-kit/abstract';
+import { PointerSensor } from '@dnd-kit/dom';
+import WaveformData from 'waveform-data';
+
+interface ClipPeaks {
+    clipId: string;
+    trackName: string;
+    peaks: PeakData;
+    startSample: number;
+    durationSamples: number;
+    fadeIn?: Fade;
+    fadeOut?: Fade;
+    midiNotes?: MidiNoteData[];
+    sampleRate?: number;
+    offsetSamples?: number;
+}
+type TrackClipPeaks = ClipPeaks[];
+interface WaveformTrack {
+    src: string | AudioBuffer;
+    name?: string;
+    effects?: TrackEffectsFunction$1;
+}
+interface TrackState$1 {
+    name: string;
+    muted: boolean;
+    soloed: boolean;
+    volume: number;
+    pan: number;
+}
+interface PlaybackAnimationContextValue {
+    isPlaying: boolean;
+    currentTime: number;
+    currentTimeRef: React__default.RefObject<number>;
+    playbackStartTimeRef: React__default.RefObject<number>;
+    audioStartPositionRef: React__default.RefObject<number>;
+    /** Returns current playback time from engine (auto-wraps at loop boundaries). */
+    getPlaybackTime: () => number;
+}
+interface PlaylistStateContextValue {
+    continuousPlay: boolean;
+    linkEndpoints: boolean;
+    annotationsEditable: boolean;
+    isAutomaticScroll: boolean;
+    isLoopEnabled: boolean;
+    annotations: AnnotationData[];
+    activeAnnotationId: string | null;
+    selectionStart: number;
+    selectionEnd: number;
+    selectedTrackId: string | null;
+    loopStart: number;
+    loopEnd: number;
+    /** Whether playback continues past the end of loaded audio */
+    indefinitePlayback: boolean;
+}
+interface PlaylistControlsContextValue {
+    play: (startTime?: number, playDuration?: number) => Promise<void>;
+    pause: () => void;
+    stop: () => void;
+    seekTo: (time: number) => void;
+    setCurrentTime: (time: number) => void;
+    setTrackMute: (trackIndex: number, muted: boolean) => void;
+    setTrackSolo: (trackIndex: number, soloed: boolean) => void;
+    setTrackVolume: (trackIndex: number, volume: number) => void;
+    setTrackPan: (trackIndex: number, pan: number) => void;
+    setSelection: (start: number, end: number) => void;
+    setSelectedTrackId: (trackId: string | null) => void;
+    setTimeFormat: (format: TimeFormat) => void;
+    formatTime: (seconds: number) => string;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    setMasterVolume: (volume: number) => void;
+    setAutomaticScroll: (enabled: boolean) => void;
+    setScrollContainer: (element: HTMLDivElement | null) => void;
+    scrollContainerRef: React__default.RefObject<HTMLDivElement | null>;
+    setContinuousPlay: (enabled: boolean) => void;
+    setLinkEndpoints: (enabled: boolean) => void;
+    setAnnotationsEditable: (enabled: boolean) => void;
+    setAnnotations: React__default.Dispatch<React__default.SetStateAction<AnnotationData[]>>;
+    setActiveAnnotationId: (id: string | null) => void;
+    setLoopEnabled: (enabled: boolean) => void;
+    setLoopRegion: (start: number, end: number) => void;
+    setLoopRegionFromSelection: () => void;
+    clearLoopRegion: () => void;
+}
+interface PlaylistDataContextValue {
+    duration: number;
+    audioBuffers: AudioBuffer[];
+    peaksDataArray: TrackClipPeaks[];
+    trackStates: TrackState$1[];
+    tracks: ClipTrack[];
+    sampleRate: number;
+    waveHeight: number;
+    timeScaleHeight: number;
+    minimumPlaylistHeight: number;
+    controls: {
+        show: boolean;
+        width: number;
+    };
+    playoutRef: React__default.RefObject<PlaylistEngine | null>;
+    samplesPerPixel: number;
+    timeFormat: TimeFormat;
+    masterVolume: number;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+    barWidth: number;
+    barGap: number;
+    /** Width in pixels of progress bars. Defaults to barWidth + barGap (fills gaps). */
+    progressBarWidth: number;
+    /** Whether the playlist has finished loading all tracks */
+    isReady: boolean;
+    /** Whether tracks are rendered in mono mode */
+    mono: boolean;
+    /** Ref set by useClipDragHandlers during boundary trim drags.
+     *  When true, loadAudio skips engine rebuild — visual updates flow via React state only. */
+    isDraggingRef: React__default.MutableRefObject<boolean>;
+    onTracksChange: ((tracks: ClipTrack[]) => void) | undefined;
+}
+interface WaveformPlaylistProviderProps {
+    tracks: ClipTrack[];
+    timescale?: boolean;
+    mono?: boolean;
+    waveHeight?: number;
+    samplesPerPixel?: number;
+    zoomLevels?: number[];
+    automaticScroll?: boolean;
+    theme?: Partial<WaveformPlaylistTheme>;
+    controls?: {
+        show: boolean;
+        width: number;
+    };
+    annotationList?: {
+        annotations?: AnnotationData[];
+        editable?: boolean;
+        isContinuousPlay?: boolean;
+        linkEndpoints?: boolean;
+        controls?: AnnotationAction[];
+    };
+    effects?: EffectsFunction;
+    onReady?: () => void;
+    /** @deprecated Use onAnnotationsChange instead */
+    onAnnotationUpdate?: (annotations: AnnotationData[]) => void;
+    /** Callback when annotations are changed (drag, edit, etc.) */
+    onAnnotationsChange?: (annotations: AnnotationData[]) => void;
+    /** Width in pixels of waveform bars. Default: 1 */
+    barWidth?: number;
+    /** Spacing in pixels between waveform bars. Default: 0 */
+    barGap?: number;
+    /** Width in pixels of progress bars. Default: barWidth + barGap (fills gaps). */
+    progressBarWidth?: number;
+    /** Callback when engine clip operations (move, trim, split) change tracks.
+     * The provider calls this so the parent can update its tracks state without
+     * triggering a full engine rebuild.
+     *
+     * **Important:** The parent must pass the received `tracks` reference back as
+     * the `tracks` prop (i.e. `setState(tracks)`). The provider uses reference
+     * identity (`tracks === engineTracksRef.current`) to detect engine-originated
+     * updates and skip the expensive `loadAudio` rebuild. */
+    onTracksChange?: (tracks: ClipTrack[]) => void;
+    /** SoundFont cache for sample-based MIDI playback. When provided, MIDI clips
+     *  use SoundFont samples instead of PolySynth synthesis. */
+    soundFontCache?: SoundFontCache;
+    /** When true, tracks render visually but the engine build is deferred.
+     *  Use this during progressive loading to avoid rebuilding the engine for
+     *  each track — flip to false when all tracks are ready for a single build. */
+    deferEngineRebuild?: boolean;
+    /** Disable automatic stop when the cursor reaches the end of the longest
+     *  track. Useful for DAW-style recording beyond existing audio. */
+    indefinitePlayback?: boolean;
+    children: ReactNode;
+}
+declare const WaveformPlaylistProvider: React__default.FC<WaveformPlaylistProviderProps>;
+declare const usePlaybackAnimation: () => PlaybackAnimationContextValue;
+declare const usePlaylistState: () => PlaylistStateContextValue;
+declare const usePlaylistControls: () => PlaylistControlsContextValue;
+declare const usePlaylistData: () => PlaylistDataContextValue;
+
+interface MediaElementTrackConfig {
+    /** Audio source URL or Blob URL */
+    source: string;
+    /** Pre-computed waveform data (required for visualization) */
+    waveformData: WaveformDataObject;
+    /** Track name for display */
+    name?: string;
+    /** Fade in configuration (requires audioContext on provider) */
+    fadeIn?: FadeConfig;
+    /** Fade out configuration (requires audioContext on provider) */
+    fadeOut?: FadeConfig;
+}
+interface MediaElementAnimationContextValue {
+    isPlaying: boolean;
+    currentTime: number;
+    currentTimeRef: React__default.RefObject<number>;
+}
+interface MediaElementStateContextValue {
+    continuousPlay: boolean;
+    annotations: AnnotationData[];
+    activeAnnotationId: string | null;
+    playbackRate: number;
+    isAutomaticScroll: boolean;
+}
+interface MediaElementControlsContextValue {
+    play: (startTime?: number) => void;
+    pause: () => void;
+    stop: () => void;
+    seekTo: (time: number) => void;
+    setPlaybackRate: (rate: number) => void;
+    setContinuousPlay: (enabled: boolean) => void;
+    setAnnotations: React__default.Dispatch<React__default.SetStateAction<AnnotationData[]>>;
+    setActiveAnnotationId: (id: string | null) => void;
+    setAutomaticScroll: (enabled: boolean) => void;
+    setScrollContainer: (element: HTMLDivElement | null) => void;
+    scrollContainerRef: React__default.RefObject<HTMLDivElement | null>;
+}
+interface MediaElementDataContextValue {
+    duration: number;
+    peaksDataArray: TrackClipPeaks[];
+    sampleRate: number;
+    waveHeight: number;
+    timeScaleHeight: number;
+    samplesPerPixel: number;
+    playoutRef: React__default.RefObject<MediaElementPlayout | null>;
+    controls: {
+        show: boolean;
+        width: number;
+    };
+    barWidth: number;
+    barGap: number;
+    progressBarWidth: number;
+    fadeIn?: FadeConfig;
+    fadeOut?: FadeConfig;
+}
+interface MediaElementPlaylistProviderProps {
+    /** Single track configuration with source URL and waveform data */
+    track: MediaElementTrackConfig;
+    /** Initial samples per pixel (zoom level) */
+    samplesPerPixel?: number;
+    /** Height of each waveform track */
+    waveHeight?: number;
+    /** Show timescale */
+    timescale?: boolean;
+    /** Initial playback rate (0.5 to 2.0) */
+    playbackRate?: number;
+    /** Enable automatic scroll to keep playhead centered */
+    automaticScroll?: boolean;
+    /** Theme configuration */
+    theme?: Partial<WaveformPlaylistTheme>;
+    /** Track controls configuration */
+    controls?: {
+        show: boolean;
+        width: number;
+    };
+    /** Annotations */
+    annotationList?: {
+        annotations?: AnnotationData[];
+        isContinuousPlay?: boolean;
+    };
+    /** Width of waveform bars */
+    barWidth?: number;
+    /** Gap between waveform bars */
+    barGap?: number;
+    /** Width of progress bars */
+    progressBarWidth?: number;
+    /** Callback when annotations are changed (drag, edit, etc.) */
+    onAnnotationsChange?: (annotations: AnnotationData[]) => void;
+    /**
+     * AudioContext for Web Audio routing (fades, effects).
+     * When provided, audio routes through Web Audio nodes:
+     *   HTMLAudioElement → MediaElementSourceNode → fadeGain → volumeGain → destination
+     *
+     * Without this, playback uses HTMLAudioElement directly (no fades or effects).
+     * Each provider instance should use its own AudioContext or share one —
+     * createMediaElementSource() is called once per audio element.
+     */
+    audioContext?: AudioContext;
+    /** Callback when audio is ready */
+    onReady?: () => void;
+    children: ReactNode;
+}
+/**
+ * MediaElementPlaylistProvider
+ *
+ * A simplified playlist provider for single-track playback using HTMLAudioElement.
+ * Key features:
+ * - Pitch-preserving playback rate (0.5x - 2.0x)
+ * - Pre-computed peaks visualization (no AudioBuffer needed)
+ * - Simpler API than full WaveformPlaylistProvider
+ *
+ * Use this for:
+ * - Language learning apps (speed control)
+ * - Podcast players
+ * - Single-track audio viewers
+ *
+ * For multi-track editing, use WaveformPlaylistProvider instead.
+ */
+declare const MediaElementPlaylistProvider: React__default.FC<MediaElementPlaylistProviderProps>;
+declare const useMediaElementAnimation: () => MediaElementAnimationContextValue;
+declare const useMediaElementState: () => MediaElementStateContextValue;
+declare const useMediaElementControls: () => MediaElementControlsContextValue;
+declare const useMediaElementData: () => MediaElementDataContextValue;
+
+interface TimeFormatControls {
+    timeFormat: TimeFormat;
+    setTimeFormat: (format: TimeFormat) => void;
+    formatTime: (seconds: number) => string;
+    parseTime: (timeString: string) => number;
+}
+/**
+ * Hook to manage time format state
+ *
+ * @example
+ * ```tsx
+ * const { timeFormat, setTimeFormat, formatTime, parseTime } = useTimeFormat();
+ *
+ * <TimeFormatSelect
+ *   value={timeFormat}
+ *   onChange={setTimeFormat}
+ * />
+ * <span>{formatTime(currentTime)}</span>
+ * <input onChange={(e) => seekTo(parseTime(e.target.value))} />
+ * ```
+ */
+declare function useTimeFormat(): TimeFormatControls;
+
+interface ZoomControls {
+    samplesPerPixel: number;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+}
+interface UseZoomControlsProps {
+    engineRef: RefObject<PlaylistEngine | null>;
+    initialSamplesPerPixel: number;
+}
+/**
+ * Hook for managing zoom controls via PlaylistEngine delegation.
+ *
+ * zoomIn/zoomOut delegate to the engine. State is mirrored back from
+ * the engine via onEngineState(), which the provider's statechange
+ * handler calls on every engine event.
+ *
+ * samplesPerPixel updates use startTransition so React treats them as
+ * non-urgent — during playback, animation RAF callbacks interleave
+ * with the zoom re-render instead of being blocked.
+ */
+declare function useZoomControls({ engineRef, initialSamplesPerPixel, }: UseZoomControlsProps): ZoomControls & {
+    onEngineState: (state: EngineState) => void;
+};
+
+interface UseMasterVolumeProps {
+    engineRef: RefObject<PlaylistEngine | null>;
+    initialVolume?: number;
+}
+interface MasterVolumeControls {
+    masterVolume: number;
+    setMasterVolume: (volume: number) => void;
+    /** Ref holding the current masterVolume for seeding a fresh engine. */
+    masterVolumeRef: React.RefObject<number>;
+}
+/**
+ * Hook for managing master volume via PlaylistEngine delegation.
+ *
+ * setMasterVolume delegates to the engine. State is mirrored back from
+ * the engine via onEngineState(), which the provider's statechange
+ * handler calls on every engine event.
+ */
+declare function useMasterVolume({ engineRef, initialVolume, }: UseMasterVolumeProps): MasterVolumeControls & {
+    onEngineState: (state: EngineState) => void;
+};
+
+/**
+ * Hook for master effects with frequency analyzer
+ * Returns the analyser ref and the effects function to pass to WaveformPlaylistProvider
+ *
+ * For more advanced effects (reverb, delay, filters, etc.), use useDynamicEffects instead.
+ */
+declare const useMasterAnalyser: (fftSize?: number) => {
+    analyserRef: React$1.MutableRefObject<Analyser | null>;
+    masterEffects: EffectsFunction;
+};
+
+/**
+ * Configuration for a single audio track to load
+ *
+ * Audio can be provided in three ways:
+ * 1. `src` - URL to fetch and decode (standard loading)
+ * 2. `audioBuffer` - Pre-loaded AudioBuffer (skip fetch/decode)
+ * 3. `waveformData` only - Peaks-first rendering (audio loads later)
+ *
+ * For peaks-first rendering, just provide `waveformData` - the sample rate
+ * and duration are derived from the waveform data automatically.
+ */
+interface AudioTrackConfig {
+    /** URL to audio file - used if audioBuffer not provided */
+    src?: string;
+    /** Pre-loaded AudioBuffer - skips fetch/decode if provided */
+    audioBuffer?: AudioBuffer;
+    name?: string;
+    muted?: boolean;
+    soloed?: boolean;
+    volume?: number;
+    pan?: number;
+    color?: string;
+    effects?: TrackEffectsFunction$2;
+    startTime?: number;
+    duration?: number;
+    offset?: number;
+    fadeIn?: Fade;
+    fadeOut?: Fade;
+    waveformData?: WaveformDataObject;
+    /** Visualization render mode: 'waveform' | 'spectrogram' | 'both'. Default: 'waveform' */
+    renderMode?: RenderMode;
+    /** Spectrogram configuration (FFT size, window, frequency scale, etc.) */
+    spectrogramConfig?: SpectrogramConfig;
+    /** Spectrogram color map name or custom color array */
+    spectrogramColorMap?: ColorMapValue;
+}
+/**
+ * Options for useAudioTracks hook
+ */
+interface UseAudioTracksOptions {
+    /**
+     * When true, all tracks render immediately as placeholders with clip geometry
+     * from the config. Audio fills in progressively as files decode, and peaks
+     * render as each buffer becomes available. Use with `deferEngineRebuild={loading}`
+     * on the provider for a single engine build when all tracks are ready.
+     *
+     * Requires `duration` or `waveformData` in each config so clip dimensions are known upfront.
+     * Default: false
+     */
+    immediate?: boolean;
+    /** @deprecated Use `immediate` instead. */
+    progressive?: boolean;
+}
+/**
+ * Hook to load audio from URLs and convert to ClipTrack format
+ *
+ * This hook fetches audio files, decodes them, and creates ClipTrack objects
+ * with a single clip per track. Supports custom positioning for multi-clip arrangements.
+ *
+ * @param configs - Array of audio track configurations
+ * @param options - Optional configuration for loading behavior
+ * @returns Object with tracks array, loading state, and progress info
+ *
+ * @example
+ * ```typescript
+ * // Basic usage (clips positioned at start)
+ * const { tracks, loading, error } = useAudioTracks([
+ *   { src: 'audio/vocals.mp3', name: 'Vocals' },
+ *   { src: 'audio/drums.mp3', name: 'Drums' },
+ * ]);
+ *
+ * // Immediate rendering with deferred engine build (recommended for multi-track)
+ * const { tracks, loading } = useAudioTracks(
+ *   [
+ *     { src: 'audio/vocals.mp3', name: 'Vocals', duration: 30 },
+ *     { src: 'audio/drums.mp3', name: 'Drums', duration: 30 },
+ *   ],
+ *   { immediate: true }
+ * );
+ * // All tracks render instantly as placeholders, peaks fill in as files load
+ * return (
+ *   <WaveformPlaylistProvider tracks={tracks} deferEngineRebuild={loading}>
+ *     ...
+ *   </WaveformPlaylistProvider>
+ * );
+ *
+ * // Pre-loaded AudioBuffer (skip fetch/decode)
+ * const { tracks } = useAudioTracks([
+ *   { audioBuffer: myPreloadedBuffer, name: 'Pre-loaded' },
+ * ]);
+ *
+ * // Peaks-first rendering (instant visual, audio loads later)
+ * const { tracks } = useAudioTracks([
+ *   { waveformData: preloadedPeaks, name: 'Peaks Only' },  // Renders immediately
+ * ]);
+ * ```
+ */
+declare function useAudioTracks(configs: AudioTrackConfig[], options?: UseAudioTracksOptions): {
+    tracks: ClipTrack[];
+    loading: boolean;
+    error: string | null;
+    loadedCount: number;
+    totalCount: number;
+};
+
+interface UseClipDragHandlersOptions {
+    tracks: ClipTrack[];
+    onTracksChange: (tracks: ClipTrack[]) => void;
+    samplesPerPixel: number;
+    sampleRate: number;
+    engineRef: React__default.RefObject<PlaylistEngine | null>;
+    /** Ref toggled during boundary trim drags. When true, the provider's loadAudio
+     *  skips engine rebuilds so engine keeps original clip positions. On drag end,
+     *  engine.trimClip() commits the final delta. Obtain from usePlaylistData(). */
+    isDraggingRef: React__default.MutableRefObject<boolean>;
+    /** Optional function that snaps a sample position to the nearest grid position.
+     *  Used for boundary trim snapping (move snapping is handled by the SnapToGridModifier). */
+    snapSamplePosition?: (samplePosition: number) => number;
+}
+/**
+ * Custom hook for handling clip drag operations (movement and trimming)
+ *
+ * Provides drag handlers for use with @dnd-kit/react DragDropProvider.
+ * Handles both clip movement (dragging entire clips) and boundary trimming (adjusting clip edges).
+ *
+ * Collision detection for clip moves is handled by `ClipCollisionModifier` (passed to DragDropProvider).
+ *
+ * **Move:** `onDragEnd` delegates to `engine.moveClip()` in one shot.
+ *
+ * **Trim:** `onDragMove` updates React state per-frame via `onTracksChange` for smooth
+ * visual feedback (using cumulative deltas from the original clip snapshot). `isDraggingRef`
+ * prevents loadAudio from rebuilding the engine during the drag, so the engine keeps the
+ * original clip positions. On drag end, `engine.trimClip()` commits the final delta.
+ *
+ * @example
+ * ```tsx
+ * const { onDragStart, onDragMove, onDragEnd } = useClipDragHandlers({
+ *   tracks,
+ *   onTracksChange: setTracks,
+ *   samplesPerPixel,
+ *   sampleRate,
+ *   engineRef: playoutRef,
+ *   isDraggingRef,
+ * });
+ *
+ * return (
+ *   <DragDropProvider
+ *     onDragStart={onDragStart}
+ *     onDragMove={onDragMove}
+ *     onDragEnd={onDragEnd}
+ *     modifiers={[RestrictToHorizontalAxis, ClipCollisionModifier.configure({ tracks, samplesPerPixel })]}
+ *   >
+ *     <Waveform showClipHeaders={true} />
+ *   </DragDropProvider>
+ * );
+ * ```
+ */
+declare function useClipDragHandlers({ tracks, onTracksChange, samplesPerPixel, sampleRate, engineRef, isDraggingRef, snapSamplePosition, }: UseClipDragHandlersOptions): {
+    onDragStart: (event: Parameters<DragStartEvent>[0]) => void;
+    onDragMove: (event: Parameters<DragMoveEvent>[0]) => void;
+    onDragEnd: (event: Parameters<DragEndEvent>[0]) => void;
+};
+
+interface UseAnnotationDragHandlersOptions {
+    annotations: AnnotationData[];
+    onAnnotationsChange: (annotations: AnnotationData[]) => void;
+    samplesPerPixel: number;
+    sampleRate: number;
+    duration: number;
+    linkEndpoints: boolean;
+}
+/**
+ * Custom hook for handling annotation drag operations (boundary trimming)
+ *
+ * Provides drag handlers for use with @dnd-kit/react DragDropProvider.
+ * Handles annotation boundary resizing with linked endpoints support.
+ *
+ * @example
+ * ```tsx
+ * const { onDragStart, onDragMove, onDragEnd } = useAnnotationDragHandlers({
+ *   annotations,
+ *   onAnnotationsChange: setAnnotations,
+ *   samplesPerPixel,
+ *   sampleRate,
+ *   duration,
+ *   linkEndpoints,
+ * });
+ *
+ * return (
+ *   <DragDropProvider
+ *     onDragStart={onDragStart}
+ *     onDragMove={onDragMove}
+ *     onDragEnd={onDragEnd}
+ *     modifiers={[RestrictToHorizontalAxis]}
+ *   >
+ *     {renderAnnotations()}
+ *   </DragDropProvider>
+ * );
+ * ```
+ */
+declare function useAnnotationDragHandlers({ annotations, onAnnotationsChange, samplesPerPixel, sampleRate, duration, linkEndpoints, }: UseAnnotationDragHandlersOptions): {
+    onDragStart: (event: Parameters<DragStartEvent>[0]) => void;
+    onDragMove: (event: Parameters<DragMoveEvent>[0]) => void;
+    onDragEnd: (event: Parameters<DragEndEvent>[0]) => void;
+};
+
+/**
+ * Hook for configuring @dnd-kit sensors for clip dragging
+ *
+ * Provides consistent drag activation behavior across all examples.
+ * Always overrides PointerSensor defaults with custom activation constraints:
+ * - Default mode: distance-based activation (1px) for all pointer types
+ * - Touch-optimized mode: delay-based activation for touch (250ms),
+ *   distance-based for mouse/pen
+ */
+
+interface DragSensorOptions {
+    /**
+     * Enable mobile-optimized touch handling with delay-based activation.
+     * When true, touch events get delay-based activation while mouse/pen get distance-based.
+     * When false (default), all pointer types use distance-based activation (1px).
+     */
+    touchOptimized?: boolean;
+    /**
+     * Delay in milliseconds before touch drag activates (only when touchOptimized is true).
+     * Default: 250ms - long enough to distinguish from scroll intent
+     */
+    touchDelay?: number;
+    /**
+     * Distance tolerance during touch delay (only when touchOptimized is true).
+     * If finger moves more than this during delay, drag is cancelled.
+     * Default: 5px - allows slight finger movement
+     */
+    touchTolerance?: number;
+    /**
+     * Distance in pixels before mouse drag activates.
+     * Default: 1px for immediate feedback on desktop
+     */
+    mouseDistance?: number;
+}
+/**
+ * Returns configured sensors for @dnd-kit drag operations
+ *
+ * @param options - Configuration options for drag sensors
+ * @returns Array of sensor constructors/descriptors for DragDropProvider's sensors prop
+ *
+ * @example
+ * // Desktop-optimized (default — 1px distance activation for all pointer types)
+ * const sensors = useDragSensors();
+ *
+ * @example
+ * // Mobile-optimized with custom touch delay
+ * const sensors = useDragSensors({ touchOptimized: true, touchDelay: 300 });
+ */
+declare function useDragSensors(options?: DragSensorOptions): (typeof PointerSensor | PluginDescriptor<any, any, any>)[];
+
+interface UseClipSplittingOptions {
+    tracks: ClipTrack[];
+    sampleRate: number;
+    samplesPerPixel: number;
+    engineRef: React__default.RefObject<PlaylistEngine | null>;
+}
+interface UseClipSplittingResult {
+    splitClipAtPlayhead: () => boolean;
+    splitClipAt: (trackIndex: number, clipIndex: number, splitTime: number) => boolean;
+}
+/**
+ * Hook for splitting clips at the playhead or at a specific time
+ *
+ * Splitting delegates to `engine.splitClip()` — the engine handles clip creation,
+ * adapter sync, and emits statechange. The provider's statechange handler propagates
+ * the updated tracks to the parent via `onTracksChange`.
+ *
+ * @param options - Configuration options
+ * @returns Object with split functions
+ *
+ * @example
+ * ```tsx
+ * const { splitClipAtPlayhead } = useClipSplitting({
+ *   tracks,
+ *   sampleRate,
+ *   samplesPerPixel,
+ *   engineRef: playoutRef,
+ * });
+ *
+ * // In keyboard handler
+ * const handleKeyPress = (e: KeyboardEvent) => {
+ *   if (e.key === 's' || e.key === 'S') {
+ *     splitClipAtPlayhead();
+ *   }
+ * };
+ * ```
+ */
+declare const useClipSplitting: (options: UseClipSplittingOptions) => UseClipSplittingResult;
+
+interface KeyboardShortcut {
+    key: string;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+    action: () => void;
+    description?: string;
+    preventDefault?: boolean;
+}
+interface UseKeyboardShortcutsOptions {
+    shortcuts: KeyboardShortcut[];
+    enabled?: boolean;
+}
+/**
+ * Hook for managing keyboard shortcuts
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * useKeyboardShortcuts({
+ *   shortcuts: [
+ *     {
+ *       key: ' ',
+ *       action: togglePlayPause,
+ *       description: 'Play/Pause',
+ *       preventDefault: true,
+ *     },
+ *     {
+ *       key: 's',
+ *       action: splitClipAtPlayhead,
+ *       description: 'Split clip at playhead',
+ *       preventDefault: true,
+ *     },
+ *   ],
+ * });
+ * ```
+ */
+declare const useKeyboardShortcuts: (options: UseKeyboardShortcutsOptions) => void;
+/**
+ * Get a human-readable string representation of a keyboard shortcut
+ *
+ * @param shortcut - The keyboard shortcut
+ * @returns Human-readable string (e.g., "Cmd+Shift+S")
+ */
+declare const getShortcutLabel: (shortcut: KeyboardShortcut) => string;
+
+interface UsePlaybackShortcutsOptions {
+    /**
+     * Enable the shortcuts. Defaults to true.
+     */
+    enabled?: boolean;
+    /**
+     * Additional shortcuts to include alongside the default playback shortcuts.
+     */
+    additionalShortcuts?: KeyboardShortcut[];
+    /**
+     * Override default shortcuts. If provided, only these shortcuts will be used.
+     */
+    shortcuts?: KeyboardShortcut[];
+}
+interface UsePlaybackShortcutsReturn {
+    /** Rewind to the beginning (time = 0) */
+    rewindToStart: () => void;
+    /** Toggle play/pause */
+    togglePlayPause: () => void;
+    /** Stop playback and return to start position */
+    stopPlayback: () => void;
+    /** The list of active keyboard shortcuts */
+    shortcuts: KeyboardShortcut[];
+}
+/**
+ * Hook that provides common playback keyboard shortcuts for the playlist.
+ *
+ * Default shortcuts:
+ * - `Space` - Toggle play/pause
+ * - `Escape` - Stop playback
+ * - `0` - Rewind to start (seek to time 0)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - enables default shortcuts
+ * usePlaybackShortcuts();
+ *
+ * // With additional custom shortcuts
+ * usePlaybackShortcuts({
+ *   additionalShortcuts: [
+ *     { key: 's', action: splitClipAtPlayhead, description: 'Split clip' },
+ *   ],
+ * });
+ *
+ * // Completely override shortcuts
+ * usePlaybackShortcuts({
+ *   shortcuts: [
+ *     { key: 'Home', action: rewindToStart, description: 'Go to start' },
+ *   ],
+ * });
+ * ```
+ */
+declare const usePlaybackShortcuts: (options?: UsePlaybackShortcutsOptions) => UsePlaybackShortcutsReturn;
+
+interface UseAnnotationKeyboardControlsOptions {
+    annotations: AnnotationData[];
+    activeAnnotationId: string | null;
+    onAnnotationsChange: (annotations: AnnotationData[]) => void;
+    /** Callback to set the active annotation ID for selection */
+    onActiveAnnotationChange?: (id: string | null) => void;
+    duration: number;
+    linkEndpoints: boolean;
+    /** Whether continuous play is enabled (affects playback duration) */
+    continuousPlay?: boolean;
+    enabled?: boolean;
+    /** Optional: scroll container ref for auto-scrolling to annotation */
+    scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
+    /** Optional: samples per pixel for scroll position calculation */
+    samplesPerPixel?: number;
+    /** Optional: sample rate for scroll position calculation */
+    sampleRate?: number;
+    /** Optional: callback to start playback at a time with optional duration */
+    onPlay?: (startTime: number, duration?: number) => void;
+}
+/**
+ * Hook for keyboard-based annotation navigation and boundary editing
+ *
+ * Navigation Shortcuts:
+ * - ArrowUp / ArrowLeft = Select previous annotation
+ * - ArrowDown / ArrowRight = Select next annotation
+ * - Home = Select first annotation
+ * - End = Select last annotation
+ * - Escape = Deselect annotation
+ * - Enter = Play selected annotation
+ *
+ * Boundary Editing Shortcuts (requires active annotation):
+ * - [ = Move start boundary earlier (left)
+ * - ] = Move start boundary later (right)
+ * - Shift+[ = Move end boundary earlier (left)
+ * - Shift+] = Move end boundary later (right)
+ *
+ * Respects linkEndpoints and continuousPlay settings.
+ *
+ * @example
+ * ```tsx
+ * useAnnotationKeyboardControls({
+ *   annotations,
+ *   activeAnnotationId,
+ *   onAnnotationsChange: setAnnotations,
+ *   onActiveAnnotationChange: setActiveAnnotationId,
+ *   duration,
+ *   linkEndpoints,
+ * });
+ * ```
+ */
+declare function useAnnotationKeyboardControls({ annotations, activeAnnotationId, onAnnotationsChange, onActiveAnnotationChange, duration, linkEndpoints, continuousPlay, enabled, scrollContainerRef, samplesPerPixel, sampleRate, onPlay, }: UseAnnotationKeyboardControlsOptions): {
+    moveStartBoundary: (delta: number) => void;
+    moveEndBoundary: (delta: number) => void;
+    selectPrevious: () => void;
+    selectNext: () => void;
+    selectFirst: () => void;
+    selectLast: () => void;
+    clearSelection: () => void;
+    scrollToAnnotation: (annotationId: string) => void;
+    playActiveAnnotation: () => void;
+};
+
+/**
+ * Effect definitions for all available Tone.js effects
+ * Each effect has parameters with min/max/default values for UI controls
+ */
+type ParameterType = 'number' | 'select' | 'boolean';
+interface EffectParameter {
+    name: string;
+    label: string;
+    type: ParameterType;
+    min?: number;
+    max?: number;
+    step?: number;
+    default: number | string | boolean;
+    unit?: string;
+    options?: {
+        value: string | number;
+        label: string;
+    }[];
+}
+interface EffectDefinition {
+    id: string;
+    name: string;
+    category: 'delay' | 'reverb' | 'modulation' | 'distortion' | 'filter' | 'dynamics' | 'spatial';
+    description: string;
+    parameters: EffectParameter[];
+}
+declare const effectDefinitions: EffectDefinition[];
+declare const getEffectDefinition: (id: string) => EffectDefinition | undefined;
+declare const getEffectsByCategory: (category: EffectDefinition["category"]) => EffectDefinition[];
+declare const effectCategories: {
+    id: EffectDefinition['category'];
+    name: string;
+}[];
+
+interface ActiveEffect {
+    instanceId: string;
+    effectId: string;
+    definition: EffectDefinition;
+    params: Record<string, number | string | boolean>;
+    bypassed: boolean;
+}
+interface UseDynamicEffectsReturn {
+    activeEffects: ActiveEffect[];
+    availableEffects: EffectDefinition[];
+    addEffect: (effectId: string) => void;
+    removeEffect: (instanceId: string) => void;
+    updateParameter: (instanceId: string, paramName: string, value: number | string | boolean) => void;
+    toggleBypass: (instanceId: string) => void;
+    reorderEffects: (fromIndex: number, toIndex: number) => void;
+    clearAllEffects: () => void;
+    masterEffects: EffectsFunction;
+    /**
+     * Creates a fresh effects function for offline rendering.
+     * This creates new effect instances that work in the offline AudioContext.
+     */
+    createOfflineEffectsFunction: () => EffectsFunction | undefined;
+    analyserRef: React.RefObject<Analyser | null>;
+}
+/**
+ * Hook for managing a dynamic chain of audio effects with real-time parameter updates
+ */
+declare function useDynamicEffects(fftSize?: number): UseDynamicEffectsReturn;
+
+interface TrackActiveEffect {
+    instanceId: string;
+    effectId: string;
+    definition: EffectDefinition;
+    params: Record<string, number | string | boolean>;
+    bypassed: boolean;
+}
+interface TrackEffectsState {
+    trackId: string;
+    activeEffects: TrackActiveEffect[];
+}
+interface UseTrackDynamicEffectsReturn {
+    trackEffectsState: Map<string, TrackActiveEffect[]>;
+    addEffectToTrack: (trackId: string, effectId: string) => void;
+    removeEffectFromTrack: (trackId: string, instanceId: string) => void;
+    updateTrackEffectParameter: (trackId: string, instanceId: string, paramName: string, value: number | string | boolean) => void;
+    toggleBypass: (trackId: string, instanceId: string) => void;
+    clearTrackEffects: (trackId: string) => void;
+    getTrackEffectsFunction: (trackId: string) => TrackEffectsFunction$1 | undefined;
+    /**
+     * Creates a fresh effects function for a track for offline rendering.
+     * This creates new effect instances that work in the offline AudioContext.
+     */
+    createOfflineTrackEffectsFunction: (trackId: string) => TrackEffectsFunction$1 | undefined;
+    availableEffects: EffectDefinition[];
+}
+/**
+ * Hook for managing dynamic effects per track with real-time parameter updates
+ */
+declare function useTrackDynamicEffects(): UseTrackDynamicEffectsReturn;
+
+/**
+ * WAV file encoder
+ * Converts AudioBuffer to WAV format Blob
+ */
+interface WavEncoderOptions {
+    /** Bit depth: 16 or 32. Default: 16 */
+    bitDepth?: 16 | 32;
+}
+
+/** Function type for per-track effects (same as in @waveform-playlist/core) */
+type TrackEffectsFunction = (graphEnd: unknown, destination: unknown, isOffline: boolean) => void | (() => void);
+interface ExportOptions extends WavEncoderOptions {
+    /** Filename for download (without extension) */
+    filename?: string;
+    /** Export mode: 'master' for stereo mix, 'individual' for single track */
+    mode?: 'master' | 'individual';
+    /** Track index for individual export (only used when mode is 'individual') */
+    trackIndex?: number;
+    /** Whether to trigger automatic download */
+    autoDownload?: boolean;
+    /** Whether to apply effects (fades, etc.) - defaults to true */
+    applyEffects?: boolean;
+    /**
+     * Optional Tone.js effects function for master effects. When provided, export will use Tone.Offline
+     * to render through the effects chain. The function receives isOffline=true.
+     */
+    effectsFunction?: EffectsFunction;
+    /**
+     * Optional function to create offline track effects.
+     * Takes a trackId and returns a TrackEffectsFunction for offline rendering.
+     * This is used instead of track.effects to avoid AudioContext mismatch issues.
+     */
+    createOfflineTrackEffects?: (trackId: string) => TrackEffectsFunction | undefined;
+    /** Progress callback (0-1) */
+    onProgress?: (progress: number) => void;
+}
+interface ExportResult {
+    /** The rendered audio buffer */
+    audioBuffer: AudioBuffer;
+    /** The WAV file as a Blob */
+    blob: Blob;
+    /** Duration in seconds */
+    duration: number;
+}
+interface UseExportWavReturn {
+    /** Export the playlist to WAV */
+    exportWav: (tracks: ClipTrack[], trackStates: TrackState[], options?: ExportOptions) => Promise<ExportResult>;
+    /** Whether export is in progress */
+    isExporting: boolean;
+    /** Export progress (0-1) */
+    progress: number;
+    /** Error message if export failed */
+    error: string | null;
+}
+interface TrackState {
+    muted: boolean;
+    soloed: boolean;
+    volume: number;
+    pan: number;
+}
+/**
+ * Hook for exporting the waveform playlist to WAV format
+ * Uses OfflineAudioContext for fast, non-real-time rendering
+ */
+declare function useExportWav(): UseExportWavReturn;
+
+/**
+ * useDynamicTracks — imperative hook for runtime track additions.
+ *
+ * Complements `useAudioTracks` (declarative, configs-driven) with an
+ * imperative `addTracks()` API for dynamic loading (drag-and-drop, file pickers).
+ *
+ * Placeholder tracks appear instantly while audio decodes in parallel.
+ */
+
+/** A source that can be decoded into a track. */
+type TrackSource = File | Blob | string | {
+    src: string;
+    name?: string;
+};
+/** Info about a track that failed to load. */
+interface TrackLoadError {
+    /** Display name of the source that failed. */
+    name: string;
+    /** The underlying error. */
+    error: Error;
+}
+interface UseDynamicTracksReturn {
+    /**
+     * Current tracks array (placeholders + loaded). Pass to WaveformPlaylistProvider.
+     * Placeholder tracks have `clips: []` and names ending with " (loading...)".
+     */
+    tracks: ClipTrack[];
+    /** Add one or more sources — creates placeholder tracks immediately. */
+    addTracks: (sources: TrackSource[]) => void;
+    /** Remove a track by its id. Aborts in-flight fetch/decode if still loading. */
+    removeTrack: (trackId: string) => void;
+    /** Number of sources currently decoding. */
+    loadingCount: number;
+    /** True when any source is still decoding. */
+    isLoading: boolean;
+    /** Tracks that failed to load (removed from `tracks` automatically). */
+    errors: TrackLoadError[];
+}
+declare function useDynamicTracks(): UseDynamicTracksReturn;
+
+/**
+ * Hook for monitoring master output levels
+ *
+ * Connects an AudioWorklet meter processor to the Destination node for
+ * real-time output level monitoring. Computes sample-accurate peak and
+ * RMS via the meter worklet — no transient is missed.
+ *
+ * IMPORTANT: Uses getGlobalContext() from playout to ensure the meter
+ * is created on the same AudioContext as the audio engine. Tone.js's
+ * getContext()/getDestination() return the DEFAULT context, which is
+ * replaced when getGlobalContext() calls setContext() on first audio init.
+ */
+interface UseOutputMeterOptions {
+    /**
+     * Number of channels to meter.
+     * Default: 2 (stereo output)
+     */
+    channelCount?: number;
+    /**
+     * How often to update the levels (in Hz).
+     * Default: 60 (60fps)
+     */
+    updateRate?: number;
+    /**
+     * Whether audio is currently playing. When this transitions to false,
+     * all levels (current, peak, RMS) and smoothed state are reset to zero.
+     * Without this, the browser's tail-time optimization stops calling the
+     * worklet's process() when no audio flows, leaving the last non-zero
+     * levels frozen in state.
+     * Default: false
+     */
+    isPlaying?: boolean;
+}
+interface UseOutputMeterReturn {
+    /** Per-channel peak output levels (0-1) */
+    levels: number[];
+    /** Per-channel held peak levels (0-1) */
+    peakLevels: number[];
+    /** Per-channel RMS output levels (0-1) */
+    rmsLevels: number[];
+    /** Reset all held peak levels to 0 */
+    resetPeak: () => void;
+    /** Error from meter setup (worklet load failure, context issues, etc.) */
+    error: Error | null;
+}
+declare function useOutputMeter(options?: UseOutputMeterOptions): UseOutputMeterReturn;
+
+/**
+ * Factory for creating Tone.js effect instances from effect definitions
+ */
+
+interface EffectInstance {
+    effect: ToneAudioNode;
+    id: string;
+    instanceId: string;
+    dispose: () => void;
+    setParameter: (name: string, value: number | string | boolean) => void;
+    getParameter: (name: string) => number | string | boolean | undefined;
+    connect: (destination: InputNode) => void;
+    disconnect: () => void;
+}
+/**
+ * Create an effect instance from a definition with initial parameter values
+ */
+declare function createEffectInstance(definition: EffectDefinition, initialParams?: Record<string, number | string | boolean>): EffectInstance;
+/**
+ * Create a chain of effects connected in series
+ */
+declare function createEffectChain(effects: EffectInstance[]): {
+    input: ToneAudioNode;
+    output: ToneAudioNode;
+    dispose: () => void;
+};
+
+declare const PlayButton: React__default.FC<{
+    className?: string;
+}>;
+declare const PauseButton: React__default.FC<{
+    className?: string;
+}>;
+declare const StopButton: React__default.FC<{
+    className?: string;
+}>;
+declare const RewindButton: React__default.FC<{
+    className?: string;
+}>;
+declare const FastForwardButton: React__default.FC<{
+    className?: string;
+}>;
+declare const SkipBackwardButton: React__default.FC<{
+    skipAmount?: number;
+    className?: string;
+}>;
+declare const SkipForwardButton: React__default.FC<{
+    skipAmount?: number;
+    className?: string;
+}>;
+declare const LoopButton: React__default.FC<{
+    className?: string;
+}>;
+declare const SetLoopRegionButton: React__default.FC<{
+    className?: string;
+}>;
+interface ClearAllButtonProps {
+    onClearAll: () => void;
+    label?: string;
+    className?: string;
+}
+declare const ClearAllButton: React__default.FC<ClearAllButtonProps>;
+
+declare const ZoomInButton: React__default.FC<{
+    className?: string;
+    disabled?: boolean;
+}>;
+declare const ZoomOutButton: React__default.FC<{
+    className?: string;
+    disabled?: boolean;
+}>;
+
+/**
+ * Master volume control that uses the playlist context
+ */
+declare const MasterVolumeControl: React__default.FC<{
+    className?: string;
+}>;
+/**
+ * Time format selector that uses the playlist context
+ */
+declare const TimeFormatSelect: React__default.FC<{
+    className?: string;
+}>;
+/**
+ * Audio position display that uses the playlist context.
+ * Uses requestAnimationFrame for smooth 60fps updates during playback.
+ * Direct DOM manipulation avoids React re-renders.
+ */
+declare const AudioPosition: React__default.FC<{
+    className?: string;
+}>;
+/**
+ * Selection time inputs that use the playlist context
+ */
+declare const SelectionTimeInputs: React__default.FC<{
+    className?: string;
+}>;
+/**
+ * Automatic scroll checkbox that uses the playlist context
+ * Uses split contexts to avoid re-rendering during animation
+ */
+declare const AutomaticScrollCheckbox: React__default.FC<{
+    className?: string;
+}>;
+
+/**
+ * Continuous play checkbox that uses the playlist context.
+ * Must be used within <AnnotationProvider>.
+ */
+declare const ContinuousPlayCheckbox: React__default.FC<{
+    className?: string;
+}>;
+/**
+ * Link endpoints checkbox that uses the playlist context.
+ * Must be used within <AnnotationProvider>.
+ */
+declare const LinkEndpointsCheckbox: React__default.FC<{
+    className?: string;
+}>;
+/**
+ * Editable annotations checkbox that uses the playlist context.
+ * Must be used within <AnnotationProvider>.
+ */
+declare const EditableCheckbox: React__default.FC<{
+    className?: string;
+}>;
+/**
+ * Download annotations button that uses the playlist context.
+ * Must be used within <AnnotationProvider>.
+ */
+declare const DownloadAnnotationsButton: React__default.FC<{
+    filename?: string;
+    className?: string;
+}>;
+
+interface ExportWavButtonProps {
+    /** Button label */
+    label?: string;
+    /** Filename for the downloaded file (without extension) */
+    filename?: string;
+    /** Export mode: 'master' for stereo mix, 'individual' for single track */
+    mode?: 'master' | 'individual';
+    /** Track index for individual export */
+    trackIndex?: number;
+    /** Bit depth: 16 or 32 */
+    bitDepth?: 16 | 32;
+    /** Whether to apply effects (fades, etc.) - defaults to true */
+    applyEffects?: boolean;
+    /**
+     * Optional Tone.js effects function for master effects. When provided, export will use Tone.Offline
+     * to render through the effects chain. The function receives isOffline=true.
+     */
+    effectsFunction?: EffectsFunction;
+    /**
+     * Optional function to create offline track effects.
+     * Takes a trackId and returns a TrackEffectsFunction for offline rendering.
+     */
+    createOfflineTrackEffects?: (trackId: string) => TrackEffectsFunction | undefined;
+    /** CSS class name */
+    className?: string;
+    /** Callback when export completes */
+    onExportComplete?: (blob: Blob) => void;
+    /** Callback when export fails */
+    onExportError?: (error: Error) => void;
+}
+declare const ExportWavButton: React__default.FC<ExportWavButtonProps>;
+
+/**
+ * Shared annotation types used across Waveform components
+ */
+
+/**
+ * Custom function to generate the label shown on annotation boxes in the waveform.
+ * Receives the annotation data and its index in the list, returns a string label.
+ * Default behavior: displays annotation.id
+ */
+type GetAnnotationBoxLabelFn = (annotation: AnnotationData, index: number) => string;
+/**
+ * Callback when annotations are updated (e.g., boundaries dragged).
+ * Called with the full updated annotations array.
+ */
+type OnAnnotationUpdateFn = (annotations: AnnotationData[]) => void;
+
+interface WaveformProps {
+    renderTrackControls?: (trackIndex: number) => ReactNode;
+    /** Custom render function for timescale tick labels. `label` is a formatted string
+     * (bar/beat notation like "2.3" in beats mode, or "m:ss" in temporal mode). */
+    renderTick?: (label: string, pixelPosition: number) => ReactNode;
+    /** @deprecated Use `renderTick` instead. */
+    renderTimestamp?: (timeMs: number, pixelPosition: number) => ReactNode;
+    /** Custom playhead render function. Receives position (pixels) and color from theme. */
+    renderPlayhead?: RenderPlayheadFunction;
+    annotationControls?: AnnotationAction[];
+    annotationListConfig?: AnnotationActionOptions;
+    annotationTextHeight?: number;
+    /**
+     * Custom render function for annotation items in the text list.
+     * Use this to completely customize how each annotation is displayed.
+     */
+    renderAnnotationItem?: (props: RenderAnnotationItemProps) => ReactNode;
+    /**
+     * Custom function to generate the label shown on annotation boxes in the waveform.
+     * Receives the annotation data and its index, returns a string label.
+     * Default: annotation.id
+     */
+    getAnnotationBoxLabel?: GetAnnotationBoxLabelFn;
+    /** Where to position the active annotation when auto-scrolling: 'center', 'start', 'end', or 'nearest'. Defaults to 'center'. */
+    scrollActivePosition?: ScrollLogicalPosition;
+    /** Which scrollable containers to scroll: 'nearest' (only the annotation list) or 'all' (including viewport). Defaults to 'nearest'. */
+    scrollActiveContainer?: 'nearest' | 'all';
+    className?: string;
+    showClipHeaders?: boolean;
+    interactiveClips?: boolean;
+    showFades?: boolean;
+    /**
+     * Enable mobile-optimized touch interactions.
+     * When true, increases touch target sizes for clip boundaries.
+     * Use with useDragSensors({ touchOptimized: true }) for best results.
+     */
+    touchOptimized?: boolean;
+    /** Callback when a track's close button is clicked. Only renders close button when provided. */
+    onRemoveTrack?: (trackIndex: number) => void;
+    recordingState?: {
+        isRecording: boolean;
+        trackId: string;
+        startSample: number;
+        durationSamples: number;
+        peaks: (Int8Array | Int16Array)[];
+        bits: 8 | 16;
+    };
+}
+/**
+ * Waveform visualization component that uses the playlist context.
+ *
+ * Composes PlaylistVisualization (waveform + tracks) and
+ * PlaylistAnnotationList (annotation text list below the waveform).
+ */
+declare const Waveform: React__default.FC<WaveformProps>;
+
+interface MediaElementWaveformProps {
+    /** Height in pixels for the annotation text list */
+    annotationTextHeight?: number;
+    /** Custom function to generate the label shown on annotation boxes */
+    getAnnotationBoxLabel?: GetAnnotationBoxLabelFn;
+    /**
+     * Custom render function for annotation items in the text list.
+     * When provided, completely replaces the default annotation item rendering.
+     * Use this to customize the appearance of each annotation (e.g., add furigana).
+     */
+    renderAnnotationItem?: (props: RenderAnnotationItemProps) => React__default.ReactNode;
+    /** Whether annotation boundaries can be edited by dragging. Defaults to false. */
+    editable?: boolean;
+    /** Whether dragging one annotation boundary also moves the adjacent annotation's boundary. Defaults to false. */
+    linkEndpoints?: boolean;
+    /**
+     * Callback when annotations are updated (e.g., boundaries dragged).
+     * Called with the full updated annotations array.
+     */
+    onAnnotationUpdate?: OnAnnotationUpdateFn;
+    /** Where to position the active annotation when auto-scrolling: 'center', 'start', 'end', or 'nearest'. Defaults to 'center'. */
+    scrollActivePosition?: ScrollLogicalPosition;
+    /** Which scrollable containers to scroll: 'nearest' (only the annotation list) or 'all' (including viewport). Defaults to 'nearest'. */
+    scrollActiveContainer?: 'nearest' | 'all';
+    /** Custom playhead render function. Receives position, color, and animation refs for smooth 60fps animation. */
+    renderPlayhead?: RenderPlayheadFunction;
+    /** Show fade in/out overlays on the waveform. Defaults to false. */
+    showFades?: boolean;
+    className?: string;
+}
+/**
+ * Simplified Waveform component for MediaElementPlaylistProvider
+ *
+ * This is a stripped-down version of Waveform that works with the
+ * MediaElement context. It supports:
+ * - Single track visualization
+ * - Click to seek
+ * - Annotation display and click-to-play
+ * - Playhead animation
+ *
+ * For multi-track editing, use the full Waveform with WaveformPlaylistProvider.
+ */
+declare const MediaElementWaveform: React__default.FC<MediaElementWaveformProps>;
+
+interface MediaElementPlaylistProps {
+    /** Custom function to generate the label shown on annotation boxes */
+    getAnnotationBoxLabel?: GetAnnotationBoxLabelFn;
+    /** Whether annotation boundaries can be edited by dragging. Defaults to false. */
+    editable?: boolean;
+    /** Whether dragging one annotation boundary also moves the adjacent annotation's boundary. Defaults to false. */
+    linkEndpoints?: boolean;
+    /**
+     * Callback when annotations are updated (e.g., boundaries dragged).
+     * Called with the full updated annotations array.
+     */
+    onAnnotationUpdate?: OnAnnotationUpdateFn;
+    /** Custom playhead render function. Receives position, color, and animation refs for smooth 60fps animation. */
+    renderPlayhead?: RenderPlayheadFunction;
+    /** Show fade in/out overlays on the waveform. Defaults to false. */
+    showFades?: boolean;
+    className?: string;
+}
+/**
+ * Standalone waveform + annotation boxes component for MediaElementPlaylistProvider.
+ *
+ * Renders the waveform visualization, annotation boxes, selection, and playhead.
+ * Does NOT render the annotation text list — use `MediaElementAnnotationList` for that.
+ *
+ * Must be used inside a `MediaElementPlaylistProvider`.
+ *
+ * This component can be placed independently in consumer layouts, allowing the
+ * waveform and annotation list to be positioned separately (e.g., in different
+ * panels or with custom elements between them).
+ */
+declare const MediaElementPlaylist: React__default.FC<MediaElementPlaylistProps>;
+
+interface MediaElementAnnotationListProps {
+    /** Height in pixels for the annotation text list */
+    height?: number;
+    /**
+     * Custom render function for annotation items in the text list.
+     * When provided, completely replaces the default annotation item rendering.
+     */
+    renderAnnotationItem?: (props: RenderAnnotationItemProps) => React__default.ReactNode;
+    /**
+     * Callback when annotations are updated (e.g., text edited).
+     * Called with the full updated annotations array.
+     */
+    onAnnotationUpdate?: OnAnnotationUpdateFn;
+    /** Whether annotation text can be edited. Defaults to false. */
+    editable?: boolean;
+    /**
+     * Action controls to show on each annotation item (e.g., delete, split).
+     * Only rendered when `editable` is true.
+     */
+    controls?: AnnotationAction[];
+    /**
+     * Override annotation list config. Falls back to context values
+     * `{ linkEndpoints: false, continuousPlay }` if not provided.
+     */
+    annotationListConfig?: AnnotationActionOptions;
+    /** Where to position the active annotation when auto-scrolling. Defaults to 'center'. */
+    scrollActivePosition?: ScrollLogicalPosition;
+    /** Which scrollable containers to scroll: 'nearest' or 'all'. Defaults to 'nearest'. */
+    scrollActiveContainer?: 'nearest' | 'all';
+}
+/**
+ * Standalone annotation text list component for MediaElementPlaylistProvider.
+ *
+ * Requires @waveform-playlist/annotations with AnnotationProvider.
+ * Throws if used without `<AnnotationProvider>` wrapping the component tree.
+ */
+declare const MediaElementAnnotationList: React__default.FC<MediaElementAnnotationListProps>;
+
+interface PlaylistVisualizationProps {
+    renderTrackControls?: (trackIndex: number) => ReactNode;
+    renderTick?: (label: string, pixelPosition: number) => ReactNode;
+    /** Custom playhead render function. Receives position (pixels) and color from theme. */
+    renderPlayhead?: RenderPlayheadFunction;
+    annotationControls?: AnnotationAction[];
+    /**
+     * Custom function to generate the label shown on annotation boxes in the waveform.
+     * Receives the annotation data and its index, returns a string label.
+     * Default: annotation.id
+     */
+    getAnnotationBoxLabel?: GetAnnotationBoxLabelFn;
+    className?: string;
+    showClipHeaders?: boolean;
+    interactiveClips?: boolean;
+    showFades?: boolean;
+    /**
+     * Enable mobile-optimized touch interactions.
+     * When true, increases touch target sizes for clip boundaries.
+     * Use with useDragSensors({ touchOptimized: true }) for best results.
+     */
+    touchOptimized?: boolean;
+    /** Callback when a track's close button is clicked. Only renders close button when provided. */
+    onRemoveTrack?: (trackIndex: number) => void;
+    recordingState?: {
+        isRecording: boolean;
+        trackId: string;
+        startSample: number;
+        durationSamples: number;
+        peaks: (Int8Array | Int16Array)[];
+        bits: 8 | 16;
+    };
+}
+/**
+ * Standalone playlist visualization component (WebAudio version).
+ *
+ * Renders the waveform tracks, timescale, annotations boxes, selection,
+ * playhead, loop regions, and track controls — everything that lives
+ * inside <Playlist> plus wrapping providers.
+ *
+ * Does NOT render AnnotationText (the annotation list below the waveform).
+ * Pair with PlaylistAnnotationList for a full annotation editing UI.
+ */
+declare const PlaylistVisualization: React__default.FC<PlaylistVisualizationProps>;
+
+interface PlaylistAnnotationListProps {
+    /** Height in pixels for the annotation text list */
+    height?: number;
+    /**
+     * Custom render function for annotation items in the text list.
+     * When provided, completely replaces the default annotation item rendering.
+     */
+    renderAnnotationItem?: (props: RenderAnnotationItemProps) => React__default.ReactNode;
+    /**
+     * Callback when annotations are updated (e.g., text edited).
+     * Called with the full updated annotations array.
+     */
+    onAnnotationUpdate?: OnAnnotationUpdateFn;
+    /**
+     * Action controls to show on each annotation item (e.g., delete, split).
+     * Only rendered when `annotationsEditable` is true in context.
+     */
+    controls?: AnnotationAction[];
+    /**
+     * Override annotation list config. Falls back to context values
+     * `{ linkEndpoints, continuousPlay }` if not provided.
+     */
+    annotationListConfig?: AnnotationActionOptions;
+    /** Where to position the active annotation when auto-scrolling. Defaults to 'center'. */
+    scrollActivePosition?: ScrollLogicalPosition;
+    /** Which scrollable containers to scroll: 'nearest' or 'all'. Defaults to 'nearest'. */
+    scrollActiveContainer?: 'nearest' | 'all';
+}
+/**
+ * Standalone annotation text list component for WaveformPlaylistProvider (WebAudio).
+ *
+ * Requires @waveform-playlist/annotations with AnnotationProvider.
+ * Throws if used without `<AnnotationProvider>` wrapping the component tree.
+ */
+declare const PlaylistAnnotationList: React__default.FC<PlaylistAnnotationListProps>;
+
+interface KeyboardShortcutsProps {
+    /** Enable default playback shortcuts (Space, Escape, 0). Defaults to false. */
+    playback?: boolean;
+    /** Enable clip splitting shortcut ('s' key). Defaults to false. */
+    clipSplitting?: boolean;
+    /** Enable annotation keyboard controls (arrow nav, boundary editing). Defaults to false. */
+    annotations?: boolean;
+    /** Additional shortcuts appended to the defaults. */
+    additionalShortcuts?: KeyboardShortcut[];
+}
+/**
+ * Self-closing component that sets up keyboard shortcuts for the playlist.
+ * Must be rendered inside a WaveformPlaylistProvider.
+ *
+ * @example
+ * ```tsx
+ * <WaveformPlaylistProvider tracks={tracks} {...}>
+ *   <KeyboardShortcuts playback clipSplitting />
+ *   <Waveform />
+ * </WaveformPlaylistProvider>
+ * ```
+ */
+declare const KeyboardShortcuts: React__default.FC<KeyboardShortcutsProps>;
+
+/**
+ * Props the browser package passes to the AnnotationText component.
+ * Mirrors what PlaylistAnnotationList and MediaElementAnnotationList actually use.
+ */
+interface AnnotationTextIntegrationProps {
+    annotations: AnnotationData[];
+    activeAnnotationId?: string;
+    shouldScrollToActive?: boolean;
+    scrollActivePosition?: ScrollLogicalPosition;
+    scrollActiveContainer?: 'nearest' | 'all';
+    editable?: boolean;
+    controls?: AnnotationAction[];
+    annotationListConfig?: AnnotationActionOptions;
+    height?: number;
+    onAnnotationUpdate?: (updatedAnnotations: AnnotationData[]) => void;
+    renderAnnotationItem?: (props: RenderAnnotationItemProps) => React.ReactNode;
+}
+/**
+ * Props the browser package passes to the AnnotationBox component.
+ * Mirrors what PlaylistVisualization and MediaElementPlaylist actually use.
+ */
+interface AnnotationBoxIntegrationProps {
+    annotationId: string;
+    annotationIndex: number;
+    startPosition: number;
+    endPosition: number;
+    label?: string;
+    color?: string;
+    isActive?: boolean;
+    onClick?: () => void;
+    editable?: boolean;
+}
+/**
+ * Props the browser package passes to the AnnotationBoxesWrapper component.
+ * Mirrors what PlaylistVisualization and MediaElementPlaylist actually use.
+ */
+interface AnnotationBoxesWrapperIntegrationProps {
+    children?: React.ReactNode;
+    height?: number;
+    width?: number;
+}
+/**
+ * Interface for annotation integration provided by @waveform-playlist/annotations.
+ *
+ * The browser package defines what it needs, and the optional annotations package
+ * provides it via <AnnotationProvider>.
+ */
+interface AnnotationIntegration {
+    parseAeneas: (data: unknown) => AnnotationData;
+    serializeAeneas: (annotation: AnnotationData) => unknown;
+    AnnotationText: React.ComponentType<AnnotationTextIntegrationProps>;
+    AnnotationBox: React.ComponentType<AnnotationBoxIntegrationProps>;
+    AnnotationBoxesWrapper: React.ComponentType<AnnotationBoxesWrapperIntegrationProps>;
+    ContinuousPlayCheckbox: React.ComponentType<{
+        checked: boolean;
+        onChange: (checked: boolean) => void;
+        className?: string;
+    }>;
+    LinkEndpointsCheckbox: React.ComponentType<{
+        checked: boolean;
+        onChange: (checked: boolean) => void;
+        className?: string;
+    }>;
+    EditableCheckbox: React.ComponentType<{
+        checked: boolean;
+        onChange: (checked: boolean) => void;
+        className?: string;
+    }>;
+    DownloadAnnotationsButton: React.ComponentType<{
+        annotations: AnnotationData[];
+        filename?: string;
+        className?: string;
+    }>;
+}
+declare const AnnotationIntegrationProvider: React$1.Provider<AnnotationIntegration | null>;
+/**
+ * Hook to access annotation integration provided by @waveform-playlist/annotations.
+ * Throws if used without <AnnotationProvider> wrapping the component tree.
+ *
+ * Follows the Kent C. Dodds pattern:
+ * https://kentcdodds.com/blog/how-to-use-react-context-effectively
+ */
+declare function useAnnotationIntegration(): AnnotationIntegration;
+
+interface SpectrogramIntegration {
+    trackSpectrogramOverrides: Map<string, TrackSpectrogramOverrides>;
+    spectrogramWorkerApi: SpectrogramWorkerApi | null;
+    spectrogramConfig?: SpectrogramConfig;
+    spectrogramColorMap?: ColorMapValue;
+    setTrackRenderMode: (trackId: string, mode: RenderMode) => void;
+    setTrackSpectrogramConfig: (trackId: string, config: SpectrogramConfig, colorMap?: ColorMapValue) => void;
+    registerSpectrogramCanvases: (clipId: string, channelIndex: number, canvasIds: string[], canvasWidths: number[]) => void;
+    unregisterSpectrogramCanvases: (clipId: string, channelIndex: number) => void;
+    /** Render spectrogram menu items for a track's context menu */
+    renderMenuItems?: (props: {
+        renderMode: string;
+        onRenderModeChange: (mode: RenderMode) => void;
+        onOpenSettings: () => void;
+        onClose?: () => void;
+    }) => TrackMenuItem[];
+    /** Settings modal component provided by the spectrogram package */
+    SettingsModal?: React.ComponentType<{
+        open: boolean;
+        onClose: () => void;
+        config: SpectrogramConfig;
+        colorMap: ColorMapValue;
+        onApply: (config: SpectrogramConfig, colorMap: ColorMapValue) => void;
+    }>;
+    /** Get color lookup table for a color map name */
+    getColorMap: (name: ColorMapValue) => Uint8Array;
+    /** Get frequency scale function for a scale name */
+    getFrequencyScale: (name: string) => (f: number, minF: number, maxF: number) => number;
+}
+/** Minimal type for the worker API surface used by browser components */
+interface SpectrogramWorkerApi {
+    registerCanvas: (canvasId: string, canvas: OffscreenCanvas) => void;
+    unregisterCanvas: (canvasId: string) => void;
+}
+declare const SpectrogramIntegrationProvider: React$1.Provider<SpectrogramIntegration | null>;
+/**
+ * Hook to access spectrogram integration provided by @waveform-playlist/spectrogram.
+ * Throws if used without <SpectrogramProvider> wrapping the component tree.
+ *
+ * Follows the Kent C. Dodds pattern:
+ * https://kentcdodds.com/blog/how-to-use-react-context-effectively
+ */
+declare function useSpectrogramIntegration(): SpectrogramIntegration;
+
+interface ClipInteractionProviderProps {
+    /** Enable snap-to-grid for clip moves and boundary trims. When true,
+     *  auto-detects beats snapping from BeatsAndBarsProvider context
+     *  (if present with scaleMode="beats" and snapTo!="off"), otherwise
+     *  falls back to timescale-based snapping. Default: false. */
+    snap?: boolean;
+    touchOptimized?: boolean;
+    children: React__default.ReactNode;
+}
+declare const ClipInteractionProvider: React__default.FC<ClipInteractionProviderProps>;
+
+declare function useClipInteractionEnabled(): boolean;
+
+interface ClipCollisionOptions {
+    tracks: ClipTrack[];
+    samplesPerPixel: number;
+}
+/**
+ * Modifier that constrains clip drag movement to prevent overlaps.
+ *
+ * For clip move operations: constrains horizontal transform to valid positions
+ * using the engine's collision detection.
+ *
+ * For boundary trim operations: returns zero transform because visual feedback
+ * comes from React state updates resizing the clip, not from CSS translate.
+ */
+declare class ClipCollisionModifier extends Modifier<DragDropManager<any, any>, ClipCollisionOptions> {
+    apply(operation: DragOperation): {
+        x: number;
+        y: number;
+    };
+    static configure: (options: ClipCollisionOptions) => _dnd_kit_abstract.PluginDescriptor<any, any, typeof ClipCollisionModifier>;
+}
+
+interface SnapToGridBeatsOptions {
+    mode: 'beats';
+    snapTo: SnapTo;
+    bpm: number;
+    timeSignature: [number, number];
+    samplesPerPixel: number;
+    sampleRate: number;
+}
+interface SnapToGridTimescaleOptions {
+    mode: 'timescale';
+    gridSamples: number;
+    samplesPerPixel: number;
+}
+type SnapToGridOptions = SnapToGridBeatsOptions | SnapToGridTimescaleOptions;
+/**
+ * dnd-kit modifier that quantizes clip drag movement to a grid.
+ *
+ * Two modes:
+ * - "beats": Snaps to beat/bar grid using PPQN tick space for exact musical timing.
+ * - "timescale": Snaps to a sample-based grid derived from timescale markers.
+ *
+ * Designed to compose with ClipCollisionModifier — snap first,
+ * then collision constrains the snapped position.
+ */
+declare class SnapToGridModifier extends Modifier<DragDropManager<any, any>, SnapToGridOptions> {
+    apply(operation: DragOperation): {
+        x: number;
+        y: number;
+    };
+    static configure: (options: SnapToGridBeatsOptions | SnapToGridTimescaleOptions) => _dnd_kit_abstract.PluginDescriptor<any, any, typeof SnapToGridModifier>;
+}
+
+/**
+ * DragDropProvider plugins customizer that disables the Feedback plugin's drop animation.
+ *
+ * Without this, the Feedback plugin animates the dragged element back to its original
+ * position on drop, causing a visual snap-back before React re-renders at the new position.
+ *
+ * Usage:
+ * ```tsx
+ * <DragDropProvider plugins={noDropAnimationPlugins} ...>
+ * ```
+ */
+declare const noDropAnimationPlugins: (defaults: Plugins) => Plugins;
+
+/**
+ * Waveform Data Loader
+ *
+ * Utilities for loading pre-computed waveform data in waveform-data.js format.
+ * Supports both binary (.dat) and JSON formats from BBC's audiowaveform tool.
+ */
+
+/**
+ * Load waveform data from a .dat or .json file
+ *
+ * @param src - URL to waveform data file (.dat or .json)
+ * @returns WaveformData instance
+ */
+declare function loadWaveformData(src: string): Promise<WaveformData>;
+/**
+ * Convert WaveformData to our internal Peaks format
+ *
+ * @param waveformData - WaveformData instance from waveform-data.js
+ * @param channelIndex - Channel index (0 for mono/left, 1 for right)
+ * @returns Peaks data with alternating min/max values, preserving original bit depth
+ */
+declare function waveformDataToPeaks(waveformData: WaveformData, channelIndex?: number): {
+    data: Int8Array | Int16Array;
+    bits: 8 | 16;
+    length: number;
+    sampleRate: number;
+};
+/**
+ * Load waveform data file and convert to Peaks format in one step
+ *
+ * @param src - URL to waveform data file (.dat or .json)
+ * @param channelIndex - Channel index (default: 0)
+ * @returns Peaks data ready for rendering
+ */
+declare function loadPeaksFromWaveformData(src: string, channelIndex?: number): Promise<{
+    data: Int8Array | Int16Array;
+    bits: 8 | 16;
+    length: number;
+    sampleRate: number;
+}>;
+/**
+ * Get metadata from waveform data file without converting to peaks
+ *
+ * @param src - URL to waveform data file
+ * @returns Metadata (sample rate, channels, duration, bits, etc.)
+ */
+declare function getWaveformDataMetadata(src: string): Promise<{
+    sampleRate: number;
+    channels: number;
+    duration: number;
+    samplesPerPixel: number;
+    length: number;
+    bits: 8 | 16;
+}>;
+
+export { type ActiveEffect, type AnnotationIntegration, AnnotationIntegrationProvider, AudioPosition, type AudioTrackConfig, AutomaticScrollCheckbox, ClearAllButton, type ClearAllButtonProps, ClipCollisionModifier, ClipInteractionProvider, type ClipInteractionProviderProps, ContinuousPlayCheckbox, DownloadAnnotationsButton, EditableCheckbox, type EffectDefinition, type EffectInstance, type EffectParameter, type ExportOptions, type ExportResult, ExportWavButton, type ExportWavButtonProps, FastForwardButton, type GetAnnotationBoxLabelFn, KeyboardShortcuts, type KeyboardShortcutsProps, LinkEndpointsCheckbox, LoopButton, MasterVolumeControl, type MasterVolumeControls, type MediaElementAnimationContextValue, MediaElementAnnotationList, type MediaElementAnnotationListProps, type MediaElementControlsContextValue, type MediaElementDataContextValue, MediaElementPlaylist, type MediaElementPlaylistProps, MediaElementPlaylistProvider, type MediaElementStateContextValue, type MediaElementTrackConfig, MediaElementWaveform, type MediaElementWaveformProps, type OnAnnotationUpdateFn, type ParameterType, PauseButton, PlayButton, PlaylistAnnotationList, type PlaylistAnnotationListProps, PlaylistVisualization, type PlaylistVisualizationProps, RewindButton, SelectionTimeInputs, SetLoopRegionButton, SkipBackwardButton, SkipForwardButton, SnapToGridModifier, type SpectrogramIntegration, SpectrogramIntegrationProvider, StopButton, type TimeFormatControls, TimeFormatSelect, type TrackActiveEffect, type TrackEffectsState, type TrackLoadError, type TrackSource, type TrackState$1 as TrackState, type UseDynamicEffectsReturn, type UseDynamicTracksReturn, type UseExportWavReturn, type UseOutputMeterOptions, type UseOutputMeterReturn, type UsePlaybackShortcutsOptions, type UsePlaybackShortcutsReturn, type UseTrackDynamicEffectsReturn, Waveform, WaveformPlaylistProvider, type WaveformProps, type WaveformTrack, type ZoomControls, ZoomInButton, ZoomOutButton, createEffectChain, createEffectInstance, effectCategories, effectDefinitions, getEffectDefinition, getEffectsByCategory, getShortcutLabel, getWaveformDataMetadata, loadPeaksFromWaveformData, loadWaveformData, noDropAnimationPlugins, useAnnotationDragHandlers, useAnnotationIntegration, useAnnotationKeyboardControls, useAudioTracks, useClipDragHandlers, useClipInteractionEnabled, useClipSplitting, useDragSensors, useDynamicEffects, useDynamicTracks, useExportWav, useKeyboardShortcuts, useMasterAnalyser, useMasterVolume, useMediaElementAnimation, useMediaElementControls, useMediaElementData, useMediaElementState, useOutputMeter, usePlaybackAnimation, usePlaybackShortcuts, usePlaylistControls, usePlaylistData, usePlaylistState, useSpectrogramIntegration, useTimeFormat, useTrackDynamicEffects, useZoomControls, waveformDataToPeaks };