@bendyline/squisq-editor-react 2.11.15 → 2.11.17

package/dist/{chunk-BJ3TXAIQ.js → chunk-C6QVA6TO.js}

@@ -19,7 +19,115 @@ import {
   timingPathFor,
   useNarrationStage,
   useStreamPreview
-} from "./chunk-34FRFDQ6.js";
+} from "./chunk-XZVMKR5Q.js";
+
+// src/recorder/sources/screenRegion.ts
+function validateScreenCaptureRegion(region, width, height) {
+  const { x, y, width: w, height: h } = region;
+  if (![x, y, w, h].every((value) => Number.isSafeInteger(value) && value >= 0 && value <= 16384) || w === 0 || h === 0 || w * h > 16777216) {
+    throw new Error(
+      "Enter a valid recording region: non-negative left/top and positive whole-pixel dimensions (up to 16 megapixels)."
+    );
+  }
+  if (width !== void 0 && x + w > width || height !== void 0 && y + h > height) {
+    throw new Error(
+      `The recording region is outside the selected surface (${width} \xD7 ${height} pixels). Adjust the coordinates or choose another surface.`
+    );
+  }
+}
+async function cropScreenStream(source, region) {
+  validateScreenCaptureRegion(region);
+  const [sourceTrack] = source.getVideoTracks();
+  if (!sourceTrack) throw new Error("The selected surface has no video track.");
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context || typeof canvas.captureStream !== "function")
+    throw new Error("Recording a region is not supported in this browser.");
+  canvas.width = region.width;
+  canvas.height = region.height;
+  let timer;
+  let output;
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    clearInterval(timer);
+    sourceTrack.removeEventListener("ended", ended);
+    video.pause();
+    video.srcObject = null;
+    output?.getVideoTracks().forEach((track) => track.stop());
+    source.getTracks().forEach((track) => track.stop());
+  };
+  const ended = () => {
+    const track = output?.getVideoTracks()[0];
+    dispose();
+    track?.dispatchEvent(new Event("ended"));
+  };
+  try {
+    await new Promise((resolve, reject) => {
+      const cleanup = () => {
+        clearTimeout(timeout);
+        video.removeEventListener("loadeddata", ready);
+        video.removeEventListener("error", failed);
+        sourceTrack.removeEventListener("ended", failed);
+      };
+      const ready = () => {
+        cleanup();
+        resolve();
+      };
+      const failed = () => {
+        cleanup();
+        reject(new Error("Could not preview the selected screen. Choose it again."));
+      };
+      const timeout = setTimeout(failed, 1e4);
+      video.addEventListener("loadeddata", ready, { once: true });
+      video.addEventListener("error", failed, { once: true });
+      sourceTrack.addEventListener("ended", failed, { once: true });
+      try {
+        video.srcObject = source;
+        void video.play().catch(failed);
+      } catch {
+        failed();
+      }
+    });
+    if (sourceTrack.readyState === "ended")
+      throw new Error("Screen sharing ended. Choose a surface again.");
+    validateScreenCaptureRegion(region, video.videoWidth, video.videoHeight);
+    const draw = () => {
+      if (region.x + region.width > video.videoWidth || region.y + region.height > video.videoHeight || sourceTrack.readyState === "ended") {
+        ended();
+        return;
+      }
+      try {
+        context.drawImage(
+          video,
+          region.x,
+          region.y,
+          region.width,
+          region.height,
+          0,
+          0,
+          region.width,
+          region.height
+        );
+      } catch {
+        ended();
+      }
+    };
+    draw();
+    output = canvas.captureStream(30);
+    const stream = new MediaStream([...output.getVideoTracks(), ...source.getAudioTracks()]);
+    sourceTrack.addEventListener("ended", ended, { once: true });
+    timer = setInterval(draw, 1e3 / 30);
+    return { stream, dispose };
+  } catch (error) {
+    dispose();
+    throw error;
+  }
+}
 
 // src/recorder/sources/screenStream.ts
 function mixAudioTracks(streams) {
@@ -38,6 +146,25 @@ function mixAudioTracks(streams) {
   return { track: mixed, context: ctx };
 }
 async function requestScreenStream(options) {
+  if (options?.crop) validateScreenCaptureRegion(options.crop);
+  const handle = await requestFullScreenStream(options);
+  if (!options?.crop) return handle;
+  try {
+    const cropped = await cropScreenStream(handle.stream, options.crop);
+    return {
+      stream: cropped.stream,
+      dispose: () => {
+        cropped.dispose();
+        handle.dispose();
+      }
+    };
+  } catch (error) {
+    handle.stream.getTracks().forEach((track) => track.stop());
+    handle.dispose();
+    throw error;
+  }
+}
+async function requestFullScreenStream(options) {
   if (!supportsDisplayMedia()) {
     throw new Error("navigator.mediaDevices.getDisplayMedia is not available in this environment.");
   }
@@ -198,6 +325,7 @@ async function acquireStream(source, opts) {
     case "screen+mic": {
       const handle = await requestScreenStream({
         video: opts.screenVideoConstraints ?? opts.videoConstraints ?? true,
+        crop: opts.screenRegion,
         systemAudio: opts.systemAudio ?? false,
         systemAudioConstraints: opts.screenAudioConstraints,
         includeMicrophone: source === "screen+mic",
@@ -209,6 +337,7 @@ async function acquireStream(source, opts) {
 }
 async function acquireDualStreams(opts, isStale) {
   const screen = await requestScreenStream({
+    crop: opts.screenRegion,
     video: opts.screenVideoConstraints ?? opts.videoConstraints ?? true,
     systemAudio: opts.systemAudio ?? false,
     systemAudioConstraints: opts.screenAudioConstraints,
@@ -583,6 +712,15 @@ function useMediaRecorder(options = {}) {
         };
         recorderRef.current = recorder;
         disposeStreamRef.current = dispose;
+        if (source === "screen" || source === "screen+mic") {
+          const [screenTrack] = nextStream.getVideoTracks();
+          if (screenTrack)
+            screenTrack.onended = () => {
+              if (lifecycle !== lifecycleRef.current) return;
+              if (stateRef.current === "recording") void stopFnRef.current?.();
+              else if (stateRef.current === "ready") cancelFnRef.current?.();
+            };
+        }
         setStream(nextStream);
         setFormat(resolved);
         setBlob(null);
@@ -1253,24 +1391,6 @@ function RecorderDeviceSettingsPanel({
         /* @__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(
@@ -1698,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;
@@ -2059,6 +2180,134 @@ import {
   recordSlideShown
 } from "@bendyline/squisq/narration";
 
+// src/recorder/RecorderScreenSettings.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var field = { display: "flex", flexDirection: "column", gap: 4, minWidth: 0 };
+var input = {
+  width: "100%",
+  boxSizing: "border-box",
+  padding: "6px 8px",
+  font: "inherit",
+  color: "var(--squisq-recorder-text)",
+  background: "var(--squisq-recorder-input)",
+  border: "1px solid var(--squisq-recorder-border)"
+};
+function RecorderScreenSettings({
+  value,
+  onChange,
+  disabled,
+  onChoose,
+  hasPreview
+}) {
+  const crop = value.crop;
+  return /* @__PURE__ */ jsxs4(
+    "fieldset",
+    {
+      disabled,
+      style: {
+        margin: "0 0 12px",
+        padding: 12,
+        border: "1px solid var(--squisq-recorder-border)",
+        fontSize: 13
+      },
+      children: [
+        /* @__PURE__ */ jsx5("legend", { children: "What to record" }),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+              gap: 10
+            },
+            children: [
+              /* @__PURE__ */ jsxs4("label", { style: field, children: [
+                "Preferred surface",
+                /* @__PURE__ */ jsxs4(
+                  "select",
+                  {
+                    style: input,
+                    value: value.displaySurface ?? "",
+                    onChange: (event) => onChange({ ...value, displaySurface: event.target.value || void 0 }),
+                    children: [
+                      /* @__PURE__ */ jsx5("option", { value: "", children: "Any available surface" }),
+                      /* @__PURE__ */ jsx5("option", { value: "monitor", children: "Entire screen" }),
+                      /* @__PURE__ */ jsx5("option", { value: "window", children: "Application window" }),
+                      /* @__PURE__ */ jsx5("option", { value: "browser", children: "Browser tab (when available)" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs4("label", { style: field, children: [
+                "Capture area",
+                /* @__PURE__ */ jsxs4(
+                  "select",
+                  {
+                    style: input,
+                    value: value.crop ? "region" : "full",
+                    onChange: (event) => onChange({
+                      ...value,
+                      crop: event.target.value === "region" ? { x: 0, y: 0, width: 1280, height: 720 } : void 0
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx5("option", { value: "full", children: "Whole selected surface" }),
+                      /* @__PURE__ */ jsx5("option", { value: "region", children: "Region by coordinates" })
+                    ]
+                  }
+                )
+              ] }),
+              crop && /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    gridColumn: "1 / -1",
+                    display: "grid",
+                    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                    gap: 10
+                  },
+                  children: ["x", "y", "width", "height"].map((key) => /* @__PURE__ */ jsxs4("label", { style: field, children: [
+                    {
+                      x: "Left (px)",
+                      y: "Top (px)",
+                      width: "Region width (px)",
+                      height: "Region height (px)"
+                    }[key],
+                    /* @__PURE__ */ jsx5(
+                      "input",
+                      {
+                        style: input,
+                        type: "number",
+                        min: key === "x" || key === "y" ? 0 : 1,
+                        max: 16384,
+                        step: 1,
+                        value: Number.isFinite(crop[key]) ? crop[key] : "",
+                        onChange: (event) => onChange({ ...value, crop: { ...crop, [key]: event.target.valueAsNumber } })
+                      }
+                    )
+                  ] }, key))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4("p", { style: { margin: "8px 0 0", color: "var(--squisq-recorder-muted)" }, children: [
+          "Choose a screen, window or tab in the picker, then check the preview. Available choices depend on your browser or app.",
+          value.crop && " Coordinates start at the selected surface\u2019s top-left, in captured pixels. Only this region is saved; audio is unchanged."
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            style: { ...input, marginTop: 10, width: "auto", cursor: "pointer" },
+            onClick: onChoose,
+            children: hasPreview ? "Change screen or window" : "Choose screen or window"
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/modal/useModalDialog.ts
 import { useModalDialog } from "@bendyline/squisq-react";
 
@@ -2085,7 +2334,7 @@ function narrationCaptureSummary(withCamera) {
 }
 
 // src/recorder/RecorderModal.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var overlayStyle = {
   position: "fixed",
   inset: 0,
@@ -2447,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);
@@ -2494,6 +2744,7 @@ function RecorderModal({
     audioConstraints,
     videoConstraints: cameraConstraints,
     screenVideoConstraints: screenConstraints,
+    screenRegion: deviceSettings.screen.crop,
     screenAudioConstraints,
     mimeType: (source === "mic" ? encoding.audioMimeType : encoding.videoMimeType).trim() || void 0,
     bitsPerSecond: recorderBitsPerSecond(encoding.bitsPerSecond),
@@ -2508,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,
@@ -2569,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();
@@ -2606,7 +2866,7 @@ function RecorderModal({
       }
       if (s.float.isOpen) s.float.close();
     }
-  }, [narrationOn, recorder]);
+  }, [narrationOn, narrationRecording, recorder]);
   useEffect4(() => {
     if (!narrationOn) return;
     const onKey = (event) => {
@@ -2618,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;
@@ -2667,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);
@@ -2718,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."
@@ -2726,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();
     }
@@ -2738,7 +2998,7 @@ function RecorderModal({
     }
     recorder.cancel();
     onClose();
-  }, [narrationOn, recorder, onClose, isSaving]);
+  }, [narrationOn, narrationRecording, recorder, onClose, isSaving]);
   useModalDialog({
     rootRef: overlayRef,
     dialogRef,
@@ -2948,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;
@@ -2985,7 +3246,7 @@ function RecorderModal({
   );
   const timingDownloadFilename = `${downloadFilename}.timing.json`;
   useEffect4(() => {
-    if (narrationOn || !canSave) {
+    if (narrationRecording || !canSave) {
       setTimingDownloadUrl(null);
       return;
     }
@@ -3001,7 +3262,7 @@ function RecorderModal({
     setTimingDownloadUrl(url);
     return () => URL.revokeObjectURL(url);
   }, [
-    narrationOn,
+    narrationRecording,
     canSave,
     recorder.durationMs,
     slidesOn,
@@ -3044,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":
@@ -3082,14 +3343,14 @@ function RecorderModal({
         };
     }
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref: overlayRef,
       className: "squisq-editor-shell squisq-recorder-overlay",
       "data-theme": colorScheme,
       style: { ...overlayStyle, ...recorderThemeStyle(colorScheme) },
-      children: /* @__PURE__ */ jsxs4(
+      children: /* @__PURE__ */ jsxs5(
         "div",
         {
           ref: dialogRef,
@@ -3108,431 +3369,453 @@ function RecorderModal({
           "aria-labelledby": headingId,
           tabIndex: -1,
           children: [
-            /* @__PURE__ */ jsx5("h2", { id: headingId, style: titleStyle, children: title }),
-            /* @__PURE__ */ jsxs4("div", { style: expanded ? bodyRowStyle : void 0, children: [
-              /* @__PURE__ */ jsxs4("div", { style: expanded ? leftColStyle : void 0, children: [
-                /* @__PURE__ */ jsx5("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                  groupIndex > 0 && /* @__PURE__ */ jsx5("div", { "aria-hidden": "true", style: groupDividerStyle }),
-                  /* @__PURE__ */ jsx5("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__ */ jsx5(
-                      "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__ */ jsx5("p", { style: summaryStyle, children: narrationOn ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
-                narrationAvailable && /* @__PURE__ */ jsxs4("label", { style: checkboxRowStyle, children: [
-                  /* @__PURE__ */ jsx5(
-                    "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__ */ jsxs4("label", { style: checkboxRowStyle, children: [
-                  /* @__PURE__ */ jsx5(
-                    "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__ */ jsx5(
-                  RecorderDeviceQuickPicks,
-                  {
-                    devices: mediaDevices,
-                    microphoneEnabled,
-                    cameraEnabled,
-                    audioDeviceId: deviceSettings.audio.deviceId,
-                    cameraDeviceId: deviceSettings.camera.deviceId,
-                    onAudioDeviceChange: (deviceId) => handleDeviceSettingsChange({
-                      ...deviceSettings,
-                      audio: { ...deviceSettings.audio, deviceId }
-                    }),
-                    onCameraDeviceChange: (deviceId) => handleDeviceSettingsChange({
-                      ...deviceSettings,
-                      camera: { ...deviceSettings.camera, deviceId }
-                    }),
-                    disabled: deviceSettingsLocked
-                  }
-                ),
-                /* @__PURE__ */ jsx5(
-                  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__ */ jsx5("div", { style: errorStyle, children: recorder.error.message }),
-                !narrationOn && saveError && /* @__PURE__ */ jsxs4("div", { role: "alert", style: errorStyle, children: [
-                  saveError,
-                  /* @__PURE__ */ jsx5("p", { style: { marginBottom: 0 }, children: "Your recording is still available below. Download a copy before closing, or try saving again." })
-                ] }),
-                /* @__PURE__ */ jsxs4("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__ */ jsx5("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__ */ jsx5("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
-                narrationOn && narrationCameraStream && /* @__PURE__ */ jsx5("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx5(
-                  "video",
-                  {
-                    ref: previewRef,
-                    autoPlay: true,
-                    muted: true,
-                    playsInline: true,
-                    style: { width: "100%", height: "100%", objectFit: "contain" }
-                  }
-                ) }),
-                narrationOn && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx5("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__ */ jsx5("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx5("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
-                narrationOn && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs4("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
-                  /* @__PURE__ */ jsx5(
-                    "div",
-                    {
-                      "aria-hidden": "true",
-                      style: {
-                        ...meterLevelStyle,
-                        width: `${Math.round(Math.min(1, Math.max(0, stage.controller.micLevel)) * 100)}%`
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx5("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__ */ jsx5("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx5("span", { children: "Click Start Preview to start a recording." }) }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
-                  /* @__PURE__ */ jsx5(
-                    "video",
-                    {
-                      ref: previewRef,
-                      autoPlay: true,
-                      muted: true,
-                      playsInline: true,
-                      style: { width: "100%", height: "100%", objectFit: "contain" }
-                    }
-                  ),
-                  isDual && /* @__PURE__ */ jsx5(
-                    "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__ */ jsx5("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                  "\u25CF Recording ",
-                  formatDurationMs(recorder.durationMs)
-                ] }) : /* @__PURE__ */ jsx5(Fragment3, { children: "Microphone ready" }) }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
-                  /* @__PURE__ */ jsx5(
-                    "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__ */ jsxs4(
-                    "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__ */ jsxs4("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsx5("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
-                  /* @__PURE__ */ jsx5(
-                    "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__ */ jsxs4("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsxs4("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
-                    "\u2713 Recorded ",
-                    formatDurationMs(recorder.durationMs)
-                  ] }),
-                  /* @__PURE__ */ jsx5("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
-                ] }),
-                !narrationOn && canSave && playbackUrl && /* @__PURE__ */ jsxs4(
-                  "div",
-                  {
-                    style: {
-                      ...buttonRowStyle,
-                      flexWrap: "wrap",
-                      justifyContent: "flex-start",
-                      marginBottom: 12
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx5("a", { href: playbackUrl, download: downloadFilename, style: btnSecondary, children: isDual ? "Download screen recording" : "Download recording" }),
-                      isDual && cameraPlaybackUrl && /* @__PURE__ */ jsx5(
-                        "a",
+            /* @__PURE__ */ jsx6("h2", { id: headingId, style: titleStyle, children: title }),
+            /* @__PURE__ */ jsxs5("div", { style: expanded ? bodyRowStyle : void 0, children: [
+              /* @__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__ */ jsx5(
-                        "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__ */ jsxs4(Fragment3, { children: [
-                  /* @__PURE__ */ jsx5("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
-                  /* @__PURE__ */ jsx5(
-                    "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__ */ jsx5("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
-                /* @__PURE__ */ jsx5(
-                  "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__ */ jsxs4("div", { style: recordingStatusStyle, children: [
-                  "\u25CF Recording ",
-                  formatDurationMs(recorder.durationMs)
-                ] }),
-                showTimingCheckbox && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                  /* @__PURE__ */ jsxs4("label", { style: checkboxRowStyle, children: [
-                    /* @__PURE__ */ jsx5(
-                      "input",
+                      ),
+                      "Show slides mode"
+                    ] }),
+                    /* @__PURE__ */ jsx6(
+                      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__ */ jsx5("p", { style: summaryStyle, children: slideCoverageWarning })
-                ] }),
-                /* @__PURE__ */ jsxs4("div", { style: buttonRowStyle, children: [
-                  /* @__PURE__ */ jsx5(
-                    "button",
-                    {
-                      type: "button",
-                      style: btnSecondary,
-                      onClick: handleClose,
-                      disabled: !narrationOn && isBusy,
-                      children: "Close"
-                    }
-                  ),
-                  narrationOn && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx5(
-                      "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__ */ jsxs4("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
-                      /* @__PURE__ */ jsx5(
-                        "span",
+                    !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(
+                        "div",
                         {
-                          className: "squisq-recorder-record-dot",
-                          style: recordDotFrameStyle,
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx5(
-                            "span",
-                            {
-                              className: "squisq-recorder-record-dot-center",
-                              style: recordDotStyle
-                            }
-                          )
+                          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." })
+                    ] }),
+                    !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(
+                        "video",
+                        {
+                          ref: previewRef,
+                          autoPlay: true,
+                          muted: true,
+                          playsInline: true,
+                          style: { width: "100%", height: "100%", objectFit: "contain" }
                         }
                       ),
-                      "Record"
+                      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)"
+                          }
+                        }
+                      )
                     ] }),
-                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx5(
-                      "button",
+                    !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(
+                        "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)
+                          ]
+                        }
+                      )
+                    ] }),
+                    !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",
                       {
-                        type: "button",
-                        style: btnDanger,
-                        onClick: () => void stage.recorder.stop(),
-                        children: "Stop"
+                        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",
+                            {
+                              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"
+                            }
+                          )
+                        ]
                       }
                     ),
-                    stage.recorder.state === "processing" && /* @__PURE__ */ jsx5("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
-                    stage.recorder.state === "saving" && /* @__PURE__ */ jsx5("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
-                    stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                      /* @__PURE__ */ jsx5("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
-                      /* @__PURE__ */ jsx5(
-                        "button",
+                    !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",
                         {
-                          type: "button",
-                          style: btnPrimary,
-                          onClick: () => void stage.handleSave(),
-                          children: "Save to document"
+                          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"
                         }
                       )
-                    ] })
-                  ] }),
-                  !narrationOn && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx5(
-                      "button",
+                    ] }),
+                    /* @__PURE__ */ jsx6("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+                    /* @__PURE__ */ jsx6(
+                      "input",
                       {
-                        type: "button",
-                        style: btnPrimary,
-                        onClick: handleRequest,
-                        disabled: isBusy || !canCapture,
-                        children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
+                        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"
                       }
                     ),
-                    canRecord && /* @__PURE__ */ jsxs4("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
-                      /* @__PURE__ */ jsx5(
-                        "span",
-                        {
-                          className: "squisq-recorder-record-dot",
-                          style: recordDotFrameStyle,
-                          "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx5(
-                            "span",
-                            {
-                              className: "squisq-recorder-record-dot-center",
-                              style: recordDotStyle
-                            }
-                          )
-                        }
-                      ),
-                      "Record"
+                    !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 })
                     ] }),
-                    canStop && /* @__PURE__ */ jsx5("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
-                    canSave && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                      /* @__PURE__ */ jsx5(
+                    /* @__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__ */ jsx5(
-                        "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__ */ jsx5("div", { style: rightColStyle, children: /* @__PURE__ */ jsx5(
+                  ]
+                }
+              ),
+              narrationOn && narration && /* @__PURE__ */ jsx6("div", { style: { ...rightColStyle, flex: "1 1 0" }, children: /* @__PURE__ */ jsx6(
                 NarrationStage,
                 {
                   stage,
@@ -3544,7 +3827,7 @@ function RecorderModal({
                   showReviewActions: false
                 }
               ) }),
-              slidesOn && /* @__PURE__ */ jsx5("div", { style: rightColStyle, children: /* @__PURE__ */ jsx5(
+              slidesOn && /* @__PURE__ */ jsx6("div", { style: { ...rightColStyle, flex: "1 1 0" }, children: /* @__PURE__ */ jsx6(
                 RecorderSlidesPanel,
                 {
                   slides: slideDeck,
@@ -3553,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
                 }
               ) })
@@ -3568,7 +3851,7 @@ function RecorderModal({
 // src/recorder/RecorderPanel.tsx
 import { useCallback as useCallback5, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function RecorderPanel({
   mediaProvider,
   container = null,
@@ -3594,8 +3877,8 @@ function RecorderPanel({
     [controlledOpen, onOpenChange]
   );
   const handleClose = useCallback5(() => setOpen(false), [setOpen]);
-  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    showTrigger && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    showTrigger && /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -3604,11 +3887,11 @@ function RecorderPanel({
         "aria-label": tooltip,
         "aria-expanded": open,
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx6(Icon, { icon: "fa-solid fa-microphone" })
+        children: /* @__PURE__ */ jsx7(Icon, { icon: "fa-solid fa-microphone" })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         RecorderModal,
         {
           mediaProvider,