@waveform-playlist/ui-components 12.1.0 → 13.0.1

package/dist/index.d.ts

@@ -6,7 +6,6 @@ import * as styled_components from 'styled-components';
 import { DefaultTheme } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { IconProps } from '@phosphor-icons/react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface AudioPositionProps {
     formattedTime: string;
@@ -410,7 +409,7 @@ interface PlaylistProps {
     readonly timescaleGapHeight?: number;
 }
 declare const Playlist: FunctionComponent<PlaylistProps>;
-declare const StyledPlaylist: react__default.ForwardRefExoticComponent<styled_components.ExecutionProps & react__default.RefAttributes<react__default.FunctionComponent<PlaylistProps>>> & styled_components_dist_utils_hoist.NonReactStatics<react__default.FunctionComponent<PlaylistProps>>;
+declare const StyledPlaylist: react__default.ForwardRefExoticComponent<Omit<PlaylistProps, keyof styled_components.ExecutionProps> & styled_components.ExecutionProps & react__default.RefAttributes<any>> & styled_components_dist_utils_hoist.NonReactStatics<react__default.FunctionComponent<PlaylistProps>>;
 
 interface SelectionProps {
     startPosition: number;
@@ -480,9 +479,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). */
@@ -497,12 +501,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>;
 
@@ -519,12 +523,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 */
@@ -645,13 +649,17 @@ declare const Track: FunctionComponent<TrackProps>;
  * Supports variants: outline (default), danger, info
  * Uses theme values for consistent styling.
  */
-declare const Button: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<styled_components.FastOmit<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+declare const Button: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref" | "key" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}, "$variant"> & {
+    $variant?: "outline" | "danger" | "info";
+}, "form" | "slot" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value"> & Partial<Pick<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref" | "key" | keyof react.ButtonHTMLAttributes<HTMLButtonElement>> & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
-}>, never>, {
+}, "$variant"> & {
     $variant?: "outline" | "danger" | "info";
-}>> & string;
+}, "form" | "slot" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">>> & string;
 
-declare const ButtonGroup: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const ButtonGroup: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 
 interface CloseButtonProps {
     onClick: (e: react__default.MouseEvent) => void;
@@ -659,9 +667,9 @@ interface CloseButtonProps {
 }
 declare const CloseButton: react__default.FC<CloseButtonProps>;
 
-declare const Controls$1: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Controls$1: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 
-declare const Header: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+declare const Header: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
 
 declare const VolumeDownIcon: react__default.FC<IconProps>;
 
@@ -678,11 +686,23 @@ declare const DotsIcon: react__default.FC<IconProps>;
  * - Smaller thumb and track for compact layout
  * - Uses theme's sliderThumbColor (goldenrod by default)
  */
-declare const Slider: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<styled_components.FastOmit<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+declare const Slider: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    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;
+}, "type"> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    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;
+}, "type">>, "as" | "forwardedAs"> & {
+    as?: styled_components.WebTarget | undefined;
+    forwardedAs?: styled_components.WebTarget | undefined;
+}, never> & Partial<Pick<styled_components.FastOmit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     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>, never>> & string;
+}, "type"> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    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;
+}, "type">>, "as" | "forwardedAs"> & {
+    as?: styled_components.WebTarget | undefined;
+    forwardedAs?: styled_components.WebTarget | undefined;
+}, never>>> & string;
 
-declare const SliderWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+declare const SliderWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
 
 interface TrackMenuItem {
     id: string;
@@ -736,13 +756,13 @@ interface BeatsAndBarsProviderProps {
     scaleMode?: ScaleMode;
     children: react__default.ReactNode;
 }
-declare function BeatsAndBarsProvider({ bpm, timeSignature, snapTo, scaleMode, children, }: BeatsAndBarsProviderProps): react_jsx_runtime.JSX.Element;
+declare function BeatsAndBarsProvider({ bpm, timeSignature, snapTo, scaleMode, children, }: BeatsAndBarsProviderProps): react__default.JSX.Element;
 declare function useBeatsAndBars(): BeatsAndBarsContextValue | null;
 
 type Props$1 = {
     children: ReactNode;
 };
-declare const DevicePixelRatioProvider: ({ children }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const DevicePixelRatioProvider: ({ children }: Props$1) => react__default.JSX.Element;
 declare const useDevicePixelRatio: () => number;
 
 type Controls = {
@@ -780,7 +800,7 @@ type PlayoutStatusUpdate = {
 type Props = {
     children: ReactNode;
 };
-declare const PlayoutProvider: ({ children }: Props) => react_jsx_runtime.JSX.Element;
+declare const PlayoutProvider: ({ children }: Props) => react__default.JSX.Element;
 declare const usePlayoutStatus: () => {
     progress: number;
     isPlaying: boolean;
@@ -801,7 +821,7 @@ type ScrollViewportProviderProps = {
     containerRef: react__default.RefObject<HTMLElement | null>;
     children: ReactNode;
 };
-declare const ScrollViewportProvider: ({ containerRef, children }: ScrollViewportProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ScrollViewportProvider: ({ containerRef, children }: ScrollViewportProviderProps) => react__default.JSX.Element;
 /**
  * Full viewport hook — re-renders on every viewport update (after threshold).
  * Use useScrollViewportSelector() instead when you only need derived state.
@@ -841,7 +861,7 @@ interface ClipViewportOriginProviderProps {
  * space, which causes them to be culled incorrectly when a clip doesn't start
  * at position 0 on the timeline.
  */
-declare const ClipViewportOriginProvider: ({ originX, children, }: ClipViewportOriginProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ClipViewportOriginProvider: ({ originX, children, }: ClipViewportOriginProviderProps) => react__default.JSX.Element;
 /**
  * Returns the clip's pixel-space left offset within the timeline.
  * Defaults to 0 when used outside a ClipViewportOriginProvider (e.g., TimeScale).
@@ -860,20 +880,20 @@ declare function secondsToPixels(seconds: number, samplesPerPixel: number, sampl
  *
  * This provides consistent styling across all button elements in the waveform playlist.
  */
-declare const BaseButton: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+declare const BaseButton: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
 
 /**
  * BaseCheckboxWrapper - Container for checkbox + label
  */
-declare const BaseCheckboxWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const BaseCheckboxWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 /**
  * BaseCheckbox - A styled checkbox input
  */
-declare const BaseCheckbox: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+declare const BaseCheckbox: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
 /**
  * BaseCheckboxLabel - Label for checkboxes
  */
-declare const BaseCheckboxLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+declare const BaseCheckboxLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
 
 /**
  * ControlButton - A colored action button for prominent actions like Play, Pause, Record.
@@ -881,7 +901,7 @@ declare const BaseCheckboxLabel: styled_components_dist_types.IStyledComponentBa
  *
  * Uses theme colors when available, with fallbacks for standalone use.
  */
-declare const BaseControlButton: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+declare const BaseControlButton: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
 
 /**
  * BaseInput - A styled input component that uses theme values
@@ -889,39 +909,55 @@ declare const BaseControlButton: styled_components_dist_types.IStyledComponentBa
  * This provides consistent styling across all input elements in the waveform playlist.
  * Styling is controlled via the theme, making it easy to adapt to different environments.
  */
-declare const BaseInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+declare const BaseInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
 /**
  * BaseInputSmall - A smaller variant for compact layouts
  */
-declare const BaseInputSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
+declare const BaseInputSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
+    as?: styled_components.WebTarget | undefined;
+    forwardedAs?: styled_components.WebTarget | undefined;
+}, "ref"> & {
+    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> & Partial<Pick<Omit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
+    as?: styled_components.WebTarget | undefined;
+    forwardedAs?: styled_components.WebTarget | undefined;
+}, "ref"> & {
     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>> & string;
+}, never>>> & string;
 
 /**
  * BaseLabel - A styled label component that uses theme values
  */
-declare const BaseLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+declare const BaseLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
 /**
  * InlineLabel - A label that displays inline with its input
  */
-declare const InlineLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+declare const InlineLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
 /**
  * ScreenReaderOnly - Visually hidden but accessible to screen readers
  */
-declare const ScreenReaderOnly: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const ScreenReaderOnly: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 
 /**
  * BaseSelect - A styled select component that uses theme values
  *
  * This provides consistent styling across all select elements in the waveform playlist.
  */
-declare const BaseSelect: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
+declare const BaseSelect: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>>> & string;
 /**
  * BaseSelectSmall - A smaller variant for compact layouts
  */
-declare const BaseSelectSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>, "ref"> & {
+declare const BaseSelectSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>>, "as" | "forwardedAs"> & {
+    as?: styled_components.WebTarget | undefined;
+    forwardedAs?: styled_components.WebTarget | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLSelectElement | 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<HTMLSelectElement> | null | undefined;
-}, never>> & string;
+}, never> & Partial<Pick<Omit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>>, "as" | "forwardedAs"> & {
+    as?: styled_components.WebTarget | undefined;
+    forwardedAs?: styled_components.WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLSelectElement | 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<HTMLSelectElement> | null | undefined;
+}, never>>> & string;
 
 /**
  * BaseSlider - Themed range input for volume controls, etc.
@@ -929,8 +965,10 @@ declare const BaseSelectSmall: styled_components_dist_types.IStyledComponentBase
  * Uses theme values for consistent styling across light/dark modes.
  * Provides custom styling for the track and thumb.
  */
-declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    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;
+}, "type"> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     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;
+}, "type">>> & 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

@@ -2461,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+)$/);
@@ -2496,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}`;
@@ -2515,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 = [];
@@ -2582,9 +2571,9 @@ var SmartChannel = ({
   transparentBackground,
   renderMode = "waveform",
   samplesPerPixel: sppProp,
-  spectrogramWorkerApi,
   spectrogramClipId,
-  spectrogramOnCanvasesReady,
+  spectrogramOnCanvasRegister,
+  spectrogramOnCanvasUnregister,
   midiNotes,
   sampleRate: sampleRateProp,
   clipOffsetSeconds,
@@ -2603,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,
@@ -2613,9 +2602,9 @@ var SmartChannel = ({
         waveHeight,
         devicePixelRatio,
         samplesPerPixel,
-        workerApi: spectrogramWorkerApi,
         clipId: spectrogramClipId,
-        onCanvasesReady: spectrogramOnCanvasesReady
+        onCanvasRegister: spectrogramOnCanvasRegister,
+        onCanvasUnregister: spectrogramOnCanvasUnregister
       }
     );
   }
@@ -2631,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)(