@waveform-playlist/ui-components 7.1.2 → 8.0.0

package/dist/index.js

@@ -51,6 +51,7 @@ __export(index_exports, {
   ClipBoundary: () => ClipBoundary,
   ClipHeader: () => ClipHeader,
   ClipHeaderPresentational: () => ClipHeaderPresentational,
+  ClipViewportOriginProvider: () => ClipViewportOriginProvider,
   CloseButton: () => CloseButton,
   Controls: () => Controls,
   DevicePixelRatioProvider: () => DevicePixelRatioProvider,
@@ -100,6 +101,7 @@ __export(index_exports, {
   samplesToSeconds: () => samplesToSeconds,
   secondsToPixels: () => secondsToPixels,
   secondsToSamples: () => secondsToSamples,
+  useClipViewportOrigin: () => useClipViewportOrigin,
   useDevicePixelRatio: () => useDevicePixelRatio,
   usePlaylistInfo: () => usePlaylistInfo,
   usePlayoutStatus: () => usePlayoutStatus,
@@ -123,10 +125,7 @@ var PositionDisplay = import_styled_components.default.span`
   color: ${(props) => props.theme?.textColor || "#333"};
   user-select: none;
 `;
-var AudioPosition = ({
-  formattedTime,
-  className
-}) => {
+var AudioPosition = ({ formattedTime, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PositionDisplay, { className, "aria-label": "Audio position", children: formattedTime });
 };
 
@@ -146,7 +145,9 @@ var BaseButton = import_styled_components2.default.button`
   border-radius: ${(props) => props.theme.borderRadius};
   cursor: pointer;
   outline: none;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
 
   &:hover:not(:disabled) {
@@ -243,7 +244,9 @@ var BaseInput = import_styled_components5.default.input`
   border: 1px solid ${(props) => props.theme.inputBorder};
   border-radius: ${(props) => props.theme.borderRadius};
   outline: none;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 
   &::placeholder {
     color: ${(props) => props.theme.inputPlaceholder};
@@ -311,7 +314,9 @@ var BaseSelect = import_styled_components7.default.select`
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 
   &:focus {
     border-color: ${(props) => props.theme.inputFocusBorder};
@@ -357,7 +362,9 @@ var BaseSlider = import_styled_components8.default.input.attrs({ type: "range" }
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    transition:
+      transform 0.15s ease,
+      box-shadow 0.15s ease;
   }
 
   &::-webkit-slider-thumb:hover {
@@ -374,7 +381,9 @@ var BaseSlider = import_styled_components8.default.input.attrs({ type: "range" }
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    transition:
+      transform 0.15s ease,
+      box-shadow 0.15s ease;
   }
 
   &::-moz-range-thumb:hover {
@@ -442,7 +451,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/wfpl-theme.ts
@@ -637,10 +646,7 @@ var ViewportStoreContext = (0, import_react.createContext)(null);
 var EMPTY_SUBSCRIBE = () => () => {
 };
 var NULL_SNAPSHOT = () => null;
-var ScrollViewportProvider = ({
-  containerRef,
-  children
-}) => {
+var ScrollViewportProvider = ({ containerRef, children }) => {
   const storeRef = (0, import_react.useRef)(null);
   if (storeRef.current === null) {
     storeRef.current = new ViewportStore();
@@ -695,7 +701,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 = [];
@@ -703,8 +709,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;
         }
       }
@@ -718,17 +725,27 @@ function useVisibleChunkIndices(totalWidth, chunkWidth) {
   );
 }
 
-// src/hooks/useChunkedCanvasRefs.ts
+// src/contexts/ClipViewportOrigin.tsx
 var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ClipViewportOriginContext = (0, import_react2.createContext)(0);
+var ClipViewportOriginProvider = ({
+  originX,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClipViewportOriginContext.Provider, { value: originX, children });
+var useClipViewportOrigin = () => (0, import_react2.useContext)(ClipViewportOriginContext);
+
+// src/hooks/useChunkedCanvasRefs.ts
+var import_react3 = require("react");
 function useChunkedCanvasRefs() {
-  const canvasMapRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
-  const canvasRef = (0, import_react2.useCallback)((canvas) => {
+  const canvasMapRef = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const canvasRef = (0, import_react3.useCallback)((canvas) => {
     if (canvas !== null) {
       const idx = parseInt(canvas.dataset.index, 10);
       canvasMapRef.current.set(idx, canvas);
     }
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const map = canvasMapRef.current;
     for (const [idx, canvas] of map.entries()) {
       if (!canvas.isConnected) {
@@ -741,7 +758,7 @@ function useChunkedCanvasRefs() {
 
 // src/components/Channel.tsx
 var import_core = require("@waveform-playlist/core");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
     return color;
@@ -802,8 +819,9 @@ var Channel = (props) => {
     drawMode = "inverted"
   } = props;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const visibleChunkIndices = useVisibleChunkIndices(length, import_core.MAX_CANVAS_WIDTH);
-  (0, import_react3.useLayoutEffect)(() => {
+  const clipOriginX = useClipViewportOrigin();
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core.MAX_CANVAS_WIDTH, clipOriginX);
+  (0, import_react4.useLayoutEffect)(() => {
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * import_core.MAX_CANVAS_WIDTH;
@@ -822,12 +840,7 @@ var Channel = (props) => {
         } else {
           fillColor = waveOutlineColor;
         }
-        ctx.fillStyle = createCanvasFillStyle(
-          ctx,
-          fillColor,
-          canvasWidth,
-          waveHeight
-        );
+        ctx.fillStyle = createCanvasFillStyle(ctx, fillColor, canvasWidth, waveHeight);
         const canvasStartGlobal = globalPixelOffset;
         const canvasEndGlobal = globalPixelOffset + canvasWidth;
         const firstBarGlobal = Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
@@ -867,7 +880,7 @@ var Channel = (props) => {
   const waveforms = visibleChunkIndices.map((i) => {
     const chunkLeft = i * import_core.MAX_CANVAS_WIDTH;
     const currentWidth = Math.min(length - chunkLeft, import_core.MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Waveform,
       {
         $cssWidth: currentWidth,
@@ -883,7 +896,7 @@ var Channel = (props) => {
   });
   const bgColor = waveFillColor;
   const backgroundCss = transparentBackground ? "transparent" : waveformColorToCss(bgColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Wrapper,
     {
       $index: index,
@@ -897,8 +910,8 @@ var Channel = (props) => {
 };
 
 // src/components/ErrorBoundary.tsx
-var import_react4 = __toESM(require("react"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var errorContainerStyle = {
   padding: "16px",
   background: "#1a1a2e",
@@ -912,7 +925,7 @@ var errorContainerStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var PlaylistErrorBoundary = class extends import_react4.default.Component {
+var PlaylistErrorBoundary = class extends import_react5.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -928,7 +941,7 @@ var PlaylistErrorBoundary = class extends import_react4.default.Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
     }
     return this.props.children;
   }
@@ -941,7 +954,7 @@ var import_utilities = require("@dnd-kit/utilities");
 
 // src/components/ClipHeader.tsx
 var import_styled_components10 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var CLIP_HEADER_HEIGHT = 22;
 var HeaderContainer = import_styled_components10.default.div`
   position: relative;
@@ -981,15 +994,7 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    HeaderContainer,
-    {
-      $isDragging: false,
-      $interactive: false,
-      $isSelected: isSelected,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TrackName, { children: trackName })
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderContainer, { $isDragging: false, $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName }) });
 };
 var ClipHeader = ({
   clipId,
@@ -1001,16 +1006,10 @@ var ClipHeader = ({
   dragHandleProps
 }) => {
   if (disableDrag || !dragHandleProps) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      ClipHeaderPresentational,
-      {
-        trackName,
-        isSelected
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ClipHeaderPresentational, { trackName, isSelected });
   }
   const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     HeaderContainer,
     {
       ref: setActivatorNodeRef,
@@ -1019,15 +1018,15 @@ var ClipHeader = ({
       $isSelected: isSelected,
       ...listeners,
       ...attributes,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TrackName, { children: trackName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName })
     }
   );
 };
 
 // src/components/ClipBoundary.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CLIP_BOUNDARY_WIDTH = 8;
 var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = import_styled_components11.default.div`
@@ -1067,12 +1066,12 @@ var ClipBoundary = ({
   dragHandleProps,
   touchOptimized = false
 }) => {
-  const [isHovered, setIsHovered] = import_react5.default.useState(false);
+  const [isHovered, setIsHovered] = import_react6.default.useState(false);
   if (!dragHandleProps) {
     return null;
   }
   const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     BoundaryContainer,
     {
       ref: setActivatorNodeRef,
@@ -1092,7 +1091,7 @@ var ClipBoundary = ({
 
 // src/components/FadeOverlay.tsx
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FadeContainer = import_styled_components12.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1149,17 +1148,11 @@ var FadeOverlay = ({
   const theme = (0, import_styled_components12.useTheme)();
   if (width < 1) return null;
   const fillColor = color || theme?.fadeOverlayColor || "rgba(0, 0, 0, 0.4)";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "path",
-    {
-      d: generateFadePath(width, 100, curveType),
-      fill: fillColor
-    }
-  ) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: generateFadePath(width, 100, curveType), fill: fillColor }) }) });
 };
 
 // src/components/Clip.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ClipContainer = import_styled_components13.default.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
     left: `${props.$left}px`,
@@ -1244,7 +1237,7 @@ var Clip = ({
     zIndex: isDragging ? 100 : void 0
     // Below controls (z-index: 999) but above other clips
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     ClipContainer,
     {
       ref: setNodeRef,
@@ -1257,7 +1250,7 @@ var Clip = ({
       "data-track-id": trackId,
       onMouseDown,
       children: [
-        showHeader && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           ClipHeader,
           {
             clipId,
@@ -1269,9 +1262,9 @@ var Clip = ({
             dragHandleProps: enableDrag ? { attributes, listeners, setActivatorNodeRef } : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClipViewportOriginProvider, { originX: left, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
           children,
-          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             FadeOverlay,
             {
               left: 0,
@@ -1280,7 +1273,7 @@ var Clip = ({
               curveType: fadeIn.type
             }
           ),
-          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             FadeOverlay,
             {
               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -1289,9 +1282,9 @@ var Clip = ({
               curveType: fadeOut.type
             }
           )
-        ] }),
-        showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ] }) }),
+        showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             ClipBoundary,
             {
               clipId,
@@ -1307,7 +1300,7 @@ var Clip = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             ClipBoundary,
             {
               clipId,
@@ -1331,7 +1324,7 @@ var Clip = ({
 
 // src/components/MasterVolumeControl.tsx
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var VolumeContainer = import_styled_components14.default.div`
   display: inline-flex;
   align-items: center;
@@ -1353,9 +1346,9 @@ var MasterVolumeControl = ({
   const handleChange = (e) => {
     onChange(parseFloat(e.target.value) / 100);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(VolumeContainer, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(VolumeContainer, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       VolumeSlider,
       {
         min: "0",
@@ -1370,9 +1363,9 @@ var MasterVolumeControl = ({
 };
 
 // src/components/Playhead.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
@@ -1389,7 +1382,7 @@ var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlayheadLine, { $position: position, $color: color });
 };
 var PlayheadWithMarkerContainer = import_styled_components15.default.div`
   position: absolute;
@@ -1429,9 +1422,9 @@ var PlayheadWithMarker = ({
   controlsOffset,
   getAudioContextTime
 }) => {
-  const containerRef = (0, import_react6.useRef)(null);
-  const animationFrameRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const containerRef = (0, import_react7.useRef)(null);
+  const animationFrameRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1459,24 +1452,33 @@ var PlayheadWithMarker = ({
         animationFrameRef.current = null;
       }
     };
-  }, [isPlaying, sampleRate, samplesPerPixel, controlsOffset, currentTimeRef, playbackStartTimeRef, audioStartPositionRef, getAudioContextTime]);
-  (0, import_react6.useEffect)(() => {
+  }, [
+    isPlaying,
+    sampleRate,
+    samplesPerPixel,
+    controlsOffset,
+    currentTimeRef,
+    playbackStartTimeRef,
+    audioStartPositionRef,
+    getAudioContextTime
+  ]);
+  (0, import_react7.useEffect)(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
       containerRef.current.style.transform = `translate3d(${pos}px, 0, 0)`;
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkerLine, { $color: color })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkerTriangle, { $color: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkerLine, { $color: color })
   ] });
 };
 
 // src/components/Playlist.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
-var import_react7 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Wrapper2 = import_styled_components16.default.div`
   overflow-y: hidden;
   overflow-x: auto;
@@ -1530,41 +1532,37 @@ var Playlist = ({
   isSelecting,
   "data-playlist-state": playlistState
 }) => {
-  const wrapperRef = (0, import_react7.useRef)(null);
-  const handleRef = (0, import_react7.useCallback)((el) => {
-    wrapperRef.current = el;
-    scrollContainerRef?.(el);
-  }, [scrollContainerRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: handleRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollViewportProvider, { containerRef: wrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    ScrollContainer,
-    {
-      $backgroundColor: backgroundColor,
-      $width: scrollContainerWidth,
-      children: [
-        timescale && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
-          children,
-          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            ClickOverlay,
-            {
-              $controlsWidth: controlsWidth,
-              $isSelecting: isSelecting,
-              onClick: onTracksClick,
-              onMouseDown: onTracksMouseDown,
-              onMouseMove: onTracksMouseMove,
-              onMouseUp: onTracksMouseUp
-            }
-          )
-        ] })
-      ]
-    }
-  ) }) });
+  const wrapperRef = (0, import_react8.useRef)(null);
+  const handleRef = (0, import_react8.useCallback)(
+    (el) => {
+      wrapperRef.current = el;
+      scrollContainerRef?.(el);
+    },
+    [scrollContainerRef]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: handleRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollViewportProvider, { containerRef: wrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ScrollContainer, { $backgroundColor: backgroundColor, $width: scrollContainerWidth, children: [
+    timescale && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
+      children,
+      (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        ClickOverlay,
+        {
+          $controlsWidth: controlsWidth,
+          $isSelecting: isSelecting,
+          onClick: onTracksClick,
+          onMouseDown: onTracksMouseDown,
+          onMouseMove: onTracksMouseMove,
+          onMouseUp: onTracksMouseUp
+        }
+      )
+    ] })
+  ] }) }) });
 };
 var StyledPlaylist = (0, import_styled_components16.withTheme)(Playlist);
 
 // src/components/Selection.tsx
 var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SelectionOverlay = import_styled_components17.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1588,13 +1586,13 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var LoopRegionOverlayDiv = import_styled_components18.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1643,8 +1641,8 @@ var LoopRegion = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1653,7 +1651,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       LoopMarker,
       {
         $left: startPosition,
@@ -1662,7 +1660,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1743,71 +1741,77 @@ var LoopRegionMarkers = ({
   minPosition = 0,
   maxPosition = Infinity
 }) => {
-  const [draggingMarker, setDraggingMarker] = (0, import_react8.useState)(null);
-  const dragStartX = (0, import_react8.useRef)(0);
-  const dragStartPosition = (0, import_react8.useRef)(0);
-  const dragStartEnd = (0, import_react8.useRef)(0);
+  const [draggingMarker, setDraggingMarker] = (0, import_react9.useState)(null);
+  const dragStartX = (0, import_react9.useRef)(0);
+  const dragStartPosition = (0, import_react9.useRef)(0);
+  const dragStartEnd = (0, import_react9.useRef)(0);
   const width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = (0, import_react8.useCallback)((e, marker) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDraggingMarker(marker);
-    dragStartX.current = e.clientX;
-    dragStartPosition.current = marker === "start" ? startPosition : endPosition;
-    const handleMouseMove = (moveEvent) => {
-      const delta = moveEvent.clientX - dragStartX.current;
-      const newPosition = dragStartPosition.current + delta;
-      if (marker === "start") {
-        const clampedPosition = Math.max(minPosition, Math.min(endPosition - 10, newPosition));
-        onLoopStartChange?.(clampedPosition);
-      } else {
-        const clampedPosition = Math.max(startPosition + 10, Math.min(maxPosition, newPosition));
-        onLoopEndChange?.(clampedPosition);
-      }
-    };
-    const handleMouseUp = () => {
-      setDraggingMarker(null);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]);
-  const handleRegionMouseDown = (0, import_react8.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDraggingMarker("region");
-    dragStartX.current = e.clientX;
-    dragStartPosition.current = startPosition;
-    dragStartEnd.current = endPosition;
-    const regionWidth = endPosition - startPosition;
-    const handleMouseMove = (moveEvent) => {
-      const delta = moveEvent.clientX - dragStartX.current;
-      let newStart = dragStartPosition.current + delta;
-      let newEnd = dragStartEnd.current + delta;
-      if (newStart < minPosition) {
-        newStart = minPosition;
-        newEnd = minPosition + regionWidth;
-      }
-      if (newEnd > maxPosition) {
-        newEnd = maxPosition;
-        newStart = maxPosition - regionWidth;
-      }
-      onLoopRegionMove?.(newStart, newEnd);
-    };
-    const handleMouseUp = () => {
-      setDraggingMarker(null);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [startPosition, endPosition, minPosition, maxPosition, onLoopRegionMove]);
+  const handleMarkerMouseDown = (0, import_react9.useCallback)(
+    (e, marker) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDraggingMarker(marker);
+      dragStartX.current = e.clientX;
+      dragStartPosition.current = marker === "start" ? startPosition : endPosition;
+      const handleMouseMove = (moveEvent) => {
+        const delta = moveEvent.clientX - dragStartX.current;
+        const newPosition = dragStartPosition.current + delta;
+        if (marker === "start") {
+          const clampedPosition = Math.max(minPosition, Math.min(endPosition - 10, newPosition));
+          onLoopStartChange?.(clampedPosition);
+        } else {
+          const clampedPosition = Math.max(startPosition + 10, Math.min(maxPosition, newPosition));
+          onLoopEndChange?.(clampedPosition);
+        }
+      };
+      const handleMouseUp = () => {
+        setDraggingMarker(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]
+  );
+  const handleRegionMouseDown = (0, import_react9.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDraggingMarker("region");
+      dragStartX.current = e.clientX;
+      dragStartPosition.current = startPosition;
+      dragStartEnd.current = endPosition;
+      const regionWidth = endPosition - startPosition;
+      const handleMouseMove = (moveEvent) => {
+        const delta = moveEvent.clientX - dragStartX.current;
+        let newStart = dragStartPosition.current + delta;
+        let newEnd = dragStartEnd.current + delta;
+        if (newStart < minPosition) {
+          newStart = minPosition;
+          newEnd = minPosition + regionWidth;
+        }
+        if (newEnd > maxPosition) {
+          newEnd = maxPosition;
+          newStart = maxPosition - regionWidth;
+        }
+        onLoopRegionMove?.(newStart, newEnd);
+      };
+      const handleMouseUp = () => {
+        setDraggingMarker(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [startPosition, endPosition, minPosition, maxPosition, onLoopRegionMove]
+  );
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1818,7 +1822,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1829,7 +1833,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1864,46 +1868,49 @@ var TimescaleLoopRegion = ({
   maxPosition = Infinity,
   controlsOffset = 0
 }) => {
-  const [, setIsCreating] = (0, import_react8.useState)(false);
-  const createStartX = (0, import_react8.useRef)(0);
-  const containerRef = (0, import_react8.useRef)(null);
+  const [, setIsCreating] = (0, import_react9.useState)(false);
+  const createStartX = (0, import_react9.useRef)(0);
+  const containerRef = (0, import_react9.useRef)(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = (0, import_react8.useCallback)((e) => {
-    const target = e.target;
-    if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
-      return;
-    }
-    e.preventDefault();
-    setIsCreating(true);
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const clickX = e.clientX - rect.left;
-    const clampedX = Math.max(minPosition, Math.min(maxPosition, clickX));
-    createStartX.current = clampedX;
-    onLoopRegionChange?.(clampedX, clampedX);
-    const handleMouseMove = (moveEvent) => {
-      const currentX = moveEvent.clientX - rect.left;
-      const clampedCurrentX = Math.max(minPosition, Math.min(maxPosition, currentX));
-      const newStart = Math.min(createStartX.current, clampedCurrentX);
-      const newEnd = Math.max(createStartX.current, clampedCurrentX);
-      onLoopRegionChange?.(newStart, newEnd);
-    };
-    const handleMouseUp = () => {
-      setIsCreating(false);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [minPosition, maxPosition, onLoopRegionChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const handleBackgroundMouseDown = (0, import_react9.useCallback)(
+    (e) => {
+      const target = e.target;
+      if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
+        return;
+      }
+      e.preventDefault();
+      setIsCreating(true);
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const clickX = e.clientX - rect.left;
+      const clampedX = Math.max(minPosition, Math.min(maxPosition, clickX));
+      createStartX.current = clampedX;
+      onLoopRegionChange?.(clampedX, clampedX);
+      const handleMouseMove = (moveEvent) => {
+        const currentX = moveEvent.clientX - rect.left;
+        const clampedCurrentX = Math.max(minPosition, Math.min(maxPosition, currentX));
+        const newStart = Math.min(createStartX.current, clampedCurrentX);
+        const newEnd = Math.max(createStartX.current, clampedCurrentX);
+        onLoopRegionChange?.(newStart, newEnd);
+      };
+      const handleMouseUp = () => {
+        setIsCreating(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [minPosition, maxPosition, onLoopRegionChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     TimescaleLoopCreator,
     {
       ref: containerRef,
       $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1922,10 +1929,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/TimeInput.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1975,7 +1982,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var TimeInput = ({
   id,
   label,
@@ -1985,8 +1992,8 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react9.useState)("");
-  (0, import_react9.useEffect)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react10.useState)("");
+  (0, import_react10.useEffect)(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -2006,9 +2013,9 @@ var TimeInput = ({
       e.currentTarget.blur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       BaseInput,
       {
         type: "text",
@@ -2025,15 +2032,15 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = (0, import_react10.useState)("hh:mm:ss.uuu");
-  (0, import_react10.useEffect)(() => {
+  const [timeFormat, setTimeFormat] = (0, import_react11.useState)("hh:mm:ss.uuu");
+  (0, import_react11.useEffect)(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -2058,8 +2065,8 @@ var SelectionTimeInputs = ({
       onSelectionChange(selectionStart, value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       TimeInput,
       {
         id: "audio_start",
@@ -2070,7 +2077,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       TimeInput,
       {
         id: "audio_end",
@@ -2085,14 +2092,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-var import_react11 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react11.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react12.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react11.useState)(getScale());
+  const [scale, setScale] = (0, import_react12.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -2100,13 +2107,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react11.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react12.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react12 = require("react");
-var PlaylistInfoContext = (0, import_react12.createContext)({
+var import_react13 = require("react");
+var PlaylistInfoContext = (0, import_react13.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -2120,22 +2127,22 @@ var PlaylistInfoContext = (0, import_react12.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react12.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react13.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_styled_components19 = require("styled-components");
-var useTheme2 = () => (0, import_react13.useContext)(import_styled_components19.ThemeContext);
+var useTheme2 = () => (0, import_react14.useContext)(import_styled_components19.ThemeContext);
 
 // src/contexts/TrackControls.tsx
-var import_react14 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var TrackControlsContext = (0, import_react14.createContext)(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react14.Fragment, {}));
-var useTrackControls = () => (0, import_react14.useContext)(TrackControlsContext);
-
-// src/contexts/Playout.tsx
 var import_react15 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var TrackControlsContext = (0, import_react15.createContext)(/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react15.Fragment, {}));
+var useTrackControls = () => (0, import_react15.useContext)(TrackControlsContext);
+
+// src/contexts/Playout.tsx
+var import_react16 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -2146,8 +2153,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react15.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react15.createContext)({
+var PlayoutStatusContext = (0, import_react16.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react16.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2156,24 +2163,24 @@ var PlayoutStatusUpdateContext = (0, import_react15.createContext)({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  const [isPlaying, setIsPlaying] = (0, import_react15.useState)(defaultIsPlaying);
-  const [progress, setProgress] = (0, import_react15.useState)(defaultProgress);
-  const [selectionStart, setSelectionStart] = (0, import_react15.useState)(defaultSelectionStart);
-  const [selectionEnd, setSelectionEnd] = (0, import_react15.useState)(defaultSelectionEnd);
+  const [isPlaying, setIsPlaying] = (0, import_react16.useState)(defaultIsPlaying);
+  const [progress, setProgress] = (0, import_react16.useState)(defaultProgress);
+  const [selectionStart, setSelectionStart] = (0, import_react16.useState)(defaultSelectionStart);
+  const [selectionEnd, setSelectionEnd] = (0, import_react16.useState)(defaultSelectionEnd);
   const setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => (0, import_react15.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react15.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react16.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react16.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled_components20 = __toESM(require("styled-components"));
 var import_core3 = require("@waveform-playlist/core");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper3 = import_styled_components20.default.div.attrs((props) => ({
   style: {
@@ -2227,23 +2234,24 @@ var SpectrogramChannel = ({
 }) => {
   const channelIndex = channelIndexProp ?? index;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const registeredIdsRef = (0, import_react16.useRef)([]);
-  const transferredCanvasesRef = (0, import_react16.useRef)(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = (0, import_react16.useRef)(workerApi);
-  const onCanvasesReadyRef = (0, import_react16.useRef)(onCanvasesReady);
+  const registeredIdsRef = (0, import_react17.useRef)([]);
+  const transferredCanvasesRef = (0, import_react17.useRef)(/* @__PURE__ */ new WeakSet());
+  const workerApiRef = (0, import_react17.useRef)(workerApi);
+  const onCanvasesReadyRef = (0, import_react17.useRef)(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
-  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH);
+  const clipOriginX = useClipViewportOrigin();
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH, clipOriginX);
   const lut = colorLUT ?? DEFAULT_COLOR_LUT;
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
   const hasCustomFrequencyScale = Boolean(frequencyScaleFn);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
@@ -2306,7 +2314,7 @@ var SpectrogramChannel = ({
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
   }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2320,9 +2328,16 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     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()) {
@@ -2386,11 +2401,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 * import_core3.MAX_CANVAS_WIDTH;
     const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       SpectrogramCanvas,
       {
         $cssWidth: currentWidth,
@@ -2404,11 +2433,11 @@ var SpectrogramChannel = ({
       `${length}-${i}`
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2433,7 +2462,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2454,8 +2483,8 @@ var SmartChannel = ({
   }
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2474,24 +2503,35 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        Channel,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "div",
         {
-          ...props,
-          index: 0,
-          waveOutlineColor,
-          waveFillColor,
-          waveHeight: halfHeight,
-          devicePixelRatio,
-          barWidth,
-          barGap,
-          transparentBackground,
-          drawMode
+          style: {
+            position: "absolute",
+            top: (props.index * 2 + 1) * halfHeight,
+            width: props.length,
+            height: halfHeight
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Channel,
+            {
+              ...props,
+              index: 0,
+              waveOutlineColor,
+              waveFillColor,
+              waveHeight: halfHeight,
+              devicePixelRatio,
+              barWidth,
+              barGap,
+              transparentBackground,
+              drawMode
+            }
+          )
         }
-      ) })
+      )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Channel,
     {
       ...props,
@@ -2508,9 +2548,9 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = import_styled_components21.default.div`
   position: sticky;
@@ -2560,12 +2600,12 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = (0, import_react17.useRef)(null);
+  const canvasRef = (0, import_react18.useRef)(null);
   const devicePixelRatio = useDevicePixelRatio();
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
   const clipHeaderOffset = hasClipHeaders ? 22 : 0;
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2591,8 +2631,19 @@ var SpectrogramLabels = ({
         ctx.fillText(text, padding, y);
       }
     }
-  }, [waveHeight, numChannels, frequencyScaleFn, minFrequency, maxFrequency, labelsColor, labelsBackground, devicePixelRatio, spectrogramHeight, clipHeaderOffset]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  }, [
+    waveHeight,
+    numChannels,
+    frequencyScaleFn,
+    minFrequency,
+    maxFrequency,
+    labelsColor,
+    labelsBackground,
+    devicePixelRatio,
+    spectrogramHeight,
+    clipHeaderOffset
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -2608,10 +2659,10 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
@@ -2636,7 +2687,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 
 // src/components/TimeScale.tsx
 var import_core4 = require("@waveform-playlist/core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
@@ -2693,9 +2744,9 @@ var TimeScale = (props) => {
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = (0, import_react18.useContext)(PlaylistInfoContext);
+  } = (0, import_react19.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react18.useMemo)(() => {
+  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react19.useMemo)(() => {
     const nextCanvasInfo = /* @__PURE__ */ new Map();
     const nextMarkers = [];
     const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
@@ -2706,7 +2757,7 @@ var TimeScale = (props) => {
       if (counter % marker === 0) {
         const timeMs = counter;
         const timestamp = formatTime2(timeMs);
-        const element = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react18.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+        const element = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react19.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
         nextMarkers.push({ pix, element });
         nextCanvasInfo.set(pix, timeScaleHeight);
       } else if (counter % bigStep === 0) {
@@ -2721,12 +2772,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, import_core4.MAX_CANVAS_WIDTH);
   const visibleChunks = visibleChunkIndices.map((i) => {
     const chunkLeft = i * import_core4.MAX_CANVAS_WIDTH;
     const chunkWidth = Math.min(widthX - chunkLeft, import_core4.MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       TimeTickChunk,
       {
         $cssWidth: chunkWidth,
@@ -2743,7 +2803,7 @@ var TimeScale = (props) => {
   const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core4.MAX_CANVAS_WIDTH : 0;
   const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core4.MAX_CANVAS_WIDTH : Infinity;
   const visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
@@ -2761,8 +2821,16 @@ var TimeScale = (props) => {
         ctx.fillRect(localX, scaleY, 1, scaleHeight);
       }
     }
-  }, [canvasMapRef, duration, devicePixelRatio, timeColor, timeScaleHeight, canvasInfo, visibleChunkIndices]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  }, [
+    canvasMapRef,
+    duration,
+    devicePixelRatio,
+    timeColor,
+    timeScaleHeight,
+    canvasInfo,
+    visibleChunkIndices
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     PlaylistTimeScaleScroll,
     {
       $cssWidth: widthX,
@@ -2778,7 +2846,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = (0, import_styled_components22.withTheme)(TimeScale);
 
 // src/components/SmartScale.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2852,9 +2920,9 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = (0, import_react19.useContext)(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = (0, import_react20.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2868,7 +2936,7 @@ var SmartScale = ({ renderTimestamp }) => {
 
 // src/components/TimeFormatSelect.tsx
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var SelectWrapper = import_styled_components23.default.div`
   display: inline-flex;
   align-items: center;
@@ -2891,7 +2959,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     BaseSelect,
     {
       className: "time-format",
@@ -2899,14 +2967,14 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
 var import_styled_components24 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Container = import_styled_components24.default.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
@@ -2961,7 +3029,7 @@ var Track = ({
     controls: { show, width: controlWidth }
   } = usePlaylistInfo();
   const controls = useTrackControls();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     Container,
     {
       $numChannels: numChannels,
@@ -2972,15 +3040,8 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          ControlsWrapper,
-          {
-            $controlWidth: show ? controlWidth : 0,
-            $isSelected: isSelected,
-            children: controls
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ControlsWrapper, { $controlWidth: show ? controlWidth : 0, $isSelected: isSelected, children: controls }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -3011,8 +3072,11 @@ var Button = import_styled_components25.default.button.attrs({
   font-size: ${(props) => props.theme.fontSizeSmall};
   line-height: 1;
   border-radius: ${(props) => props.theme.borderRadius};
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
   cursor: pointer;
 
   ${(props) => {
@@ -3087,8 +3151,8 @@ var ButtonGroup = import_styled_components26.default.div`
 
 // src/components/TrackControls/CloseButton.tsx
 var import_styled_components27 = __toESM(require("styled-components"));
-var import_react20 = require("@phosphor-icons/react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react21 = require("@phosphor-icons/react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var StyledCloseButton = import_styled_components27.default.button`
   position: absolute;
   left: 0;
@@ -3103,17 +3167,16 @@ var StyledCloseButton = import_styled_components27.default.button`
   align-items: center;
   justify-content: center;
   opacity: 0.7;
-  transition: opacity 0.15s, color 0.15s;
+  transition:
+    opacity 0.15s,
+    color 0.15s;
 
   &:hover {
     opacity: 1;
     color: #dc3545;
   }
 `;
-var CloseButton = ({
-  onClick,
-  title = "Remove track"
-}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react20.X, { size: 12, weight: "bold" }) });
+var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react21.X, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 var import_styled_components28 = __toESM(require("styled-components"));
@@ -3148,24 +3211,24 @@ var Header = import_styled_components29.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react21 = require("@phosphor-icons/react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react21.SpeakerLowIcon, { weight: "light", ...props });
-
-// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react22 = require("@phosphor-icons/react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react22.SpeakerHighIcon, { weight: "light", ...props });
+var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react22.SpeakerLowIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/TrashIcon.tsx
+// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react23 = require("@phosphor-icons/react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react23.TrashIcon, { weight: "light", ...props });
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react23.SpeakerHighIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/DotsIcon.tsx
+// src/components/TrackControls/TrashIcon.tsx
 var import_react24 = require("@phosphor-icons/react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react24.DotsThreeIcon, { weight: "bold", ...props });
+var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react24.TrashIcon, { weight: "light", ...props });
+
+// src/components/TrackControls/DotsIcon.tsx
+var import_react25 = require("@phosphor-icons/react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react25.DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
@@ -3233,10 +3296,10 @@ var SliderWrapper = import_styled_components31.default.label`
 `;
 
 // src/components/TrackMenu.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_styled_components32 = __toESM(require("styled-components"));
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var MenuContainer = import_styled_components32.default.div`
   position: relative;
   display: inline-block;
@@ -3274,16 +3337,14 @@ var Divider = import_styled_components32.default.hr`
   border-top: 1px solid rgba(128, 128, 128, 0.3);
   margin: 0.35rem 0;
 `;
-var TrackMenu = ({
-  items: itemsProp
-}) => {
-  const [open, setOpen] = (0, import_react25.useState)(false);
+var TrackMenu = ({ items: itemsProp }) => {
+  const [open, setOpen] = (0, import_react26.useState)(false);
   const close = () => setOpen(false);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
-  const [dropdownPos, setDropdownPos] = (0, import_react25.useState)({ top: 0, left: 0 });
-  const buttonRef = (0, import_react25.useRef)(null);
-  const dropdownRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const [dropdownPos, setDropdownPos] = (0, import_react26.useState)({ top: 0, left: 0 });
+  const buttonRef = (0, import_react26.useRef)(null);
+  const dropdownRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useEffect)(() => {
     if (open && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -3292,7 +3353,7 @@ var TrackMenu = ({
       });
     }
   }, [open]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3303,8 +3364,8 @@ var TrackMenu = ({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(MenuContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MenuContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       MenuButton,
       {
         ref: buttonRef,
@@ -3315,19 +3376,19 @@ var TrackMenu = ({
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react25.default.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react26.default.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3359,6 +3420,7 @@ var TrackMenu = ({
   ClipBoundary,
   ClipHeader,
   ClipHeaderPresentational,
+  ClipViewportOriginProvider,
   CloseButton,
   Controls,
   DevicePixelRatioProvider,
@@ -3408,6 +3470,7 @@ var TrackMenu = ({
   samplesToSeconds,
   secondsToPixels,
   secondsToSamples,
+  useClipViewportOrigin,
   useDevicePixelRatio,
   usePlaylistInfo,
   usePlayoutStatus,