@waveform-playlist/ui-components 12.0.0 → 13.0.0

package/dist/index.d.mts

@@ -353,8 +353,20 @@ interface PlayheadProps {
     controlsOffset?: number;
     /** Function to get current audio context time - required for smooth animation */
     getAudioContextTime?: () => number;
-    /** Returns current playback time (auto-wraps at loop boundaries). Preferred over manual elapsed calculation. */
+    /**
+     * Returns raw playback time from the engine (auto-wraps at loop boundaries).
+     * This is the scheduling position — for playhead display use `visualTimeRef`
+     * which already has `outputLatency` and `lookAhead` subtracted.
+     */
     getPlaybackTime?: () => number;
+    /**
+     * Ref to the visually-aligned playback time (raw time minus `outputLatency`
+     * and `engine.lookAhead`), kept current by the provider's animation loop
+     * during playback and by pause/stop/seek paths when stopped. Use this for
+     * playhead positioning so it lines up with audible output and matches the
+     * progress fill in `ChannelWithProgress`.
+     */
+    visualTimeRef?: react__default.RefObject<number>;
 }
 /**
  * Type for custom playhead render functions.
@@ -468,9 +480,14 @@ interface SelectionTimeInputsProps {
 }
 declare const SelectionTimeInputs: react__default.FC<SelectionTimeInputsProps>;
 
-interface SpectrogramWorkerCanvasApi {
-    registerCanvas(canvasId: string, canvas: OffscreenCanvas): void;
-    unregisterCanvas(canvasId: string): void;
+interface SpectrogramCanvasRegistration {
+    canvasId: string;
+    canvas: OffscreenCanvas;
+    clipId: string;
+    channelIndex: number;
+    chunkIndex: number;
+    widthPx: number;
+    heightPx: number;
 }
 interface SpectrogramChannelProps {
     /** Visual position index — used for CSS positioning (top offset). */
@@ -485,12 +502,12 @@ interface SpectrogramChannelProps {
     devicePixelRatio?: number;
     /** Samples per pixel at current zoom level */
     samplesPerPixel: number;
-    /** Worker API for transferring canvas ownership. Rendering is done in the worker. */
-    workerApi: SpectrogramWorkerCanvasApi;
-    /** Clip ID used to construct unique canvas IDs for worker registration */
+    /** Clip ID used to construct unique canvas IDs */
     clipId: string;
-    /** Callback when canvases are registered with the worker, providing canvas IDs and widths */
-    onCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
+    /** Single-call canvas registration. Receives the transferred OffscreenCanvas + metadata. */
+    onCanvasRegister: (reg: SpectrogramCanvasRegistration) => void;
+    /** Counterpart for chunk unmount / component unmount. */
+    onCanvasUnregister: (canvasId: string) => void;
 }
 declare const SpectrogramChannel: FunctionComponent<SpectrogramChannelProps>;
 
@@ -507,12 +524,12 @@ interface SmartChannelProps {
     renderMode?: RenderMode;
     /** Samples per pixel at current zoom level */
     samplesPerPixel?: number;
-    /** Worker API for OffscreenCanvas transfer */
-    spectrogramWorkerApi?: SpectrogramWorkerCanvasApi;
-    /** Clip ID for worker canvas registration */
+    /** Clip ID for spectrogram canvas registration */
     spectrogramClipId?: string;
-    /** Callback when canvases are registered with the worker */
-    spectrogramOnCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
+    /** Single-call registration for spectrogram canvases (from SpectrogramIntegration). */
+    spectrogramOnCanvasRegister?: (reg: SpectrogramCanvasRegistration) => void;
+    /** Counterpart for chunk unmount / unmount. */
+    spectrogramOnCanvasUnregister?: (canvasId: string) => void;
     /** MIDI note data for piano-roll rendering */
     midiNotes?: MidiNoteData[];
     /** Sample rate for MIDI note time → pixel conversion */
@@ -921,4 +938,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
     ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
 
-export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, type SpectrogramCanvasRegistration, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.d.ts

@@ -353,8 +353,20 @@ interface PlayheadProps {
     controlsOffset?: number;
     /** Function to get current audio context time - required for smooth animation */
     getAudioContextTime?: () => number;
-    /** Returns current playback time (auto-wraps at loop boundaries). Preferred over manual elapsed calculation. */
+    /**
+     * Returns raw playback time from the engine (auto-wraps at loop boundaries).
+     * This is the scheduling position — for playhead display use `visualTimeRef`
+     * which already has `outputLatency` and `lookAhead` subtracted.
+     */
     getPlaybackTime?: () => number;
+    /**
+     * Ref to the visually-aligned playback time (raw time minus `outputLatency`
+     * and `engine.lookAhead`), kept current by the provider's animation loop
+     * during playback and by pause/stop/seek paths when stopped. Use this for
+     * playhead positioning so it lines up with audible output and matches the
+     * progress fill in `ChannelWithProgress`.
+     */
+    visualTimeRef?: react__default.RefObject<number>;
 }
 /**
  * Type for custom playhead render functions.
@@ -468,9 +480,14 @@ interface SelectionTimeInputsProps {
 }
 declare const SelectionTimeInputs: react__default.FC<SelectionTimeInputsProps>;
 
-interface SpectrogramWorkerCanvasApi {
-    registerCanvas(canvasId: string, canvas: OffscreenCanvas): void;
-    unregisterCanvas(canvasId: string): void;
+interface SpectrogramCanvasRegistration {
+    canvasId: string;
+    canvas: OffscreenCanvas;
+    clipId: string;
+    channelIndex: number;
+    chunkIndex: number;
+    widthPx: number;
+    heightPx: number;
 }
 interface SpectrogramChannelProps {
     /** Visual position index — used for CSS positioning (top offset). */
@@ -485,12 +502,12 @@ interface SpectrogramChannelProps {
     devicePixelRatio?: number;
     /** Samples per pixel at current zoom level */
     samplesPerPixel: number;
-    /** Worker API for transferring canvas ownership. Rendering is done in the worker. */
-    workerApi: SpectrogramWorkerCanvasApi;
-    /** Clip ID used to construct unique canvas IDs for worker registration */
+    /** Clip ID used to construct unique canvas IDs */
     clipId: string;
-    /** Callback when canvases are registered with the worker, providing canvas IDs and widths */
-    onCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
+    /** Single-call canvas registration. Receives the transferred OffscreenCanvas + metadata. */
+    onCanvasRegister: (reg: SpectrogramCanvasRegistration) => void;
+    /** Counterpart for chunk unmount / component unmount. */
+    onCanvasUnregister: (canvasId: string) => void;
 }
 declare const SpectrogramChannel: FunctionComponent<SpectrogramChannelProps>;
 
@@ -507,12 +524,12 @@ interface SmartChannelProps {
     renderMode?: RenderMode;
     /** Samples per pixel at current zoom level */
     samplesPerPixel?: number;
-    /** Worker API for OffscreenCanvas transfer */
-    spectrogramWorkerApi?: SpectrogramWorkerCanvasApi;
-    /** Clip ID for worker canvas registration */
+    /** Clip ID for spectrogram canvas registration */
     spectrogramClipId?: string;
-    /** Callback when canvases are registered with the worker */
-    spectrogramOnCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
+    /** Single-call registration for spectrogram canvases (from SpectrogramIntegration). */
+    spectrogramOnCanvasRegister?: (reg: SpectrogramCanvasRegistration) => void;
+    /** Counterpart for chunk unmount / unmount. */
+    spectrogramOnCanvasUnregister?: (canvasId: string) => void;
     /** MIDI note data for piano-roll rendering */
     midiNotes?: MidiNoteData[];
     /** Sample rate for MIDI note time → pixel conversion */
@@ -921,4 +938,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
     ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
 
-export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, type SpectrogramCanvasRegistration, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.js

@@ -1602,6 +1602,7 @@ var PlayheadWithMarker = ({
   color = "#ff0000",
   isPlaying,
   currentTimeRef,
+  visualTimeRef,
   playbackStartTimeRef,
   audioStartPositionRef,
   samplesPerPixel,
@@ -1616,7 +1617,9 @@ var PlayheadWithMarker = ({
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
-        if (isPlaying) {
+        if (visualTimeRef?.current !== void 0 && visualTimeRef.current !== null) {
+          time = visualTimeRef.current;
+        } else if (isPlaying) {
           if (getPlaybackTime) {
             time = getPlaybackTime();
           } else if (getAudioContextTime) {
@@ -1652,6 +1655,7 @@ var PlayheadWithMarker = ({
     samplesPerPixel,
     controlsOffset,
     currentTimeRef,
+    visualTimeRef,
     playbackStartTimeRef,
     audioStartPositionRef,
     getAudioContextTime,
@@ -1659,7 +1663,7 @@ var PlayheadWithMarker = ({
   ]);
   (0, import_react9.useEffect)(() => {
     if (!isPlaying && containerRef.current) {
-      const time = currentTimeRef.current ?? 0;
+      const time = visualTimeRef?.current ?? currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
       containerRef.current.style.transform = `translate3d(${pos}px, 0, 0)`;
     }
@@ -2457,28 +2461,28 @@ var SpectrogramChannel = ({
   waveHeight,
   devicePixelRatio = 1,
   samplesPerPixel: _samplesPerPixel,
-  workerApi,
   clipId,
-  onCanvasesReady
+  onCanvasRegister,
+  onCanvasUnregister
 }) => {
   const channelIndex = channelIndexProp ?? index;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const registeredIdsRef = (0, import_react20.useRef)([]);
   const transferredCanvasesRef = (0, import_react20.useRef)(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = (0, import_react20.useRef)(workerApi);
-  const onCanvasesReadyRef = (0, import_react20.useRef)(onCanvasesReady);
+  const onCanvasRegisterRef = (0, import_react20.useRef)(onCanvasRegister);
+  const onCanvasUnregisterRef = (0, import_react20.useRef)(onCanvasUnregister);
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, import_core5.MAX_CANVAS_WIDTH, clipOriginX);
   (0, import_react20.useEffect)(() => {
-    workerApiRef.current = workerApi;
-  }, [workerApi]);
+    onCanvasRegisterRef.current = onCanvasRegister;
+  }, [onCanvasRegister]);
   (0, import_react20.useEffect)(() => {
-    onCanvasesReadyRef.current = onCanvasesReady;
-  }, [onCanvasesReady]);
+    onCanvasUnregisterRef.current = onCanvasUnregister;
+  }, [onCanvasUnregister]);
   (0, import_react20.useEffect)(() => {
-    const currentWorkerApi = workerApiRef.current;
-    if (!currentWorkerApi || !clipId) return;
-    const previousCount = registeredIdsRef.current.length;
+    if (!clipId) return;
+    const unregister = onCanvasUnregisterRef.current;
+    const register = onCanvasRegisterRef.current;
     const remaining = [];
     for (const id of registeredIdsRef.current) {
       const match = id.match(/chunk(\d+)$/);
@@ -2492,14 +2496,13 @@ var SpectrogramChannel = ({
         remaining.push(id);
       } else {
         try {
-          currentWorkerApi.unregisterCanvas(id);
+          unregister(id);
         } catch (err) {
-          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+          console.warn(`[spectrogram] unregister failed for ${id}:`, err);
         }
       }
     }
     registeredIdsRef.current = remaining;
-    const newIds = [];
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       if (transferredCanvasesRef.current.has(canvas)) continue;
       const canvasId = `${clipId}-ch${channelIndex}-chunk${canvasIdx}`;
@@ -2511,41 +2514,31 @@ var SpectrogramChannel = ({
         continue;
       }
       transferredCanvasesRef.current.add(canvas);
+      const widthPx = Math.min(length - canvasIdx * import_core5.MAX_CANVAS_WIDTH, import_core5.MAX_CANVAS_WIDTH);
       try {
-        currentWorkerApi.registerCanvas(canvasId, offscreen);
-        newIds.push(canvasId);
+        register({
+          canvasId,
+          canvas: offscreen,
+          clipId,
+          channelIndex,
+          chunkIndex: canvasIdx,
+          widthPx,
+          heightPx: waveHeight
+        });
+        registeredIdsRef.current.push(canvasId);
       } catch (err) {
-        console.warn(`[spectrogram] registerCanvas failed for ${canvasId}:`, err);
-        continue;
+        console.warn(`[spectrogram] register failed for ${canvasId}:`, err);
       }
     }
-    if (newIds.length > 0) {
-      registeredIdsRef.current = [...registeredIdsRef.current, ...newIds];
-    }
-    const canvasSetChanged = newIds.length > 0 || remaining.length < previousCount;
-    if (canvasSetChanged) {
-      const allIds = registeredIdsRef.current;
-      const allWidths = allIds.map((id) => {
-        const match = id.match(/chunk(\d+)$/);
-        if (!match) {
-          console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
-          return import_core5.MAX_CANVAS_WIDTH;
-        }
-        const chunkIdx = parseInt(match[1], 10);
-        return Math.min(length - chunkIdx * import_core5.MAX_CANVAS_WIDTH, import_core5.MAX_CANVAS_WIDTH);
-      });
-      onCanvasesReadyRef.current?.(allIds, allWidths);
-    }
-  }, [canvasMapRef, clipId, channelIndex, length, visibleChunkIndices]);
+  }, [canvasMapRef, clipId, channelIndex, length, waveHeight, visibleChunkIndices]);
   (0, import_react20.useEffect)(() => {
     return () => {
-      const api = workerApiRef.current;
-      if (!api) return;
+      const unregister = onCanvasUnregisterRef.current;
       for (const id of registeredIdsRef.current) {
         try {
-          api.unregisterCanvas(id);
+          unregister(id);
         } catch (err) {
-          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+          console.warn(`[spectrogram] unregister failed for ${id}:`, err);
         }
       }
       registeredIdsRef.current = [];
@@ -2578,9 +2571,9 @@ var SmartChannel = ({
   transparentBackground,
   renderMode = "waveform",
   samplesPerPixel: sppProp,
-  spectrogramWorkerApi,
   spectrogramClipId,
-  spectrogramOnCanvasesReady,
+  spectrogramOnCanvasRegister,
+  spectrogramOnCanvasUnregister,
   midiNotes,
   sampleRate: sampleRateProp,
   clipOffsetSeconds,
@@ -2599,7 +2592,7 @@ var SmartChannel = ({
   const waveOutlineColor = isSelected && theme ? theme.selectedWaveOutlineColor : theme?.waveOutlineColor;
   const waveFillColor = isSelected && theme ? theme.selectedWaveFillColor : theme?.waveFillColor;
   const drawMode = theme?.waveformDrawMode || "inverted";
-  const hasSpectrogram = spectrogramWorkerApi && spectrogramClipId;
+  const hasSpectrogram = spectrogramClipId && spectrogramOnCanvasRegister && spectrogramOnCanvasUnregister;
   if (renderMode === "spectrogram" && hasSpectrogram) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SpectrogramChannel,
@@ -2609,9 +2602,9 @@ var SmartChannel = ({
         waveHeight,
         devicePixelRatio,
         samplesPerPixel,
-        workerApi: spectrogramWorkerApi,
         clipId: spectrogramClipId,
-        onCanvasesReady: spectrogramOnCanvasesReady
+        onCanvasRegister: spectrogramOnCanvasRegister,
+        onCanvasUnregister: spectrogramOnCanvasUnregister
       }
     );
   }
@@ -2627,9 +2620,9 @@ var SmartChannel = ({
           waveHeight: halfHeight,
           devicePixelRatio,
           samplesPerPixel,
-          workerApi: spectrogramWorkerApi,
           clipId: spectrogramClipId,
-          onCanvasesReady: spectrogramOnCanvasesReady
+          onCanvasRegister: spectrogramOnCanvasRegister,
+          onCanvasUnregister: spectrogramOnCanvasUnregister
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(