@bendyline/squisq-editor-react 2.4.4 → 2.4.6

package/dist/{chunk-PKGBWNUQ.js → chunk-ZSQN6IO7.js}

@@ -16,7 +16,7 @@ import {
   timingPathFor,
   useNarrationStage,
   useStreamPreview
-} from "./chunk-PDCKJCOS.js";
+} from "./chunk-OWOKKZAU.js";
 
 // src/recorder/sources/screenStream.ts
 function mixAudioTracks(streams) {
@@ -43,7 +43,7 @@ async function requestScreenStream(options) {
   const includeMic = options?.includeMicrophone ?? false;
   const displayStream = await navigator.mediaDevices.getDisplayMedia({
     video,
-    audio: systemAudio
+    audio: systemAudio ? options?.systemAudioConstraints ?? true : false
   });
   if (!includeMic) {
     return {
@@ -100,11 +100,14 @@ async function requestScreenStream(options) {
 import { useCallback, useEffect, useRef, useState } from "react";
 
 // src/recorder/sources/systemAudioStream.ts
-async function requestSystemAudioStream() {
+async function requestSystemAudioStream(audioConstraints) {
   if (!supportsDisplayMedia()) {
     throw new Error("navigator.mediaDevices.getDisplayMedia is not available in this environment.");
   }
-  const display = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
+  const display = await navigator.mediaDevices.getDisplayMedia({
+    video: true,
+    audio: audioConstraints ?? true
+  });
   display.getVideoTracks().forEach((t) => t.stop());
   const audio = display.getAudioTracks();
   if (audio.length === 0) return null;
@@ -152,7 +155,7 @@ async function acquireStream(source, opts) {
     case "mic": {
       const audio = typeof opts.audioConstraints === "object" ? opts.audioConstraints : void 0;
       if (opts.systemAudio) {
-        const systemAudio = await requestSystemAudioStream();
+        const systemAudio = await requestSystemAudioStream(opts.screenAudioConstraints);
         let base;
         try {
           base = await requestMicStream(audio);
@@ -172,7 +175,7 @@ async function acquireStream(source, opts) {
       const video = opts.videoConstraints ?? true;
       const audio = opts.includeMicrophone === false ? false : opts.audioConstraints ?? true;
       if (opts.systemAudio) {
-        const systemAudio = await requestSystemAudioStream();
+        const systemAudio = await requestSystemAudioStream(opts.screenAudioConstraints);
         let base;
         try {
           base = await requestCameraStream({ video, audio });
@@ -191,8 +194,9 @@ async function acquireStream(source, opts) {
     case "screen":
     case "screen+mic": {
       const handle = await requestScreenStream({
-        video: opts.videoConstraints ?? true,
+        video: opts.screenVideoConstraints ?? opts.videoConstraints ?? true,
         systemAudio: opts.systemAudio ?? false,
+        systemAudioConstraints: opts.screenAudioConstraints,
         includeMicrophone: source === "screen+mic",
         microphoneConstraints: typeof opts.audioConstraints === "object" ? opts.audioConstraints : void 0
       });
@@ -202,8 +206,9 @@ async function acquireStream(source, opts) {
 }
 async function acquireDualStreams(opts, isStale) {
   const screen = await requestScreenStream({
-    video: opts.videoConstraints ?? true,
+    video: opts.screenVideoConstraints ?? opts.videoConstraints ?? true,
     systemAudio: opts.systemAudio ?? false,
+    systemAudioConstraints: opts.screenAudioConstraints,
     includeMicrophone: false
   });
   const releaseScreen = () => {
@@ -217,7 +222,7 @@ async function acquireDualStreams(opts, isStale) {
   let camera;
   try {
     camera = await requestCameraStream({
-      video: true,
+      video: opts.videoConstraints ?? true,
       audio: opts.includeMicrophone === false ? false : opts.audioConstraints ?? true
     });
   } catch (err) {
@@ -381,6 +386,20 @@ function useMediaRecorder(options = {}) {
         if (optionsRef.current.bitsPerSecond) {
           recorderOptions.bitsPerSecond = optionsRef.current.bitsPerSecond;
         }
+        if (optionsRef.current.audioBitsPerSecond) {
+          recorderOptions.audioBitsPerSecond = optionsRef.current.audioBitsPerSecond;
+        }
+        if (optionsRef.current.videoBitsPerSecond) {
+          recorderOptions.videoBitsPerSecond = optionsRef.current.videoBitsPerSecond;
+        }
+        if (optionsRef.current.audioBitrateMode) {
+          recorderOptions.audioBitrateMode = optionsRef.current.audioBitrateMode;
+        }
+        if (optionsRef.current.videoKeyFrameIntervalDuration) {
+          recorderOptions.videoKeyFrameIntervalDuration = optionsRef.current.videoKeyFrameIntervalDuration;
+        } else if (optionsRef.current.videoKeyFrameIntervalCount) {
+          recorderOptions.videoKeyFrameIntervalCount = optionsRef.current.videoKeyFrameIntervalCount;
+        }
         if (source === "screen+camera") {
           dual = await acquireDualStreams(
             optionsRef.current,
@@ -699,14 +718,818 @@ function useMediaRecorder(options = {}) {
   };
 }
 
+// src/recorder/RecorderDeviceSettingsPanel.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useId, useState as useState2 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var detailsStyle = {
+  border: "1px solid var(--squisq-recorder-border)",
+  marginBottom: 12
+};
+var summaryToggleStyle = {
+  cursor: "pointer",
+  padding: "8px 10px",
+  fontSize: 13,
+  fontWeight: 600,
+  color: "var(--squisq-recorder-text)",
+  background: "var(--squisq-recorder-surface-muted)"
+};
+var panelStyle = {
+  padding: "4px 10px 10px"
+};
+var fieldsetStyle = {
+  border: 0,
+  borderTop: "1px solid var(--squisq-recorder-border)",
+  margin: "10px 0 0",
+  padding: "10px 0 0"
+};
+var legendStyle = {
+  padding: "0 6px 0 0",
+  fontSize: 12,
+  fontWeight: 700,
+  color: "var(--squisq-recorder-text)"
+};
+var gridStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+  gap: "8px 10px"
+};
+var fieldStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 3,
+  minWidth: 0,
+  fontSize: 12,
+  color: "var(--squisq-recorder-muted)"
+};
+var inputStyle = {
+  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)"
+};
+var noteStyle = {
+  margin: "8px 0 0",
+  fontSize: 11,
+  lineHeight: 1.4,
+  color: "var(--squisq-recorder-muted)"
+};
+var actualStyle = {
+  margin: "6px 0 0",
+  padding: 6,
+  overflowX: "auto",
+  fontSize: 10,
+  lineHeight: 1.35,
+  color: "var(--squisq-recorder-muted)",
+  background: "var(--squisq-recorder-surface-muted)"
+};
+var AUDIO_MIME_TYPES = [
+  "audio/webm;codecs=opus",
+  "audio/webm",
+  "audio/mp4",
+  "audio/ogg;codecs=opus"
+];
+var VIDEO_MIME_TYPES = [
+  "video/webm;codecs=vp9,opus",
+  "video/webm;codecs=vp8,opus",
+  "video/webm",
+  "video/mp4"
+];
+function numberFromInput(value) {
+  if (value.trim() === "") return void 0;
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : void 0;
+}
+function triState(value) {
+  return value === void 0 ? "default" : value ? "true" : "false";
+}
+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 {
+    return track.getSettings();
+  } catch {
+    return null;
+  }
+}
+function NumericField({
+  label,
+  value,
+  onChange,
+  disabled,
+  min,
+  step
+}) {
+  return /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+    label,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "number",
+        min: min ?? 0,
+        step: step ?? 1,
+        value: value ?? "",
+        disabled,
+        style: inputStyle,
+        onChange: (event) => onChange(numberFromInput(event.target.value))
+      }
+    )
+  ] });
+}
+function BooleanField({
+  label,
+  value,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+    label,
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: triState(value),
+        disabled,
+        style: inputStyle,
+        onChange: (event) => onChange(booleanFromTriState(event.target.value)),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "default", children: "Browser default" }),
+          /* @__PURE__ */ jsx("option", { value: "true", children: "On" }),
+          /* @__PURE__ */ jsx("option", { value: "false", children: "Off" })
+        ]
+      }
+    )
+  ] });
+}
+function RecorderDeviceSettingsPanel({
+  value,
+  onChange,
+  disabled = false,
+  microphoneEnabled,
+  cameraEnabled,
+  screenEnabled,
+  systemAudioEnabled = false,
+  separateAudioRecorder = false,
+  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 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 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 } });
+  const patchScreenAudio = (patch) => onChange({ ...value, screenAudio: { ...value.screenAudio, ...patch } });
+  const patchEncoding = (patch) => onChange({ ...value, encoding: { ...value.encoding, ...patch } });
+  const primaryAudioSettings = readSettings(primaryStream?.getAudioTracks()[0]);
+  const primaryVideoSettings = readSettings(primaryStream?.getVideoTracks()[0]);
+  const secondaryVideoSettings = readSettings(cameraStream?.getVideoTracks()[0]);
+  const actualSettings = {
+    ...primaryAudioSettings ? { audio: primaryAudioSettings } : {},
+    ...primaryVideoSettings ? { [screenEnabled ? "screen" : "camera"]: primaryVideoSettings } : {},
+    ...secondaryVideoSettings ? { camera: secondaryVideoSettings } : {}
+  };
+  return /* @__PURE__ */ jsxs("details", { style: detailsStyle, "data-testid": "recorder-device-settings", children: [
+    /* @__PURE__ */ jsx("summary", { style: summaryToggleStyle, children: "Advanced device settings" }),
+    /* @__PURE__ */ jsxs("div", { style: panelStyle, children: [
+      /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+        "Constraint strength",
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: value.constraintMode,
+            disabled,
+            style: inputStyle,
+            onChange: (event) => onChange({
+              ...value,
+              constraintMode: event.target.value === "exact" ? "exact" : "ideal"
+            }),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "ideal", children: "Preferred (use closest available)" }),
+              /* @__PURE__ */ jsx("option", { value: "exact", children: "Required (fail when unavailable)" })
+            ]
+          }
+        )
+      ] }),
+      microphoneEnabled && /* @__PURE__ */ jsxs("fieldset", { style: fieldsetStyle, disabled, children: [
+        /* @__PURE__ */ jsx("legend", { style: legendStyle, children: "Microphone" }),
+        /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
+          /* @__PURE__ */ jsxs("label", { style: { ...fieldStyle, gridColumn: "1 / -1" }, children: [
+            "Input device",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Recording microphone",
+                value: value.audio.deviceId,
+                style: inputStyle,
+                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))
+                ]
+              }
+            )
+          ] }),
+          supports("groupId") && audioGroups.length > 0 && /* @__PURE__ */ jsxs("label", { style: { ...fieldStyle, gridColumn: "1 / -1" }, children: [
+            "Device group",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: value.audio.groupId ?? "",
+                style: inputStyle,
+                onChange: (event) => patchAudio({ groupId: event.target.value || void 0 }),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "Any group" }),
+                  audioGroups.map((group) => /* @__PURE__ */ jsx("option", { value: group.id, children: group.label }, group.id))
+                ]
+              }
+            )
+          ] }),
+          supports("sampleRate") && /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Sample rate (Hz)",
+              value: value.audio.sampleRate,
+              onChange: (sampleRate) => patchAudio({ sampleRate }),
+              disabled
+            }
+          ),
+          supports("sampleSize") && /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Sample size (bits)",
+              value: value.audio.sampleSize,
+              onChange: (sampleSize) => patchAudio({ sampleSize }),
+              disabled
+            }
+          ),
+          supports("channelCount") && /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Channel count",
+              value: value.audio.channelCount,
+              onChange: (channelCount) => patchAudio({ channelCount }),
+              disabled
+            }
+          ),
+          supports("latency") && /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Latency (seconds)",
+              value: value.audio.latency,
+              onChange: (latency) => patchAudio({ latency }),
+              disabled,
+              step: 1e-3
+            }
+          ),
+          supports("echoCancellation") && /* @__PURE__ */ jsx(
+            BooleanField,
+            {
+              label: "Echo cancellation",
+              value: value.audio.echoCancellation,
+              onChange: (echoCancellation) => patchAudio({ echoCancellation }),
+              disabled
+            }
+          ),
+          supports("noiseSuppression") && /* @__PURE__ */ jsx(
+            BooleanField,
+            {
+              label: "Noise suppression",
+              value: value.audio.noiseSuppression,
+              onChange: (noiseSuppression) => patchAudio({ noiseSuppression }),
+              disabled
+            }
+          ),
+          supports("autoGainControl") && /* @__PURE__ */ jsx(
+            BooleanField,
+            {
+              label: "Automatic gain control",
+              value: value.audio.autoGainControl,
+              onChange: (autoGainControl) => patchAudio({ autoGainControl }),
+              disabled
+            }
+          )
+        ] })
+      ] }),
+      cameraEnabled && /* @__PURE__ */ jsxs("fieldset", { style: fieldsetStyle, disabled, children: [
+        /* @__PURE__ */ jsx("legend", { style: legendStyle, children: "Camera" }),
+        /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
+          /* @__PURE__ */ jsxs("label", { style: { ...fieldStyle, gridColumn: "1 / -1" }, children: [
+            "Video input",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Recording camera",
+                value: value.camera.deviceId,
+                style: inputStyle,
+                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))
+                ]
+              }
+            )
+          ] }),
+          supports("groupId") && videoGroups.length > 0 && /* @__PURE__ */ jsxs("label", { style: { ...fieldStyle, gridColumn: "1 / -1" }, children: [
+            "Device group",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: value.camera.groupId ?? "",
+                style: inputStyle,
+                onChange: (event) => patchCamera({ groupId: event.target.value || void 0 }),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "Any group" }),
+                  videoGroups.map((group) => /* @__PURE__ */ jsx("option", { value: group.id, children: group.label }, group.id))
+                ]
+              }
+            )
+          ] }),
+          supports("width") && /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Width (px)",
+              value: value.camera.width,
+              onChange: (width) => patchCamera({ width }),
+              disabled
+            }
+          ),
+          supports("height") && /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Height (px)",
+              value: value.camera.height,
+              onChange: (height) => patchCamera({ height }),
+              disabled
+            }
+          ),
+          supports("aspectRatio") && /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Aspect ratio (width / height)",
+              value: value.camera.aspectRatio,
+              onChange: (aspectRatio) => patchCamera({ aspectRatio }),
+              disabled,
+              step: 0.01
+            }
+          ),
+          supports("frameRate") && /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Frame rate (fps)",
+              value: value.camera.frameRate,
+              onChange: (frameRate) => patchCamera({ frameRate }),
+              disabled,
+              step: 0.01
+            }
+          ),
+          supports("facingMode") && /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+            "Facing mode",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: value.camera.facingMode ?? "",
+                disabled,
+                style: inputStyle,
+                onChange: (event) => patchCamera({ facingMode: event.target.value || void 0 }),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "Browser default" }),
+                  /* @__PURE__ */ jsx("option", { value: "user", children: "User/front" }),
+                  /* @__PURE__ */ jsx("option", { value: "environment", children: "Environment/rear" }),
+                  /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                  /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+                ]
+              }
+            )
+          ] }),
+          supports("resizeMode") && /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+            "Resize mode",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: value.camera.resizeMode ?? "",
+                disabled,
+                style: inputStyle,
+                onChange: (event) => patchCamera({ resizeMode: event.target.value || void 0 }),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "Browser default" }),
+                  /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
+                  /* @__PURE__ */ jsx("option", { value: "crop-and-scale", children: "Crop and scale" })
+                ]
+              }
+            )
+          ] }),
+          supports("backgroundBlur") && /* @__PURE__ */ jsx(
+            BooleanField,
+            {
+              label: "Background blur",
+              value: value.camera.backgroundBlur,
+              onChange: (backgroundBlur) => patchCamera({ backgroundBlur }),
+              disabled
+            }
+          )
+        ] })
+      ] }),
+      (screenEnabled || systemAudioEnabled) && /* @__PURE__ */ jsxs("fieldset", { style: fieldsetStyle, disabled, children: [
+        /* @__PURE__ */ jsx("legend", { style: legendStyle, children: screenEnabled ? "Screen capture" : "System audio capture" }),
+        /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
+          screenEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            supports("displaySurface") && /* @__PURE__ */ jsxs("label", { style: { ...fieldStyle, gridColumn: "1 / -1" }, children: [
+              "Preferred surface",
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: value.screen.displaySurface ?? "",
+                  disabled,
+                  style: inputStyle,
+                  onChange: (event) => patchScreen({ displaySurface: event.target.value || void 0 }),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: "Browser picker default" }),
+                    /* @__PURE__ */ jsx("option", { value: "monitor", children: "Entire monitor" }),
+                    /* @__PURE__ */ jsx("option", { value: "window", children: "Application window" }),
+                    /* @__PURE__ */ jsx("option", { value: "browser", children: "Browser tab" })
+                  ]
+                }
+              )
+            ] }),
+            supports("cursor") && /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+              "Mouse cursor",
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: value.screen.cursor ?? "",
+                  disabled,
+                  style: inputStyle,
+                  onChange: (event) => patchScreen({ cursor: event.target.value || void 0 }),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: "Browser default" }),
+                    /* @__PURE__ */ jsx("option", { value: "always", children: "Always" }),
+                    /* @__PURE__ */ jsx("option", { value: "motion", children: "While moving" }),
+                    /* @__PURE__ */ jsx("option", { value: "never", children: "Never" })
+                  ]
+                }
+              )
+            ] }),
+            supports("logicalSurface") && /* @__PURE__ */ jsx(
+              BooleanField,
+              {
+                label: "Logical surface",
+                value: value.screen.logicalSurface,
+                onChange: (logicalSurface) => patchScreen({ logicalSurface }),
+                disabled
+              }
+            ),
+            supports("resizeMode") && /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+              "Resize mode",
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: value.screen.resizeMode ?? "",
+                  disabled,
+                  style: inputStyle,
+                  onChange: (event) => patchScreen({ resizeMode: event.target.value || void 0 }),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: "Browser default" }),
+                    /* @__PURE__ */ jsx("option", { value: "none", children: "Full detail" }),
+                    /* @__PURE__ */ jsx("option", { value: "crop-and-scale", children: "Downscale" })
+                  ]
+                }
+              )
+            ] }),
+            supports("width") && /* @__PURE__ */ jsx(
+              NumericField,
+              {
+                label: "Width (px)",
+                value: value.screen.width,
+                onChange: (width) => patchScreen({ width }),
+                disabled
+              }
+            ),
+            supports("height") && /* @__PURE__ */ jsx(
+              NumericField,
+              {
+                label: "Height (px)",
+                value: value.screen.height,
+                onChange: (height) => patchScreen({ height }),
+                disabled
+              }
+            ),
+            supports("aspectRatio") && /* @__PURE__ */ jsx(
+              NumericField,
+              {
+                label: "Aspect ratio (width / height)",
+                value: value.screen.aspectRatio,
+                onChange: (aspectRatio) => patchScreen({ aspectRatio }),
+                disabled,
+                step: 0.01
+              }
+            ),
+            supports("frameRate") && /* @__PURE__ */ jsx(
+              NumericField,
+              {
+                label: "Frame rate (fps)",
+                value: value.screen.frameRate,
+                onChange: (frameRate) => patchScreen({ frameRate }),
+                disabled,
+                step: 0.01
+              }
+            )
+          ] }),
+          systemAudioEnabled && supports("restrictOwnAudio") && /* @__PURE__ */ jsx(
+            BooleanField,
+            {
+              label: "Remove this tab's audio",
+              value: value.screenAudio.restrictOwnAudio,
+              onChange: (restrictOwnAudio) => patchScreenAudio({ restrictOwnAudio }),
+              disabled
+            }
+          ),
+          systemAudioEnabled && supports("suppressLocalAudioPlayback") && /* @__PURE__ */ jsx(
+            BooleanField,
+            {
+              label: "Mute captured tab locally",
+              value: value.screenAudio.suppressLocalAudioPlayback,
+              onChange: (suppressLocalAudioPlayback) => patchScreenAudio({ suppressLocalAudioPlayback }),
+              disabled
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: noteStyle, children: "The browser still shows its own surface picker and may limit which display constraints it honors." })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { style: fieldsetStyle, disabled, children: [
+        /* @__PURE__ */ jsx("legend", { style: legendStyle, children: "Encoding" }),
+        /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
+          hasStandaloneAudioRecorder && /* @__PURE__ */ jsxs("label", { style: { ...fieldStyle, gridColumn: "1 / -1" }, children: [
+            "Audio MIME type / codecs",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                list: audioMimeListId,
+                value: value.encoding.audioMimeType,
+                style: inputStyle,
+                placeholder: "Automatic",
+                onChange: (event) => patchEncoding({ audioMimeType: event.target.value })
+              }
+            ),
+            /* @__PURE__ */ jsx("datalist", { id: audioMimeListId, children: AUDIO_MIME_TYPES.map((mime) => /* @__PURE__ */ jsx("option", { value: mime }, mime)) })
+          ] }),
+          hasAudioTrack && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Audio bitrate (kbps)",
+              value: value.encoding.audioBitsPerSecond,
+              onChange: (audioBitsPerSecond) => patchEncoding({ audioBitsPerSecond }),
+              disabled
+            }
+          ) }),
+          (cameraEnabled || screenEnabled) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("label", { style: { ...fieldStyle, gridColumn: "1 / -1" }, children: [
+              "Video MIME type / codecs",
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  list: videoMimeListId,
+                  value: value.encoding.videoMimeType,
+                  style: inputStyle,
+                  placeholder: "Automatic",
+                  onChange: (event) => patchEncoding({ videoMimeType: event.target.value })
+                }
+              ),
+              /* @__PURE__ */ jsx("datalist", { id: videoMimeListId, children: VIDEO_MIME_TYPES.map((mime) => /* @__PURE__ */ jsx("option", { value: mime }, mime)) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              NumericField,
+              {
+                label: "Video bitrate (kbps)",
+                value: value.encoding.videoBitsPerSecond,
+                onChange: (videoBitsPerSecond) => patchEncoding({ videoBitsPerSecond }),
+                disabled
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            NumericField,
+            {
+              label: "Total bitrate (kbps)",
+              value: value.encoding.bitsPerSecond,
+              onChange: (bitsPerSecond) => patchEncoding({ bitsPerSecond }),
+              disabled
+            }
+          ),
+          hasAudioTrack && /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+            "Audio bitrate mode",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: value.encoding.audioBitrateMode ?? "",
+                disabled,
+                style: inputStyle,
+                onChange: (event) => patchEncoding({
+                  audioBitrateMode: event.target.value === "constant" || event.target.value === "variable" ? event.target.value : void 0
+                }),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "Browser default" }),
+                  /* @__PURE__ */ jsx("option", { value: "variable", children: "Variable" }),
+                  /* @__PURE__ */ jsx("option", { value: "constant", children: "Constant" })
+                ]
+              }
+            )
+          ] }),
+          (cameraEnabled || screenEnabled) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              NumericField,
+              {
+                label: "Keyframe interval (ms)",
+                value: value.encoding.videoKeyFrameIntervalDuration,
+                onChange: (videoKeyFrameIntervalDuration) => patchEncoding({
+                  videoKeyFrameIntervalDuration,
+                  videoKeyFrameIntervalCount: void 0
+                }),
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              NumericField,
+              {
+                label: "Keyframe interval (frames)",
+                value: value.encoding.videoKeyFrameIntervalCount,
+                onChange: (videoKeyFrameIntervalCount) => patchEncoding({
+                  videoKeyFrameIntervalCount,
+                  videoKeyFrameIntervalDuration: void 0
+                }),
+                disabled
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: noteStyle, children: "MIME and bitrate values are hints. Unsupported MIME choices fall back to the recorder's automatic format selection. A total bitrate overrides separate audio/video bitrate hints." })
+      ] }),
+      Object.keys(actualSettings).length > 0 && /* @__PURE__ */ jsxs("fieldset", { style: fieldsetStyle, children: [
+        /* @__PURE__ */ jsx("legend", { style: legendStyle, children: "Active track settings" }),
+        /* @__PURE__ */ jsx("pre", { style: actualStyle, children: JSON.stringify(actualSettings, null, 2) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { style: noteStyle, children: "Only constraints advertised by this browser are shown. Device names may appear only after microphone or camera permission is granted." })
+    ] })
+  ] });
+}
+
+// src/recorder/deviceSettings.ts
+var DEFAULT_RECORDER_DEVICE_SETTINGS = {
+  constraintMode: "ideal",
+  audio: { deviceId: "" },
+  camera: { deviceId: "" },
+  screen: {},
+  screenAudio: {},
+  encoding: {
+    audioMimeType: "",
+    videoMimeType: ""
+  }
+};
+function preferredNumber(value, mode) {
+  if (value === void 0 || !Number.isFinite(value) || value <= 0) return void 0;
+  return { [mode]: value };
+}
+function preferredInteger(value, mode) {
+  if (value === void 0 || !Number.isFinite(value) || value <= 0) return void 0;
+  return { [mode]: Math.round(value) };
+}
+function preferredString(value, mode) {
+  const trimmed = value?.trim();
+  return trimmed ? { [mode]: trimmed } : void 0;
+}
+function buildRecorderAudioConstraints(settings) {
+  const { audio, constraintMode } = settings;
+  const result = {};
+  if (audio.deviceId) result.deviceId = { exact: audio.deviceId };
+  const groupId = preferredString(audio.groupId, constraintMode);
+  if (groupId) result.groupId = groupId;
+  if (audio.autoGainControl !== void 0) result.autoGainControl = audio.autoGainControl;
+  if (audio.echoCancellation !== void 0) result.echoCancellation = audio.echoCancellation;
+  if (audio.noiseSuppression !== void 0) result.noiseSuppression = audio.noiseSuppression;
+  const channelCount = preferredInteger(audio.channelCount, constraintMode);
+  const latency = preferredNumber(audio.latency, constraintMode);
+  const sampleRate = preferredInteger(audio.sampleRate, constraintMode);
+  const sampleSize = preferredInteger(audio.sampleSize, constraintMode);
+  if (channelCount) result.channelCount = channelCount;
+  if (latency) result.latency = latency;
+  if (sampleRate) result.sampleRate = sampleRate;
+  if (sampleSize) result.sampleSize = sampleSize;
+  return result;
+}
+function buildRecorderCameraConstraints(settings) {
+  const { camera, constraintMode } = settings;
+  const result = {};
+  if (camera.deviceId) result.deviceId = { exact: camera.deviceId };
+  const groupId = preferredString(camera.groupId, constraintMode);
+  if (groupId) result.groupId = groupId;
+  if (camera.backgroundBlur !== void 0) result.backgroundBlur = camera.backgroundBlur;
+  const aspectRatio = preferredNumber(camera.aspectRatio, constraintMode);
+  const facingMode = preferredString(camera.facingMode, constraintMode);
+  const frameRate = preferredNumber(camera.frameRate, constraintMode);
+  const height = preferredInteger(camera.height, constraintMode);
+  const resizeMode = preferredString(camera.resizeMode, constraintMode);
+  const width = preferredInteger(camera.width, constraintMode);
+  if (aspectRatio) result.aspectRatio = aspectRatio;
+  if (facingMode) result.facingMode = facingMode;
+  if (frameRate) result.frameRate = frameRate;
+  if (height) result.height = height;
+  if (resizeMode) result.resizeMode = resizeMode;
+  if (width) result.width = width;
+  return result;
+}
+function buildRecorderScreenConstraints(settings) {
+  const { screen } = settings;
+  const result = {};
+  const aspectRatio = preferredNumber(screen.aspectRatio, "ideal");
+  const cursor = preferredString(screen.cursor, "ideal");
+  const displaySurface = preferredString(screen.displaySurface, "ideal");
+  const frameRate = preferredNumber(screen.frameRate, "ideal");
+  const height = preferredInteger(screen.height, "ideal");
+  const resizeMode = preferredString(screen.resizeMode, "ideal");
+  const width = preferredInteger(screen.width, "ideal");
+  if (screen.logicalSurface !== void 0) result.logicalSurface = screen.logicalSurface;
+  if (aspectRatio) result.aspectRatio = aspectRatio;
+  if (cursor) result.cursor = cursor;
+  if (displaySurface) result.displaySurface = displaySurface;
+  if (frameRate) result.frameRate = frameRate;
+  if (height) result.height = height;
+  if (resizeMode) result.resizeMode = resizeMode;
+  if (width) result.width = width;
+  return result;
+}
+function buildRecorderScreenAudioConstraints(settings) {
+  const result = {};
+  if (settings.screenAudio.restrictOwnAudio !== void 0) {
+    result.restrictOwnAudio = settings.screenAudio.restrictOwnAudio;
+  }
+  if (settings.screenAudio.suppressLocalAudioPlayback !== void 0) {
+    result.suppressLocalAudioPlayback = settings.screenAudio.suppressLocalAudioPlayback;
+  }
+  return result;
+}
+function recorderBitsPerSecond(value) {
+  if (value === void 0 || !Number.isFinite(value) || value <= 0) return void 0;
+  return Math.round(value * 1e3);
+}
+
 // src/recorder/RecorderModal.tsx
 import {
-  Fragment,
-  useCallback as useCallback2,
-  useEffect as useEffect2,
-  useId,
+  Fragment as Fragment2,
+  useCallback as useCallback3,
+  useEffect as useEffect3,
+  useId as useId2,
+  useMemo,
   useRef as useRef2,
-  useState as useState2
+  useState as useState3
 } from "react";
 
 // src/modal/useModalDialog.ts
@@ -735,7 +1558,7 @@ function narrationCaptureSummary(withCamera) {
 }
 
 // src/recorder/RecorderModal.tsx
-import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var overlayStyle = {
   position: "fixed",
   inset: 0,
@@ -750,6 +1573,7 @@ function recorderThemeStyle(colorScheme) {
   return {
     colorScheme,
     "--squisq-recorder-surface": `var(--squisq-bg, ${dark ? "#1f2937" : "#fffdf7"})`,
+    "--squisq-recorder-surface-muted": `var(--squisq-panel-bg, ${dark ? "#111827" : "#f8f4e8"})`,
     "--squisq-recorder-input": `var(--squisq-input-bg, ${dark ? "#374151" : "#fff"})`,
     "--squisq-recorder-border": `var(--squisq-border, ${dark ? "#4b5563" : "#c9b98a"})`,
     "--squisq-recorder-text": `var(--squisq-text, ${dark ? "#e5e7eb" : "#4a3c1f"})`,
@@ -788,7 +1612,7 @@ var labelStyle = {
   marginBottom: 4,
   color: "var(--squisq-recorder-text)"
 };
-var inputStyle = {
+var inputStyle2 = {
   width: "100%",
   padding: "6px 8px",
   fontSize: 13,
@@ -801,7 +1625,7 @@ var inputStyle = {
   boxSizing: "border-box"
 };
 var textareaStyle = {
-  ...inputStyle,
+  ...inputStyle2,
   resize: "vertical",
   minHeight: 72
 };
@@ -1082,23 +1906,31 @@ function RecorderModal({
   narration = null
 }) {
   const initialToggles = toggleStateFromMode(initialMode);
-  const [micOn, setMicOn] = useState2(initialToggles.micOn);
-  const [cameraOn, setCameraOn] = useState2(initialToggles.cameraOn);
-  const [screenOn, setScreenOn] = useState2(initialToggles.screenOn);
-  const [sourceText, setSourceText] = useState2("");
-  const [basename, setBasename] = useState2("");
-  const [includeSystemAudio, setIncludeSystemAudio] = useState2(false);
-  const [isSaving, setIsSaving] = useState2(false);
-  const [saveError, setSaveError] = useState2(null);
-  const [playbackUrl, setPlaybackUrl] = useState2(null);
-  const [cameraPlaybackUrl, setCameraPlaybackUrl] = useState2(null);
-  const [playbackPositionMs, setPlaybackPositionMs] = useState2(0);
-  const [narrationOn, setNarrationOn] = useState2(false);
-  const [narrationRequesting, setNarrationRequesting] = useState2(false);
-  const [narrationPreview, setNarrationPreview] = useState2(null);
+  const [micOn, setMicOn] = useState3(initialToggles.micOn);
+  const [cameraOn, setCameraOn] = useState3(initialToggles.cameraOn);
+  const [screenOn, setScreenOn] = useState3(initialToggles.screenOn);
+  const [sourceText, setSourceText] = useState3("");
+  const [basename, setBasename] = useState3("");
+  const [includeSystemAudio, setIncludeSystemAudio] = useState3(false);
+  const [isSaving, setIsSaving] = useState3(false);
+  const [saveError, setSaveError] = useState3(null);
+  const [playbackUrl, setPlaybackUrl] = useState3(null);
+  const [cameraPlaybackUrl, setCameraPlaybackUrl] = useState3(null);
+  const [playbackPositionMs, setPlaybackPositionMs] = useState3(0);
+  const [narrationOn, setNarrationOn] = useState3(false);
+  const [narrationRequesting, setNarrationRequesting] = useState3(false);
+  const [narrationPreview, setNarrationPreview] = useState3(null);
+  const [deviceSettings, setDeviceSettings] = useState3(() => ({
+    ...DEFAULT_RECORDER_DEVICE_SETTINGS,
+    audio: { ...DEFAULT_RECORDER_DEVICE_SETTINGS.audio },
+    camera: { ...DEFAULT_RECORDER_DEVICE_SETTINGS.camera },
+    screen: { ...DEFAULT_RECORDER_DEVICE_SETTINGS.screen },
+    screenAudio: { ...DEFAULT_RECORDER_DEVICE_SETTINGS.screenAudio },
+    encoding: { ...DEFAULT_RECORDER_DEVICE_SETTINGS.encoding }
+  }));
   const overlayRef = useRef2(null);
   const dialogRef = useRef2(null);
-  const headingId = useId();
+  const headingId = useId2();
   const previewRef = useRef2(null);
   const cameraPreviewRef = useRef2(null);
   const derivedSource = deriveSource({ micOn, cameraOn, screenOn });
@@ -1106,9 +1938,37 @@ function RecorderModal({
   const source = derivedSource ?? "mic";
   const isDual = source === "screen+camera";
   const canIncludeSystemAudio = supportsSystemAudioCapture();
+  const audioConstraints = useMemo(
+    () => buildRecorderAudioConstraints(deviceSettings),
+    [deviceSettings]
+  );
+  const cameraConstraints = useMemo(
+    () => buildRecorderCameraConstraints(deviceSettings),
+    [deviceSettings]
+  );
+  const screenConstraints = useMemo(
+    () => buildRecorderScreenConstraints(deviceSettings),
+    [deviceSettings]
+  );
+  const screenAudioConstraints = useMemo(
+    () => buildRecorderScreenAudioConstraints(deviceSettings),
+    [deviceSettings]
+  );
+  const encoding = deviceSettings.encoding;
   const recorder = useMediaRecorder({
     source,
     includeMicrophone: cameraOn ? micOn : void 0,
+    audioConstraints,
+    videoConstraints: cameraConstraints,
+    screenVideoConstraints: screenConstraints,
+    screenAudioConstraints,
+    mimeType: (source === "mic" ? encoding.audioMimeType : encoding.videoMimeType).trim() || void 0,
+    bitsPerSecond: recorderBitsPerSecond(encoding.bitsPerSecond),
+    audioBitsPerSecond: recorderBitsPerSecond(encoding.audioBitsPerSecond),
+    videoBitsPerSecond: recorderBitsPerSecond(encoding.videoBitsPerSecond),
+    audioBitrateMode: encoding.audioBitrateMode,
+    videoKeyFrameIntervalDuration: encoding.videoKeyFrameIntervalDuration,
+    videoKeyFrameIntervalCount: encoding.videoKeyFrameIntervalCount,
     // System audio rides the screen capture when Screen is on, and is otherwise
     // captured via a separate (video-discarded) display capture mixed into the
     // mic/camera file — so it is no longer gated on Screen.
@@ -1121,12 +1981,48 @@ function RecorderModal({
   const stage = useNarrationStage({
     doc: narration?.doc ?? null,
     recording: narration?.recording ?? null,
-    getAudioBasename: () => basenameRef.current.trim() || void 0
+    getAudioBasename: () => basenameRef.current.trim() || void 0,
+    micConstraints: audioConstraints,
+    cameraConstraints,
+    audioRecorderOptions: {
+      mimeType: encoding.audioMimeType.trim() || void 0,
+      bitsPerSecond: recorderBitsPerSecond(encoding.bitsPerSecond),
+      audioBitsPerSecond: recorderBitsPerSecond(encoding.audioBitsPerSecond),
+      audioBitrateMode: encoding.audioBitrateMode
+    },
+    cameraRecorderOptions: {
+      mimeType: encoding.videoMimeType.trim() || void 0,
+      bitsPerSecond: recorderBitsPerSecond(encoding.bitsPerSecond),
+      videoBitsPerSecond: recorderBitsPerSecond(encoding.videoBitsPerSecond),
+      videoKeyFrameIntervalDuration: encoding.videoKeyFrameIntervalDuration,
+      videoKeyFrameIntervalCount: encoding.videoKeyFrameIntervalCount
+    }
   });
   const stageRef = useRef2(stage);
   stageRef.current = stage;
+  const handleDeviceSettingsChange = useCallback3(
+    (next) => {
+      setDeviceSettings(next);
+      if (narrationOn) {
+        stageRef.current.controller.setPrefs({
+          micDeviceId: next.audio.deviceId || null
+        });
+      }
+    },
+    [narrationOn]
+  );
+  const narrationMicDeviceId = stage.controller.prefs.micDeviceId ?? "";
+  useEffect3(() => {
+    if (!narrationOn) return;
+    setDeviceSettings(
+      (current) => current.audio.deviceId === narrationMicDeviceId ? current : {
+        ...current,
+        audio: { ...current.audio, deviceId: narrationMicDeviceId }
+      }
+    );
+  }, [narrationMicDeviceId, narrationOn]);
   const prevNarrationOnRef = useRef2(narrationOn);
-  useEffect2(() => {
+  useEffect3(() => {
     const was = prevNarrationOnRef.current;
     prevNarrationOnRef.current = narrationOn;
     if (was === narrationOn) return;
@@ -1141,7 +2037,7 @@ function RecorderModal({
       if (s.float.isOpen) s.float.close();
     }
   }, [narrationOn, recorder]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!narrationOn) return;
     const onKey = (event) => {
       if (event.key !== "Escape") return;
@@ -1154,21 +2050,23 @@ 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);
-  useEffect2(() => {
-    if (!narrationPreviewWanted) {
-      const existing = narrationPreviewRef.current;
-      if (existing) {
-        for (const track of existing.getTracks()) track.stop();
-        narrationPreviewRef.current = null;
-        setNarrationPreview(null);
-      }
-      return;
+  useEffect3(() => {
+    const existing = narrationPreviewRef.current;
+    if (existing) {
+      for (const track of existing.getTracks()) track.stop();
+      narrationPreviewRef.current = null;
+      setNarrationPreview(null);
     }
-    if (narrationPreviewRef.current) return;
+    if (!narrationPreviewWanted) return;
     let cancelled = false;
+    let owned = null;
     void (async () => {
       try {
-        const stream = await requestCameraStream({ video: true, audio: false });
+        const stream = await requestCameraStream({
+          video: cameraConstraints,
+          audio: false
+        });
+        owned = stream;
         if (cancelled) {
           for (const track of stream.getTracks()) track.stop();
           return;
@@ -1180,15 +2078,14 @@ function RecorderModal({
     })();
     return () => {
       cancelled = true;
+      if (owned && narrationPreviewRef.current === owned) {
+        for (const track of owned.getTracks()) track.stop();
+        narrationPreviewRef.current = null;
+        setNarrationPreview(null);
+      }
     };
-  }, [narrationPreviewWanted]);
-  useEffect2(() => {
-    return () => {
-      const existing = narrationPreviewRef.current;
-      if (existing) for (const track of existing.getTracks()) track.stop();
-    };
-  }, []);
-  const handleNarrationPreview = useCallback2(async () => {
+  }, [cameraConstraints, narrationPreviewWanted]);
+  const handleNarrationPreview = useCallback3(async () => {
     setNarrationRequesting(true);
     try {
       const controller = stageRef.current.controller;
@@ -1197,7 +2094,7 @@ function RecorderModal({
       setNarrationRequesting(false);
     }
   }, []);
-  const handleNarrationRecord = useCallback2(() => {
+  const handleNarrationRecord = useCallback3(() => {
     void stageRef.current.recorder.start();
   }, []);
   const narrationCameraStream = narrationOn ? stage.recorder.cameraStream ?? narrationPreview : null;
@@ -1209,7 +2106,7 @@ function RecorderModal({
     cameraPreviewRef,
     !narrationOn && isDual && recorder.state !== "stopped" ? recorder.camera?.stream ?? null : null
   );
-  useEffect2(() => {
+  useEffect3(() => {
     setPlaybackPositionMs(0);
     if (!recorder.blob) {
       setPlaybackUrl(null);
@@ -1222,7 +2119,7 @@ function RecorderModal({
     };
   }, [recorder.blob]);
   const cameraBlob = recorder.camera?.blob ?? null;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!cameraBlob) {
       setCameraPlaybackUrl(null);
       return;
@@ -1233,17 +2130,17 @@ function RecorderModal({
       URL.revokeObjectURL(url);
     };
   }, [cameraBlob]);
-  const captureKey = `${source}:${cameraOn ? micOn : ""}:${includeSystemAudio}`;
+  const captureKey = `${source}:${cameraOn ? micOn : ""}:${includeSystemAudio}:${JSON.stringify(deviceSettings)}`;
   const previousKeyRef = useRef2(captureKey);
   const dualSaveProgressRef = useRef2({});
-  useEffect2(() => {
+  useEffect3(() => {
     if (previousKeyRef.current !== captureKey) {
       previousKeyRef.current = captureKey;
       dualSaveProgressRef.current = {};
       recorder.cancel();
     }
   }, [captureKey, recorder]);
-  const handleClose = useCallback2(() => {
+  const handleClose = useCallback3(() => {
     const s = stageRef.current;
     if (closeNeedsConfirm(narrationOn, s.recorder.state, s.recorder.take !== null)) {
       if (!window.confirm("Discard the current narration take?")) return;
@@ -1268,23 +2165,23 @@ function RecorderModal({
       stage.controller.transport
     )
   });
-  const handleRequest = useCallback2(async () => {
+  const handleRequest = useCallback3(async () => {
     setSaveError(null);
     try {
       await recorder.request();
     } catch {
     }
   }, [recorder]);
-  const handleStart = useCallback2(() => {
+  const handleStart = useCallback3(() => {
     setSaveError(null);
     dualSaveProgressRef.current = {};
     recorder.start();
   }, [recorder]);
-  const handleStop = useCallback2(async () => {
+  const handleStop = useCallback3(async () => {
     setSaveError(null);
     await recorder.stop();
   }, [recorder]);
-  const handleSave = useCallback2(async () => {
+  const handleSave = useCallback3(async () => {
     if (!recorder.blob || !recorder.mimeType || !recorder.extension || !recorder.directory) {
       setSaveError("Nothing to save yet \u2014 record something first.");
       return;
@@ -1423,11 +2320,11 @@ function RecorderModal({
     onSave,
     handleClose
   ]);
-  const handleDiscard = useCallback2(() => {
+  const handleDiscard = useCallback3(() => {
     dualSaveProgressRef.current = {};
     recorder.reset();
   }, [recorder]);
-  const handlePlaybackTimeUpdate = useCallback2(
+  const handlePlaybackTimeUpdate = useCallback3(
     (media) => {
       const currentMs = Number.isFinite(media.currentTime) ? media.currentTime * 1e3 : 0;
       setPlaybackPositionMs(Math.min(recorder.durationMs, Math.max(0, currentMs)));
@@ -1471,6 +2368,7 @@ function RecorderModal({
     recorder.blob !== null || recorder.camera?.blob != null,
     stage.recorder.state
   );
+  const deviceSettingsLocked = narrationOn ? !narrationRecorderIdle : togglesLocked;
   const narrationToggleFor = (key) => {
     switch (key) {
       case "mic":
@@ -1506,14 +2404,14 @@ function RecorderModal({
         };
     }
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       ref: overlayRef,
       className: "squisq-editor-shell squisq-recorder-overlay",
       "data-theme": colorScheme,
       style: { ...overlayStyle, ...recorderThemeStyle(colorScheme) },
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs2(
         "div",
         {
           ref: dialogRef,
@@ -1530,15 +2428,15 @@ function RecorderModal({
           "aria-labelledby": headingId,
           tabIndex: -1,
           children: [
-            /* @__PURE__ */ jsx("h2", { id: headingId, style: titleStyle, children: "Record media" }),
-            /* @__PURE__ */ jsxs("div", { style: narrationOn ? bodyRowStyle : void 0, children: [
-              /* @__PURE__ */ jsxs("div", { style: narrationOn ? leftColStyle : void 0, children: [
-                /* @__PURE__ */ jsx("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                  groupIndex > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: groupDividerStyle }),
-                  /* @__PURE__ */ jsx("div", { style: toggleGroupStyle, children: group.toggles.map((t) => {
+            /* @__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) => {
                     if (t.key === "systemAudio" && !canIncludeSystemAudio) return null;
                     const props = narrationOn ? narrationToggleFor(t.key) : simpleToggleProps(t.key);
-                    return /* @__PURE__ */ jsx(
+                    return /* @__PURE__ */ jsx2(
                       "button",
                       {
                         type: "button",
@@ -1553,9 +2451,9 @@ function RecorderModal({
                     );
                   }) })
                 ] }, group.label)) }),
-                /* @__PURE__ */ jsx("p", { style: summaryStyle, children: narrationOn ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
-                narrationAvailable && /* @__PURE__ */ jsxs("label", { style: checkboxRowStyle, children: [
-                  /* @__PURE__ */ jsx(
+                /* @__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(
                     "input",
                     {
                       type: "checkbox",
@@ -1568,10 +2466,25 @@ function RecorderModal({
                   ),
                   "Show narration mode"
                 ] }),
-                !narrationOn && recorder.error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: recorder.error.message }),
-                !narrationOn && saveError && /* @__PURE__ */ jsx("div", { style: errorStyle, children: saveError }),
-                narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
-                narrationOn && narrationCameraStream && /* @__PURE__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx2(
+                  RecorderDeviceSettingsPanel,
+                  {
+                    value: deviceSettings,
+                    onChange: handleDeviceSettingsChange,
+                    disabled: deviceSettingsLocked,
+                    microphoneEnabled: narrationOn ? true : micOn,
+                    cameraEnabled: narrationOn ? stage.recorder.withCamera : cameraOn,
+                    screenEnabled: narrationOn ? false : screenOn,
+                    systemAudioEnabled: !narrationOn && includeSystemAudio,
+                    separateAudioRecorder: narrationOn,
+                    primaryStream: narrationOn ? stage.controller.mic.stream : recorder.stream,
+                    cameraStream: narrationOn ? narrationCameraStream : recorder.camera?.stream ?? null
+                  }
+                ),
+                !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(
                   "video",
                   {
                     ref: previewRef,
@@ -1581,10 +2494,10 @@ function RecorderModal({
                     style: { width: "100%", height: "100%", objectFit: "contain" }
                   }
                 ) }),
-                narrationOn && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx("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__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
-                narrationOn && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
-                  /* @__PURE__ */ jsx(
+                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(
                     "div",
                     {
                       "aria-hidden": "true",
@@ -1594,11 +2507,11 @@ function RecorderModal({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx("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__ */ 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." })
                 ] }),
-                !narrationOn && !showPreview && /* @__PURE__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx("span", { children: "Click Start Preview to start a recording." }) }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
-                  /* @__PURE__ */ jsx(
+                !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(
                     "video",
                     {
                       ref: previewRef,
@@ -1608,7 +2521,7 @@ function RecorderModal({
                       style: { width: "100%", height: "100%", objectFit: "contain" }
                     }
                   ),
-                  isDual && /* @__PURE__ */ jsx(
+                  isDual && /* @__PURE__ */ jsx2(
                     "video",
                     {
                       ref: cameraPreviewRef,
@@ -1629,12 +2542,12 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx2("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
                   "\u25CF Recording ",
                   formatDurationMs(recorder.durationMs)
-                ] }) : /* @__PURE__ */ jsx(Fragment2, { children: "Microphone ready" }) }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
-                  /* @__PURE__ */ jsx(
+                ] }) : /* @__PURE__ */ jsx2(Fragment3, { children: "Microphone ready" }) }),
+                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
+                  /* @__PURE__ */ jsx2(
                     "video",
                     {
                       src: playbackUrl,
@@ -1646,7 +2559,7 @@ function RecorderModal({
                       style: { width: "100%", height: "100%", objectFit: "contain" }
                     }
                   ),
-                  /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsxs2(
                     "div",
                     {
                       role: "timer",
@@ -1660,9 +2573,9 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && recorder.state === "stopped" && isDual && cameraPlaybackUrl && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsx("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
-                  /* @__PURE__ */ jsx(
+                !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(
                     "video",
                     {
                       src: cameraPlaybackUrl,
@@ -1678,16 +2591,16 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsxs("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
+                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsxs2("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
                     "\u2713 Recorded ",
                     formatDurationMs(recorder.durationMs)
                   ] }),
-                  /* @__PURE__ */ jsx("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
+                  /* @__PURE__ */ jsx2("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
                 ] }),
-                !narrationOn && source === "mic" && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
-                  /* @__PURE__ */ jsx(
+                !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(
                     "textarea",
                     {
                       id: "recorder-source-text",
@@ -1699,25 +2612,25 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx2("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+                /* @__PURE__ */ jsx2(
                   "input",
                   {
                     id: "recorder-basename",
                     type: "text",
-                    style: inputStyle,
+                    style: inputStyle2,
                     placeholder: narrationOn ? "narration" : isDual ? "screen + camera" : filenameSeed,
                     value: basename,
                     onChange: (e) => setBasename(e.target.value),
                     disabled: narrationOn ? !narrationRecorderIdle : recorder.state === "recording"
                   }
                 ),
-                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs("div", { style: recordingStatusStyle, children: [
+                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: recordingStatusStyle, children: [
                   "\u25CF Recording ",
                   formatDurationMs(recorder.durationMs)
                 ] }),
-                /* @__PURE__ */ jsxs("div", { style: buttonRowStyle, children: [
-                  /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsxs2("div", { style: buttonRowStyle, children: [
+                  /* @__PURE__ */ jsx2(
                     "button",
                     {
                       type: "button",
@@ -1727,8 +2640,8 @@ function RecorderModal({
                       children: "Close"
                     }
                   ),
-                  narrationOn && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx(
+                  narrationOn && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx2(
                       "button",
                       {
                         type: "button",
@@ -1738,14 +2651,14 @@ function RecorderModal({
                         children: narrationRequesting ? "Requesting\u2026" : "Start preview"
                       }
                     ),
-                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
-                      /* @__PURE__ */ jsx(
+                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs2("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
+                      /* @__PURE__ */ jsx2(
                         "span",
                         {
                           className: "squisq-recorder-record-dot",
                           style: recordDotFrameStyle,
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx(
+                          children: /* @__PURE__ */ jsx2(
                             "span",
                             {
                               className: "squisq-recorder-record-dot-center",
@@ -1756,7 +2669,7 @@ function RecorderModal({
                       ),
                       "Record"
                     ] }),
-                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx(
+                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx2(
                       "button",
                       {
                         type: "button",
@@ -1765,11 +2678,11 @@ function RecorderModal({
                         children: "Stop"
                       }
                     ),
-                    stage.recorder.state === "processing" && /* @__PURE__ */ jsx("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
-                    stage.recorder.state === "saving" && /* @__PURE__ */ jsx("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
-                    stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                      /* @__PURE__ */ jsx("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
-                      /* @__PURE__ */ jsx(
+                    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(
                         "button",
                         {
                           type: "button",
@@ -1780,8 +2693,8 @@ function RecorderModal({
                       )
                     ] })
                   ] }),
-                  !narrationOn && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx(
+                  !narrationOn && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx2(
                       "button",
                       {
                         type: "button",
@@ -1791,14 +2704,14 @@ function RecorderModal({
                         children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
                       }
                     ),
-                    canRecord && /* @__PURE__ */ jsxs("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
-                      /* @__PURE__ */ jsx(
+                    canRecord && /* @__PURE__ */ jsxs2("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
+                      /* @__PURE__ */ jsx2(
                         "span",
                         {
                           className: "squisq-recorder-record-dot",
                           style: recordDotFrameStyle,
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx(
+                          children: /* @__PURE__ */ jsx2(
                             "span",
                             {
                               className: "squisq-recorder-record-dot-center",
@@ -1809,9 +2722,9 @@ function RecorderModal({
                       ),
                       "Record"
                     ] }),
-                    canStop && /* @__PURE__ */ jsx("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
-                    canSave && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                      /* @__PURE__ */ jsx(
+                    canStop && /* @__PURE__ */ jsx2("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
+                    canSave && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                      /* @__PURE__ */ jsx2(
                         "button",
                         {
                           type: "button",
@@ -1821,7 +2734,7 @@ function RecorderModal({
                           children: "Discard & re-record"
                         }
                       ),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2(
                         "button",
                         {
                           type: "button",
@@ -1835,7 +2748,7 @@ function RecorderModal({
                   ] })
                 ] })
               ] }),
-              narrationOn && narration && /* @__PURE__ */ jsx("div", { style: rightColStyle, children: /* @__PURE__ */ jsx(
+              narrationOn && narration && /* @__PURE__ */ jsx2("div", { style: rightColStyle, children: /* @__PURE__ */ jsx2(
                 NarrationStage,
                 {
                   stage,
@@ -1856,9 +2769,9 @@ function RecorderModal({
 }
 
 // src/recorder/RecorderPanel.tsx
-import { useCallback as useCallback3, useState as useState3 } from "react";
+import { useCallback as useCallback4, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function RecorderPanel({
   mediaProvider,
   container = null,
@@ -1872,18 +2785,18 @@ function RecorderPanel({
   onOpenChange,
   showTrigger = true
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState3(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState4(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = useCallback3(
+  const setOpen = useCallback4(
     (nextOpen) => {
       if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
       onOpenChange?.(nextOpen);
     },
     [controlledOpen, onOpenChange]
   );
-  const handleClose = useCallback3(() => setOpen(false), [setOpen]);
-  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    showTrigger && /* @__PURE__ */ jsx2(
+  const handleClose = useCallback4(() => setOpen(false), [setOpen]);
+  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
+    showTrigger && /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -1892,11 +2805,11 @@ function RecorderPanel({
         "aria-label": tooltip,
         "aria-expanded": open,
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx2(Icon, { icon: "fa-solid fa-microphone" })
+        children: /* @__PURE__ */ jsx3(Icon, { icon: "fa-solid fa-microphone" })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         RecorderModal,
         {
           mediaProvider,
@@ -1919,6 +2832,13 @@ export {
   requestScreenStream,
   getCaptureKind,
   useMediaRecorder,
+  RecorderDeviceSettingsPanel,
+  DEFAULT_RECORDER_DEVICE_SETTINGS,
+  buildRecorderAudioConstraints,
+  buildRecorderCameraConstraints,
+  buildRecorderScreenConstraints,
+  buildRecorderScreenAudioConstraints,
+  recorderBitsPerSecond,
   useModalDialog,
   RecorderModal,
   RecorderPanel