@waveform-playlist/ui-components 5.0.0-alpha.5 → 5.0.0-alpha.7

package/dist/index.mjs

@@ -359,6 +359,10 @@ var defaultTheme = {
   playheadColor: "#f00",
   selectionColor: "rgba(255, 105, 180, 0.7)",
   // hot pink - high contrast on light backgrounds
+  loopRegionColor: "rgba(59, 130, 246, 0.3)",
+  // Blue - distinct from pink selection
+  loopMarkerColor: "#3b82f6",
+  // Blue marker triangles
   clipHeaderBackgroundColor: "rgba(0, 0, 0, 0.1)",
   clipHeaderBorderColor: "rgba(0, 0, 0, 0.2)",
   clipHeaderTextColor: "#333",
@@ -430,6 +434,10 @@ var darkTheme = {
   // Darker Ampelmännchen green playhead
   selectionColor: "rgba(60, 140, 58, 0.6)",
   // Darker Ampelmännchen green selection - visible on dark backgrounds
+  loopRegionColor: "rgba(96, 165, 250, 0.35)",
+  // Light blue - distinct from green selection
+  loopMarkerColor: "#60a5fa",
+  // Light blue marker triangles
   clipHeaderBackgroundColor: "rgba(20, 16, 12, 0.85)",
   // Dark background for clip headers
   clipHeaderBorderColor: "rgba(200, 160, 120, 0.25)",
@@ -1206,7 +1214,8 @@ var TimescaleWrapper = styled16.div.attrs((props) => ({
 }))`
   background: ${(props) => props.$backgroundColor || "white"};
   width: 100%;
-  overflow: visible;
+  position: relative;
+  overflow: hidden; /* Constrain loop region to timescale area */
 `;
 var TracksContainer = styled16.div.attrs((props) => ({
   style: props.$width !== void 0 ? { minWidth: `${props.$width}px` } : {}
@@ -1222,7 +1231,8 @@ var ClickOverlay = styled16.div`
   right: 0;
   bottom: 0;
   cursor: crosshair;
-  z-index: 1; /* Low z-index - clip headers and boundaries have higher z-index */
+  /* When selecting, raise z-index above clip boundaries (z-index: 105) to prevent interference */
+  z-index: ${(props) => props.$isSelecting ? 110 : 1};
 `;
 var Playlist = ({
   children,
@@ -1237,7 +1247,8 @@ var Playlist = ({
   onTracksMouseDown,
   onTracksMouseMove,
   onTracksMouseUp,
-  scrollContainerRef
+  scrollContainerRef,
+  isSelecting
 }) => {
   return /* @__PURE__ */ jsx10(Wrapper2, { "data-scroll-container": "true", ref: scrollContainerRef, children: /* @__PURE__ */ jsxs5(
     ScrollContainer,
@@ -1252,6 +1263,7 @@ var Playlist = ({
             ClickOverlay,
             {
               $controlsWidth: controlsWidth,
+              $isSelecting: isSelecting,
               onClick: onTracksClick,
               onMouseDown: onTracksMouseDown,
               onMouseMove: onTracksMouseMove,
@@ -1294,11 +1306,341 @@ var Selection = ({
   return /* @__PURE__ */ jsx11(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
+// src/components/LoopRegion.tsx
+import { useCallback as useCallback2, useRef as useRef3, useState } from "react";
+import styled18 from "styled-components";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var LoopRegionOverlayDiv = styled18.div.attrs((props) => ({
+  style: {
+    left: `${props.$left}px`,
+    width: `${props.$width}px`
+  }
+}))`
+  position: absolute;
+  top: 0;
+  background: ${(props) => props.$color};
+  height: 100%;
+  z-index: 55; /* Between clips (z-index: 50) and selection (z-index: 60) */
+  pointer-events: none;
+`;
+var LoopMarker = styled18.div.attrs((props) => ({
+  style: {
+    left: `${props.$left}px`
+  }
+}))`
+  position: absolute;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background: ${(props) => props.$color};
+  z-index: 90; /* Below playhead (z-index: 100) */
+  pointer-events: none;
+
+  /* Triangle marker at top */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    ${(props) => props.$isStart ? "left: 0" : "right: 0"};
+    width: 0;
+    height: 0;
+    border-top: 8px solid ${(props) => props.$color};
+    ${(props) => props.$isStart ? "border-right: 8px solid transparent;" : "border-left: 8px solid transparent;"}
+  }
+`;
+var LoopRegion = ({
+  startPosition,
+  endPosition,
+  regionColor = "rgba(59, 130, 246, 0.3)",
+  markerColor = "#3b82f6"
+}) => {
+  const width = Math.max(0, endPosition - startPosition);
+  if (width <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx12(
+      LoopRegionOverlayDiv,
+      {
+        $left: startPosition,
+        $width: width,
+        $color: regionColor,
+        "data-loop-region": true
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      LoopMarker,
+      {
+        $left: startPosition,
+        $color: markerColor,
+        $isStart: true,
+        "data-loop-marker": "start"
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      LoopMarker,
+      {
+        $left: endPosition - 2,
+        $color: markerColor,
+        $isStart: false,
+        "data-loop-marker": "end"
+      }
+    )
+  ] });
+};
+var DraggableMarkerHandle = styled18.div.attrs((props) => ({
+  style: {
+    left: `${props.$left}px`
+  }
+}))`
+  position: absolute;
+  top: 0;
+  width: 12px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 100;
+  /* Center the handle on the marker position */
+  transform: translateX(-5px);
+
+  /* Visual marker line */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 5px;
+    width: 2px;
+    height: 100%;
+    background: ${(props) => props.$color};
+    opacity: ${(props) => props.$isDragging ? 1 : 0.8};
+  }
+
+  /* Triangle marker at top */
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    ${(props) => props.$isStart ? "left: 5px" : "left: -1px"};
+    width: 0;
+    height: 0;
+    border-top: 10px solid ${(props) => props.$color};
+    ${(props) => props.$isStart ? "border-right: 10px solid transparent;" : "border-left: 10px solid transparent;"}
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+`;
+var TimescaleLoopShade = styled18.div.attrs((props) => ({
+  style: {
+    left: `${props.$left}px`,
+    width: `${props.$width}px`
+  }
+}))`
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background: ${(props) => props.$color};
+  z-index: 50;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+var LoopRegionMarkers = ({
+  startPosition,
+  endPosition,
+  markerColor = "#3b82f6",
+  regionColor = "rgba(59, 130, 246, 0.3)",
+  onLoopStartChange,
+  onLoopEndChange,
+  onLoopRegionMove,
+  minPosition = 0,
+  maxPosition = Infinity
+}) => {
+  const [draggingMarker, setDraggingMarker] = useState(null);
+  const dragStartX = useRef3(0);
+  const dragStartPosition = useRef3(0);
+  const dragStartEnd = useRef3(0);
+  const width = Math.max(0, endPosition - startPosition);
+  const handleMarkerMouseDown = useCallback2((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 = useCallback2((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__ */ jsx12(
+      TimescaleLoopShade,
+      {
+        $left: startPosition,
+        $width: width,
+        $color: regionColor,
+        $isDragging: draggingMarker === "region",
+        onMouseDown: handleRegionMouseDown,
+        "data-loop-region-timescale": true
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      DraggableMarkerHandle,
+      {
+        $left: startPosition,
+        $color: markerColor,
+        $isStart: true,
+        $isDragging: draggingMarker === "start",
+        onMouseDown: (e) => handleMarkerMouseDown(e, "start"),
+        "data-loop-marker-handle": "start"
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      DraggableMarkerHandle,
+      {
+        $left: endPosition,
+        $color: markerColor,
+        $isStart: false,
+        $isDragging: draggingMarker === "end",
+        onMouseDown: (e) => handleMarkerMouseDown(e, "end"),
+        "data-loop-marker-handle": "end"
+      }
+    )
+  ] });
+};
+var TimescaleLoopCreator = styled18.div.attrs((props) => ({
+  style: {
+    left: `${props.$leftOffset || 0}px`
+  }
+}))`
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%; /* Stay within timescale bounds, don't extend into tracks */
+  cursor: crosshair;
+  z-index: 40; /* Below markers and shading */
+`;
+var TimescaleLoopRegion = ({
+  startPosition,
+  endPosition,
+  markerColor = "#3b82f6",
+  regionColor = "rgba(59, 130, 246, 0.3)",
+  onLoopRegionChange,
+  minPosition = 0,
+  maxPosition = Infinity,
+  controlsOffset = 0
+}) => {
+  const [isCreating, setIsCreating] = useState(false);
+  const createStartX = useRef3(0);
+  const containerRef = useRef3(null);
+  const hasLoopRegion = endPosition > startPosition;
+  const handleBackgroundMouseDown = useCallback2((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__ */ jsx12(
+    TimescaleLoopCreator,
+    {
+      ref: containerRef,
+      $leftOffset: controlsOffset,
+      onMouseDown: handleBackgroundMouseDown,
+      "data-timescale-loop-creator": true,
+      children: hasLoopRegion && /* @__PURE__ */ jsx12(
+        LoopRegionMarkers,
+        {
+          startPosition,
+          endPosition,
+          markerColor,
+          regionColor,
+          minPosition,
+          maxPosition,
+          onLoopStartChange: (newStart) => onLoopRegionChange?.(newStart, endPosition),
+          onLoopEndChange: (newEnd) => onLoopRegionChange?.(startPosition, newEnd),
+          onLoopRegionMove: (newStart, newEnd) => onLoopRegionChange?.(newStart, newEnd)
+        }
+      )
+    }
+  );
+};
+
 // src/components/SelectionTimeInputs.tsx
-import { useEffect as useEffect3, useState as useState2 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 
 // src/components/TimeInput.tsx
-import { useEffect as useEffect2, useState } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1348,7 +1690,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var TimeInput = ({
   id,
   label,
@@ -1358,7 +1700,7 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = useState("");
+  const [displayValue, setDisplayValue] = useState2("");
   useEffect2(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
@@ -1379,9 +1721,9 @@ var TimeInput = ({
       e.currentTarget.blur();
     }
   };
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx12(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx13(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx13(
       BaseInput,
       {
         type: "text",
@@ -1398,14 +1740,14 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = useState2("hh:mm:ss.uuu");
+  const [timeFormat, setTimeFormat] = useState3("hh:mm:ss.uuu");
   useEffect3(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
@@ -1431,8 +1773,8 @@ var SelectionTimeInputs = ({
       onSelectionChange(selectionStart, value);
     }
   };
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(
       TimeInput,
       {
         id: "audio_start",
@@ -1443,7 +1785,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       TimeInput,
       {
         id: "audio_end",
@@ -1458,14 +1800,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-import { useState as useState3, createContext, useContext } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { useState as useState4, createContext, useContext } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function getScale() {
   return window.devicePixelRatio;
 }
 var DevicePixelRatioContext = createContext(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = useState3(getScale());
+  const [scale, setScale] = useState4(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -1473,7 +1815,7 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ jsx14(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ jsx15(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
 var useDevicePixelRatio = () => useContext(DevicePixelRatioContext);
 
@@ -1501,18 +1843,18 @@ import { ThemeContext } from "styled-components";
 var useTheme2 = () => useContext3(ThemeContext);
 
 // src/contexts/TrackControls.tsx
-import { createContext as createContext3, useContext as useContext4, Fragment as Fragment4 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var TrackControlsContext = createContext3(/* @__PURE__ */ jsx15(Fragment4, {}));
+import { createContext as createContext3, useContext as useContext4, Fragment as Fragment5 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var TrackControlsContext = createContext3(/* @__PURE__ */ jsx16(Fragment5, {}));
 var useTrackControls = () => useContext4(TrackControlsContext);
 
 // src/contexts/Playout.tsx
 import {
-  useState as useState4,
+  useState as useState5,
   createContext as createContext4,
   useContext as useContext5
 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -1533,21 +1875,21 @@ var PlayoutStatusUpdateContext = createContext4({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  const [isPlaying, setIsPlaying] = useState4(defaultIsPlaying);
-  const [progress, setProgress] = useState4(defaultProgress);
-  const [selectionStart, setSelectionStart] = useState4(defaultSelectionStart);
-  const [selectionEnd, setSelectionEnd] = useState4(defaultSelectionEnd);
+  const [isPlaying, setIsPlaying] = useState5(defaultIsPlaying);
+  const [progress, setProgress] = useState5(defaultProgress);
+  const [selectionStart, setSelectionStart] = useState5(defaultSelectionStart);
+  const [selectionEnd, setSelectionEnd] = useState5(defaultSelectionEnd);
   const setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ jsx16(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx16(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ jsx17(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx17(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
 var usePlayoutStatus = () => useContext5(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext5(PlayoutStatusUpdateContext);
 
 // src/components/SmartChannel.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
   const theme = useTheme2();
   const { waveHeight, barWidth, barGap } = usePlaylistInfo();
@@ -1555,7 +1897,7 @@ var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
   const waveOutlineColor = isSelected && theme ? theme.selectedWaveOutlineColor : theme?.waveOutlineColor;
   const waveFillColor = isSelected && theme ? theme.selectedWaveFillColor : theme?.waveFillColor;
   const drawMode = theme?.waveformDrawMode || "inverted";
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Channel,
     {
       ...props,
@@ -1576,8 +1918,8 @@ var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
 import { useContext as useContext7 } from "react";
 
 // src/components/TimeScale.tsx
-import React9, { useRef as useRef3, useEffect as useEffect4, useContext as useContext6 } from "react";
-import styled18, { withTheme as withTheme2 } from "styled-components";
+import React10, { useRef as useRef4, useEffect as useEffect4, useContext as useContext6 } from "react";
+import styled19, { withTheme as withTheme2 } from "styled-components";
 
 // src/utils/conversions.ts
 function samplesToSeconds(samples, sampleRate) {
@@ -1600,14 +1942,14 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
   const m = (seconds - s) / 60;
   return `${m}:${String(s).padStart(2, "0")}`;
 }
-var PlaylistTimeScaleScroll = styled18.div.attrs((props) => ({
+var PlaylistTimeScaleScroll = styled19.div.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     marginLeft: `${props.$controlWidth}px`,
@@ -1619,7 +1961,7 @@ var PlaylistTimeScaleScroll = styled18.div.attrs((props) => ({
   border-bottom: 1px solid ${(props) => props.theme.timeColor};
   box-sizing: border-box;
 `;
-var TimeTicks = styled18.canvas.attrs((props) => ({
+var TimeTicks = styled19.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     height: `${props.$timeScaleHeight}px`
@@ -1630,7 +1972,7 @@ var TimeTicks = styled18.canvas.attrs((props) => ({
   right: 0;
   bottom: 0;
 `;
-var TimeStamp = styled18.div.attrs((props) => ({
+var TimeStamp = styled19.div.attrs((props) => ({
   style: {
     left: `${props.$left + 4}px`
     // Offset 4px to the right of the tick
@@ -1652,7 +1994,7 @@ var TimeScale = (props) => {
   } = props;
   const canvasInfo = /* @__PURE__ */ new Map();
   const timeMarkers = [];
-  const canvasRef = useRef3(null);
+  const canvasRef = useRef4(null);
   const {
     sampleRate,
     samplesPerPixel,
@@ -1694,7 +2036,7 @@ var TimeScale = (props) => {
     if (counter % marker === 0) {
       const timeMs = counter;
       const timestamp = formatTime2(timeMs);
-      const timestampContent = renderTimestamp ? /* @__PURE__ */ jsx18(React9.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx18(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+      const timestampContent = renderTimestamp ? /* @__PURE__ */ jsx19(React10.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx19(TimeStamp, { $left: pix, children: timestamp }, timestamp);
       timeMarkers.push(timestampContent);
       canvasInfo.set(pix, timeScaleHeight);
     } else if (counter % bigStep === 0) {
@@ -1704,7 +2046,7 @@ var TimeScale = (props) => {
     }
     counter += secondStep;
   }
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     PlaylistTimeScaleScroll,
     {
       $cssWidth: widthX,
@@ -1712,7 +2054,7 @@ var TimeScale = (props) => {
       $timeScaleHeight: timeScaleHeight,
       children: [
         timeMarkers,
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           TimeTicks,
           {
             $cssWidth: widthX,
@@ -1729,7 +2071,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = withTheme2(TimeScale);
 
 // src/components/SmartScale.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -1805,7 +2147,7 @@ function getScaleInfo(samplesPerPixel) {
 var SmartScale = () => {
   const { samplesPerPixel, duration } = useContext7(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -1817,9 +2159,9 @@ var SmartScale = () => {
 };
 
 // src/components/TimeFormatSelect.tsx
-import styled19 from "styled-components";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var SelectWrapper = styled19.div`
+import styled20 from "styled-components";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var SelectWrapper = styled20.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -1841,7 +2183,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ jsx20(SelectWrapper, { className, children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(SelectWrapper, { className, children: /* @__PURE__ */ jsx21(
     BaseSelect,
     {
       className: "time-format",
@@ -1849,15 +2191,15 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx20("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx21("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
-import styled20 from "styled-components";
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
-var Container = styled20.div.attrs((props) => ({
+import styled21 from "styled-components";
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+var Container = styled21.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
   }
@@ -1866,7 +2208,7 @@ var Container = styled20.div.attrs((props) => ({
   display: flex;
   ${(props) => props.$width !== void 0 && `width: ${props.$width}px;`}
 `;
-var ChannelContainer = styled20.div.attrs((props) => ({
+var ChannelContainer = styled21.div.attrs((props) => ({
   style: {
     paddingLeft: `${props.$offset || 0}px`
   }
@@ -1875,7 +2217,7 @@ var ChannelContainer = styled20.div.attrs((props) => ({
   background: ${(props) => props.$backgroundColor || "transparent"};
   flex: 1;
 `;
-var ControlsWrapper = styled20.div.attrs((props) => ({
+var ControlsWrapper = styled21.div.attrs((props) => ({
   style: {
     width: `${props.$controlWidth}px`
   }
@@ -1911,7 +2253,7 @@ var Track = ({
     controls: { show, width: controlWidth }
   } = usePlaylistInfo();
   const controls = useTrackControls();
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     Container,
     {
       $numChannels: numChannels,
@@ -1922,7 +2264,7 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           ControlsWrapper,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -1930,7 +2272,7 @@ var Track = ({
             children: controls
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -1947,8 +2289,8 @@ var Track = ({
 };
 
 // src/components/TrackControls/Button.tsx
-import styled21 from "styled-components";
-var Button = styled21.button.attrs({
+import styled22 from "styled-components";
+var Button = styled22.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -2020,8 +2362,8 @@ var Button = styled21.button.attrs({
 `;
 
 // src/components/TrackControls/ButtonGroup.tsx
-import styled22 from "styled-components";
-var ButtonGroup = styled22.div`
+import styled23 from "styled-components";
+var ButtonGroup = styled23.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -2036,8 +2378,8 @@ var ButtonGroup = styled22.div`
 `;
 
 // src/components/TrackControls/Controls.tsx
-import styled23 from "styled-components";
-var Controls = styled23.div`
+import styled24 from "styled-components";
+var Controls = styled24.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -2053,8 +2395,8 @@ var Controls = styled23.div`
 `;
 
 // src/components/TrackControls/Header.tsx
-import styled24 from "styled-components";
-var Header = styled24.header`
+import styled25 from "styled-components";
+var Header = styled25.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -2069,22 +2411,22 @@ var Header = styled24.header`
 
 // src/components/TrackControls/VolumeDownIcon.tsx
 import { SpeakerLowIcon } from "@phosphor-icons/react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var VolumeDownIcon = (props) => /* @__PURE__ */ jsx22(SpeakerLowIcon, { weight: "light", ...props });
+import { jsx as jsx23 } from "react/jsx-runtime";
+var VolumeDownIcon = (props) => /* @__PURE__ */ jsx23(SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
 import { SpeakerHighIcon } from "@phosphor-icons/react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx23(SpeakerHighIcon, { weight: "light", ...props });
+import { jsx as jsx24 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx24(SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
 import { TrashIcon as PhosphorTrashIcon } from "@phosphor-icons/react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var TrashIcon = (props) => /* @__PURE__ */ jsx24(PhosphorTrashIcon, { weight: "light", ...props });
+import { jsx as jsx25 } from "react/jsx-runtime";
+var TrashIcon = (props) => /* @__PURE__ */ jsx25(PhosphorTrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/Slider.tsx
-import styled25 from "styled-components";
-var Slider = styled25(BaseSlider)`
+import styled26 from "styled-components";
+var Slider = styled26(BaseSlider)`
   width: 75%;
   height: 5px;
   background: ${(props) => props.theme.sliderTrackColor};
@@ -2136,8 +2478,8 @@ var Slider = styled25(BaseSlider)`
 `;
 
 // src/components/TrackControls/SliderWrapper.tsx
-import styled26 from "styled-components";
-var SliderWrapper = styled26.label`
+import styled27 from "styled-components";
+var SliderWrapper = styled27.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -2148,15 +2490,15 @@ var SliderWrapper = styled26.label`
 `;
 
 // src/components/TrackControlsWithDelete.tsx
-import styled27 from "styled-components";
-import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
-var HeaderContainer2 = styled27.div`
+import styled28 from "styled-components";
+import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+var HeaderContainer2 = styled28.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
   padding: 0.5rem 0.5rem 0.25rem 0.5rem;
 `;
-var TrackNameSpan = styled27.span`
+var TrackNameSpan = styled28.span`
   flex: 1;
   font-weight: 600;
   font-size: 0.875rem;
@@ -2165,7 +2507,7 @@ var TrackNameSpan = styled27.span`
   white-space: nowrap;
   margin: 0 0.25rem;
 `;
-var DeleteIconButton = styled27.button`
+var DeleteIconButton = styled28.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2203,13 +2545,13 @@ var TrackControlsWithDelete = ({
   onPanChange,
   onDelete
 }) => {
-  return /* @__PURE__ */ jsxs10(Controls, { children: [
-    /* @__PURE__ */ jsxs10(HeaderContainer2, { children: [
-      /* @__PURE__ */ jsx25(DeleteIconButton, { onClick: onDelete, title: "Delete track", children: /* @__PURE__ */ jsx25(TrashIcon, {}) }),
-      /* @__PURE__ */ jsx25(TrackNameSpan, { children: trackName })
+  return /* @__PURE__ */ jsxs11(Controls, { children: [
+    /* @__PURE__ */ jsxs11(HeaderContainer2, { children: [
+      /* @__PURE__ */ jsx26(DeleteIconButton, { onClick: onDelete, title: "Delete track", children: /* @__PURE__ */ jsx26(TrashIcon, {}) }),
+      /* @__PURE__ */ jsx26(TrackNameSpan, { children: trackName })
     ] }),
-    /* @__PURE__ */ jsxs10(ButtonGroup, { children: [
-      /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs11(ButtonGroup, { children: [
+      /* @__PURE__ */ jsx26(
         Button,
         {
           $variant: muted ? "danger" : "outline",
@@ -2217,7 +2559,7 @@ var TrackControlsWithDelete = ({
           children: "Mute"
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         Button,
         {
           $variant: soloed ? "info" : "outline",
@@ -2226,9 +2568,9 @@ var TrackControlsWithDelete = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs10(SliderWrapper, { children: [
-      /* @__PURE__ */ jsx25(VolumeDownIcon, {}),
-      /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs11(SliderWrapper, { children: [
+      /* @__PURE__ */ jsx26(VolumeDownIcon, {}),
+      /* @__PURE__ */ jsx26(
         Slider,
         {
           min: "0",
@@ -2238,11 +2580,11 @@ var TrackControlsWithDelete = ({
           onChange: (e) => onVolumeChange(parseFloat(e.target.value))
         }
       ),
-      /* @__PURE__ */ jsx25(VolumeUpIcon, {})
+      /* @__PURE__ */ jsx26(VolumeUpIcon, {})
     ] }),
-    /* @__PURE__ */ jsxs10(SliderWrapper, { children: [
-      /* @__PURE__ */ jsx25("span", { children: "L" }),
-      /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs11(SliderWrapper, { children: [
+      /* @__PURE__ */ jsx26("span", { children: "L" }),
+      /* @__PURE__ */ jsx26(
         Slider,
         {
           min: "-1",
@@ -2252,7 +2594,7 @@ var TrackControlsWithDelete = ({
           onChange: (e) => onPanChange(parseFloat(e.target.value))
         }
       ),
-      /* @__PURE__ */ jsx25("span", { children: "R" })
+      /* @__PURE__ */ jsx26("span", { children: "R" })
     ] })
   ] });
 };
@@ -2283,6 +2625,8 @@ export {
   FadeOverlay,
   Header,
   InlineLabel,
+  LoopRegion,
+  LoopRegionMarkers,
   MasterVolumeControl,
   Playhead,
   PlayheadWithMarker,
@@ -2301,6 +2645,7 @@ export {
   TimeFormatSelect,
   TimeInput,
   TimeScale,
+  TimescaleLoopRegion,
   Track,
   TrackControlsContext,
   TrackControlsWithDelete,