@waveform-playlist/ui-components 7.1.0 → 7.1.2

package/dist/index.js

@@ -60,7 +60,6 @@ __export(index_exports, {
   InlineLabel: () => InlineLabel,
   LoopRegion: () => LoopRegion,
   LoopRegionMarkers: () => LoopRegionMarkers,
-  MAX_CANVAS_WIDTH: () => MAX_CANVAS_WIDTH,
   MasterVolumeControl: () => MasterVolumeControl,
   Playhead: () => Playhead,
   PlayheadWithMarker: () => PlayheadWithMarker,
@@ -109,6 +108,7 @@ __export(index_exports, {
   useScrollViewportSelector: () => useScrollViewportSelector,
   useTheme: () => useTheme2,
   useTrackControls: () => useTrackControls,
+  useVisibleChunkIndices: () => useVisibleChunkIndices,
   waveformColorToCss: () => waveformColorToCss
 });
 module.exports = __toCommonJS(index_exports);
@@ -442,7 +442,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/wfpl-theme.ts
@@ -695,11 +695,52 @@ function useScrollViewportSelector(selector) {
     () => selector(null)
   );
 }
+function useVisibleChunkIndices(totalWidth, chunkWidth) {
+  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 chunkEnd = chunkLeft + thisChunkWidth;
+        if (chunkEnd <= viewport.visibleStart || chunkLeft >= 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/hooks/useChunkedCanvasRefs.ts
+var import_react2 = require("react");
+function useChunkedCanvasRefs() {
+  const canvasMapRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const canvasRef = (0, import_react2.useCallback)((canvas) => {
+    if (canvas !== null) {
+      const idx = parseInt(canvas.dataset.index, 10);
+      canvasMapRef.current.set(idx, canvas);
+    }
+  }, []);
+  (0, import_react2.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_core = require("@waveform-playlist/core");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
@@ -760,49 +801,12 @@ 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 visibleChunkIndices = useVisibleChunkIndices(length, import_core.MAX_CANVAS_WIDTH);
+  (0, import_react3.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);
@@ -847,6 +851,7 @@ var Channel = (props) => {
       }
     }
   }, [
+    canvasMapRef,
     data,
     bits,
     waveHeight,
@@ -857,11 +862,11 @@ 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);
+    const chunkLeft = i * import_core.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Waveform,
       {
@@ -892,7 +897,7 @@ var Channel = (props) => {
 };
 
 // src/components/ErrorBoundary.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var errorContainerStyle = {
   padding: "16px",
@@ -907,7 +912,7 @@ var errorContainerStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var PlaylistErrorBoundary = class extends import_react3.default.Component {
+var PlaylistErrorBoundary = class extends import_react4.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -931,7 +936,7 @@ 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
@@ -1020,7 +1025,7 @@ var ClipHeader = ({
 };
 
 // src/components/ClipBoundary.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var CLIP_BOUNDARY_WIDTH = 8;
@@ -1062,7 +1067,7 @@ var ClipBoundary = ({
   dragHandleProps,
   touchOptimized = false
 }) => {
-  const [isHovered, setIsHovered] = import_react4.default.useState(false);
+  const [isHovered, setIsHovered] = import_react5.default.useState(false);
   if (!dragHandleProps) {
     return null;
   }
@@ -1207,7 +1212,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 +1223,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 +1234,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
@@ -1365,7 +1370,7 @@ var MasterVolumeControl = ({
 };
 
 // src/components/Playhead.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
@@ -1424,9 +1429,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_react6.useRef)(null);
+  const animationFrameRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1455,7 +1460,7 @@ var PlayheadWithMarker = ({
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, controlsOffset, currentTimeRef, playbackStartTimeRef, audioStartPositionRef, getAudioContextTime]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
@@ -1470,7 +1475,7 @@ var PlayheadWithMarker = ({
 
 // src/components/Playlist.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var Wrapper2 = import_styled_components16.default.div`
   overflow-y: hidden;
@@ -1525,8 +1530,8 @@ var Playlist = ({
   isSelecting,
   "data-playlist-state": playlistState
 }) => {
-  const wrapperRef = (0, import_react6.useRef)(null);
-  const handleRef = (0, import_react6.useCallback)((el) => {
+  const wrapperRef = (0, import_react7.useRef)(null);
+  const handleRef = (0, import_react7.useCallback)((el) => {
     wrapperRef.current = el;
     scrollContainerRef?.(el);
   }, [scrollContainerRef]);
@@ -1587,7 +1592,7 @@ var Selection = ({
 };
 
 // src/components/LoopRegion.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var LoopRegionOverlayDiv = import_styled_components18.default.div.attrs((props) => ({
@@ -1738,12 +1743,12 @@ 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_react8.useState)(null);
+  const dragStartX = (0, import_react8.useRef)(0);
+  const dragStartPosition = (0, import_react8.useRef)(0);
+  const dragStartEnd = (0, import_react8.useRef)(0);
   const width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = (0, import_react7.useCallback)((e, marker) => {
+  const handleMarkerMouseDown = (0, import_react8.useCallback)((e, marker) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggingMarker(marker);
@@ -1768,7 +1773,7 @@ var LoopRegionMarkers = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]);
-  const handleRegionMouseDown = (0, import_react7.useCallback)((e) => {
+  const handleRegionMouseDown = (0, import_react8.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggingMarker("region");
@@ -1859,11 +1864,11 @@ 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_react8.useState)(false);
+  const createStartX = (0, import_react8.useRef)(0);
+  const containerRef = (0, import_react8.useRef)(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = (0, import_react7.useCallback)((e) => {
+  const handleBackgroundMouseDown = (0, import_react8.useCallback)((e) => {
     const target = e.target;
     if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
       return;
@@ -1917,10 +1922,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/TimeInput.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1980,8 +1985,8 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react8.useState)("");
-  (0, import_react8.useEffect)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react9.useState)("");
+  (0, import_react9.useEffect)(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -2027,8 +2032,8 @@ var SelectionTimeInputs = ({
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = (0, import_react9.useState)("hh:mm:ss.uuu");
-  (0, import_react9.useEffect)(() => {
+  const [timeFormat, setTimeFormat] = (0, import_react10.useState)("hh:mm:ss.uuu");
+  (0, import_react10.useEffect)(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -2080,14 +2085,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react10.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react11.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react10.useState)(getScale());
+  const [scale, setScale] = (0, import_react11.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -2097,11 +2102,11 @@ var DevicePixelRatioProvider = ({ children }) => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react10.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react11.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react11 = require("react");
-var PlaylistInfoContext = (0, import_react11.createContext)({
+var import_react12 = require("react");
+var PlaylistInfoContext = (0, import_react12.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -2115,21 +2120,21 @@ var PlaylistInfoContext = (0, import_react11.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react11.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react12.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_styled_components19 = require("styled-components");
-var useTheme2 = () => (0, import_react12.useContext)(import_styled_components19.ThemeContext);
+var useTheme2 = () => (0, import_react13.useContext)(import_styled_components19.ThemeContext);
 
 // src/contexts/TrackControls.tsx
-var import_react13 = require("react");
+var import_react14 = 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 TrackControlsContext = (0, import_react14.createContext)(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react14.Fragment, {}));
+var useTrackControls = () => (0, import_react14.useContext)(TrackControlsContext);
 
 // src/contexts/Playout.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
@@ -2141,8 +2146,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react14.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react14.createContext)({
+var PlayoutStatusContext = (0, import_react15.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react15.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2151,22 +2156,23 @@ 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_react15.useState)(defaultIsPlaying);
+  const [progress, setProgress] = (0, import_react15.useState)(defaultProgress);
+  const [selectionStart, setSelectionStart] = (0, import_react15.useState)(defaultSelectionStart);
+  const [selectionEnd, setSelectionEnd] = (0, import_react15.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 }) });
 };
-var usePlayoutStatus = () => (0, import_react14.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react14.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react15.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react15.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_styled_components20 = __toESM(require("styled-components"));
+var import_core3 = require("@waveform-playlist/core");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper3 = import_styled_components20.default.div.attrs((props) => ({
@@ -2220,60 +2226,51 @@ 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_react16.useRef)([]);
+  const transferredCanvasesRef = (0, import_react16.useRef)(/* @__PURE__ */ new WeakSet());
+  const workerApiRef = (0, import_react16.useRef)(workerApi);
+  const onCanvasesReadyRef = (0, import_react16.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 visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH);
   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_react16.useEffect)(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.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 +2283,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 +2290,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_react16.useEffect)(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2336,17 +2320,13 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     if (isWorkerMode || !data) return;
-    const canvases2 = canvasesRef.current;
     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,10 +2386,10 @@ 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);
+    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       SpectrogramCanvas,
       {
@@ -2528,7 +2508,7 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var LABELS_WIDTH = 72;
@@ -2580,12 +2560,12 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = (0, import_react16.useRef)(null);
+  const canvasRef = (0, import_react17.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_react17.useLayoutEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2628,10 +2608,10 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
@@ -2655,6 +2635,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
+var import_core4 = require("@waveform-playlist/core");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
@@ -2706,21 +2687,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_react18.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_react18.useMemo)(() => {
     const nextCanvasInfo = /* @__PURE__ */ new Map();
     const nextMarkers = [];
     const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
@@ -2731,7 +2706,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_runtime23.jsx)(import_react18.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
         nextMarkers.push({ pix, element });
         nextCanvasInfo.set(pix, timeScaleHeight);
       } else if (counter % bigStep === 0) {
@@ -2747,26 +2722,10 @@ var TimeScale = (props) => {
       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) : [];
+  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);
+    const chunkLeft = i * import_core4.MAX_CANVAS_WIDTH;
+    const chunkWidth = Math.min(widthX - chunkLeft, import_core4.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       TimeTickChunk,
       {
@@ -2776,27 +2735,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_react18.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,7 +2761,7 @@ var TimeScale = (props) => {
         ctx.fillRect(localX, scaleY, 1, scaleHeight);
       }
     }
-  }, [duration, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkKey]);
+  }, [canvasMapRef, duration, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkIndices]);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     PlaylistTimeScaleScroll,
     {
@@ -2901,7 +2852,7 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = (0, import_react18.useContext)(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = (0, import_react19.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     StyledTimeScale,
@@ -3136,7 +3087,7 @@ 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_react20 = require("@phosphor-icons/react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var StyledCloseButton = import_styled_components27.default.button`
   position: absolute;
@@ -3162,7 +3113,7 @@ var StyledCloseButton = import_styled_components27.default.button`
 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" }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react20.X, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 var import_styled_components28 = __toESM(require("styled-components"));
@@ -3197,24 +3148,24 @@ var Header = import_styled_components29.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react20 = require("@phosphor-icons/react");
+var import_react21 = 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 VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react21.SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
-var import_react21 = require("@phosphor-icons/react");
+var import_react22 = 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 VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react22.SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
-var import_react22 = require("@phosphor-icons/react");
+var import_react23 = 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 TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react23.TrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/DotsIcon.tsx
-var import_react23 = require("@phosphor-icons/react");
+var import_react24 = 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 DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react24.DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
@@ -3282,7 +3233,7 @@ var SliderWrapper = import_styled_components31.default.label`
 `;
 
 // src/components/TrackMenu.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __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");
@@ -3326,13 +3277,13 @@ var Divider = import_styled_components32.default.hr`
 var TrackMenu = ({
   items: itemsProp
 }) => {
-  const [open, setOpen] = (0, import_react24.useState)(false);
+  const [open, setOpen] = (0, import_react25.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_react25.useState)({ top: 0, left: 0 });
+  const buttonRef = (0, import_react25.useRef)(null);
+  const dropdownRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
     if (open && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -3341,7 +3292,7 @@ var TrackMenu = ({
       });
     }
   }, [open]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3375,7 +3326,7 @@ var TrackMenu = ({
           $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: [
+          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react25.default.Fragment, { children: [
             index > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Divider, {}),
             item.content
           ] }, item.id))
@@ -3417,7 +3368,6 @@ var TrackMenu = ({
   InlineLabel,
   LoopRegion,
   LoopRegionMarkers,
-  MAX_CANVAS_WIDTH,
   MasterVolumeControl,
   Playhead,
   PlayheadWithMarker,
@@ -3466,6 +3416,7 @@ var TrackMenu = ({
   useScrollViewportSelector,
   useTheme,
   useTrackControls,
+  useVisibleChunkIndices,
   waveformColorToCss
 });
 //# sourceMappingURL=index.js.map