@waveform-playlist/ui-components 5.0.0-alpha.3 → 5.0.0-alpha.4

package/dist/index.d.mts

@@ -170,6 +170,7 @@ interface ClipProps {
     fadeOut?: Fade;
     sampleRate?: number;
     showFades?: boolean;
+    touchOptimized?: boolean;
 }
 /**
  * Clip component for rendering individual audio clips within a track
@@ -216,6 +217,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 +228,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 +240,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>;
 
@@ -639,4 +648,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, 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 };

package/dist/index.d.ts

@@ -170,6 +170,7 @@ interface ClipProps {
     fadeOut?: Fade;
     sampleRate?: number;
     showFades?: boolean;
+    touchOptimized?: boolean;
 }
 /**
  * Clip component for rendering individual audio clips within a track
@@ -216,6 +217,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 +228,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 +240,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>;
 
@@ -639,4 +648,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, 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 };

package/dist/index.js

@@ -44,6 +44,7 @@ __export(index_exports, {
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   CLIP_BOUNDARY_WIDTH: () => CLIP_BOUNDARY_WIDTH,
+  CLIP_BOUNDARY_WIDTH_TOUCH: () => CLIP_BOUNDARY_WIDTH_TOUCH,
   CLIP_HEADER_HEIGHT: () => CLIP_HEADER_HEIGHT,
   Channel: () => Channel,
   Clip: () => Clip,
@@ -772,6 +773,7 @@ var HeaderContainer = import_styled_components10.default.div`
   z-index: 110;
   flex-shrink: 0;
   pointer-events: auto; /* Re-enable pointer events (parent ClipContainer has pointer-events: none) */
+  touch-action: ${(props) => props.$interactive ? "none" : "auto"}; /* Prevent browser scroll during drag on touch devices */
 
   ${(props) => props.$interactive && `
     &:hover {
@@ -844,16 +846,18 @@ var import_react2 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var CLIP_BOUNDARY_WIDTH = 8;
+var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = import_styled_components11.default.div`
   position: absolute;
   ${(props) => props.$edge === "left" ? "left: 0;" : "right: 0;"}
   top: 0;
   bottom: 0;
-  width: ${CLIP_BOUNDARY_WIDTH}px;
+  width: ${(props) => props.$touchOptimized ? CLIP_BOUNDARY_WIDTH_TOUCH : CLIP_BOUNDARY_WIDTH}px;
   cursor: col-resize;
   user-select: none;
   z-index: 105; /* Above waveform, below header */
   pointer-events: auto; /* Re-enable pointer events (parent ClipContainer has pointer-events: none) */
+  touch-action: none; /* Prevent browser scroll during drag on touch devices */
 
   /* Invisible by default, visible on hover */
   background: ${(props) => props.$isDragging ? "rgba(255, 255, 255, 0.4)" : props.$isHovered ? "rgba(255, 255, 255, 0.2)" : "transparent"};
@@ -877,7 +881,8 @@ var ClipBoundary = ({
   trackIndex,
   clipIndex,
   edge,
-  dragHandleProps
+  dragHandleProps,
+  touchOptimized = false
 }) => {
   const [isHovered, setIsHovered] = import_react2.default.useState(false);
   if (!dragHandleProps) {
@@ -893,6 +898,7 @@ var ClipBoundary = ({
       $edge: edge,
       $isDragging: isDragging,
       $isHovered: isHovered,
+      $touchOptimized: touchOptimized,
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       ...listeners,
@@ -1015,7 +1021,8 @@ var Clip = ({
   fadeIn,
   fadeOut,
   sampleRate = 44100,
-  showFades = false
+  showFades = false,
+  touchOptimized = false
 }) => {
   const left = Math.floor(startSample / samplesPerPixel);
   const endPixel = Math.floor((startSample + durationSamples) / samplesPerPixel);
@@ -1108,6 +1115,7 @@ var Clip = ({
               trackIndex,
               clipIndex,
               edge: "left",
+              touchOptimized,
               dragHandleProps: {
                 attributes: leftBoundaryAttributes,
                 listeners: leftBoundaryListeners,
@@ -1123,6 +1131,7 @@ var Clip = ({
               trackIndex,
               clipIndex,
               edge: "right",
+              touchOptimized,
               dragHandleProps: {
                 attributes: rightBoundaryAttributes,
                 listeners: rightBoundaryListeners,
@@ -2362,6 +2371,7 @@ var TrackControlsWithDelete = ({
   Button,
   ButtonGroup,
   CLIP_BOUNDARY_WIDTH,
+  CLIP_BOUNDARY_WIDTH_TOUCH,
   CLIP_HEADER_HEIGHT,
   Channel,
   Clip,