@bendyline/squisq-editor-react 2.11.2 → 2.11.4

package/dist/{chunk-PMNNJYFD.js → chunk-34FRFDQ6.js}

@@ -1344,6 +1344,17 @@ import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef4
 import {
   alignNarration
 } from "@bendyline/squisq/narration";
+
+// src/recorder/recordingLimits.ts
+var DEFAULT_MAX_RECORDING_BYTES = 900 * 1024 * 1024;
+function resolveMaxRecordingBytes(value) {
+  return value !== void 0 && Number.isSafeInteger(value) && value > 0 ? value : DEFAULT_MAX_RECORDING_BYTES;
+}
+function formatRecordingBytes(bytes) {
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MiB`;
+}
+
+// src/teleprompter/recording/useNarrationRecorder.ts
 var TRACE_INTERVAL_MS = 250;
 function mixdownToMono(buffer) {
   const channels = buffer.numberOfChannels;
@@ -1377,6 +1388,11 @@ function stopRecorder(recorder) {
 function useNarrationRecorder(options) {
   const [state, setState] = useState4("idle");
   const [error, setError] = useState4(null);
+  const [recordedBytes, setRecordedBytes] = useState4(0);
+  const [limitReached, setLimitReached] = useState4(false);
+  const maxRecordingBytes = resolveMaxRecordingBytes(options.maxRecordingBytes);
+  const stopRef = useRef4(async () => {
+  });
   const [withCamera, setWithCamera] = useState4(false);
   const [cameraStream, setCameraStream] = useState4(null);
   const [take, setTake] = useState4(null);
@@ -1423,8 +1439,11 @@ function useNarrationRecorder(options) {
     const superseded = () => generationRef.current !== generation;
     startingRef.current = true;
     setError(null);
+    setRecordedBytes(0);
+    setLimitReached(false);
     applyTake(null);
     setState("starting");
+    const recordingByteLimit = resolveMaxRecordingBytes(opts.maxRecordingBytes);
     let camera = null;
     let audioRecorder = null;
     let cameraRecorder = null;
@@ -1493,17 +1512,30 @@ function useNarrationRecorder(options) {
         traceTimer: null,
         startedAtMs: performance.now(),
         audioStartMs: null,
-        cameraStartMs: null
+        cameraStartMs: null,
+        recordedBytes: 0,
+        limitReached: false
+      };
+      const retainChunk = (chunks, chunk) => {
+        if (chunk.size === 0 || superseded()) return;
+        chunks.push(chunk);
+        capture.recordedBytes += chunk.size;
+        setRecordedBytes(capture.recordedBytes);
+        if (!capture.limitReached && capture.recordedBytes >= recordingByteLimit) {
+          capture.limitReached = true;
+          setLimitReached(true);
+          if (captureRef.current === capture) void stopRef.current();
+        }
       };
       audioRecorder.ondataavailable = (e) => {
-        if (e.data.size > 0) capture.audioChunks.push(e.data);
+        retainChunk(capture.audioChunks, e.data);
       };
       audioRecorder.onstart = () => {
         capture.audioStartMs = performance.now();
       };
       if (cameraRecorder) {
         cameraRecorder.ondataavailable = (e) => {
-          if (e.data.size > 0) capture.cameraChunks.push(e.data);
+          retainChunk(capture.cameraChunks, e.data);
         };
         cameraRecorder.onstart = () => {
           capture.cameraStartMs = performance.now();
@@ -1552,8 +1584,10 @@ function useNarrationRecorder(options) {
     optionsRef.current.onRecordingStop?.();
     processingRef.current = true;
     setState("processing");
-    await stopRecorder(capture.audioRecorder);
-    if (capture.cameraRecorder) await stopRecorder(capture.cameraRecorder);
+    await Promise.all([
+      stopRecorder(capture.audioRecorder),
+      ...capture.cameraRecorder ? [stopRecorder(capture.cameraRecorder)] : []
+    ]);
     for (const track of capture.cameraStream?.getTracks() ?? []) track.stop();
     setCameraStream(null);
     const audioMime = capture.audioRecorder.mimeType || capture.audioMime;
@@ -1613,16 +1647,21 @@ function useNarrationRecorder(options) {
     });
     setState("review");
   }, [applyTake, cancelPendingStart]);
+  stopRef.current = stop;
   const retake = useCallback4(() => {
     teardownCapture();
     applyTake(null);
     setError(null);
+    setRecordedBytes(0);
+    setLimitReached(false);
     setState("idle");
   }, [applyTake, teardownCapture]);
   const discard = useCallback4(() => {
     teardownCapture();
     applyTake(null);
     setError(null);
+    setRecordedBytes(0);
+    setLimitReached(false);
     setState("idle");
   }, [applyTake, teardownCapture]);
   const beginSave = useCallback4(() => setState("saving"), []);
@@ -1631,6 +1670,8 @@ function useNarrationRecorder(options) {
       if (ok) {
         applyTake(null);
         setError(null);
+        setRecordedBytes(0);
+        setLimitReached(false);
         setState("idle");
       } else {
         setError(saveError ?? new Error("Save failed"));
@@ -1658,6 +1699,9 @@ function useNarrationRecorder(options) {
   return {
     state,
     error,
+    recordedBytes,
+    maxRecordingBytes,
+    limitReached,
     withCamera,
     setWithCamera,
     cameraStream,
@@ -1818,6 +1862,7 @@ function useNarrationStage(opts) {
     getWordPos: () => controllerRef.current.wordPos,
     getMicDeviceId: () => controllerRef.current.prefs.micDeviceId,
     cameraConstraints: opts.cameraConstraints,
+    maxRecordingBytes: opts.maxRecordingBytes,
     audioRecorderOptions: opts.audioRecorderOptions,
     cameraRecorderOptions: opts.cameraRecorderOptions,
     onRecordingStart: () => controllerRef.current.play(),
@@ -2379,7 +2424,7 @@ function TeleprompterControls({
 }
 
 // src/teleprompter/NarrationStage.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef8, useState as useState6 } from "react";
 import { createPortal } from "react-dom";
 
 // src/teleprompter/TeleprompterSelfView.tsx
@@ -2517,6 +2562,47 @@ function drawPrompterFrame(canvas, frame) {
 
 // src/teleprompter/NarrationStage.tsx
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function NarrationTakeBackups({ take, baseWpm }) {
+  const [downloads, setDownloads] = useState6(
+    []
+  );
+  useEffect8(() => {
+    const timing = buildNarrationSavePlan({
+      script: take.script,
+      alignment: take.alignment,
+      durationSec: take.durationSec,
+      audioExt: take.audioExt,
+      cameraExt: take.cameraExt,
+      cameraOffsetSec: take.cameraOffsetSec,
+      baseWpm
+    }).sidecarPayload;
+    const assets = [
+      {
+        label: "Download audio backup",
+        blob: take.audioBlob,
+        filename: "narration" + take.audioExt
+      },
+      ...take.cameraBlob ? [
+        {
+          label: "Download camera backup",
+          blob: take.cameraBlob,
+          filename: "narration-camera" + (take.cameraExt ?? ".webm")
+        }
+      ] : [],
+      {
+        label: "Download timing backup",
+        blob: new Blob([JSON.stringify(timing, null, 2)], { type: "application/json" }),
+        filename: "narration" + take.audioExt + ".timing.json"
+      }
+    ];
+    const next = assets.map(({ blob, ...asset }) => ({ ...asset, url: URL.createObjectURL(blob) }));
+    setDownloads(next);
+    return () => {
+      for (const download of next) URL.revokeObjectURL(download.url);
+    };
+  }, [take, baseWpm]);
+  return downloads.map(({ label, url, filename }) => /* @__PURE__ */ jsx4("a", { href: url, download: filename, children: label }, label));
+}
 function NarrationStage(props) {
   const {
     stage,
@@ -2632,32 +2718,45 @@ function NarrationStage(props) {
   const script = controller.script;
   const portalOpen = float.portalTarget !== null;
   const busyRecording = recorder.state === "recording" || recorder.state === "starting";
-  const recordSlot = recording && showRecordSlot ? /* @__PURE__ */ jsx4("span", { className: "squisq-teleprompter-group", "data-testid": "teleprompter-record", children: recorder.state === "idle" || recorder.state === "error" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        onClick: () => void recorder.start(),
-        title: "Record narration while you read",
-        children: "\u23FA Record"
-      }
-    ),
-    showCameraToggleInRecordSlot ? /* @__PURE__ */ jsxs3("label", { title: "Also capture your camera as a separate video file", children: [
+  const recordSlot = recording && showRecordSlot ? /* @__PURE__ */ jsxs3("span", { className: "squisq-teleprompter-group", "data-testid": "teleprompter-record", children: [
+    /* @__PURE__ */ jsxs3("span", { children: [
+      "Auto-stops at ",
+      formatRecordingBytes(recorder.maxRecordingBytes),
+      "."
+    ] }),
+    recorder.state === "idle" || recorder.state === "error" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
       /* @__PURE__ */ jsx4(
-        "input",
+        "button",
         {
-          type: "checkbox",
-          checked: recorder.withCamera,
-          onChange: (e) => recorder.setWithCamera(e.target.checked)
+          type: "button",
+          onClick: () => void recorder.start(),
+          title: "Record narration while you read",
+          children: "\u23FA Record"
         }
       ),
-      "camera"
-    ] }) : null,
-    recorder.state === "error" ? /* @__PURE__ */ jsxs3("span", { title: recorder.error?.message, children: [
-      "\u26A0 ",
-      recorder.error?.message
-    ] }) : null
-  ] }) : busyRecording ? /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void recorder.stop(), children: "\u23F9 Stop" }) : recorder.state === "processing" ? /* @__PURE__ */ jsx4("span", { children: "Aligning take\u2026" }) : recorder.state === "saving" ? /* @__PURE__ */ jsx4("span", { children: "Saving\u2026" }) : null }) : null;
+      showCameraToggleInRecordSlot ? /* @__PURE__ */ jsxs3("label", { title: "Also capture your camera as a separate video file", children: [
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "checkbox",
+            checked: recorder.withCamera,
+            onChange: (e) => recorder.setWithCamera(e.target.checked)
+          }
+        ),
+        "camera"
+      ] }) : null,
+      recorder.state === "error" ? /* @__PURE__ */ jsxs3("span", { title: recorder.error?.message, children: [
+        "\u26A0 ",
+        recorder.error?.message
+      ] }) : null
+    ] }) : busyRecording ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsxs3("span", { children: [
+        formatRecordingBytes(recorder.recordedBytes),
+        " recorded"
+      ] }),
+      /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void recorder.stop(), children: "\u23F9 Stop" })
+    ] }) : recorder.state === "processing" ? /* @__PURE__ */ jsx4("span", { children: "Aligning take\u2026" }) : recorder.state === "saving" ? /* @__PURE__ */ jsx4("span", { children: "Saving\u2026" }) : null
+  ] }) : null;
   return /* @__PURE__ */ jsxs3("div", { ref: rootRef, className: "squisq-teleprompter-root", "data-testid": "teleprompter-view", children: [
     /* @__PURE__ */ jsxs3("div", { className: "squisq-teleprompter-stage", children: [
       portalOpen ? /* @__PURE__ */ jsxs3("div", { className: "squisq-teleprompter-float-note", children: [
@@ -2689,6 +2788,11 @@ function NarrationStage(props) {
       ) : null,
       showSelfView ? /* @__PURE__ */ jsx4(TeleprompterSelfView, { stream: recorder.cameraStream }) : null
     ] }),
+    recorder.limitReached ? /* @__PURE__ */ jsxs3("div", { className: "squisq-teleprompter-review", role: "status", children: [
+      "Recording stopped at the ",
+      formatRecordingBytes(recorder.maxRecordingBytes),
+      " size limit. The complete take is retained; save it or download a backup before leaving."
+    ] }) : null,
     recorder.state === "review" && recorder.take ? /* @__PURE__ */ jsxs3("div", { className: "squisq-teleprompter-review", "data-testid": "teleprompter-review", children: [
       /* @__PURE__ */ jsxs3("span", { children: [
         "Take: ",
@@ -2704,14 +2808,16 @@ function NarrationStage(props) {
           onTimeUpdate: stage.handleReviewTimeUpdate
         }
       ) : null,
+      /* @__PURE__ */ jsx4(NarrationTakeBackups, { take: recorder.take, baseWpm: controller.prefs.baseWpm }),
       showReviewActions ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
         /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void stage.handleSave(), children: "\u2713 Save narration" }),
         /* @__PURE__ */ jsx4("button", { type: "button", onClick: stage.handleRetake, children: "\u21BA Retake" }),
         /* @__PURE__ */ jsx4("button", { type: "button", onClick: stage.handleDiscard, children: "\u2715 Discard" })
       ] }) : null,
-      recorder.error ? /* @__PURE__ */ jsxs3("span", { children: [
+      recorder.error ? /* @__PURE__ */ jsxs3("span", { role: "alert", children: [
         "\u26A0 ",
-        recorder.error.message
+        recorder.error.message,
+        " Your take is still available. Download a backup before leaving."
       ] }) : null
     ] }) : null,
     stage.saveNotice ? /* @__PURE__ */ jsxs3("div", { className: "squisq-teleprompter-review", "data-testid": "teleprompter-save-notice", children: [
@@ -2731,6 +2837,8 @@ function NarrationStage(props) {
 }
 
 export {
+  resolveMaxRecordingBytes,
+  formatRecordingBytes,
   resolveFormat,
   supportsMediaRecorder,
   supportsUserMedia,

package/dist/{chunk-7RRYZULY.js → chunk-BJ3TXAIQ.js}

@@ -7,9 +7,11 @@ import {
   buildTimingJson,
   encodeNarrationTimingJson,
   encodeTimingJson,
+  formatRecordingBytes,
   requestCameraStream,
   requestMicStream,
   resolveFormat,
+  resolveMaxRecordingBytes,
   supportsDisplayMedia,
   supportsMediaRecorder,
   supportsSystemAudioCapture,
@@ -17,7 +19,7 @@ import {
   timingPathFor,
   useNarrationStage,
   useStreamPreview
-} from "./chunk-PMNNJYFD.js";
+} from "./chunk-34FRFDQ6.js";
 
 // src/recorder/sources/screenStream.ts
 function mixAudioTracks(streams) {
@@ -245,6 +247,9 @@ function getCaptureKind(source) {
 }
 function useMediaRecorder(options = {}) {
   const [state, setState] = useState("idle");
+  const [recordedBytes, setRecordedBytes] = useState(0);
+  const [limitReached, setLimitReached] = useState(false);
+  const recordedBytesRef = useRef(0);
   const [stream, setStream] = useState(null);
   const [blob, setBlob] = useState(null);
   const [format, setFormat] = useState(null);
@@ -320,7 +325,23 @@ function useMediaRecorder(options = {}) {
     setCamera(null);
     setCameraOffsetSec(null);
   }, []);
+  const resetByteCount = useCallback(() => {
+    recordedBytesRef.current = 0;
+    setRecordedBytes(0);
+    setLimitReached(false);
+  }, []);
+  const recordChunk = useCallback((data, chunks) => {
+    if (data.size === 0) return;
+    chunks.push(data);
+    recordedBytesRef.current += data.size;
+    setRecordedBytes(recordedBytesRef.current);
+    if (stateRef.current === "recording" && recordedBytesRef.current >= resolveMaxRecordingBytes(optionsRef.current.maxRecordingBytes)) {
+      setLimitReached(true);
+      void stopFnRef.current?.();
+    }
+  }, []);
   const reset = useCallback(() => {
+    resetByteCount();
     setBlob(null);
     setDurationMs(0);
     setError(null);
@@ -336,8 +357,9 @@ function useMediaRecorder(options = {}) {
     } else {
       cancelFnRef.current?.();
     }
-  }, [clearTicker, transition]);
+  }, [clearTicker, resetByteCount, transition]);
   const cancel = useCallback(() => {
+    resetByteCount();
     lifecycleRef.current += 1;
     const rec = recorderRef.current;
     if (rec && rec.state !== "inactive") {
@@ -363,7 +385,7 @@ function useMediaRecorder(options = {}) {
     setDurationMs(0);
     setError(null);
     transition("idle");
-  }, [clearTicker, releaseStream, releaseSecondary, transition]);
+  }, [clearTicker, releaseStream, releaseSecondary, resetByteCount, transition]);
   const request = useCallback(async () => {
     if (requestPromiseRef.current) return requestPromiseRef.current;
     if (recorderRef.current?.stream.active) return;
@@ -471,7 +493,8 @@ function useMediaRecorder(options = {}) {
             stopPromiseRef.current = null;
           };
           primary.ondataavailable = (e) => {
-            if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
+            if (lifecycle !== lifecycleRef.current || recorderRef.current !== primary) return;
+            if (e.data) recordChunk(e.data, chunksRef.current);
           };
           primary.onstart = () => {
             primaryStartMsRef.current = performance.now();
@@ -479,7 +502,9 @@ function useMediaRecorder(options = {}) {
           primary.onstop = () => laneStopped(primary);
           primary.onerror = (e) => laneError(primary, e);
           secondary.ondataavailable = (e) => {
-            if (e.data && e.data.size > 0) secondaryRef.current?.chunks.push(e.data);
+            const lane = secondaryRef.current;
+            if (lifecycle !== lifecycleRef.current || lane?.recorder !== secondary) return;
+            if (e.data) recordChunk(e.data, lane.chunks);
           };
           secondary.onstart = () => {
             secondaryStartMsRef.current = performance.now();
@@ -526,7 +551,8 @@ function useMediaRecorder(options = {}) {
         }
         const recorder = new MediaRecorder(nextStream, recorderOptions);
         recorder.ondataavailable = (e) => {
-          if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
+          if (lifecycle !== lifecycleRef.current || recorderRef.current !== recorder) return;
+          if (e.data) recordChunk(e.data, chunksRef.current);
         };
         recorder.onstop = () => {
           if (recorderRef.current !== recorder || lifecycle !== lifecycleRef.current) return;
@@ -585,7 +611,7 @@ function useMediaRecorder(options = {}) {
     })();
     requestPromiseRef.current = requestPromise;
     return requestPromise;
-  }, [clearTicker, deactivateCapture, transition]);
+  }, [clearTicker, deactivateCapture, recordChunk, transition]);
   const start = useCallback(() => {
     const rec = recorderRef.current;
     if (!rec) {
@@ -595,6 +621,7 @@ function useMediaRecorder(options = {}) {
       return;
     }
     if (rec.state === "recording") return;
+    resetByteCount();
     chunksRef.current = [];
     if (secondaryRef.current) secondaryRef.current.chunks = [];
     setBlob(null);
@@ -634,7 +661,7 @@ function useMediaRecorder(options = {}) {
         setDurationMs(Date.now() - startTimestampRef.current);
       }
     }, 100);
-  }, [clearTicker, deactivateCapture, transition]);
+  }, [clearTicker, deactivateCapture, resetByteCount, transition]);
   const getElapsedMs = useCallback(() => {
     if (stateRef.current !== "recording") return null;
     const startedAt = startTimestampRef.current;
@@ -647,6 +674,10 @@ function useMediaRecorder(options = {}) {
       return Promise.resolve(blob);
     }
     transition("stopping");
+    clearTicker();
+    if (startTimestampRef.current !== null) {
+      setDurationMs(Math.max(0, Date.now() - startTimestampRef.current));
+    }
     const secondary = secondaryRef.current;
     const secondaryActive = secondary != null && secondary.recorder.state !== "inactive";
     pendingLanesRef.current = secondaryActive ? 2 : 1;
@@ -706,6 +737,9 @@ function useMediaRecorder(options = {}) {
     };
   }, [releaseStream, releaseSecondary, clearTicker]);
   return {
+    recordedBytes,
+    maxRecordingBytes: resolveMaxRecordingBytes(options.maxRecordingBytes),
+    limitReached,
     state,
     stream,
     blob,
@@ -2397,7 +2431,8 @@ function RecorderModal({
   onSave,
   narration = null,
   slides = null,
-  title = "Record media"
+  title = "Record media",
+  maxRecordingBytes
 }) {
   const initialToggles = toggleStateFromMode(initialMode);
   const [micOn, setMicOn] = useState3(initialToggles.micOn);
@@ -2454,6 +2489,7 @@ function RecorderModal({
   const encoding = deviceSettings.encoding;
   const recorder = useMediaRecorder({
     source,
+    maxRecordingBytes,
     includeMicrophone: cameraOn ? micOn : void 0,
     audioConstraints,
     videoConstraints: cameraConstraints,
@@ -2477,6 +2513,7 @@ function RecorderModal({
   basenameRef.current = basename;
   const stage = useNarrationStage({
     doc: narration?.doc ?? null,
+    maxRecordingBytes,
     recording: narration?.recording ?? null,
     getAudioBasename: () => basenameRef.current.trim() || void 0,
     micConstraints: audioConstraints,
@@ -2681,6 +2718,13 @@ function RecorderModal({
     }
   }, [captureKey, recorder]);
   const handleClose = useCallback4(() => {
+    if (!narrationOn) {
+      if (isSaving || recorder.state === "stopping" || recorder.state === "requesting") return;
+      if ((recorder.blob || recorder.camera?.blob || recorder.state === "recording") && !window.confirm(
+        "Discard this recording? Download or save it before closing to keep a copy."
+      ))
+        return;
+    }
     const s = stageRef.current;
     if (closeNeedsConfirm(narrationOn, s.recorder.state, s.recorder.take !== null)) {
       if (!window.confirm("Discard the current narration take?")) return;
@@ -2694,7 +2738,7 @@ function RecorderModal({
     }
     recorder.cancel();
     onClose();
-  }, [narrationOn, recorder, onClose]);
+  }, [narrationOn, recorder, onClose, isSaving]);
   useModalDialog({
     rootRef: overlayRef,
     dialogRef,
@@ -2822,7 +2866,8 @@ function RecorderModal({
         };
         dualSaveProgressRef.current = {};
         onSave?.(result);
-        handleClose();
+        recorder.cancel();
+        onClose();
       } catch (err) {
         setSaveError(err instanceof Error ? err.message : "Failed to save recording");
       } finally {
@@ -2876,7 +2921,8 @@ function RecorderModal({
         result.sourceText = slideTiming ? void 0 : sourceText;
       }
       onSave?.(result);
-      handleClose();
+      recorder.cancel();
+      onClose();
     } catch (err) {
       setSaveError(err instanceof Error ? err.message : "Failed to save recording");
     } finally {
@@ -2895,7 +2941,7 @@ function RecorderModal({
     mediaProvider,
     container,
     onSave,
-    handleClose,
+    onClose,
     writeSlideTimingSidecar
   ]);
   const handleDiscard = useCallback4(() => {
@@ -2927,8 +2973,47 @@ function RecorderModal({
     () => slides?.doc && showTimingCheckbox ? advanceCoverage(slides.doc, advanceLog) : null,
     [slides?.doc, showTimingCheckbox, advanceLog]
   );
+  const [timingDownloadUrl, setTimingDownloadUrl] = useState3(null);
+  const downloadFilename = useMemo(
+    () => !recorder.blob ? "" : buildFilename(
+      source === "mic" ? "audio" : "video",
+      recorder.extension ?? ".webm",
+      isDual && basename.trim() ? `${basename.trim()}-screen` : basename,
+      filenameSeed
+    ),
+    [source, recorder.extension, recorder.blob, isDual, basename, filenameSeed]
+  );
+  const timingDownloadFilename = `${downloadFilename}.timing.json`;
+  useEffect4(() => {
+    if (narrationOn || !canSave) {
+      setTimingDownloadUrl(null);
+      return;
+    }
+    const duration = recorder.durationMs / 1e3;
+    const encoded = slidesOn && slidesCaptureTimings && applySlideTimings && slides?.doc && advanceLog.length > 0 ? encodeNarrationTimingJson(buildAdvanceTimingJson(slides.doc, advanceLog, duration)) : source === "mic" ? encodeTimingJson(buildTimingJson(sourceText, duration)) : null;
+    if (encoded === null) {
+      setTimingDownloadUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(
+      new Blob([new Uint8Array(encoded)], { type: "application/json" })
+    );
+    setTimingDownloadUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [
+    narrationOn,
+    canSave,
+    recorder.durationMs,
+    slidesOn,
+    slidesCaptureTimings,
+    applySlideTimings,
+    slides?.doc,
+    advanceLog,
+    source,
+    sourceText
+  ]);
   const slideCoverageWarning = slideCoverage ? unshownSlidesWarning(slideCoverage.total, slideCoverage.unshown) : null;
-  const togglesLocked = recorder.state === "recording" || recorder.state === "requesting" || canSave;
+  const togglesLocked = recorder.state === "recording" || recorder.state === "requesting" || recorder.state === "stopping" || canSave;
   const toggleLockReason = canSave ? "Save or discard this recording before changing sources" : void 0;
   const systemAudioHasCompanion = micOn || cameraOn || screenOn;
   const simpleToggleProps = (key) => {
@@ -3110,7 +3195,25 @@ function RecorderModal({
                   }
                 ),
                 !narrationOn && recorder.error && /* @__PURE__ */ jsx5("div", { style: errorStyle, children: recorder.error.message }),
-                !narrationOn && saveError && /* @__PURE__ */ jsx5("div", { style: errorStyle, children: saveError }),
+                !narrationOn && saveError && /* @__PURE__ */ jsxs4("div", { role: "alert", style: errorStyle, children: [
+                  saveError,
+                  /* @__PURE__ */ jsx5("p", { style: { marginBottom: 0 }, children: "Your recording is still available below. Download a copy before closing, or try saving again." })
+                ] }),
+                /* @__PURE__ */ jsxs4("p", { style: summaryStyle, children: [
+                  "Recording size:",
+                  " ",
+                  formatRecordingBytes(
+                    narrationOn ? stage.recorder.recordedBytes : recorder.recordedBytes
+                  ),
+                  ". Automatically stops at",
+                  " ",
+                  formatRecordingBytes(
+                    narrationOn ? stage.recorder.maxRecordingBytes : recorder.maxRecordingBytes
+                  ),
+                  " ",
+                  "total. Final encoding may add more data."
+                ] }),
+                !narrationOn && recorder.limitReached && /* @__PURE__ */ jsx5("p", { role: "status", style: recordingStatusStyle, children: "Recording stopped at the size limit. Your complete recording is retained; download a copy or save it to the document." }),
                 narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx5("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
                 narrationOn && narrationCameraStream && /* @__PURE__ */ jsx5("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx5(
                   "video",
@@ -3226,6 +3329,43 @@ function RecorderModal({
                   ] }),
                   /* @__PURE__ */ jsx5("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
                 ] }),
+                !narrationOn && canSave && playbackUrl && /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    style: {
+                      ...buttonRowStyle,
+                      flexWrap: "wrap",
+                      justifyContent: "flex-start",
+                      marginBottom: 12
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx5("a", { href: playbackUrl, download: downloadFilename, style: btnSecondary, children: isDual ? "Download screen recording" : "Download recording" }),
+                      isDual && cameraPlaybackUrl && /* @__PURE__ */ jsx5(
+                        "a",
+                        {
+                          href: cameraPlaybackUrl,
+                          download: buildFilename(
+                            "video",
+                            recorder.camera?.extension ?? ".webm",
+                            basename.trim() ? `${basename.trim()}-camera` : void 0,
+                            micOn ? "camera-audio" : "camera"
+                          ),
+                          style: btnSecondary,
+                          children: "Download camera recording"
+                        }
+                      ),
+                      timingDownloadUrl && /* @__PURE__ */ jsx5(
+                        "a",
+                        {
+                          href: timingDownloadUrl,
+                          download: timingDownloadFilename,
+                          style: btnSecondary,
+                          children: "Download recording timings"
+                        }
+                      )
+                    ]
+                  }
+                ),
                 !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(