@waveform-playlist/ui-components 5.0.0-alpha.0 → 5.0.0-alpha.10

package/dist/index.d.mts

@@ -84,6 +84,8 @@ interface WaveformPlaylistTheme {
     timescaleBackgroundColor: string;
     playheadColor: string;
     selectionColor: string;
+    loopRegionColor: string;
+    loopMarkerColor: string;
     clipHeaderBackgroundColor: string;
     clipHeaderBorderColor: string;
     clipHeaderTextColor: string;
@@ -170,6 +172,7 @@ interface ClipProps {
     fadeOut?: Fade;
     sampleRate?: number;
     showFades?: boolean;
+    touchOptimized?: boolean;
 }
 /**
  * Clip component for rendering individual audio clips within a track
@@ -216,6 +219,7 @@ 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;
@@ -226,6 +230,11 @@ interface ClipBoundaryProps {
     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
@@ -233,6 +242,8 @@ interface ClipBoundaryProps {
  * 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>;
 
@@ -326,6 +337,8 @@ interface PlaylistProps {
     readonly onTracksMouseMove?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
     readonly onTracksMouseUp?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
     readonly scrollContainerRef?: (el: HTMLDivElement | null) => void;
+    /** When true, selection is in progress - raises z-index to prevent clip boundary interference */
+    readonly isSelecting?: boolean;
 }
 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>>;
@@ -337,6 +350,61 @@ interface SelectionProps {
 }
 declare const Selection: react__default.FC<SelectionProps>;
 
+interface LoopRegionProps {
+    startPosition: number;
+    endPosition: number;
+    regionColor?: string;
+    markerColor?: string;
+}
+/**
+ * Loop region overlay with non-interactive markers.
+ * This renders over the tracks area - markers are visual only here.
+ */
+declare const LoopRegion: react__default.FC<LoopRegionProps>;
+interface LoopRegionMarkersProps {
+    startPosition: number;
+    endPosition: number;
+    markerColor?: string;
+    regionColor?: string;
+    onLoopStartChange?: (newPositionPixels: number) => void;
+    onLoopEndChange?: (newPositionPixels: number) => void;
+    /** Called when the entire region is moved */
+    onLoopRegionMove?: (newStartPixels: number, newEndPixels: number) => void;
+    /** Minimum position in pixels (usually controls width offset) */
+    minPosition?: number;
+    /** Maximum position in pixels */
+    maxPosition?: number;
+}
+/**
+ * Draggable loop region markers for the timescale area.
+ * These are interactive and can be dragged to adjust loop boundaries.
+ * The shaded region between markers can be dragged to move the entire loop.
+ */
+declare const LoopRegionMarkers: react__default.FC<LoopRegionMarkersProps>;
+interface TimescaleLoopRegionProps {
+    /** Current loop start position in pixels */
+    startPosition: number;
+    /** Current loop end position in pixels */
+    endPosition: number;
+    markerColor?: string;
+    regionColor?: string;
+    /** Called when loop region changes (start pixels, end pixels) */
+    onLoopRegionChange?: (startPixels: number, endPixels: number) => void;
+    /** Minimum position in pixels */
+    minPosition?: number;
+    /** Maximum position in pixels */
+    maxPosition?: number;
+    /** Offset for controls area (left margin) */
+    controlsOffset?: number;
+}
+/**
+ * Complete timescale loop region component with:
+ * - Click and drag to create a new loop region
+ * - Drag markers to resize existing loop region
+ * - Drag the shaded region to move the entire loop
+ */
+declare const TimescaleLoopRegion: react__default.FC<TimescaleLoopRegionProps>;
+
 interface SelectionTimeInputsProps {
     selectionStart: number;
     selectionEnd: number;
@@ -639,4 +707,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_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, type DragHandleProps$1 as DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, Track, TrackControlsContext, TrackControlsWithDelete, type TrackControlsWithDeleteProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useTheme, useTrackControls, 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, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, 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, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackControlsWithDelete, type TrackControlsWithDeleteProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useTheme, useTrackControls, waveformColorToCss };

package/dist/index.d.ts

@@ -84,6 +84,8 @@ interface WaveformPlaylistTheme {
     timescaleBackgroundColor: string;
     playheadColor: string;
     selectionColor: string;
+    loopRegionColor: string;
+    loopMarkerColor: string;
     clipHeaderBackgroundColor: string;
     clipHeaderBorderColor: string;
     clipHeaderTextColor: string;
@@ -170,6 +172,7 @@ interface ClipProps {
     fadeOut?: Fade;
     sampleRate?: number;
     showFades?: boolean;
+    touchOptimized?: boolean;
 }
 /**
  * Clip component for rendering individual audio clips within a track
@@ -216,6 +219,7 @@ 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;
@@ -226,6 +230,11 @@ interface ClipBoundaryProps {
     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
@@ -233,6 +242,8 @@ interface ClipBoundaryProps {
  * 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>;
 
@@ -326,6 +337,8 @@ interface PlaylistProps {
     readonly onTracksMouseMove?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
     readonly onTracksMouseUp?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
     readonly scrollContainerRef?: (el: HTMLDivElement | null) => void;
+    /** When true, selection is in progress - raises z-index to prevent clip boundary interference */
+    readonly isSelecting?: boolean;
 }
 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>>;
@@ -337,6 +350,61 @@ interface SelectionProps {
 }
 declare const Selection: react__default.FC<SelectionProps>;
 
+interface LoopRegionProps {
+    startPosition: number;
+    endPosition: number;
+    regionColor?: string;
+    markerColor?: string;
+}
+/**
+ * Loop region overlay with non-interactive markers.
+ * This renders over the tracks area - markers are visual only here.
+ */
+declare const LoopRegion: react__default.FC<LoopRegionProps>;
+interface LoopRegionMarkersProps {
+    startPosition: number;
+    endPosition: number;
+    markerColor?: string;
+    regionColor?: string;
+    onLoopStartChange?: (newPositionPixels: number) => void;
+    onLoopEndChange?: (newPositionPixels: number) => void;
+    /** Called when the entire region is moved */
+    onLoopRegionMove?: (newStartPixels: number, newEndPixels: number) => void;
+    /** Minimum position in pixels (usually controls width offset) */
+    minPosition?: number;
+    /** Maximum position in pixels */
+    maxPosition?: number;
+}
+/**
+ * Draggable loop region markers for the timescale area.
+ * These are interactive and can be dragged to adjust loop boundaries.
+ * The shaded region between markers can be dragged to move the entire loop.
+ */
+declare const LoopRegionMarkers: react__default.FC<LoopRegionMarkersProps>;
+interface TimescaleLoopRegionProps {
+    /** Current loop start position in pixels */
+    startPosition: number;
+    /** Current loop end position in pixels */
+    endPosition: number;
+    markerColor?: string;
+    regionColor?: string;
+    /** Called when loop region changes (start pixels, end pixels) */
+    onLoopRegionChange?: (startPixels: number, endPixels: number) => void;
+    /** Minimum position in pixels */
+    minPosition?: number;
+    /** Maximum position in pixels */
+    maxPosition?: number;
+    /** Offset for controls area (left margin) */
+    controlsOffset?: number;
+}
+/**
+ * Complete timescale loop region component with:
+ * - Click and drag to create a new loop region
+ * - Drag markers to resize existing loop region
+ * - Drag the shaded region to move the entire loop
+ */
+declare const TimescaleLoopRegion: react__default.FC<TimescaleLoopRegionProps>;
+
 interface SelectionTimeInputsProps {
     selectionStart: number;
     selectionEnd: number;
@@ -639,4 +707,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_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, type DragHandleProps$1 as DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, Track, TrackControlsContext, TrackControlsWithDelete, type TrackControlsWithDeleteProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useTheme, useTrackControls, 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, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, 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, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackControlsWithDelete, type TrackControlsWithDeleteProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useTheme, useTrackControls, waveformColorToCss };