@waveform-playlist/ui-components 7.1.2 → 8.0.0

package/dist/index.mjs

@@ -8,10 +8,7 @@ var PositionDisplay = styled.span`
   color: ${(props) => props.theme?.textColor || "#333"};
   user-select: none;
 `;
-var AudioPosition = ({
-  formattedTime,
-  className
-}) => {
+var AudioPosition = ({ formattedTime, className }) => {
   return /* @__PURE__ */ jsx(PositionDisplay, { className, "aria-label": "Audio position", children: formattedTime });
 };
 
@@ -31,7 +28,9 @@ var BaseButton = styled2.button`
   border-radius: ${(props) => props.theme.borderRadius};
   cursor: pointer;
   outline: none;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
 
   &:hover:not(:disabled) {
@@ -128,7 +127,9 @@ var BaseInput = styled5.input`
   border: 1px solid ${(props) => props.theme.inputBorder};
   border-radius: ${(props) => props.theme.borderRadius};
   outline: none;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 
   &::placeholder {
     color: ${(props) => props.theme.inputPlaceholder};
@@ -196,7 +197,9 @@ var BaseSelect = styled7.select`
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 
   &:focus {
     border-color: ${(props) => props.theme.inputFocusBorder};
@@ -242,7 +245,9 @@ var BaseSlider = styled8.input.attrs({ type: "range" })`
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    transition:
+      transform 0.15s ease,
+      box-shadow 0.15s ease;
   }
 
   &::-webkit-slider-thumb:hover {
@@ -259,7 +264,9 @@ var BaseSlider = styled8.input.attrs({ type: "range" })`
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    transition:
+      transform 0.15s ease,
+      box-shadow 0.15s ease;
   }
 
   &::-moz-range-thumb:hover {
@@ -530,10 +537,7 @@ var ViewportStoreContext = createContext(null);
 var EMPTY_SUBSCRIBE = () => () => {
 };
 var NULL_SNAPSHOT = () => null;
-var ScrollViewportProvider = ({
-  containerRef,
-  children
-}) => {
+var ScrollViewportProvider = ({ containerRef, children }) => {
   const storeRef = useRef(null);
   if (storeRef.current === null) {
     storeRef.current = new ViewportStore();
@@ -588,7 +592,7 @@ function useScrollViewportSelector(selector) {
     () => selector(null)
   );
 }
-function useVisibleChunkIndices(totalWidth, chunkWidth) {
+function useVisibleChunkIndices(totalWidth, chunkWidth, originX = 0) {
   const visibleChunkKey = useScrollViewportSelector((viewport) => {
     const totalChunks = Math.ceil(totalWidth / chunkWidth);
     const indices = [];
@@ -596,8 +600,9 @@ function useVisibleChunkIndices(totalWidth, chunkWidth) {
       const chunkLeft = i * chunkWidth;
       const thisChunkWidth = Math.min(totalWidth - chunkLeft, chunkWidth);
       if (viewport) {
-        const chunkEnd = chunkLeft + thisChunkWidth;
-        if (chunkEnd <= viewport.visibleStart || chunkLeft >= viewport.visibleEnd) {
+        const chunkLeftGlobal = originX + chunkLeft;
+        const chunkEndGlobal = chunkLeftGlobal + thisChunkWidth;
+        if (chunkEndGlobal <= viewport.visibleStart || chunkLeftGlobal >= viewport.visibleEnd) {
           continue;
         }
       }
@@ -611,6 +616,16 @@ function useVisibleChunkIndices(totalWidth, chunkWidth) {
   );
 }
 
+// src/contexts/ClipViewportOrigin.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ClipViewportOriginContext = createContext2(0);
+var ClipViewportOriginProvider = ({
+  originX,
+  children
+}) => /* @__PURE__ */ jsx4(ClipViewportOriginContext.Provider, { value: originX, children });
+var useClipViewportOrigin = () => useContext2(ClipViewportOriginContext);
+
 // src/hooks/useChunkedCanvasRefs.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
 function useChunkedCanvasRefs() {
@@ -634,7 +649,7 @@ function useChunkedCanvasRefs() {
 
 // src/components/Channel.tsx
 import { MAX_CANVAS_WIDTH } from "@waveform-playlist/core";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
     return color;
@@ -695,7 +710,8 @@ var Channel = (props) => {
     drawMode = "inverted"
   } = props;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH);
+  const clipOriginX = useClipViewportOrigin();
+  const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH, clipOriginX);
   useLayoutEffect(() => {
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
@@ -715,12 +731,7 @@ var Channel = (props) => {
         } else {
           fillColor = waveOutlineColor;
         }
-        ctx.fillStyle = createCanvasFillStyle(
-          ctx,
-          fillColor,
-          canvasWidth,
-          waveHeight
-        );
+        ctx.fillStyle = createCanvasFillStyle(ctx, fillColor, canvasWidth, waveHeight);
         const canvasStartGlobal = globalPixelOffset;
         const canvasEndGlobal = globalPixelOffset + canvasWidth;
         const firstBarGlobal = Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
@@ -760,7 +771,7 @@ var Channel = (props) => {
   const waveforms = visibleChunkIndices.map((i) => {
     const chunkLeft = i * MAX_CANVAS_WIDTH;
     const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       Waveform,
       {
         $cssWidth: currentWidth,
@@ -776,7 +787,7 @@ var Channel = (props) => {
   });
   const bgColor = waveFillColor;
   const backgroundCss = transparentBackground ? "transparent" : waveformColorToCss(bgColor);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     Wrapper,
     {
       $index: index,
@@ -790,8 +801,8 @@ var Channel = (props) => {
 };
 
 // src/components/ErrorBoundary.tsx
-import React3 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import React4 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var errorContainerStyle = {
   padding: "16px",
   background: "#1a1a2e",
@@ -805,7 +816,7 @@ var errorContainerStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var PlaylistErrorBoundary = class extends React3.Component {
+var PlaylistErrorBoundary = class extends React4.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -821,7 +832,7 @@ var PlaylistErrorBoundary = class extends React3.Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ jsx5("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
+      return /* @__PURE__ */ jsx6("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
     }
     return this.props.children;
   }
@@ -834,7 +845,7 @@ import { CSS } from "@dnd-kit/utilities";
 
 // src/components/ClipHeader.tsx
 import styled10 from "styled-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var CLIP_HEADER_HEIGHT = 22;
 var HeaderContainer = styled10.div`
   position: relative;
@@ -874,15 +885,7 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ jsx6(
-    HeaderContainer,
-    {
-      $isDragging: false,
-      $interactive: false,
-      $isSelected: isSelected,
-      children: /* @__PURE__ */ jsx6(TrackName, { children: trackName })
-    }
-  );
+  return /* @__PURE__ */ jsx7(HeaderContainer, { $isDragging: false, $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ jsx7(TrackName, { children: trackName }) });
 };
 var ClipHeader = ({
   clipId,
@@ -894,16 +897,10 @@ var ClipHeader = ({
   dragHandleProps
 }) => {
   if (disableDrag || !dragHandleProps) {
-    return /* @__PURE__ */ jsx6(
-      ClipHeaderPresentational,
-      {
-        trackName,
-        isSelected
-      }
-    );
+    return /* @__PURE__ */ jsx7(ClipHeaderPresentational, { trackName, isSelected });
   }
   const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     HeaderContainer,
     {
       ref: setActivatorNodeRef,
@@ -912,15 +909,15 @@ var ClipHeader = ({
       $isSelected: isSelected,
       ...listeners,
       ...attributes,
-      children: /* @__PURE__ */ jsx6(TrackName, { children: trackName })
+      children: /* @__PURE__ */ jsx7(TrackName, { children: trackName })
     }
   );
 };
 
 // src/components/ClipBoundary.tsx
-import React4 from "react";
+import React5 from "react";
 import styled11 from "styled-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var CLIP_BOUNDARY_WIDTH = 8;
 var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = styled11.div`
@@ -960,12 +957,12 @@ var ClipBoundary = ({
   dragHandleProps,
   touchOptimized = false
 }) => {
-  const [isHovered, setIsHovered] = React4.useState(false);
+  const [isHovered, setIsHovered] = React5.useState(false);
   if (!dragHandleProps) {
     return null;
   }
   const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     BoundaryContainer,
     {
       ref: setActivatorNodeRef,
@@ -985,7 +982,7 @@ var ClipBoundary = ({
 
 // src/components/FadeOverlay.tsx
 import styled12, { useTheme } from "styled-components";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var FadeContainer = styled12.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1042,17 +1039,11 @@ var FadeOverlay = ({
   const theme = useTheme();
   if (width < 1) return null;
   const fillColor = color || theme?.fadeOverlayColor || "rgba(0, 0, 0, 0.4)";
-  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),
-      fill: fillColor
-    }
-  ) }) });
+  return /* @__PURE__ */ jsx9(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ jsx9(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx9("path", { d: generateFadePath(width, 100, curveType), fill: fillColor }) }) });
 };
 
 // src/components/Clip.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var ClipContainer = styled13.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
     left: `${props.$left}px`,
@@ -1150,7 +1141,7 @@ var Clip = ({
       "data-track-id": trackId,
       onMouseDown,
       children: [
-        showHeader && /* @__PURE__ */ jsx9(
+        showHeader && /* @__PURE__ */ jsx10(
           ClipHeader,
           {
             clipId,
@@ -1162,9 +1153,9 @@ var Clip = ({
             dragHandleProps: enableDrag ? { attributes, listeners, setActivatorNodeRef } : void 0
           }
         ),
-        /* @__PURE__ */ jsxs2(ChannelsWrapper, { $isOverlay: isOverlay, children: [
+        /* @__PURE__ */ jsx10(ClipViewportOriginProvider, { originX: left, children: /* @__PURE__ */ jsxs2(ChannelsWrapper, { $isOverlay: isOverlay, children: [
           children,
-          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ jsx9(
+          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ jsx10(
             FadeOverlay,
             {
               left: 0,
@@ -1173,7 +1164,7 @@ var Clip = ({
               curveType: fadeIn.type
             }
           ),
-          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ jsx9(
+          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ jsx10(
             FadeOverlay,
             {
               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -1182,9 +1173,9 @@ var Clip = ({
               curveType: fadeOut.type
             }
           )
-        ] }),
+        ] }) }),
         showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             ClipBoundary,
             {
               clipId,
@@ -1200,7 +1191,7 @@ var Clip = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             ClipBoundary,
             {
               clipId,
@@ -1224,7 +1215,7 @@ var Clip = ({
 
 // src/components/MasterVolumeControl.tsx
 import styled14 from "styled-components";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var VolumeContainer = styled14.div`
   display: inline-flex;
   align-items: center;
@@ -1247,8 +1238,8 @@ var MasterVolumeControl = ({
     onChange(parseFloat(e.target.value) / 100);
   };
   return /* @__PURE__ */ jsxs3(VolumeContainer, { className, children: [
-    /* @__PURE__ */ jsx10(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
+    /* @__PURE__ */ jsx11(
       VolumeSlider,
       {
         min: "0",
@@ -1265,7 +1256,7 @@ var MasterVolumeControl = ({
 // src/components/Playhead.tsx
 import { useRef as useRef3, useEffect as useEffect3 } from "react";
 import styled15 from "styled-components";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var PlayheadLine = styled15.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
@@ -1282,7 +1273,7 @@ var PlayheadLine = styled15.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ jsx11(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ jsx12(PlayheadLine, { $position: position, $color: color });
 };
 var PlayheadWithMarkerContainer = styled15.div`
   position: absolute;
@@ -1352,7 +1343,16 @@ var PlayheadWithMarker = ({
         animationFrameRef.current = null;
       }
     };
-  }, [isPlaying, sampleRate, samplesPerPixel, controlsOffset, currentTimeRef, playbackStartTimeRef, audioStartPositionRef, getAudioContextTime]);
+  }, [
+    isPlaying,
+    sampleRate,
+    samplesPerPixel,
+    controlsOffset,
+    currentTimeRef,
+    playbackStartTimeRef,
+    audioStartPositionRef,
+    getAudioContextTime
+  ]);
   useEffect3(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
@@ -1361,15 +1361,15 @@ var PlayheadWithMarker = ({
     }
   });
   return /* @__PURE__ */ jsxs4(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ jsx11(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ jsx11(MarkerLine, { $color: color })
+    /* @__PURE__ */ jsx12(MarkerTriangle, { $color: color }),
+    /* @__PURE__ */ jsx12(MarkerLine, { $color: color })
   ] });
 };
 
 // src/components/Playlist.tsx
 import styled16, { withTheme } from "styled-components";
 import { useRef as useRef4, useCallback as useCallback3 } from "react";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var Wrapper2 = styled16.div`
   overflow-y: hidden;
   overflow-x: auto;
@@ -1424,40 +1424,36 @@ var Playlist = ({
   "data-playlist-state": playlistState
 }) => {
   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__ */ jsx12(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
-        /* @__PURE__ */ jsxs5(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
-          children,
-          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ jsx12(
-            ClickOverlay,
-            {
-              $controlsWidth: controlsWidth,
-              $isSelecting: isSelecting,
-              onClick: onTracksClick,
-              onMouseDown: onTracksMouseDown,
-              onMouseMove: onTracksMouseMove,
-              onMouseUp: onTracksMouseUp
-            }
-          )
-        ] })
-      ]
-    }
-  ) }) });
+  const handleRef = useCallback3(
+    (el) => {
+      wrapperRef.current = el;
+      scrollContainerRef?.(el);
+    },
+    [scrollContainerRef]
+  );
+  return /* @__PURE__ */ jsx13(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: handleRef, children: /* @__PURE__ */ jsx13(ScrollViewportProvider, { containerRef: wrapperRef, children: /* @__PURE__ */ jsxs5(ScrollContainer, { $backgroundColor: backgroundColor, $width: scrollContainerWidth, children: [
+    timescale && /* @__PURE__ */ jsx13(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
+    /* @__PURE__ */ jsxs5(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
+      children,
+      (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ jsx13(
+        ClickOverlay,
+        {
+          $controlsWidth: controlsWidth,
+          $isSelecting: isSelecting,
+          onClick: onTracksClick,
+          onMouseDown: onTracksMouseDown,
+          onMouseMove: onTracksMouseMove,
+          onMouseUp: onTracksMouseUp
+        }
+      )
+    ] })
+  ] }) }) });
 };
 var StyledPlaylist = withTheme(Playlist);
 
 // src/components/Selection.tsx
 import styled17 from "styled-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var SelectionOverlay = styled17.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1481,13 +1477,13 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx13(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ jsx14(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
 import { useCallback as useCallback4, useRef as useRef5, useState } from "react";
 import styled18 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var LoopRegionOverlayDiv = styled18.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1537,7 +1533,7 @@ var LoopRegion = ({
     return null;
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1546,7 +1542,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       LoopMarker,
       {
         $left: startPosition,
@@ -1555,7 +1551,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1641,66 +1637,72 @@ var LoopRegionMarkers = ({
   const dragStartPosition = useRef5(0);
   const dragStartEnd = useRef5(0);
   const width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = useCallback4((e, marker) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDraggingMarker(marker);
-    dragStartX.current = e.clientX;
-    dragStartPosition.current = marker === "start" ? startPosition : endPosition;
-    const handleMouseMove = (moveEvent) => {
-      const delta = moveEvent.clientX - dragStartX.current;
-      const newPosition = dragStartPosition.current + delta;
-      if (marker === "start") {
-        const clampedPosition = Math.max(minPosition, Math.min(endPosition - 10, newPosition));
-        onLoopStartChange?.(clampedPosition);
-      } else {
-        const clampedPosition = Math.max(startPosition + 10, Math.min(maxPosition, newPosition));
-        onLoopEndChange?.(clampedPosition);
-      }
-    };
-    const handleMouseUp = () => {
-      setDraggingMarker(null);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]);
-  const handleRegionMouseDown = useCallback4((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDraggingMarker("region");
-    dragStartX.current = e.clientX;
-    dragStartPosition.current = startPosition;
-    dragStartEnd.current = endPosition;
-    const regionWidth = endPosition - startPosition;
-    const handleMouseMove = (moveEvent) => {
-      const delta = moveEvent.clientX - dragStartX.current;
-      let newStart = dragStartPosition.current + delta;
-      let newEnd = dragStartEnd.current + delta;
-      if (newStart < minPosition) {
-        newStart = minPosition;
-        newEnd = minPosition + regionWidth;
-      }
-      if (newEnd > maxPosition) {
-        newEnd = maxPosition;
-        newStart = maxPosition - regionWidth;
-      }
-      onLoopRegionMove?.(newStart, newEnd);
-    };
-    const handleMouseUp = () => {
-      setDraggingMarker(null);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [startPosition, endPosition, minPosition, maxPosition, onLoopRegionMove]);
+  const handleMarkerMouseDown = useCallback4(
+    (e, marker) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDraggingMarker(marker);
+      dragStartX.current = e.clientX;
+      dragStartPosition.current = marker === "start" ? startPosition : endPosition;
+      const handleMouseMove = (moveEvent) => {
+        const delta = moveEvent.clientX - dragStartX.current;
+        const newPosition = dragStartPosition.current + delta;
+        if (marker === "start") {
+          const clampedPosition = Math.max(minPosition, Math.min(endPosition - 10, newPosition));
+          onLoopStartChange?.(clampedPosition);
+        } else {
+          const clampedPosition = Math.max(startPosition + 10, Math.min(maxPosition, newPosition));
+          onLoopEndChange?.(clampedPosition);
+        }
+      };
+      const handleMouseUp = () => {
+        setDraggingMarker(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]
+  );
+  const handleRegionMouseDown = useCallback4(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDraggingMarker("region");
+      dragStartX.current = e.clientX;
+      dragStartPosition.current = startPosition;
+      dragStartEnd.current = endPosition;
+      const regionWidth = endPosition - startPosition;
+      const handleMouseMove = (moveEvent) => {
+        const delta = moveEvent.clientX - dragStartX.current;
+        let newStart = dragStartPosition.current + delta;
+        let newEnd = dragStartEnd.current + delta;
+        if (newStart < minPosition) {
+          newStart = minPosition;
+          newEnd = minPosition + regionWidth;
+        }
+        if (newEnd > maxPosition) {
+          newEnd = maxPosition;
+          newStart = maxPosition - regionWidth;
+        }
+        onLoopRegionMove?.(newStart, newEnd);
+      };
+      const handleMouseUp = () => {
+        setDraggingMarker(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [startPosition, endPosition, minPosition, maxPosition, onLoopRegionMove]
+  );
   if (width <= 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1711,7 +1713,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1722,7 +1724,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1761,42 +1763,45 @@ var TimescaleLoopRegion = ({
   const createStartX = useRef5(0);
   const containerRef = useRef5(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = useCallback4((e) => {
-    const target = e.target;
-    if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
-      return;
-    }
-    e.preventDefault();
-    setIsCreating(true);
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const clickX = e.clientX - rect.left;
-    const clampedX = Math.max(minPosition, Math.min(maxPosition, clickX));
-    createStartX.current = clampedX;
-    onLoopRegionChange?.(clampedX, clampedX);
-    const handleMouseMove = (moveEvent) => {
-      const currentX = moveEvent.clientX - rect.left;
-      const clampedCurrentX = Math.max(minPosition, Math.min(maxPosition, currentX));
-      const newStart = Math.min(createStartX.current, clampedCurrentX);
-      const newEnd = Math.max(createStartX.current, clampedCurrentX);
-      onLoopRegionChange?.(newStart, newEnd);
-    };
-    const handleMouseUp = () => {
-      setIsCreating(false);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [minPosition, maxPosition, onLoopRegionChange]);
-  return /* @__PURE__ */ jsx14(
+  const handleBackgroundMouseDown = useCallback4(
+    (e) => {
+      const target = e.target;
+      if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
+        return;
+      }
+      e.preventDefault();
+      setIsCreating(true);
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const clickX = e.clientX - rect.left;
+      const clampedX = Math.max(minPosition, Math.min(maxPosition, clickX));
+      createStartX.current = clampedX;
+      onLoopRegionChange?.(clampedX, clampedX);
+      const handleMouseMove = (moveEvent) => {
+        const currentX = moveEvent.clientX - rect.left;
+        const clampedCurrentX = Math.max(minPosition, Math.min(maxPosition, currentX));
+        const newStart = Math.min(createStartX.current, clampedCurrentX);
+        const newEnd = Math.max(createStartX.current, clampedCurrentX);
+        onLoopRegionChange?.(newStart, newEnd);
+      };
+      const handleMouseUp = () => {
+        setIsCreating(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [minPosition, maxPosition, onLoopRegionChange]
+  );
+  return /* @__PURE__ */ jsx15(
     TimescaleLoopCreator,
     {
       ref: containerRef,
       $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ jsx14(
+      children: hasLoopRegion && /* @__PURE__ */ jsx15(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1868,7 +1873,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var TimeInput = ({
   id,
   label,
@@ -1900,8 +1905,8 @@ var TimeInput = ({
     }
   };
   return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx15(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx16(
       BaseInput,
       {
         type: "text",
@@ -1918,7 +1923,7 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
@@ -1952,7 +1957,7 @@ var SelectionTimeInputs = ({
     }
   };
   return /* @__PURE__ */ jsxs8("div", { className, children: [
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       TimeInput,
       {
         id: "audio_start",
@@ -1963,7 +1968,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       TimeInput,
       {
         id: "audio_end",
@@ -1978,12 +1983,12 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-import { useState as useState4, createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { useState as useState4, createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = createContext2(getScale());
+var DevicePixelRatioContext = createContext3(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
   const [scale, setScale] = useState4(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
@@ -1993,13 +1998,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ jsx17(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ jsx18(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => useContext2(DevicePixelRatioContext);
+var useDevicePixelRatio = () => useContext3(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var PlaylistInfoContext = createContext3({
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var PlaylistInfoContext = createContext4({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -2013,26 +2018,26 @@ var PlaylistInfoContext = createContext3({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => useContext3(PlaylistInfoContext);
+var usePlaylistInfo = () => useContext4(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-import { useContext as useContext4 } from "react";
+import { useContext as useContext5 } from "react";
 import { ThemeContext } from "styled-components";
-var useTheme2 = () => useContext4(ThemeContext);
+var useTheme2 = () => useContext5(ThemeContext);
 
 // src/contexts/TrackControls.tsx
-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);
+import { createContext as createContext5, useContext as useContext6, Fragment as Fragment4 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var TrackControlsContext = createContext5(/* @__PURE__ */ jsx19(Fragment4, {}));
+var useTrackControls = () => useContext6(TrackControlsContext);
 
 // src/contexts/Playout.tsx
 import {
   useState as useState5,
-  createContext as createContext5,
-  useContext as useContext6
+  createContext as createContext6,
+  useContext as useContext7
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -2043,8 +2048,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = createContext5(defaultPlayout);
-var PlayoutStatusUpdateContext = createContext5({
+var PlayoutStatusContext = createContext6(defaultPlayout);
+var PlayoutStatusUpdateContext = createContext6({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2061,16 +2066,16 @@ var PlayoutProvider = ({ children }) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ jsx19(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx19(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ jsx20(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx20(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => useContext6(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => useContext6(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => useContext7(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => useContext7(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useEffect as useEffect6 } from "react";
 import styled19 from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH2 } from "@waveform-playlist/core";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper3 = styled19.div.attrs((props) => ({
   style: {
@@ -2129,7 +2134,8 @@ var SpectrogramChannel = ({
   const workerApiRef = useRef6(workerApi);
   const onCanvasesReadyRef = useRef6(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
-  const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH2);
+  const clipOriginX = useClipViewportOrigin();
+  const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH2, clipOriginX);
   const lut = colorLUT ?? DEFAULT_COLOR_LUT;
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
@@ -2219,7 +2225,14 @@ var SpectrogramChannel = ({
   }, []);
   useLayoutEffect2(() => {
     if (isWorkerMode || !data) return;
-    const { frequencyBinCount, frameCount, hopSize, sampleRate, gainDb, rangeDb: rawRangeDb } = data;
+    const {
+      frequencyBinCount,
+      frameCount,
+      hopSize,
+      sampleRate,
+      gainDb,
+      rangeDb: rawRangeDb
+    } = data;
     const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
     const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
@@ -2283,11 +2296,25 @@ var SpectrogramChannel = ({
         ctx.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height);
       }
     }
-  }, [canvasMapRef, isWorkerMode, data, length, waveHeight, devicePixelRatio, samplesPerPixel, lut, minFrequency, maxF, scaleFn, hasCustomFrequencyScale, visibleChunkIndices]);
+  }, [
+    canvasMapRef,
+    isWorkerMode,
+    data,
+    length,
+    waveHeight,
+    devicePixelRatio,
+    samplesPerPixel,
+    lut,
+    minFrequency,
+    maxF,
+    scaleFn,
+    hasCustomFrequencyScale,
+    visibleChunkIndices
+  ]);
   const canvases = visibleChunkIndices.map((i) => {
     const chunkLeft = i * MAX_CANVAS_WIDTH2;
     const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH2);
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       SpectrogramCanvas,
       {
         $cssWidth: currentWidth,
@@ -2301,11 +2328,11 @@ var SpectrogramChannel = ({
       `${length}-${i}`
     );
   });
-  return /* @__PURE__ */ jsx20(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ jsx21(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2330,7 +2357,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2352,7 +2379,7 @@ var SmartChannel = ({
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
     return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2371,24 +2398,35 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ jsx21("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ jsx21(
-        Channel,
+      /* @__PURE__ */ jsx22(
+        "div",
         {
-          ...props,
-          index: 0,
-          waveOutlineColor,
-          waveFillColor,
-          waveHeight: halfHeight,
-          devicePixelRatio,
-          barWidth,
-          barGap,
-          transparentBackground,
-          drawMode
+          style: {
+            position: "absolute",
+            top: (props.index * 2 + 1) * halfHeight,
+            width: props.length,
+            height: halfHeight
+          },
+          children: /* @__PURE__ */ jsx22(
+            Channel,
+            {
+              ...props,
+              index: 0,
+              waveOutlineColor,
+              waveFillColor,
+              waveHeight: halfHeight,
+              devicePixelRatio,
+              barWidth,
+              barGap,
+              transparentBackground,
+              drawMode
+            }
+          )
         }
-      ) })
+      )
     ] });
   }
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Channel,
     {
       ...props,
@@ -2407,7 +2445,7 @@ var SmartChannel = ({
 // src/components/SpectrogramLabels.tsx
 import { useRef as useRef7, useLayoutEffect as useLayoutEffect3 } from "react";
 import styled20 from "styled-components";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = styled20.div`
   position: sticky;
@@ -2488,8 +2526,19 @@ var SpectrogramLabels = ({
         ctx.fillText(text, padding, y);
       }
     }
-  }, [waveHeight, numChannels, frequencyScaleFn, minFrequency, maxFrequency, labelsColor, labelsBackground, devicePixelRatio, spectrogramHeight, clipHeaderOffset]);
-  return /* @__PURE__ */ jsx22(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx22(
+  }, [
+    waveHeight,
+    numChannels,
+    frequencyScaleFn,
+    minFrequency,
+    maxFrequency,
+    labelsColor,
+    labelsBackground,
+    devicePixelRatio,
+    spectrogramHeight,
+    clipHeaderOffset
+  ]);
+  return /* @__PURE__ */ jsx23(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx23(
     "canvas",
     {
       ref: canvasRef,
@@ -2505,10 +2554,10 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-import { useContext as useContext8 } from "react";
+import { useContext as useContext9 } from "react";
 
 // src/components/TimeScale.tsx
-import React15, { useLayoutEffect as useLayoutEffect4, useContext as useContext7, useMemo as useMemo2 } from "react";
+import React16, { useLayoutEffect as useLayoutEffect4, useContext as useContext8, useMemo as useMemo2 } from "react";
 import styled21, { withTheme as withTheme2 } from "styled-components";
 
 // src/utils/conversions.ts
@@ -2533,7 +2582,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 
 // src/components/TimeScale.tsx
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
@@ -2590,7 +2639,7 @@ var TimeScale = (props) => {
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = useContext7(PlaylistInfoContext);
+  } = useContext8(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
   const { widthX, canvasInfo, timeMarkersWithPositions } = useMemo2(() => {
     const nextCanvasInfo = /* @__PURE__ */ new Map();
@@ -2603,7 +2652,7 @@ var TimeScale = (props) => {
       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);
+        const element = renderTimestamp ? /* @__PURE__ */ jsx24(React16.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx24(TimeStamp, { $left: pix, children: timestamp }, timestamp);
         nextMarkers.push({ pix, element });
         nextCanvasInfo.set(pix, timeScaleHeight);
       } else if (counter % bigStep === 0) {
@@ -2618,12 +2667,21 @@ var TimeScale = (props) => {
       canvasInfo: nextCanvasInfo,
       timeMarkersWithPositions: nextMarkers
     };
-  }, [duration, samplesPerPixel, sampleRate, marker, bigStep, secondStep, renderTimestamp, timeScaleHeight]);
+  }, [
+    duration,
+    samplesPerPixel,
+    sampleRate,
+    marker,
+    bigStep,
+    secondStep,
+    renderTimestamp,
+    timeScaleHeight
+  ]);
   const visibleChunkIndices = useVisibleChunkIndices(widthX, MAX_CANVAS_WIDTH3);
   const visibleChunks = visibleChunkIndices.map((i) => {
     const chunkLeft = i * MAX_CANVAS_WIDTH3;
     const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH3);
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       TimeTickChunk,
       {
         $cssWidth: chunkWidth,
@@ -2658,7 +2716,15 @@ var TimeScale = (props) => {
         ctx.fillRect(localX, scaleY, 1, scaleHeight);
       }
     }
-  }, [canvasMapRef, duration, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkIndices]);
+  }, [
+    canvasMapRef,
+    duration,
+    devicePixelRatio,
+    timeColor,
+    timeScaleHeight,
+    canvasInfo,
+    visibleChunkIndices
+  ]);
   return /* @__PURE__ */ jsxs10(
     PlaylistTimeScaleScroll,
     {
@@ -2675,7 +2741,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = withTheme2(TimeScale);
 
 // src/components/SmartScale.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2749,9 +2815,9 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = useContext8(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = useContext9(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2765,7 +2831,7 @@ var SmartScale = ({ renderTimestamp }) => {
 
 // src/components/TimeFormatSelect.tsx
 import styled22 from "styled-components";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var SelectWrapper = styled22.div`
   display: inline-flex;
   align-items: center;
@@ -2788,7 +2854,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ jsx25(SelectWrapper, { className, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(SelectWrapper, { className, children: /* @__PURE__ */ jsx26(
     BaseSelect,
     {
       className: "time-format",
@@ -2796,14 +2862,14 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx25("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx26("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
 import styled23 from "styled-components";
-import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx27, 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`
@@ -2869,15 +2935,8 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ jsx26(
-          ControlsWrapper,
-          {
-            $controlWidth: show ? controlWidth : 0,
-            $isSelected: isSelected,
-            children: controls
-          }
-        ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(ControlsWrapper, { $controlWidth: show ? controlWidth : 0, $isSelected: isSelected, children: controls }),
+        /* @__PURE__ */ jsx27(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2908,8 +2967,11 @@ var Button = styled24.button.attrs({
   font-size: ${(props) => props.theme.fontSizeSmall};
   line-height: 1;
   border-radius: ${(props) => props.theme.borderRadius};
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
   cursor: pointer;
 
   ${(props) => {
@@ -2985,7 +3047,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 jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var StyledCloseButton = styled26.button`
   position: absolute;
   left: 0;
@@ -3000,17 +3062,16 @@ var StyledCloseButton = styled26.button`
   align-items: center;
   justify-content: center;
   opacity: 0.7;
-  transition: opacity 0.15s, color 0.15s;
+  transition:
+    opacity 0.15s,
+    color 0.15s;
 
   &:hover {
     opacity: 1;
     color: #dc3545;
   }
 `;
-var CloseButton = ({
-  onClick,
-  title = "Remove track"
-}) => /* @__PURE__ */ jsx27(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx27(XIcon, { size: 12, weight: "bold" }) });
+var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ jsx28(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx28(XIcon, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 import styled27 from "styled-components";
@@ -3046,23 +3107,23 @@ var Header = styled28.header`
 
 // src/components/TrackControls/VolumeDownIcon.tsx
 import { SpeakerLowIcon } from "@phosphor-icons/react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var VolumeDownIcon = (props) => /* @__PURE__ */ jsx28(SpeakerLowIcon, { weight: "light", ...props });
+import { jsx as jsx29 } from "react/jsx-runtime";
+var VolumeDownIcon = (props) => /* @__PURE__ */ jsx29(SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
 import { SpeakerHighIcon } from "@phosphor-icons/react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx29(SpeakerHighIcon, { weight: "light", ...props });
+import { jsx as jsx30 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx30(SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
 import { TrashIcon as PhosphorTrashIcon } from "@phosphor-icons/react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var TrashIcon = (props) => /* @__PURE__ */ jsx30(PhosphorTrashIcon, { weight: "light", ...props });
+import { jsx as jsx31 } from "react/jsx-runtime";
+var TrashIcon = (props) => /* @__PURE__ */ jsx31(PhosphorTrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/DotsIcon.tsx
 import { DotsThreeIcon } from "@phosphor-icons/react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var DotsIcon = (props) => /* @__PURE__ */ jsx31(DotsThreeIcon, { weight: "bold", ...props });
+import { jsx as jsx32 } from "react/jsx-runtime";
+var DotsIcon = (props) => /* @__PURE__ */ jsx32(DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
 import styled29 from "styled-components";
@@ -3130,10 +3191,10 @@ var SliderWrapper = styled30.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React17, { useState as useState6, useEffect as useEffect7, useRef as useRef8 } from "react";
+import React18, { useState as useState6, useEffect as useEffect7, useRef as useRef8 } from "react";
 import { createPortal } from "react-dom";
 import styled31 from "styled-components";
-import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
 var MenuContainer = styled31.div`
   position: relative;
   display: inline-block;
@@ -3171,9 +3232,7 @@ var Divider = styled31.hr`
   border-top: 1px solid rgba(128, 128, 128, 0.3);
   margin: 0.35rem 0;
 `;
-var TrackMenu = ({
-  items: itemsProp
-}) => {
+var TrackMenu = ({ items: itemsProp }) => {
   const [open, setOpen] = useState6(false);
   const close = () => setOpen(false);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
@@ -3201,7 +3260,7 @@ var TrackMenu = ({
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
   return /* @__PURE__ */ jsxs12(MenuContainer, { children: [
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       MenuButton,
       {
         ref: buttonRef,
@@ -3212,19 +3271,19 @@ var TrackMenu = ({
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ jsx32(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ jsx33(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ jsxs12(React17.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsx32(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ jsxs12(React18.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx33(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3255,6 +3314,7 @@ export {
   ClipBoundary,
   ClipHeader,
   ClipHeaderPresentational,
+  ClipViewportOriginProvider,
   CloseButton,
   Controls,
   DevicePixelRatioProvider,
@@ -3304,6 +3364,7 @@ export {
   samplesToSeconds,
   secondsToPixels,
   secondsToSamples,
+  useClipViewportOrigin,
   useDevicePixelRatio,
   usePlaylistInfo,
   usePlayoutStatus,