@bendyline/squisq-editor-react 2.11.15 → 2.11.16

package/README.md

@@ -69,7 +69,15 @@ and block-at-a-time / timeline editing primitives (`useBlockNavigator`,
   (`versioningPrunePolicy`, default keep-last-50); a Version History panel
   appears in the toolbar.
 - **Recording** — with a `mediaProvider` wired, a record button appears in the
-  toolbar (`allowRecording`, default `true`). The recorder's Advanced device
+  toolbar (`allowRecording`, default `true`). Screen capture exposes **What to
+  record** above Advanced settings: a surface preference, a screen/window picker
+  action, and whole-surface or coordinate-region capture. Coordinates are pixels
+  relative to the chosen surface's top-left; the live preview and encoded video
+  use the same crop, leaving audio unchanged. Invalid or out-of-bounds regions
+  fail visibly and release capture. Region recording uses a canvas at 30 fps;
+  shrinking a window past the region or stopping screen sharing ends the take.
+  The browser or host still owns the source picker and available surface types.
+  The recorder's Advanced device
   settings expando discovers microphones/cameras, shows only capture
   constraints advertised by the browser, separates camera and screen
   constraints for dual recordings, and exposes MediaRecorder codec, bitrate,

package/dist/{chunk-DN6XFOY2.js → chunk-27WOOJXR.js}

@@ -1,6 +1,6 @@
 import {
   RecorderModal
-} from "./chunk-BJ3TXAIQ.js";
+} from "./chunk-4D7QMRTZ.js";
 
 // src/recorder/RecorderButton.tsx
 import { useCallback, useState } from "react";

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,

package/dist/{chunk-7B46MJNW.js → chunk-5TYCTE33.js}

@@ -41,7 +41,7 @@ import {
   documentTitleFromFileName,
   resolveBlockVisual,
   useModalDialog
-} from "./chunk-BJ3TXAIQ.js";
+} from "./chunk-4D7QMRTZ.js";
 import {
   Icon
 } from "./chunk-GS7QWYFT.js";

package/dist/index.d.ts

@@ -26,9 +26,9 @@ import { FenceRendererMap } from '@bendyline/squisq/fence';
 import { TableViewState } from '@bendyline/squisq/table';
 import { EditJournal } from '@bendyline/squisq-grid-react';
 export { JsonEditor, JsonEditorProps } from './json-editor/index.js';
-export { C as CameraStreamOptions, D as DEFAULT_RECORDER_DEVICE_SETTINGS, M as MediaDeviceInventory, R as RecordedBookmark, a as RecordedMediaKind, b as RecorderAudioDeviceSettings, c as RecorderButton, d as RecorderButtonProps, e as RecorderCameraDeviceSettings, f as RecorderCameraSaveResult, g as RecorderColorScheme, h as RecorderConstraintMode, i as RecorderDeviceOption, j as RecorderDeviceQuickPicks, k as RecorderDeviceQuickPicksProps, l as RecorderDeviceSettings, m as RecorderDeviceSettingsPanel, n as RecorderDeviceSettingsPanelProps, o as RecorderEncodingSettings, p as RecorderModal, q as RecorderModalProps, r as RecorderNarrationOptions, s as RecorderPanel, t as RecorderPanelProps, u as RecorderSaveResult, v as RecorderScreenAudioSettings, w as RecorderScreenDeviceSettings, x as RecorderSlidesOptions, S as ScreenStreamHandle, y as ScreenStreamOptions, z as SlideTimingSaveResult, T as TimingJson, A as buildRecorderAudioConstraints, B as buildRecorderCameraConstraints, E as buildRecorderScreenAudioConstraints, F as buildRecorderScreenConstraints, G as buildTimingJson, H as encodeTimingJson, I as hasRecorderDeviceChoice, J as recordedMediaKind, K as recorderBitsPerSecond, L as recorderDeviceGroups, N as recorderDeviceOptions, O as requestCameraStream, P as requestMicStream, Q as requestScreenStream, U as timingPathFor, V as useMediaDevices, W as useStreamPreview } from './recorder-CC3VW9Z7.js';
-import { R as RecorderState } from './useNarrationStage-D3Sgcf0L.js';
-export { C as CanvasSink, a as CaptureKind, D as DEFAULT_TELEPROMPTER_PREFS, F as FloatOpenOptions, b as FloatTier, c as FloatingWindowHandle, d as FloatingWindowManager, M as MicAnalysisHandle, e as MicAnalysisStatus, N as NarrationRecorderController, f as NarrationRecorderState, g as NarrationStageHandle, h as NarrationTake, P as PrompterTransport, i as RecorderAudioBitrateMode, j as RecorderCameraLane, k as RecorderExtendedMediaOptions, l as RecorderSource, m as ResolvedFormat, T as TeleprompterController, n as TeleprompterPrefs, o as TeleprompterRecordingDeps, U as UseMediaRecorderOptions, p as UseMediaRecorderResult, q as UseNarrationStageOptions, r as buildFilename, s as createFloatingWindowManager, t as detectFloatTiers, u as getCaptureKind, v as resolveFormat, w as supportsDisplayMedia, x as supportsMediaRecorder, y as supportsUserMedia, z as useFloatingWindow, A as useMediaRecorder, B as useMicAnalysis, E as useNarrationRecorder, G as useNarrationStage, H as useTeleprompter, I as vadConfigForSensitivity } from './useNarrationStage-D3Sgcf0L.js';
+export { C as CameraStreamOptions, D as DEFAULT_RECORDER_DEVICE_SETTINGS, M as MediaDeviceInventory, R as RecordedBookmark, a as RecordedMediaKind, b as RecorderAudioDeviceSettings, c as RecorderButton, d as RecorderButtonProps, e as RecorderCameraDeviceSettings, f as RecorderCameraSaveResult, g as RecorderColorScheme, h as RecorderConstraintMode, i as RecorderDeviceOption, j as RecorderDeviceQuickPicks, k as RecorderDeviceQuickPicksProps, l as RecorderDeviceSettings, m as RecorderDeviceSettingsPanel, n as RecorderDeviceSettingsPanelProps, o as RecorderEncodingSettings, p as RecorderModal, q as RecorderModalProps, r as RecorderNarrationOptions, s as RecorderPanel, t as RecorderPanelProps, u as RecorderSaveResult, v as RecorderScreenAudioSettings, w as RecorderScreenDeviceSettings, x as RecorderSlidesOptions, S as ScreenStreamHandle, y as ScreenStreamOptions, z as SlideTimingSaveResult, T as TimingJson, A as buildRecorderAudioConstraints, B as buildRecorderCameraConstraints, E as buildRecorderScreenAudioConstraints, F as buildRecorderScreenConstraints, G as buildTimingJson, H as encodeTimingJson, I as hasRecorderDeviceChoice, J as recordedMediaKind, K as recorderBitsPerSecond, L as recorderDeviceGroups, N as recorderDeviceOptions, O as requestCameraStream, P as requestMicStream, Q as requestScreenStream, U as timingPathFor, V as useMediaDevices, W as useStreamPreview } from './recorder-C6ArYQBa.js';
+import { R as RecorderState } from './useNarrationStage-DopDr_P5.js';
+export { C as CanvasSink, a as CaptureKind, D as DEFAULT_TELEPROMPTER_PREFS, F as FloatOpenOptions, b as FloatTier, c as FloatingWindowHandle, d as FloatingWindowManager, M as MicAnalysisHandle, e as MicAnalysisStatus, N as NarrationRecorderController, f as NarrationRecorderState, g as NarrationStageHandle, h as NarrationTake, P as PrompterTransport, i as RecorderAudioBitrateMode, j as RecorderCameraLane, k as RecorderExtendedMediaOptions, l as RecorderSource, m as ResolvedFormat, T as TeleprompterController, n as TeleprompterPrefs, o as TeleprompterRecordingDeps, U as UseMediaRecorderOptions, p as UseMediaRecorderResult, q as UseNarrationStageOptions, r as buildFilename, s as createFloatingWindowManager, t as detectFloatTiers, u as getCaptureKind, v as resolveFormat, w as supportsDisplayMedia, x as supportsMediaRecorder, y as supportsUserMedia, z as useFloatingWindow, A as useMediaRecorder, B as useMicAnalysis, E as useNarrationRecorder, G as useNarrationStage, H as useTeleprompter, I as vadConfigForSensitivity } from './useNarrationStage-DopDr_P5.js';
 export { EYE_LINE_FRACTION, NarrationSavePlan, NarrationSaveResult, NarrationStage, NarrationStageProps, PCM_WORKLET_NAME, PCM_WORKLET_SOURCE, TELEPROMPTER_CSS, TeleprompterControls, TeleprompterControlsProps, TeleprompterSurface, TeleprompterSurfaceProps, TeleprompterView, TeleprompterViewProps, TokenLineMap, buildNarrationSavePlan, cameraVideoLine, ensureTeleprompterStyles, executeNarrationSave, insertNarrationPreamble, measureTokenLines, narrationAnnotationLine, prompterVarsFromTheme, registerPcmWorklet, stepScroll, targetOffsetFor } from './teleprompter/index.js';
 export { H as HarperProofingConfig, a as ProofingCapability, b as ProofingDocumentRef, c as ProofingIgnoreStore, d as ProofingLanguage, e as ProofingLintOptions, P as ProofingProvider, f as ProofingProviderFactory } from './types-De4z-gGb.js';
 export { createHarperProofingProvider } from './proofing/index.js';

package/dist/index.js

@@ -219,7 +219,7 @@ import {
   useTreeViewData,
   viewStateFromBinding,
   writeHeadingViewState
-} from "./chunk-7B46MJNW.js";
+} from "./chunk-5TYCTE33.js";
 import {
   EditorProvider,
   detectLanguageFromFileName,
@@ -252,7 +252,7 @@ import {
 } from "./chunk-K4Z2GIX4.js";
 import {
   RecorderButton
-} from "./chunk-DN6XFOY2.js";
+} from "./chunk-27WOOJXR.js";
 import {
   DEFAULT_RECORDER_DEVICE_SETTINGS,
   RecorderDeviceQuickPicks,
@@ -283,7 +283,7 @@ import {
   unshownSlidesWarning,
   useMediaDevices,
   useMediaRecorder
-} from "./chunk-BJ3TXAIQ.js";
+} from "./chunk-4D7QMRTZ.js";
 import "./chunk-GS7QWYFT.js";
 import {
   TeleprompterView

package/dist/recorder/index.d.ts

@@ -1,5 +1,5 @@
-export { C as CameraStreamOptions, D as DEFAULT_RECORDER_DEVICE_SETTINGS, M as MediaDeviceInventory, R as RecordedBookmark, a as RecordedMediaKind, b as RecorderAudioDeviceSettings, c as RecorderButton, d as RecorderButtonProps, e as RecorderCameraDeviceSettings, f as RecorderCameraSaveResult, g as RecorderColorScheme, h as RecorderConstraintMode, i as RecorderDeviceOption, j as RecorderDeviceQuickPicks, k as RecorderDeviceQuickPicksProps, l as RecorderDeviceSettings, m as RecorderDeviceSettingsPanel, n as RecorderDeviceSettingsPanelProps, o as RecorderEncodingSettings, p as RecorderModal, q as RecorderModalProps, s as RecorderPanel, t as RecorderPanelProps, u as RecorderSaveResult, v as RecorderScreenAudioSettings, w as RecorderScreenDeviceSettings, S as ScreenStreamHandle, y as ScreenStreamOptions, T as TimingJson, A as buildRecorderAudioConstraints, B as buildRecorderCameraConstraints, E as buildRecorderScreenAudioConstraints, F as buildRecorderScreenConstraints, G as buildTimingJson, H as encodeTimingJson, I as hasRecorderDeviceChoice, J as recordedMediaKind, K as recorderBitsPerSecond, L as recorderDeviceGroups, N as recorderDeviceOptions, O as requestCameraStream, P as requestMicStream, Q as requestScreenStream, U as timingPathFor, V as useMediaDevices, W as useStreamPreview } from '../recorder-CC3VW9Z7.js';
-export { a as CaptureKind, i as RecorderAudioBitrateMode, j as RecorderCameraLane, k as RecorderExtendedMediaOptions, l as RecorderSource, R as RecorderState, m as ResolvedFormat, U as UseMediaRecorderOptions, p as UseMediaRecorderResult, r as buildFilename, u as getCaptureKind, v as resolveFormat, w as supportsDisplayMedia, x as supportsMediaRecorder, y as supportsUserMedia, A as useMediaRecorder } from '../useNarrationStage-D3Sgcf0L.js';
+export { C as CameraStreamOptions, D as DEFAULT_RECORDER_DEVICE_SETTINGS, M as MediaDeviceInventory, R as RecordedBookmark, a as RecordedMediaKind, b as RecorderAudioDeviceSettings, c as RecorderButton, d as RecorderButtonProps, e as RecorderCameraDeviceSettings, f as RecorderCameraSaveResult, g as RecorderColorScheme, h as RecorderConstraintMode, i as RecorderDeviceOption, j as RecorderDeviceQuickPicks, k as RecorderDeviceQuickPicksProps, l as RecorderDeviceSettings, m as RecorderDeviceSettingsPanel, n as RecorderDeviceSettingsPanelProps, o as RecorderEncodingSettings, p as RecorderModal, q as RecorderModalProps, s as RecorderPanel, t as RecorderPanelProps, u as RecorderSaveResult, v as RecorderScreenAudioSettings, w as RecorderScreenDeviceSettings, S as ScreenStreamHandle, y as ScreenStreamOptions, T as TimingJson, A as buildRecorderAudioConstraints, B as buildRecorderCameraConstraints, E as buildRecorderScreenAudioConstraints, F as buildRecorderScreenConstraints, G as buildTimingJson, H as encodeTimingJson, I as hasRecorderDeviceChoice, J as recordedMediaKind, K as recorderBitsPerSecond, L as recorderDeviceGroups, N as recorderDeviceOptions, O as requestCameraStream, P as requestMicStream, Q as requestScreenStream, U as timingPathFor, V as useMediaDevices, W as useStreamPreview } from '../recorder-C6ArYQBa.js';
+export { a as CaptureKind, i as RecorderAudioBitrateMode, j as RecorderCameraLane, k as RecorderExtendedMediaOptions, l as RecorderSource, R as RecorderState, m as ResolvedFormat, U as UseMediaRecorderOptions, p as UseMediaRecorderResult, r as buildFilename, u as getCaptureKind, v as resolveFormat, w as supportsDisplayMedia, x as supportsMediaRecorder, y as supportsUserMedia, A as useMediaRecorder } from '../useNarrationStage-DopDr_P5.js';
 import 'react/jsx-runtime';
 import '@bendyline/squisq/schemas';
 import '@bendyline/squisq/storage';

package/dist/recorder/index.js

@@ -1,6 +1,6 @@
 import {
   RecorderButton
-} from "../chunk-DN6XFOY2.js";
+} from "../chunk-27WOOJXR.js";
 import {
   DEFAULT_RECORDER_DEVICE_SETTINGS,
   RecorderDeviceQuickPicks,
@@ -20,7 +20,7 @@ import {
   requestScreenStream,
   useMediaDevices,
   useMediaRecorder
-} from "../chunk-BJ3TXAIQ.js";
+} from "../chunk-4D7QMRTZ.js";
 import "../chunk-GS7QWYFT.js";
 import {
   buildFilename,

package/dist/{recorder-CC3VW9Z7.d.ts → recorder-C6ArYQBa.d.ts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Doc, Theme, ViewportConfig, MediaProvider } from '@bendyline/squisq/schemas';
 import { ContentContainer } from '@bendyline/squisq/storage';
-import { l as RecorderSource, o as TeleprompterRecordingDeps } from './useNarrationStage-D3Sgcf0L.js';
+import { l as RecorderSource, o as TeleprompterRecordingDeps, S as ScreenCaptureRegion } from './useNarrationStage-DopDr_P5.js';
 import { CSSProperties, RefObject } from 'react';
 
 type RecordedMediaKind = 'audio' | 'video';
@@ -225,6 +225,7 @@ declare function RecorderPanel({ mediaProvider, container, initialMode, colorSch
  * capture is the exception: the screen-capture standard rejects exact
  * constraints during its user picker, so those values always remain ideal.
  */
+
 type RecorderConstraintMode = 'ideal' | 'exact';
 interface RecorderAudioDeviceSettings {
     deviceId: string;
@@ -249,6 +250,8 @@ interface RecorderCameraDeviceSettings {
     width?: number;
 }
 interface RecorderScreenDeviceSettings {
+    /** Crop in captured pixels, relative to the chosen surface (not the desktop). */
+    crop?: ScreenCaptureRegion;
     aspectRatio?: number;
     cursor?: string;
     displaySurface?: string;
@@ -476,7 +479,9 @@ declare function requestCameraStream(options?: CameraStreamOptions): Promise<Med
  * `AudioContext`, so the resulting `MediaStream` carries a single audio
  * track and a single video track.
  */
+
 interface ScreenStreamOptions {
+    crop?: ScreenCaptureRegion;
     /** Video constraints for the screen surface. Pass `true` for browser default. */
     video?: boolean | MediaTrackConstraints;
     /**

package/dist/shell/index.js

@@ -5,7 +5,7 @@ import {
   RawEditor,
   WysiwygEditor,
   useEditorContextMenuItems
-} from "../chunk-7B46MJNW.js";
+} from "../chunk-5TYCTE33.js";
 import {
   EditorProvider,
   useEditorContext
@@ -14,7 +14,7 @@ import "../chunk-V4NBQF5C.js";
 import "../chunk-ZDWZRVAY.js";
 import "../chunk-EN5BYZOE.js";
 import "../chunk-K4Z2GIX4.js";
-import "../chunk-BJ3TXAIQ.js";
+import "../chunk-4D7QMRTZ.js";
 import "../chunk-GS7QWYFT.js";
 import "../chunk-ENDRPV6T.js";
 import "../chunk-34FRFDQ6.js";

package/dist/teleprompter/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Doc, Theme, MediaProvider } from '@bendyline/squisq/schemas';
 import { ContentContainer } from '@bendyline/squisq/storage';
-import { o as TeleprompterRecordingDeps, g as NarrationStageHandle, T as TeleprompterController, c as FloatingWindowHandle } from '../useNarrationStage-D3Sgcf0L.js';
-export { C as CanvasSink, D as DEFAULT_TELEPROMPTER_PREFS, F as FloatOpenOptions, b as FloatTier, d as FloatingWindowManager, M as MicAnalysisHandle, e as MicAnalysisStatus, N as NarrationRecorderController, f as NarrationRecorderState, h as NarrationTake, P as PrompterTransport, J as TELEPROMPTER_PREF_LIMITS, n as TeleprompterPrefs, q as UseNarrationStageOptions, s as createFloatingWindowManager, t as detectFloatTiers, K as normalizeTeleprompterPrefs, z as useFloatingWindow, B as useMicAnalysis, E as useNarrationRecorder, G as useNarrationStage, H as useTeleprompter, I as vadConfigForSensitivity } from '../useNarrationStage-D3Sgcf0L.js';
+import { o as TeleprompterRecordingDeps, g as NarrationStageHandle, T as TeleprompterController, c as FloatingWindowHandle } from '../useNarrationStage-DopDr_P5.js';
+export { C as CanvasSink, D as DEFAULT_TELEPROMPTER_PREFS, F as FloatOpenOptions, b as FloatTier, d as FloatingWindowManager, M as MicAnalysisHandle, e as MicAnalysisStatus, N as NarrationRecorderController, f as NarrationRecorderState, h as NarrationTake, P as PrompterTransport, J as TELEPROMPTER_PREF_LIMITS, n as TeleprompterPrefs, q as UseNarrationStageOptions, s as createFloatingWindowManager, t as detectFloatTiers, K as normalizeTeleprompterPrefs, z as useFloatingWindow, B as useMicAnalysis, E as useNarrationRecorder, G as useNarrationStage, H as useTeleprompter, I as vadConfigForSensitivity } from '../useNarrationStage-DopDr_P5.js';
 import { NarrationTimingJsonV3, NarrationScript, NarrationAlignment } from '@bendyline/squisq/narration';
 import { ReactNode } from 'react';
 

package/dist/{useNarrationStage-D3Sgcf0L.d.ts → useNarrationStage-DopDr_P5.d.ts}

@@ -57,6 +57,13 @@ declare function supportsDisplayMedia(): boolean;
 type RecordingFilenameSeed = 'audio' | 'camera' | 'camera-audio' | 'screen' | 'screen-audio';
 declare function buildFilename(kind: CaptureKind, extension: string, basename?: string, seed?: RecordingFilenameSeed): string;
 
+interface ScreenCaptureRegion {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
 /**
  * useMediaRecorder
  *
@@ -110,6 +117,8 @@ interface RecorderCameraLane {
     extension: string | null;
 }
 interface UseMediaRecorderOptions {
+    /** Optional crop applied to the screen lane before preview and encoding. */
+    screenRegion?: ScreenCaptureRegion;
     /**
      * Combined byte threshold for automatically stopping every capture lane.
      * Defaults to 90 MiB. Browser chunk delivery can be delayed, so the final
@@ -586,4 +595,4 @@ interface NarrationStageHandle {
 }
 declare function useNarrationStage(opts: UseNarrationStageOptions): NarrationStageHandle;
 
-export { useMediaRecorder as A, useMicAnalysis as B, type CanvasSink as C, DEFAULT_TELEPROMPTER_PREFS as D, useNarrationRecorder as E, type FloatOpenOptions as F, useNarrationStage as G, useTeleprompter as H, vadConfigForSensitivity as I, TELEPROMPTER_PREF_LIMITS as J, normalizeTeleprompterPrefs as K, type MicAnalysisHandle as M, type NarrationRecorderController as N, type PrompterTransport as P, type RecorderState as R, type TeleprompterController as T, type UseMediaRecorderOptions as U, type CaptureKind as a, type FloatTier as b, type FloatingWindowHandle as c, type FloatingWindowManager as d, type MicAnalysisStatus as e, type NarrationRecorderState as f, type NarrationStageHandle as g, type NarrationTake as h, type RecorderAudioBitrateMode as i, type RecorderCameraLane as j, type RecorderExtendedMediaOptions as k, type RecorderSource as l, type ResolvedFormat as m, type TeleprompterPrefs as n, type TeleprompterRecordingDeps as o, type UseMediaRecorderResult as p, type UseNarrationStageOptions as q, buildFilename as r, createFloatingWindowManager as s, detectFloatTiers as t, getCaptureKind as u, resolveFormat as v, supportsDisplayMedia as w, supportsMediaRecorder as x, supportsUserMedia as y, useFloatingWindow as z };
+export { useMediaRecorder as A, useMicAnalysis as B, type CanvasSink as C, DEFAULT_TELEPROMPTER_PREFS as D, useNarrationRecorder as E, type FloatOpenOptions as F, useNarrationStage as G, useTeleprompter as H, vadConfigForSensitivity as I, TELEPROMPTER_PREF_LIMITS as J, normalizeTeleprompterPrefs as K, type MicAnalysisHandle as M, type NarrationRecorderController as N, type PrompterTransport as P, type RecorderState as R, type ScreenCaptureRegion as S, type TeleprompterController as T, type UseMediaRecorderOptions as U, type CaptureKind as a, type FloatTier as b, type FloatingWindowHandle as c, type FloatingWindowManager as d, type MicAnalysisStatus as e, type NarrationRecorderState as f, type NarrationStageHandle as g, type NarrationTake as h, type RecorderAudioBitrateMode as i, type RecorderCameraLane as j, type RecorderExtendedMediaOptions as k, type RecorderSource as l, type ResolvedFormat as m, type TeleprompterPrefs as n, type TeleprompterRecordingDeps as o, type UseMediaRecorderResult as p, type UseNarrationStageOptions as q, buildFilename as r, createFloatingWindowManager as s, detectFloatTiers as t, getCaptureKind as u, resolveFormat as v, supportsDisplayMedia as w, supportsMediaRecorder as x, supportsUserMedia as y, useFloatingWindow as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.11.15",
+  "version": "2.11.16",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -98,12 +98,12 @@
     }
   },
   "dependencies": {
-    "@bendyline/squisq": "2.11.12",
+    "@bendyline/squisq": "2.11.13",
     "@bendyline/squisq-calc": "2.11.1",
-    "@bendyline/squisq-formats": "2.6.12",
-    "@bendyline/squisq-grid-react": "2.11.13",
-    "@bendyline/squisq-react": "2.11.14",
-    "@bendyline/squisq-video-react": "2.4.18",
+    "@bendyline/squisq-formats": "2.6.13",
+    "@bendyline/squisq-grid-react": "2.11.14",
+    "@bendyline/squisq-react": "2.11.15",
+    "@bendyline/squisq-video-react": "2.4.19",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@tiptap/core": "2.27.3",
     "@tiptap/extension-heading": "2.27.3",