@bendyline/squisq-editor-react 2.7.0 → 2.7.2

package/dist/{chunk-JUAQQTJE.js → chunk-V3J5S7X6.js}

@@ -718,8 +718,62 @@ function useMediaRecorder(options = {}) {
   };
 }
 
+// src/recorder/mediaDeviceList.ts
+var ALIAS_DEVICE_IDS = /* @__PURE__ */ new Set(["default", "communications"]);
+function recorderDeviceOptions(devices, kind, noun, selectedDeviceId = "") {
+  const options = [];
+  for (const device of devices) {
+    if (device.kind !== kind) continue;
+    const isSelected = selectedDeviceId !== "" && device.deviceId === selectedDeviceId;
+    if (!isSelected && (!device.deviceId || ALIAS_DEVICE_IDS.has(device.deviceId))) continue;
+    options.push({
+      deviceId: device.deviceId,
+      label: device.label || `${noun} ${options.length + 1}`,
+      groupId: device.groupId || ""
+    });
+  }
+  return options;
+}
+function hasRecorderDeviceChoice(options) {
+  return options.length > 1;
+}
+function recorderDeviceGroups(options) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const [index, option] of options.entries()) {
+    if (!option.groupId || groups.has(option.groupId)) continue;
+    groups.set(option.groupId, option.label || `Device group ${index + 1}`);
+  }
+  return [...groups].map(([id, label]) => ({ id, label }));
+}
+
+// src/recorder/hooks/useMediaDevices.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+function useMediaDevices() {
+  const [devices, setDevices] = useState2([]);
+  const [supported, setSupported] = useState2(null);
+  const refresh = useCallback2(() => {
+    const mediaDevices = typeof navigator === "undefined" ? void 0 : navigator.mediaDevices;
+    if (!mediaDevices) return;
+    if (typeof mediaDevices.getSupportedConstraints === "function") {
+      setSupported(mediaDevices.getSupportedConstraints());
+    }
+    if (typeof mediaDevices.enumerateDevices !== "function") return;
+    void mediaDevices.enumerateDevices().then(setDevices).catch(() => {
+    });
+  }, []);
+  useEffect2(() => {
+    refresh();
+    const mediaDevices = typeof navigator === "undefined" ? void 0 : navigator.mediaDevices;
+    if (!mediaDevices?.addEventListener) return;
+    const handleDeviceChange = () => refresh();
+    mediaDevices.addEventListener("devicechange", handleDeviceChange);
+    return () => mediaDevices.removeEventListener("devicechange", handleDeviceChange);
+  }, [refresh]);
+  return { devices, supported, refresh };
+}
+
 // src/recorder/RecorderDeviceSettingsPanel.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useId, useState as useState2 } from "react";
+import { useEffect as useEffect3, useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var detailsStyle = {
   border: "1px solid var(--squisq-recorder-border)",
@@ -809,17 +863,6 @@ function triState(value) {
 function booleanFromTriState(value) {
   return value === "default" ? void 0 : value === "true";
 }
-function deviceLabel(device, index, noun) {
-  return device.label || `${noun} ${index + 1}`;
-}
-function deviceGroups(devices) {
-  const groups = /* @__PURE__ */ new Map();
-  for (const [index, device] of devices.entries()) {
-    if (!device.groupId || groups.has(device.groupId)) continue;
-    groups.set(device.groupId, device.label || `Device group ${index + 1}`);
-  }
-  return [...groups].map(([id, label]) => ({ id, label }));
-}
 function readSettings(track) {
   if (!track || typeof track.getSettings !== "function") return null;
   try {
@@ -888,41 +931,29 @@ function RecorderDeviceSettingsPanel({
   primaryStream = null,
   cameraStream = null
 }) {
-  const [devices, setDevices] = useState2([]);
-  const [supported, setSupported] = useState2(null);
   const audioMimeListId = useId();
   const videoMimeListId = useId();
-  const refreshBrowserInfo = useCallback2(async () => {
-    const mediaDevices = typeof navigator === "undefined" ? void 0 : navigator.mediaDevices;
-    if (!mediaDevices) return;
-    if (typeof mediaDevices.getSupportedConstraints === "function") {
-      setSupported(mediaDevices.getSupportedConstraints());
-    }
-    if (typeof mediaDevices.enumerateDevices === "function") {
-      try {
-        setDevices(await mediaDevices.enumerateDevices());
-      } catch {
-      }
-    }
-  }, []);
-  useEffect2(() => {
-    void refreshBrowserInfo();
-    const mediaDevices = typeof navigator === "undefined" ? void 0 : navigator.mediaDevices;
-    if (!mediaDevices?.addEventListener) return;
-    const handleDeviceChange = () => void refreshBrowserInfo();
-    mediaDevices.addEventListener("devicechange", handleDeviceChange);
-    return () => mediaDevices.removeEventListener("devicechange", handleDeviceChange);
-  }, [refreshBrowserInfo]);
-  useEffect2(() => {
-    if (primaryStream || cameraStream) void refreshBrowserInfo();
-  }, [cameraStream, primaryStream, refreshBrowserInfo]);
+  const { devices, supported, refresh } = useMediaDevices();
+  useEffect3(() => {
+    if (primaryStream || cameraStream) refresh();
+  }, [cameraStream, primaryStream, refresh]);
   const supports = (key) => supported === null || supported[key] === true;
   const hasAudioTrack = microphoneEnabled || systemAudioEnabled;
   const hasStandaloneAudioRecorder = separateAudioRecorder || microphoneEnabled && !cameraEnabled && !screenEnabled;
-  const audioDevices = devices.filter((device) => device.kind === "audioinput");
-  const videoDevices = devices.filter((device) => device.kind === "videoinput");
-  const audioGroups = deviceGroups(audioDevices);
-  const videoGroups = deviceGroups(videoDevices);
+  const audioOptions = recorderDeviceOptions(
+    devices,
+    "audioinput",
+    "Microphone",
+    value.audio.deviceId
+  );
+  const videoOptions = recorderDeviceOptions(
+    devices,
+    "videoinput",
+    "Camera",
+    value.camera.deviceId
+  );
+  const audioGroups = recorderDeviceGroups(audioOptions);
+  const videoGroups = recorderDeviceGroups(videoOptions);
   const patchAudio = (patch) => onChange({ ...value, audio: { ...value.audio, ...patch } });
   const patchCamera = (patch) => onChange({ ...value, camera: { ...value.camera, ...patch } });
   const patchScreen = (patch) => onChange({ ...value, screen: { ...value.screen, ...patch } });
@@ -972,7 +1003,7 @@ function RecorderDeviceSettingsPanel({
                 onChange: (event) => patchAudio({ deviceId: event.target.value }),
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", children: "System default" }),
-                  audioDevices.map((device, index) => /* @__PURE__ */ jsx("option", { value: device.deviceId, children: deviceLabel(device, index, "Microphone") }, device.deviceId))
+                  audioOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.deviceId, children: option.label }, option.deviceId))
                 ]
               }
             )
@@ -1072,7 +1103,7 @@ function RecorderDeviceSettingsPanel({
                 onChange: (event) => patchCamera({ deviceId: event.target.value }),
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", children: "System default" }),
-                  videoDevices.map((device, index) => /* @__PURE__ */ jsx("option", { value: device.deviceId, children: deviceLabel(device, index, "Camera") }, device.deviceId))
+                  videoOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.deviceId, children: option.label }, option.deviceId))
                 ]
               }
             )
@@ -1422,6 +1453,99 @@ function RecorderDeviceSettingsPanel({
   ] });
 }
 
+// src/recorder/RecorderDeviceQuickPicks.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var rowStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))",
+  gap: "8px 10px",
+  marginBottom: 12
+};
+var fieldStyle2 = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 3,
+  minWidth: 0,
+  fontSize: 12,
+  color: "var(--squisq-recorder-muted)"
+};
+var selectStyle = {
+  width: "100%",
+  minWidth: 0,
+  boxSizing: "border-box",
+  padding: "5px 6px",
+  font: "inherit",
+  color: "var(--squisq-recorder-text)",
+  background: "var(--squisq-recorder-input)",
+  border: "1px solid var(--squisq-recorder-border)"
+};
+function DevicePick({
+  label,
+  testId,
+  options,
+  value,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs2("label", { style: fieldStyle2, children: [
+    label,
+    /* @__PURE__ */ jsxs2(
+      "select",
+      {
+        "data-testid": testId,
+        value,
+        disabled,
+        style: selectStyle,
+        onChange: (event) => onChange(event.target.value),
+        children: [
+          /* @__PURE__ */ jsx2("option", { value: "", children: "System default" }),
+          options.map((option) => /* @__PURE__ */ jsx2("option", { value: option.deviceId, children: option.label }, option.deviceId))
+        ]
+      }
+    )
+  ] });
+}
+function RecorderDeviceQuickPicks({
+  devices,
+  microphoneEnabled,
+  cameraEnabled,
+  audioDeviceId,
+  cameraDeviceId,
+  onAudioDeviceChange,
+  onCameraDeviceChange,
+  disabled = false
+}) {
+  const audioOptions = recorderDeviceOptions(devices, "audioinput", "Microphone", audioDeviceId);
+  const videoOptions = recorderDeviceOptions(devices, "videoinput", "Camera", cameraDeviceId);
+  const showMicrophone = microphoneEnabled && hasRecorderDeviceChoice(audioOptions);
+  const showCamera = cameraEnabled && hasRecorderDeviceChoice(videoOptions);
+  if (!showMicrophone && !showCamera) return null;
+  return /* @__PURE__ */ jsxs2("div", { style: rowStyle, "data-testid": "recorder-device-quick-picks", children: [
+    showMicrophone && /* @__PURE__ */ jsx2(
+      DevicePick,
+      {
+        label: "Microphone",
+        testId: "recorder-quick-pick-microphone",
+        options: audioOptions,
+        value: audioDeviceId,
+        onChange: onAudioDeviceChange,
+        disabled
+      }
+    ),
+    showCamera && /* @__PURE__ */ jsx2(
+      DevicePick,
+      {
+        label: "Camera",
+        testId: "recorder-quick-pick-camera",
+        options: videoOptions,
+        value: cameraDeviceId,
+        onChange: onCameraDeviceChange,
+        disabled
+      }
+    )
+  ] });
+}
+
 // src/recorder/deviceSettings.ts
 var DEFAULT_RECORDER_DEVICE_SETTINGS = {
   constraintMode: "ideal",
@@ -1532,7 +1656,7 @@ function recordedMediaKind(source, stream, mimeType) {
 import {
   Fragment as Fragment2,
   useCallback as useCallback3,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useId as useId2,
   useMemo,
   useRef as useRef2,
@@ -1565,7 +1689,7 @@ function narrationCaptureSummary(withCamera) {
 }
 
 // src/recorder/RecorderModal.tsx
-import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var overlayStyle = {
   position: "fixed",
   inset: 0,
@@ -2019,7 +2143,7 @@ function RecorderModal({
     [narrationOn]
   );
   const narrationMicDeviceId = stage.controller.prefs.micDeviceId ?? "";
-  useEffect3(() => {
+  useEffect4(() => {
     if (!narrationOn) return;
     setDeviceSettings(
       (current) => current.audio.deviceId === narrationMicDeviceId ? current : {
@@ -2029,7 +2153,7 @@ function RecorderModal({
     );
   }, [narrationMicDeviceId, narrationOn]);
   const prevNarrationOnRef = useRef2(narrationOn);
-  useEffect3(() => {
+  useEffect4(() => {
     const was = prevNarrationOnRef.current;
     prevNarrationOnRef.current = narrationOn;
     if (was === narrationOn) return;
@@ -2044,7 +2168,7 @@ function RecorderModal({
       if (s.float.isOpen) s.float.close();
     }
   }, [narrationOn, recorder]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!narrationOn) return;
     const onKey = (event) => {
       if (event.key !== "Escape") return;
@@ -2057,7 +2181,7 @@ function RecorderModal({
   const narrationMicLive = stage.controller.mic.status === "live";
   const narrationPreviewWanted = narrationOn && stage.recorder.withCamera && narrationMicLive && stage.recorder.cameraStream === null && stage.recorder.state !== "processing" && stage.recorder.state !== "review" && stage.recorder.state !== "saving";
   const narrationPreviewRef = useRef2(null);
-  useEffect3(() => {
+  useEffect4(() => {
     const existing = narrationPreviewRef.current;
     if (existing) {
       for (const track of existing.getTracks()) track.stop();
@@ -2105,6 +2229,12 @@ function RecorderModal({
     void stageRef.current.recorder.start();
   }, []);
   const narrationCameraStream = narrationOn ? stage.recorder.cameraStream ?? narrationPreview : null;
+  const activePrimaryStream = narrationOn ? stage.controller.mic.stream : recorder.stream;
+  const activeCameraStream = narrationOn ? narrationCameraStream : recorder.camera?.stream ?? null;
+  const { devices: mediaDevices, refresh: refreshMediaDevices } = useMediaDevices();
+  useEffect4(() => {
+    if (activePrimaryStream || activeCameraStream) refreshMediaDevices();
+  }, [activeCameraStream, activePrimaryStream, refreshMediaDevices]);
   useStreamPreview(
     previewRef,
     narrationOn ? narrationCameraStream : recorder.state === "stopped" ? null : recorder.stream
@@ -2113,7 +2243,7 @@ function RecorderModal({
     cameraPreviewRef,
     !narrationOn && isDual && recorder.state !== "stopped" ? recorder.camera?.stream ?? null : null
   );
-  useEffect3(() => {
+  useEffect4(() => {
     setPlaybackPositionMs(0);
     if (!recorder.blob) {
       setPlaybackUrl(null);
@@ -2126,7 +2256,7 @@ function RecorderModal({
     };
   }, [recorder.blob]);
   const cameraBlob = recorder.camera?.blob ?? null;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!cameraBlob) {
       setCameraPlaybackUrl(null);
       return;
@@ -2140,7 +2270,7 @@ function RecorderModal({
   const captureKey = `${source}:${cameraOn ? micOn : ""}:${includeSystemAudio}:${JSON.stringify(deviceSettings)}`;
   const previousKeyRef = useRef2(captureKey);
   const dualSaveProgressRef = useRef2({});
-  useEffect3(() => {
+  useEffect4(() => {
     if (previousKeyRef.current !== captureKey) {
       previousKeyRef.current = captureKey;
       dualSaveProgressRef.current = {};
@@ -2375,6 +2505,8 @@ function RecorderModal({
     stage.recorder.state
   );
   const deviceSettingsLocked = narrationOn ? !narrationRecorderIdle : togglesLocked;
+  const microphoneEnabled = narrationOn ? true : micOn;
+  const cameraEnabled = narrationOn ? stage.recorder.withCamera : cameraOn;
   const narrationToggleFor = (key) => {
     switch (key) {
       case "mic":
@@ -2410,14 +2542,14 @@ function RecorderModal({
         };
     }
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ref: overlayRef,
       className: "squisq-editor-shell squisq-recorder-overlay",
       "data-theme": colorScheme,
       style: { ...overlayStyle, ...recorderThemeStyle(colorScheme) },
-      children: /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs3(
         "div",
         {
           ref: dialogRef,
@@ -2434,15 +2566,15 @@ function RecorderModal({
           "aria-labelledby": headingId,
           tabIndex: -1,
           children: [
-            /* @__PURE__ */ jsx2("h2", { id: headingId, style: titleStyle, children: "Record media" }),
-            /* @__PURE__ */ jsxs2("div", { style: narrationOn ? bodyRowStyle : void 0, children: [
-              /* @__PURE__ */ jsxs2("div", { style: narrationOn ? leftColStyle : void 0, children: [
-                /* @__PURE__ */ jsx2("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                  groupIndex > 0 && /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", style: groupDividerStyle }),
-                  /* @__PURE__ */ jsx2("div", { style: toggleGroupStyle, children: group.toggles.map((t) => {
+            /* @__PURE__ */ jsx3("h2", { id: headingId, style: titleStyle, children: "Record media" }),
+            /* @__PURE__ */ jsxs3("div", { style: narrationOn ? bodyRowStyle : void 0, children: [
+              /* @__PURE__ */ jsxs3("div", { style: narrationOn ? leftColStyle : void 0, children: [
+                /* @__PURE__ */ jsx3("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                  groupIndex > 0 && /* @__PURE__ */ jsx3("div", { "aria-hidden": "true", style: groupDividerStyle }),
+                  /* @__PURE__ */ jsx3("div", { style: toggleGroupStyle, children: group.toggles.map((t) => {
                     if (t.key === "systemAudio" && !canIncludeSystemAudio) return null;
                     const props = narrationOn ? narrationToggleFor(t.key) : simpleToggleProps(t.key);
-                    return /* @__PURE__ */ jsx2(
+                    return /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -2457,9 +2589,9 @@ function RecorderModal({
                     );
                   }) })
                 ] }, group.label)) }),
-                /* @__PURE__ */ jsx2("p", { style: summaryStyle, children: narrationOn ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
-                narrationAvailable && /* @__PURE__ */ jsxs2("label", { style: checkboxRowStyle, children: [
-                  /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3("p", { style: summaryStyle, children: narrationOn ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
+                narrationAvailable && /* @__PURE__ */ jsxs3("label", { style: checkboxRowStyle, children: [
+                  /* @__PURE__ */ jsx3(
                     "input",
                     {
                       type: "checkbox",
@@ -2472,25 +2604,44 @@ function RecorderModal({
                   ),
                   "Show narration mode"
                 ] }),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
+                  RecorderDeviceQuickPicks,
+                  {
+                    devices: mediaDevices,
+                    microphoneEnabled,
+                    cameraEnabled,
+                    audioDeviceId: deviceSettings.audio.deviceId,
+                    cameraDeviceId: deviceSettings.camera.deviceId,
+                    onAudioDeviceChange: (deviceId) => handleDeviceSettingsChange({
+                      ...deviceSettings,
+                      audio: { ...deviceSettings.audio, deviceId }
+                    }),
+                    onCameraDeviceChange: (deviceId) => handleDeviceSettingsChange({
+                      ...deviceSettings,
+                      camera: { ...deviceSettings.camera, deviceId }
+                    }),
+                    disabled: deviceSettingsLocked
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
                   RecorderDeviceSettingsPanel,
                   {
                     value: deviceSettings,
                     onChange: handleDeviceSettingsChange,
                     disabled: deviceSettingsLocked,
-                    microphoneEnabled: narrationOn ? true : micOn,
-                    cameraEnabled: narrationOn ? stage.recorder.withCamera : cameraOn,
+                    microphoneEnabled,
+                    cameraEnabled,
                     screenEnabled: narrationOn ? false : screenOn,
                     systemAudioEnabled: !narrationOn && includeSystemAudio,
                     separateAudioRecorder: narrationOn,
-                    primaryStream: narrationOn ? stage.controller.mic.stream : recorder.stream,
-                    cameraStream: narrationOn ? narrationCameraStream : recorder.camera?.stream ?? null
+                    primaryStream: activePrimaryStream,
+                    cameraStream: activeCameraStream
                   }
                 ),
-                !narrationOn && recorder.error && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: recorder.error.message }),
-                !narrationOn && saveError && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: saveError }),
-                narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
-                narrationOn && narrationCameraStream && /* @__PURE__ */ jsx2("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx2(
+                !narrationOn && recorder.error && /* @__PURE__ */ jsx3("div", { style: errorStyle, children: recorder.error.message }),
+                !narrationOn && saveError && /* @__PURE__ */ jsx3("div", { style: errorStyle, children: saveError }),
+                narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx3("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
+                narrationOn && narrationCameraStream && /* @__PURE__ */ jsx3("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx3(
                   "video",
                   {
                     ref: previewRef,
@@ -2500,10 +2651,10 @@ function RecorderModal({
                     style: { width: "100%", height: "100%", objectFit: "contain" }
                   }
                 ) }),
-                narrationOn && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx2("div", { style: audioMeterStyle, children: stage.recorder.take ? `\u2713 Recorded ${formatDurationMs(stage.recorder.take.durationSec * 1e3)}` : "\u25CF Processing take\u2026" }),
-                narrationOn && !narrationCameraStream && !narrationTakeDone && stage.recorder.withCamera && /* @__PURE__ */ jsx2("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx2("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
-                narrationOn && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs2("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
-                  /* @__PURE__ */ jsx2(
+                narrationOn && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx3("div", { style: audioMeterStyle, children: stage.recorder.take ? `\u2713 Recorded ${formatDurationMs(stage.recorder.take.durationSec * 1e3)}` : "\u25CF Processing take\u2026" }),
+                narrationOn && !narrationCameraStream && !narrationTakeDone && stage.recorder.withCamera && /* @__PURE__ */ jsx3("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx3("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
+                narrationOn && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs3("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
+                  /* @__PURE__ */ jsx3(
                     "div",
                     {
                       "aria-hidden": "true",
@@ -2513,11 +2664,11 @@ function RecorderModal({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx2("span", { style: { position: "relative" }, children: stage.recorder.state === "recording" ? "\u25CF Recording narration" : narrationMicLive ? stage.controller.voiceActive ? "Voice detected" : "Microphone ready" : "Click Start preview to check your mic." })
+                  /* @__PURE__ */ jsx3("span", { style: { position: "relative" }, children: stage.recorder.state === "recording" ? "\u25CF Recording narration" : narrationMicLive ? stage.controller.voiceActive ? "Voice detected" : "Microphone ready" : "Click Start preview to check your mic." })
                 ] }),
-                !narrationOn && !showPreview && /* @__PURE__ */ jsx2("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx2("span", { children: "Click Start Preview to start a recording." }) }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
-                  /* @__PURE__ */ jsx2(
+                !narrationOn && !showPreview && /* @__PURE__ */ jsx3("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx3("span", { children: "Click Start Preview to start a recording." }) }),
+                !narrationOn && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs3("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
+                  /* @__PURE__ */ jsx3(
                     "video",
                     {
                       ref: previewRef,
@@ -2527,7 +2678,7 @@ function RecorderModal({
                       style: { width: "100%", height: "100%", objectFit: "contain" }
                     }
                   ),
-                  isDual && /* @__PURE__ */ jsx2(
+                  isDual && /* @__PURE__ */ jsx3(
                     "video",
                     {
                       ref: cameraPreviewRef,
@@ -2548,12 +2699,12 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx2("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx3("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
                   "\u25CF Recording ",
                   formatDurationMs(recorder.durationMs)
-                ] }) : /* @__PURE__ */ jsx2(Fragment3, { children: "Microphone ready" }) }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
-                  /* @__PURE__ */ jsx2(
+                ] }) : /* @__PURE__ */ jsx3(Fragment3, { children: "Microphone ready" }) }),
+                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs3("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
+                  /* @__PURE__ */ jsx3(
                     "video",
                     {
                       src: playbackUrl,
@@ -2565,7 +2716,7 @@ function RecorderModal({
                       style: { width: "100%", height: "100%", objectFit: "contain" }
                     }
                   ),
-                  /* @__PURE__ */ jsxs2(
+                  /* @__PURE__ */ jsxs3(
                     "div",
                     {
                       role: "timer",
@@ -2579,9 +2730,9 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && recorder.state === "stopped" && isDual && cameraPlaybackUrl && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsx2("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
-                  /* @__PURE__ */ jsx2(
+                !narrationOn && recorder.state === "stopped" && isDual && cameraPlaybackUrl && /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsx3("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
+                  /* @__PURE__ */ jsx3(
                     "video",
                     {
                       src: cameraPlaybackUrl,
@@ -2597,16 +2748,16 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsxs2("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
+                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsxs3("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
                     "\u2713 Recorded ",
                     formatDurationMs(recorder.durationMs)
                   ] }),
-                  /* @__PURE__ */ jsx2("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
+                  /* @__PURE__ */ jsx3("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
                 ] }),
-                !narrationOn && source === "mic" && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-                  /* @__PURE__ */ jsx2("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
-                  /* @__PURE__ */ jsx2(
+                !narrationOn && source === "mic" && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                  /* @__PURE__ */ jsx3("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
+                  /* @__PURE__ */ jsx3(
                     "textarea",
                     {
                       id: "recorder-source-text",
@@ -2618,8 +2769,8 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx2("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+                /* @__PURE__ */ jsx3(
                   "input",
                   {
                     id: "recorder-basename",
@@ -2631,12 +2782,12 @@ function RecorderModal({
                     disabled: narrationOn ? !narrationRecorderIdle : recorder.state === "recording"
                   }
                 ),
-                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: recordingStatusStyle, children: [
+                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs3("div", { style: recordingStatusStyle, children: [
                   "\u25CF Recording ",
                   formatDurationMs(recorder.durationMs)
                 ] }),
-                /* @__PURE__ */ jsxs2("div", { style: buttonRowStyle, children: [
-                  /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsxs3("div", { style: buttonRowStyle, children: [
+                  /* @__PURE__ */ jsx3(
                     "button",
                     {
                       type: "button",
@@ -2646,8 +2797,8 @@ function RecorderModal({
                       children: "Close"
                     }
                   ),
-                  narrationOn && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx2(
+                  narrationOn && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -2657,14 +2808,14 @@ function RecorderModal({
                         children: narrationRequesting ? "Requesting\u2026" : "Start preview"
                       }
                     ),
-                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs2("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
-                      /* @__PURE__ */ jsx2(
+                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs3("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
+                      /* @__PURE__ */ jsx3(
                         "span",
                         {
                           className: "squisq-recorder-record-dot",
                           style: recordDotFrameStyle,
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx2(
+                          children: /* @__PURE__ */ jsx3(
                             "span",
                             {
                               className: "squisq-recorder-record-dot-center",
@@ -2675,7 +2826,7 @@ function RecorderModal({
                       ),
                       "Record"
                     ] }),
-                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx2(
+                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -2684,11 +2835,11 @@ function RecorderModal({
                         children: "Stop"
                       }
                     ),
-                    stage.recorder.state === "processing" && /* @__PURE__ */ jsx2("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
-                    stage.recorder.state === "saving" && /* @__PURE__ */ jsx2("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
-                    stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-                      /* @__PURE__ */ jsx2("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
-                      /* @__PURE__ */ jsx2(
+                    stage.recorder.state === "processing" && /* @__PURE__ */ jsx3("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
+                    stage.recorder.state === "saving" && /* @__PURE__ */ jsx3("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
+                    stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                      /* @__PURE__ */ jsx3("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
+                      /* @__PURE__ */ jsx3(
                         "button",
                         {
                           type: "button",
@@ -2699,8 +2850,8 @@ function RecorderModal({
                       )
                     ] })
                   ] }),
-                  !narrationOn && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx2(
+                  !narrationOn && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -2710,14 +2861,14 @@ function RecorderModal({
                         children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
                       }
                     ),
-                    canRecord && /* @__PURE__ */ jsxs2("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
-                      /* @__PURE__ */ jsx2(
+                    canRecord && /* @__PURE__ */ jsxs3("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
+                      /* @__PURE__ */ jsx3(
                         "span",
                         {
                           className: "squisq-recorder-record-dot",
                           style: recordDotFrameStyle,
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx2(
+                          children: /* @__PURE__ */ jsx3(
                             "span",
                             {
                               className: "squisq-recorder-record-dot-center",
@@ -2728,9 +2879,9 @@ function RecorderModal({
                       ),
                       "Record"
                     ] }),
-                    canStop && /* @__PURE__ */ jsx2("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
-                    canSave && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-                      /* @__PURE__ */ jsx2(
+                    canStop && /* @__PURE__ */ jsx3("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
+                    canSave && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                      /* @__PURE__ */ jsx3(
                         "button",
                         {
                           type: "button",
@@ -2740,7 +2891,7 @@ function RecorderModal({
                           children: "Discard & re-record"
                         }
                       ),
-                      /* @__PURE__ */ jsx2(
+                      /* @__PURE__ */ jsx3(
                         "button",
                         {
                           type: "button",
@@ -2754,7 +2905,7 @@ function RecorderModal({
                   ] })
                 ] })
               ] }),
-              narrationOn && narration && /* @__PURE__ */ jsx2("div", { style: rightColStyle, children: /* @__PURE__ */ jsx2(
+              narrationOn && narration && /* @__PURE__ */ jsx3("div", { style: rightColStyle, children: /* @__PURE__ */ jsx3(
                 NarrationStage,
                 {
                   stage,
@@ -2777,7 +2928,7 @@ function RecorderModal({
 // src/recorder/RecorderPanel.tsx
 import { useCallback as useCallback4, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function RecorderPanel({
   mediaProvider,
   container = null,
@@ -2801,8 +2952,8 @@ function RecorderPanel({
     [controlledOpen, onOpenChange]
   );
   const handleClose = useCallback4(() => setOpen(false), [setOpen]);
-  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    showTrigger && /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    showTrigger && /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -2811,11 +2962,11 @@ function RecorderPanel({
         "aria-label": tooltip,
         "aria-expanded": open,
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx3(Icon, { icon: "fa-solid fa-microphone" })
+        children: /* @__PURE__ */ jsx4(Icon, { icon: "fa-solid fa-microphone" })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         RecorderModal,
         {
           mediaProvider,
@@ -2838,7 +2989,12 @@ export {
   requestScreenStream,
   getCaptureKind,
   useMediaRecorder,
+  recorderDeviceOptions,
+  hasRecorderDeviceChoice,
+  recorderDeviceGroups,
+  useMediaDevices,
   RecorderDeviceSettingsPanel,
+  RecorderDeviceQuickPicks,
   DEFAULT_RECORDER_DEVICE_SETTINGS,
   buildRecorderAudioConstraints,
   buildRecorderCameraConstraints,