@waveform-playlist/ui-components 5.0.0-alpha.5 → 5.0.0-alpha.7

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;
@@ -335,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>>;
@@ -346,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;
@@ -648,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_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, 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;
@@ -335,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>>;
@@ -346,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;
@@ -648,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_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, 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 };