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

package/dist/index.mjs

@@ -670,6 +670,7 @@ var HeaderContainer = styled10.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 {
@@ -742,16 +743,18 @@ import React2 from "react";
 import styled11 from "styled-components";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var CLIP_BOUNDARY_WIDTH = 8;
+var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = styled11.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"};
@@ -775,7 +778,8 @@ var ClipBoundary = ({
   trackIndex,
   clipIndex,
   edge,
-  dragHandleProps
+  dragHandleProps,
+  touchOptimized = false
 }) => {
   const [isHovered, setIsHovered] = React2.useState(false);
   if (!dragHandleProps) {
@@ -791,6 +795,7 @@ var ClipBoundary = ({
       $edge: edge,
       $isDragging: isDragging,
       $isHovered: isHovered,
+      $touchOptimized: touchOptimized,
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       ...listeners,
@@ -913,7 +918,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);
@@ -1006,6 +1012,7 @@ var Clip = ({
               trackIndex,
               clipIndex,
               edge: "left",
+              touchOptimized,
               dragHandleProps: {
                 attributes: leftBoundaryAttributes,
                 listeners: leftBoundaryListeners,
@@ -1021,6 +1028,7 @@ var Clip = ({
               trackIndex,
               clipIndex,
               edge: "right",
+              touchOptimized,
               dragHandleProps: {
                 attributes: rightBoundaryAttributes,
                 listeners: rightBoundaryListeners,
@@ -2263,6 +2271,7 @@ export {
   Button,
   ButtonGroup,
   CLIP_BOUNDARY_WIDTH,
+  CLIP_BOUNDARY_WIDTH_TOUCH,
   CLIP_HEADER_HEIGHT,
   Channel,
   Clip,