@waveform-playlist/ui-components 8.0.0 → 9.0.0

package/dist/index.mjs

@@ -840,8 +840,7 @@ var PlaylistErrorBoundary = class extends React4.Component {
 
 // src/components/Clip.tsx
 import styled13 from "styled-components";
-import { useDraggable } from "@dnd-kit/core";
-import { CSS } from "@dnd-kit/utilities";
+import { useDraggable } from "@dnd-kit/react";
 
 // src/components/ClipHeader.tsx
 import styled10 from "styled-components";
@@ -855,7 +854,7 @@ var HeaderContainer = styled10.div`
   display: flex;
   align-items: center;
   padding: 0 8px;
-  cursor: ${(props) => props.$interactive ? props.$isDragging ? "grabbing" : "grab" : "default"};
+  cursor: ${(props) => props.$interactive ? "grab" : "default"};
   user-select: none;
   z-index: 110;
   flex-shrink: 0;
@@ -885,7 +884,7 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ jsx7(HeaderContainer, { $isDragging: false, $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ jsx7(TrackName, { children: trackName }) });
+  return /* @__PURE__ */ jsx7(HeaderContainer, { $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ jsx7(TrackName, { children: trackName }) });
 };
 var ClipHeader = ({
   clipId,
@@ -899,16 +898,14 @@ var ClipHeader = ({
   if (disableDrag || !dragHandleProps) {
     return /* @__PURE__ */ jsx7(ClipHeaderPresentational, { trackName, isSelected });
   }
-  const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
+  const { handleRef } = dragHandleProps;
   return /* @__PURE__ */ jsx7(
     HeaderContainer,
     {
-      ref: setActivatorNodeRef,
+      ref: handleRef,
       "data-clip-id": clipId,
       $interactive: true,
       $isSelected: isSelected,
-      ...listeners,
-      ...attributes,
       children: /* @__PURE__ */ jsx7(TrackName, { children: trackName })
     }
   );
@@ -961,11 +958,11 @@ var ClipBoundary = ({
   if (!dragHandleProps) {
     return null;
   }
-  const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
+  const { ref: boundaryRef, isDragging } = dragHandleProps;
   return /* @__PURE__ */ jsx8(
     BoundaryContainer,
     {
-      ref: setActivatorNodeRef,
+      ref: boundaryRef,
       "data-clip-id": clipId,
       "data-boundary-edge": edge,
       $edge: edge,
@@ -973,9 +970,7 @@ var ClipBoundary = ({
       $isHovered: isHovered,
       $touchOptimized: touchOptimized,
       onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      ...listeners,
-      ...attributes
+      onMouseLeave: () => setIsHovered(false)
     }
   );
 };
@@ -1096,42 +1091,34 @@ var Clip = ({
   const width = endPixel - left;
   const enableDrag = showHeader && !disableHeaderDrag && !isOverlay;
   const draggableId = `clip-${trackIndex}-${clipIndex}`;
-  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, isDragging } = useDraggable({
+  const {
+    ref: clipRef,
+    handleRef,
+    isDragSource
+  } = useDraggable({
     id: draggableId,
     data: { clipId, trackIndex, clipIndex },
     disabled: !enableDrag
   });
   const leftBoundaryId = `clip-boundary-left-${trackIndex}-${clipIndex}`;
-  const {
-    attributes: leftBoundaryAttributes,
-    listeners: leftBoundaryListeners,
-    setActivatorNodeRef: setLeftBoundaryActivatorRef,
-    isDragging: isLeftBoundaryDragging
-  } = useDraggable({
+  const { ref: leftBoundaryRef, isDragSource: isLeftBoundaryDragging } = useDraggable({
     id: leftBoundaryId,
     data: { clipId, trackIndex, clipIndex, boundary: "left" },
-    disabled: !enableDrag
+    disabled: !enableDrag,
+    feedback: "none"
   });
   const rightBoundaryId = `clip-boundary-right-${trackIndex}-${clipIndex}`;
-  const {
-    attributes: rightBoundaryAttributes,
-    listeners: rightBoundaryListeners,
-    setActivatorNodeRef: setRightBoundaryActivatorRef,
-    isDragging: isRightBoundaryDragging
-  } = useDraggable({
+  const { ref: rightBoundaryRef, isDragSource: isRightBoundaryDragging } = useDraggable({
     id: rightBoundaryId,
     data: { clipId, trackIndex, clipIndex, boundary: "right" },
-    disabled: !enableDrag
+    disabled: !enableDrag,
+    feedback: "none"
   });
-  const style = transform ? {
-    transform: CSS.Translate.toString(transform),
-    zIndex: isDragging ? 100 : void 0
-    // Below controls (z-index: 999) but above other clips
-  } : void 0;
+  const style = isDragSource ? { zIndex: 100 } : void 0;
   return /* @__PURE__ */ jsxs2(
     ClipContainer,
     {
-      ref: setNodeRef,
+      ref: clipRef,
       style,
       className,
       $left: left,
@@ -1150,7 +1137,7 @@ var Clip = ({
             trackName,
             isSelected,
             disableDrag: disableHeaderDrag,
-            dragHandleProps: enableDrag ? { attributes, listeners, setActivatorNodeRef } : void 0
+            dragHandleProps: enableDrag ? { handleRef } : void 0
           }
         ),
         /* @__PURE__ */ jsx10(ClipViewportOriginProvider, { originX: left, children: /* @__PURE__ */ jsxs2(ChannelsWrapper, { $isOverlay: isOverlay, children: [
@@ -1184,9 +1171,7 @@ var Clip = ({
               edge: "left",
               touchOptimized,
               dragHandleProps: {
-                attributes: leftBoundaryAttributes,
-                listeners: leftBoundaryListeners,
-                setActivatorNodeRef: setLeftBoundaryActivatorRef,
+                ref: leftBoundaryRef,
                 isDragging: isLeftBoundaryDragging
               }
             }
@@ -1200,9 +1185,7 @@ var Clip = ({
               edge: "right",
               touchOptimized,
               dragHandleProps: {
-                attributes: rightBoundaryAttributes,
-                listeners: rightBoundaryListeners,
-                setActivatorNodeRef: setRightBoundaryActivatorRef,
+                ref: rightBoundaryRef,
                 isDragging: isRightBoundaryDragging
               }
             }
@@ -1311,7 +1294,8 @@ var PlayheadWithMarker = ({
   samplesPerPixel,
   sampleRate,
   controlsOffset,
-  getAudioContextTime
+  getAudioContextTime,
+  getPlaybackTime
 }) => {
   const containerRef = useRef3(null);
   const animationFrameRef = useRef3(null);
@@ -1319,9 +1303,15 @@ var PlayheadWithMarker = ({
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
-        if (isPlaying && getAudioContextTime) {
-          const elapsed = getAudioContextTime() - (playbackStartTimeRef.current ?? 0);
-          time = (audioStartPositionRef.current ?? 0) + elapsed;
+        if (isPlaying) {
+          if (getPlaybackTime) {
+            time = getPlaybackTime();
+          } else if (getAudioContextTime) {
+            const elapsed = getAudioContextTime() - (playbackStartTimeRef.current ?? 0);
+            time = (audioStartPositionRef.current ?? 0) + elapsed;
+          } else {
+            time = currentTimeRef.current ?? 0;
+          }
         } else {
           time = currentTimeRef.current ?? 0;
         }
@@ -1351,7 +1341,8 @@ var PlayheadWithMarker = ({
     currentTimeRef,
     playbackStartTimeRef,
     audioStartPositionRef,
-    getAudioContextTime
+    getAudioContextTime,
+    getPlaybackTime
   ]);
   useEffect3(() => {
     if (!isPlaying && containerRef.current) {