@waveform-playlist/recording 9.5.2 → 10.0.0

package/dist/index.mjs

@@ -75,7 +75,8 @@ function appendPeaks(existingPeaks, newSamples, samplesPerPixel, totalSamplesPro
 }
 
 // src/hooks/useRecording.ts
-import { getContext } from "tone";
+import { getGlobalContext } from "@waveform-playlist/playout";
+import { recordingProcessorUrl } from "@waveform-playlist/worklets";
 function emptyPeaks(bits) {
   return bits === 8 ? new Int8Array(0) : new Int16Array(0);
 }
@@ -98,18 +99,29 @@ function useRecording(stream, options = {}) {
   const startTimeRef = useRef(0);
   const isRecordingRef = useRef(false);
   const isPausedRef = useRef(false);
+  const startDurationLoop = useCallback(() => {
+    const tick = () => {
+      if (isRecordingRef.current && !isPausedRef.current) {
+        const elapsed = (performance.now() - startTimeRef.current) / 1e3;
+        setDuration(elapsed);
+        animationFrameRef.current = requestAnimationFrame(tick);
+      }
+    };
+    tick();
+  }, []);
   const loadWorklet = useCallback(async () => {
     if (workletLoadedRef.current) {
       return;
     }
     try {
-      const context = getContext();
-      const workletUrl = new URL("./worklet/recording-processor.worklet.js", import.meta.url).href;
-      await context.addAudioWorkletModule(workletUrl);
+      const context = getGlobalContext();
+      const rawCtx = context.rawContext;
+      await rawCtx.audioWorklet.addModule(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 = useCallback(async () => {
@@ -119,11 +131,13 @@ function useRecording(stream, options = {}) {
     }
     try {
       setError(null);
-      const context = getContext();
+      const context = 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(
@@ -131,13 +145,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)));
@@ -183,19 +199,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 = useCallback(async () => {
     if (!isRecording) {
       return null;
@@ -216,10 +225,20 @@ function useRecording(stream, options = {}) {
         cancelAnimationFrame(animationFrameRef.current);
         animationFrameRef.current = null;
       }
-      const context = getContext();
+      const context = 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);
@@ -230,7 +249,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;
     }
@@ -250,16 +269,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]);
   useEffect(() => {
     return () => {
       if (workletNodeRef.current) {
@@ -271,7 +283,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);
@@ -363,7 +379,9 @@ function useMicrophoneAccess() {
   }, [stream]);
   useEffect2(() => {
     enumerateDevices();
+    navigator.mediaDevices.addEventListener("devicechange", enumerateDevices);
     return () => {
+      navigator.mediaDevices.removeEventListener("devicechange", enumerateDevices);
       if (stream) {
         stream.getTracks().forEach((track) => track.stop());
       }
@@ -381,88 +399,148 @@ function useMicrophoneAccess() {
 }
 
 // src/hooks/useMicrophoneLevel.ts
-import { useEffect as useEffect3, useState as useState3, useRef as useRef2 } from "react";
-import { Meter, getContext as getContext2, connect } from "tone";
+import { useEffect as useEffect3, useState as useState3, useRef as useRef2, useCallback as useCallback3 } from "react";
+import { getGlobalContext as getGlobalContext2 } from "@waveform-playlist/playout";
+import { gainToNormalized } from "@waveform-playlist/core";
+import { meterProcessorUrl } from "@waveform-playlist/worklets";
+var PEAK_DECAY = 0.98;
 function useMicrophoneLevel(stream, options = {}) {
-  const { updateRate = 60, smoothingTimeConstant = 0.8 } = options;
-  const [level, setLevel] = useState3(0);
-  const [peakLevel, setPeakLevel] = useState3(0);
-  const meterRef = useRef2(null);
+  const { updateRate = 60, channelCount = 1 } = options;
+  const [levels, setLevels] = useState3(() => new Array(channelCount).fill(0));
+  const [peakLevels, setPeakLevels] = useState3(() => new Array(channelCount).fill(0));
+  const [rmsLevels, setRmsLevels] = useState3(() => new Array(channelCount).fill(0));
+  const [meterError, setMeterError] = useState3(null);
+  const workletNodeRef = useRef2(null);
   const sourceRef = useRef2(null);
-  const animationFrameRef = useRef2(null);
-  const resetPeak = () => setPeakLevel(0);
+  const smoothedPeakRef = useRef2(new Array(channelCount).fill(0));
+  const resetPeak = useCallback3(
+    () => setPeakLevels(new Array(channelCount).fill(0)),
+    [channelCount]
+  );
   useEffect3(() => {
     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 = getContext2();
+      const context = getGlobalContext2();
       if (context.state === "suspended") {
         await context.resume();
       }
       if (!isMounted) return;
-      const meter = new 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(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;
-      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(gainToNormalized(smoothed[ch]));
+          rmsValues.push(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
-import { useState as useState4, useCallback as useCallback3, useEffect as useEffect4 } from "react";
-import { resumeGlobalAudioContext } from "@waveform-playlist/playout";
+import { useState as useState4, useCallback as useCallback4, useEffect as useEffect4, useRef as useRef3 } from "react";
+import {
+  resumeGlobalAudioContext,
+  getGlobalAudioContext,
+  getGlobalContext as getGlobalContext3
+} from "@waveform-playlist/playout";
 function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}) {
   const { currentTime = 0, audioConstraints, ...recordingOptions } = options;
   const [isMonitoring, setIsMonitoring] = useState4(false);
   const [selectedDevice, setSelectedDevice] = useState4(null);
   const [hookError, setHookError] = useState4(null);
+  const recordingStartTimeRef = useRef3(0);
+  const selectedTrackIdRef = useRef3(selectedTrackId);
+  selectedTrackIdRef.current = selectedTrackId;
+  const currentTimeRef = useRef3(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,
@@ -475,8 +553,8 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
     resumeRecording,
     error: recError
   } = useRecording(stream, recordingOptions);
-  const startRecording = useCallback3(async () => {
-    if (!selectedTrackId) {
+  const startRecording = useCallback4(async () => {
+    if (!selectedTrackIdRef.current) {
       setHookError(
         new Error("Cannot start recording: no track selected. Select or create a track first.")
       );
@@ -488,12 +566,13 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
         await resumeGlobalAudioContext();
         setIsMonitoring(true);
       }
+      recordingStartTimeRef.current = currentTimeRef.current;
       await startRec();
     } catch (err) {
       setHookError(err instanceof Error ? err : new Error(String(err)));
     }
-  }, [selectedTrackId, isMonitoring, startRec]);
-  const stopRecording = useCallback3(async () => {
+  }, [isMonitoring, startRec]);
+  const stopRecording = useCallback4(async () => {
     let buffer;
     try {
       buffer = await stopRec();
@@ -501,18 +580,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(
@@ -520,13 +600,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 = getGlobalAudioContext();
+      const outputLatency = audioContext.outputLatency ?? 0;
+      const toneContext = getGlobalContext3();
+      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,
@@ -543,13 +637,19 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       });
       setTracks(newTracks);
     }
-  }, [selectedTrackId, tracks, setTracks, currentTime, stopRec]);
+  }, [tracks, setTracks, stopRec]);
   useEffect4(() => {
-    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]);
-  const requestMicAccess = useCallback3(async () => {
+  }, [hasPermission, devices, selectedDevice, resetPeak, requestAccess, audioConstraints]);
+  const requestMicAccess = useCallback4(async () => {
     try {
       setHookError(null);
       await requestAccess(void 0, audioConstraints);
@@ -559,11 +659,12 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
       setHookError(err instanceof Error ? err : new Error(String(err)));
     }
   }, [requestAccess, audioConstraints]);
-  const changeDevice = useCallback3(
+  const changeDevice = useCallback4(
     async (deviceId) => {
       try {
         setHookError(null);
         setSelectedDevice(deviceId);
+        resetPeak();
         await requestAccess(deviceId, audioConstraints);
         await resumeGlobalAudioContext();
         setIsMonitoring(true);
@@ -571,7 +672,7 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
         setHookError(err instanceof Error ? err : new Error(String(err)));
       }
     },
-    [requestAccess, audioConstraints]
+    [requestAccess, audioConstraints, resetPeak]
   );
   return {
     // Recording state
@@ -580,7 +681,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,
@@ -597,270 +701,7 @@ function useIntegratedRecording(tracks, setTracks, selectedTrackId, options = {}
     recordingPeaks: peaks
   };
 }
-
-// src/components/RecordButton.tsx
-import styled from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Button = styled.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 = styled.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__ */ jsxs(
-    Button,
-    {
-      $isRecording: isRecording,
-      onClick,
-      disabled,
-      className,
-      "aria-label": isRecording ? "Stop recording" : "Start recording",
-      children: [
-        isRecording && /* @__PURE__ */ jsx(RecordingIndicator, {}),
-        isRecording ? "Stop Recording" : "Record"
-      ]
-    }
-  );
-};
-
-// src/components/MicrophoneSelector.tsx
-import styled2 from "styled-components";
-import { BaseSelect, BaseLabel } from "@waveform-playlist/ui-components";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Select = styled2(BaseSelect)`
-  min-width: 200px;
-`;
-var Label = styled2(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__ */ jsxs2(Label, { className, children: [
-    "Microphone",
-    /* @__PURE__ */ jsx2(
-      Select,
-      {
-        value: currentValue,
-        onChange: handleChange,
-        disabled: disabled || devices.length === 0,
-        children: devices.length === 0 ? /* @__PURE__ */ jsx2("option", { value: "", children: "No microphones found" }) : devices.map((device) => /* @__PURE__ */ jsx2("option", { value: device.deviceId, children: device.label }, device.deviceId))
-      }
-    )
-  ] });
-};
-
-// src/components/RecordingIndicator.tsx
-import styled3 from "styled-components";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Container = styled3.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 = styled3.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 = styled3.span`
-  font-family: 'Courier New', Monaco, monospace;
-  font-size: 1rem;
-  font-weight: 600;
-  color: #495057;
-  min-width: 70px;
-`;
-var Status = styled3.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__ */ jsxs3(Container, { $isRecording: isRecording, className, children: [
-    /* @__PURE__ */ jsx3(Dot, { $isRecording: isRecording, $isPaused: isPaused }),
-    /* @__PURE__ */ jsx3(Duration, { children: formatTime(duration) }),
-    isRecording && /* @__PURE__ */ jsx3(Status, { $isPaused: isPaused, children: isPaused ? "Paused" : "Recording" })
-  ] });
-};
-
-// src/components/VUMeter.tsx
-import React from "react";
-import styled4 from "styled-components";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var MeterContainer = styled4.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 = styled4.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 = styled4.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 = styled4.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: ${(props) => props.$height}px;
-  pointer-events: none;
-`;
-var ScaleMark = styled4.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__ */ jsxs4(MeterContainer, { $width: width, $height: height, className, children: [
-    /* @__PURE__ */ jsx4(MeterFill, { $level: clampedLevel, $height: height }),
-    peakLevel !== void 0 && clampedPeak > 0 && /* @__PURE__ */ jsx4(PeakIndicator, { $peakLevel: clampedPeak, $height: height }),
-    /* @__PURE__ */ jsxs4(ScaleMarkers, { $height: height, children: [
-      /* @__PURE__ */ jsx4(ScaleMark, { $position: 60, $height: height }),
-      /* @__PURE__ */ jsx4(ScaleMark, { $position: 85, $height: height })
-    ] })
-  ] });
-};
-var VUMeter = React.memo(VUMeterComponent);
 export {
-  MicrophoneSelector,
-  RecordButton,
-  RecordingIndicator2 as RecordingIndicator,
-  VUMeter,
   concatenateAudioData,
   createAudioBuffer,
   generatePeaks,