@bendyline/squisq-editor-react 2.11.14 → 2.11.16

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

@@ -21,6 +21,114 @@ import {
   useStreamPreview
 } from "./chunk-34FRFDQ6.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) {
   const sources = streams.map((s) => s.getAudioTracks()).flat().filter((t) => t.readyState === "live");
@@ -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(
@@ -2059,6 +2179,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 +2333,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,
@@ -2494,6 +2742,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),
@@ -3082,14 +3331,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,15 +3357,15 @@ 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) => {
+            /* @__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__ */ jsx5(
+                    return /* @__PURE__ */ jsx6(
                       "button",
                       {
                         type: "button",
@@ -3131,9 +3380,9 @@ function RecorderModal({
                     );
                   }) })
                 ] }, 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(
+                /* @__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",
@@ -3146,8 +3395,8 @@ function RecorderModal({
                   ),
                   "Show narration mode"
                 ] }),
-                slidesAvailable && /* @__PURE__ */ jsxs4("label", { style: checkboxRowStyle, children: [
-                  /* @__PURE__ */ jsx5(
+                slidesAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                  /* @__PURE__ */ jsx6(
                     "input",
                     {
                       type: "checkbox",
@@ -3160,7 +3409,7 @@ function RecorderModal({
                   ),
                   "Show slides mode"
                 ] }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   RecorderDeviceQuickPicks,
                   {
                     devices: mediaDevices,
@@ -3179,7 +3428,20 @@ function RecorderModal({
                     disabled: deviceSettingsLocked
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                !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,
@@ -3194,12 +3456,12 @@ function RecorderModal({
                     cameraStream: activeCameraStream
                   }
                 ),
-                !narrationOn && recorder.error && /* @__PURE__ */ jsx5("div", { style: errorStyle, children: recorder.error.message }),
-                !narrationOn && saveError && /* @__PURE__ */ jsxs4("div", { role: "alert", style: errorStyle, children: [
+                !narrationOn && recorder.error && /* @__PURE__ */ jsx6("div", { style: errorStyle, children: recorder.error.message }),
+                !narrationOn && saveError && /* @__PURE__ */ jsxs5("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__ */ jsx6("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: [
+                /* @__PURE__ */ jsxs5("p", { style: summaryStyle, children: [
                   "Recording size:",
                   " ",
                   formatRecordingBytes(
@@ -3213,9 +3475,9 @@ function RecorderModal({
                   " ",
                   "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(
+                !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,
@@ -3225,10 +3487,10 @@ function RecorderModal({
                     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(
+                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",
@@ -3238,11 +3500,11 @@ function RecorderModal({
                       }
                     }
                   ),
-                  /* @__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." })
+                  /* @__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__ */ 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(
+                !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,
@@ -3252,7 +3514,7 @@ function RecorderModal({
                       style: { width: "100%", height: "100%", objectFit: "contain" }
                     }
                   ),
-                  isDual && /* @__PURE__ */ jsx5(
+                  isDual && /* @__PURE__ */ jsx6(
                     "video",
                     {
                       ref: cameraPreviewRef,
@@ -3273,12 +3535,12 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx5("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                !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__ */ jsx5(Fragment3, { children: "Microphone ready" }) }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
-                  /* @__PURE__ */ jsx5(
+                ] }) : /* @__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,
@@ -3290,7 +3552,7 @@ function RecorderModal({
                       style: { width: "100%", height: "100%", objectFit: "contain" }
                     }
                   ),
-                  /* @__PURE__ */ jsxs4(
+                  /* @__PURE__ */ jsxs5(
                     "div",
                     {
                       role: "timer",
@@ -3304,9 +3566,9 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !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(
+                !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,
@@ -3322,14 +3584,14 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsxs4("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
+                !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__ */ jsx5("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
+                  /* @__PURE__ */ jsx6("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
                 ] }),
-                !narrationOn && canSave && playbackUrl && /* @__PURE__ */ jsxs4(
+                !narrationOn && canSave && playbackUrl && /* @__PURE__ */ jsxs5(
                   "div",
                   {
                     style: {
@@ -3339,8 +3601,8 @@ function RecorderModal({
                       marginBottom: 12
                     },
                     children: [
-                      /* @__PURE__ */ jsx5("a", { href: playbackUrl, download: downloadFilename, style: btnSecondary, children: isDual ? "Download screen recording" : "Download recording" }),
-                      isDual && cameraPlaybackUrl && /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx6("a", { href: playbackUrl, download: downloadFilename, style: btnSecondary, children: isDual ? "Download screen recording" : "Download recording" }),
+                      isDual && cameraPlaybackUrl && /* @__PURE__ */ jsx6(
                         "a",
                         {
                           href: cameraPlaybackUrl,
@@ -3354,7 +3616,7 @@ function RecorderModal({
                           children: "Download camera recording"
                         }
                       ),
-                      timingDownloadUrl && /* @__PURE__ */ jsx5(
+                      timingDownloadUrl && /* @__PURE__ */ jsx6(
                         "a",
                         {
                           href: timingDownloadUrl,
@@ -3366,9 +3628,9 @@ function RecorderModal({
                     ]
                   }
                 ),
-                !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(
+                !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",
@@ -3380,8 +3642,8 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx5("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+                /* @__PURE__ */ jsx6(
                   "input",
                   {
                     id: "recorder-basename",
@@ -3393,13 +3655,13 @@ function RecorderModal({
                     disabled: narrationOn ? !narrationRecorderIdle : recorder.state === "recording"
                   }
                 ),
-                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: recordingStatusStyle, children: [
+                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs5("div", { style: recordingStatusStyle, children: [
                   "\u25CF Recording ",
                   formatDurationMs(recorder.durationMs)
                 ] }),
-                showTimingCheckbox && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                  /* @__PURE__ */ jsxs4("label", { style: checkboxRowStyle, children: [
-                    /* @__PURE__ */ jsx5(
+                showTimingCheckbox && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                  /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                    /* @__PURE__ */ jsx6(
                       "input",
                       {
                         type: "checkbox",
@@ -3411,10 +3673,10 @@ function RecorderModal({
                     ),
                     SLIDE_TIMING_CHECKBOX_LABEL
                   ] }),
-                  applySlideTimings && slideCoverageWarning && /* @__PURE__ */ jsx5("p", { style: summaryStyle, children: slideCoverageWarning })
+                  applySlideTimings && slideCoverageWarning && /* @__PURE__ */ jsx6("p", { style: summaryStyle, children: slideCoverageWarning })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { style: buttonRowStyle, children: [
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs5("div", { style: buttonRowStyle, children: [
+                  /* @__PURE__ */ jsx6(
                     "button",
                     {
                       type: "button",
@@ -3424,8 +3686,8 @@ function RecorderModal({
                       children: "Close"
                     }
                   ),
-                  narrationOn && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx5(
+                  narrationOn && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx6(
                       "button",
                       {
                         type: "button",
@@ -3435,14 +3697,14 @@ function RecorderModal({
                         children: narrationRequesting ? "Requesting\u2026" : "Start preview"
                       }
                     ),
-                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs4("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
-                      /* @__PURE__ */ jsx5(
+                    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__ */ jsx5(
+                          children: /* @__PURE__ */ jsx6(
                             "span",
                             {
                               className: "squisq-recorder-record-dot-center",
@@ -3453,7 +3715,7 @@ function RecorderModal({
                       ),
                       "Record"
                     ] }),
-                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx5(
+                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx6(
                       "button",
                       {
                         type: "button",
@@ -3462,11 +3724,11 @@ function RecorderModal({
                         children: "Stop"
                       }
                     ),
-                    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(
+                    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",
@@ -3477,8 +3739,8 @@ function RecorderModal({
                       )
                     ] })
                   ] }),
-                  !narrationOn && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx5(
+                  !narrationOn && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx6(
                       "button",
                       {
                         type: "button",
@@ -3488,14 +3750,14 @@ function RecorderModal({
                         children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
                       }
                     ),
-                    canRecord && /* @__PURE__ */ jsxs4("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
-                      /* @__PURE__ */ jsx5(
+                    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__ */ jsx5(
+                          children: /* @__PURE__ */ jsx6(
                             "span",
                             {
                               className: "squisq-recorder-record-dot-center",
@@ -3506,9 +3768,9 @@ function RecorderModal({
                       ),
                       "Record"
                     ] }),
-                    canStop && /* @__PURE__ */ jsx5("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
-                    canSave && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                      /* @__PURE__ */ jsx5(
+                    canStop && /* @__PURE__ */ jsx6("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
+                    canSave && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                      /* @__PURE__ */ jsx6(
                         "button",
                         {
                           type: "button",
@@ -3518,7 +3780,7 @@ function RecorderModal({
                           children: "Discard & re-record"
                         }
                       ),
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx6(
                         "button",
                         {
                           type: "button",
@@ -3532,7 +3794,7 @@ function RecorderModal({
                   ] })
                 ] })
               ] }),
-              narrationOn && narration && /* @__PURE__ */ jsx5("div", { style: rightColStyle, children: /* @__PURE__ */ jsx5(
+              narrationOn && narration && /* @__PURE__ */ jsx6("div", { style: rightColStyle, children: /* @__PURE__ */ jsx6(
                 NarrationStage,
                 {
                   stage,
@@ -3544,7 +3806,7 @@ function RecorderModal({
                   showReviewActions: false
                 }
               ) }),
-              slidesOn && /* @__PURE__ */ jsx5("div", { style: rightColStyle, children: /* @__PURE__ */ jsx5(
+              slidesOn && /* @__PURE__ */ jsx6("div", { style: rightColStyle, children: /* @__PURE__ */ jsx6(
                 RecorderSlidesPanel,
                 {
                   slides: slideDeck,
@@ -3568,7 +3830,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 +3856,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 +3866,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,