@waveform-playlist/ui-components 6.0.2 → 7.0.0

package/dist/index.js

@@ -64,6 +64,7 @@ __export(index_exports, {
   Playhead: () => Playhead,
   PlayheadWithMarker: () => PlayheadWithMarker,
   Playlist: () => Playlist,
+  PlaylistErrorBoundary: () => PlaylistErrorBoundary,
   PlaylistInfoContext: () => PlaylistInfoContext,
   PlayoutProvider: () => PlayoutProvider,
   ScreenReaderOnly: () => ScreenReaderOnly,
@@ -766,6 +767,44 @@ var Channel = (props) => {
   );
 };
 
+// src/components/ErrorBoundary.tsx
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var errorContainerStyle = {
+  padding: "16px",
+  background: "#1a1a2e",
+  color: "#e0e0e0",
+  border: "1px solid #d08070",
+  borderRadius: "4px",
+  fontFamily: "monospace",
+  fontSize: "13px",
+  minHeight: "60px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var PlaylistErrorBoundary = class extends import_react2.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[waveform-playlist] Render error:", error, errorInfo.componentStack);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
+    }
+    return this.props.children;
+  }
+};
+
 // src/components/Clip.tsx
 var import_styled_components13 = __toESM(require("styled-components"));
 var import_core = require("@dnd-kit/core");
@@ -773,7 +812,7 @@ var import_utilities = require("@dnd-kit/utilities");
 
 // src/components/ClipHeader.tsx
 var import_styled_components10 = __toESM(require("styled-components"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var CLIP_HEADER_HEIGHT = 22;
 var HeaderContainer = import_styled_components10.default.div`
   position: relative;
@@ -813,13 +852,13 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     HeaderContainer,
     {
       $isDragging: false,
       $interactive: false,
       $isSelected: isSelected,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TrackName, { children: trackName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TrackName, { children: trackName })
     }
   );
 };
@@ -833,7 +872,7 @@ var ClipHeader = ({
   dragHandleProps
 }) => {
   if (disableDrag || !dragHandleProps) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       ClipHeaderPresentational,
       {
         trackName,
@@ -842,7 +881,7 @@ var ClipHeader = ({
     );
   }
   const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     HeaderContainer,
     {
       ref: setActivatorNodeRef,
@@ -851,15 +890,15 @@ var ClipHeader = ({
       $isSelected: isSelected,
       ...listeners,
       ...attributes,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TrackName, { children: trackName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TrackName, { children: trackName })
     }
   );
 };
 
 // src/components/ClipBoundary.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var CLIP_BOUNDARY_WIDTH = 8;
 var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = import_styled_components11.default.div`
@@ -899,12 +938,12 @@ var ClipBoundary = ({
   dragHandleProps,
   touchOptimized = false
 }) => {
-  const [isHovered, setIsHovered] = import_react2.default.useState(false);
+  const [isHovered, setIsHovered] = import_react3.default.useState(false);
   if (!dragHandleProps) {
     return null;
   }
   const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     BoundaryContainer,
     {
       ref: setActivatorNodeRef,
@@ -924,7 +963,7 @@ var ClipBoundary = ({
 
 // src/components/FadeOverlay.tsx
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var FadeContainer = import_styled_components12.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -981,7 +1020,7 @@ 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_runtime6.jsx)(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: generateFadePath(width, 100, curveType),
@@ -991,7 +1030,7 @@ var FadeOverlay = ({
 };
 
 // src/components/Clip.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ClipContainer = import_styled_components13.default.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
     left: `${props.$left}px`,
@@ -1076,7 +1115,7 @@ var Clip = ({
     zIndex: isDragging ? 100 : void 0
     // Below controls (z-index: 999) but above other clips
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     ClipContainer,
     {
       ref: setNodeRef,
@@ -1089,7 +1128,7 @@ var Clip = ({
       "data-track-id": trackId,
       onMouseDown,
       children: [
-        showHeader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ClipHeader,
           {
             clipId,
@@ -1101,9 +1140,9 @@ var Clip = ({
             dragHandleProps: enableDrag ? { attributes, listeners, setActivatorNodeRef } : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ChannelsWrapper, { $isOverlay: isOverlay, children: [
           children,
-          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             FadeOverlay,
             {
               left: 0,
@@ -1112,7 +1151,7 @@ var Clip = ({
               curveType: fadeIn.type
             }
           ),
-          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             FadeOverlay,
             {
               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -1122,8 +1161,8 @@ var Clip = ({
             }
           )
         ] }),
-        showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             ClipBoundary,
             {
               clipId,
@@ -1139,7 +1178,7 @@ var Clip = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             ClipBoundary,
             {
               clipId,
@@ -1163,7 +1202,7 @@ var Clip = ({
 
 // src/components/MasterVolumeControl.tsx
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var VolumeContainer = import_styled_components14.default.div`
   display: inline-flex;
   align-items: center;
@@ -1185,9 +1224,9 @@ var MasterVolumeControl = ({
   const handleChange = (e) => {
     onChange(parseFloat(e.target.value) / 100);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(VolumeContainer, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(VolumeContainer, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       VolumeSlider,
       {
         min: "0",
@@ -1202,9 +1241,9 @@ var MasterVolumeControl = ({
 };
 
 // src/components/Playhead.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
@@ -1221,7 +1260,7 @@ var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlayheadLine, { $position: position, $color: color });
 };
 var PlayheadWithMarkerContainer = import_styled_components15.default.div`
   position: absolute;
@@ -1261,9 +1300,9 @@ var PlayheadWithMarker = ({
   controlsOffset,
   getAudioContextTime
 }) => {
-  const containerRef = (0, import_react3.useRef)(null);
-  const animationFrameRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const containerRef = (0, import_react4.useRef)(null);
+  const animationFrameRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1292,22 +1331,22 @@ var PlayheadWithMarker = ({
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, controlsOffset, currentTimeRef, playbackStartTimeRef, audioStartPositionRef, getAudioContextTime]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.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_runtime9.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkerLine, { $color: color })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkerTriangle, { $color: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkerLine, { $color: color })
   ] });
 };
 
 // src/components/Playlist.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Wrapper2 = import_styled_components16.default.div`
   overflow-y: hidden;
   overflow-x: auto;
@@ -1361,16 +1400,16 @@ var Playlist = ({
   isSelecting,
   "data-playlist-state": playlistState
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: scrollContainerRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: scrollContainerRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     ScrollContainer,
     {
       $backgroundColor: backgroundColor,
       $width: scrollContainerWidth,
       children: [
-        timescale && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
+        timescale && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
           children,
-          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             ClickOverlay,
             {
               $controlsWidth: controlsWidth,
@@ -1390,7 +1429,7 @@ var StyledPlaylist = (0, import_styled_components16.withTheme)(Playlist);
 
 // src/components/Selection.tsx
 var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var SelectionOverlay = import_styled_components17.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1414,13 +1453,13 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var LoopRegionOverlayDiv = import_styled_components18.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1469,8 +1508,8 @@ var LoopRegion = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1479,7 +1518,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       LoopMarker,
       {
         $left: startPosition,
@@ -1488,7 +1527,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1569,12 +1608,12 @@ var LoopRegionMarkers = ({
   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 [draggingMarker, setDraggingMarker] = (0, import_react5.useState)(null);
+  const dragStartX = (0, import_react5.useRef)(0);
+  const dragStartPosition = (0, import_react5.useRef)(0);
+  const dragStartEnd = (0, import_react5.useRef)(0);
   const width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = (0, import_react4.useCallback)((e, marker) => {
+  const handleMarkerMouseDown = (0, import_react5.useCallback)((e, marker) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggingMarker(marker);
@@ -1599,7 +1638,7 @@ var LoopRegionMarkers = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]);
-  const handleRegionMouseDown = (0, import_react4.useCallback)((e) => {
+  const handleRegionMouseDown = (0, import_react5.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggingMarker("region");
@@ -1632,8 +1671,8 @@ var LoopRegionMarkers = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1644,7 +1683,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1655,7 +1694,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1690,11 +1729,11 @@ var TimescaleLoopRegion = ({
   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 [isCreating, setIsCreating] = (0, import_react5.useState)(false);
+  const createStartX = (0, import_react5.useRef)(0);
+  const containerRef = (0, import_react5.useRef)(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = (0, import_react4.useCallback)((e) => {
+  const handleBackgroundMouseDown = (0, import_react5.useCallback)((e) => {
     const target = e.target;
     if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
       return;
@@ -1722,14 +1761,14 @@ var TimescaleLoopRegion = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [minPosition, maxPosition, onLoopRegionChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     TimescaleLoopCreator,
     {
       ref: containerRef,
       $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1748,10 +1787,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/TimeInput.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1801,7 +1840,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var TimeInput = ({
   id,
   label,
@@ -1811,8 +1850,8 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react5.useState)("");
-  (0, import_react5.useEffect)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react6.useState)("");
+  (0, import_react6.useEffect)(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -1832,9 +1871,9 @@ var TimeInput = ({
       e.currentTarget.blur();
     }
   };
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       BaseInput,
       {
         type: "text",
@@ -1851,15 +1890,15 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = (0, import_react6.useState)("hh:mm:ss.uuu");
-  (0, import_react6.useEffect)(() => {
+  const [timeFormat, setTimeFormat] = (0, import_react7.useState)("hh:mm:ss.uuu");
+  (0, import_react7.useEffect)(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -1884,8 +1923,8 @@ var SelectionTimeInputs = ({
       onSelectionChange(selectionStart, value);
     }
   };
-  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)(
       TimeInput,
       {
         id: "audio_start",
@@ -1896,7 +1935,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       TimeInput,
       {
         id: "audio_end",
@@ -1911,14 +1950,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-var import_react7 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react7.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react8.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react7.useState)(getScale());
+  const [scale, setScale] = (0, import_react8.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -1926,13 +1965,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react7.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react8.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react8 = require("react");
-var PlaylistInfoContext = (0, import_react8.createContext)({
+var import_react9 = require("react");
+var PlaylistInfoContext = (0, import_react9.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -1946,22 +1985,22 @@ var PlaylistInfoContext = (0, import_react8.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react8.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react9.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_styled_components19 = require("styled-components");
-var useTheme2 = () => (0, import_react9.useContext)(import_styled_components19.ThemeContext);
+var useTheme2 = () => (0, import_react10.useContext)(import_styled_components19.ThemeContext);
 
 // 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 TrackControlsContext = (0, import_react11.createContext)(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react11.Fragment, {}));
+var useTrackControls = () => (0, import_react11.useContext)(TrackControlsContext);
+
+// src/contexts/Playout.tsx
+var import_react12 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -1972,8 +2011,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react11.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react11.createContext)({
+var PlayoutStatusContext = (0, import_react12.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react12.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -1982,23 +2021,23 @@ var PlayoutStatusUpdateContext = (0, import_react11.createContext)({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  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 [isPlaying, setIsPlaying] = (0, import_react12.useState)(defaultIsPlaying);
+  const [progress, setProgress] = (0, import_react12.useState)(defaultProgress);
+  const [selectionStart, setSelectionStart] = (0, import_react12.useState)(defaultSelectionStart);
+  const [selectionEnd, setSelectionEnd] = (0, import_react12.useState)(defaultSelectionEnd);
   const setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => (0, import_react11.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react11.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react12.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react12.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var MAX_CANVAS_WIDTH2 = 1e3;
 var Wrapper3 = import_styled_components20.default.div.attrs((props) => ({
   style: {
@@ -2048,11 +2087,11 @@ var SpectrogramChannel = ({
   onCanvasesReady
 }) => {
   const channelIndex = channelIndexProp ?? index;
-  const canvasesRef = (0, import_react12.useRef)([]);
-  const registeredIdsRef = (0, import_react12.useRef)([]);
-  const transferredCanvasesRef = (0, import_react12.useRef)(/* @__PURE__ */ new WeakSet());
+  const canvasesRef = (0, import_react13.useRef)([]);
+  const registeredIdsRef = (0, import_react13.useRef)([]);
+  const transferredCanvasesRef = (0, import_react13.useRef)(/* @__PURE__ */ new WeakSet());
   const isWorkerMode = !!(workerApi && clipId);
-  const canvasRef = (0, import_react12.useCallback)(
+  const canvasRef = (0, import_react13.useCallback)(
     (canvas) => {
       if (canvas !== null) {
         const idx = parseInt(canvas.dataset.index, 10);
@@ -2061,7 +2100,7 @@ var SpectrogramChannel = ({
     },
     []
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isWorkerMode) return;
     const canvasCount2 = Math.ceil(length / MAX_CANVAS_WIDTH2);
     canvasesRef.current.length = canvasCount2;
@@ -2098,7 +2137,7 @@ var SpectrogramChannel = ({
   const lut = colorLUT ?? defaultGetColorMap();
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? ((f, minF, maxF2) => (f - minF) / (maxF2 - minF));
-  (0, import_react12.useLayoutEffect)(() => {
+  (0, import_react13.useLayoutEffect)(() => {
     if (isWorkerMode || !data) return;
     const canvases2 = canvasesRef.current;
     const { frequencyBinCount, frameCount, hopSize, sampleRate, gainDb, rangeDb: rawRangeDb } = data;
@@ -2175,7 +2214,7 @@ var SpectrogramChannel = ({
   while (totalWidth > 0) {
     const currentWidth = Math.min(totalWidth, MAX_CANVAS_WIDTH2);
     canvases.push(
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         SpectrogramCanvas,
         {
           $cssWidth: currentWidth,
@@ -2191,11 +2230,11 @@ var SpectrogramChannel = ({
     totalWidth -= currentWidth;
     canvasCount++;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2220,7 +2259,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2241,8 +2280,8 @@ var SmartChannel = ({
   }
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2261,11 +2300,10 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Channel,
         {
           ...props,
-          ...theme,
           index: 0,
           waveOutlineColor,
           waveFillColor,
@@ -2279,11 +2317,10 @@ var SmartChannel = ({
       ) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Channel,
     {
       ...props,
-      ...theme,
       waveOutlineColor,
       waveFillColor,
       waveHeight,
@@ -2297,9 +2334,9 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = import_styled_components21.default.div`
   position: sticky;
@@ -2349,12 +2386,12 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = (0, import_react13.useRef)(null);
+  const canvasRef = (0, import_react14.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_react13.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2381,7 +2418,7 @@ var SpectrogramLabels = ({
       }
     }
   }, [waveHeight, numChannels, frequencyScaleFn, minFrequency, maxFrequency, labelsColor, labelsBackground, devicePixelRatio, spectrogramHeight, clipHeaderOffset]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -2397,10 +2434,10 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
@@ -2424,7 +2461,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
@@ -2476,15 +2513,15 @@ var TimeScale = (props) => {
   } = props;
   const canvasInfo = /* @__PURE__ */ new Map();
   const timeMarkers = [];
-  const canvasRef = (0, import_react14.useRef)(null);
+  const canvasRef = (0, import_react15.useRef)(null);
   const {
     sampleRate,
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = (0, import_react14.useContext)(PlaylistInfoContext);
+  } = (0, import_react15.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (canvasRef.current !== null) {
       const canvas = canvasRef.current;
       const ctx = canvas.getContext("2d");
@@ -2518,7 +2555,7 @@ var TimeScale = (props) => {
     if (counter % marker === 0) {
       const timeMs = counter;
       const timestamp = formatTime2(timeMs);
-      const timestampContent = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react14.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+      const timestampContent = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react15.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
       timeMarkers.push(timestampContent);
       canvasInfo.set(pix, timeScaleHeight);
     } else if (counter % bigStep === 0) {
@@ -2528,7 +2565,7 @@ var TimeScale = (props) => {
     }
     counter += secondStep;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     PlaylistTimeScaleScroll,
     {
       $cssWidth: widthX,
@@ -2536,7 +2573,7 @@ var TimeScale = (props) => {
       $timeScaleHeight: timeScaleHeight,
       children: [
         timeMarkers,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           TimeTicks,
           {
             $cssWidth: widthX,
@@ -2553,7 +2590,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = (0, import_styled_components22.withTheme)(TimeScale);
 
 // src/components/SmartScale.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2627,9 +2664,9 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = (0, import_react15.useContext)(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = (0, import_react16.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2643,7 +2680,7 @@ var SmartScale = ({ renderTimestamp }) => {
 
 // src/components/TimeFormatSelect.tsx
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var SelectWrapper = import_styled_components23.default.div`
   display: inline-flex;
   align-items: center;
@@ -2666,7 +2703,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     BaseSelect,
     {
       className: "time-format",
@@ -2674,14 +2711,14 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = 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`
@@ -2736,7 +2773,7 @@ var Track = ({
     controls: { show, width: controlWidth }
   } = usePlaylistInfo();
   const controls = useTrackControls();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Container,
     {
       $numChannels: numChannels,
@@ -2747,7 +2784,7 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           ControlsWrapper,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2755,7 +2792,7 @@ var Track = ({
             children: controls
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2862,8 +2899,8 @@ var ButtonGroup = import_styled_components26.default.div`
 
 // src/components/TrackControls/CloseButton.tsx
 var import_styled_components27 = __toESM(require("styled-components"));
-var import_react16 = require("@phosphor-icons/react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react17 = require("@phosphor-icons/react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var StyledCloseButton = import_styled_components27.default.button`
   position: absolute;
   left: 0;
@@ -2888,7 +2925,7 @@ var StyledCloseButton = import_styled_components27.default.button`
 var CloseButton = ({
   onClick,
   title = "Remove track"
-}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react16.X, { size: 12, weight: "bold" }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react17.X, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 var import_styled_components28 = __toESM(require("styled-components"));
@@ -2923,24 +2960,24 @@ var Header = import_styled_components29.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react17 = require("@phosphor-icons/react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react17.SpeakerLowIcon, { weight: "light", ...props });
-
-// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react18 = require("@phosphor-icons/react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react18.SpeakerHighIcon, { weight: "light", ...props });
+var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react18.SpeakerLowIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/TrashIcon.tsx
+// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react19 = require("@phosphor-icons/react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react19.TrashIcon, { weight: "light", ...props });
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react19.SpeakerHighIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/DotsIcon.tsx
+// src/components/TrackControls/TrashIcon.tsx
 var import_react20 = require("@phosphor-icons/react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react20.DotsThreeIcon, { weight: "bold", ...props });
+var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react20.TrashIcon, { weight: "light", ...props });
+
+// src/components/TrackControls/DotsIcon.tsx
+var import_react21 = require("@phosphor-icons/react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react21.DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
@@ -3008,10 +3045,10 @@ var SliderWrapper = import_styled_components31.default.label`
 `;
 
 // src/components/TrackMenu.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_styled_components32 = __toESM(require("styled-components"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var MenuContainer = import_styled_components32.default.div`
   position: relative;
   display: inline-block;
@@ -3052,13 +3089,13 @@ var Divider = import_styled_components32.default.hr`
 var TrackMenu = ({
   items: itemsProp
 }) => {
-  const [open, setOpen] = (0, import_react21.useState)(false);
+  const [open, setOpen] = (0, import_react22.useState)(false);
   const close = () => setOpen(false);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
-  const [dropdownPos, setDropdownPos] = (0, import_react21.useState)({ top: 0, left: 0 });
-  const buttonRef = (0, import_react21.useRef)(null);
-  const dropdownRef = (0, import_react21.useRef)(null);
-  (0, import_react21.useEffect)(() => {
+  const [dropdownPos, setDropdownPos] = (0, import_react22.useState)({ top: 0, left: 0 });
+  const buttonRef = (0, import_react22.useRef)(null);
+  const dropdownRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (open && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
       setDropdownPos({
@@ -3067,7 +3104,7 @@ var TrackMenu = ({
       });
     }
   }, [open]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3078,8 +3115,8 @@ var TrackMenu = ({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MenuContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(MenuContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       MenuButton,
       {
         ref: buttonRef,
@@ -3090,19 +3127,19 @@ var TrackMenu = ({
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react21.default.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react22.default.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3147,6 +3184,7 @@ var TrackMenu = ({
   Playhead,
   PlayheadWithMarker,
   Playlist,
+  PlaylistErrorBoundary,
   PlaylistInfoContext,
   PlayoutProvider,
   ScreenReaderOnly,