@waveform-playlist/ui-components 7.1.1 → 7.1.3

package/dist/index.js

@@ -51,6 +51,7 @@ __export(index_exports, {
   ClipBoundary: () => ClipBoundary,
   ClipHeader: () => ClipHeader,
   ClipHeaderPresentational: () => ClipHeaderPresentational,
+  ClipViewportOriginProvider: () => ClipViewportOriginProvider,
   CloseButton: () => CloseButton,
   Controls: () => Controls,
   DevicePixelRatioProvider: () => DevicePixelRatioProvider,
@@ -60,7 +61,6 @@ __export(index_exports, {
   InlineLabel: () => InlineLabel,
   LoopRegion: () => LoopRegion,
   LoopRegionMarkers: () => LoopRegionMarkers,
-  MAX_CANVAS_WIDTH: () => MAX_CANVAS_WIDTH,
   MasterVolumeControl: () => MasterVolumeControl,
   Playhead: () => Playhead,
   PlayheadWithMarker: () => PlayheadWithMarker,
@@ -101,6 +101,7 @@ __export(index_exports, {
   samplesToSeconds: () => samplesToSeconds,
   secondsToPixels: () => secondsToPixels,
   secondsToSamples: () => secondsToSamples,
+  useClipViewportOrigin: () => useClipViewportOrigin,
   useDevicePixelRatio: () => useDevicePixelRatio,
   usePlaylistInfo: () => usePlaylistInfo,
   usePlayoutStatus: () => usePlayoutStatus,
@@ -109,6 +110,7 @@ __export(index_exports, {
   useScrollViewportSelector: () => useScrollViewportSelector,
   useTheme: () => useTheme2,
   useTrackControls: () => useTrackControls,
+  useVisibleChunkIndices: () => useVisibleChunkIndices,
   waveformColorToCss: () => waveformColorToCss
 });
 module.exports = __toCommonJS(index_exports);
@@ -123,10 +125,7 @@ var PositionDisplay = import_styled_components.default.span`
   color: ${(props) => props.theme?.textColor || "#333"};
   user-select: none;
 `;
-var AudioPosition = ({
-  formattedTime,
-  className
-}) => {
+var AudioPosition = ({ formattedTime, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PositionDisplay, { className, "aria-label": "Audio position", children: formattedTime });
 };
 
@@ -146,7 +145,9 @@ var BaseButton = import_styled_components2.default.button`
   border-radius: ${(props) => props.theme.borderRadius};
   cursor: pointer;
   outline: none;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
 
   &:hover:not(:disabled) {
@@ -243,7 +244,9 @@ var BaseInput = import_styled_components5.default.input`
   border: 1px solid ${(props) => props.theme.inputBorder};
   border-radius: ${(props) => props.theme.borderRadius};
   outline: none;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 
   &::placeholder {
     color: ${(props) => props.theme.inputPlaceholder};
@@ -311,7 +314,9 @@ var BaseSelect = import_styled_components7.default.select`
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 
   &:focus {
     border-color: ${(props) => props.theme.inputFocusBorder};
@@ -357,7 +362,9 @@ var BaseSlider = import_styled_components8.default.input.attrs({ type: "range" }
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    transition:
+      transform 0.15s ease,
+      box-shadow 0.15s ease;
   }
 
   &::-webkit-slider-thumb:hover {
@@ -374,7 +381,9 @@ var BaseSlider = import_styled_components8.default.input.attrs({ type: "range" }
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    transition:
+      transform 0.15s ease,
+      box-shadow 0.15s ease;
   }
 
   &::-moz-range-thumb:hover {
@@ -442,7 +451,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/wfpl-theme.ts
@@ -637,10 +646,7 @@ var ViewportStoreContext = (0, import_react.createContext)(null);
 var EMPTY_SUBSCRIBE = () => () => {
 };
 var NULL_SNAPSHOT = () => null;
-var ScrollViewportProvider = ({
-  containerRef,
-  children
-}) => {
+var ScrollViewportProvider = ({ containerRef, children }) => {
   const storeRef = (0, import_react.useRef)(null);
   if (storeRef.current === null) {
     storeRef.current = new ViewportStore();
@@ -695,12 +701,64 @@ function useScrollViewportSelector(selector) {
     () => selector(null)
   );
 }
+function useVisibleChunkIndices(totalWidth, chunkWidth, originX = 0) {
+  const visibleChunkKey = useScrollViewportSelector((viewport) => {
+    const totalChunks = Math.ceil(totalWidth / chunkWidth);
+    const indices = [];
+    for (let i = 0; i < totalChunks; i++) {
+      const chunkLeft = i * chunkWidth;
+      const thisChunkWidth = Math.min(totalWidth - chunkLeft, chunkWidth);
+      if (viewport) {
+        const chunkLeftGlobal = originX + chunkLeft;
+        const chunkEndGlobal = chunkLeftGlobal + thisChunkWidth;
+        if (chunkEndGlobal <= viewport.visibleStart || chunkLeftGlobal >= viewport.visibleEnd) {
+          continue;
+        }
+      }
+      indices.push(i);
+    }
+    return indices.join(",");
+  });
+  return (0, import_react.useMemo)(
+    () => visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [],
+    [visibleChunkKey]
+  );
+}
 
-// src/constants.ts
-var MAX_CANVAS_WIDTH = 1e3;
+// src/contexts/ClipViewportOrigin.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ClipViewportOriginContext = (0, import_react2.createContext)(0);
+var ClipViewportOriginProvider = ({
+  originX,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClipViewportOriginContext.Provider, { value: originX, children });
+var useClipViewportOrigin = () => (0, import_react2.useContext)(ClipViewportOriginContext);
+
+// src/hooks/useChunkedCanvasRefs.ts
+var import_react3 = require("react");
+function useChunkedCanvasRefs() {
+  const canvasMapRef = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const canvasRef = (0, import_react3.useCallback)((canvas) => {
+    if (canvas !== null) {
+      const idx = parseInt(canvas.dataset.index, 10);
+      canvasMapRef.current.set(idx, canvas);
+    }
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    const map = canvasMapRef.current;
+    for (const [idx, canvas] of map.entries()) {
+      if (!canvas.isConnected) {
+        map.delete(idx);
+      }
+    }
+  });
+  return { canvasRef, canvasMapRef };
+}
 
 // src/components/Channel.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_core = require("@waveform-playlist/core");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
     return color;
@@ -760,49 +818,13 @@ var Channel = (props) => {
     transparentBackground = false,
     drawMode = "inverted"
   } = props;
-  const canvasesRef = (0, import_react2.useRef)([]);
-  const visibleChunkKey = useScrollViewportSelector((viewport) => {
-    const totalChunks = Math.ceil(length / MAX_CANVAS_WIDTH);
-    const indices = [];
-    for (let i = 0; i < totalChunks; i++) {
-      const chunkLeft = i * MAX_CANVAS_WIDTH;
-      const chunkWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
-      if (viewport) {
-        const chunkEnd = chunkLeft + chunkWidth;
-        if (chunkEnd <= viewport.visibleStart || chunkLeft >= viewport.visibleEnd) {
-          continue;
-        }
-      }
-      indices.push(i);
-    }
-    return indices.join(",");
-  });
-  const visibleChunkIndices = visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [];
-  const canvasRef = (0, import_react2.useCallback)(
-    (canvas) => {
-      if (canvas !== null) {
-        const index2 = parseInt(canvas.dataset.index, 10);
-        canvasesRef.current[index2] = canvas;
-      }
-    },
-    []
-  );
-  (0, import_react2.useEffect)(() => {
-    const canvases = canvasesRef.current;
-    for (let i = canvases.length - 1; i >= 0; i--) {
-      if (canvases[i] && !canvases[i].isConnected) {
-        delete canvases[i];
-      }
-    }
-  });
-  (0, import_react2.useLayoutEffect)(() => {
-    const canvases = canvasesRef.current;
+  const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
+  const clipOriginX = useClipViewportOrigin();
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core.MAX_CANVAS_WIDTH, clipOriginX);
+  (0, import_react4.useLayoutEffect)(() => {
     const step = barWidth + barGap;
-    for (let i = 0; i < canvases.length; i++) {
-      const canvas = canvases[i];
-      if (!canvas) continue;
-      const canvasIdx = parseInt(canvas.dataset.index, 10);
-      const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
+    for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
+      const globalPixelOffset = canvasIdx * import_core.MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       const h2 = Math.floor(waveHeight / 2);
       const maxValue = 2 ** (bits - 1);
@@ -818,12 +840,7 @@ var Channel = (props) => {
         } else {
           fillColor = waveOutlineColor;
         }
-        ctx.fillStyle = createCanvasFillStyle(
-          ctx,
-          fillColor,
-          canvasWidth,
-          waveHeight
-        );
+        ctx.fillStyle = createCanvasFillStyle(ctx, fillColor, canvasWidth, waveHeight);
         const canvasStartGlobal = globalPixelOffset;
         const canvasEndGlobal = globalPixelOffset + canvasWidth;
         const firstBarGlobal = Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
@@ -847,6 +864,7 @@ var Channel = (props) => {
       }
     }
   }, [
+    canvasMapRef,
     data,
     bits,
     waveHeight,
@@ -857,12 +875,12 @@ var Channel = (props) => {
     barWidth,
     barGap,
     drawMode,
-    visibleChunkKey
+    visibleChunkIndices
   ]);
   const waveforms = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    const chunkLeft = i * import_core.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core.MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Waveform,
       {
         $cssWidth: currentWidth,
@@ -878,7 +896,7 @@ var Channel = (props) => {
   });
   const bgColor = waveFillColor;
   const backgroundCss = transparentBackground ? "transparent" : waveformColorToCss(bgColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Wrapper,
     {
       $index: index,
@@ -892,8 +910,8 @@ var Channel = (props) => {
 };
 
 // src/components/ErrorBoundary.tsx
-var import_react3 = __toESM(require("react"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var errorContainerStyle = {
   padding: "16px",
   background: "#1a1a2e",
@@ -907,7 +925,7 @@ var errorContainerStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var PlaylistErrorBoundary = class extends import_react3.default.Component {
+var PlaylistErrorBoundary = class extends import_react5.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -923,7 +941,7 @@ var PlaylistErrorBoundary = class extends import_react3.default.Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
     }
     return this.props.children;
   }
@@ -931,12 +949,12 @@ var PlaylistErrorBoundary = class extends import_react3.default.Component {
 
 // src/components/Clip.tsx
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_core = require("@dnd-kit/core");
+var import_core2 = require("@dnd-kit/core");
 var import_utilities = require("@dnd-kit/utilities");
 
 // src/components/ClipHeader.tsx
 var import_styled_components10 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var CLIP_HEADER_HEIGHT = 22;
 var HeaderContainer = import_styled_components10.default.div`
   position: relative;
@@ -976,15 +994,7 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    HeaderContainer,
-    {
-      $isDragging: false,
-      $interactive: false,
-      $isSelected: isSelected,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TrackName, { children: trackName })
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderContainer, { $isDragging: false, $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName }) });
 };
 var ClipHeader = ({
   clipId,
@@ -996,16 +1006,10 @@ var ClipHeader = ({
   dragHandleProps
 }) => {
   if (disableDrag || !dragHandleProps) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      ClipHeaderPresentational,
-      {
-        trackName,
-        isSelected
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ClipHeaderPresentational, { trackName, isSelected });
   }
   const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     HeaderContainer,
     {
       ref: setActivatorNodeRef,
@@ -1014,15 +1018,15 @@ var ClipHeader = ({
       $isSelected: isSelected,
       ...listeners,
       ...attributes,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TrackName, { children: trackName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName })
     }
   );
 };
 
 // src/components/ClipBoundary.tsx
-var import_react4 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CLIP_BOUNDARY_WIDTH = 8;
 var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = import_styled_components11.default.div`
@@ -1062,12 +1066,12 @@ var ClipBoundary = ({
   dragHandleProps,
   touchOptimized = false
 }) => {
-  const [isHovered, setIsHovered] = import_react4.default.useState(false);
+  const [isHovered, setIsHovered] = import_react6.default.useState(false);
   if (!dragHandleProps) {
     return null;
   }
   const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     BoundaryContainer,
     {
       ref: setActivatorNodeRef,
@@ -1087,7 +1091,7 @@ var ClipBoundary = ({
 
 // src/components/FadeOverlay.tsx
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FadeContainer = import_styled_components12.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1144,17 +1148,11 @@ var FadeOverlay = ({
   const theme = (0, import_styled_components12.useTheme)();
   if (width < 1) return null;
   const fillColor = color || theme?.fadeOverlayColor || "rgba(0, 0, 0, 0.4)";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "path",
-    {
-      d: generateFadePath(width, 100, curveType),
-      fill: fillColor
-    }
-  ) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: generateFadePath(width, 100, curveType), fill: fillColor }) }) });
 };
 
 // src/components/Clip.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ClipContainer = import_styled_components13.default.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
     left: `${props.$left}px`,
@@ -1207,7 +1205,7 @@ 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_core.useDraggable)({
+  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, isDragging } = (0, import_core2.useDraggable)({
     id: draggableId,
     data: { clipId, trackIndex, clipIndex },
     disabled: !enableDrag
@@ -1218,7 +1216,7 @@ var Clip = ({
     listeners: leftBoundaryListeners,
     setActivatorNodeRef: setLeftBoundaryActivatorRef,
     isDragging: isLeftBoundaryDragging
-  } = (0, import_core.useDraggable)({
+  } = (0, import_core2.useDraggable)({
     id: leftBoundaryId,
     data: { clipId, trackIndex, clipIndex, boundary: "left" },
     disabled: !enableDrag
@@ -1229,7 +1227,7 @@ var Clip = ({
     listeners: rightBoundaryListeners,
     setActivatorNodeRef: setRightBoundaryActivatorRef,
     isDragging: isRightBoundaryDragging
-  } = (0, import_core.useDraggable)({
+  } = (0, import_core2.useDraggable)({
     id: rightBoundaryId,
     data: { clipId, trackIndex, clipIndex, boundary: "right" },
     disabled: !enableDrag
@@ -1239,7 +1237,7 @@ var Clip = ({
     zIndex: isDragging ? 100 : void 0
     // Below controls (z-index: 999) but above other clips
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     ClipContainer,
     {
       ref: setNodeRef,
@@ -1252,7 +1250,7 @@ var Clip = ({
       "data-track-id": trackId,
       onMouseDown,
       children: [
-        showHeader && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           ClipHeader,
           {
             clipId,
@@ -1264,9 +1262,9 @@ var Clip = ({
             dragHandleProps: enableDrag ? { attributes, listeners, setActivatorNodeRef } : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClipViewportOriginProvider, { originX: left, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
           children,
-          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             FadeOverlay,
             {
               left: 0,
@@ -1275,7 +1273,7 @@ var Clip = ({
               curveType: fadeIn.type
             }
           ),
-          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             FadeOverlay,
             {
               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -1284,9 +1282,9 @@ var Clip = ({
               curveType: fadeOut.type
             }
           )
-        ] }),
-        showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ] }) }),
+        showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             ClipBoundary,
             {
               clipId,
@@ -1302,7 +1300,7 @@ var Clip = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             ClipBoundary,
             {
               clipId,
@@ -1326,7 +1324,7 @@ var Clip = ({
 
 // src/components/MasterVolumeControl.tsx
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var VolumeContainer = import_styled_components14.default.div`
   display: inline-flex;
   align-items: center;
@@ -1348,9 +1346,9 @@ var MasterVolumeControl = ({
   const handleChange = (e) => {
     onChange(parseFloat(e.target.value) / 100);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(VolumeContainer, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(VolumeContainer, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       VolumeSlider,
       {
         min: "0",
@@ -1365,9 +1363,9 @@ var MasterVolumeControl = ({
 };
 
 // src/components/Playhead.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
@@ -1384,7 +1382,7 @@ var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlayheadLine, { $position: position, $color: color });
 };
 var PlayheadWithMarkerContainer = import_styled_components15.default.div`
   position: absolute;
@@ -1424,9 +1422,9 @@ var PlayheadWithMarker = ({
   controlsOffset,
   getAudioContextTime
 }) => {
-  const containerRef = (0, import_react5.useRef)(null);
-  const animationFrameRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const containerRef = (0, import_react7.useRef)(null);
+  const animationFrameRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1454,24 +1452,33 @@ var PlayheadWithMarker = ({
         animationFrameRef.current = null;
       }
     };
-  }, [isPlaying, sampleRate, samplesPerPixel, controlsOffset, currentTimeRef, playbackStartTimeRef, audioStartPositionRef, getAudioContextTime]);
-  (0, import_react5.useEffect)(() => {
+  }, [
+    isPlaying,
+    sampleRate,
+    samplesPerPixel,
+    controlsOffset,
+    currentTimeRef,
+    playbackStartTimeRef,
+    audioStartPositionRef,
+    getAudioContextTime
+  ]);
+  (0, import_react7.useEffect)(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
       containerRef.current.style.transform = `translate3d(${pos}px, 0, 0)`;
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkerLine, { $color: color })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkerTriangle, { $color: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkerLine, { $color: color })
   ] });
 };
 
 // src/components/Playlist.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
-var import_react6 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Wrapper2 = import_styled_components16.default.div`
   overflow-y: hidden;
   overflow-x: auto;
@@ -1525,41 +1532,37 @@ var Playlist = ({
   isSelecting,
   "data-playlist-state": playlistState
 }) => {
-  const wrapperRef = (0, import_react6.useRef)(null);
-  const handleRef = (0, import_react6.useCallback)((el) => {
-    wrapperRef.current = el;
-    scrollContainerRef?.(el);
-  }, [scrollContainerRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: handleRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollViewportProvider, { containerRef: wrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    ScrollContainer,
-    {
-      $backgroundColor: backgroundColor,
-      $width: scrollContainerWidth,
-      children: [
-        timescale && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
-          children,
-          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            ClickOverlay,
-            {
-              $controlsWidth: controlsWidth,
-              $isSelecting: isSelecting,
-              onClick: onTracksClick,
-              onMouseDown: onTracksMouseDown,
-              onMouseMove: onTracksMouseMove,
-              onMouseUp: onTracksMouseUp
-            }
-          )
-        ] })
-      ]
-    }
-  ) }) });
+  const wrapperRef = (0, import_react8.useRef)(null);
+  const handleRef = (0, import_react8.useCallback)(
+    (el) => {
+      wrapperRef.current = el;
+      scrollContainerRef?.(el);
+    },
+    [scrollContainerRef]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: handleRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollViewportProvider, { containerRef: wrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ScrollContainer, { $backgroundColor: backgroundColor, $width: scrollContainerWidth, children: [
+    timescale && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
+      children,
+      (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        ClickOverlay,
+        {
+          $controlsWidth: controlsWidth,
+          $isSelecting: isSelecting,
+          onClick: onTracksClick,
+          onMouseDown: onTracksMouseDown,
+          onMouseMove: onTracksMouseMove,
+          onMouseUp: onTracksMouseUp
+        }
+      )
+    ] })
+  ] }) }) });
 };
 var StyledPlaylist = (0, import_styled_components16.withTheme)(Playlist);
 
 // src/components/Selection.tsx
 var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SelectionOverlay = import_styled_components17.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1583,13 +1586,13 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var LoopRegionOverlayDiv = import_styled_components18.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1638,8 +1641,8 @@ var LoopRegion = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1648,7 +1651,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       LoopMarker,
       {
         $left: startPosition,
@@ -1657,7 +1660,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1738,71 +1741,77 @@ var LoopRegionMarkers = ({
   minPosition = 0,
   maxPosition = Infinity
 }) => {
-  const [draggingMarker, setDraggingMarker] = (0, import_react7.useState)(null);
-  const dragStartX = (0, import_react7.useRef)(0);
-  const dragStartPosition = (0, import_react7.useRef)(0);
-  const dragStartEnd = (0, import_react7.useRef)(0);
+  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 width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = (0, import_react7.useCallback)((e, marker) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDraggingMarker(marker);
-    dragStartX.current = e.clientX;
-    dragStartPosition.current = marker === "start" ? startPosition : endPosition;
-    const handleMouseMove = (moveEvent) => {
-      const delta = moveEvent.clientX - dragStartX.current;
-      const newPosition = dragStartPosition.current + delta;
-      if (marker === "start") {
-        const clampedPosition = Math.max(minPosition, Math.min(endPosition - 10, newPosition));
-        onLoopStartChange?.(clampedPosition);
-      } else {
-        const clampedPosition = Math.max(startPosition + 10, Math.min(maxPosition, newPosition));
-        onLoopEndChange?.(clampedPosition);
-      }
-    };
-    const handleMouseUp = () => {
-      setDraggingMarker(null);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]);
-  const handleRegionMouseDown = (0, import_react7.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDraggingMarker("region");
-    dragStartX.current = e.clientX;
-    dragStartPosition.current = startPosition;
-    dragStartEnd.current = endPosition;
-    const regionWidth = endPosition - startPosition;
-    const handleMouseMove = (moveEvent) => {
-      const delta = moveEvent.clientX - dragStartX.current;
-      let newStart = dragStartPosition.current + delta;
-      let newEnd = dragStartEnd.current + delta;
-      if (newStart < minPosition) {
-        newStart = minPosition;
-        newEnd = minPosition + regionWidth;
-      }
-      if (newEnd > maxPosition) {
-        newEnd = maxPosition;
-        newStart = maxPosition - regionWidth;
-      }
-      onLoopRegionMove?.(newStart, newEnd);
-    };
-    const handleMouseUp = () => {
-      setDraggingMarker(null);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [startPosition, endPosition, minPosition, maxPosition, onLoopRegionMove]);
+  const handleMarkerMouseDown = (0, import_react9.useCallback)(
+    (e, marker) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDraggingMarker(marker);
+      dragStartX.current = e.clientX;
+      dragStartPosition.current = marker === "start" ? startPosition : endPosition;
+      const handleMouseMove = (moveEvent) => {
+        const delta = moveEvent.clientX - dragStartX.current;
+        const newPosition = dragStartPosition.current + delta;
+        if (marker === "start") {
+          const clampedPosition = Math.max(minPosition, Math.min(endPosition - 10, newPosition));
+          onLoopStartChange?.(clampedPosition);
+        } else {
+          const clampedPosition = Math.max(startPosition + 10, Math.min(maxPosition, newPosition));
+          onLoopEndChange?.(clampedPosition);
+        }
+      };
+      const handleMouseUp = () => {
+        setDraggingMarker(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]
+  );
+  const handleRegionMouseDown = (0, import_react9.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDraggingMarker("region");
+      dragStartX.current = e.clientX;
+      dragStartPosition.current = startPosition;
+      dragStartEnd.current = endPosition;
+      const regionWidth = endPosition - startPosition;
+      const handleMouseMove = (moveEvent) => {
+        const delta = moveEvent.clientX - dragStartX.current;
+        let newStart = dragStartPosition.current + delta;
+        let newEnd = dragStartEnd.current + delta;
+        if (newStart < minPosition) {
+          newStart = minPosition;
+          newEnd = minPosition + regionWidth;
+        }
+        if (newEnd > maxPosition) {
+          newEnd = maxPosition;
+          newStart = maxPosition - regionWidth;
+        }
+        onLoopRegionMove?.(newStart, newEnd);
+      };
+      const handleMouseUp = () => {
+        setDraggingMarker(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [startPosition, endPosition, minPosition, maxPosition, onLoopRegionMove]
+  );
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1813,7 +1822,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1824,7 +1833,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1859,46 +1868,49 @@ var TimescaleLoopRegion = ({
   maxPosition = Infinity,
   controlsOffset = 0
 }) => {
-  const [, setIsCreating] = (0, import_react7.useState)(false);
-  const createStartX = (0, import_react7.useRef)(0);
-  const containerRef = (0, import_react7.useRef)(null);
+  const [, setIsCreating] = (0, import_react9.useState)(false);
+  const createStartX = (0, import_react9.useRef)(0);
+  const containerRef = (0, import_react9.useRef)(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = (0, import_react7.useCallback)((e) => {
-    const target = e.target;
-    if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
-      return;
-    }
-    e.preventDefault();
-    setIsCreating(true);
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const clickX = e.clientX - rect.left;
-    const clampedX = Math.max(minPosition, Math.min(maxPosition, clickX));
-    createStartX.current = clampedX;
-    onLoopRegionChange?.(clampedX, clampedX);
-    const handleMouseMove = (moveEvent) => {
-      const currentX = moveEvent.clientX - rect.left;
-      const clampedCurrentX = Math.max(minPosition, Math.min(maxPosition, currentX));
-      const newStart = Math.min(createStartX.current, clampedCurrentX);
-      const newEnd = Math.max(createStartX.current, clampedCurrentX);
-      onLoopRegionChange?.(newStart, newEnd);
-    };
-    const handleMouseUp = () => {
-      setIsCreating(false);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [minPosition, maxPosition, onLoopRegionChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const handleBackgroundMouseDown = (0, import_react9.useCallback)(
+    (e) => {
+      const target = e.target;
+      if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
+        return;
+      }
+      e.preventDefault();
+      setIsCreating(true);
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const clickX = e.clientX - rect.left;
+      const clampedX = Math.max(minPosition, Math.min(maxPosition, clickX));
+      createStartX.current = clampedX;
+      onLoopRegionChange?.(clampedX, clampedX);
+      const handleMouseMove = (moveEvent) => {
+        const currentX = moveEvent.clientX - rect.left;
+        const clampedCurrentX = Math.max(minPosition, Math.min(maxPosition, currentX));
+        const newStart = Math.min(createStartX.current, clampedCurrentX);
+        const newEnd = Math.max(createStartX.current, clampedCurrentX);
+        onLoopRegionChange?.(newStart, newEnd);
+      };
+      const handleMouseUp = () => {
+        setIsCreating(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [minPosition, maxPosition, onLoopRegionChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     TimescaleLoopCreator,
     {
       ref: containerRef,
       $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1917,10 +1929,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // src/components/TimeInput.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1970,7 +1982,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var TimeInput = ({
   id,
   label,
@@ -1980,8 +1992,8 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react8.useState)("");
-  (0, import_react8.useEffect)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react10.useState)("");
+  (0, import_react10.useEffect)(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -2001,9 +2013,9 @@ var TimeInput = ({
       e.currentTarget.blur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       BaseInput,
       {
         type: "text",
@@ -2020,15 +2032,15 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = (0, import_react9.useState)("hh:mm:ss.uuu");
-  (0, import_react9.useEffect)(() => {
+  const [timeFormat, setTimeFormat] = (0, import_react11.useState)("hh:mm:ss.uuu");
+  (0, import_react11.useEffect)(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -2053,8 +2065,8 @@ var SelectionTimeInputs = ({
       onSelectionChange(selectionStart, value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       TimeInput,
       {
         id: "audio_start",
@@ -2065,7 +2077,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       TimeInput,
       {
         id: "audio_end",
@@ -2080,14 +2092,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-var import_react10 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react10.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react12.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react10.useState)(getScale());
+  const [scale, setScale] = (0, import_react12.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -2095,13 +2107,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react10.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react12.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react11 = require("react");
-var PlaylistInfoContext = (0, import_react11.createContext)({
+var import_react13 = require("react");
+var PlaylistInfoContext = (0, import_react13.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -2115,22 +2127,22 @@ var PlaylistInfoContext = (0, import_react11.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react11.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react13.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_styled_components19 = require("styled-components");
-var useTheme2 = () => (0, import_react12.useContext)(import_styled_components19.ThemeContext);
+var useTheme2 = () => (0, import_react14.useContext)(import_styled_components19.ThemeContext);
 
 // src/contexts/TrackControls.tsx
-var import_react13 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var TrackControlsContext = (0, import_react13.createContext)(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react13.Fragment, {}));
-var useTrackControls = () => (0, import_react13.useContext)(TrackControlsContext);
+var import_react15 = 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);
 
 // src/contexts/Playout.tsx
-var import_react14 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -2141,8 +2153,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react14.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react14.createContext)({
+var PlayoutStatusContext = (0, import_react16.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react16.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2151,23 +2163,24 @@ var PlayoutStatusUpdateContext = (0, import_react14.createContext)({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  const [isPlaying, setIsPlaying] = (0, import_react14.useState)(defaultIsPlaying);
-  const [progress, setProgress] = (0, import_react14.useState)(defaultProgress);
-  const [selectionStart, setSelectionStart] = (0, import_react14.useState)(defaultSelectionStart);
-  const [selectionEnd, setSelectionEnd] = (0, import_react14.useState)(defaultSelectionEnd);
+  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 setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  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_react14.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react14.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react16.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react16.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_core3 = 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) => ({
   style: {
@@ -2220,60 +2233,52 @@ var SpectrogramChannel = ({
   onCanvasesReady
 }) => {
   const channelIndex = channelIndexProp ?? index;
-  const canvasesRef = (0, import_react15.useRef)([]);
-  const registeredIdsRef = (0, import_react15.useRef)([]);
-  const transferredCanvasesRef = (0, import_react15.useRef)(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = (0, import_react15.useRef)(workerApi);
-  const onCanvasesReadyRef = (0, import_react15.useRef)(onCanvasesReady);
+  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 isWorkerMode = !!(workerApi && clipId);
-  const visibleChunkKey = useScrollViewportSelector((viewport) => {
-    const totalChunks = Math.ceil(length / MAX_CANVAS_WIDTH);
-    const indices = [];
-    for (let i = 0; i < totalChunks; i++) {
-      const chunkLeft = i * MAX_CANVAS_WIDTH;
-      const chunkWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
-      if (viewport) {
-        const chunkEnd = chunkLeft + chunkWidth;
-        if (chunkEnd <= viewport.visibleStart || chunkLeft >= viewport.visibleEnd) {
-          continue;
-        }
-      }
-      indices.push(i);
-    }
-    return indices.join(",");
-  });
-  const visibleChunkIndices = visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [];
-  const canvasRef = (0, import_react15.useCallback)(
-    (canvas) => {
-      if (canvas !== null) {
-        const idx = parseInt(canvas.dataset.index, 10);
-        canvasesRef.current[idx] = canvas;
-      }
-    },
-    []
-  );
+  const clipOriginX = useClipViewportOrigin();
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.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_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
-    const canvases2 = canvasesRef.current;
+    const previousCount = registeredIdsRef.current.length;
+    const remaining = [];
+    for (const id of registeredIdsRef.current) {
+      const match = id.match(/chunk(\d+)$/);
+      if (!match) {
+        remaining.push(id);
+        continue;
+      }
+      const chunkIdx = parseInt(match[1], 10);
+      const canvas = canvasMapRef.current.get(chunkIdx);
+      if (canvas && canvas.isConnected) {
+        remaining.push(id);
+      } else {
+        try {
+          currentWorkerApi.unregisterCanvas(id);
+        } catch (err) {
+          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+        }
+      }
+    }
+    registeredIdsRef.current = remaining;
     const newIds = [];
-    const newWidths = [];
-    for (let i = 0; i < canvases2.length; i++) {
-      const canvas = canvases2[i];
-      if (!canvas) continue;
+    for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       if (transferredCanvasesRef.current.has(canvas)) continue;
-      const canvasIdx = parseInt(canvas.dataset.index, 10);
       const canvasId = `${clipId}-ch${channelIndex}-chunk${canvasIdx}`;
       let offscreen;
       try {
@@ -2286,7 +2291,6 @@ var SpectrogramChannel = ({
       try {
         currentWorkerApi.registerCanvas(canvasId, offscreen);
         newIds.push(canvasId);
-        newWidths.push(Math.min(length - canvasIdx * MAX_CANVAS_WIDTH, MAX_CANVAS_WIDTH));
       } catch (err) {
         console.warn(`[spectrogram] registerCanvas failed for ${canvasId}:`, err);
         continue;
@@ -2294,35 +2298,23 @@ var SpectrogramChannel = ({
     }
     if (newIds.length > 0) {
       registeredIdsRef.current = [...registeredIdsRef.current, ...newIds];
-      onCanvasesReadyRef.current?.(newIds, newWidths);
     }
-  }, [isWorkerMode, clipId, channelIndex, length, visibleChunkKey]);
-  (0, import_react15.useEffect)(() => {
-    if (!isWorkerMode) return;
-    const currentWorkerApi = workerApiRef.current;
-    if (!currentWorkerApi) return;
-    const remaining = [];
-    for (const id of registeredIdsRef.current) {
-      const match = id.match(/chunk(\d+)$/);
-      if (!match) {
-        remaining.push(id);
-        continue;
-      }
-      const chunkIdx = parseInt(match[1], 10);
-      const canvas = canvasesRef.current[chunkIdx];
-      if (canvas && canvas.isConnected) {
-        remaining.push(id);
-      } else {
-        try {
-          currentWorkerApi.unregisterCanvas(id);
-        } catch (err) {
-          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+    const canvasSetChanged = newIds.length > 0 || remaining.length < previousCount;
+    if (canvasSetChanged) {
+      const allIds = registeredIdsRef.current;
+      const allWidths = allIds.map((id) => {
+        const match = id.match(/chunk(\d+)$/);
+        if (!match) {
+          console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
+          return import_core3.MAX_CANVAS_WIDTH;
         }
-      }
+        const chunkIdx = parseInt(match[1], 10);
+        return Math.min(length - chunkIdx * import_core3.MAX_CANVAS_WIDTH, import_core3.MAX_CANVAS_WIDTH);
+      });
+      onCanvasesReadyRef.current?.(allIds, allWidths);
     }
-    registeredIdsRef.current = remaining;
-  });
-  (0, import_react15.useEffect)(() => {
+  }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
+  (0, import_react17.useEffect)(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2336,17 +2328,20 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     if (isWorkerMode || !data) return;
-    const canvases2 = canvasesRef.current;
-    const { frequencyBinCount, frameCount, hopSize, sampleRate, gainDb, rangeDb: rawRangeDb } = data;
+    const {
+      frequencyBinCount,
+      frameCount,
+      hopSize,
+      sampleRate,
+      gainDb,
+      rangeDb: rawRangeDb
+    } = data;
     const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
     const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
-    for (let i = 0; i < canvases2.length; i++) {
-      const canvas = canvases2[i];
-      if (!canvas) continue;
-      const canvasIdx = parseInt(canvas.dataset.index, 10);
-      const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
+    for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
+      const globalPixelOffset = canvasIdx * import_core3.MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
       const canvasWidth = canvas.width / devicePixelRatio;
@@ -2406,11 +2401,25 @@ var SpectrogramChannel = ({
         ctx.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height);
       }
     }
-  }, [isWorkerMode, data, length, waveHeight, devicePixelRatio, samplesPerPixel, lut, minFrequency, maxF, scaleFn, hasCustomFrequencyScale, visibleChunkKey]);
+  }, [
+    canvasMapRef,
+    isWorkerMode,
+    data,
+    length,
+    waveHeight,
+    devicePixelRatio,
+    samplesPerPixel,
+    lut,
+    minFrequency,
+    maxF,
+    scaleFn,
+    hasCustomFrequencyScale,
+    visibleChunkIndices
+  ]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       SpectrogramCanvas,
       {
         $cssWidth: currentWidth,
@@ -2424,11 +2433,11 @@ var SpectrogramChannel = ({
       `${length}-${i}`
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2453,7 +2462,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2474,8 +2483,8 @@ var SmartChannel = ({
   }
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2494,24 +2503,35 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        Channel,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "div",
         {
-          ...props,
-          index: 0,
-          waveOutlineColor,
-          waveFillColor,
-          waveHeight: halfHeight,
-          devicePixelRatio,
-          barWidth,
-          barGap,
-          transparentBackground,
-          drawMode
+          style: {
+            position: "absolute",
+            top: (props.index * 2 + 1) * halfHeight,
+            width: props.length,
+            height: halfHeight
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Channel,
+            {
+              ...props,
+              index: 0,
+              waveOutlineColor,
+              waveFillColor,
+              waveHeight: halfHeight,
+              devicePixelRatio,
+              barWidth,
+              barGap,
+              transparentBackground,
+              drawMode
+            }
+          )
         }
-      ) })
+      )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Channel,
     {
       ...props,
@@ -2528,9 +2548,9 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = import_styled_components21.default.div`
   position: sticky;
@@ -2580,12 +2600,12 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = (0, import_react16.useRef)(null);
+  const canvasRef = (0, import_react18.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_react16.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2611,8 +2631,19 @@ var SpectrogramLabels = ({
         ctx.fillText(text, padding, y);
       }
     }
-  }, [waveHeight, numChannels, frequencyScaleFn, minFrequency, maxFrequency, labelsColor, labelsBackground, devicePixelRatio, spectrogramHeight, clipHeaderOffset]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  }, [
+    waveHeight,
+    numChannels,
+    frequencyScaleFn,
+    minFrequency,
+    maxFrequency,
+    labelsColor,
+    labelsBackground,
+    devicePixelRatio,
+    spectrogramHeight,
+    clipHeaderOffset
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -2628,10 +2659,10 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react17 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
@@ -2655,7 +2686,8 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_core4 = require("@waveform-playlist/core");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
@@ -2706,21 +2738,15 @@ var TimeScale = (props) => {
     secondStep,
     renderTimestamp
   } = props;
-  const canvasRefsMap = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
+  const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const {
     sampleRate,
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = (0, import_react17.useContext)(PlaylistInfoContext);
+  } = (0, import_react19.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  const canvasRefCallback = (0, import_react17.useCallback)((canvas) => {
-    if (canvas !== null) {
-      const idx = parseInt(canvas.dataset.index, 10);
-      canvasRefsMap.current.set(idx, canvas);
-    }
-  }, []);
-  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react17.useMemo)(() => {
+  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react19.useMemo)(() => {
     const nextCanvasInfo = /* @__PURE__ */ new Map();
     const nextMarkers = [];
     const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
@@ -2731,7 +2757,7 @@ var TimeScale = (props) => {
       if (counter % marker === 0) {
         const timeMs = counter;
         const timestamp = formatTime2(timeMs);
-        const element = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react17.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+        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);
         nextMarkers.push({ pix, element });
         nextCanvasInfo.set(pix, timeScaleHeight);
       } else if (counter % bigStep === 0) {
@@ -2746,28 +2772,21 @@ var TimeScale = (props) => {
       canvasInfo: nextCanvasInfo,
       timeMarkersWithPositions: nextMarkers
     };
-  }, [duration, samplesPerPixel, sampleRate, marker, bigStep, secondStep, renderTimestamp, timeScaleHeight]);
-  const visibleChunkKey = useScrollViewportSelector((viewport) => {
-    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH);
-    const indices = [];
-    for (let i = 0; i < totalChunks; i++) {
-      const chunkLeft = i * MAX_CANVAS_WIDTH;
-      const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH);
-      if (viewport) {
-        const chunkEnd = chunkLeft + chunkWidth;
-        if (chunkEnd <= viewport.visibleStart || chunkLeft >= viewport.visibleEnd) {
-          continue;
-        }
-      }
-      indices.push(i);
-    }
-    return indices.join(",");
-  });
-  const visibleChunkIndices = visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [];
+  }, [
+    duration,
+    samplesPerPixel,
+    sampleRate,
+    marker,
+    bigStep,
+    secondStep,
+    renderTimestamp,
+    timeScaleHeight
+  ]);
+  const visibleChunkIndices = useVisibleChunkIndices(widthX, import_core4.MAX_CANVAS_WIDTH);
   const visibleChunks = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * MAX_CANVAS_WIDTH;
-    const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    const chunkLeft = i * import_core4.MAX_CANVAS_WIDTH;
+    const chunkWidth = Math.min(widthX - chunkLeft, import_core4.MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       TimeTickChunk,
       {
         $cssWidth: chunkWidth,
@@ -2776,27 +2795,19 @@ var TimeScale = (props) => {
         width: chunkWidth * devicePixelRatio,
         height: timeScaleHeight * devicePixelRatio,
         "data-index": i,
-        ref: canvasRefCallback
+        ref: canvasRef
       },
       `timescale-${i}`
     );
   });
-  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * MAX_CANVAS_WIDTH : 0;
-  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * MAX_CANVAS_WIDTH : Infinity;
+  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 visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
-  (0, import_react17.useEffect)(() => {
-    const currentMap = canvasRefsMap.current;
-    for (const [idx, canvas] of currentMap.entries()) {
-      if (!canvas.isConnected) {
-        currentMap.delete(idx);
-      }
-    }
-  });
-  (0, import_react17.useLayoutEffect)(() => {
-    for (const [chunkIdx, canvas] of canvasRefsMap.current.entries()) {
+  (0, import_react19.useLayoutEffect)(() => {
+    for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = chunkIdx * MAX_CANVAS_WIDTH;
+      const chunkLeft = chunkIdx * import_core4.MAX_CANVAS_WIDTH;
       const chunkWidth = canvas.width / devicePixelRatio;
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -2810,8 +2821,16 @@ var TimeScale = (props) => {
         ctx.fillRect(localX, scaleY, 1, scaleHeight);
       }
     }
-  }, [duration, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  }, [
+    canvasMapRef,
+    duration,
+    devicePixelRatio,
+    timeColor,
+    timeScaleHeight,
+    canvasInfo,
+    visibleChunkIndices
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     PlaylistTimeScaleScroll,
     {
       $cssWidth: widthX,
@@ -2827,7 +2846,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = (0, import_styled_components22.withTheme)(TimeScale);
 
 // src/components/SmartScale.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2901,9 +2920,9 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = (0, import_react18.useContext)(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = (0, import_react20.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2917,7 +2936,7 @@ var SmartScale = ({ renderTimestamp }) => {
 
 // src/components/TimeFormatSelect.tsx
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var SelectWrapper = import_styled_components23.default.div`
   display: inline-flex;
   align-items: center;
@@ -2940,7 +2959,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     BaseSelect,
     {
       className: "time-format",
@@ -2948,14 +2967,14 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
 var import_styled_components24 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Container = import_styled_components24.default.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
@@ -3010,7 +3029,7 @@ var Track = ({
     controls: { show, width: controlWidth }
   } = usePlaylistInfo();
   const controls = useTrackControls();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     Container,
     {
       $numChannels: numChannels,
@@ -3021,15 +3040,8 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          ControlsWrapper,
-          {
-            $controlWidth: show ? controlWidth : 0,
-            $isSelected: isSelected,
-            children: controls
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ControlsWrapper, { $controlWidth: show ? controlWidth : 0, $isSelected: isSelected, children: controls }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -3060,8 +3072,11 @@ var Button = import_styled_components25.default.button.attrs({
   font-size: ${(props) => props.theme.fontSizeSmall};
   line-height: 1;
   border-radius: ${(props) => props.theme.borderRadius};
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
   cursor: pointer;
 
   ${(props) => {
@@ -3136,8 +3151,8 @@ var ButtonGroup = import_styled_components26.default.div`
 
 // src/components/TrackControls/CloseButton.tsx
 var import_styled_components27 = __toESM(require("styled-components"));
-var import_react19 = require("@phosphor-icons/react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react21 = require("@phosphor-icons/react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var StyledCloseButton = import_styled_components27.default.button`
   position: absolute;
   left: 0;
@@ -3152,17 +3167,16 @@ var StyledCloseButton = import_styled_components27.default.button`
   align-items: center;
   justify-content: center;
   opacity: 0.7;
-  transition: opacity 0.15s, color 0.15s;
+  transition:
+    opacity 0.15s,
+    color 0.15s;
 
   &:hover {
     opacity: 1;
     color: #dc3545;
   }
 `;
-var CloseButton = ({
-  onClick,
-  title = "Remove track"
-}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react19.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_react21.X, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 var import_styled_components28 = __toESM(require("styled-components"));
@@ -3197,24 +3211,24 @@ var Header = import_styled_components29.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react20 = require("@phosphor-icons/react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react20.SpeakerLowIcon, { weight: "light", ...props });
+var import_react22 = 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 });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
-var import_react21 = require("@phosphor-icons/react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react21.SpeakerHighIcon, { weight: "light", ...props });
+var import_react23 = 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 });
 
 // src/components/TrackControls/TrashIcon.tsx
-var import_react22 = require("@phosphor-icons/react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react22.TrashIcon, { weight: "light", ...props });
+var import_react24 = 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 });
 
 // src/components/TrackControls/DotsIcon.tsx
-var import_react23 = require("@phosphor-icons/react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react23.DotsThreeIcon, { weight: "bold", ...props });
+var import_react25 = 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 });
 
 // src/components/TrackControls/Slider.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
@@ -3282,10 +3296,10 @@ var SliderWrapper = import_styled_components31.default.label`
 `;
 
 // src/components/TrackMenu.tsx
-var import_react24 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_styled_components32 = __toESM(require("styled-components"));
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var MenuContainer = import_styled_components32.default.div`
   position: relative;
   display: inline-block;
@@ -3323,16 +3337,14 @@ var Divider = import_styled_components32.default.hr`
   border-top: 1px solid rgba(128, 128, 128, 0.3);
   margin: 0.35rem 0;
 `;
-var TrackMenu = ({
-  items: itemsProp
-}) => {
-  const [open, setOpen] = (0, import_react24.useState)(false);
+var TrackMenu = ({ items: itemsProp }) => {
+  const [open, setOpen] = (0, import_react26.useState)(false);
   const close = () => setOpen(false);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
-  const [dropdownPos, setDropdownPos] = (0, import_react24.useState)({ top: 0, left: 0 });
-  const buttonRef = (0, import_react24.useRef)(null);
-  const dropdownRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
+  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)(() => {
     if (open && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -3341,7 +3353,7 @@ var TrackMenu = ({
       });
     }
   }, [open]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3352,8 +3364,8 @@ var TrackMenu = ({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(MenuContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MenuContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       MenuButton,
       {
         ref: buttonRef,
@@ -3364,19 +3376,19 @@ var TrackMenu = ({
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react24.default.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react26.default.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3408,6 +3420,7 @@ var TrackMenu = ({
   ClipBoundary,
   ClipHeader,
   ClipHeaderPresentational,
+  ClipViewportOriginProvider,
   CloseButton,
   Controls,
   DevicePixelRatioProvider,
@@ -3417,7 +3430,6 @@ var TrackMenu = ({
   InlineLabel,
   LoopRegion,
   LoopRegionMarkers,
-  MAX_CANVAS_WIDTH,
   MasterVolumeControl,
   Playhead,
   PlayheadWithMarker,
@@ -3458,6 +3470,7 @@ var TrackMenu = ({
   samplesToSeconds,
   secondsToPixels,
   secondsToSamples,
+  useClipViewportOrigin,
   useDevicePixelRatio,
   usePlaylistInfo,
   usePlayoutStatus,
@@ -3466,6 +3479,7 @@ var TrackMenu = ({
   useScrollViewportSelector,
   useTheme,
   useTrackControls,
+  useVisibleChunkIndices,
   waveformColorToCss
 });
 //# sourceMappingURL=index.js.map