@waveform-playlist/ui-components 8.1.0 → 9.0.1

package/dist/index.js

@@ -758,6 +758,40 @@ function useChunkedCanvasRefs() {
 
 // src/components/Channel.tsx
 var import_core = require("@waveform-playlist/core");
+
+// src/utils/peakRendering.ts
+function aggregatePeaks(data, bits, startIndex, endIndex) {
+  if (startIndex * 2 + 1 >= data.length) {
+    return null;
+  }
+  const maxValue = 2 ** (bits - 1);
+  let minPeak = data[startIndex * 2] / maxValue;
+  let maxPeak = data[startIndex * 2 + 1] / maxValue;
+  for (let p = startIndex + 1; p < endIndex; p++) {
+    if (p * 2 + 1 >= data.length) break;
+    const pMin = data[p * 2] / maxValue;
+    const pMax = data[p * 2 + 1] / maxValue;
+    if (pMin < minPeak) minPeak = pMin;
+    if (pMax > maxPeak) maxPeak = pMax;
+  }
+  return { min: minPeak, max: maxPeak };
+}
+function calculateBarRects(x, barWidth, halfHeight, minPeak, maxPeak, drawMode) {
+  const min = Math.abs(minPeak * halfHeight);
+  const max = Math.abs(maxPeak * halfHeight);
+  if (drawMode === "normal") {
+    return [{ x, y: halfHeight - max, width: barWidth, height: max + min }];
+  }
+  return [
+    { x, y: 0, width: barWidth, height: halfHeight - max },
+    { x, y: halfHeight + min, width: barWidth, height: halfHeight - min }
+  ];
+}
+function calculateFirstBarPosition(canvasStartGlobal, barWidth, step) {
+  return Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
+}
+
+// src/components/Channel.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
@@ -827,7 +861,6 @@ var Channel = (props) => {
       const globalPixelOffset = canvasIdx * import_core.MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       const h2 = Math.floor(waveHeight / 2);
-      const maxValue = 2 ** (bits - 1);
       if (ctx) {
         ctx.resetTransform();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -843,21 +876,16 @@ var Channel = (props) => {
         ctx.fillStyle = createCanvasFillStyle(ctx, fillColor, canvasWidth, waveHeight);
         const canvasStartGlobal = globalPixelOffset;
         const canvasEndGlobal = globalPixelOffset + canvasWidth;
-        const firstBarGlobal = Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
+        const firstBarGlobal = calculateFirstBarPosition(canvasStartGlobal, barWidth, step);
         for (let barGlobal = Math.max(0, firstBarGlobal); barGlobal < canvasEndGlobal; barGlobal += step) {
           const x = barGlobal - canvasStartGlobal;
           if (x + barWidth <= 0) continue;
-          const peakIndex = barGlobal;
-          if (peakIndex * 2 + 1 < data.length) {
-            const minPeak = data[peakIndex * 2] / maxValue;
-            const maxPeak = data[peakIndex * 2 + 1] / maxValue;
-            const min = Math.abs(minPeak * h2);
-            const max = Math.abs(maxPeak * h2);
-            if (drawMode === "normal") {
-              ctx.fillRect(x, h2 - max, barWidth, max + min);
-            } else {
-              ctx.fillRect(x, 0, barWidth, h2 - max);
-              ctx.fillRect(x, h2 + min, barWidth, h2 - min);
+          const peakEnd = Math.min(barGlobal + step, length);
+          const peak = aggregatePeaks(data, bits, barGlobal, peakEnd);
+          if (peak) {
+            const rects = calculateBarRects(x, barWidth, h2, peak.min, peak.max, drawMode);
+            for (const rect of rects) {
+              ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
             }
           }
         }
@@ -949,8 +977,7 @@ var PlaylistErrorBoundary = class extends import_react5.default.Component {
 
 // src/components/Clip.tsx
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_core2 = require("@dnd-kit/core");
-var import_utilities = require("@dnd-kit/utilities");
+var import_react7 = require("@dnd-kit/react");
 
 // src/components/ClipHeader.tsx
 var import_styled_components10 = __toESM(require("styled-components"));
@@ -964,7 +991,7 @@ var HeaderContainer = import_styled_components10.default.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;
@@ -994,7 +1021,7 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderContainer, { $isDragging: false, $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderContainer, { $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName }) });
 };
 var ClipHeader = ({
   clipId,
@@ -1008,16 +1035,14 @@ var ClipHeader = ({
   if (disableDrag || !dragHandleProps) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ClipHeaderPresentational, { trackName, isSelected });
   }
-  const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
+  const { handleRef } = dragHandleProps;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     HeaderContainer,
     {
-      ref: setActivatorNodeRef,
+      ref: handleRef,
       "data-clip-id": clipId,
       $interactive: true,
       $isSelected: isSelected,
-      ...listeners,
-      ...attributes,
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName })
     }
   );
@@ -1070,11 +1095,11 @@ var ClipBoundary = ({
   if (!dragHandleProps) {
     return null;
   }
-  const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
+  const { ref: boundaryRef, isDragging } = dragHandleProps;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     BoundaryContainer,
     {
-      ref: setActivatorNodeRef,
+      ref: boundaryRef,
       "data-clip-id": clipId,
       "data-boundary-edge": edge,
       $edge: edge,
@@ -1082,9 +1107,7 @@ var ClipBoundary = ({
       $isHovered: isHovered,
       $touchOptimized: touchOptimized,
       onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      ...listeners,
-      ...attributes
+      onMouseLeave: () => setIsHovered(false)
     }
   );
 };
@@ -1205,42 +1228,34 @@ var Clip = ({
   const width = endPixel - left;
   const enableDrag = showHeader && !disableHeaderDrag && !isOverlay;
   const draggableId = `clip-${trackIndex}-${clipIndex}`;
-  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, isDragging } = (0, import_core2.useDraggable)({
+  const {
+    ref: clipRef,
+    handleRef,
+    isDragSource
+  } = (0, import_react7.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
-  } = (0, import_core2.useDraggable)({
+  const { ref: leftBoundaryRef, isDragSource: isLeftBoundaryDragging } = (0, import_react7.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
-  } = (0, import_core2.useDraggable)({
+  const { ref: rightBoundaryRef, isDragSource: isRightBoundaryDragging } = (0, import_react7.useDraggable)({
     id: rightBoundaryId,
     data: { clipId, trackIndex, clipIndex, boundary: "right" },
-    disabled: !enableDrag
+    disabled: !enableDrag,
+    feedback: "none"
   });
-  const style = transform ? {
-    transform: import_utilities.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__ */ (0, import_jsx_runtime10.jsxs)(
     ClipContainer,
     {
-      ref: setNodeRef,
+      ref: clipRef,
       style,
       className,
       $left: left,
@@ -1259,7 +1274,7 @@ var Clip = ({
             trackName,
             isSelected,
             disableDrag: disableHeaderDrag,
-            dragHandleProps: enableDrag ? { attributes, listeners, setActivatorNodeRef } : void 0
+            dragHandleProps: enableDrag ? { handleRef } : void 0
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClipViewportOriginProvider, { originX: left, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
@@ -1293,9 +1308,7 @@ var Clip = ({
               edge: "left",
               touchOptimized,
               dragHandleProps: {
-                attributes: leftBoundaryAttributes,
-                listeners: leftBoundaryListeners,
-                setActivatorNodeRef: setLeftBoundaryActivatorRef,
+                ref: leftBoundaryRef,
                 isDragging: isLeftBoundaryDragging
               }
             }
@@ -1309,9 +1322,7 @@ var Clip = ({
               edge: "right",
               touchOptimized,
               dragHandleProps: {
-                attributes: rightBoundaryAttributes,
-                listeners: rightBoundaryListeners,
-                setActivatorNodeRef: setRightBoundaryActivatorRef,
+                ref: rightBoundaryRef,
                 isDragging: isRightBoundaryDragging
               }
             }
@@ -1363,7 +1374,7 @@ var MasterVolumeControl = ({
 };
 
 // src/components/Playhead.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
@@ -1423,9 +1434,9 @@ var PlayheadWithMarker = ({
   getAudioContextTime,
   getPlaybackTime
 }) => {
-  const containerRef = (0, import_react7.useRef)(null);
-  const animationFrameRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const containerRef = (0, import_react8.useRef)(null);
+  const animationFrameRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1470,7 +1481,7 @@ var PlayheadWithMarker = ({
     getAudioContextTime,
     getPlaybackTime
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
@@ -1485,7 +1496,7 @@ var PlayheadWithMarker = ({
 
 // src/components/Playlist.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Wrapper2 = import_styled_components16.default.div`
   overflow-y: hidden;
@@ -1540,8 +1551,8 @@ var Playlist = ({
   isSelecting,
   "data-playlist-state": playlistState
 }) => {
-  const wrapperRef = (0, import_react8.useRef)(null);
-  const handleRef = (0, import_react8.useCallback)(
+  const wrapperRef = (0, import_react9.useRef)(null);
+  const handleRef = (0, import_react9.useCallback)(
     (el) => {
       wrapperRef.current = el;
       scrollContainerRef?.(el);
@@ -1598,7 +1609,7 @@ var Selection = ({
 };
 
 // src/components/LoopRegion.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var LoopRegionOverlayDiv = import_styled_components18.default.div.attrs((props) => ({
@@ -1749,12 +1760,12 @@ var LoopRegionMarkers = ({
   minPosition = 0,
   maxPosition = Infinity
 }) => {
-  const [draggingMarker, setDraggingMarker] = (0, import_react9.useState)(null);
-  const dragStartX = (0, import_react9.useRef)(0);
-  const dragStartPosition = (0, import_react9.useRef)(0);
-  const dragStartEnd = (0, import_react9.useRef)(0);
+  const [draggingMarker, setDraggingMarker] = (0, import_react10.useState)(null);
+  const dragStartX = (0, import_react10.useRef)(0);
+  const dragStartPosition = (0, import_react10.useRef)(0);
+  const dragStartEnd = (0, import_react10.useRef)(0);
   const width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = (0, import_react9.useCallback)(
+  const handleMarkerMouseDown = (0, import_react10.useCallback)(
     (e, marker) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1782,7 +1793,7 @@ var LoopRegionMarkers = ({
     },
     [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]
   );
-  const handleRegionMouseDown = (0, import_react9.useCallback)(
+  const handleRegionMouseDown = (0, import_react10.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1876,11 +1887,11 @@ var TimescaleLoopRegion = ({
   maxPosition = Infinity,
   controlsOffset = 0
 }) => {
-  const [, setIsCreating] = (0, import_react9.useState)(false);
-  const createStartX = (0, import_react9.useRef)(0);
-  const containerRef = (0, import_react9.useRef)(null);
+  const [, setIsCreating] = (0, import_react10.useState)(false);
+  const createStartX = (0, import_react10.useRef)(0);
+  const containerRef = (0, import_react10.useRef)(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = (0, import_react9.useCallback)(
+  const handleBackgroundMouseDown = (0, import_react10.useCallback)(
     (e) => {
       const target = e.target;
       if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
@@ -1937,10 +1948,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/TimeInput.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -2000,8 +2011,8 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react10.useState)("");
-  (0, import_react10.useEffect)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react11.useState)("");
+  (0, import_react11.useEffect)(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -2047,8 +2058,8 @@ var SelectionTimeInputs = ({
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = (0, import_react11.useState)("hh:mm:ss.uuu");
-  (0, import_react11.useEffect)(() => {
+  const [timeFormat, setTimeFormat] = (0, import_react12.useState)("hh:mm:ss.uuu");
+  (0, import_react12.useEffect)(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -2100,14 +2111,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react12.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react13.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react12.useState)(getScale());
+  const [scale, setScale] = (0, import_react13.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -2117,11 +2128,11 @@ var DevicePixelRatioProvider = ({ children }) => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react12.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react13.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react13 = require("react");
-var PlaylistInfoContext = (0, import_react13.createContext)({
+var import_react14 = require("react");
+var PlaylistInfoContext = (0, import_react14.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -2135,21 +2146,21 @@ var PlaylistInfoContext = (0, import_react13.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react13.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react14.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_styled_components19 = require("styled-components");
-var useTheme2 = () => (0, import_react14.useContext)(import_styled_components19.ThemeContext);
+var useTheme2 = () => (0, import_react15.useContext)(import_styled_components19.ThemeContext);
 
 // src/contexts/TrackControls.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var TrackControlsContext = (0, import_react15.createContext)(/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react15.Fragment, {}));
-var useTrackControls = () => (0, import_react15.useContext)(TrackControlsContext);
+var TrackControlsContext = (0, import_react16.createContext)(/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react16.Fragment, {}));
+var useTrackControls = () => (0, import_react16.useContext)(TrackControlsContext);
 
 // src/contexts/Playout.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
@@ -2161,8 +2172,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react16.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react16.createContext)({
+var PlayoutStatusContext = (0, import_react17.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react17.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2171,23 +2182,23 @@ var PlayoutStatusUpdateContext = (0, import_react16.createContext)({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  const [isPlaying, setIsPlaying] = (0, import_react16.useState)(defaultIsPlaying);
-  const [progress, setProgress] = (0, import_react16.useState)(defaultProgress);
-  const [selectionStart, setSelectionStart] = (0, import_react16.useState)(defaultSelectionStart);
-  const [selectionEnd, setSelectionEnd] = (0, import_react16.useState)(defaultSelectionEnd);
+  const [isPlaying, setIsPlaying] = (0, import_react17.useState)(defaultIsPlaying);
+  const [progress, setProgress] = (0, import_react17.useState)(defaultProgress);
+  const [selectionStart, setSelectionStart] = (0, import_react17.useState)(defaultSelectionStart);
+  const [selectionEnd, setSelectionEnd] = (0, import_react17.useState)(defaultSelectionEnd);
   const setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => (0, import_react16.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react16.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react17.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react17.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_core3 = require("@waveform-playlist/core");
+var import_core2 = require("@waveform-playlist/core");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper3 = import_styled_components20.default.div.attrs((props) => ({
@@ -2242,24 +2253,24 @@ var SpectrogramChannel = ({
 }) => {
   const channelIndex = channelIndexProp ?? index;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const registeredIdsRef = (0, import_react17.useRef)([]);
-  const transferredCanvasesRef = (0, import_react17.useRef)(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = (0, import_react17.useRef)(workerApi);
-  const onCanvasesReadyRef = (0, import_react17.useRef)(onCanvasesReady);
+  const registeredIdsRef = (0, import_react18.useRef)([]);
+  const transferredCanvasesRef = (0, import_react18.useRef)(/* @__PURE__ */ new WeakSet());
+  const workerApiRef = (0, import_react18.useRef)(workerApi);
+  const onCanvasesReadyRef = (0, import_react18.useRef)(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
   const clipOriginX = useClipViewportOrigin();
-  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH, clipOriginX);
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core2.MAX_CANVAS_WIDTH, clipOriginX);
   const lut = colorLUT ?? DEFAULT_COLOR_LUT;
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
   const hasCustomFrequencyScale = Boolean(frequencyScaleFn);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
@@ -2314,15 +2325,15 @@ var SpectrogramChannel = ({
         const match = id.match(/chunk(\d+)$/);
         if (!match) {
           console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
-          return import_core3.MAX_CANVAS_WIDTH;
+          return import_core2.MAX_CANVAS_WIDTH;
         }
         const chunkIdx = parseInt(match[1], 10);
-        return Math.min(length - chunkIdx * import_core3.MAX_CANVAS_WIDTH, import_core3.MAX_CANVAS_WIDTH);
+        return Math.min(length - chunkIdx * import_core2.MAX_CANVAS_WIDTH, import_core2.MAX_CANVAS_WIDTH);
       });
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
   }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2336,7 +2347,7 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     if (isWorkerMode || !data) return;
     const {
       frequencyBinCount,
@@ -2349,7 +2360,7 @@ var SpectrogramChannel = ({
     const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
     const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
-      const globalPixelOffset = canvasIdx * import_core3.MAX_CANVAS_WIDTH;
+      const globalPixelOffset = canvasIdx * import_core2.MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
       const canvasWidth = canvas.width / devicePixelRatio;
@@ -2425,8 +2436,8 @@ var SpectrogramChannel = ({
     visibleChunkIndices
   ]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
+    const chunkLeft = i * import_core2.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core2.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       SpectrogramCanvas,
       {
@@ -2556,7 +2567,7 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var LABELS_WIDTH = 72;
@@ -2608,12 +2619,12 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = (0, import_react18.useRef)(null);
+  const canvasRef = (0, import_react19.useRef)(null);
   const devicePixelRatio = useDevicePixelRatio();
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
   const clipHeaderOffset = hasClipHeaders ? 22 : 0;
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2667,10 +2678,10 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
@@ -2694,7 +2705,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-var import_core4 = require("@waveform-playlist/core");
+var import_core3 = require("@waveform-playlist/core");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
@@ -2752,9 +2763,9 @@ var TimeScale = (props) => {
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = (0, import_react19.useContext)(PlaylistInfoContext);
+  } = (0, import_react20.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react19.useMemo)(() => {
+  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react20.useMemo)(() => {
     const nextCanvasInfo = /* @__PURE__ */ new Map();
     const nextMarkers = [];
     const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
@@ -2765,7 +2776,7 @@ var TimeScale = (props) => {
       if (counter % marker === 0) {
         const timeMs = counter;
         const timestamp = formatTime2(timeMs);
-        const element = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react19.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+        const element = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react20.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
         nextMarkers.push({ pix, element });
         nextCanvasInfo.set(pix, timeScaleHeight);
       } else if (counter % bigStep === 0) {
@@ -2790,10 +2801,10 @@ var TimeScale = (props) => {
     renderTimestamp,
     timeScaleHeight
   ]);
-  const visibleChunkIndices = useVisibleChunkIndices(widthX, import_core4.MAX_CANVAS_WIDTH);
+  const visibleChunkIndices = useVisibleChunkIndices(widthX, import_core3.MAX_CANVAS_WIDTH);
   const visibleChunks = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core4.MAX_CANVAS_WIDTH;
-    const chunkWidth = Math.min(widthX - chunkLeft, import_core4.MAX_CANVAS_WIDTH);
+    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
+    const chunkWidth = Math.min(widthX - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       TimeTickChunk,
       {
@@ -2808,14 +2819,14 @@ var TimeScale = (props) => {
       `timescale-${i}`
     );
   });
-  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core4.MAX_CANVAS_WIDTH : 0;
-  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core4.MAX_CANVAS_WIDTH : Infinity;
+  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core3.MAX_CANVAS_WIDTH : 0;
+  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core3.MAX_CANVAS_WIDTH : Infinity;
   const visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = chunkIdx * import_core4.MAX_CANVAS_WIDTH;
+      const chunkLeft = chunkIdx * import_core3.MAX_CANVAS_WIDTH;
       const chunkWidth = canvas.width / devicePixelRatio;
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -2928,7 +2939,7 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = (0, import_react20.useContext)(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = (0, import_react21.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     StyledTimeScale,
@@ -3159,7 +3170,7 @@ var ButtonGroup = import_styled_components26.default.div`
 
 // src/components/TrackControls/CloseButton.tsx
 var import_styled_components27 = __toESM(require("styled-components"));
-var import_react21 = require("@phosphor-icons/react");
+var import_react22 = require("@phosphor-icons/react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var StyledCloseButton = import_styled_components27.default.button`
   position: absolute;
@@ -3184,7 +3195,7 @@ var StyledCloseButton = import_styled_components27.default.button`
     color: #dc3545;
   }
 `;
-var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react21.X, { size: 12, weight: "bold" }) });
+var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react22.X, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 var import_styled_components28 = __toESM(require("styled-components"));
@@ -3219,24 +3230,24 @@ var Header = import_styled_components29.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react22 = require("@phosphor-icons/react");
+var import_react23 = require("@phosphor-icons/react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react22.SpeakerLowIcon, { weight: "light", ...props });
+var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react23.SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
-var import_react23 = require("@phosphor-icons/react");
+var import_react24 = require("@phosphor-icons/react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react23.SpeakerHighIcon, { weight: "light", ...props });
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react24.SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
-var import_react24 = require("@phosphor-icons/react");
+var import_react25 = require("@phosphor-icons/react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react24.TrashIcon, { weight: "light", ...props });
+var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react25.TrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/DotsIcon.tsx
-var import_react25 = require("@phosphor-icons/react");
+var import_react26 = require("@phosphor-icons/react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react25.DotsThreeIcon, { weight: "bold", ...props });
+var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react26.DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
@@ -3304,7 +3315,7 @@ var SliderWrapper = import_styled_components31.default.label`
 `;
 
 // src/components/TrackMenu.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_styled_components32 = __toESM(require("styled-components"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -3346,13 +3357,13 @@ var Divider = import_styled_components32.default.hr`
   margin: 0.35rem 0;
 `;
 var TrackMenu = ({ items: itemsProp }) => {
-  const [open, setOpen] = (0, import_react26.useState)(false);
+  const [open, setOpen] = (0, import_react27.useState)(false);
   const close = () => setOpen(false);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
-  const [dropdownPos, setDropdownPos] = (0, import_react26.useState)({ top: 0, left: 0 });
-  const buttonRef = (0, import_react26.useRef)(null);
-  const dropdownRef = (0, import_react26.useRef)(null);
-  (0, import_react26.useEffect)(() => {
+  const [dropdownPos, setDropdownPos] = (0, import_react27.useState)({ top: 0, left: 0 });
+  const buttonRef = (0, import_react27.useRef)(null);
+  const dropdownRef = (0, import_react27.useRef)(null);
+  (0, import_react27.useEffect)(() => {
     if (open && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -3361,7 +3372,7 @@ var TrackMenu = ({ items: itemsProp }) => {
       });
     }
   }, [open]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3395,7 +3406,7 @@ var TrackMenu = ({ items: itemsProp }) => {
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react26.default.Fragment, { children: [
+          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react27.default.Fragment, { children: [
             index > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
             item.content
           ] }, item.id))