@waveform-playlist/ui-components 8.1.0 → 9.0.1

package/dist/index.d.mts

@@ -1,8 +1,6 @@
 import * as react from 'react';
 import react__default, { FunctionComponent, ReactNode, Dispatch, SetStateAction } from 'react';
 import { Peaks, Bits, Fade, FadeType, SpectrogramData, RenderMode } from '@waveform-playlist/core';
-import { DraggableAttributes } from '@dnd-kit/core';
-import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import * as styled_components_dist_utils_hoist from 'styled-components/dist/utils/hoist';
 import * as styled_components from 'styled-components';
 import { DefaultTheme } from 'styled-components';
@@ -144,8 +142,8 @@ interface ChannelProps {
     transparentBackground?: boolean;
     /**
      * Drawing mode:
-     * - 'inverted': Draw waveOutlineColor where there's NO audio (current default). Good for gradient bars.
-     * - 'normal': Draw waveFillColor where there IS audio. Good for gradient backgrounds.
+     * - 'inverted': Canvas draws waveOutlineColor where there's NO audio, revealing waveFillColor background as bars (default). Good for gradient bars.
+     * - 'normal': Canvas draws waveFillColor where there IS audio. Use with transparentBackground for progress overlays.
      */
     drawMode?: WaveformDrawMode;
 }
@@ -208,23 +206,51 @@ interface ClipProps {
 /**
  * Clip component for rendering individual audio clips within a track
  *
- * Each clip is positioned based on its startTime and has a width based on its duration.
+ * Each clip is positioned based on its startSample and has a width based on its durationSamples.
  * This allows multiple clips to be arranged on a single track with gaps or overlaps.
  *
  * Includes a draggable ClipHeader at the top for repositioning clips on the timeline.
  */
 declare const Clip: FunctionComponent<ClipProps>;
 
+declare const CLIP_BOUNDARY_WIDTH = 8;
+declare const CLIP_BOUNDARY_WIDTH_TOUCH = 24;
+type BoundaryEdge = 'left' | 'right';
+interface BoundaryDragHandleProps {
+    ref: (element: Element | null) => void;
+    isDragging?: boolean;
+}
+interface ClipBoundaryProps {
+    clipId: string;
+    trackIndex: number;
+    clipIndex: number;
+    edge: BoundaryEdge;
+    dragHandleProps?: BoundaryDragHandleProps;
+    /**
+     * Enable larger touch targets for mobile devices.
+     * When true, boundary width increases from 8px to 24px for easier touch targeting.
+     */
+    touchOptimized?: boolean;
+}
+/**
+ * ClipBoundary component - Draggable edge for trimming clips
+ *
+ * Renders at the left or right edge of a clip.
+ * Drag to trim the clip (adjust offset and duration).
+ * Supports bidirectional trimming (trim in and out).
+ *
+ * On mobile (touchOptimized=true), boundaries are wider for easier targeting.
+ */
+declare const ClipBoundary: FunctionComponent<ClipBoundaryProps>;
+
 declare const CLIP_HEADER_HEIGHT = 22;
 interface ClipHeaderPresentationalProps {
     trackName: string;
     isSelected?: boolean;
 }
 declare const ClipHeaderPresentational: FunctionComponent<ClipHeaderPresentationalProps>;
-interface DragHandleProps$1 {
-    attributes: DraggableAttributes;
-    listeners: SyntheticListenerMap | undefined;
-    setActivatorNodeRef: (element: HTMLElement | null) => void;
+interface DragHandleProps {
+    handleRef: (element: Element | null) => void;
 }
 interface ClipHeaderProps {
     clipId: string;
@@ -233,7 +259,7 @@ interface ClipHeaderProps {
     trackName: string;
     isSelected?: boolean;
     disableDrag?: boolean;
-    dragHandleProps?: DragHandleProps$1;
+    dragHandleProps?: DragHandleProps;
 }
 /**
  * ClipHeader component - Draggable title bar for audio clips
@@ -249,35 +275,6 @@ interface ClipHeaderProps {
  */
 declare const ClipHeader: FunctionComponent<ClipHeaderProps>;
 
-declare const CLIP_BOUNDARY_WIDTH = 8;
-declare const CLIP_BOUNDARY_WIDTH_TOUCH = 24;
-type BoundaryEdge = 'left' | 'right';
-interface DragHandleProps extends DragHandleProps$1 {
-    isDragging?: boolean;
-}
-interface ClipBoundaryProps {
-    clipId: string;
-    trackIndex: number;
-    clipIndex: number;
-    edge: BoundaryEdge;
-    dragHandleProps?: DragHandleProps;
-    /**
-     * Enable larger touch targets for mobile devices.
-     * When true, boundary width increases from 8px to 24px for easier touch targeting.
-     */
-    touchOptimized?: boolean;
-}
-/**
- * ClipBoundary component - Draggable edge for trimming clips
- *
- * Renders at the left or right edge of a clip.
- * Drag to trim the clip (adjust offset and duration).
- * Supports bidirectional trimming (trim in and out).
- *
- * On mobile (touchOptimized=true), boundaries are wider for easier targeting.
- */
-declare const ClipBoundary: FunctionComponent<ClipBoundaryProps>;
-
 interface FadeOverlayProps {
     /** Position in pixels from the start of the clip */
     left: number;
@@ -853,4 +850,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, BaseLabel, BaseSelect, BaseSlider, 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, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, DotsIcon, type DragHandleProps$1 as DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, 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, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, 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, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, 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, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import * as react from 'react';
 import react__default, { FunctionComponent, ReactNode, Dispatch, SetStateAction } from 'react';
 import { Peaks, Bits, Fade, FadeType, SpectrogramData, RenderMode } from '@waveform-playlist/core';
-import { DraggableAttributes } from '@dnd-kit/core';
-import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import * as styled_components_dist_utils_hoist from 'styled-components/dist/utils/hoist';
 import * as styled_components from 'styled-components';
 import { DefaultTheme } from 'styled-components';
@@ -144,8 +142,8 @@ interface ChannelProps {
     transparentBackground?: boolean;
     /**
      * Drawing mode:
-     * - 'inverted': Draw waveOutlineColor where there's NO audio (current default). Good for gradient bars.
-     * - 'normal': Draw waveFillColor where there IS audio. Good for gradient backgrounds.
+     * - 'inverted': Canvas draws waveOutlineColor where there's NO audio, revealing waveFillColor background as bars (default). Good for gradient bars.
+     * - 'normal': Canvas draws waveFillColor where there IS audio. Use with transparentBackground for progress overlays.
      */
     drawMode?: WaveformDrawMode;
 }
@@ -208,23 +206,51 @@ interface ClipProps {
 /**
  * Clip component for rendering individual audio clips within a track
  *
- * Each clip is positioned based on its startTime and has a width based on its duration.
+ * Each clip is positioned based on its startSample and has a width based on its durationSamples.
  * This allows multiple clips to be arranged on a single track with gaps or overlaps.
  *
  * Includes a draggable ClipHeader at the top for repositioning clips on the timeline.
  */
 declare const Clip: FunctionComponent<ClipProps>;
 
+declare const CLIP_BOUNDARY_WIDTH = 8;
+declare const CLIP_BOUNDARY_WIDTH_TOUCH = 24;
+type BoundaryEdge = 'left' | 'right';
+interface BoundaryDragHandleProps {
+    ref: (element: Element | null) => void;
+    isDragging?: boolean;
+}
+interface ClipBoundaryProps {
+    clipId: string;
+    trackIndex: number;
+    clipIndex: number;
+    edge: BoundaryEdge;
+    dragHandleProps?: BoundaryDragHandleProps;
+    /**
+     * Enable larger touch targets for mobile devices.
+     * When true, boundary width increases from 8px to 24px for easier touch targeting.
+     */
+    touchOptimized?: boolean;
+}
+/**
+ * ClipBoundary component - Draggable edge for trimming clips
+ *
+ * Renders at the left or right edge of a clip.
+ * Drag to trim the clip (adjust offset and duration).
+ * Supports bidirectional trimming (trim in and out).
+ *
+ * On mobile (touchOptimized=true), boundaries are wider for easier targeting.
+ */
+declare const ClipBoundary: FunctionComponent<ClipBoundaryProps>;
+
 declare const CLIP_HEADER_HEIGHT = 22;
 interface ClipHeaderPresentationalProps {
     trackName: string;
     isSelected?: boolean;
 }
 declare const ClipHeaderPresentational: FunctionComponent<ClipHeaderPresentationalProps>;
-interface DragHandleProps$1 {
-    attributes: DraggableAttributes;
-    listeners: SyntheticListenerMap | undefined;
-    setActivatorNodeRef: (element: HTMLElement | null) => void;
+interface DragHandleProps {
+    handleRef: (element: Element | null) => void;
 }
 interface ClipHeaderProps {
     clipId: string;
@@ -233,7 +259,7 @@ interface ClipHeaderProps {
     trackName: string;
     isSelected?: boolean;
     disableDrag?: boolean;
-    dragHandleProps?: DragHandleProps$1;
+    dragHandleProps?: DragHandleProps;
 }
 /**
  * ClipHeader component - Draggable title bar for audio clips
@@ -249,35 +275,6 @@ interface ClipHeaderProps {
  */
 declare const ClipHeader: FunctionComponent<ClipHeaderProps>;
 
-declare const CLIP_BOUNDARY_WIDTH = 8;
-declare const CLIP_BOUNDARY_WIDTH_TOUCH = 24;
-type BoundaryEdge = 'left' | 'right';
-interface DragHandleProps extends DragHandleProps$1 {
-    isDragging?: boolean;
-}
-interface ClipBoundaryProps {
-    clipId: string;
-    trackIndex: number;
-    clipIndex: number;
-    edge: BoundaryEdge;
-    dragHandleProps?: DragHandleProps;
-    /**
-     * Enable larger touch targets for mobile devices.
-     * When true, boundary width increases from 8px to 24px for easier touch targeting.
-     */
-    touchOptimized?: boolean;
-}
-/**
- * ClipBoundary component - Draggable edge for trimming clips
- *
- * Renders at the left or right edge of a clip.
- * Drag to trim the clip (adjust offset and duration).
- * Supports bidirectional trimming (trim in and out).
- *
- * On mobile (touchOptimized=true), boundaries are wider for easier targeting.
- */
-declare const ClipBoundary: FunctionComponent<ClipBoundaryProps>;
-
 interface FadeOverlayProps {
     /** Position in pixels from the start of the clip */
     left: number;
@@ -853,4 +850,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, BaseLabel, BaseSelect, BaseSlider, 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, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, DotsIcon, type DragHandleProps$1 as DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, 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, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, 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, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, 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, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };