@waveform-playlist/ui-components 7.0.0 → 7.1.0

package/dist/index.js

@@ -60,6 +60,7 @@ __export(index_exports, {
   InlineLabel: () => InlineLabel,
   LoopRegion: () => LoopRegion,
   LoopRegionMarkers: () => LoopRegionMarkers,
+  MAX_CANVAS_WIDTH: () => MAX_CANVAS_WIDTH,
   MasterVolumeControl: () => MasterVolumeControl,
   Playhead: () => Playhead,
   PlayheadWithMarker: () => PlayheadWithMarker,
@@ -68,6 +69,7 @@ __export(index_exports, {
   PlaylistInfoContext: () => PlaylistInfoContext,
   PlayoutProvider: () => PlayoutProvider,
   ScreenReaderOnly: () => ScreenReaderOnly,
+  ScrollViewportProvider: () => ScrollViewportProvider,
   Selection: () => Selection,
   SelectionTimeInputs: () => SelectionTimeInputs,
   Slider: () => Slider,
@@ -103,6 +105,8 @@ __export(index_exports, {
   usePlaylistInfo: () => usePlaylistInfo,
   usePlayoutStatus: () => usePlayoutStatus,
   usePlayoutStatusUpdate: () => usePlayoutStatusUpdate,
+  useScrollViewport: () => useScrollViewport,
+  useScrollViewportSelector: () => useScrollViewportSelector,
   useTheme: () => useTheme2,
   useTrackControls: () => useTrackControls,
   waveformColorToCss: () => waveformColorToCss
@@ -438,7 +442,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/wfpl-theme.ts
@@ -598,9 +602,105 @@ var darkTheme = {
   fontSizeSmall: "12px"
 };
 
-// src/components/Channel.tsx
+// src/contexts/ScrollViewport.tsx
+var import_react = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var ViewportStore = class {
+  constructor() {
+    this._state = null;
+    this._listeners = /* @__PURE__ */ new Set();
+    this.subscribe = (callback) => {
+      this._listeners.add(callback);
+      return () => this._listeners.delete(callback);
+    };
+    this.getSnapshot = () => this._state;
+  }
+  /**
+   * Update viewport state. Applies a 100px scroll threshold to skip updates
+   * that don't affect chunk visibility (1000px chunks with 1.5× overscan buffer).
+   * Only notifies listeners when the state actually changes.
+   */
+  update(scrollLeft, containerWidth) {
+    const buffer = containerWidth * 1.5;
+    const visibleStart = Math.max(0, scrollLeft - buffer);
+    const visibleEnd = scrollLeft + containerWidth + buffer;
+    if (this._state && this._state.containerWidth === containerWidth && Math.abs(this._state.scrollLeft - scrollLeft) < 100) {
+      return;
+    }
+    this._state = { scrollLeft, containerWidth, visibleStart, visibleEnd };
+    for (const listener of this._listeners) {
+      listener();
+    }
+  }
+};
+var ViewportStoreContext = (0, import_react.createContext)(null);
+var EMPTY_SUBSCRIBE = () => () => {
+};
+var NULL_SNAPSHOT = () => null;
+var ScrollViewportProvider = ({
+  containerRef,
+  children
+}) => {
+  const storeRef = (0, import_react.useRef)(null);
+  if (storeRef.current === null) {
+    storeRef.current = new ViewportStore();
+  }
+  const store = storeRef.current;
+  const rafIdRef = (0, import_react.useRef)(null);
+  const measure = (0, import_react.useCallback)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    store.update(el.scrollLeft, el.clientWidth);
+  }, [containerRef, store]);
+  const scheduleUpdate = (0, import_react.useCallback)(() => {
+    if (rafIdRef.current !== null) return;
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      measure();
+    });
+  }, [measure]);
+  (0, import_react.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    measure();
+    el.addEventListener("scroll", scheduleUpdate, { passive: true });
+    const resizeObserver = new ResizeObserver(() => {
+      scheduleUpdate();
+    });
+    resizeObserver.observe(el);
+    return () => {
+      el.removeEventListener("scroll", scheduleUpdate);
+      resizeObserver.disconnect();
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+  }, [containerRef, measure, scheduleUpdate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewportStoreContext.Provider, { value: store, children });
+};
+var useScrollViewport = () => {
+  const store = (0, import_react.useContext)(ViewportStoreContext);
+  return (0, import_react.useSyncExternalStore)(
+    store ? store.subscribe : EMPTY_SUBSCRIBE,
+    store ? store.getSnapshot : NULL_SNAPSHOT,
+    NULL_SNAPSHOT
+  );
+};
+function useScrollViewportSelector(selector) {
+  const store = (0, import_react.useContext)(ViewportStoreContext);
+  return (0, import_react.useSyncExternalStore)(
+    store ? store.subscribe : EMPTY_SUBSCRIBE,
+    () => selector(store ? store.getSnapshot() : null),
+    () => selector(null)
+  );
+}
+
+// src/constants.ts
 var MAX_CANVAS_WIDTH = 1e3;
+
+// src/components/Channel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
     return color;
@@ -619,11 +719,12 @@ function createCanvasFillStyle(ctx, color, width, height) {
 var Waveform = import_styled_components9.default.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
-    height: `${props.$waveHeight}px`
+    height: `${props.$waveHeight}px`,
+    left: `${props.$left}px`
   }
 }))`
-  float: left;
-  position: relative;
+  position: absolute;
+  top: 0;
   /* Promote to own compositing layer for smoother scrolling */
   will-change: transform;
   /* Disable image rendering interpolation */
@@ -659,8 +760,25 @@ var Channel = (props) => {
     transparentBackground = false,
     drawMode = "inverted"
   } = props;
-  const canvasesRef = (0, import_react.useRef)([]);
-  const canvasRef = (0, import_react.useCallback)(
+  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);
@@ -669,12 +787,22 @@ var Channel = (props) => {
     },
     []
   );
-  (0, import_react.useLayoutEffect)(() => {
+  (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 step = barWidth + barGap;
-    let globalPixelOffset = 0;
     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;
       const ctx = canvas.getContext("2d");
       const h2 = Math.floor(waveHeight / 2);
       const maxValue = 2 ** (bits - 1);
@@ -717,7 +845,6 @@ var Channel = (props) => {
           }
         }
       }
-      globalPixelOffset += canvas.width / devicePixelRatio;
     }
   }, [
     data,
@@ -729,32 +856,29 @@ var Channel = (props) => {
     length,
     barWidth,
     barGap,
-    drawMode
+    drawMode,
+    visibleChunkKey
   ]);
-  let totalWidth = length;
-  let waveformCount = 0;
-  const waveforms = [];
-  while (totalWidth > 0) {
-    const currentWidth = Math.min(totalWidth, MAX_CANVAS_WIDTH);
-    const waveform = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  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)(
       Waveform,
       {
         $cssWidth: currentWidth,
+        $left: chunkLeft,
         width: currentWidth * devicePixelRatio,
         height: waveHeight * devicePixelRatio,
         $waveHeight: waveHeight,
-        "data-index": waveformCount,
+        "data-index": i,
         ref: canvasRef
       },
-      `${length}-${waveformCount}`
+      `${length}-${i}`
     );
-    waveforms.push(waveform);
-    totalWidth -= currentWidth;
-    waveformCount += 1;
-  }
+  });
   const bgColor = waveFillColor;
   const backgroundCss = transparentBackground ? "transparent" : waveformColorToCss(bgColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Wrapper,
     {
       $index: index,
@@ -768,8 +892,8 @@ var Channel = (props) => {
 };
 
 // src/components/ErrorBoundary.tsx
-var import_react2 = __toESM(require("react"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var errorContainerStyle = {
   padding: "16px",
   background: "#1a1a2e",
@@ -783,7 +907,7 @@ var errorContainerStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var PlaylistErrorBoundary = class extends import_react2.default.Component {
+var PlaylistErrorBoundary = class extends import_react3.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -799,7 +923,7 @@ var PlaylistErrorBoundary = class extends import_react2.default.Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
     }
     return this.props.children;
   }
@@ -812,7 +936,7 @@ var import_utilities = require("@dnd-kit/utilities");
 
 // src/components/ClipHeader.tsx
 var import_styled_components10 = __toESM(require("styled-components"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var CLIP_HEADER_HEIGHT = 22;
 var HeaderContainer = import_styled_components10.default.div`
   position: relative;
@@ -852,27 +976,27 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     HeaderContainer,
     {
       $isDragging: false,
       $interactive: false,
       $isSelected: isSelected,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TrackName, { children: trackName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TrackName, { children: trackName })
     }
   );
 };
 var ClipHeader = ({
   clipId,
-  trackIndex,
-  clipIndex,
+  trackIndex: _trackIndex,
+  clipIndex: _clipIndex,
   trackName,
   isSelected = false,
   disableDrag = false,
   dragHandleProps
 }) => {
   if (disableDrag || !dragHandleProps) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ClipHeaderPresentational,
       {
         trackName,
@@ -881,7 +1005,7 @@ var ClipHeader = ({
     );
   }
   const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     HeaderContainer,
     {
       ref: setActivatorNodeRef,
@@ -890,15 +1014,15 @@ var ClipHeader = ({
       $isSelected: isSelected,
       ...listeners,
       ...attributes,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TrackName, { children: trackName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TrackName, { children: trackName })
     }
   );
 };
 
 // src/components/ClipBoundary.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var CLIP_BOUNDARY_WIDTH = 8;
 var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = import_styled_components11.default.div`
@@ -932,18 +1056,18 @@ var BoundaryContainer = import_styled_components11.default.div`
 `;
 var ClipBoundary = ({
   clipId,
-  trackIndex,
-  clipIndex,
+  trackIndex: _trackIndex,
+  clipIndex: _clipIndex,
   edge,
   dragHandleProps,
   touchOptimized = false
 }) => {
-  const [isHovered, setIsHovered] = import_react3.default.useState(false);
+  const [isHovered, setIsHovered] = import_react4.default.useState(false);
   if (!dragHandleProps) {
     return null;
   }
   const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     BoundaryContainer,
     {
       ref: setActivatorNodeRef,
@@ -963,7 +1087,7 @@ var ClipBoundary = ({
 
 // src/components/FadeOverlay.tsx
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var FadeContainer = import_styled_components12.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1020,7 +1144,7 @@ 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_runtime7.jsx)(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  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),
@@ -1030,7 +1154,7 @@ var FadeOverlay = ({
 };
 
 // src/components/Clip.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ClipContainer = import_styled_components13.default.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
     left: `${props.$left}px`,
@@ -1115,7 +1239,7 @@ var Clip = ({
     zIndex: isDragging ? 100 : void 0
     // Below controls (z-index: 999) but above other clips
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     ClipContainer,
     {
       ref: setNodeRef,
@@ -1128,7 +1252,7 @@ var Clip = ({
       "data-track-id": trackId,
       onMouseDown,
       children: [
-        showHeader && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           ClipHeader,
           {
             clipId,
@@ -1140,9 +1264,9 @@ var Clip = ({
             dragHandleProps: enableDrag ? { attributes, listeners, setActivatorNodeRef } : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
           children,
-          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             FadeOverlay,
             {
               left: 0,
@@ -1151,7 +1275,7 @@ var Clip = ({
               curveType: fadeIn.type
             }
           ),
-          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             FadeOverlay,
             {
               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -1161,8 +1285,8 @@ var Clip = ({
             }
           )
         ] }),
-        showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             ClipBoundary,
             {
               clipId,
@@ -1178,7 +1302,7 @@ var Clip = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             ClipBoundary,
             {
               clipId,
@@ -1202,7 +1326,7 @@ var Clip = ({
 
 // src/components/MasterVolumeControl.tsx
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var VolumeContainer = import_styled_components14.default.div`
   display: inline-flex;
   align-items: center;
@@ -1224,9 +1348,9 @@ var MasterVolumeControl = ({
   const handleChange = (e) => {
     onChange(parseFloat(e.target.value) / 100);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(VolumeContainer, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  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)(
       VolumeSlider,
       {
         min: "0",
@@ -1241,9 +1365,9 @@ var MasterVolumeControl = ({
 };
 
 // src/components/Playhead.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
@@ -1260,7 +1384,7 @@ var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlayheadLine, { $position: position, $color: color });
 };
 var PlayheadWithMarkerContainer = import_styled_components15.default.div`
   position: absolute;
@@ -1300,9 +1424,9 @@ var PlayheadWithMarker = ({
   controlsOffset,
   getAudioContextTime
 }) => {
-  const containerRef = (0, import_react4.useRef)(null);
-  const animationFrameRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const containerRef = (0, import_react5.useRef)(null);
+  const animationFrameRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1331,22 +1455,23 @@ var PlayheadWithMarker = ({
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, controlsOffset, currentTimeRef, playbackStartTimeRef, audioStartPositionRef, getAudioContextTime]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.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_runtime10.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkerLine, { $color: color })
+  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 })
   ] });
 };
 
 // src/components/Playlist.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Wrapper2 = import_styled_components16.default.div`
   overflow-y: hidden;
   overflow-x: auto;
@@ -1400,16 +1525,21 @@ var Playlist = ({
   isSelecting,
   "data-playlist-state": playlistState
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: scrollContainerRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  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_runtime11.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, 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_runtime11.jsx)(
+          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             ClickOverlay,
             {
               $controlsWidth: controlsWidth,
@@ -1423,13 +1553,13 @@ var Playlist = ({
         ] })
       ]
     }
-  ) });
+  ) }) });
 };
 var StyledPlaylist = (0, import_styled_components16.withTheme)(Playlist);
 
 // src/components/Selection.tsx
 var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var SelectionOverlay = import_styled_components17.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1453,13 +1583,13 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var LoopRegionOverlayDiv = import_styled_components18.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1508,8 +1638,8 @@ var LoopRegion = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1518,7 +1648,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       LoopMarker,
       {
         $left: startPosition,
@@ -1527,7 +1657,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1608,12 +1738,12 @@ var LoopRegionMarkers = ({
   minPosition = 0,
   maxPosition = Infinity
 }) => {
-  const [draggingMarker, setDraggingMarker] = (0, import_react5.useState)(null);
-  const dragStartX = (0, import_react5.useRef)(0);
-  const dragStartPosition = (0, import_react5.useRef)(0);
-  const dragStartEnd = (0, import_react5.useRef)(0);
+  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 width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = (0, import_react5.useCallback)((e, marker) => {
+  const handleMarkerMouseDown = (0, import_react7.useCallback)((e, marker) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggingMarker(marker);
@@ -1638,7 +1768,7 @@ var LoopRegionMarkers = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]);
-  const handleRegionMouseDown = (0, import_react5.useCallback)((e) => {
+  const handleRegionMouseDown = (0, import_react7.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggingMarker("region");
@@ -1671,8 +1801,8 @@ var LoopRegionMarkers = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1683,7 +1813,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1694,7 +1824,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1729,11 +1859,11 @@ var TimescaleLoopRegion = ({
   maxPosition = Infinity,
   controlsOffset = 0
 }) => {
-  const [isCreating, setIsCreating] = (0, import_react5.useState)(false);
-  const createStartX = (0, import_react5.useRef)(0);
-  const containerRef = (0, import_react5.useRef)(null);
+  const [, setIsCreating] = (0, import_react7.useState)(false);
+  const createStartX = (0, import_react7.useRef)(0);
+  const containerRef = (0, import_react7.useRef)(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = (0, import_react5.useCallback)((e) => {
+  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;
@@ -1761,14 +1891,14 @@ var TimescaleLoopRegion = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [minPosition, maxPosition, onLoopRegionChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     TimescaleLoopCreator,
     {
       ref: containerRef,
       $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1787,10 +1917,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/components/TimeInput.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1840,7 +1970,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var TimeInput = ({
   id,
   label,
@@ -1850,8 +1980,8 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react6.useState)("");
-  (0, import_react6.useEffect)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react8.useState)("");
+  (0, import_react8.useEffect)(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -1871,9 +2001,9 @@ var TimeInput = ({
       e.currentTarget.blur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  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)(
       BaseInput,
       {
         type: "text",
@@ -1890,15 +2020,15 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = (0, import_react7.useState)("hh:mm:ss.uuu");
-  (0, import_react7.useEffect)(() => {
+  const [timeFormat, setTimeFormat] = (0, import_react9.useState)("hh:mm:ss.uuu");
+  (0, import_react9.useEffect)(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -1923,8 +2053,8 @@ var SelectionTimeInputs = ({
       onSelectionChange(selectionStart, value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       TimeInput,
       {
         id: "audio_start",
@@ -1935,7 +2065,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       TimeInput,
       {
         id: "audio_end",
@@ -1950,14 +2080,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-var import_react8 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react8.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react10.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react8.useState)(getScale());
+  const [scale, setScale] = (0, import_react10.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -1965,13 +2095,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react8.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react10.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react9 = require("react");
-var PlaylistInfoContext = (0, import_react9.createContext)({
+var import_react11 = require("react");
+var PlaylistInfoContext = (0, import_react11.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -1985,22 +2115,22 @@ var PlaylistInfoContext = (0, import_react9.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react9.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react11.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_styled_components19 = require("styled-components");
-var useTheme2 = () => (0, import_react10.useContext)(import_styled_components19.ThemeContext);
+var useTheme2 = () => (0, import_react12.useContext)(import_styled_components19.ThemeContext);
 
 // src/contexts/TrackControls.tsx
-var import_react11 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TrackControlsContext = (0, import_react11.createContext)(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react11.Fragment, {}));
-var useTrackControls = () => (0, import_react11.useContext)(TrackControlsContext);
+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);
 
 // src/contexts/Playout.tsx
-var import_react12 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -2011,8 +2141,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react12.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react12.createContext)({
+var PlayoutStatusContext = (0, import_react14.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react14.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2021,24 +2151,24 @@ var PlayoutStatusUpdateContext = (0, import_react12.createContext)({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  const [isPlaying, setIsPlaying] = (0, import_react12.useState)(defaultIsPlaying);
-  const [progress, setProgress] = (0, import_react12.useState)(defaultProgress);
-  const [selectionStart, setSelectionStart] = (0, import_react12.useState)(defaultSelectionStart);
-  const [selectionEnd, setSelectionEnd] = (0, import_react12.useState)(defaultSelectionEnd);
+  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 setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  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_react12.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react12.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react14.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react14.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var MAX_CANVAS_WIDTH2 = 1e3;
+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) => ({
   style: {
     top: `${props.$waveHeight * props.$index}px`,
@@ -2054,11 +2184,13 @@ var Wrapper3 = import_styled_components20.default.div.attrs((props) => ({
 var SpectrogramCanvas = import_styled_components20.default.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
-    height: `${props.$waveHeight}px`
+    height: `${props.$waveHeight}px`,
+    left: `${props.$left}px`
   }
 }))`
-  float: left;
-  position: relative;
+  position: absolute;
+  top: 0;
+  /* Promote to own compositing layer for smoother scrolling */
   will-change: transform;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
@@ -2070,6 +2202,7 @@ function defaultGetColorMap() {
   }
   return lut;
 }
+var DEFAULT_COLOR_LUT = defaultGetColorMap();
 var SpectrogramChannel = ({
   index,
   channelIndex: channelIndexProp,
@@ -2087,11 +2220,30 @@ var SpectrogramChannel = ({
   onCanvasesReady
 }) => {
   const channelIndex = channelIndexProp ?? index;
-  const canvasesRef = (0, import_react13.useRef)([]);
-  const registeredIdsRef = (0, import_react13.useRef)([]);
-  const transferredCanvasesRef = (0, import_react13.useRef)(/* @__PURE__ */ new WeakSet());
+  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 isWorkerMode = !!(workerApi && clipId);
-  const canvasRef = (0, import_react13.useCallback)(
+  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);
@@ -2100,53 +2252,101 @@ var SpectrogramChannel = ({
     },
     []
   );
-  (0, import_react13.useEffect)(() => {
+  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)(() => {
+    workerApiRef.current = workerApi;
+  }, [workerApi]);
+  (0, import_react15.useEffect)(() => {
+    onCanvasesReadyRef.current = onCanvasesReady;
+  }, [onCanvasesReady]);
+  (0, import_react15.useEffect)(() => {
     if (!isWorkerMode) return;
-    const canvasCount2 = Math.ceil(length / MAX_CANVAS_WIDTH2);
-    canvasesRef.current.length = canvasCount2;
+    const currentWorkerApi = workerApiRef.current;
+    if (!currentWorkerApi || !clipId) return;
     const canvases2 = canvasesRef.current;
-    const ids = [];
-    const widths = [];
+    const newIds = [];
+    const newWidths = [];
     for (let i = 0; i < canvases2.length; i++) {
       const canvas = canvases2[i];
       if (!canvas) continue;
       if (transferredCanvasesRef.current.has(canvas)) continue;
-      const canvasId = `${clipId}-ch${channelIndex}-chunk${i}`;
+      const canvasIdx = parseInt(canvas.dataset.index, 10);
+      const canvasId = `${clipId}-ch${channelIndex}-chunk${canvasIdx}`;
+      let offscreen;
       try {
-        const offscreen = canvas.transferControlToOffscreen();
-        workerApi.registerCanvas(canvasId, offscreen);
-        transferredCanvasesRef.current.add(canvas);
-        ids.push(canvasId);
-        widths.push(Math.min(length - i * MAX_CANVAS_WIDTH2, MAX_CANVAS_WIDTH2));
+        offscreen = canvas.transferControlToOffscreen();
       } catch (err) {
         console.warn(`[spectrogram] transferControlToOffscreen failed for ${canvasId}:`, err);
         continue;
       }
+      transferredCanvasesRef.current.add(canvas);
+      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;
+      }
     }
-    registeredIdsRef.current = ids;
-    if (ids.length > 0 && onCanvasesReady) {
-      onCanvasesReady(ids, widths);
+    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);
+        }
+      }
+    }
+    registeredIdsRef.current = remaining;
+  });
+  (0, import_react15.useEffect)(() => {
     return () => {
+      const api = workerApiRef.current;
+      if (!api) return;
       for (const id of registeredIdsRef.current) {
-        workerApi.unregisterCanvas(id);
+        try {
+          api.unregisterCanvas(id);
+        } catch (err) {
+          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+        }
       }
       registeredIdsRef.current = [];
     };
-  }, [isWorkerMode, clipId, channelIndex, length]);
-  const lut = colorLUT ?? defaultGetColorMap();
-  const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
-  const scaleFn = frequencyScaleFn ?? ((f, minF, maxF2) => (f - minF) / (maxF2 - minF));
-  (0, import_react13.useLayoutEffect)(() => {
+  }, []);
+  (0, import_react15.useLayoutEffect)(() => {
     if (isWorkerMode || !data) return;
     const canvases2 = canvasesRef.current;
     const { frequencyBinCount, frameCount, hopSize, sampleRate, gainDb, rangeDb: rawRangeDb } = data;
     const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
-    let globalPixelOffset = 0;
     const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
-    for (let canvasIdx = 0; canvasIdx < canvases2.length; canvasIdx++) {
-      const canvas = canvases2[canvasIdx];
+    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;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
       const canvasWidth = canvas.width / devicePixelRatio;
@@ -2166,7 +2366,7 @@ var SpectrogramChannel = ({
         for (let y = 0; y < canvasHeight; y++) {
           const normalizedY = 1 - y / canvasHeight;
           let bin = Math.floor(normalizedY * frequencyBinCount);
-          if (frequencyScaleFn) {
+          if (hasCustomFrequencyScale) {
             let lo = 0;
             let hi = frequencyBinCount - 1;
             while (lo < hi) {
@@ -2205,36 +2405,30 @@ var SpectrogramChannel = ({
         ctx.imageSmoothingEnabled = false;
         ctx.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height);
       }
-      globalPixelOffset += canvasWidth;
     }
-  }, [isWorkerMode, data, length, waveHeight, devicePixelRatio, samplesPerPixel, lut, frequencyScaleFn, minFrequency, maxF, scaleFn]);
-  let totalWidth = length;
-  let canvasCount = 0;
-  const canvases = [];
-  while (totalWidth > 0) {
-    const currentWidth = Math.min(totalWidth, MAX_CANVAS_WIDTH2);
-    canvases.push(
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        SpectrogramCanvas,
-        {
-          $cssWidth: currentWidth,
-          width: currentWidth * devicePixelRatio,
-          height: waveHeight * devicePixelRatio,
-          $waveHeight: waveHeight,
-          "data-index": canvasCount,
-          ref: canvasRef
-        },
-        `${length}-${canvasCount}`
-      )
+  }, [isWorkerMode, data, length, waveHeight, devicePixelRatio, samplesPerPixel, lut, minFrequency, maxF, scaleFn, hasCustomFrequencyScale, visibleChunkKey]);
+  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)(
+      SpectrogramCanvas,
+      {
+        $cssWidth: currentWidth,
+        $left: chunkLeft,
+        width: currentWidth * devicePixelRatio,
+        height: waveHeight * devicePixelRatio,
+        $waveHeight: waveHeight,
+        "data-index": i,
+        ref: canvasRef
+      },
+      `${length}-${i}`
     );
-    totalWidth -= currentWidth;
-    canvasCount++;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2259,7 +2453,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2280,8 +2474,8 @@ var SmartChannel = ({
   }
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2300,7 +2494,7 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__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,
         {
           ...props,
@@ -2317,7 +2511,7 @@ var SmartChannel = ({
       ) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Channel,
     {
       ...props,
@@ -2334,9 +2528,9 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = import_styled_components21.default.div`
   position: sticky;
@@ -2386,12 +2580,12 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = (0, import_react14.useRef)(null);
+  const canvasRef = (0, import_react16.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_react14.useLayoutEffect)(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2418,7 +2612,7 @@ var SpectrogramLabels = ({
       }
     }
   }, [waveHeight, numChannels, frequencyScaleFn, minFrequency, maxFrequency, labelsColor, labelsBackground, devicePixelRatio, spectrogramHeight, clipHeaderOffset]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -2434,10 +2628,10 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react15 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
@@ -2461,7 +2655,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
@@ -2480,16 +2674,17 @@ var PlaylistTimeScaleScroll = import_styled_components22.default.div.attrs((prop
   border-bottom: 1px solid ${(props) => props.theme.timeColor};
   box-sizing: border-box;
 `;
-var TimeTicks = import_styled_components22.default.canvas.attrs((props) => ({
+var TimeTickChunk = import_styled_components22.default.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
-    height: `${props.$timeScaleHeight}px`
+    height: `${props.$timeScaleHeight}px`,
+    left: `${props.$left}px`
   }
 }))`
   position: absolute;
-  left: 0;
-  right: 0;
   bottom: 0;
+  /* Promote to own compositing layer for smoother scrolling */
+  will-change: transform;
 `;
 var TimeStamp = import_styled_components22.default.div.attrs((props) => ({
   style: {
@@ -2511,78 +2706,120 @@ var TimeScale = (props) => {
     secondStep,
     renderTimestamp
   } = props;
-  const canvasInfo = /* @__PURE__ */ new Map();
-  const timeMarkers = [];
-  const canvasRef = (0, import_react15.useRef)(null);
+  const canvasRefsMap = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
   const {
     sampleRate,
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = (0, import_react15.useContext)(PlaylistInfoContext);
+  } = (0, import_react17.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  (0, import_react15.useEffect)(() => {
-    if (canvasRef.current !== null) {
-      const canvas = canvasRef.current;
-      const ctx = canvas.getContext("2d");
-      if (ctx) {
-        ctx.resetTransform();
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.imageSmoothingEnabled = false;
-        ctx.fillStyle = timeColor;
-        ctx.scale(devicePixelRatio, devicePixelRatio);
-        for (const [pixLeft, scaleHeight] of canvasInfo.entries()) {
-          const scaleY = timeScaleHeight - scaleHeight;
-          ctx.fillRect(pixLeft, scaleY, 1, scaleHeight);
+  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 nextCanvasInfo = /* @__PURE__ */ new Map();
+    const nextMarkers = [];
+    const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
+    const pixPerSec = sampleRate / samplesPerPixel;
+    let counter = 0;
+    for (let i = 0; i < nextWidthX; i += pixPerSec * secondStep / 1e3) {
+      const pix = Math.floor(i);
+      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);
+        nextMarkers.push({ pix, element });
+        nextCanvasInfo.set(pix, timeScaleHeight);
+      } else if (counter % bigStep === 0) {
+        nextCanvasInfo.set(pix, Math.floor(timeScaleHeight / 2));
+      } else if (counter % secondStep === 0) {
+        nextCanvasInfo.set(pix, Math.floor(timeScaleHeight / 5));
+      }
+      counter += secondStep;
+    }
+    return {
+      widthX: nextWidthX,
+      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);
     }
-  }, [
-    duration,
-    devicePixelRatio,
-    timeColor,
-    timeScaleHeight,
-    bigStep,
-    secondStep,
-    marker,
-    canvasInfo
-  ]);
-  const widthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
-  const pixPerSec = sampleRate / samplesPerPixel;
-  let counter = 0;
-  for (let i = 0; i < widthX; i += pixPerSec * secondStep / 1e3) {
-    const pix = Math.floor(i);
-    if (counter % marker === 0) {
-      const timeMs = counter;
-      const timestamp = formatTime2(timeMs);
-      const timestampContent = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react15.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
-      timeMarkers.push(timestampContent);
-      canvasInfo.set(pix, timeScaleHeight);
-    } else if (counter % bigStep === 0) {
-      canvasInfo.set(pix, Math.floor(timeScaleHeight / 2));
-    } else if (counter % secondStep === 0) {
-      canvasInfo.set(pix, Math.floor(timeScaleHeight / 5));
+    return indices.join(",");
+  });
+  const visibleChunkIndices = visibleChunkKey ? visibleChunkKey.split(",").map(Number) : [];
+  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)(
+      TimeTickChunk,
+      {
+        $cssWidth: chunkWidth,
+        $left: chunkLeft,
+        $timeScaleHeight: timeScaleHeight,
+        width: chunkWidth * devicePixelRatio,
+        height: timeScaleHeight * devicePixelRatio,
+        "data-index": i,
+        ref: canvasRefCallback
+      },
+      `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 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);
+      }
     }
-    counter += secondStep;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  });
+  (0, import_react17.useLayoutEffect)(() => {
+    for (const [chunkIdx, canvas] of canvasRefsMap.current.entries()) {
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+      const chunkLeft = chunkIdx * MAX_CANVAS_WIDTH;
+      const chunkWidth = canvas.width / devicePixelRatio;
+      ctx.resetTransform();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.imageSmoothingEnabled = false;
+      ctx.fillStyle = timeColor;
+      ctx.scale(devicePixelRatio, devicePixelRatio);
+      for (const [pixLeft, scaleHeight] of canvasInfo.entries()) {
+        if (pixLeft < chunkLeft || pixLeft >= chunkLeft + chunkWidth) continue;
+        const localX = pixLeft - chunkLeft;
+        const scaleY = timeScaleHeight - scaleHeight;
+        ctx.fillRect(localX, scaleY, 1, scaleHeight);
+      }
+    }
+  }, [duration, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     PlaylistTimeScaleScroll,
     {
       $cssWidth: widthX,
       $controlWidth: showControls ? controlWidth : 0,
       $timeScaleHeight: timeScaleHeight,
       children: [
-        timeMarkers,
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          TimeTicks,
-          {
-            $cssWidth: widthX,
-            $timeScaleHeight: timeScaleHeight,
-            width: widthX * devicePixelRatio,
-            height: timeScaleHeight * devicePixelRatio,
-            ref: canvasRef
-          }
-        )
+        visibleMarkers,
+        visibleChunks
       ]
     }
   );
@@ -2590,7 +2827,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = (0, import_styled_components22.withTheme)(TimeScale);
 
 // src/components/SmartScale.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2664,9 +2901,9 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = (0, import_react16.useContext)(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = (0, import_react18.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2680,7 +2917,7 @@ var SmartScale = ({ renderTimestamp }) => {
 
 // src/components/TimeFormatSelect.tsx
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var SelectWrapper = import_styled_components23.default.div`
   display: inline-flex;
   align-items: center;
@@ -2703,7 +2940,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     BaseSelect,
     {
       className: "time-format",
@@ -2711,14 +2948,14 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = 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`
@@ -2773,7 +3010,7 @@ var Track = ({
     controls: { show, width: controlWidth }
   } = usePlaylistInfo();
   const controls = useTrackControls();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     Container,
     {
       $numChannels: numChannels,
@@ -2784,7 +3021,7 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           ControlsWrapper,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2792,7 +3029,7 @@ var Track = ({
             children: controls
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2899,8 +3136,8 @@ var ButtonGroup = import_styled_components26.default.div`
 
 // src/components/TrackControls/CloseButton.tsx
 var import_styled_components27 = __toESM(require("styled-components"));
-var import_react17 = require("@phosphor-icons/react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react19 = require("@phosphor-icons/react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var StyledCloseButton = import_styled_components27.default.button`
   position: absolute;
   left: 0;
@@ -2925,7 +3162,7 @@ var StyledCloseButton = import_styled_components27.default.button`
 var CloseButton = ({
   onClick,
   title = "Remove track"
-}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react17.X, { size: 12, weight: "bold" }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react19.X, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 var import_styled_components28 = __toESM(require("styled-components"));
@@ -2960,24 +3197,24 @@ var Header = import_styled_components29.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react18 = require("@phosphor-icons/react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react18.SpeakerLowIcon, { weight: "light", ...props });
+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 });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
-var import_react19 = require("@phosphor-icons/react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react19.SpeakerHighIcon, { weight: "light", ...props });
+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 });
 
 // src/components/TrackControls/TrashIcon.tsx
-var import_react20 = require("@phosphor-icons/react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react20.TrashIcon, { weight: "light", ...props });
+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 });
 
 // src/components/TrackControls/DotsIcon.tsx
-var import_react21 = require("@phosphor-icons/react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react21.DotsThreeIcon, { weight: "bold", ...props });
+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 });
 
 // src/components/TrackControls/Slider.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
@@ -3045,10 +3282,10 @@ var SliderWrapper = import_styled_components31.default.label`
 `;
 
 // src/components/TrackMenu.tsx
-var import_react22 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_styled_components32 = __toESM(require("styled-components"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var MenuContainer = import_styled_components32.default.div`
   position: relative;
   display: inline-block;
@@ -3089,13 +3326,13 @@ var Divider = import_styled_components32.default.hr`
 var TrackMenu = ({
   items: itemsProp
 }) => {
-  const [open, setOpen] = (0, import_react22.useState)(false);
+  const [open, setOpen] = (0, import_react24.useState)(false);
   const close = () => setOpen(false);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
-  const [dropdownPos, setDropdownPos] = (0, import_react22.useState)({ top: 0, left: 0 });
-  const buttonRef = (0, import_react22.useRef)(null);
-  const dropdownRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  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)(() => {
     if (open && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -3104,7 +3341,7 @@ var TrackMenu = ({
       });
     }
   }, [open]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3115,8 +3352,8 @@ var TrackMenu = ({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(MenuContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(MenuContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       MenuButton,
       {
         ref: buttonRef,
@@ -3127,19 +3364,19 @@ var TrackMenu = ({
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react22.default.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Divider, {}),
+          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, {}),
             item.content
           ] }, item.id))
         }
@@ -3180,6 +3417,7 @@ var TrackMenu = ({
   InlineLabel,
   LoopRegion,
   LoopRegionMarkers,
+  MAX_CANVAS_WIDTH,
   MasterVolumeControl,
   Playhead,
   PlayheadWithMarker,
@@ -3188,6 +3426,7 @@ var TrackMenu = ({
   PlaylistInfoContext,
   PlayoutProvider,
   ScreenReaderOnly,
+  ScrollViewportProvider,
   Selection,
   SelectionTimeInputs,
   Slider,
@@ -3223,6 +3462,8 @@ var TrackMenu = ({
   usePlaylistInfo,
   usePlayoutStatus,
   usePlayoutStatusUpdate,
+  useScrollViewport,
+  useScrollViewportSelector,
   useTheme,
   useTrackControls,
   waveformColorToCss