@bendyline/squisq-editor-react 2.11.16 → 2.11.17

package/dist/{chunk-4D7QMRTZ.js → chunk-C6QVA6TO.js}

@@ -19,7 +19,7 @@ import {
   timingPathFor,
   useNarrationStage,
   useStreamPreview
-} from "./chunk-34FRFDQ6.js";
+} from "./chunk-XZVMKR5Q.js";
 
 // src/recorder/sources/screenRegion.ts
 function validateScreenCaptureRegion(region, width, height) {
@@ -1818,8 +1818,9 @@ function isExpandedPanel(mode) {
   return mode !== "none";
 }
 function panelModeAfterToggle(current, target, checked) {
-  if (checked) return target;
-  return current === target ? "none" : current;
+  const narration = target === "narration" ? checked : current === "narration" || current === "both";
+  const slides = target === "slides" ? checked : current === "slides" || current === "both";
+  return narration ? slides ? "both" : "narration" : slides ? "slides" : "none";
 }
 function clampSlideIndex(index, count) {
   if (count <= 0) return 0;
@@ -2695,8 +2696,9 @@ function RecorderModal({
   const [cameraPlaybackUrl, setCameraPlaybackUrl] = useState3(null);
   const [playbackPositionMs, setPlaybackPositionMs] = useState3(0);
   const [panelMode, setPanelMode] = useState3("none");
-  const narrationOn = panelMode === "narration";
-  const slidesOn = panelMode === "slides";
+  const narrationOn = panelMode === "narration" || panelMode === "both";
+  const slidesOn = panelMode === "slides" || panelMode === "both";
+  const narrationRecording = narrationOn && Boolean(narration?.recording);
   const expanded = isExpandedPanel(panelMode);
   const [narrationRequesting, setNarrationRequesting] = useState3(false);
   const [narrationPreview, setNarrationPreview] = useState3(null);
@@ -2757,13 +2759,16 @@ function RecorderModal({
     systemAudio: canIncludeSystemAudio ? includeSystemAudio : false
   });
   const filenameSeed = recordingFilenameSeed(source, recorder.stream, micOn || includeSystemAudio);
-  const narrationAvailable = Boolean(narration && narration.recording);
+  const narrationAvailable = Boolean(narration?.doc);
   const basenameRef = useRef2(basename);
   basenameRef.current = basename;
   const stage = useNarrationStage({
     doc: narration?.doc ?? null,
     maxRecordingBytes,
     recording: narration?.recording ?? null,
+    // A prompter-only stage borrows the take's audio. It never requests or
+    // stops capture tracks; the recorder remains their sole owner.
+    analysisStream: narration?.recording ? void 0 : narrationOn && recorder.state !== "stopped" ? isDual ? recorder.camera?.stream ?? null : recorder.stream : null,
     getAudioBasename: () => basenameRef.current.trim() || void 0,
     micConstraints: audioConstraints,
     cameraConstraints,
@@ -2818,35 +2823,41 @@ function RecorderModal({
   useEffect4(() => {
     setAdvanceLog(EMPTY_ADVANCE_LOG);
     setSlideIndex(0);
-  }, [panelMode, slideDeckKey]);
+  }, [slidesOn, slideDeckKey]);
+  useEffect4(() => {
+    if (!narrationOn || narrationRecording) return;
+    const controller = stageRef.current.controller;
+    if (recorder.state === "recording") controller.play();
+    else controller.pause();
+  }, [narrationOn, narrationRecording, recorder.state]);
   const handleDeviceSettingsChange = useCallback4(
     (next) => {
       setDeviceSettings(next);
-      if (narrationOn) {
+      if (narrationRecording) {
         stageRef.current.controller.setPrefs({
           micDeviceId: next.audio.deviceId || null
         });
       }
     },
-    [narrationOn]
+    [narrationRecording]
   );
   const narrationMicDeviceId = stage.controller.prefs.micDeviceId ?? "";
   useEffect4(() => {
-    if (!narrationOn) return;
+    if (!narrationRecording) return;
     setDeviceSettings(
       (current) => current.audio.deviceId === narrationMicDeviceId ? current : {
         ...current,
         audio: { ...current.audio, deviceId: narrationMicDeviceId }
       }
     );
-  }, [narrationMicDeviceId, narrationOn]);
+  }, [narrationMicDeviceId, narrationRecording]);
   const prevNarrationOnRef = useRef2(narrationOn);
   useEffect4(() => {
     const was = prevNarrationOnRef.current;
     prevNarrationOnRef.current = narrationOn;
     if (was === narrationOn) return;
     if (narrationOn) {
-      recorder.cancel();
+      if (narrationRecording) recorder.cancel();
     } else {
       const s = stageRef.current;
       s.controller.pause();
@@ -2855,7 +2866,7 @@ function RecorderModal({
       }
       if (s.float.isOpen) s.float.close();
     }
-  }, [narrationOn, recorder]);
+  }, [narrationOn, narrationRecording, recorder]);
   useEffect4(() => {
     if (!narrationOn) return;
     const onKey = (event) => {
@@ -2867,7 +2878,7 @@ function RecorderModal({
     return () => document.removeEventListener("keydown", onKey, true);
   }, [narrationOn]);
   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 narrationPreviewWanted = narrationRecording && stage.recorder.withCamera && narrationMicLive && stage.recorder.cameraStream === null && stage.recorder.state !== "processing" && stage.recorder.state !== "review" && stage.recorder.state !== "saving";
   const narrationPreviewRef = useRef2(null);
   useEffect4(() => {
     const existing = narrationPreviewRef.current;
@@ -2916,20 +2927,20 @@ function RecorderModal({
   const handleNarrationRecord = useCallback4(() => {
     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 narrationCameraStream = narrationRecording ? stage.recorder.cameraStream ?? narrationPreview : null;
+  const activePrimaryStream = narrationRecording ? stage.controller.mic.stream : recorder.stream;
+  const activeCameraStream = narrationRecording ? 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
+    narrationRecording ? narrationCameraStream : recorder.state === "stopped" ? null : recorder.stream
   );
   useStreamPreview(
     cameraPreviewRef,
-    !narrationOn && isDual && recorder.state !== "stopped" ? recorder.camera?.stream ?? null : null
+    !narrationRecording && isDual && recorder.state !== "stopped" ? recorder.camera?.stream ?? null : null
   );
   useEffect4(() => {
     setPlaybackPositionMs(0);
@@ -2967,7 +2978,7 @@ function RecorderModal({
     }
   }, [captureKey, recorder]);
   const handleClose = useCallback4(() => {
-    if (!narrationOn) {
+    if (!narrationRecording) {
       if (isSaving || recorder.state === "stopping" || recorder.state === "requesting") return;
       if ((recorder.blob || recorder.camera?.blob || recorder.state === "recording") && !window.confirm(
         "Discard this recording? Download or save it before closing to keep a copy."
@@ -2975,7 +2986,7 @@ function RecorderModal({
         return;
     }
     const s = stageRef.current;
-    if (closeNeedsConfirm(narrationOn, s.recorder.state, s.recorder.take !== null)) {
+    if (closeNeedsConfirm(narrationRecording, s.recorder.state, s.recorder.take !== null)) {
       if (!window.confirm("Discard the current narration take?")) return;
       s.handleDiscard();
     }
@@ -2987,7 +2998,7 @@ function RecorderModal({
     }
     recorder.cancel();
     onClose();
-  }, [narrationOn, recorder, onClose, isSaving]);
+  }, [narrationOn, narrationRecording, recorder, onClose, isSaving]);
   useModalDialog({
     rootRef: overlayRef,
     dialogRef,
@@ -3197,7 +3208,8 @@ function RecorderModal({
     dualSaveProgressRef.current = {};
     setAdvanceLog(EMPTY_ADVANCE_LOG);
     recorder.reset();
-  }, [recorder]);
+    if (narrationOn) stageRef.current.controller.restart();
+  }, [narrationOn, recorder]);
   const handlePlaybackTimeUpdate = useCallback4(
     (media) => {
       const currentMs = Number.isFinite(media.currentTime) ? media.currentTime * 1e3 : 0;
@@ -3234,7 +3246,7 @@ function RecorderModal({
   );
   const timingDownloadFilename = `${downloadFilename}.timing.json`;
   useEffect4(() => {
-    if (narrationOn || !canSave) {
+    if (narrationRecording || !canSave) {
       setTimingDownloadUrl(null);
       return;
     }
@@ -3250,7 +3262,7 @@ function RecorderModal({
     setTimingDownloadUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [
-    narrationOn,
+    narrationRecording,
     canSave,
     recorder.durationMs,
     slidesOn,
@@ -3293,9 +3305,9 @@ function RecorderModal({
     recorder.blob !== null || recorder.camera?.blob != null,
     stage.recorder.state
   );
-  const deviceSettingsLocked = narrationOn ? !narrationRecorderIdle : togglesLocked;
-  const microphoneEnabled = narrationOn ? true : micOn;
-  const cameraEnabled = narrationOn ? stage.recorder.withCamera : cameraOn;
+  const deviceSettingsLocked = narrationRecording ? !narrationRecorderIdle : togglesLocked;
+  const microphoneEnabled = narrationRecording ? true : micOn;
+  const cameraEnabled = narrationRecording ? stage.recorder.withCamera : cameraOn;
   const narrationToggleFor = (key) => {
     switch (key) {
       case "mic":
@@ -3359,442 +3371,451 @@ function RecorderModal({
           children: [
             /* @__PURE__ */ jsx6("h2", { id: headingId, style: titleStyle, children: title }),
             /* @__PURE__ */ jsxs5("div", { style: expanded ? bodyRowStyle : void 0, children: [
-              /* @__PURE__ */ jsxs5("div", { style: expanded ? leftColStyle : void 0, children: [
-                /* @__PURE__ */ jsx6("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                  groupIndex > 0 && /* @__PURE__ */ jsx6("div", { "aria-hidden": "true", style: groupDividerStyle }),
-                  /* @__PURE__ */ jsx6("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__ */ jsx6(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-pressed": props.active,
-                        style: props.active ? toggleActive : toggleBase,
-                        onClick: props.onClick,
-                        disabled: props.disabled,
-                        title: props.title,
-                        children: t.label
-                      },
-                      t.key
-                    );
-                  }) })
-                ] }, group.label)) }),
-                /* @__PURE__ */ jsx6("p", { style: summaryStyle, children: narrationOn ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
-                narrationAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
-                  /* @__PURE__ */ jsx6(
-                    "input",
-                    {
-                      type: "checkbox",
-                      style: { accentColor: "var(--squisq-recorder-accent)" },
-                      checked: narrationOn,
-                      onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "narration", e.target.checked)),
-                      disabled: narrationToggleDisabled,
-                      title: narrationToggleDisabled ? narrationOn ? "Finish or discard the narration take first" : "Save or discard this recording before switching modes" : void 0
-                    }
-                  ),
-                  "Show narration mode"
-                ] }),
-                slidesAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
-                  /* @__PURE__ */ jsx6(
-                    "input",
-                    {
-                      type: "checkbox",
-                      style: { accentColor: "var(--squisq-recorder-accent)" },
-                      checked: slidesOn,
-                      onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "slides", e.target.checked)),
-                      disabled: narrationToggleDisabled,
-                      title: narrationToggleDisabled ? "Save or discard this recording before switching modes" : void 0
-                    }
-                  ),
-                  "Show slides mode"
-                ] }),
-                /* @__PURE__ */ jsx6(
-                  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
-                  }
-                ),
-                !narrationOn && screenOn && /* @__PURE__ */ jsx6(
-                  RecorderScreenSettings,
-                  {
-                    value: deviceSettings.screen,
-                    onChange: (screen) => handleDeviceSettingsChange({ ...deviceSettings, screen }),
-                    disabled: deviceSettingsLocked,
-                    hasPreview: recorder.state === "ready",
-                    onChoose: () => {
-                      recorder.cancel();
-                      void handleRequest();
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx6(
-                  RecorderDeviceSettingsPanel,
-                  {
-                    value: deviceSettings,
-                    onChange: handleDeviceSettingsChange,
-                    disabled: deviceSettingsLocked,
-                    microphoneEnabled,
-                    cameraEnabled,
-                    screenEnabled: narrationOn ? false : screenOn,
-                    systemAudioEnabled: !narrationOn && includeSystemAudio,
-                    separateAudioRecorder: narrationOn,
-                    primaryStream: activePrimaryStream,
-                    cameraStream: activeCameraStream
-                  }
-                ),
-                !narrationOn && recorder.error && /* @__PURE__ */ jsx6("div", { style: errorStyle, children: recorder.error.message }),
-                !narrationOn && saveError && /* @__PURE__ */ jsxs5("div", { role: "alert", style: errorStyle, children: [
-                  saveError,
-                  /* @__PURE__ */ jsx6("p", { style: { marginBottom: 0 }, children: "Your recording is still available below. Download a copy before closing, or try saving again." })
-                ] }),
-                /* @__PURE__ */ jsxs5("p", { style: summaryStyle, children: [
-                  "Recording size:",
-                  " ",
-                  formatRecordingBytes(
-                    narrationOn ? stage.recorder.recordedBytes : recorder.recordedBytes
-                  ),
-                  ". Automatically stops at",
-                  " ",
-                  formatRecordingBytes(
-                    narrationOn ? stage.recorder.maxRecordingBytes : recorder.maxRecordingBytes
-                  ),
-                  " ",
-                  "total. Final encoding may add more data."
-                ] }),
-                !narrationOn && recorder.limitReached && /* @__PURE__ */ jsx6("p", { role: "status", style: recordingStatusStyle, children: "Recording stopped at the size limit. Your complete recording is retained; download a copy or save it to the document." }),
-                narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx6("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
-                narrationOn && narrationCameraStream && /* @__PURE__ */ jsx6("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx6(
-                  "video",
-                  {
-                    ref: previewRef,
-                    autoPlay: true,
-                    muted: true,
-                    playsInline: true,
-                    style: { width: "100%", height: "100%", objectFit: "contain" }
-                  }
-                ) }),
-                narrationOn && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx6("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__ */ jsx6("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx6("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
-                narrationOn && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs5("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
-                  /* @__PURE__ */ jsx6(
-                    "div",
-                    {
-                      "aria-hidden": "true",
-                      style: {
-                        ...meterLevelStyle,
-                        width: `${Math.round(Math.min(1, Math.max(0, stage.controller.micLevel)) * 100)}%`
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx6("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__ */ jsx6("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx6("span", { children: screenOn ? "Choose a screen or window to preview what will be recorded." : "Click Start preview to prepare a recording." }) }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs5("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
-                  /* @__PURE__ */ jsx6(
-                    "video",
-                    {
-                      ref: previewRef,
-                      autoPlay: true,
-                      muted: true,
-                      playsInline: true,
-                      style: { width: "100%", height: "100%", objectFit: "contain" }
-                    }
-                  ),
-                  isDual && /* @__PURE__ */ jsx6(
-                    "video",
-                    {
-                      ref: cameraPreviewRef,
-                      autoPlay: true,
-                      muted: true,
-                      playsInline: true,
-                      "aria-label": "Camera preview",
-                      style: {
-                        position: "absolute",
-                        right: "3%",
-                        bottom: "6%",
-                        width: "22%",
-                        aspectRatio: "16 / 9",
-                        objectFit: "cover",
-                        background: "#000",
-                        border: "1px solid rgba(255,255,255,0.6)"
-                      }
-                    }
-                  )
-                ] }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx6("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-                  "\u25CF Recording ",
-                  formatDurationMs(recorder.durationMs)
-                ] }) : /* @__PURE__ */ jsx6(Fragment3, { children: "Microphone ready" }) }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs5("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
-                  /* @__PURE__ */ jsx6(
-                    "video",
-                    {
-                      src: playbackUrl,
-                      controls: true,
-                      playsInline: true,
-                      onTimeUpdate: (event) => handlePlaybackTimeUpdate(event.currentTarget),
-                      onSeeking: (event) => handlePlaybackTimeUpdate(event.currentTarget),
-                      onEnded: () => setPlaybackPositionMs(recorder.durationMs),
-                      style: { width: "100%", height: "100%", objectFit: "contain" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs5(
-                    "div",
-                    {
-                      role: "timer",
-                      "aria-label": `Playback time: ${formatDurationMs(playbackPositionMs)} of ${formatDurationMs(recorder.durationMs)}`,
-                      style: playbackTimeStyle,
-                      children: [
-                        formatDurationMs(playbackPositionMs),
-                        " / ",
-                        formatDurationMs(recorder.durationMs)
-                      ]
-                    }
-                  )
-                ] }),
-                !narrationOn && recorder.state === "stopped" && isDual && cameraPlaybackUrl && /* @__PURE__ */ jsxs5("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsx6("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
-                  /* @__PURE__ */ jsx6(
-                    "video",
-                    {
-                      src: cameraPlaybackUrl,
-                      controls: true,
-                      playsInline: true,
-                      "aria-label": "Camera recording",
-                      style: {
-                        width: "48%",
-                        display: "block",
-                        marginLeft: "auto",
-                        background: "#000"
-                      }
-                    }
-                  )
-                ] }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs5("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsxs5("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
-                    "\u2713 Recorded ",
-                    formatDurationMs(recorder.durationMs)
-                  ] }),
-                  /* @__PURE__ */ jsx6("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
-                ] }),
-                !narrationOn && canSave && playbackUrl && /* @__PURE__ */ jsxs5(
-                  "div",
-                  {
-                    style: {
-                      ...buttonRowStyle,
-                      flexWrap: "wrap",
-                      justifyContent: "flex-start",
-                      marginBottom: 12
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx6("a", { href: playbackUrl, download: downloadFilename, style: btnSecondary, children: isDual ? "Download screen recording" : "Download recording" }),
-                      isDual && cameraPlaybackUrl && /* @__PURE__ */ jsx6(
-                        "a",
+              /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  style: expanded ? {
+                    ...leftColStyle,
+                    ...panelMode === "both" ? { flex: "0 0 min(280px, 24vw)" } : {}
+                  } : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx6("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                      groupIndex > 0 && /* @__PURE__ */ jsx6("div", { "aria-hidden": "true", style: groupDividerStyle }),
+                      /* @__PURE__ */ jsx6("div", { style: toggleGroupStyle, children: group.toggles.map((t) => {
+                        if (t.key === "systemAudio" && !canIncludeSystemAudio) return null;
+                        const props = narrationRecording ? narrationToggleFor(t.key) : simpleToggleProps(t.key);
+                        return /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-pressed": props.active,
+                            style: props.active ? toggleActive : toggleBase,
+                            onClick: props.onClick,
+                            disabled: props.disabled,
+                            title: props.title,
+                            children: t.label
+                          },
+                          t.key
+                        );
+                      }) })
+                    ] }, group.label)) }),
+                    /* @__PURE__ */ jsx6("p", { style: summaryStyle, children: narrationRecording ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
+                    narrationAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                      /* @__PURE__ */ jsx6(
+                        "input",
                         {
-                          href: cameraPlaybackUrl,
-                          download: buildFilename(
-                            "video",
-                            recorder.camera?.extension ?? ".webm",
-                            basename.trim() ? `${basename.trim()}-camera` : void 0,
-                            micOn ? "camera-audio" : "camera"
-                          ),
-                          style: btnSecondary,
-                          children: "Download camera recording"
+                          type: "checkbox",
+                          style: { accentColor: "var(--squisq-recorder-accent)" },
+                          checked: narrationOn,
+                          onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "narration", e.target.checked)),
+                          disabled: narrationToggleDisabled,
+                          title: narrationToggleDisabled ? narrationRecording ? "Finish or discard the narration take first" : "Save or discard this recording before switching modes" : void 0
                         }
                       ),
-                      timingDownloadUrl && /* @__PURE__ */ jsx6(
-                        "a",
+                      "Show narration mode"
+                    ] }),
+                    slidesAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                      /* @__PURE__ */ jsx6(
+                        "input",
                         {
-                          href: timingDownloadUrl,
-                          download: timingDownloadFilename,
-                          style: btnSecondary,
-                          children: "Download recording timings"
+                          type: "checkbox",
+                          style: { accentColor: "var(--squisq-recorder-accent)" },
+                          checked: slidesOn,
+                          onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "slides", e.target.checked)),
+                          disabled: narrationToggleDisabled,
+                          title: narrationToggleDisabled ? "Save or discard this recording before switching modes" : void 0
                         }
-                      )
-                    ]
-                  }
-                ),
-                !narrationOn && !slidesTimingCapture && source === "mic" && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-                  /* @__PURE__ */ jsx6("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
-                  /* @__PURE__ */ jsx6(
-                    "textarea",
-                    {
-                      id: "recorder-source-text",
-                      style: textareaStyle,
-                      placeholder: "Type the text you're going to read aloud.",
-                      value: sourceText,
-                      onChange: (e) => setSourceText(e.target.value),
-                      disabled: recorder.state === "recording"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx6("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
-                /* @__PURE__ */ jsx6(
-                  "input",
-                  {
-                    id: "recorder-basename",
-                    type: "text",
-                    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__ */ jsxs5("div", { style: recordingStatusStyle, children: [
-                  "\u25CF Recording ",
-                  formatDurationMs(recorder.durationMs)
-                ] }),
-                showTimingCheckbox && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-                  /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                      ),
+                      "Show slides mode"
+                    ] }),
                     /* @__PURE__ */ jsx6(
-                      "input",
+                      RecorderDeviceQuickPicks,
                       {
-                        type: "checkbox",
-                        style: { accentColor: "var(--squisq-recorder-accent)" },
-                        checked: applySlideTimings,
-                        onChange: (e) => setApplySlideTimings(e.target.checked),
-                        disabled: isSaving
+                        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
                       }
                     ),
-                    SLIDE_TIMING_CHECKBOX_LABEL
-                  ] }),
-                  applySlideTimings && slideCoverageWarning && /* @__PURE__ */ jsx6("p", { style: summaryStyle, children: slideCoverageWarning })
-                ] }),
-                /* @__PURE__ */ jsxs5("div", { style: buttonRowStyle, children: [
-                  /* @__PURE__ */ jsx6(
-                    "button",
-                    {
-                      type: "button",
-                      style: btnSecondary,
-                      onClick: handleClose,
-                      disabled: !narrationOn && isBusy,
-                      children: "Close"
-                    }
-                  ),
-                  narrationOn && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx6(
-                      "button",
+                    !narrationRecording && screenOn && /* @__PURE__ */ jsx6(
+                      RecorderScreenSettings,
+                      {
+                        value: deviceSettings.screen,
+                        onChange: (screen) => handleDeviceSettingsChange({ ...deviceSettings, screen }),
+                        disabled: deviceSettingsLocked,
+                        hasPreview: recorder.state === "ready",
+                        onChoose: () => {
+                          recorder.cancel();
+                          void handleRequest();
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      RecorderDeviceSettingsPanel,
                       {
-                        type: "button",
-                        style: btnPrimary,
-                        onClick: () => void handleNarrationPreview(),
-                        disabled: narrationRequesting,
-                        children: narrationRequesting ? "Requesting\u2026" : "Start preview"
+                        value: deviceSettings,
+                        onChange: handleDeviceSettingsChange,
+                        disabled: deviceSettingsLocked,
+                        microphoneEnabled,
+                        cameraEnabled,
+                        screenEnabled: narrationRecording ? false : screenOn,
+                        systemAudioEnabled: !narrationRecording && includeSystemAudio,
+                        separateAudioRecorder: narrationRecording,
+                        primaryStream: activePrimaryStream,
+                        cameraStream: activeCameraStream
                       }
                     ),
-                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs5("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
+                    !narrationRecording && recorder.error && /* @__PURE__ */ jsx6("div", { style: errorStyle, children: recorder.error.message }),
+                    !narrationRecording && saveError && /* @__PURE__ */ jsxs5("div", { role: "alert", style: errorStyle, children: [
+                      saveError,
+                      /* @__PURE__ */ jsx6("p", { style: { marginBottom: 0 }, children: "Your recording is still available below. Download a copy before closing, or try saving again." })
+                    ] }),
+                    /* @__PURE__ */ jsxs5("p", { style: summaryStyle, children: [
+                      "Recording size:",
+                      " ",
+                      formatRecordingBytes(
+                        narrationRecording ? stage.recorder.recordedBytes : recorder.recordedBytes
+                      ),
+                      ". Automatically stops at",
+                      " ",
+                      formatRecordingBytes(
+                        narrationRecording ? stage.recorder.maxRecordingBytes : recorder.maxRecordingBytes
+                      ),
+                      " ",
+                      "total. Final encoding may add more data."
+                    ] }),
+                    !narrationRecording && recorder.limitReached && /* @__PURE__ */ jsx6("p", { role: "status", style: recordingStatusStyle, children: "Recording stopped at the size limit. Your complete recording is retained; download a copy or save it to the document." }),
+                    narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx6("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
+                    narrationRecording && narrationCameraStream && /* @__PURE__ */ jsx6("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx6(
+                      "video",
+                      {
+                        ref: previewRef,
+                        autoPlay: true,
+                        muted: true,
+                        playsInline: true,
+                        style: { width: "100%", height: "100%", objectFit: "contain" }
+                      }
+                    ) }),
+                    narrationRecording && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx6("div", { style: audioMeterStyle, children: stage.recorder.take ? `\u2713 Recorded ${formatDurationMs(stage.recorder.take.durationSec * 1e3)}` : "\u25CF Processing take\u2026" }),
+                    narrationRecording && !narrationCameraStream && !narrationTakeDone && stage.recorder.withCamera && /* @__PURE__ */ jsx6("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx6("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
+                    narrationRecording && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs5("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
                       /* @__PURE__ */ jsx6(
-                        "span",
+                        "div",
                         {
-                          className: "squisq-recorder-record-dot",
-                          style: recordDotFrameStyle,
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx6(
-                            "span",
-                            {
-                              className: "squisq-recorder-record-dot-center",
-                              style: recordDotStyle
-                            }
-                          )
+                          style: {
+                            ...meterLevelStyle,
+                            width: `${Math.round(Math.min(1, Math.max(0, stage.controller.micLevel)) * 100)}%`
+                          }
                         }
                       ),
-                      "Record"
+                      /* @__PURE__ */ jsx6("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." })
                     ] }),
-                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx6(
-                      "button",
-                      {
-                        type: "button",
-                        style: btnDanger,
-                        onClick: () => void stage.recorder.stop(),
-                        children: "Stop"
-                      }
-                    ),
-                    stage.recorder.state === "processing" && /* @__PURE__ */ jsx6("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
-                    stage.recorder.state === "saving" && /* @__PURE__ */ jsx6("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
-                    stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-                      /* @__PURE__ */ jsx6("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
+                    !narrationRecording && !showPreview && /* @__PURE__ */ jsx6("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx6("span", { children: screenOn ? "Choose a screen or window to preview what will be recorded." : "Click Start preview to prepare a recording." }) }),
+                    !narrationRecording && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs5("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
                       /* @__PURE__ */ jsx6(
-                        "button",
+                        "video",
                         {
-                          type: "button",
-                          style: btnPrimary,
-                          onClick: () => void stage.handleSave(),
-                          children: "Save to document"
+                          ref: previewRef,
+                          autoPlay: true,
+                          muted: true,
+                          playsInline: true,
+                          style: { width: "100%", height: "100%", objectFit: "contain" }
+                        }
+                      ),
+                      isDual && /* @__PURE__ */ jsx6(
+                        "video",
+                        {
+                          ref: cameraPreviewRef,
+                          autoPlay: true,
+                          muted: true,
+                          playsInline: true,
+                          "aria-label": "Camera preview",
+                          style: {
+                            position: "absolute",
+                            right: "3%",
+                            bottom: "6%",
+                            width: "22%",
+                            aspectRatio: "16 / 9",
+                            objectFit: "cover",
+                            background: "#000",
+                            border: "1px solid rgba(255,255,255,0.6)"
+                          }
                         }
                       )
-                    ] })
-                  ] }),
-                  !narrationOn && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx6(
-                      "button",
-                      {
-                        type: "button",
-                        style: btnPrimary,
-                        onClick: handleRequest,
-                        disabled: isBusy || !canCapture,
-                        children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
-                      }
-                    ),
-                    canRecord && /* @__PURE__ */ jsxs5("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
+                    ] }),
+                    !narrationRecording && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx6("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                      "\u25CF Recording ",
+                      formatDurationMs(recorder.durationMs)
+                    ] }) : /* @__PURE__ */ jsx6(Fragment3, { children: "Microphone ready" }) }),
+                    !narrationRecording && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs5("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
                       /* @__PURE__ */ jsx6(
-                        "span",
+                        "video",
                         {
-                          className: "squisq-recorder-record-dot",
-                          style: recordDotFrameStyle,
-                          "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx6(
-                            "span",
+                          src: playbackUrl,
+                          controls: true,
+                          playsInline: true,
+                          onTimeUpdate: (event) => handlePlaybackTimeUpdate(event.currentTarget),
+                          onSeeking: (event) => handlePlaybackTimeUpdate(event.currentTarget),
+                          onEnded: () => setPlaybackPositionMs(recorder.durationMs),
+                          style: { width: "100%", height: "100%", objectFit: "contain" }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs5(
+                        "div",
+                        {
+                          role: "timer",
+                          "aria-label": `Playback time: ${formatDurationMs(playbackPositionMs)} of ${formatDurationMs(recorder.durationMs)}`,
+                          style: playbackTimeStyle,
+                          children: [
+                            formatDurationMs(playbackPositionMs),
+                            " / ",
+                            formatDurationMs(recorder.durationMs)
+                          ]
+                        }
+                      )
+                    ] }),
+                    !narrationRecording && recorder.state === "stopped" && isDual && cameraPlaybackUrl && /* @__PURE__ */ jsxs5("div", { style: { marginBottom: 12 }, children: [
+                      /* @__PURE__ */ jsx6("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
+                      /* @__PURE__ */ jsx6(
+                        "video",
+                        {
+                          src: cameraPlaybackUrl,
+                          controls: true,
+                          playsInline: true,
+                          "aria-label": "Camera recording",
+                          style: {
+                            width: "48%",
+                            display: "block",
+                            marginLeft: "auto",
+                            background: "#000"
+                          }
+                        }
+                      )
+                    ] }),
+                    !narrationRecording && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs5("div", { style: { marginBottom: 12 }, children: [
+                      /* @__PURE__ */ jsxs5("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
+                        "\u2713 Recorded ",
+                        formatDurationMs(recorder.durationMs)
+                      ] }),
+                      /* @__PURE__ */ jsx6("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
+                    ] }),
+                    !narrationRecording && canSave && playbackUrl && /* @__PURE__ */ jsxs5(
+                      "div",
+                      {
+                        style: {
+                          ...buttonRowStyle,
+                          flexWrap: "wrap",
+                          justifyContent: "flex-start",
+                          marginBottom: 12
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx6("a", { href: playbackUrl, download: downloadFilename, style: btnSecondary, children: isDual ? "Download screen recording" : "Download recording" }),
+                          isDual && cameraPlaybackUrl && /* @__PURE__ */ jsx6(
+                            "a",
                             {
-                              className: "squisq-recorder-record-dot-center",
-                              style: recordDotStyle
+                              href: cameraPlaybackUrl,
+                              download: buildFilename(
+                                "video",
+                                recorder.camera?.extension ?? ".webm",
+                                basename.trim() ? `${basename.trim()}-camera` : void 0,
+                                micOn ? "camera-audio" : "camera"
+                              ),
+                              style: btnSecondary,
+                              children: "Download camera recording"
+                            }
+                          ),
+                          timingDownloadUrl && /* @__PURE__ */ jsx6(
+                            "a",
+                            {
+                              href: timingDownloadUrl,
+                              download: timingDownloadFilename,
+                              style: btnSecondary,
+                              children: "Download recording timings"
                             }
                           )
+                        ]
+                      }
+                    ),
+                    !narrationOn && !slidesTimingCapture && source === "mic" && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                      /* @__PURE__ */ jsx6("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
+                      /* @__PURE__ */ jsx6(
+                        "textarea",
+                        {
+                          id: "recorder-source-text",
+                          style: textareaStyle,
+                          placeholder: "Type the text you're going to read aloud.",
+                          value: sourceText,
+                          onChange: (e) => setSourceText(e.target.value),
+                          disabled: recorder.state === "recording"
                         }
-                      ),
-                      "Record"
+                      )
                     ] }),
-                    canStop && /* @__PURE__ */ jsx6("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
-                    canSave && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                    /* @__PURE__ */ jsx6("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+                    /* @__PURE__ */ jsx6(
+                      "input",
+                      {
+                        id: "recorder-basename",
+                        type: "text",
+                        style: inputStyle2,
+                        placeholder: narrationRecording ? "narration" : isDual ? "screen + camera" : filenameSeed,
+                        value: basename,
+                        onChange: (e) => setBasename(e.target.value),
+                        disabled: narrationRecording ? !narrationRecorderIdle : recorder.state === "recording"
+                      }
+                    ),
+                    !narrationRecording && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs5("div", { style: recordingStatusStyle, children: [
+                      "\u25CF Recording ",
+                      formatDurationMs(recorder.durationMs)
+                    ] }),
+                    showTimingCheckbox && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                      /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                        /* @__PURE__ */ jsx6(
+                          "input",
+                          {
+                            type: "checkbox",
+                            style: { accentColor: "var(--squisq-recorder-accent)" },
+                            checked: applySlideTimings,
+                            onChange: (e) => setApplySlideTimings(e.target.checked),
+                            disabled: isSaving
+                          }
+                        ),
+                        SLIDE_TIMING_CHECKBOX_LABEL
+                      ] }),
+                      applySlideTimings && slideCoverageWarning && /* @__PURE__ */ jsx6("p", { style: summaryStyle, children: slideCoverageWarning })
+                    ] }),
+                    /* @__PURE__ */ jsxs5("div", { style: buttonRowStyle, children: [
                       /* @__PURE__ */ jsx6(
                         "button",
                         {
                           type: "button",
                           style: btnSecondary,
-                          onClick: handleDiscard,
-                          disabled: isBusy,
-                          children: "Discard & re-record"
+                          onClick: handleClose,
+                          disabled: !narrationRecording && isBusy,
+                          children: "Close"
                         }
                       ),
-                      /* @__PURE__ */ jsx6(
-                        "button",
-                        {
-                          type: "button",
-                          style: btnPrimary,
-                          onClick: handleSave,
-                          disabled: isBusy,
-                          children: isSaving ? "Saving\u2026" : "Save to document"
-                        }
-                      )
+                      narrationRecording && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                        narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            type: "button",
+                            style: btnPrimary,
+                            onClick: () => void handleNarrationPreview(),
+                            disabled: narrationRequesting,
+                            children: narrationRequesting ? "Requesting\u2026" : "Start preview"
+                          }
+                        ),
+                        narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs5("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
+                          /* @__PURE__ */ jsx6(
+                            "span",
+                            {
+                              className: "squisq-recorder-record-dot",
+                              style: recordDotFrameStyle,
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ jsx6(
+                                "span",
+                                {
+                                  className: "squisq-recorder-record-dot-center",
+                                  style: recordDotStyle
+                                }
+                              )
+                            }
+                          ),
+                          "Record"
+                        ] }),
+                        (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            type: "button",
+                            style: btnDanger,
+                            onClick: () => void stage.recorder.stop(),
+                            children: "Stop"
+                          }
+                        ),
+                        stage.recorder.state === "processing" && /* @__PURE__ */ jsx6("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
+                        stage.recorder.state === "saving" && /* @__PURE__ */ jsx6("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
+                        stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                          /* @__PURE__ */ jsx6("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
+                          /* @__PURE__ */ jsx6(
+                            "button",
+                            {
+                              type: "button",
+                              style: btnPrimary,
+                              onClick: () => void stage.handleSave(),
+                              children: "Save to document"
+                            }
+                          )
+                        ] })
+                      ] }),
+                      !narrationRecording && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                        (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            type: "button",
+                            style: btnPrimary,
+                            onClick: handleRequest,
+                            disabled: isBusy || !canCapture,
+                            children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
+                          }
+                        ),
+                        canRecord && /* @__PURE__ */ jsxs5("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
+                          /* @__PURE__ */ jsx6(
+                            "span",
+                            {
+                              className: "squisq-recorder-record-dot",
+                              style: recordDotFrameStyle,
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ jsx6(
+                                "span",
+                                {
+                                  className: "squisq-recorder-record-dot-center",
+                                  style: recordDotStyle
+                                }
+                              )
+                            }
+                          ),
+                          "Record"
+                        ] }),
+                        canStop && /* @__PURE__ */ jsx6("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
+                        canSave && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                          /* @__PURE__ */ jsx6(
+                            "button",
+                            {
+                              type: "button",
+                              style: btnSecondary,
+                              onClick: handleDiscard,
+                              disabled: isBusy,
+                              children: "Discard & re-record"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx6(
+                            "button",
+                            {
+                              type: "button",
+                              style: btnPrimary,
+                              onClick: handleSave,
+                              disabled: isBusy,
+                              children: isSaving ? "Saving\u2026" : "Save to document"
+                            }
+                          )
+                        ] })
+                      ] })
                     ] })
-                  ] })
-                ] })
-              ] }),
-              narrationOn && narration && /* @__PURE__ */ jsx6("div", { style: rightColStyle, children: /* @__PURE__ */ jsx6(
+                  ]
+                }
+              ),
+              narrationOn && narration && /* @__PURE__ */ jsx6("div", { style: { ...rightColStyle, flex: "1 1 0" }, children: /* @__PURE__ */ jsx6(
                 NarrationStage,
                 {
                   stage,
@@ -3806,7 +3827,7 @@ function RecorderModal({
                   showReviewActions: false
                 }
               ) }),
-              slidesOn && /* @__PURE__ */ jsx6("div", { style: rightColStyle, children: /* @__PURE__ */ jsx6(
+              slidesOn && /* @__PURE__ */ jsx6("div", { style: { ...rightColStyle, flex: "1 1 0" }, children: /* @__PURE__ */ jsx6(
                 RecorderSlidesPanel,
                 {
                   slides: slideDeck,
@@ -3815,7 +3836,7 @@ function RecorderModal({
                   viewport: slidesViewport,
                   basePath: slides?.basePath,
                   mediaProvider: slides?.mediaProvider ?? mediaProvider,
-                  recording: recorder.state === "recording",
+                  recording: narrationRecording ? stage.recorder.state === "recording" : recorder.state === "recording",
                   shownBlockIds
                 }
               ) })