@waveform-playlist/ui-components 6.0.1 → 7.0.0

package/dist/index.mjs

@@ -656,6 +656,44 @@ var Channel = (props) => {
   );
 };
 
+// src/components/ErrorBoundary.tsx
+import React2 from "react";
+import { jsx as jsx4 } from "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 React2.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__ */ jsx4("div", { style: errorContainerStyle, children: "Waveform playlist encountered an error. Check console for details." });
+    }
+    return this.props.children;
+  }
+};
+
 // src/components/Clip.tsx
 import styled13 from "styled-components";
 import { useDraggable } from "@dnd-kit/core";
@@ -663,7 +701,7 @@ import { CSS } from "@dnd-kit/utilities";
 
 // src/components/ClipHeader.tsx
 import styled10 from "styled-components";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var CLIP_HEADER_HEIGHT = 22;
 var HeaderContainer = styled10.div`
   position: relative;
@@ -703,13 +741,13 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     HeaderContainer,
     {
       $isDragging: false,
       $interactive: false,
       $isSelected: isSelected,
-      children: /* @__PURE__ */ jsx4(TrackName, { children: trackName })
+      children: /* @__PURE__ */ jsx5(TrackName, { children: trackName })
     }
   );
 };
@@ -723,7 +761,7 @@ var ClipHeader = ({
   dragHandleProps
 }) => {
   if (disableDrag || !dragHandleProps) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       ClipHeaderPresentational,
       {
         trackName,
@@ -732,7 +770,7 @@ var ClipHeader = ({
     );
   }
   const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     HeaderContainer,
     {
       ref: setActivatorNodeRef,
@@ -741,15 +779,15 @@ var ClipHeader = ({
       $isSelected: isSelected,
       ...listeners,
       ...attributes,
-      children: /* @__PURE__ */ jsx4(TrackName, { children: trackName })
+      children: /* @__PURE__ */ jsx5(TrackName, { children: trackName })
     }
   );
 };
 
 // src/components/ClipBoundary.tsx
-import React2 from "react";
+import React3 from "react";
 import styled11 from "styled-components";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var CLIP_BOUNDARY_WIDTH = 8;
 var CLIP_BOUNDARY_WIDTH_TOUCH = 24;
 var BoundaryContainer = styled11.div`
@@ -789,12 +827,12 @@ var ClipBoundary = ({
   dragHandleProps,
   touchOptimized = false
 }) => {
-  const [isHovered, setIsHovered] = React2.useState(false);
+  const [isHovered, setIsHovered] = React3.useState(false);
   if (!dragHandleProps) {
     return null;
   }
   const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     BoundaryContainer,
     {
       ref: setActivatorNodeRef,
@@ -814,7 +852,7 @@ var ClipBoundary = ({
 
 // src/components/FadeOverlay.tsx
 import styled12, { useTheme } from "styled-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var FadeContainer = styled12.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -871,7 +909,7 @@ var FadeOverlay = ({
   const theme = useTheme();
   if (width < 1) return null;
   const fillColor = color || theme?.fadeOverlayColor || "rgba(0, 0, 0, 0.4)";
-  return /* @__PURE__ */ jsx6(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ jsx6(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(FadeContainer, { $left: left, $width: width, $type: type, children: /* @__PURE__ */ jsx7(FadeSvg, { $type: type, viewBox: `0 0 ${width} 100`, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx7(
     "path",
     {
       d: generateFadePath(width, 100, curveType),
@@ -881,7 +919,7 @@ var FadeOverlay = ({
 };
 
 // src/components/Clip.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 var ClipContainer = styled13.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
     left: `${props.$left}px`,
@@ -979,7 +1017,7 @@ var Clip = ({
       "data-track-id": trackId,
       onMouseDown,
       children: [
-        showHeader && /* @__PURE__ */ jsx7(
+        showHeader && /* @__PURE__ */ jsx8(
           ClipHeader,
           {
             clipId,
@@ -993,7 +1031,7 @@ var Clip = ({
         ),
         /* @__PURE__ */ jsxs2(ChannelsWrapper, { $isOverlay: isOverlay, children: [
           children,
-          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ jsx7(
+          showFades && fadeIn && fadeIn.duration > 0 && /* @__PURE__ */ jsx8(
             FadeOverlay,
             {
               left: 0,
@@ -1002,7 +1040,7 @@ var Clip = ({
               curveType: fadeIn.type
             }
           ),
-          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ jsx7(
+          showFades && fadeOut && fadeOut.duration > 0 && /* @__PURE__ */ jsx8(
             FadeOverlay,
             {
               left: width - Math.floor(fadeOut.duration * sampleRate / samplesPerPixel),
@@ -1013,7 +1051,7 @@ var Clip = ({
           )
         ] }),
         showHeader && !disableHeaderDrag && !isOverlay && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             ClipBoundary,
             {
               clipId,
@@ -1029,7 +1067,7 @@ var Clip = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             ClipBoundary,
             {
               clipId,
@@ -1053,7 +1091,7 @@ var Clip = ({
 
 // src/components/MasterVolumeControl.tsx
 import styled14 from "styled-components";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var VolumeContainer = styled14.div`
   display: inline-flex;
   align-items: center;
@@ -1076,8 +1114,8 @@ var MasterVolumeControl = ({
     onChange(parseFloat(e.target.value) / 100);
   };
   return /* @__PURE__ */ jsxs3(VolumeContainer, { className, children: [
-    /* @__PURE__ */ jsx8(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(VolumeLabel, { htmlFor: "master-gain", children: "Master Volume" }),
+    /* @__PURE__ */ jsx9(
       VolumeSlider,
       {
         min: "0",
@@ -1094,7 +1132,7 @@ var MasterVolumeControl = ({
 // src/components/Playhead.tsx
 import { useRef as useRef2, useEffect } from "react";
 import styled15 from "styled-components";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var PlayheadLine = styled15.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
@@ -1111,7 +1149,7 @@ var PlayheadLine = styled15.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ jsx9(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ jsx10(PlayheadLine, { $position: position, $color: color });
 };
 var PlayheadWithMarkerContainer = styled15.div`
   position: absolute;
@@ -1190,14 +1228,14 @@ var PlayheadWithMarker = ({
     }
   });
   return /* @__PURE__ */ jsxs4(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ jsx9(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ jsx9(MarkerLine, { $color: color })
+    /* @__PURE__ */ jsx10(MarkerTriangle, { $color: color }),
+    /* @__PURE__ */ jsx10(MarkerLine, { $color: color })
   ] });
 };
 
 // src/components/Playlist.tsx
 import styled16, { withTheme } from "styled-components";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var Wrapper2 = styled16.div`
   overflow-y: hidden;
   overflow-x: auto;
@@ -1251,16 +1289,16 @@ var Playlist = ({
   isSelecting,
   "data-playlist-state": playlistState
 }) => {
-  return /* @__PURE__ */ jsx10(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: scrollContainerRef, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx11(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: scrollContainerRef, children: /* @__PURE__ */ jsxs5(
     ScrollContainer,
     {
       $backgroundColor: backgroundColor,
       $width: scrollContainerWidth,
       children: [
-        timescale && /* @__PURE__ */ jsx10(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
+        timescale && /* @__PURE__ */ jsx11(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
         /* @__PURE__ */ jsxs5(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
           children,
-          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ jsx10(
+          (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ jsx11(
             ClickOverlay,
             {
               $controlsWidth: controlsWidth,
@@ -1280,7 +1318,7 @@ var StyledPlaylist = withTheme(Playlist);
 
 // src/components/Selection.tsx
 import styled17 from "styled-components";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var SelectionOverlay = styled17.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1304,13 +1342,13 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ jsx12(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
 import { useCallback as useCallback2, useRef as useRef3, useState } from "react";
 import styled18 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var LoopRegionOverlayDiv = styled18.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
@@ -1360,7 +1398,7 @@ var LoopRegion = ({
     return null;
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1369,7 +1407,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       LoopMarker,
       {
         $left: startPosition,
@@ -1378,7 +1416,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1523,7 +1561,7 @@ var LoopRegionMarkers = ({
     return null;
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1534,7 +1572,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1545,7 +1583,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1612,14 +1650,14 @@ var TimescaleLoopRegion = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [minPosition, maxPosition, onLoopRegionChange]);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     TimescaleLoopCreator,
     {
       ref: containerRef,
       $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ jsx12(
+      children: hasLoopRegion && /* @__PURE__ */ jsx13(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1691,7 +1729,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var TimeInput = ({
   id,
   label,
@@ -1723,8 +1761,8 @@ var TimeInput = ({
     }
   };
   return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx13(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx14(
       BaseInput,
       {
         type: "text",
@@ -1741,7 +1779,7 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
@@ -1775,7 +1813,7 @@ var SelectionTimeInputs = ({
     }
   };
   return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       TimeInput,
       {
         id: "audio_start",
@@ -1786,7 +1824,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       TimeInput,
       {
         id: "audio_end",
@@ -1802,7 +1840,7 @@ var SelectionTimeInputs = ({
 
 // src/contexts/DevicePixelRatio.tsx
 import { useState as useState4, createContext, useContext } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function getScale() {
   return window.devicePixelRatio;
 }
@@ -1816,7 +1854,7 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ jsx15(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ jsx16(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
 var useDevicePixelRatio = () => useContext(DevicePixelRatioContext);
 
@@ -1845,8 +1883,8 @@ var useTheme2 = () => useContext3(ThemeContext);
 
 // src/contexts/TrackControls.tsx
 import { createContext as createContext3, useContext as useContext4, Fragment as Fragment5 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var TrackControlsContext = createContext3(/* @__PURE__ */ jsx16(Fragment5, {}));
+import { jsx as jsx17 } from "react/jsx-runtime";
+var TrackControlsContext = createContext3(/* @__PURE__ */ jsx17(Fragment5, {}));
 var useTrackControls = () => useContext4(TrackControlsContext);
 
 // src/contexts/Playout.tsx
@@ -1855,7 +1893,7 @@ import {
   createContext as createContext4,
   useContext as useContext5
 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -1884,7 +1922,7 @@ var PlayoutProvider = ({ children }) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ jsx17(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx17(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ jsx18(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx18(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
 var usePlayoutStatus = () => useContext5(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext5(PlayoutStatusUpdateContext);
@@ -1892,7 +1930,7 @@ var usePlayoutStatusUpdate = () => useContext5(PlayoutStatusUpdateContext);
 // src/components/SpectrogramChannel.tsx
 import { useLayoutEffect as useLayoutEffect2, useCallback as useCallback3, useRef as useRef4, useEffect as useEffect4 } from "react";
 import styled19 from "styled-components";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var MAX_CANVAS_WIDTH2 = 1e3;
 var Wrapper3 = styled19.div.attrs((props) => ({
   style: {
@@ -2069,7 +2107,7 @@ var SpectrogramChannel = ({
   while (totalWidth > 0) {
     const currentWidth = Math.min(totalWidth, MAX_CANVAS_WIDTH2);
     canvases.push(
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         SpectrogramCanvas,
         {
           $cssWidth: currentWidth,
@@ -2085,11 +2123,11 @@ var SpectrogramChannel = ({
     totalWidth -= currentWidth;
     canvasCount++;
   }
-  return /* @__PURE__ */ jsx18(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ jsx19(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2114,7 +2152,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2136,7 +2174,7 @@ var SmartChannel = ({
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
     return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2155,11 +2193,10 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ jsx19("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ jsx20(
         Channel,
         {
           ...props,
-          ...theme,
           index: 0,
           waveOutlineColor,
           waveFillColor,
@@ -2173,11 +2210,10 @@ var SmartChannel = ({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     Channel,
     {
       ...props,
-      ...theme,
       waveOutlineColor,
       waveFillColor,
       waveHeight,
@@ -2193,7 +2229,7 @@ var SmartChannel = ({
 // src/components/SpectrogramLabels.tsx
 import { useRef as useRef5, useLayoutEffect as useLayoutEffect3 } from "react";
 import styled20 from "styled-components";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var LABELS_WIDTH = 72;
 var LabelsStickyWrapper = styled20.div`
   position: sticky;
@@ -2275,7 +2311,7 @@ var SpectrogramLabels = ({
       }
     }
   }, [waveHeight, numChannels, frequencyScaleFn, minFrequency, maxFrequency, labelsColor, labelsBackground, devicePixelRatio, spectrogramHeight, clipHeaderOffset]);
-  return /* @__PURE__ */ jsx20(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx21(
     "canvas",
     {
       ref: canvasRef,
@@ -2294,7 +2330,7 @@ var SpectrogramLabels = ({
 import { useContext as useContext7 } from "react";
 
 // src/components/TimeScale.tsx
-import React12, { useRef as useRef6, useEffect as useEffect5, useContext as useContext6 } from "react";
+import React13, { useRef as useRef6, useEffect as useEffect5, useContext as useContext6 } from "react";
 import styled21, { withTheme as withTheme2 } from "styled-components";
 
 // src/utils/conversions.ts
@@ -2318,7 +2354,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
@@ -2412,7 +2448,7 @@ var TimeScale = (props) => {
     if (counter % marker === 0) {
       const timeMs = counter;
       const timestamp = formatTime2(timeMs);
-      const timestampContent = renderTimestamp ? /* @__PURE__ */ jsx21(React12.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx21(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+      const timestampContent = renderTimestamp ? /* @__PURE__ */ jsx22(React13.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx22(TimeStamp, { $left: pix, children: timestamp }, timestamp);
       timeMarkers.push(timestampContent);
       canvasInfo.set(pix, timeScaleHeight);
     } else if (counter % bigStep === 0) {
@@ -2430,7 +2466,7 @@ var TimeScale = (props) => {
       $timeScaleHeight: timeScaleHeight,
       children: [
         timeMarkers,
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           TimeTicks,
           {
             $cssWidth: widthX,
@@ -2447,7 +2483,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = withTheme2(TimeScale);
 
 // src/components/SmartScale.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2523,7 +2559,7 @@ function getScaleInfo(samplesPerPixel) {
 var SmartScale = ({ renderTimestamp }) => {
   const { samplesPerPixel, duration } = useContext7(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2537,7 +2573,7 @@ var SmartScale = ({ renderTimestamp }) => {
 
 // src/components/TimeFormatSelect.tsx
 import styled22 from "styled-components";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var SelectWrapper = styled22.div`
   display: inline-flex;
   align-items: center;
@@ -2560,7 +2596,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ jsx23(SelectWrapper, { className, children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(SelectWrapper, { className, children: /* @__PURE__ */ jsx24(
     BaseSelect,
     {
       className: "time-format",
@@ -2568,14 +2604,14 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx23("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx24("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
 import styled23 from "styled-components";
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 var Container = styled23.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
@@ -2641,7 +2677,7 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           ControlsWrapper,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2649,7 +2685,7 @@ var Track = ({
             children: controls
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2757,7 +2793,7 @@ var ButtonGroup = styled25.div`
 // src/components/TrackControls/CloseButton.tsx
 import styled26 from "styled-components";
 import { X as XIcon } from "@phosphor-icons/react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var StyledCloseButton = styled26.button`
   position: absolute;
   left: 0;
@@ -2782,7 +2818,7 @@ var StyledCloseButton = styled26.button`
 var CloseButton = ({
   onClick,
   title = "Remove track"
-}) => /* @__PURE__ */ jsx25(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx25(XIcon, { size: 12, weight: "bold" }) });
+}) => /* @__PURE__ */ jsx26(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx26(XIcon, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
 import styled27 from "styled-components";
@@ -2818,23 +2854,23 @@ var Header = styled28.header`
 
 // src/components/TrackControls/VolumeDownIcon.tsx
 import { SpeakerLowIcon } from "@phosphor-icons/react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var VolumeDownIcon = (props) => /* @__PURE__ */ jsx26(SpeakerLowIcon, { weight: "light", ...props });
+import { jsx as jsx27 } from "react/jsx-runtime";
+var VolumeDownIcon = (props) => /* @__PURE__ */ jsx27(SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
 import { SpeakerHighIcon } from "@phosphor-icons/react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx27(SpeakerHighIcon, { weight: "light", ...props });
+import { jsx as jsx28 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx28(SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
 import { TrashIcon as PhosphorTrashIcon } from "@phosphor-icons/react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var TrashIcon = (props) => /* @__PURE__ */ jsx28(PhosphorTrashIcon, { weight: "light", ...props });
+import { jsx as jsx29 } from "react/jsx-runtime";
+var TrashIcon = (props) => /* @__PURE__ */ jsx29(PhosphorTrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/DotsIcon.tsx
 import { DotsThreeIcon } from "@phosphor-icons/react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var DotsIcon = (props) => /* @__PURE__ */ jsx29(DotsThreeIcon, { weight: "bold", ...props });
+import { jsx as jsx30 } from "react/jsx-runtime";
+var DotsIcon = (props) => /* @__PURE__ */ jsx30(DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
 import styled29 from "styled-components";
@@ -2902,10 +2938,10 @@ var SliderWrapper = styled30.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React14, { useState as useState6, useEffect as useEffect6, useRef as useRef7 } from "react";
+import React15, { useState as useState6, useEffect as useEffect6, useRef as useRef7 } from "react";
 import { createPortal } from "react-dom";
 import styled31 from "styled-components";
-import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
 var MenuContainer = styled31.div`
   position: relative;
   display: inline-block;
@@ -2973,7 +3009,7 @@ var TrackMenu = ({
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
   return /* @__PURE__ */ jsxs12(MenuContainer, { children: [
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       MenuButton,
       {
         ref: buttonRef,
@@ -2984,19 +3020,19 @@ var TrackMenu = ({
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ jsx30(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ jsx31(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ jsxs12(React14.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsx30(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ jsxs12(React15.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx31(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3040,6 +3076,7 @@ export {
   Playhead,
   PlayheadWithMarker,
   Playlist,
+  PlaylistErrorBoundary,
   PlaylistInfoContext,
   PlayoutProvider,
   ScreenReaderOnly,