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

package/dist/index.js

@@ -56,6 +56,8 @@ __export(index_exports, {
   FadeOverlay: () => FadeOverlay,
   Header: () => Header,
   InlineLabel: () => InlineLabel,
+  LoopRegion: () => LoopRegion,
+  LoopRegionMarkers: () => LoopRegionMarkers,
   MasterVolumeControl: () => MasterVolumeControl,
   Playhead: () => Playhead,
   PlayheadWithMarker: () => PlayheadWithMarker,
@@ -74,6 +76,7 @@ __export(index_exports, {
   TimeFormatSelect: () => TimeFormatSelect,
   TimeInput: () => TimeInput,
   TimeScale: () => TimeScale,
+  TimescaleLoopRegion: () => TimescaleLoopRegion,
   Track: () => Track,
   TrackControlsContext: () => TrackControlsContext,
   TrackControlsWithDelete: () => TrackControlsWithDelete,
@@ -462,6 +465,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",
@@ -533,6 +540,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)",
@@ -1309,7 +1320,8 @@ var TimescaleWrapper = import_styled_components16.default.div.attrs((props) => (
 }))`
   background: ${(props) => props.$backgroundColor || "white"};
   width: 100%;
-  overflow: visible;
+  position: relative;
+  overflow: hidden; /* Constrain loop region to timescale area */
 `;
 var TracksContainer = import_styled_components16.default.div.attrs((props) => ({
   style: props.$width !== void 0 ? { minWidth: `${props.$width}px` } : {}
@@ -1325,7 +1337,8 @@ var ClickOverlay = import_styled_components16.default.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,
@@ -1340,7 +1353,8 @@ var Playlist = ({
   onTracksMouseDown,
   onTracksMouseMove,
   onTracksMouseUp,
-  scrollContainerRef
+  scrollContainerRef,
+  isSelecting
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Wrapper2, { "data-scroll-container": "true", ref: scrollContainerRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     ScrollContainer,
@@ -1355,6 +1369,7 @@ var Playlist = ({
             ClickOverlay,
             {
               $controlsWidth: controlsWidth,
+              $isSelecting: isSelecting,
               onClick: onTracksClick,
               onMouseDown: onTracksMouseDown,
               onMouseMove: onTracksMouseMove,
@@ -1397,11 +1412,341 @@ var Selection = ({
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
+// src/components/LoopRegion.tsx
+var import_react4 = require("react");
+var import_styled_components18 = __toESM(require("styled-components"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var LoopRegionOverlayDiv = import_styled_components18.default.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 = import_styled_components18.default.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__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      LoopRegionOverlayDiv,
+      {
+        $left: startPosition,
+        $width: width,
+        $color: regionColor,
+        "data-loop-region": true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      LoopMarker,
+      {
+        $left: startPosition,
+        $color: markerColor,
+        $isStart: true,
+        "data-loop-marker": "start"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      LoopMarker,
+      {
+        $left: endPosition - 2,
+        $color: markerColor,
+        $isStart: false,
+        "data-loop-marker": "end"
+      }
+    )
+  ] });
+};
+var DraggableMarkerHandle = import_styled_components18.default.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 = import_styled_components18.default.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] = (0, import_react4.useState)(null);
+  const dragStartX = (0, import_react4.useRef)(0);
+  const dragStartPosition = (0, import_react4.useRef)(0);
+  const dragStartEnd = (0, import_react4.useRef)(0);
+  const width = Math.max(0, endPosition - startPosition);
+  const handleMarkerMouseDown = (0, import_react4.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_react4.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_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      TimescaleLoopShade,
+      {
+        $left: startPosition,
+        $width: width,
+        $color: regionColor,
+        $isDragging: draggingMarker === "region",
+        onMouseDown: handleRegionMouseDown,
+        "data-loop-region-timescale": true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      DraggableMarkerHandle,
+      {
+        $left: startPosition,
+        $color: markerColor,
+        $isStart: true,
+        $isDragging: draggingMarker === "start",
+        onMouseDown: (e) => handleMarkerMouseDown(e, "start"),
+        "data-loop-marker-handle": "start"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      DraggableMarkerHandle,
+      {
+        $left: endPosition,
+        $color: markerColor,
+        $isStart: false,
+        $isDragging: draggingMarker === "end",
+        onMouseDown: (e) => handleMarkerMouseDown(e, "end"),
+        "data-loop-marker-handle": "end"
+      }
+    )
+  ] });
+};
+var TimescaleLoopCreator = import_styled_components18.default.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] = (0, import_react4.useState)(false);
+  const createStartX = (0, import_react4.useRef)(0);
+  const containerRef = (0, import_react4.useRef)(null);
+  const hasLoopRegion = endPosition > startPosition;
+  const handleBackgroundMouseDown = (0, import_react4.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_runtime12.jsx)(
+    TimescaleLoopCreator,
+    {
+      ref: containerRef,
+      $leftOffset: controlsOffset,
+      onMouseDown: handleBackgroundMouseDown,
+      "data-timescale-loop-creator": true,
+      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        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
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/TimeInput.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1451,7 +1796,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var TimeInput = ({
   id,
   label,
@@ -1461,8 +1806,8 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react4.useState)("");
-  (0, import_react4.useEffect)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react5.useState)("");
+  (0, import_react5.useEffect)(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -1482,9 +1827,9 @@ var TimeInput = ({
       e.currentTarget.blur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       BaseInput,
       {
         type: "text",
@@ -1501,15 +1846,15 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = (0, import_react5.useState)("hh:mm:ss.uuu");
-  (0, import_react5.useEffect)(() => {
+  const [timeFormat, setTimeFormat] = (0, import_react6.useState)("hh:mm:ss.uuu");
+  (0, import_react6.useEffect)(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -1534,8 +1879,8 @@ var SelectionTimeInputs = ({
       onSelectionChange(selectionStart, value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       TimeInput,
       {
         id: "audio_start",
@@ -1546,7 +1891,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       TimeInput,
       {
         id: "audio_end",
@@ -1561,14 +1906,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-var import_react6 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react6.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react7.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react6.useState)(getScale());
+  const [scale, setScale] = (0, import_react7.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -1576,13 +1921,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react6.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react7.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react7 = require("react");
-var PlaylistInfoContext = (0, import_react7.createContext)({
+var import_react8 = require("react");
+var PlaylistInfoContext = (0, import_react8.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -1596,22 +1941,22 @@ var PlaylistInfoContext = (0, import_react7.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react7.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react8.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react8 = require("react");
-var import_styled_components18 = require("styled-components");
-var useTheme2 = () => (0, import_react8.useContext)(import_styled_components18.ThemeContext);
-
-// src/contexts/TrackControls.tsx
 var import_react9 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var TrackControlsContext = (0, import_react9.createContext)(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react9.Fragment, {}));
-var useTrackControls = () => (0, import_react9.useContext)(TrackControlsContext);
+var import_styled_components19 = require("styled-components");
+var useTheme2 = () => (0, import_react9.useContext)(import_styled_components19.ThemeContext);
 
-// src/contexts/Playout.tsx
+// src/contexts/TrackControls.tsx
 var import_react10 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var TrackControlsContext = (0, import_react10.createContext)(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react10.Fragment, {}));
+var useTrackControls = () => (0, import_react10.useContext)(TrackControlsContext);
+
+// src/contexts/Playout.tsx
+var import_react11 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -1622,8 +1967,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react10.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react10.createContext)({
+var PlayoutStatusContext = (0, import_react11.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react11.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -1632,21 +1977,21 @@ var PlayoutStatusUpdateContext = (0, import_react10.createContext)({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  const [isPlaying, setIsPlaying] = (0, import_react10.useState)(defaultIsPlaying);
-  const [progress, setProgress] = (0, import_react10.useState)(defaultProgress);
-  const [selectionStart, setSelectionStart] = (0, import_react10.useState)(defaultSelectionStart);
-  const [selectionEnd, setSelectionEnd] = (0, import_react10.useState)(defaultSelectionEnd);
+  const [isPlaying, setIsPlaying] = (0, import_react11.useState)(defaultIsPlaying);
+  const [progress, setProgress] = (0, import_react11.useState)(defaultProgress);
+  const [selectionStart, setSelectionStart] = (0, import_react11.useState)(defaultSelectionStart);
+  const [selectionEnd, setSelectionEnd] = (0, import_react11.useState)(defaultSelectionEnd);
   const setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => (0, import_react10.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react10.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react11.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react11.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SmartChannel.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
   const theme = useTheme2();
   const { waveHeight, barWidth, barGap } = usePlaylistInfo();
@@ -1654,7 +1999,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__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Channel,
     {
       ...props,
@@ -1672,11 +2017,11 @@ var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
 };
 
 // src/components/SmartScale.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react11 = __toESM(require("react"));
-var import_styled_components19 = __toESM(require("styled-components"));
+var import_react12 = __toESM(require("react"));
+var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
 function samplesToSeconds(samples, sampleRate) {
@@ -1699,14 +2044,14 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("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 = import_styled_components19.default.div.attrs((props) => ({
+var PlaylistTimeScaleScroll = import_styled_components20.default.div.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     marginLeft: `${props.$controlWidth}px`,
@@ -1718,7 +2063,7 @@ var PlaylistTimeScaleScroll = import_styled_components19.default.div.attrs((prop
   border-bottom: 1px solid ${(props) => props.theme.timeColor};
   box-sizing: border-box;
 `;
-var TimeTicks = import_styled_components19.default.canvas.attrs((props) => ({
+var TimeTicks = import_styled_components20.default.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     height: `${props.$timeScaleHeight}px`
@@ -1729,7 +2074,7 @@ var TimeTicks = import_styled_components19.default.canvas.attrs((props) => ({
   right: 0;
   bottom: 0;
 `;
-var TimeStamp = import_styled_components19.default.div.attrs((props) => ({
+var TimeStamp = import_styled_components20.default.div.attrs((props) => ({
   style: {
     left: `${props.$left + 4}px`
     // Offset 4px to the right of the tick
@@ -1751,15 +2096,15 @@ var TimeScale = (props) => {
   } = props;
   const canvasInfo = /* @__PURE__ */ new Map();
   const timeMarkers = [];
-  const canvasRef = (0, import_react11.useRef)(null);
+  const canvasRef = (0, import_react12.useRef)(null);
   const {
     sampleRate,
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = (0, import_react11.useContext)(PlaylistInfoContext);
+  } = (0, import_react12.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (canvasRef.current !== null) {
       const canvas = canvasRef.current;
       const ctx = canvas.getContext("2d");
@@ -1793,7 +2138,7 @@ var TimeScale = (props) => {
     if (counter % marker === 0) {
       const timeMs = counter;
       const timestamp = formatTime2(timeMs);
-      const timestampContent = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react11.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+      const timestampContent = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react12.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
       timeMarkers.push(timestampContent);
       canvasInfo.set(pix, timeScaleHeight);
     } else if (counter % bigStep === 0) {
@@ -1803,7 +2148,7 @@ var TimeScale = (props) => {
     }
     counter += secondStep;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     PlaylistTimeScaleScroll,
     {
       $cssWidth: widthX,
@@ -1811,7 +2156,7 @@ var TimeScale = (props) => {
       $timeScaleHeight: timeScaleHeight,
       children: [
         timeMarkers,
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           TimeTicks,
           {
             $cssWidth: widthX,
@@ -1825,10 +2170,10 @@ var TimeScale = (props) => {
     }
   );
 };
-var StyledTimeScale = (0, import_styled_components19.withTheme)(TimeScale);
+var StyledTimeScale = (0, import_styled_components20.withTheme)(TimeScale);
 
 // src/components/SmartScale.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -1902,9 +2247,9 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = () => {
-  const { samplesPerPixel, duration } = (0, import_react12.useContext)(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = (0, import_react13.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -1916,9 +2261,9 @@ var SmartScale = () => {
 };
 
 // src/components/TimeFormatSelect.tsx
-var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SelectWrapper = import_styled_components20.default.div`
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var SelectWrapper = import_styled_components21.default.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -1940,7 +2285,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     BaseSelect,
     {
       className: "time-format",
@@ -1948,15 +2293,15 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
-var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Container = import_styled_components21.default.div.attrs((props) => ({
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Container = import_styled_components22.default.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
   }
@@ -1965,7 +2310,7 @@ var Container = import_styled_components21.default.div.attrs((props) => ({
   display: flex;
   ${(props) => props.$width !== void 0 && `width: ${props.$width}px;`}
 `;
-var ChannelContainer = import_styled_components21.default.div.attrs((props) => ({
+var ChannelContainer = import_styled_components22.default.div.attrs((props) => ({
   style: {
     paddingLeft: `${props.$offset || 0}px`
   }
@@ -1974,7 +2319,7 @@ var ChannelContainer = import_styled_components21.default.div.attrs((props) => (
   background: ${(props) => props.$backgroundColor || "transparent"};
   flex: 1;
 `;
-var ControlsWrapper = import_styled_components21.default.div.attrs((props) => ({
+var ControlsWrapper = import_styled_components22.default.div.attrs((props) => ({
   style: {
     width: `${props.$controlWidth}px`
   }
@@ -2010,7 +2355,7 @@ var Track = ({
     controls: { show, width: controlWidth }
   } = usePlaylistInfo();
   const controls = useTrackControls();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     Container,
     {
       $numChannels: numChannels,
@@ -2021,7 +2366,7 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           ControlsWrapper,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2029,7 +2374,7 @@ var Track = ({
             children: controls
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2046,8 +2391,8 @@ var Track = ({
 };
 
 // src/components/TrackControls/Button.tsx
-var import_styled_components22 = __toESM(require("styled-components"));
-var Button = import_styled_components22.default.button.attrs({
+var import_styled_components23 = __toESM(require("styled-components"));
+var Button = import_styled_components23.default.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -2119,8 +2464,8 @@ var Button = import_styled_components22.default.button.attrs({
 `;
 
 // src/components/TrackControls/ButtonGroup.tsx
-var import_styled_components23 = __toESM(require("styled-components"));
-var ButtonGroup = import_styled_components23.default.div`
+var import_styled_components24 = __toESM(require("styled-components"));
+var ButtonGroup = import_styled_components24.default.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -2135,8 +2480,8 @@ var ButtonGroup = import_styled_components23.default.div`
 `;
 
 // src/components/TrackControls/Controls.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
-var Controls = import_styled_components24.default.div`
+var import_styled_components25 = __toESM(require("styled-components"));
+var Controls = import_styled_components25.default.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -2152,8 +2497,8 @@ var Controls = import_styled_components24.default.div`
 `;
 
 // src/components/TrackControls/Header.tsx
-var import_styled_components25 = __toESM(require("styled-components"));
-var Header = import_styled_components25.default.header`
+var import_styled_components26 = __toESM(require("styled-components"));
+var Header = import_styled_components26.default.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -2167,23 +2512,23 @@ var Header = import_styled_components25.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react13 = require("@phosphor-icons/react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react13.SpeakerLowIcon, { weight: "light", ...props });
-
-// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react14 = require("@phosphor-icons/react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react14.SpeakerHighIcon, { weight: "light", ...props });
+var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react14.SpeakerLowIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/TrashIcon.tsx
+// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react15 = require("@phosphor-icons/react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react15.TrashIcon, { weight: "light", ...props });
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react15.SpeakerHighIcon, { weight: "light", ...props });
+
+// src/components/TrackControls/TrashIcon.tsx
+var import_react16 = require("@phosphor-icons/react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react16.TrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/Slider.tsx
-var import_styled_components26 = __toESM(require("styled-components"));
-var Slider = (0, import_styled_components26.default)(BaseSlider)`
+var import_styled_components27 = __toESM(require("styled-components"));
+var Slider = (0, import_styled_components27.default)(BaseSlider)`
   width: 75%;
   height: 5px;
   background: ${(props) => props.theme.sliderTrackColor};
@@ -2235,8 +2580,8 @@ var Slider = (0, import_styled_components26.default)(BaseSlider)`
 `;
 
 // src/components/TrackControls/SliderWrapper.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var SliderWrapper = import_styled_components27.default.label`
+var import_styled_components28 = __toESM(require("styled-components"));
+var SliderWrapper = import_styled_components28.default.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -2247,15 +2592,15 @@ var SliderWrapper = import_styled_components27.default.label`
 `;
 
 // src/components/TrackControlsWithDelete.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var HeaderContainer2 = import_styled_components28.default.div`
+var import_styled_components29 = __toESM(require("styled-components"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var HeaderContainer2 = import_styled_components29.default.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
   padding: 0.5rem 0.5rem 0.25rem 0.5rem;
 `;
-var TrackNameSpan = import_styled_components28.default.span`
+var TrackNameSpan = import_styled_components29.default.span`
   flex: 1;
   font-weight: 600;
   font-size: 0.875rem;
@@ -2264,7 +2609,7 @@ var TrackNameSpan = import_styled_components28.default.span`
   white-space: nowrap;
   margin: 0 0.25rem;
 `;
-var DeleteIconButton = import_styled_components28.default.button`
+var DeleteIconButton = import_styled_components29.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2302,13 +2647,13 @@ var TrackControlsWithDelete = ({
   onPanChange,
   onDelete
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Controls, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(HeaderContainer2, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DeleteIconButton, { onClick: onDelete, title: "Delete track", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TrashIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TrackNameSpan, { children: trackName })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Controls, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(HeaderContainer2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DeleteIconButton, { onClick: onDelete, title: "Delete track", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TrashIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TrackNameSpan, { children: trackName })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ButtonGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ButtonGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Button,
         {
           $variant: muted ? "danger" : "outline",
@@ -2316,7 +2661,7 @@ var TrackControlsWithDelete = ({
           children: "Mute"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Button,
         {
           $variant: soloed ? "info" : "outline",
@@ -2325,9 +2670,9 @@ var TrackControlsWithDelete = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(SliderWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VolumeDownIcon, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(SliderWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VolumeDownIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Slider,
         {
           min: "0",
@@ -2337,11 +2682,11 @@ var TrackControlsWithDelete = ({
           onChange: (e) => onVolumeChange(parseFloat(e.target.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VolumeUpIcon, {})
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VolumeUpIcon, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(SliderWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "L" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(SliderWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "L" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Slider,
         {
           min: "-1",
@@ -2351,7 +2696,7 @@ var TrackControlsWithDelete = ({
           onChange: (e) => onPanChange(parseFloat(e.target.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "R" })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "R" })
     ] })
   ] });
 };
@@ -2383,6 +2728,8 @@ var TrackControlsWithDelete = ({
   FadeOverlay,
   Header,
   InlineLabel,
+  LoopRegion,
+  LoopRegionMarkers,
   MasterVolumeControl,
   Playhead,
   PlayheadWithMarker,
@@ -2401,6 +2748,7 @@ var TrackControlsWithDelete = ({
   TimeFormatSelect,
   TimeInput,
   TimeScale,
+  TimescaleLoopRegion,
   Track,
   TrackControlsContext,
   TrackControlsWithDelete,