@bendyline/squisq-editor-react 2.3.4 → 2.4.1

package/dist/chunk-LOTY7AOS.js

@@ -0,0 +1,1925 @@
+import {
+  Icon
+} from "./chunk-GS7QWYFT.js";
+import {
+  NarrationStage,
+  buildFilename,
+  buildTimingJson,
+  encodeTimingJson,
+  requestCameraStream,
+  requestMicStream,
+  resolveFormat,
+  supportsDisplayMedia,
+  supportsMediaRecorder,
+  supportsSystemAudioCapture,
+  supportsUserMedia,
+  timingPathFor,
+  useNarrationStage,
+  useStreamPreview
+} from "./chunk-PDCKJCOS.js";
+
+// src/recorder/sources/screenStream.ts
+function mixAudioTracks(streams) {
+  const sources = streams.map((s) => s.getAudioTracks()).flat().filter((t) => t.readyState === "live");
+  if (sources.length === 0) return null;
+  const AC = window.AudioContext;
+  if (typeof AC === "undefined") return null;
+  const ctx = new AC();
+  const dest = ctx.createMediaStreamDestination();
+  for (const track of sources) {
+    const src = ctx.createMediaStreamSource(new MediaStream([track]));
+    src.connect(dest);
+  }
+  const [mixed] = dest.stream.getAudioTracks();
+  if (!mixed) return null;
+  return { track: mixed, context: ctx };
+}
+async function requestScreenStream(options) {
+  if (!supportsDisplayMedia()) {
+    throw new Error("navigator.mediaDevices.getDisplayMedia is not available in this environment.");
+  }
+  const video = options?.video ?? true;
+  const systemAudio = options?.systemAudio ?? false;
+  const includeMic = options?.includeMicrophone ?? false;
+  const displayStream = await navigator.mediaDevices.getDisplayMedia({
+    video,
+    audio: systemAudio
+  });
+  if (!includeMic) {
+    return {
+      stream: displayStream,
+      dispose: () => {
+      }
+    };
+  }
+  if (!supportsUserMedia()) {
+    return {
+      stream: displayStream,
+      dispose: () => {
+      }
+    };
+  }
+  let micStream = null;
+  try {
+    micStream = await navigator.mediaDevices.getUserMedia({
+      audio: options?.microphoneConstraints ?? true,
+      video: false
+    });
+  } catch (err) {
+    displayStream.getTracks().forEach((t) => t.stop());
+    throw err;
+  }
+  const mix = mixAudioTracks([displayStream, micStream]);
+  if (!mix) {
+    micStream.getTracks().forEach((t) => t.stop());
+    return {
+      stream: displayStream,
+      dispose: () => {
+      }
+    };
+  }
+  const [videoTrack] = displayStream.getVideoTracks();
+  const output = new MediaStream();
+  if (videoTrack) output.addTrack(videoTrack);
+  output.addTrack(mix.track);
+  const systemAudioTracks = displayStream.getAudioTracks();
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    micStream?.getTracks().forEach((t) => t.stop());
+    micStream = null;
+    systemAudioTracks.forEach((t) => t.stop());
+    void mix.context.close().catch(() => {
+    });
+  };
+  return { stream: output, dispose };
+}
+
+// src/recorder/hooks/useMediaRecorder.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/recorder/sources/systemAudioStream.ts
+async function requestSystemAudioStream() {
+  if (!supportsDisplayMedia()) {
+    throw new Error("navigator.mediaDevices.getDisplayMedia is not available in this environment.");
+  }
+  const display = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
+  display.getVideoTracks().forEach((t) => t.stop());
+  const audio = display.getAudioTracks();
+  if (audio.length === 0) return null;
+  return new MediaStream(audio);
+}
+function mixSystemAudio(base, systemAudio) {
+  const AC = window.AudioContext;
+  if (typeof AC === "undefined") {
+    console.warn(
+      "[squisq-recorder] AudioContext unavailable \u2014 system audio could not be mixed into the recording."
+    );
+    systemAudio.getTracks().forEach((t) => t.stop());
+    return { stream: base, dispose: () => {
+    } };
+  }
+  const ctx = new AC();
+  const dest = ctx.createMediaStreamDestination();
+  const baseAudio = base.getAudioTracks();
+  const sources = [...baseAudio, ...systemAudio.getAudioTracks()].filter(
+    (t) => t.readyState === "live"
+  );
+  for (const track of sources) {
+    ctx.createMediaStreamSource(new MediaStream([track])).connect(dest);
+  }
+  const [mixed] = dest.stream.getAudioTracks();
+  const output = new MediaStream();
+  base.getVideoTracks().forEach((t) => output.addTrack(t));
+  if (mixed) output.addTrack(mixed);
+  else baseAudio.forEach((t) => output.addTrack(t));
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    baseAudio.forEach((t) => t.stop());
+    systemAudio.getTracks().forEach((t) => t.stop());
+    void ctx.close().catch(() => {
+    });
+  };
+  return { stream: output, dispose };
+}
+
+// src/recorder/hooks/useMediaRecorder.ts
+async function acquireStream(source, opts) {
+  switch (source) {
+    case "mic": {
+      const audio = typeof opts.audioConstraints === "object" ? opts.audioConstraints : void 0;
+      if (opts.systemAudio) {
+        const systemAudio = await requestSystemAudioStream();
+        let base;
+        try {
+          base = await requestMicStream(audio);
+        } catch (err) {
+          systemAudio?.getTracks().forEach((t) => t.stop());
+          throw err;
+        }
+        if (!systemAudio) return { stream: base, dispose: () => {
+        } };
+        return mixSystemAudio(base, systemAudio);
+      }
+      const stream = await requestMicStream(audio);
+      return { stream, dispose: () => {
+      } };
+    }
+    case "camera": {
+      const video = opts.videoConstraints ?? true;
+      const audio = opts.includeMicrophone === false ? false : opts.audioConstraints ?? true;
+      if (opts.systemAudio) {
+        const systemAudio = await requestSystemAudioStream();
+        let base;
+        try {
+          base = await requestCameraStream({ video, audio });
+        } catch (err) {
+          systemAudio?.getTracks().forEach((t) => t.stop());
+          throw err;
+        }
+        if (!systemAudio) return { stream: base, dispose: () => {
+        } };
+        return mixSystemAudio(base, systemAudio);
+      }
+      const stream = await requestCameraStream({ video, audio });
+      return { stream, dispose: () => {
+      } };
+    }
+    case "screen":
+    case "screen+mic": {
+      const handle = await requestScreenStream({
+        video: opts.videoConstraints ?? true,
+        systemAudio: opts.systemAudio ?? false,
+        includeMicrophone: source === "screen+mic",
+        microphoneConstraints: typeof opts.audioConstraints === "object" ? opts.audioConstraints : void 0
+      });
+      return { stream: handle.stream, dispose: handle.dispose };
+    }
+  }
+}
+async function acquireDualStreams(opts, isStale) {
+  const screen = await requestScreenStream({
+    video: opts.videoConstraints ?? true,
+    systemAudio: opts.systemAudio ?? false,
+    includeMicrophone: false
+  });
+  const releaseScreen = () => {
+    screen.stream.getTracks().forEach((t) => t.stop());
+    screen.dispose();
+  };
+  if (isStale()) {
+    releaseScreen();
+    return null;
+  }
+  let camera;
+  try {
+    camera = await requestCameraStream({
+      video: true,
+      audio: opts.includeMicrophone === false ? false : opts.audioConstraints ?? true
+    });
+  } catch (err) {
+    releaseScreen();
+    throw err;
+  }
+  if (isStale()) {
+    releaseScreen();
+    camera.getTracks().forEach((t) => t.stop());
+    return null;
+  }
+  return { screen, camera };
+}
+function captureKindFor(source) {
+  return source === "mic" ? "audio" : "video";
+}
+function getCaptureKind(source) {
+  return captureKindFor(source);
+}
+function useMediaRecorder(options = {}) {
+  const [state, setState] = useState("idle");
+  const [stream, setStream] = useState(null);
+  const [blob, setBlob] = useState(null);
+  const [format, setFormat] = useState(null);
+  const [durationMs, setDurationMs] = useState(0);
+  const [error, setError] = useState(null);
+  const [camera, setCamera] = useState(null);
+  const [cameraOffsetSec, setCameraOffsetSec] = useState(null);
+  const recorderRef = useRef(null);
+  const chunksRef = useRef([]);
+  const disposeStreamRef = useRef(null);
+  const startTimestampRef = useRef(null);
+  const tickerRef = useRef(null);
+  const stopResolversRef = useRef([]);
+  const stopPromiseRef = useRef(null);
+  const requestPromiseRef = useRef(null);
+  const lifecycleRef = useRef(0);
+  const secondaryRef = useRef(null);
+  const pendingLanesRef = useRef(0);
+  const primaryStartMsRef = useRef(null);
+  const secondaryStartMsRef = useRef(null);
+  const stateRef = useRef("idle");
+  const stopFnRef = useRef(null);
+  const cancelFnRef = useRef(null);
+  const transition = useCallback((next) => {
+    stateRef.current = next;
+    setState(next);
+  }, []);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const clearTicker = useCallback(() => {
+    if (tickerRef.current !== null) {
+      clearInterval(tickerRef.current);
+      tickerRef.current = null;
+    }
+  }, []);
+  const deactivateCapture = useCallback(() => {
+    recorderRef.current?.stream.getTracks().forEach((track) => track.stop());
+    secondaryRef.current?.stream.getTracks().forEach((track) => track.stop());
+    disposeStreamRef.current?.();
+    disposeStreamRef.current = null;
+  }, []);
+  const releaseStream = useCallback(() => {
+    const s = recorderRef.current?.stream;
+    if (s) {
+      s.getTracks().forEach((t) => t.stop());
+    }
+    setStream((current) => {
+      current?.getTracks().forEach((t) => t.stop());
+      return null;
+    });
+    disposeStreamRef.current?.();
+    disposeStreamRef.current = null;
+  }, []);
+  const releaseSecondary = useCallback(() => {
+    const lane = secondaryRef.current;
+    secondaryRef.current = null;
+    if (lane) {
+      if (lane.recorder.state !== "inactive") {
+        try {
+          lane.recorder.ondataavailable = null;
+          lane.recorder.onstart = null;
+          lane.recorder.onstop = null;
+          lane.recorder.onerror = null;
+          lane.recorder.stop();
+        } catch {
+        }
+      }
+      lane.stream.getTracks().forEach((t) => t.stop());
+    }
+    pendingLanesRef.current = 0;
+    primaryStartMsRef.current = null;
+    secondaryStartMsRef.current = null;
+    setCamera(null);
+    setCameraOffsetSec(null);
+  }, []);
+  const reset = useCallback(() => {
+    setBlob(null);
+    setDurationMs(0);
+    setError(null);
+    chunksRef.current = [];
+    startTimestampRef.current = null;
+    clearTicker();
+    setCamera((prev) => prev ? { ...prev, blob: null } : null);
+    setCameraOffsetSec(null);
+    const rec = recorderRef.current;
+    const secondaryLive = !secondaryRef.current || secondaryRef.current.stream.active;
+    if (rec && rec.state === "inactive" && rec.stream.active && secondaryLive) {
+      transition("ready");
+    } else {
+      cancelFnRef.current?.();
+    }
+  }, [clearTicker, transition]);
+  const cancel = useCallback(() => {
+    lifecycleRef.current += 1;
+    const rec = recorderRef.current;
+    if (rec && rec.state !== "inactive") {
+      try {
+        rec.ondataavailable = null;
+        rec.onstart = null;
+        rec.onstop = null;
+        rec.onerror = null;
+        rec.stop();
+      } catch {
+      }
+    }
+    recorderRef.current = null;
+    releaseStream();
+    releaseSecondary();
+    clearTicker();
+    chunksRef.current = [];
+    startTimestampRef.current = null;
+    stopResolversRef.current.splice(0).forEach((resolve) => resolve(null));
+    stopPromiseRef.current = null;
+    requestPromiseRef.current = null;
+    setBlob(null);
+    setDurationMs(0);
+    setError(null);
+    transition("idle");
+  }, [clearTicker, releaseStream, releaseSecondary, transition]);
+  const request = useCallback(async () => {
+    if (requestPromiseRef.current) return requestPromiseRef.current;
+    if (recorderRef.current?.stream.active) return;
+    if (!supportsMediaRecorder()) {
+      const err = new Error("MediaRecorder is not supported in this environment.");
+      setError(err);
+      transition("error");
+      throw err;
+    }
+    const lifecycle = ++lifecycleRef.current;
+    const requestPromise = (async () => {
+      setError(null);
+      transition("requesting");
+      let acquired = null;
+      let dual = null;
+      try {
+        const source = optionsRef.current.source ?? "mic";
+        const resolved = resolveFormat(captureKindFor(source), optionsRef.current.mimeType);
+        const recorderOptions = {};
+        if (resolved.mimeType) recorderOptions.mimeType = resolved.mimeType;
+        if (optionsRef.current.bitsPerSecond) {
+          recorderOptions.bitsPerSecond = optionsRef.current.bitsPerSecond;
+        }
+        if (source === "screen+camera") {
+          dual = await acquireDualStreams(
+            optionsRef.current,
+            () => lifecycle !== lifecycleRef.current
+          );
+          if (!dual) return;
+          const { screen, camera: cameraStream } = dual;
+          const primary = new MediaRecorder(screen.stream, recorderOptions);
+          const secondary = new MediaRecorder(cameraStream, recorderOptions);
+          const finalizeJoin = () => {
+            const primaryType = primary.mimeType || resolved.mimeType || "application/octet-stream";
+            const primaryBlob = new Blob(chunksRef.current, { type: primaryType });
+            chunksRef.current = [];
+            setBlob(primaryBlob);
+            const lane = secondaryRef.current;
+            if (lane) {
+              const camType = lane.recorder.mimeType || resolved.mimeType || "application/octet-stream";
+              const camBlob = new Blob(lane.chunks, { type: camType });
+              lane.chunks = [];
+              setCamera({
+                stream: lane.stream,
+                blob: camBlob,
+                mimeType: resolved.mimeType || null,
+                extension: resolved.extension
+              });
+            }
+            const p = primaryStartMsRef.current;
+            const c = secondaryStartMsRef.current;
+            setCameraOffsetSec(p != null && c != null ? (c - p) / 1e3 : null);
+            deactivateCapture();
+            transition("stopped");
+            clearTicker();
+            stopResolversRef.current.splice(0).forEach((resolve) => resolve(primaryBlob));
+            stopPromiseRef.current = null;
+          };
+          const laneStopped = (rec) => {
+            if (lifecycle !== lifecycleRef.current) return;
+            if (recorderRef.current !== rec && secondaryRef.current?.recorder !== rec) return;
+            if (pendingLanesRef.current === 0) return;
+            pendingLanesRef.current -= 1;
+            if (pendingLanesRef.current > 0) return;
+            finalizeJoin();
+          };
+          const laneError = (rec, event) => {
+            if (lifecycle !== lifecycleRef.current) return;
+            const isPrimary = recorderRef.current === rec;
+            const isSecondary = secondaryRef.current?.recorder === rec;
+            if (!isPrimary && !isSecondary) return;
+            const sibling = isPrimary ? secondaryRef.current?.recorder : primary;
+            if (sibling && sibling.state !== "inactive") {
+              try {
+                sibling.ondataavailable = null;
+                sibling.onstart = null;
+                sibling.onstop = null;
+                sibling.onerror = null;
+                sibling.stop();
+              } catch {
+              }
+            }
+            const detail = event.error;
+            const err = detail instanceof Error ? detail : new Error("Recorder error");
+            setError(err);
+            deactivateCapture();
+            transition("error");
+            clearTicker();
+            pendingLanesRef.current = 0;
+            stopResolversRef.current.splice(0).forEach((resolve) => resolve(null));
+            stopPromiseRef.current = null;
+          };
+          primary.ondataavailable = (e) => {
+            if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
+          };
+          primary.onstart = () => {
+            primaryStartMsRef.current = performance.now();
+          };
+          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);
+          };
+          secondary.onstart = () => {
+            secondaryStartMsRef.current = performance.now();
+          };
+          secondary.onstop = () => laneStopped(secondary);
+          secondary.onerror = (e) => laneError(secondary, e);
+          recorderRef.current = primary;
+          disposeStreamRef.current = screen.dispose;
+          secondaryRef.current = {
+            recorder: secondary,
+            chunks: [],
+            stream: cameraStream,
+            format: resolved
+          };
+          const [screenTrack] = screen.stream.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(screen.stream);
+          setCamera({
+            stream: cameraStream,
+            blob: null,
+            mimeType: resolved.mimeType || null,
+            extension: resolved.extension
+          });
+          setFormat(resolved);
+          setBlob(null);
+          setDurationMs(0);
+          setCameraOffsetSec(null);
+          transition("ready");
+          dual = null;
+          return;
+        }
+        acquired = await acquireStream(source, optionsRef.current);
+        const { stream: nextStream, dispose } = acquired;
+        if (lifecycle !== lifecycleRef.current) {
+          nextStream.getTracks().forEach((track) => track.stop());
+          dispose();
+          return;
+        }
+        const recorder = new MediaRecorder(nextStream, recorderOptions);
+        recorder.ondataavailable = (e) => {
+          if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
+        };
+        recorder.onstop = () => {
+          if (recorderRef.current !== recorder || lifecycle !== lifecycleRef.current) return;
+          if (pendingLanesRef.current === 0) return;
+          pendingLanesRef.current -= 1;
+          if (pendingLanesRef.current > 0) return;
+          const recordedType = recorder.mimeType || resolved.mimeType || "application/octet-stream";
+          const finalBlob = new Blob(chunksRef.current, { type: recordedType });
+          chunksRef.current = [];
+          setBlob(finalBlob);
+          deactivateCapture();
+          transition("stopped");
+          clearTicker();
+          stopResolversRef.current.splice(0).forEach((resolve) => resolve(finalBlob));
+          stopPromiseRef.current = null;
+        };
+        recorder.onerror = (event) => {
+          if (recorderRef.current !== recorder || lifecycle !== lifecycleRef.current) return;
+          const detail = event.error;
+          const err = detail instanceof Error ? detail : new Error("Recorder error");
+          setError(err);
+          deactivateCapture();
+          transition("error");
+          clearTicker();
+          pendingLanesRef.current = 0;
+          stopResolversRef.current.splice(0).forEach((resolve) => resolve(null));
+          stopPromiseRef.current = null;
+        };
+        recorderRef.current = recorder;
+        disposeStreamRef.current = dispose;
+        setStream(nextStream);
+        setFormat(resolved);
+        setBlob(null);
+        setDurationMs(0);
+        transition("ready");
+        acquired = null;
+      } catch (err) {
+        if (acquired) {
+          acquired.stream.getTracks().forEach((track) => track.stop());
+          acquired.dispose();
+        }
+        if (dual) {
+          dual.screen.stream.getTracks().forEach((track) => track.stop());
+          dual.screen.dispose();
+          dual.camera.getTracks().forEach((track) => track.stop());
+        }
+        const normalized = err instanceof Error ? err : new Error("Stream acquisition failed");
+        if (lifecycle === lifecycleRef.current) {
+          setError(normalized);
+          transition("error");
+        }
+        throw normalized;
+      } finally {
+        if (lifecycle === lifecycleRef.current) requestPromiseRef.current = null;
+      }
+    })();
+    requestPromiseRef.current = requestPromise;
+    return requestPromise;
+  }, [clearTicker, deactivateCapture, transition]);
+  const start = useCallback(() => {
+    const rec = recorderRef.current;
+    if (!rec) {
+      const err = new Error("Recorder is not ready. Call request() first.");
+      setError(err);
+      transition("error");
+      return;
+    }
+    if (rec.state === "recording") return;
+    chunksRef.current = [];
+    if (secondaryRef.current) secondaryRef.current.chunks = [];
+    setBlob(null);
+    setDurationMs(0);
+    setCamera((prev) => prev ? { ...prev, blob: null } : null);
+    setCameraOffsetSec(null);
+    primaryStartMsRef.current = null;
+    secondaryStartMsRef.current = null;
+    startTimestampRef.current = Date.now();
+    try {
+      rec.start(1e3);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to start recorder"));
+      deactivateCapture();
+      transition("error");
+      return;
+    }
+    const secondary = secondaryRef.current;
+    if (secondary) {
+      try {
+        secondary.recorder.start(1e3);
+      } catch (err) {
+        try {
+          rec.stop();
+        } catch {
+        }
+        setError(err instanceof Error ? err : new Error("Failed to start camera recorder"));
+        deactivateCapture();
+        transition("error");
+        return;
+      }
+    }
+    transition("recording");
+    clearTicker();
+    tickerRef.current = setInterval(() => {
+      if (startTimestampRef.current !== null) {
+        setDurationMs(Date.now() - startTimestampRef.current);
+      }
+    }, 100);
+  }, [clearTicker, deactivateCapture, transition]);
+  const stop = useCallback(() => {
+    if (stopPromiseRef.current) return stopPromiseRef.current;
+    const rec = recorderRef.current;
+    if (!rec || rec.state === "inactive") {
+      return Promise.resolve(blob);
+    }
+    transition("stopping");
+    const secondary = secondaryRef.current;
+    const secondaryActive = secondary != null && secondary.recorder.state !== "inactive";
+    pendingLanesRef.current = secondaryActive ? 2 : 1;
+    const stopPromise = new Promise((resolve) => {
+      stopResolversRef.current.push(resolve);
+      try {
+        rec.stop();
+      } catch (err) {
+        const normalized = err instanceof Error ? err : new Error("Failed to stop recorder");
+        setError(normalized);
+        deactivateCapture();
+        transition("error");
+        clearTicker();
+        pendingLanesRef.current = 0;
+        stopResolversRef.current.splice(0).forEach((r) => r(null));
+        return;
+      }
+      if (secondaryActive) {
+        try {
+          secondary.recorder.stop();
+        } catch {
+          pendingLanesRef.current = Math.max(0, pendingLanesRef.current - 1);
+        }
+      }
+    });
+    stopPromiseRef.current = stopPromise;
+    void stopPromise.finally(() => {
+      if (stopPromiseRef.current === stopPromise) stopPromiseRef.current = null;
+    });
+    return stopPromise;
+  }, [blob, clearTicker, deactivateCapture, transition]);
+  useEffect(() => {
+    stopFnRef.current = stop;
+    cancelFnRef.current = cancel;
+  });
+  useEffect(() => {
+    const pendingResolvers = stopResolversRef.current;
+    return () => {
+      lifecycleRef.current += 1;
+      requestPromiseRef.current = null;
+      const rec = recorderRef.current;
+      if (rec && rec.state !== "inactive") {
+        try {
+          rec.ondataavailable = null;
+          rec.onstart = null;
+          rec.onstop = null;
+          rec.onerror = null;
+          rec.stop();
+        } catch {
+        }
+      }
+      releaseStream();
+      releaseSecondary();
+      clearTicker();
+      pendingResolvers.splice(0).forEach((resolve) => resolve(null));
+      stopPromiseRef.current = null;
+    };
+  }, [releaseStream, releaseSecondary, clearTicker]);
+  return {
+    state,
+    stream,
+    blob,
+    mimeType: format?.mimeType ?? null,
+    extension: format?.extension ?? null,
+    directory: format?.directory ?? null,
+    durationMs,
+    error,
+    camera,
+    cameraOffsetSec,
+    request,
+    start,
+    stop,
+    cancel,
+    reset
+  };
+}
+
+// src/recorder/RecorderModal.tsx
+import {
+  Fragment,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useId,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/modal/useModalDialog.ts
+import { useModalDialog } from "@bendyline/squisq-react";
+
+// src/recorder/narrationModePolicy.ts
+function narrationQuiescent(narrationState) {
+  return narrationState === "idle" || narrationState === "error";
+}
+function narrationToggleLocked(simpleState, simpleHasBlob, narrationState) {
+  const simpleBusy = simpleState === "recording" || simpleState === "requesting" || simpleState === "stopping" || simpleState === "stopped" && simpleHasBlob;
+  return simpleBusy || !narrationQuiescent(narrationState);
+}
+function escapeClosesDialog(narrationOn, narrationState, transport) {
+  if (!narrationOn) return true;
+  if (transport === "rolling" || transport === "countdown") return false;
+  return narrationQuiescent(narrationState);
+}
+function closeNeedsConfirm(narrationOn, narrationState, hasTake) {
+  if (!narrationOn) return false;
+  if (narrationState === "review") return hasTake;
+  return !narrationQuiescent(narrationState);
+}
+function narrationCaptureSummary(withCamera) {
+  return withCamera ? "Narration: microphone + camera video, timed to your reading." : "Narration: microphone audio, timed to your reading.";
+}
+
+// src/recorder/RecorderModal.tsx
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0, 0, 0, 0.5)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4
+};
+function recorderThemeStyle(colorScheme) {
+  const dark = colorScheme === "dark";
+  return {
+    colorScheme,
+    "--squisq-recorder-surface": `var(--squisq-bg, ${dark ? "#1f2937" : "#fffdf7"})`,
+    "--squisq-recorder-input": `var(--squisq-input-bg, ${dark ? "#374151" : "#fff"})`,
+    "--squisq-recorder-border": `var(--squisq-border, ${dark ? "#4b5563" : "#c9b98a"})`,
+    "--squisq-recorder-text": `var(--squisq-text, ${dark ? "#e5e7eb" : "#4a3c1f"})`,
+    "--squisq-recorder-muted": `var(--squisq-text-muted, ${dark ? "#9ca3af" : "#5a4a2a"})`,
+    "--squisq-recorder-accent": "var(--squisq-accent, #8b6914)",
+    "--squisq-recorder-accent-text": "#fff",
+    "--squisq-recorder-danger": dark ? "#dc4c4c" : "#b33a3a",
+    "--squisq-recorder-danger-border": dark ? "#ef6a6a" : "#902929",
+    "--squisq-recorder-error-bg": dark ? "#3f151b" : "#fceeee",
+    "--squisq-recorder-error-border": dark ? "#7f1d1d" : "#d88a8a",
+    "--squisq-recorder-error-text": dark ? "#fecdd3" : "#8c2a2a"
+  };
+}
+var modalStyle = {
+  background: "var(--squisq-recorder-surface)",
+  border: "1px solid var(--squisq-recorder-border)",
+  borderRadius: 0,
+  padding: "24px 28px",
+  width: "min(560px, calc(100vw - 48px))",
+  maxHeight: "calc(100vh - 48px)",
+  overflowY: "auto",
+  boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  color: "var(--squisq-recorder-text)"
+};
+var titleStyle = {
+  margin: "0 0 16px 0",
+  fontSize: 18,
+  fontWeight: 600,
+  color: "var(--squisq-recorder-text)"
+};
+var labelStyle = {
+  display: "block",
+  fontSize: 13,
+  fontWeight: 500,
+  marginBottom: 4,
+  color: "var(--squisq-recorder-text)"
+};
+var inputStyle = {
+  width: "100%",
+  padding: "6px 8px",
+  fontSize: 13,
+  fontFamily: "inherit",
+  border: "1px solid var(--squisq-recorder-border)",
+  borderRadius: 0,
+  background: "var(--squisq-recorder-input)",
+  color: "var(--squisq-recorder-text)",
+  marginBottom: 12,
+  boxSizing: "border-box"
+};
+var textareaStyle = {
+  ...inputStyle,
+  resize: "vertical",
+  minHeight: 72
+};
+var btnPrimary = {
+  padding: "8px 20px",
+  fontSize: 14,
+  fontFamily: "inherit",
+  fontWeight: 500,
+  cursor: "pointer",
+  background: "var(--squisq-recorder-accent)",
+  color: "var(--squisq-recorder-accent-text)",
+  border: "1px solid var(--squisq-recorder-accent)",
+  borderRadius: 0
+};
+var btnSecondary = {
+  padding: "8px 20px",
+  fontSize: 14,
+  fontFamily: "inherit",
+  fontWeight: 500,
+  cursor: "pointer",
+  background: "var(--squisq-recorder-input)",
+  color: "var(--squisq-recorder-text)",
+  border: "1px solid var(--squisq-recorder-border)",
+  borderRadius: 0
+};
+var btnDanger = {
+  ...btnPrimary,
+  background: "var(--squisq-recorder-danger)",
+  borderColor: "var(--squisq-recorder-danger-border)"
+};
+var btnRecord = {
+  ...btnPrimary,
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8
+};
+var recordDotFrameStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flex: "0 0 auto",
+  padding: 2,
+  border: "1px solid #9ca3af",
+  borderRadius: "50%",
+  background: "#000"
+};
+var recordDotStyle = {
+  display: "block",
+  width: 9,
+  height: 9,
+  borderRadius: "50%",
+  background: "var(--squisq-recorder-danger)"
+};
+var toggleRowStyle = {
+  display: "flex",
+  gap: 8,
+  marginBottom: 16,
+  flexWrap: "wrap",
+  alignItems: "center"
+};
+var toggleGroupStyle = {
+  display: "flex",
+  gap: 8
+};
+var groupDividerStyle = {
+  alignSelf: "stretch",
+  width: 1,
+  background: "var(--squisq-recorder-border)",
+  margin: "0 4px"
+};
+var toggleBase = {
+  padding: "6px 14px",
+  fontSize: 13,
+  fontFamily: "inherit",
+  cursor: "pointer",
+  background: "transparent",
+  color: "var(--squisq-recorder-text)",
+  border: "1px solid var(--squisq-recorder-border)",
+  borderRadius: 999
+};
+var toggleActive = {
+  ...toggleBase,
+  color: "var(--squisq-recorder-accent-text)",
+  fontWeight: 600,
+  background: "var(--squisq-recorder-accent)",
+  borderColor: "var(--squisq-recorder-accent)"
+};
+var previewBoxStyle = {
+  width: "100%",
+  background: "#000",
+  borderRadius: 0,
+  marginBottom: 12,
+  overflow: "hidden",
+  aspectRatio: "16 / 9",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#888",
+  fontSize: 13
+};
+var playbackTimeStyle = {
+  position: "absolute",
+  top: 8,
+  right: 8,
+  padding: "3px 7px",
+  background: "rgba(0, 0, 0, 0.72)",
+  color: "#fff",
+  fontSize: 12,
+  fontVariantNumeric: "tabular-nums",
+  lineHeight: 1.4,
+  pointerEvents: "none"
+};
+var audioMeterStyle = {
+  width: "100%",
+  height: 56,
+  background: "var(--squisq-recorder-input)",
+  border: "1px solid var(--squisq-recorder-border)",
+  marginBottom: 12,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--squisq-recorder-muted)",
+  fontSize: 13,
+  fontVariantNumeric: "tabular-nums"
+};
+var errorStyle = {
+  background: "var(--squisq-recorder-error-bg)",
+  border: "1px solid var(--squisq-recorder-error-border)",
+  color: "var(--squisq-recorder-error-text)",
+  padding: "8px 10px",
+  fontSize: 13,
+  marginBottom: 12
+};
+var buttonRowStyle = {
+  display: "flex",
+  gap: 8,
+  justifyContent: "flex-end",
+  marginTop: 8
+};
+var summaryStyle = {
+  margin: "0 0 12px 0",
+  fontSize: 12,
+  color: "var(--squisq-recorder-muted)"
+};
+var recordingStatusStyle = {
+  fontSize: 13,
+  fontVariantNumeric: "tabular-nums",
+  marginBottom: 12,
+  color: "var(--squisq-recorder-accent)",
+  fontWeight: 600
+};
+var modalExpandedStyle = {
+  ...modalStyle,
+  width: "calc(100vw - 48px)",
+  height: "calc(100vh - 48px)",
+  maxHeight: "none",
+  overflowY: "hidden",
+  display: "flex",
+  flexDirection: "column"
+};
+var bodyRowStyle = {
+  display: "flex",
+  gap: 24,
+  flex: "1 1 auto",
+  minHeight: 0
+};
+var leftColStyle = {
+  flex: "0 0 min(420px, 38vw)",
+  overflowY: "auto",
+  minHeight: 0,
+  paddingRight: 4
+};
+var rightColStyle = {
+  flex: "1 1 auto",
+  minWidth: 0,
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column",
+  border: "1px solid var(--squisq-recorder-border)"
+};
+var checkboxRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  marginBottom: 12,
+  fontSize: 13
+};
+var meterLevelStyle = {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  bottom: 0,
+  background: "var(--squisq-recorder-accent)",
+  opacity: 0.25,
+  transition: "width 80ms linear"
+};
+function formatDurationMs(ms) {
+  const totalSec = Math.floor(ms / 1e3);
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function deriveSource({ micOn, cameraOn, screenOn }) {
+  if (cameraOn && screenOn) return "screen+camera";
+  if (cameraOn) return "camera";
+  if (screenOn) return micOn ? "screen+mic" : "screen";
+  return micOn ? "mic" : null;
+}
+function toggleStateFromMode(mode) {
+  switch (mode) {
+    case "mic":
+      return { micOn: true, cameraOn: false, screenOn: false };
+    case "camera":
+      return { micOn: true, cameraOn: true, screenOn: false };
+    case "screen":
+      return { micOn: false, cameraOn: false, screenOn: true };
+    case "screen+mic":
+      return { micOn: true, cameraOn: false, screenOn: true };
+    case "screen+camera":
+      return { micOn: true, cameraOn: true, screenOn: true };
+  }
+}
+var TOGGLE_GROUPS = [
+  {
+    label: "Voice and camera",
+    toggles: [
+      { key: "mic", label: "Microphone" },
+      { key: "camera", label: "Camera" }
+    ]
+  },
+  {
+    label: "Screen capture",
+    toggles: [
+      { key: "systemAudio", label: "System audio" },
+      { key: "screen", label: "Screen" }
+    ]
+  }
+];
+function captureSummary(micOn, cameraOn, screenOn, systemAudioOn) {
+  const systemNote = " Your computer\u2019s audio is mixed in \u2014 you\u2019ll pick a screen or tab to share it.";
+  const withSystem = systemAudioOn && !screenOn && (micOn || cameraOn);
+  if (cameraOn && screenOn) {
+    return micOn ? "Screen capture plus your camera as picture-in-picture; microphone on the camera clip, system audio on the screen clip when available. Saved as two video clips." : "Screen capture plus your camera as picture-in-picture (no microphone). Saved as two video clips.";
+  }
+  if (cameraOn) {
+    const base = micOn ? "Camera video with your microphone. Saved as a video clip." : "Camera video only (no microphone). Saved as a video clip.";
+    return withSystem ? `${base}${systemNote}` : base;
+  }
+  if (screenOn) {
+    return micOn ? "Screen capture with your microphone mixed in. System audio when available." : "Screen capture (no microphone). System audio when available.";
+  }
+  if (micOn) {
+    return systemAudioOn ? `Voice plus your computer\u2019s audio.${systemNote} Saved as an audio clip.` : "Voice-only audio. Pairs with a written script for auto-mapping to blocks.";
+  }
+  return "Pick at least one source to record.";
+}
+function recordingFilenameSeed(source, stream, audioRequested) {
+  if (source === "mic") return "audio";
+  const hasAudio = stream ? stream.getAudioTracks().length > 0 : audioRequested;
+  if (source === "camera") return hasAudio ? "camera+audio" : "camera";
+  return hasAudio ? "screen+audio" : "screen";
+}
+function dualFilenameSeeds(screenStream, cameraStream, systemAudioRequested, micRequested) {
+  const screenHasAudio = screenStream ? screenStream.getAudioTracks().length > 0 : systemAudioRequested;
+  const cameraHasAudio = cameraStream ? cameraStream.getAudioTracks().length > 0 : micRequested;
+  return {
+    screen: screenHasAudio ? "screen+audio" : "screen",
+    camera: cameraHasAudio ? "camera+audio" : "camera"
+  };
+}
+function RecorderModal({
+  mediaProvider,
+  container = null,
+  initialMode = "mic",
+  colorScheme = "light",
+  onClose,
+  onSave,
+  narration = null
+}) {
+  const initialToggles = toggleStateFromMode(initialMode);
+  const [micOn, setMicOn] = useState2(initialToggles.micOn);
+  const [cameraOn, setCameraOn] = useState2(initialToggles.cameraOn);
+  const [screenOn, setScreenOn] = useState2(initialToggles.screenOn);
+  const [sourceText, setSourceText] = useState2("");
+  const [basename, setBasename] = useState2("");
+  const [includeSystemAudio, setIncludeSystemAudio] = useState2(false);
+  const [isSaving, setIsSaving] = useState2(false);
+  const [saveError, setSaveError] = useState2(null);
+  const [playbackUrl, setPlaybackUrl] = useState2(null);
+  const [cameraPlaybackUrl, setCameraPlaybackUrl] = useState2(null);
+  const [playbackPositionMs, setPlaybackPositionMs] = useState2(0);
+  const [narrationOn, setNarrationOn] = useState2(false);
+  const [narrationRequesting, setNarrationRequesting] = useState2(false);
+  const [narrationPreview, setNarrationPreview] = useState2(null);
+  const overlayRef = useRef2(null);
+  const dialogRef = useRef2(null);
+  const headingId = useId();
+  const previewRef = useRef2(null);
+  const cameraPreviewRef = useRef2(null);
+  const derivedSource = deriveSource({ micOn, cameraOn, screenOn });
+  const canCapture = derivedSource !== null;
+  const source = derivedSource ?? "mic";
+  const isDual = source === "screen+camera";
+  const canIncludeSystemAudio = supportsSystemAudioCapture();
+  const recorder = useMediaRecorder({
+    source,
+    includeMicrophone: cameraOn ? micOn : void 0,
+    // System audio rides the screen capture when Screen is on, and is otherwise
+    // captured via a separate (video-discarded) display capture mixed into the
+    // mic/camera file — so it is no longer gated on Screen.
+    systemAudio: canIncludeSystemAudio ? includeSystemAudio : false
+  });
+  const filenameSeed = recordingFilenameSeed(source, recorder.stream, micOn || includeSystemAudio);
+  const narrationAvailable = Boolean(narration && narration.recording);
+  const basenameRef = useRef2(basename);
+  basenameRef.current = basename;
+  const stage = useNarrationStage({
+    doc: narration?.doc ?? null,
+    recording: narration?.recording ?? null,
+    getAudioBasename: () => basenameRef.current.trim() || void 0
+  });
+  const stageRef = useRef2(stage);
+  stageRef.current = stage;
+  const prevNarrationOnRef = useRef2(narrationOn);
+  useEffect2(() => {
+    const was = prevNarrationOnRef.current;
+    prevNarrationOnRef.current = narrationOn;
+    if (was === narrationOn) return;
+    if (narrationOn) {
+      recorder.cancel();
+    } else {
+      const s = stageRef.current;
+      s.controller.pause();
+      if (s.controller.mic.status === "live" || s.controller.mic.status === "starting") {
+        s.controller.mic.stop();
+      }
+      if (s.float.isOpen) s.float.close();
+    }
+  }, [narrationOn, recorder]);
+  useEffect2(() => {
+    if (!narrationOn) return;
+    const onKey = (event) => {
+      if (event.key !== "Escape") return;
+      const c = stageRef.current.controller;
+      if (c.transport === "rolling" || c.transport === "countdown") c.pause();
+    };
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
+  }, [narrationOn]);
+  const narrationMicLive = stage.controller.mic.status === "live";
+  const narrationPreviewWanted = narrationOn && stage.recorder.withCamera && narrationMicLive && stage.recorder.cameraStream === null && stage.recorder.state !== "processing" && stage.recorder.state !== "review" && stage.recorder.state !== "saving";
+  const narrationPreviewRef = useRef2(null);
+  useEffect2(() => {
+    if (!narrationPreviewWanted) {
+      const existing = narrationPreviewRef.current;
+      if (existing) {
+        for (const track of existing.getTracks()) track.stop();
+        narrationPreviewRef.current = null;
+        setNarrationPreview(null);
+      }
+      return;
+    }
+    if (narrationPreviewRef.current) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const stream = await requestCameraStream({ video: true, audio: false });
+        if (cancelled) {
+          for (const track of stream.getTracks()) track.stop();
+          return;
+        }
+        narrationPreviewRef.current = stream;
+        setNarrationPreview(stream);
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [narrationPreviewWanted]);
+  useEffect2(() => {
+    return () => {
+      const existing = narrationPreviewRef.current;
+      if (existing) for (const track of existing.getTracks()) track.stop();
+    };
+  }, []);
+  const handleNarrationPreview = useCallback2(async () => {
+    setNarrationRequesting(true);
+    try {
+      const controller = stageRef.current.controller;
+      await controller.mic.start(controller.prefs.micDeviceId);
+    } finally {
+      setNarrationRequesting(false);
+    }
+  }, []);
+  const handleNarrationRecord = useCallback2(() => {
+    void stageRef.current.recorder.start();
+  }, []);
+  const narrationCameraStream = narrationOn ? stage.recorder.cameraStream ?? narrationPreview : null;
+  useStreamPreview(
+    previewRef,
+    narrationOn ? narrationCameraStream : recorder.state === "stopped" ? null : recorder.stream
+  );
+  useStreamPreview(
+    cameraPreviewRef,
+    !narrationOn && isDual && recorder.state !== "stopped" ? recorder.camera?.stream ?? null : null
+  );
+  useEffect2(() => {
+    setPlaybackPositionMs(0);
+    if (!recorder.blob) {
+      setPlaybackUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(recorder.blob);
+    setPlaybackUrl(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [recorder.blob]);
+  const cameraBlob = recorder.camera?.blob ?? null;
+  useEffect2(() => {
+    if (!cameraBlob) {
+      setCameraPlaybackUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(cameraBlob);
+    setCameraPlaybackUrl(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [cameraBlob]);
+  const captureKey = `${source}:${cameraOn ? micOn : ""}:${includeSystemAudio}`;
+  const previousKeyRef = useRef2(captureKey);
+  const dualSaveProgressRef = useRef2({});
+  useEffect2(() => {
+    if (previousKeyRef.current !== captureKey) {
+      previousKeyRef.current = captureKey;
+      dualSaveProgressRef.current = {};
+      recorder.cancel();
+    }
+  }, [captureKey, recorder]);
+  const handleClose = useCallback2(() => {
+    const s = stageRef.current;
+    if (closeNeedsConfirm(narrationOn, s.recorder.state, s.recorder.take !== null)) {
+      if (!window.confirm("Discard the current narration take?")) return;
+      s.handleDiscard();
+    }
+    if (narrationOn) {
+      s.controller.pause();
+      if (s.controller.mic.status === "live" || s.controller.mic.status === "starting") {
+        s.controller.mic.stop();
+      }
+    }
+    recorder.cancel();
+    onClose();
+  }, [narrationOn, recorder, onClose]);
+  useModalDialog({
+    rootRef: overlayRef,
+    dialogRef,
+    onClose: handleClose,
+    closeOnEscape: escapeClosesDialog(
+      narrationOn,
+      stage.recorder.state,
+      stage.controller.transport
+    )
+  });
+  const handleRequest = useCallback2(async () => {
+    setSaveError(null);
+    try {
+      await recorder.request();
+    } catch {
+    }
+  }, [recorder]);
+  const handleStart = useCallback2(() => {
+    setSaveError(null);
+    dualSaveProgressRef.current = {};
+    recorder.start();
+  }, [recorder]);
+  const handleStop = useCallback2(async () => {
+    setSaveError(null);
+    await recorder.stop();
+  }, [recorder]);
+  const handleSave = useCallback2(async () => {
+    if (!recorder.blob || !recorder.mimeType || !recorder.extension || !recorder.directory) {
+      setSaveError("Nothing to save yet \u2014 record something first.");
+      return;
+    }
+    if (isDual) {
+      const cam = recorder.camera;
+      if (!cam?.blob || !cam.mimeType || !cam.extension) {
+        setSaveError("Nothing to save yet \u2014 record something first.");
+        return;
+      }
+      setIsSaving(true);
+      setSaveError(null);
+      try {
+        const seeds = dualFilenameSeeds(
+          recorder.stream,
+          cam.stream,
+          screenOn && includeSystemAudio,
+          micOn
+        );
+        const trimmed = basename.trim();
+        const screenFilename = buildFilename(
+          "video",
+          recorder.extension,
+          trimmed ? `${trimmed}-screen` : void 0,
+          seeds.screen
+        );
+        const cameraFilename = buildFilename(
+          "video",
+          cam.extension,
+          trimmed ? `${trimmed}-camera` : void 0,
+          seeds.camera
+        );
+        const progress = dualSaveProgressRef.current;
+        const screenPath = progress.screenPath ?? await mediaProvider.addMedia(
+          `${recorder.directory}/${screenFilename}`,
+          recorder.blob,
+          recorder.mimeType
+        );
+        progress.screenPath = screenPath;
+        const cameraPath = progress.cameraPath ?? await mediaProvider.addMedia(
+          `${recorder.directory}/${cameraFilename}`,
+          cam.blob,
+          cam.mimeType
+        );
+        progress.cameraPath = cameraPath;
+        const duration = recorder.durationMs / 1e3;
+        const offsetSec = recorder.cameraOffsetSec ?? 0;
+        const result = {
+          relativePath: screenPath,
+          filename: screenFilename,
+          source,
+          mimeType: recorder.mimeType,
+          duration,
+          hasTimingSidecar: false,
+          camera: {
+            relativePath: cameraPath,
+            filename: cameraFilename,
+            mimeType: cam.mimeType,
+            duration: Math.max(0, duration - offsetSec),
+            offsetSec
+          }
+        };
+        dualSaveProgressRef.current = {};
+        onSave?.(result);
+        handleClose();
+      } catch (err) {
+        setSaveError(err instanceof Error ? err.message : "Failed to save recording");
+      } finally {
+        setIsSaving(false);
+      }
+      return;
+    }
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      const filename = buildFilename(
+        source === "mic" ? "audio" : "video",
+        recorder.extension,
+        basename,
+        filenameSeed
+      );
+      const relativeName = `${recorder.directory}/${filename}`;
+      const relativePath = await mediaProvider.addMedia(
+        relativeName,
+        recorder.blob,
+        recorder.mimeType
+      );
+      let hasTimingSidecar = false;
+      if (source === "mic") {
+        const timing = buildTimingJson(sourceText, recorder.durationMs / 1e3);
+        const encoded = encodeTimingJson(timing);
+        const sidecarPath = timingPathFor(relativePath);
+        if (container) {
+          await container.writeFile(sidecarPath, encoded, "application/json");
+          hasTimingSidecar = true;
+        } else {
+          const written = await mediaProvider.addMedia(sidecarPath, encoded, "application/json");
+          hasTimingSidecar = written === sidecarPath;
+          if (!hasTimingSidecar) {
+            console.warn(
+              `[squisq-recorder] timing.json was saved as "${written}" instead of "${sidecarPath}" \u2014 auto-mapping may not pick it up.`
+            );
+          }
+        }
+      }
+      const result = {
+        relativePath,
+        filename,
+        source,
+        mimeType: recorder.mimeType,
+        duration: recorder.durationMs / 1e3,
+        hasTimingSidecar
+      };
+      if (source === "mic") {
+        result.sourceText = sourceText;
+      }
+      onSave?.(result);
+      handleClose();
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : "Failed to save recording");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [
+    recorder,
+    source,
+    isDual,
+    micOn,
+    screenOn,
+    includeSystemAudio,
+    basename,
+    filenameSeed,
+    sourceText,
+    mediaProvider,
+    container,
+    onSave,
+    handleClose
+  ]);
+  const handleDiscard = useCallback2(() => {
+    dualSaveProgressRef.current = {};
+    recorder.reset();
+  }, [recorder]);
+  const handlePlaybackTimeUpdate = useCallback2(
+    (media) => {
+      const currentMs = Number.isFinite(media.currentTime) ? media.currentTime * 1e3 : 0;
+      setPlaybackPositionMs(Math.min(recorder.durationMs, Math.max(0, currentMs)));
+    },
+    [recorder.durationMs]
+  );
+  const isAudioOnly = source === "mic";
+  const showPreview = recorder.state !== "idle" && recorder.state !== "error";
+  const canRecord = recorder.state === "ready";
+  const canStop = recorder.state === "recording";
+  const canSave = recorder.state === "stopped" && recorder.blob !== null;
+  const isBusy = recorder.state === "requesting" || recorder.state === "stopping" || isSaving;
+  const togglesLocked = recorder.state === "recording" || recorder.state === "requesting" || canSave;
+  const toggleLockReason = canSave ? "Save or discard this recording before changing sources" : void 0;
+  const systemAudioHasCompanion = micOn || cameraOn || screenOn;
+  const simpleToggleProps = (key) => {
+    const active = key === "mic" ? micOn : key === "camera" ? cameraOn : key === "screen" ? screenOn : includeSystemAudio;
+    if (key === "systemAudio") {
+      return {
+        active,
+        disabled: togglesLocked || !systemAudioHasCompanion,
+        title: togglesLocked ? toggleLockReason : !systemAudioHasCompanion ? "Turn on Microphone, Camera, or Screen to add system audio" : screenOn ? "Capture your computer\u2019s audio with the screen recording" : "Capture your computer\u2019s audio \u2014 you\u2019ll pick a screen or tab to share it",
+        onClick: () => setIncludeSystemAudio((on) => !on)
+      };
+    }
+    return {
+      active,
+      disabled: togglesLocked,
+      title: toggleLockReason,
+      onClick: () => {
+        if (key === "mic") setMicOn((on) => !on);
+        else if (key === "camera") setCameraOn((on) => !on);
+        else setScreenOn((on) => !on);
+      }
+    };
+  };
+  const narrationRecorderIdle = narrationQuiescent(stage.recorder.state);
+  const narrationTakeDone = stage.recorder.state === "processing" || stage.recorder.state === "review" || stage.recorder.state === "saving";
+  const narrationToggleDisabled = narrationToggleLocked(
+    recorder.state,
+    recorder.blob !== null || recorder.camera?.blob != null,
+    stage.recorder.state
+  );
+  const narrationToggleFor = (key) => {
+    switch (key) {
+      case "mic":
+        return {
+          active: true,
+          disabled: true,
+          title: "Narration always records your microphone",
+          onClick: () => {
+          }
+        };
+      case "camera":
+        return {
+          active: stage.recorder.withCamera,
+          disabled: !narrationRecorderIdle,
+          title: "Also capture your camera as a separate video file",
+          onClick: () => stage.recorder.setWithCamera(!stage.recorder.withCamera)
+        };
+      case "screen":
+        return {
+          active: false,
+          disabled: true,
+          title: "Screen capture isn't available in narration mode \u2014 uncheck Show narration mode",
+          onClick: () => {
+          }
+        };
+      case "systemAudio":
+        return {
+          active: false,
+          disabled: true,
+          title: "System audio isn't available in narration mode",
+          onClick: () => {
+          }
+        };
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      className: "squisq-editor-shell squisq-recorder-overlay",
+      "data-theme": colorScheme,
+      style: { ...overlayStyle, ...recorderThemeStyle(colorScheme) },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          className: "squisq-editor-shell",
+          "data-theme": colorScheme,
+          "data-narration": narrationOn ? "true" : void 0,
+          style: {
+            ...narrationOn ? modalExpandedStyle : modalStyle,
+            ...recorderThemeStyle(colorScheme)
+          },
+          onClick: (e) => e.stopPropagation(),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": headingId,
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsx("h2", { id: headingId, style: titleStyle, children: "Record media" }),
+            /* @__PURE__ */ jsxs("div", { style: narrationOn ? bodyRowStyle : void 0, children: [
+              /* @__PURE__ */ jsxs("div", { style: narrationOn ? leftColStyle : void 0, children: [
+                /* @__PURE__ */ jsx("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                  groupIndex > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: groupDividerStyle }),
+                  /* @__PURE__ */ jsx("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__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": props.active,
+                        style: props.active ? toggleActive : toggleBase,
+                        onClick: props.onClick,
+                        disabled: props.disabled,
+                        title: props.title,
+                        children: t.label
+                      },
+                      t.key
+                    );
+                  }) })
+                ] }, group.label)) }),
+                /* @__PURE__ */ jsx("p", { style: summaryStyle, children: narrationOn ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
+                narrationAvailable && /* @__PURE__ */ jsxs("label", { style: checkboxRowStyle, children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      style: { accentColor: "var(--squisq-recorder-accent)" },
+                      checked: narrationOn,
+                      onChange: (e) => setNarrationOn(e.target.checked),
+                      disabled: narrationToggleDisabled,
+                      title: narrationToggleDisabled ? narrationOn ? "Finish or discard the narration take first" : "Save or discard this recording before switching modes" : void 0
+                    }
+                  ),
+                  "Show narration mode"
+                ] }),
+                !narrationOn && recorder.error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: recorder.error.message }),
+                !narrationOn && saveError && /* @__PURE__ */ jsx("div", { style: errorStyle, children: saveError }),
+                narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
+                narrationOn && narrationCameraStream && /* @__PURE__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx(
+                  "video",
+                  {
+                    ref: previewRef,
+                    autoPlay: true,
+                    muted: true,
+                    playsInline: true,
+                    style: { width: "100%", height: "100%", objectFit: "contain" }
+                  }
+                ) }),
+                narrationOn && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx("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__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
+                narrationOn && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      style: {
+                        ...meterLevelStyle,
+                        width: `${Math.round(Math.min(1, Math.max(0, stage.controller.micLevel)) * 100)}%`
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("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__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx("span", { children: "Click Start Preview to start a recording." }) }),
+                !narrationOn && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
+                  /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      ref: previewRef,
+                      autoPlay: true,
+                      muted: true,
+                      playsInline: true,
+                      style: { width: "100%", height: "100%", objectFit: "contain" }
+                    }
+                  ),
+                  isDual && /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      ref: cameraPreviewRef,
+                      autoPlay: true,
+                      muted: true,
+                      playsInline: true,
+                      "aria-label": "Camera preview",
+                      style: {
+                        position: "absolute",
+                        right: "3%",
+                        bottom: "6%",
+                        width: "22%",
+                        aspectRatio: "16 / 9",
+                        objectFit: "cover",
+                        background: "#000",
+                        border: "1px solid rgba(255,255,255,0.6)"
+                      }
+                    }
+                  )
+                ] }),
+                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  "\u25CF Recording ",
+                  formatDurationMs(recorder.durationMs)
+                ] }) : /* @__PURE__ */ jsx(Fragment2, { children: "Microphone ready" }) }),
+                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      src: playbackUrl,
+                      controls: true,
+                      playsInline: true,
+                      onTimeUpdate: (event) => handlePlaybackTimeUpdate(event.currentTarget),
+                      onSeeking: (event) => handlePlaybackTimeUpdate(event.currentTarget),
+                      onEnded: () => setPlaybackPositionMs(recorder.durationMs),
+                      style: { width: "100%", height: "100%", objectFit: "contain" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      role: "timer",
+                      "aria-label": `Playback time: ${formatDurationMs(playbackPositionMs)} of ${formatDurationMs(recorder.durationMs)}`,
+                      style: playbackTimeStyle,
+                      children: [
+                        formatDurationMs(playbackPositionMs),
+                        " / ",
+                        formatDurationMs(recorder.durationMs)
+                      ]
+                    }
+                  )
+                ] }),
+                !narrationOn && recorder.state === "stopped" && isDual && cameraPlaybackUrl && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
+                  /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      src: cameraPlaybackUrl,
+                      controls: true,
+                      playsInline: true,
+                      "aria-label": "Camera recording",
+                      style: {
+                        width: "48%",
+                        display: "block",
+                        marginLeft: "auto",
+                        background: "#000"
+                      }
+                    }
+                  )
+                ] }),
+                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
+                    "\u2713 Recorded ",
+                    formatDurationMs(recorder.durationMs)
+                  ] }),
+                  /* @__PURE__ */ jsx("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
+                ] }),
+                !narrationOn && source === "mic" && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
+                  /* @__PURE__ */ jsx(
+                    "textarea",
+                    {
+                      id: "recorder-source-text",
+                      style: textareaStyle,
+                      placeholder: "Type the text you're going to read aloud.",
+                      value: sourceText,
+                      onChange: (e) => setSourceText(e.target.value),
+                      disabled: recorder.state === "recording"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: "recorder-basename",
+                    type: "text",
+                    style: inputStyle,
+                    placeholder: narrationOn ? "narration" : isDual ? "screen + camera" : filenameSeed,
+                    value: basename,
+                    onChange: (e) => setBasename(e.target.value),
+                    disabled: narrationOn ? !narrationRecorderIdle : recorder.state === "recording"
+                  }
+                ),
+                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs("div", { style: recordingStatusStyle, children: [
+                  "\u25CF Recording ",
+                  formatDurationMs(recorder.durationMs)
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: buttonRowStyle, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      style: btnSecondary,
+                      onClick: handleClose,
+                      disabled: !narrationOn && isBusy,
+                      children: "Close"
+                    }
+                  ),
+                  narrationOn && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        style: btnPrimary,
+                        onClick: () => void handleNarrationPreview(),
+                        disabled: narrationRequesting,
+                        children: narrationRequesting ? "Requesting\u2026" : "Start preview"
+                      }
+                    ),
+                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "squisq-recorder-record-dot",
+                          style: recordDotFrameStyle,
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "squisq-recorder-record-dot-center",
+                              style: recordDotStyle
+                            }
+                          )
+                        }
+                      ),
+                      "Record"
+                    ] }),
+                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        style: btnDanger,
+                        onClick: () => void stage.recorder.stop(),
+                        children: "Stop"
+                      }
+                    ),
+                    stage.recorder.state === "processing" && /* @__PURE__ */ jsx("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
+                    stage.recorder.state === "saving" && /* @__PURE__ */ jsx("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
+                    stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                      /* @__PURE__ */ jsx("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          style: btnPrimary,
+                          onClick: () => void stage.handleSave(),
+                          children: "Save to document"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  !narrationOn && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        style: btnPrimary,
+                        onClick: handleRequest,
+                        disabled: isBusy || !canCapture,
+                        children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
+                      }
+                    ),
+                    canRecord && /* @__PURE__ */ jsxs("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "squisq-recorder-record-dot",
+                          style: recordDotFrameStyle,
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "squisq-recorder-record-dot-center",
+                              style: recordDotStyle
+                            }
+                          )
+                        }
+                      ),
+                      "Record"
+                    ] }),
+                    canStop && /* @__PURE__ */ jsx("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
+                    canSave && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          style: btnSecondary,
+                          onClick: handleDiscard,
+                          disabled: isBusy,
+                          children: "Discard & re-record"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          style: btnPrimary,
+                          onClick: handleSave,
+                          disabled: isBusy,
+                          children: isSaving ? "Saving\u2026" : "Save to document"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              narrationOn && narration && /* @__PURE__ */ jsx("div", { style: rightColStyle, children: /* @__PURE__ */ jsx(
+                NarrationStage,
+                {
+                  stage,
+                  theme: narration.theme,
+                  showSelfView: false,
+                  showCameraToggleInRecordSlot: false,
+                  showRecordSlot: false,
+                  showTransportPlay: false,
+                  showReviewActions: false
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/recorder/RecorderPanel.tsx
+import { useCallback as useCallback3, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RecorderPanel({
+  mediaProvider,
+  container = null,
+  initialMode = "mic",
+  colorScheme = "light",
+  onSave,
+  narration = null,
+  tooltip = "Record media",
+  className,
+  open: controlledOpen,
+  onOpenChange,
+  showTrigger = true
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState3(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = useCallback3(
+    (nextOpen) => {
+      if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  const handleClose = useCallback3(() => setOpen(false), [setOpen]);
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    showTrigger && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className,
+        "data-tooltip": tooltip,
+        "aria-label": tooltip,
+        "aria-expanded": open,
+        onClick: () => setOpen(!open),
+        children: /* @__PURE__ */ jsx2(Icon, { icon: "fa-solid fa-microphone" })
+      }
+    ),
+    open && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx2(
+        RecorderModal,
+        {
+          mediaProvider,
+          container,
+          initialMode,
+          colorScheme,
+          narration,
+          onClose: handleClose,
+          onSave: (result) => {
+            onSave?.(result);
+          }
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+export {
+  requestScreenStream,
+  getCaptureKind,
+  useMediaRecorder,
+  useModalDialog,
+  RecorderModal,
+  RecorderPanel
+};