@waveform-playlist/recording 9.5.2 → 10.0.0

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,23 +15,11 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  MicrophoneSelector: () => MicrophoneSelector,
-  RecordButton: () => RecordButton,
-  RecordingIndicator: () => RecordingIndicator2,
-  VUMeter: () => VUMeter,
   concatenateAudioData: () => concatenateAudioData,
   createAudioBuffer: () => createAudioBuffer,
   generatePeaks: () => generatePeaks,
@@ -121,8 +107,8 @@ function appendPeaks(existingPeaks, newSamples, samplesPerPixel, totalSamplesPro
 }
 
 // src/hooks/useRecording.ts
-var import_tone = require("tone");
-var import_meta = {};
+var import_playout = require("@waveform-playlist/playout");
+var import_worklets = require("@waveform-playlist/worklets");
 function emptyPeaks(bits) {
   return bits === 8 ? new Int8Array(0) : new Int16Array(0);
 }
@@ -145,18 +131,29 @@ function useRecording(stream, options = {}) {
   const startTimeRef = (0, import_react.useRef)(0);
   const isRecordingRef = (0, import_react.useRef)(false);
   const isPausedRef = (0, import_react.useRef)(false);
+  const startDurationLoop = (0, import_react.useCallback)(() => {
+    const tick = () => {
+      if (isRecordingRef.current && !isPausedRef.current) {
+        const elapsed = (performance.now() - startTimeRef.current) / 1e3;
+        setDuration(elapsed);
+        animationFrameRef.current = requestAnimationFrame(tick);
+      }
+    };
+    tick();
+  }, []);
   const loadWorklet = (0, import_react.useCallback)(async () => {
     if (workletLoadedRef.current) {
       return;
     }
     try {
-      const context = (0, import_tone.getContext)();
-      const workletUrl = new URL("./worklet/recording-processor.worklet.js", import_meta.url).href;
-      await context.addAudioWorkletModule(workletUrl);
+      const context = (0, import_playout.getGlobalContext)();
+      const rawCtx = context.rawContext;
+      await rawCtx.audioWorklet.addModule(import_worklets.recordingProcessorUrl);
       workletLoadedRef.current = true;
     } catch (err) {
-      console.error("Failed to load AudioWorklet module:", err);
-      throw new Error("Failed to load recording processor");
+      console.warn("[waveform-playlist] Failed to load AudioWorklet module:", String(err));
+      const error2 = new Error("Failed to load recording processor: " + String(err));
+      throw error2;
     }
   }, []);
   const startRecording = (0, import_react.useCallback)(async () => {
@@ -166,11 +163,13 @@ function useRecording(stream, options = {}) {
     }
     try {
       setError(null);
-      const context = (0, import_tone.getContext)();
+      const context = (0, import_playout.getGlobalContext)();
       if (context.state === "suspended") {
         await context.resume();
       }
       await loadWorklet();
+      const source = context.createMediaStreamSource(stream);
+      mediaStreamSourceRef.current = source;
       const detectedChannelCount = stream.getAudioTracks()[0]?.getSettings().channelCount;
       if (detectedChannelCount === void 0) {
         console.warn(
@@ -178,13 +177,15 @@ function useRecording(stream, options = {}) {
         );
       }
       const streamChannelCount = detectedChannelCount ?? channelCount;
-      const source = context.createMediaStreamSource(stream);
-      mediaStreamSourceRef.current = source;
       const workletNode = context.createAudioWorkletNode("recording-processor", {
         channelCount: streamChannelCount,
         channelCountMode: "explicit"
       });
       workletNodeRef.current = workletNode;
+      workletNode.onprocessorerror = (event) => {
+        console.warn("[waveform-playlist] Recording worklet processor error:", String(event));
+        setError(new Error("Recording processor encountered an error"));
+      };
       recordedChunksRef.current = Array.from({ length: streamChannelCount }, () => []);
       totalSamplesRef.current = 0;
       setPeaks(Array.from({ length: streamChannelCount }, () => emptyPeaks(bits)));
@@ -230,19 +231,12 @@ function useRecording(stream, options = {}) {
       setIsRecording(true);
       setIsPaused(false);
       startTimeRef.current = performance.now();
-      const updateDuration = () => {
-        if (isRecordingRef.current && !isPausedRef.current) {
-          const elapsed = (performance.now() - startTimeRef.current) / 1e3;
-          setDuration(elapsed);
-          animationFrameRef.current = requestAnimationFrame(updateDuration);
-        }
-      };
-      updateDuration();
+      startDurationLoop();
     } catch (err) {
-      console.error("Failed to start recording:", err);
+      console.warn("[waveform-playlist] Failed to start recording:", String(err));
       setError(err instanceof Error ? err : new Error("Failed to start recording"));
     }
-  }, [stream, channelCount, samplesPerPixel, bits, loadWorklet]);
+  }, [stream, channelCount, samplesPerPixel, bits, loadWorklet, startDurationLoop]);
   const stopRecording = (0, import_react.useCallback)(async () => {
     if (!isRecording) {
       return null;
@@ -263,10 +257,20 @@ function useRecording(stream, options = {}) {
         cancelAnimationFrame(animationFrameRef.current);
         animationFrameRef.current = null;
       }
-      const context = (0, import_tone.getContext)();
+      const context = (0, import_playout.getGlobalContext)();
       const rawContext = context.rawContext;
       const numChannels = recordedChunksRef.current.length || channelCount;
       const channelData = recordedChunksRef.current.map((chunks) => concatenateAudioData(chunks));
+      const totalSamples = channelData[0]?.length ?? 0;
+      if (totalSamples === 0) {
+        console.warn("[waveform-playlist] Recording stopped with 0 samples captured \u2014 discarding");
+        isRecordingRef.current = false;
+        isPausedRef.current = false;
+        setIsRecording(false);
+        setIsPaused(false);
+        setLevel(0);
+        return null;
+      }
       const buffer = createAudioBuffer(rawContext, channelData, rawContext.sampleRate, numChannels);
       setAudioBuffer(buffer);
       setDuration(buffer.duration);
@@ -277,7 +281,7 @@ function useRecording(stream, options = {}) {
       setLevel(0);
       return buffer;
     } catch (err) {
-      console.error("Failed to stop recording:", err);
+      console.warn("[waveform-playlist] Failed to stop recording:", String(err));
       setError(err instanceof Error ? err : new Error("Failed to stop recording"));
       return null;
     }
@@ -297,16 +301,9 @@ function useRecording(stream, options = {}) {
       isPausedRef.current = false;
       setIsPaused(false);
       startTimeRef.current = performance.now() - duration * 1e3;
-      const updateDuration = () => {
-        if (isRecordingRef.current && !isPausedRef.current) {
-          const elapsed = (performance.now() - startTimeRef.current) / 1e3;
-          setDuration(elapsed);
-          animationFrameRef.current = requestAnimationFrame(updateDuration);
-        }
-      };
-      updateDuration();
+      startDurationLoop();
     }
-  }, [isRecording, isPaused, duration]);
+  }, [isRecording, isPaused, duration, startDurationLoop]);
   (0, import_react.useEffect)(() => {
     return () => {
       if (workletNodeRef.current) {
@@ -318,7 +315,11 @@ function useRecording(stream, options = {}) {
             console.warn("[waveform-playlist] Source disconnect during cleanup:", String(err));
           }
         }
-        workletNodeRef.current.disconnect();
+        try {
+          workletNodeRef.current.disconnect();
+        } catch (err) {
+          console.warn("[waveform-playlist] Worklet disconnect during cleanup:", String(err));
+        }
       }
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
@@ -410,7 +411,9 @@ function useMicrophoneAccess() {
   }, [stream]);
   (0, import_react2.useEffect)(() => {
     enumerateDevices();
+    navigator.mediaDevices.addEventListener("devicechange", enumerateDevices);
     return () => {
+      navigator.mediaDevices.removeEventListener("devicechange", enumerateDevices);
       if (stream) {
         stream.getTracks().forEach((track) => track.stop());
       }
@@ -429,87 +432,143 @@ function useMicrophoneAccess() {
 
 // src/hooks/useMicrophoneLevel.ts
 var import_react3 = require("react");
-var import_tone2 = require("tone");
+var import_playout2 = require("@waveform-playlist/playout");
+var import_core = require("@waveform-playlist/core");
+var import_worklets2 = require("@waveform-playlist/worklets");
+var PEAK_DECAY = 0.98;
 function useMicrophoneLevel(stream, options = {}) {
-  const { updateRate = 60, smoothingTimeConstant = 0.8 } = options;
-  const [level, setLevel] = (0, import_react3.useState)(0);
-  const [peakLevel, setPeakLevel] = (0, import_react3.useState)(0);
-  const meterRef = (0, import_react3.useRef)(null);
+  const { updateRate = 60, channelCount = 1 } = options;
+  const [levels, setLevels] = (0, import_react3.useState)(() => new Array(channelCount).fill(0));
+  const [peakLevels, setPeakLevels] = (0, import_react3.useState)(() => new Array(channelCount).fill(0));
+  const [rmsLevels, setRmsLevels] = (0, import_react3.useState)(() => new Array(channelCount).fill(0));
+  const [meterError, setMeterError] = (0, import_react3.useState)(null);
+  const workletNodeRef = (0, import_react3.useRef)(null);
   const sourceRef = (0, import_react3.useRef)(null);
-  const animationFrameRef = (0, import_react3.useRef)(null);
-  const resetPeak = () => setPeakLevel(0);
+  const smoothedPeakRef = (0, import_react3.useRef)(new Array(channelCount).fill(0));
+  const resetPeak = (0, import_react3.useCallback)(
+    () => setPeakLevels(new Array(channelCount).fill(0)),
+    [channelCount]
+  );
   (0, import_react3.useEffect)(() => {
     if (!stream) {
-      setLevel(0);
-      setPeakLevel(0);
+      setLevels(new Array(channelCount).fill(0));
+      setPeakLevels(new Array(channelCount).fill(0));
+      setRmsLevels(new Array(channelCount).fill(0));
+      smoothedPeakRef.current = new Array(channelCount).fill(0);
       return;
     }
     let isMounted = true;
     const setupMonitoring = async () => {
       if (!isMounted) return;
-      const context = (0, import_tone2.getContext)();
+      const context = (0, import_playout2.getGlobalContext)();
       if (context.state === "suspended") {
         await context.resume();
       }
       if (!isMounted) return;
-      const meter = new import_tone2.Meter({ smoothing: smoothingTimeConstant, context });
-      meterRef.current = meter;
+      const trackSettings = stream.getAudioTracks()[0]?.getSettings();
+      const actualChannels = trackSettings?.channelCount ?? channelCount;
+      const rawCtx = context.rawContext;
+      await rawCtx.audioWorklet.addModule(import_worklets2.meterProcessorUrl);
+      if (!isMounted) return;
+      const workletNode = context.createAudioWorkletNode("meter-processor", {
+        channelCount: actualChannels,
+        channelCountMode: "explicit",
+        processorOptions: {
+          numberOfChannels: actualChannels,
+          updateRate
+        }
+      });
+      workletNodeRef.current = workletNode;
+      workletNode.onprocessorerror = (event) => {
+        console.warn("[waveform-playlist] Mic meter worklet processor error:", String(event));
+      };
       const source = context.createMediaStreamSource(stream);
       sourceRef.current = source;
-      (0, import_tone2.connect)(source, meter);
-      const updateInterval = 1e3 / updateRate;
-      let lastUpdateTime = 0;
-      const updateLevel = (timestamp) => {
-        if (!isMounted || !meterRef.current) return;
-        if (timestamp - lastUpdateTime >= updateInterval) {
-          lastUpdateTime = timestamp;
-          const db = meterRef.current.getValue();
-          const dbValue = typeof db === "number" ? db : db[0];
-          const normalized = Math.max(0, Math.min(1, (dbValue + 100) / 100));
-          setLevel(normalized);
-          setPeakLevel((prev) => Math.max(prev, normalized));
+      source.connect(workletNode);
+      smoothedPeakRef.current = new Array(actualChannels).fill(0);
+      workletNode.port.onmessage = (event) => {
+        if (!isMounted) return;
+        const { peak, rms } = event.data;
+        const smoothed = smoothedPeakRef.current;
+        const peakValues = [];
+        const rmsValues = [];
+        for (let ch = 0; ch < peak.length; ch++) {
+          smoothed[ch] = Math.max(peak[ch], (smoothed[ch] ?? 0) * PEAK_DECAY);
+          peakValues.push((0, import_core.gainToNormalized)(smoothed[ch]));
+          rmsValues.push((0, import_core.gainToNormalized)(rms[ch]));
         }
-        animationFrameRef.current = requestAnimationFrame(updateLevel);
+        const mirroredPeaks = peak.length < channelCount ? new Array(channelCount).fill(peakValues[0]) : peakValues;
+        const mirroredRms = peak.length < channelCount ? new Array(channelCount).fill(rmsValues[0]) : rmsValues;
+        setLevels(mirroredPeaks);
+        setRmsLevels(mirroredRms);
+        setPeakLevels((prev) => mirroredPeaks.map((val, i) => Math.max(prev[i] ?? 0, val)));
       };
-      animationFrameRef.current = requestAnimationFrame(updateLevel);
     };
-    setupMonitoring();
+    setupMonitoring().catch((err) => {
+      console.warn("[waveform-playlist] Failed to set up mic level monitoring:", String(err));
+      if (isMounted) {
+        setMeterError(err instanceof Error ? err : new Error(String(err)));
+      }
+    });
     return () => {
       isMounted = false;
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
       if (sourceRef.current) {
         try {
           sourceRef.current.disconnect();
-        } catch {
+        } catch (err) {
+          console.warn("[waveform-playlist] Mic source disconnect during cleanup:", String(err));
         }
         sourceRef.current = null;
       }
-      if (meterRef.current) {
-        meterRef.current.dispose();
-        meterRef.current = null;
+      if (workletNodeRef.current) {
+        try {
+          workletNodeRef.current.disconnect();
+          workletNodeRef.current.port.close();
+        } catch (err) {
+          console.warn("[waveform-playlist] Mic meter disconnect during cleanup:", String(err));
+        }
+        workletNodeRef.current = null;
       }
     };
-  }, [stream, smoothingTimeConstant, updateRate]);
+  }, [stream, updateRate, channelCount]);
+  const level = channelCount === 1 ? levels[0] ?? 0 : Math.max(...levels);
+  const peakLevel = channelCount === 1 ? peakLevels[0] ?? 0 : Math.max(...peakLevels);
   return {
     level,
     peakLevel,
-    resetPeak
+    resetPeak,
+    levels,
+    peakLevels,
+    rmsLevels,
+    error: meterError
   };
 }
 
 // src/hooks/useIntegratedRecording.ts
 var import_react4 = require("react");
-var import_playout = require("@waveform-playlist/playout");
+var import_playout3 = require("@waveform-playlist/playout");
 function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}) {
   const { currentTime = 0, audioConstraints, ...recordingOptions } = options;
   const [isMonitoring, setIsMonitoring] = (0, import_react4.useState)(false);
   const [selectedDevice, setSelectedDevice] = (0, import_react4.useState)(null);
   const [hookError, setHookError] = (0, import_react4.useState)(null);
+  const recordingStartTimeRef = (0, import_react4.useRef)(0);
+  const selectedTrackIdRef = (0, import_react4.useRef)(selectedTrackId);
+  selectedTrackIdRef.current = selectedTrackId;
+  const currentTimeRef = (0, import_react4.useRef)(currentTime);
+  currentTimeRef.current = currentTime;
   const { stream, devices, hasPermission, requestAccess, error: micError } = useMicrophoneAccess();
-  const { level, peakLevel } = useMicrophoneLevel(stream);
+  const {
+    level,
+    peakLevel,
+    levels,
+    peakLevels,
+    rmsLevels,
+    resetPeak,
+    error: meterError
+  } = useMicrophoneLevel(stream, {
+    channelCount: recordingOptions.channelCount
+  });
   const {
     isRecording,
     isPaused,
@@ -523,7 +582,7 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
     error: recError
   } = useRecording(stream, recordingOptions);
   const startRecording = (0, import_react4.useCallback)(async () => {
-    if (!selectedTrackId) {
+    if (!selectedTrackIdRef.current) {
       setHookError(
         new Error("Cannot start recording: no track selected. Select or create a track first.")
       );
@@ -532,14 +591,15 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
     try {
       setHookError(null);
       if (!isMonitoring) {
-        await (0, import_playout.resumeGlobalAudioContext)();
+        await (0, import_playout3.resumeGlobalAudioContext)();
         setIsMonitoring(true);
       }
+      recordingStartTimeRef.current = currentTimeRef.current;
       await startRec();
     } catch (err) {
       setHookError(err instanceof Error ? err : new Error(String(err)));
     }
-  }, [selectedTrackId, isMonitoring, startRec]);
+  }, [isMonitoring, startRec]);
   const stopRecording = (0, import_react4.useCallback)(async () => {
     let buffer;
     try {
@@ -548,18 +608,19 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       setHookError(err instanceof Error ? err : new Error(String(err)));
       return;
     }
-    if (buffer && selectedTrackId) {
-      const selectedTrackIndex = tracks.findIndex((t) => t.id === selectedTrackId);
+    const trackId = selectedTrackIdRef.current;
+    if (buffer && trackId) {
+      const selectedTrackIndex = tracks.findIndex((t) => t.id === trackId);
       if (selectedTrackIndex === -1) {
         const err = new Error(
-          `Recording completed but track "${selectedTrackId}" no longer exists. The recorded audio could not be saved.`
+          `Recording completed but track "${trackId}" no longer exists. The recorded audio could not be saved.`
         );
-        console.error(`[waveform-playlist] ${err.message}`);
+        console.warn(`[waveform-playlist] ${err.message}`);
         setHookError(err);
         return;
       }
       const selectedTrack = tracks[selectedTrackIndex];
-      const currentTimeSamples = Math.floor(currentTime * buffer.sampleRate);
+      const recordStartTimeSamples = Math.floor(recordingStartTimeRef.current * buffer.sampleRate);
       let lastClipEndSample = 0;
       if (selectedTrack.clips.length > 0) {
         const endSamples = selectedTrack.clips.map(
@@ -567,13 +628,27 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
         );
         lastClipEndSample = Math.max(...endSamples);
       }
-      const startSample = Math.max(currentTimeSamples, lastClipEndSample);
+      const startSample = Math.max(recordStartTimeSamples, lastClipEndSample);
+      const audioContext = (0, import_playout3.getGlobalAudioContext)();
+      const outputLatency = audioContext.outputLatency ?? 0;
+      const toneContext = (0, import_playout3.getGlobalContext)();
+      const lookAhead = toneContext.lookAhead ?? 0;
+      const totalLatency = outputLatency + lookAhead;
+      const latencyOffsetSamples = Math.floor(totalLatency * buffer.sampleRate);
+      const effectiveDuration = Math.max(0, buffer.length - latencyOffsetSamples);
+      if (effectiveDuration === 0) {
+        console.warn(
+          "[waveform-playlist] Recording too short for latency compensation \u2014 discarding"
+        );
+        setHookError(new Error("Recording was too short to save. Try recording for longer."));
+        return;
+      }
       const newClip = {
         id: `clip-${Date.now()}`,
         audioBuffer: buffer,
         startSample,
-        durationSamples: buffer.length,
-        offsetSamples: 0,
+        durationSamples: effectiveDuration,
+        offsetSamples: latencyOffsetSamples,
         sampleRate: buffer.sampleRate,
         sourceDurationSamples: buffer.length,
         gain: 1,
@@ -590,17 +665,23 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       });
       setTracks(newTracks);
     }
-  }, [selectedTrackId, tracks, setTracks, currentTime, stopRec]);
+  }, [tracks, setTracks, stopRec]);
   (0, import_react4.useEffect)(() => {
-    if (hasPermission && devices.length > 0 && selectedDevice === null) {
+    if (!hasPermission || devices.length === 0) return;
+    if (selectedDevice === null) {
       setSelectedDevice(devices[0].deviceId);
+    } else if (!devices.some((d) => d.deviceId === selectedDevice)) {
+      const fallbackId = devices[0].deviceId;
+      setSelectedDevice(fallbackId);
+      resetPeak();
+      requestAccess(fallbackId, audioConstraints);
     }
-  }, [hasPermission, devices, selectedDevice]);
+  }, [hasPermission, devices, selectedDevice, resetPeak, requestAccess, audioConstraints]);
   const requestMicAccess = (0, import_react4.useCallback)(async () => {
     try {
       setHookError(null);
       await requestAccess(void 0, audioConstraints);
-      await (0, import_playout.resumeGlobalAudioContext)();
+      await (0, import_playout3.resumeGlobalAudioContext)();
       setIsMonitoring(true);
     } catch (err) {
       setHookError(err instanceof Error ? err : new Error(String(err)));
@@ -611,14 +692,15 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       try {
         setHookError(null);
         setSelectedDevice(deviceId);
+        resetPeak();
         await requestAccess(deviceId, audioConstraints);
-        await (0, import_playout.resumeGlobalAudioContext)();
+        await (0, import_playout3.resumeGlobalAudioContext)();
         setIsMonitoring(true);
       } catch (err) {
         setHookError(err instanceof Error ? err : new Error(String(err)));
       }
     },
-    [requestAccess, audioConstraints]
+    [requestAccess, audioConstraints, resetPeak]
   );
   return {
     // Recording state
@@ -627,7 +709,10 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
     duration,
     level,
     peakLevel,
-    error: hookError || micError || recError,
+    levels,
+    peakLevels,
+    rmsLevels,
+    error: hookError || micError || meterError || recError,
     // Microphone state
     stream,
     devices,
@@ -644,271 +729,8 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
     recordingPeaks: peaks
   };
 }
-
-// src/components/RecordButton.tsx
-var import_styled_components = __toESM(require("styled-components"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var Button = import_styled_components.default.button`
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border: none;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  background: ${(props) => props.$isRecording ? "#dc3545" : "#e74c3c"};
-  color: white;
-
-  &:hover:not(:disabled) {
-    background: ${(props) => props.$isRecording ? "#c82333" : "#c0392b"};
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(0);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3);
-  }
-`;
-var RecordingIndicator = import_styled_components.default.span`
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: white;
-  margin-right: 0.5rem;
-  animation: pulse 1.5s ease-in-out infinite;
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.3;
-    }
-  }
-`;
-var RecordButton = ({
-  isRecording,
-  onClick,
-  disabled = false,
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    Button,
-    {
-      $isRecording: isRecording,
-      onClick,
-      disabled,
-      className,
-      "aria-label": isRecording ? "Stop recording" : "Start recording",
-      children: [
-        isRecording && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RecordingIndicator, {}),
-        isRecording ? "Stop Recording" : "Record"
-      ]
-    }
-  );
-};
-
-// src/components/MicrophoneSelector.tsx
-var import_styled_components2 = __toESM(require("styled-components"));
-var import_ui_components = require("@waveform-playlist/ui-components");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Select = (0, import_styled_components2.default)(import_ui_components.BaseSelect)`
-  min-width: 200px;
-`;
-var Label = (0, import_styled_components2.default)(import_ui_components.BaseLabel)`
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-`;
-var MicrophoneSelector = ({
-  devices,
-  selectedDeviceId,
-  onDeviceChange,
-  disabled = false,
-  className
-}) => {
-  const handleChange = (event) => {
-    onDeviceChange(event.target.value);
-  };
-  const currentValue = selectedDeviceId || (devices.length > 0 ? devices[0].deviceId : "");
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Label, { className, children: [
-    "Microphone",
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      Select,
-      {
-        value: currentValue,
-        onChange: handleChange,
-        disabled: disabled || devices.length === 0,
-        children: devices.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "No microphones found" }) : devices.map((device) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: device.deviceId, children: device.label }, device.deviceId))
-      }
-    )
-  ] });
-};
-
-// src/components/RecordingIndicator.tsx
-var import_styled_components3 = __toESM(require("styled-components"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Container = import_styled_components3.default.div`
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  background: ${(props) => props.$isRecording ? "#fff3cd" : "transparent"};
-  border-radius: 0.25rem;
-  transition: background 0.2s ease-in-out;
-`;
-var Dot = import_styled_components3.default.div`
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: ${(props) => props.$isPaused ? "#ffc107" : "#dc3545"};
-  opacity: ${(props) => props.$isRecording ? 1 : 0};
-  transition: opacity 0.2s ease-in-out;
-
-  ${(props) => props.$isRecording && !props.$isPaused && `
-    animation: blink 1.5s ease-in-out infinite;
-
-    @keyframes blink {
-      0%, 100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.3;
-      }
-    }
-  `}
-`;
-var Duration = import_styled_components3.default.span`
-  font-family: 'Courier New', Monaco, monospace;
-  font-size: 1rem;
-  font-weight: 600;
-  color: #495057;
-  min-width: 70px;
-`;
-var Status = import_styled_components3.default.span`
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: ${(props) => props.$isPaused ? "#ffc107" : "#dc3545"};
-  text-transform: uppercase;
-`;
-var defaultFormatTime = (seconds) => {
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.floor(seconds % 60);
-  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-};
-var RecordingIndicator2 = ({
-  isRecording,
-  isPaused = false,
-  duration,
-  formatTime = defaultFormatTime,
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Container, { $isRecording: isRecording, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dot, { $isRecording: isRecording, $isPaused: isPaused }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Duration, { children: formatTime(duration) }),
-    isRecording && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Status, { $isPaused: isPaused, children: isPaused ? "Paused" : "Recording" })
-  ] });
-};
-
-// src/components/VUMeter.tsx
-var import_react5 = __toESM(require("react"));
-var import_styled_components4 = __toESM(require("styled-components"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MeterContainer = import_styled_components4.default.div`
-  position: relative;
-  width: ${(props) => props.$width}px;
-  height: ${(props) => props.$height}px;
-  background: #2c3e50;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
-`;
-var getLevelGradient = (level) => {
-  if (level < 0.6) return "linear-gradient(90deg, #27ae60, #2ecc71)";
-  if (level < 0.85) return "linear-gradient(90deg, #f39c12, #f1c40f)";
-  return "linear-gradient(90deg, #c0392b, #e74c3c)";
-};
-var MeterFill = import_styled_components4.default.div.attrs((props) => ({
-  style: {
-    width: `${props.$level * 100}%`,
-    height: `${props.$height}px`,
-    background: getLevelGradient(props.$level),
-    boxShadow: props.$level > 0.01 ? "0 0 8px rgba(255, 255, 255, 0.3)" : "none"
-  }
-}))`
-  position: absolute;
-  left: 0;
-  top: 0;
-  transition:
-    width 0.05s ease-out,
-    background 0.1s ease-out;
-`;
-var PeakIndicator = import_styled_components4.default.div.attrs((props) => ({
-  style: {
-    left: `${props.$peakLevel * 100}%`,
-    height: `${props.$height}px`
-  }
-}))`
-  position: absolute;
-  top: 0;
-  width: 2px;
-  background: #ecf0f1;
-  box-shadow: 0 0 4px rgba(236, 240, 241, 0.8);
-  transition: left 0.1s ease-out;
-`;
-var ScaleMarkers = import_styled_components4.default.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: ${(props) => props.$height}px;
-  pointer-events: none;
-`;
-var ScaleMark = import_styled_components4.default.div`
-  position: absolute;
-  left: ${(props) => props.$position}%;
-  top: 0;
-  width: 1px;
-  height: ${(props) => props.$height}px;
-  background: rgba(255, 255, 255, 0.2);
-`;
-var VUMeterComponent = ({
-  level,
-  peakLevel,
-  width = 200,
-  height = 20,
-  className
-}) => {
-  const clampedLevel = Math.max(0, Math.min(1, level));
-  const clampedPeak = peakLevel !== void 0 ? Math.max(0, Math.min(1, peakLevel)) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MeterContainer, { $width: width, $height: height, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MeterFill, { $level: clampedLevel, $height: height }),
-    peakLevel !== void 0 && clampedPeak > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PeakIndicator, { $peakLevel: clampedPeak, $height: height }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ScaleMarkers, { $height: height, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ScaleMark, { $position: 60, $height: height }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ScaleMark, { $position: 85, $height: height })
-    ] })
-  ] });
-};
-var VUMeter = import_react5.default.memo(VUMeterComponent);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  MicrophoneSelector,
-  RecordButton,
-  RecordingIndicator,
-  VUMeter,
   concatenateAudioData,
   createAudioBuffer,
   generatePeaks,