@waveform-playlist/ui-components 7.0.0 → 7.1.1

package/dist/index.mjs

@@ -327,7 +327,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-import { useLayoutEffect, useCallback, useRef } from "react";
+import { useLayoutEffect, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
 import styled9 from "styled-components";
 
 // src/wfpl-theme.ts
@@ -487,9 +487,112 @@ var darkTheme = {
   fontSizeSmall: "12px"
 };
 
-// src/components/Channel.tsx
+// src/contexts/ScrollViewport.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useCallback,
+  useRef,
+  useSyncExternalStore
+} from "react";
 import { jsx as jsx3 } from "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 = createContext(null);
+var EMPTY_SUBSCRIBE = () => () => {
+};
+var NULL_SNAPSHOT = () => null;
+var ScrollViewportProvider = ({
+  containerRef,
+  children
+}) => {
+  const storeRef = useRef(null);
+  if (storeRef.current === null) {
+    storeRef.current = new ViewportStore();
+  }
+  const store = storeRef.current;
+  const rafIdRef = useRef(null);
+  const measure = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    store.update(el.scrollLeft, el.clientWidth);
+  }, [containerRef, store]);
+  const scheduleUpdate = useCallback(() => {
+    if (rafIdRef.current !== null) return;
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      measure();
+    });
+  }, [measure]);
+  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__ */ jsx3(ViewportStoreContext.Provider, { value: store, children });
+};
+var useScrollViewport = () => {
+  const store = useContext(ViewportStoreContext);
+  return useSyncExternalStore(
+    store ? store.subscribe : EMPTY_SUBSCRIBE,
+    store ? store.getSnapshot : NULL_SNAPSHOT,
+    NULL_SNAPSHOT
+  );
+};
+function useScrollViewportSelector(selector) {
+  const store = useContext(ViewportStoreContext);
+  return 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
+import { jsx as jsx4 } from "react/jsx-runtime";
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
     return color;
@@ -508,11 +611,12 @@ function createCanvasFillStyle(ctx, color, width, height) {
 var Waveform = styled9.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 */
@@ -548,8 +652,25 @@ var Channel = (props) => {
     transparentBackground = false,
     drawMode = "inverted"
   } = props;
-  const canvasesRef = useRef([]);
-  const canvasRef = useCallback(
+  const canvasesRef = useRef2([]);
+  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 = useCallback2(
     (canvas) => {
       if (canvas !== null) {
         const index2 = parseInt(canvas.dataset.index, 10);
@@ -558,12 +679,22 @@ var Channel = (props) => {
     },
     []
   );
+  useEffect2(() => {
+    const canvases = canvasesRef.current;
+    for (let i = canvases.length - 1; i >= 0; i--) {
+      if (canvases[i] && !canvases[i].isConnected) {
+        delete canvases[i];
+      }
+    }
+  });
   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);
@@ -606,7 +737,6 @@ var Channel = (props) => {
           }
         }
       }
-      globalPixelOffset += canvas.width / devicePixelRatio;
     }
   }, [
     data,
@@ -618,32 +748,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__ */ jsx3(
+  const waveforms = visibleChunkIndices.map((i) => {
+    const chunkLeft = i * MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ jsx4(
       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__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     Wrapper,
     {
       $index: index,
@@ -657,8 +784,8 @@ var Channel = (props) => {
 };
 
 // src/components/ErrorBoundary.tsx
-import React2 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import React3 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var errorContainerStyle = {
   padding: "16px",
   background: "#1a1a2e",
@@ -672,7 +799,7 @@ var errorContainerStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var PlaylistErrorBoundary = class extends React2.Component {
+var PlaylistErrorBoundary = class extends React3.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -688,7 +815,7 @@ var PlaylistErrorBoundary = class extends React2.Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ jsx4("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
+      return /* @__PURE__ */ jsx5("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
     }
     return this.props.children;
   }
@@ -701,7 +828,7 @@ import { CSS } from "@dnd-kit/utilities";
 
 // src/components/ClipHeader.tsx
 import styled10 from "styled-components";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var CLIP_HEADER_HEIGHT = 22;
 var HeaderContainer = styled10.div`
   position: relative;
@@ -741,27 +868,27 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     HeaderContainer,
     {
       $isDragging: false,
       $interactive: false,
       $isSelected: isSelected,
-      children: /* @__PURE__ */ jsx5(TrackName, { children: trackName })
+      children: /* @__PURE__ */ jsx6(TrackName, { children: trackName })
     }
   );
 };
 var ClipHeader = ({
   clipId,
-  trackIndex,
-  clipIndex,
+  trackIndex: _trackIndex,
+  clipIndex: _clipIndex,
   trackName,
   isSelected = false,
   disableDrag = false,
   dragHandleProps
 }) => {
   if (disableDrag || !dragHandleProps) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       ClipHeaderPresentational,
       {
         trackName,
@@ -770,7 +897,7 @@ var ClipHeader = ({
     );
   }
   const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     HeaderContainer,
     {
       ref: setActivatorNodeRef,
@@ -779,15 +906,15 @@ var ClipHeader = ({
       $isSelected: isSelected,
       ...listeners,
       ...attributes,
-      children: /* @__PURE__ */ jsx5(TrackName, { children: trackName })
+      children: /* @__PURE__ */ jsx6(TrackName, { children: trackName })
     }
   );
 };
 
 // src/components/ClipBoundary.tsx
-import React3 from "react";
+import React4 from "react";
 import styled11 from "styled-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var CLIP_BOUNDARY_WIDTH = 8;
 var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = styled11.div`
@@ -821,18 +948,18 @@ var BoundaryContainer = styled11.div`
 `;
 var ClipBoundary = ({
   clipId,
-  trackIndex,
-  clipIndex,
+  trackIndex: _trackIndex,
+  clipIndex: _clipIndex,
   edge,
   dragHandleProps,
   touchOptimized = false
 }) => {
-  const [isHovered, setIsHovered] = React3.useState(false);
+  const [isHovered, setIsHovered] = React4.useState(false);
   if (!dragHandleProps) {
     return null;
   }
   const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     BoundaryContainer,
     {
       ref: setActivatorNodeRef,
@@ -852,7 +979,7 @@ var ClipBoundary = ({
 
 // src/components/FadeOverlay.tsx
 import styled12, { useTheme } from "styled-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var FadeContainer = styled12.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -909,7 +1036,7 @@ var FadeOverlay = ({
   const theme = useTheme();
   if (width < 1) return null;
   const fillColor = color || theme?.fadeOverlayColor || "rgba(0, 0, 0, 0.4)";
-  return /* @__PURE__ */ jsx7(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ jsx7(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ jsx8(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx8(
     "path",
     {
       d: generateFadePath(width, 100, curveType),
@@ -919,7 +1046,7 @@ var FadeOverlay = ({
 };
 
 // src/components/Clip.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var ClipContainer = styled13.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
     left: `${props.$left}px`,
@@ -1017,7 +1144,7 @@ var Clip = ({
       "data-track-id": trackId,
       onMouseDown,
       children: [
-        showHeader && /* @__PURE__ */ jsx8(
+        showHeader && /* @__PURE__ */ jsx9(
           ClipHeader,
           {
             clipId,
@@ -1031,7 +1158,7 @@ var Clip = ({
         ),
         /* @__PURE__ */ jsxs2(ChannelsWrapper, { $isOverlay: isOverlay, children: [
           children,
-          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ jsx8(
+          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ jsx9(
             FadeOverlay,
             {
               left: 0,
@@ -1040,7 +1167,7 @@ var Clip = ({
               curveType: fadeIn.type
             }
           ),
-          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ jsx8(
+          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ jsx9(
             FadeOverlay,
             {
               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -1051,7 +1178,7 @@ var Clip = ({
           )
         ] }),
         showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             ClipBoundary,
             {
               clipId,
@@ -1067,7 +1194,7 @@ var Clip = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             ClipBoundary,
             {
               clipId,
@@ -1091,7 +1218,7 @@ var Clip = ({
 
 // src/components/MasterVolumeControl.tsx
 import styled14 from "styled-components";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var VolumeContainer = styled14.div`
   display: inline-flex;
   align-items: center;
@@ -1114,8 +1241,8 @@ var MasterVolumeControl = ({
     onChange(parseFloat(e.target.value) / 100);
   };
   return /* @__PURE__ */ jsxs3(VolumeContainer, { className, children: [
-    /* @__PURE__ */ jsx9(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
+    /* @__PURE__ */ jsx10(
       VolumeSlider,
       {
         min: "0",
@@ -1130,9 +1257,9 @@ var MasterVolumeControl = ({
 };
 
 // src/components/Playhead.tsx
-import { useRef as useRef2, useEffect } from "react";
+import { useRef as useRef3, useEffect as useEffect3 } from "react";
 import styled15 from "styled-components";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var PlayheadLine = styled15.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
@@ -1149,7 +1276,7 @@ var PlayheadLine = styled15.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ jsx10(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ jsx11(PlayheadLine, { $position: position, $color: color });
 };
 var PlayheadWithMarkerContainer = styled15.div`
   position: absolute;
@@ -1189,9 +1316,9 @@ var PlayheadWithMarker = ({
   controlsOffset,
   getAudioContextTime
 }) => {
-  const containerRef = useRef2(null);
-  const animationFrameRef = useRef2(null);
-  useEffect(() => {
+  const containerRef = useRef3(null);
+  const animationFrameRef = useRef3(null);
+  useEffect3(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1220,7 +1347,7 @@ var PlayheadWithMarker = ({
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, controlsOffset, currentTimeRef, playbackStartTimeRef, audioStartPositionRef, getAudioContextTime]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
@@ -1228,14 +1355,15 @@ var PlayheadWithMarker = ({
     }
   });
   return /* @__PURE__ */ jsxs4(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ jsx10(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ jsx10(MarkerLine, { $color: color })
+    /* @__PURE__ */ jsx11(MarkerTriangle, { $color: color }),
+    /* @__PURE__ */ jsx11(MarkerLine, { $color: color })
   ] });
 };
 
 // src/components/Playlist.tsx
 import styled16, { withTheme } from "styled-components";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useRef as useRef4, useCallback as useCallback3 } from "react";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var Wrapper2 = styled16.div`
   overflow-y: hidden;
   overflow-x: auto;
@@ -1289,16 +1417,21 @@ var Playlist = ({
   isSelecting,
   "data-playlist-state": playlistState
 }) => {
-  return /* @__PURE__ */ jsx11(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: scrollContainerRef, children: /* @__PURE__ */ jsxs5(
+  const wrapperRef = useRef4(null);
+  const handleRef = useCallback3((el) => {
+    wrapperRef.current = el;
+    scrollContainerRef?.(el);
+  }, [scrollContainerRef]);
+  return /* @__PURE__ */ jsx12(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: handleRef, children: /* @__PURE__ */ jsx12(ScrollViewportProvider, { containerRef: wrapperRef, children: /* @__PURE__ */ jsxs5(
     ScrollContainer,
     {
       $backgroundColor: backgroundColor,
       $width: scrollContainerWidth,
       children: [
-        timescale && /* @__PURE__ */ jsx11(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
+        timescale && /* @__PURE__ */ jsx12(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
         /* @__PURE__ */ jsxs5(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
           children,
-          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ jsx11(
+          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ jsx12(
             ClickOverlay,
             {
               $controlsWidth: controlsWidth,
@@ -1312,13 +1445,13 @@ var Playlist = ({
         ] })
       ]
     }
-  ) });
+  ) }) });
 };
 var StyledPlaylist = withTheme(Playlist);
 
 // src/components/Selection.tsx
 import styled17 from "styled-components";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var SelectionOverlay = styled17.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1342,13 +1475,13 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ jsx13(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
-import { useCallback as useCallback2, useRef as useRef3, useState } from "react";
+import { useCallback as useCallback4, useRef as useRef5, useState } from "react";
 import styled18 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var LoopRegionOverlayDiv = styled18.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1398,7 +1531,7 @@ var LoopRegion = ({
     return null;
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1407,7 +1540,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       LoopMarker,
       {
         $left: startPosition,
@@ -1416,7 +1549,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1498,11 +1631,11 @@ var LoopRegionMarkers = ({
   maxPosition = Infinity
 }) => {
   const [draggingMarker, setDraggingMarker] = useState(null);
-  const dragStartX = useRef3(0);
-  const dragStartPosition = useRef3(0);
-  const dragStartEnd = useRef3(0);
+  const dragStartX = useRef5(0);
+  const dragStartPosition = useRef5(0);
+  const dragStartEnd = useRef5(0);
   const width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = useCallback2((e, marker) => {
+  const handleMarkerMouseDown = useCallback4((e, marker) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggingMarker(marker);
@@ -1527,7 +1660,7 @@ var LoopRegionMarkers = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]);
-  const handleRegionMouseDown = useCallback2((e) => {
+  const handleRegionMouseDown = useCallback4((e) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggingMarker("region");
@@ -1561,7 +1694,7 @@ var LoopRegionMarkers = ({
     return null;
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1572,7 +1705,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1583,7 +1716,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1618,11 +1751,11 @@ var TimescaleLoopRegion = ({
   maxPosition = Infinity,
   controlsOffset = 0
 }) => {
-  const [isCreating, setIsCreating] = useState(false);
-  const createStartX = useRef3(0);
-  const containerRef = useRef3(null);
+  const [, setIsCreating] = useState(false);
+  const createStartX = useRef5(0);
+  const containerRef = useRef5(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = useCallback2((e) => {
+  const handleBackgroundMouseDown = useCallback4((e) => {
     const target = e.target;
     if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
       return;
@@ -1650,14 +1783,14 @@ var TimescaleLoopRegion = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [minPosition, maxPosition, onLoopRegionChange]);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     TimescaleLoopCreator,
     {
       ref: containerRef,
       $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ jsx13(
+      children: hasLoopRegion && /* @__PURE__ */ jsx14(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1676,10 +1809,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect5, useState as useState3 } from "react";
 
 // src/components/TimeInput.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState2 } from "react";
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1729,7 +1862,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var TimeInput = ({
   id,
   label,
@@ -1740,7 +1873,7 @@ var TimeInput = ({
   readOnly = false
 }) => {
   const [displayValue, setDisplayValue] = useState2("");
-  useEffect2(() => {
+  useEffect4(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -1761,8 +1894,8 @@ var TimeInput = ({
     }
   };
   return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx14(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx15(
       BaseInput,
       {
         type: "text",
@@ -1779,7 +1912,7 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
@@ -1787,7 +1920,7 @@ var SelectionTimeInputs = ({
   className
 }) => {
   const [timeFormat, setTimeFormat] = useState3("hh:mm:ss.uuu");
-  useEffect3(() => {
+  useEffect5(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -1812,8 +1945,8 @@ var SelectionTimeInputs = ({
       onSelectionChange(selectionStart, value);
     }
   };
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs8("div", { className, children: [
+    /* @__PURE__ */ jsx16(
       TimeInput,
       {
         id: "audio_start",
@@ -1824,7 +1957,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       TimeInput,
       {
         id: "audio_end",
@@ -1839,12 +1972,12 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-import { useState as useState4, createContext, useContext } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { useState as useState4, createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = createContext(getScale());
+var DevicePixelRatioContext = createContext2(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
   const [scale, setScale] = useState4(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
@@ -1854,13 +1987,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ jsx16(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ jsx17(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => useContext(DevicePixelRatioContext);
+var useDevicePixelRatio = () => useContext2(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var PlaylistInfoContext = createContext2({
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var PlaylistInfoContext = createContext3({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -1874,26 +2007,26 @@ var PlaylistInfoContext = createContext2({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => useContext2(PlaylistInfoContext);
+var usePlaylistInfo = () => useContext3(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-import { useContext as useContext3 } from "react";
+import { useContext as useContext4 } from "react";
 import { ThemeContext } from "styled-components";
-var useTheme2 = () => useContext3(ThemeContext);
+var useTheme2 = () => useContext4(ThemeContext);
 
 // src/contexts/TrackControls.tsx
-import { createContext as createContext3, useContext as useContext4, Fragment as Fragment5 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var TrackControlsContext = createContext3(/* @__PURE__ */ jsx17(Fragment5, {}));
-var useTrackControls = () => useContext4(TrackControlsContext);
+import { createContext as createContext4, useContext as useContext5, Fragment as Fragment4 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var TrackControlsContext = createContext4(/* @__PURE__ */ jsx18(Fragment4, {}));
+var useTrackControls = () => useContext5(TrackControlsContext);
 
 // src/contexts/Playout.tsx
 import {
   useState as useState5,
-  createContext as createContext4,
-  useContext as useContext5
+  createContext as createContext5,
+  useContext as useContext6
 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -1904,8 +2037,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = createContext4(defaultPlayout);
-var PlayoutStatusUpdateContext = createContext4({
+var PlayoutStatusContext = createContext5(defaultPlayout);
+var PlayoutStatusUpdateContext = createContext5({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -1922,16 +2055,16 @@ var PlayoutProvider = ({ children }) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ jsx18(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx18(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ jsx19(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx19(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => useContext5(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => useContext5(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => useContext6(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => useContext6(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-import { useLayoutEffect as useLayoutEffect2, useCallback as useCallback3, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useCallback as useCallback5, useRef as useRef6, useEffect as useEffect6 } from "react";
 import styled19 from "styled-components";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var MAX_CANVAS_WIDTH2 = 1e3;
+import { jsx as jsx20 } from "react/jsx-runtime";
+var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper3 = styled19.div.attrs((props) => ({
   style: {
     top: `${props.$waveHeight * props.$index}px`,
@@ -1947,11 +2080,13 @@ var Wrapper3 = styled19.div.attrs((props) => ({
 var SpectrogramCanvas = styled19.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;
@@ -1963,6 +2098,7 @@ function defaultGetColorMap() {
   }
   return lut;
 }
+var DEFAULT_COLOR_LUT = defaultGetColorMap();
 var SpectrogramChannel = ({
   index,
   channelIndex: channelIndexProp,
@@ -1980,11 +2116,30 @@ var SpectrogramChannel = ({
   onCanvasesReady
 }) => {
   const channelIndex = channelIndexProp ?? index;
-  const canvasesRef = useRef4([]);
-  const registeredIdsRef = useRef4([]);
-  const transferredCanvasesRef = useRef4(/* @__PURE__ */ new WeakSet());
+  const canvasesRef = useRef6([]);
+  const registeredIdsRef = useRef6([]);
+  const transferredCanvasesRef = useRef6(/* @__PURE__ */ new WeakSet());
+  const workerApiRef = useRef6(workerApi);
+  const onCanvasesReadyRef = useRef6(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
-  const canvasRef = useCallback3(
+  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 = useCallback5(
     (canvas) => {
       if (canvas !== null) {
         const idx = parseInt(canvas.dataset.index, 10);
@@ -1993,53 +2148,101 @@ var SpectrogramChannel = ({
     },
     []
   );
-  useEffect4(() => {
+  const lut = colorLUT ?? DEFAULT_COLOR_LUT;
+  const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
+  const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
+  const hasCustomFrequencyScale = Boolean(frequencyScaleFn);
+  useEffect6(() => {
+    workerApiRef.current = workerApi;
+  }, [workerApi]);
+  useEffect6(() => {
+    onCanvasesReadyRef.current = onCanvasesReady;
+  }, [onCanvasesReady]);
+  useEffect6(() => {
     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]);
+  useEffect6(() => {
+    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;
+  });
+  useEffect6(() => {
     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));
+  }, []);
   useLayoutEffect2(() => {
     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;
@@ -2059,7 +2262,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) {
@@ -2098,36 +2301,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__ */ jsx19(
-        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__ */ jsx20(
+      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__ */ jsx19(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  });
+  return /* @__PURE__ */ jsx20(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2152,7 +2349,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2173,8 +2370,8 @@ var SmartChannel = ({
   }
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
-    return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx21(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2193,7 +2390,7 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ jsx20("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ jsx21(
         Channel,
         {
           ...props,
@@ -2210,7 +2407,7 @@ var SmartChannel = ({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Channel,
     {
       ...props,
@@ -2227,9 +2424,9 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-import { useRef as useRef5, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useRef as useRef7, useLayoutEffect as useLayoutEffect3 } from "react";
 import styled20 from "styled-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = styled20.div`
   position: sticky;
@@ -2279,7 +2476,7 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = useRef5(null);
+  const canvasRef = useRef7(null);
   const devicePixelRatio = useDevicePixelRatio();
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
@@ -2311,7 +2508,7 @@ var SpectrogramLabels = ({
       }
     }
   }, [waveHeight, numChannels, frequencyScaleFn, minFrequency, maxFrequency, labelsColor, labelsBackground, devicePixelRatio, spectrogramHeight, clipHeaderOffset]);
-  return /* @__PURE__ */ jsx21(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx22(
     "canvas",
     {
       ref: canvasRef,
@@ -2327,10 +2524,10 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-import { useContext as useContext7 } from "react";
+import { useContext as useContext8 } from "react";
 
 // src/components/TimeScale.tsx
-import React13, { useRef as useRef6, useEffect as useEffect5, useContext as useContext6 } from "react";
+import React15, { useRef as useRef8, useEffect as useEffect7, useLayoutEffect as useLayoutEffect4, useContext as useContext7, useMemo, useCallback as useCallback6 } from "react";
 import styled21, { withTheme as withTheme2 } from "styled-components";
 
 // src/utils/conversions.ts
@@ -2354,7 +2551,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
@@ -2373,16 +2570,17 @@ var PlaylistTimeScaleScroll = styled21.div.attrs((props) => ({
   border-bottom: 1px solid ${(props) => props.theme.timeColor};
   box-sizing: border-box;
 `;
-var TimeTicks = styled21.canvas.attrs((props) => ({
+var TimeTickChunk = styled21.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 = styled21.div.attrs((props) => ({
   style: {
@@ -2404,60 +2602,111 @@ var TimeScale = (props) => {
     secondStep,
     renderTimestamp
   } = props;
-  const canvasInfo = /* @__PURE__ */ new Map();
-  const timeMarkers = [];
-  const canvasRef = useRef6(null);
+  const canvasRefsMap = useRef8(/* @__PURE__ */ new Map());
   const {
     sampleRate,
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = useContext6(PlaylistInfoContext);
+  } = useContext7(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  useEffect5(() => {
-    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 = useCallback6((canvas) => {
+    if (canvas !== null) {
+      const idx = parseInt(canvas.dataset.index, 10);
+      canvasRefsMap.current.set(idx, canvas);
+    }
+  }, []);
+  const { widthX, canvasInfo, timeMarkersWithPositions } = 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__ */ jsx23(React15.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx23(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__ */ jsx22(React13.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx22(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__ */ jsx23(
+      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);
+  useEffect7(() => {
+    const currentMap = canvasRefsMap.current;
+    for (const [idx, canvas] of currentMap.entries()) {
+      if (!canvas.isConnected) {
+        currentMap.delete(idx);
+      }
     }
-    counter += secondStep;
-  }
+  });
+  useLayoutEffect4(() => {
+    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__ */ jsxs10(
     PlaylistTimeScaleScroll,
     {
@@ -2465,17 +2714,8 @@ var TimeScale = (props) => {
       $controlWidth: showControls ? controlWidth : 0,
       $timeScaleHeight: timeScaleHeight,
       children: [
-        timeMarkers,
-        /* @__PURE__ */ jsx22(
-          TimeTicks,
-          {
-            $cssWidth: widthX,
-            $timeScaleHeight: timeScaleHeight,
-            width: widthX * devicePixelRatio,
-            height: timeScaleHeight * devicePixelRatio,
-            ref: canvasRef
-          }
-        )
+        visibleMarkers,
+        visibleChunks
       ]
     }
   );
@@ -2483,7 +2723,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = withTheme2(TimeScale);
 
 // src/components/SmartScale.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2557,9 +2797,9 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = useContext7(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = useContext8(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2573,7 +2813,7 @@ var SmartScale = ({ renderTimestamp }) => {
 
 // src/components/TimeFormatSelect.tsx
 import styled22 from "styled-components";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var SelectWrapper = styled22.div`
   display: inline-flex;
   align-items: center;
@@ -2596,7 +2836,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ jsx24(SelectWrapper, { className, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(SelectWrapper, { className, children: /* @__PURE__ */ jsx25(
     BaseSelect,
     {
       className: "time-format",
@@ -2604,14 +2844,14 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx24("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx25("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
 import styled23 from "styled-components";
-import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
 var Container = styled23.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
@@ -2677,7 +2917,7 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           ControlsWrapper,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2685,7 +2925,7 @@ var Track = ({
             children: controls
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2793,7 +3033,7 @@ var ButtonGroup = styled25.div`
 // src/components/TrackControls/CloseButton.tsx
 import styled26 from "styled-components";
 import { X as XIcon } from "@phosphor-icons/react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var StyledCloseButton = styled26.button`
   position: absolute;
   left: 0;
@@ -2818,7 +3058,7 @@ var StyledCloseButton = styled26.button`
 var CloseButton = ({
   onClick,
   title = "Remove track"
-}) => /* @__PURE__ */ jsx26(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx26(XIcon, { size: 12, weight: "bold" }) });
+}) => /* @__PURE__ */ jsx27(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx27(XIcon, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 import styled27 from "styled-components";
@@ -2854,23 +3094,23 @@ var Header = styled28.header`
 
 // src/components/TrackControls/VolumeDownIcon.tsx
 import { SpeakerLowIcon } from "@phosphor-icons/react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var VolumeDownIcon = (props) => /* @__PURE__ */ jsx27(SpeakerLowIcon, { weight: "light", ...props });
+import { jsx as jsx28 } from "react/jsx-runtime";
+var VolumeDownIcon = (props) => /* @__PURE__ */ jsx28(SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
 import { SpeakerHighIcon } from "@phosphor-icons/react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx28(SpeakerHighIcon, { weight: "light", ...props });
+import { jsx as jsx29 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx29(SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
 import { TrashIcon as PhosphorTrashIcon } from "@phosphor-icons/react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var TrashIcon = (props) => /* @__PURE__ */ jsx29(PhosphorTrashIcon, { weight: "light", ...props });
+import { jsx as jsx30 } from "react/jsx-runtime";
+var TrashIcon = (props) => /* @__PURE__ */ jsx30(PhosphorTrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/DotsIcon.tsx
 import { DotsThreeIcon } from "@phosphor-icons/react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var DotsIcon = (props) => /* @__PURE__ */ jsx30(DotsThreeIcon, { weight: "bold", ...props });
+import { jsx as jsx31 } from "react/jsx-runtime";
+var DotsIcon = (props) => /* @__PURE__ */ jsx31(DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
 import styled29 from "styled-components";
@@ -2938,10 +3178,10 @@ var SliderWrapper = styled30.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React15, { useState as useState6, useEffect as useEffect6, useRef as useRef7 } from "react";
+import React17, { useState as useState6, useEffect as useEffect8, useRef as useRef9 } from "react";
 import { createPortal } from "react-dom";
 import styled31 from "styled-components";
-import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 var MenuContainer = styled31.div`
   position: relative;
   display: inline-block;
@@ -2986,9 +3226,9 @@ var TrackMenu = ({
   const close = () => setOpen(false);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
   const [dropdownPos, setDropdownPos] = useState6({ top: 0, left: 0 });
-  const buttonRef = useRef7(null);
-  const dropdownRef = useRef7(null);
-  useEffect6(() => {
+  const buttonRef = useRef9(null);
+  const dropdownRef = useRef9(null);
+  useEffect8(() => {
     if (open && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -2997,7 +3237,7 @@ var TrackMenu = ({
       });
     }
   }, [open]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3009,7 +3249,7 @@ var TrackMenu = ({
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
   return /* @__PURE__ */ jsxs12(MenuContainer, { children: [
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(
       MenuButton,
       {
         ref: buttonRef,
@@ -3020,19 +3260,19 @@ var TrackMenu = ({
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ jsx31(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ jsx32(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ jsxs12(React15.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsx31(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ jsxs12(React17.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx32(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3072,6 +3312,7 @@ export {
   InlineLabel,
   LoopRegion,
   LoopRegionMarkers,
+  MAX_CANVAS_WIDTH,
   MasterVolumeControl,
   Playhead,
   PlayheadWithMarker,
@@ -3080,6 +3321,7 @@ export {
   PlaylistInfoContext,
   PlayoutProvider,
   ScreenReaderOnly,
+  ScrollViewportProvider,
   Selection,
   SelectionTimeInputs,
   Slider,
@@ -3115,6 +3357,8 @@ export {
   usePlaylistInfo,
   usePlayoutStatus,
   usePlayoutStatusUpdate,
+  useScrollViewport,
+  useScrollViewportSelector,
   useTheme2 as useTheme,
   useTrackControls,
   waveformColorToCss