@bendyline/squisq-editor-react 2.1.0 → 2.3.0

package/dist/chunk-MJJK7YQB.js

@@ -0,0 +1,949 @@
+import {
+  Icon
+} from "./chunk-GS7QWYFT.js";
+import {
+  buildFilename,
+  buildTimingJson,
+  encodeTimingJson,
+  requestCameraStream,
+  requestMicStream,
+  resolveFormat,
+  supportsDisplayMedia,
+  supportsMediaRecorder,
+  supportsUserMedia,
+  timingPathFor,
+  useStreamPreview
+} from "./chunk-5Q4JN4I5.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";
+async function acquireStream(source, opts) {
+  switch (source) {
+    case "mic": {
+      const audio = typeof opts.audioConstraints === "object" ? opts.audioConstraints : void 0;
+      const stream = await requestMicStream(audio);
+      return { stream, dispose: () => {
+      } };
+    }
+    case "camera": {
+      const stream = await requestCameraStream({
+        video: opts.videoConstraints ?? true,
+        audio: opts.includeMicrophone === false ? false : opts.audioConstraints ?? true
+      });
+      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 };
+    }
+  }
+}
+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 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 optionsRef = useRef(options);
+  optionsRef.current = options;
+  const clearTicker = useCallback(() => {
+    if (tickerRef.current !== null) {
+      clearInterval(tickerRef.current);
+      tickerRef.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 reset = useCallback(() => {
+    setBlob(null);
+    setDurationMs(0);
+    setError(null);
+    chunksRef.current = [];
+    startTimestampRef.current = null;
+    clearTicker();
+    const rec = recorderRef.current;
+    if (rec && rec.state === "inactive" && rec.stream.active) {
+      setState("ready");
+    } else {
+      setState("idle");
+    }
+  }, [clearTicker]);
+  const cancel = useCallback(() => {
+    lifecycleRef.current += 1;
+    const rec = recorderRef.current;
+    if (rec && rec.state !== "inactive") {
+      try {
+        rec.ondataavailable = null;
+        rec.onstop = null;
+        rec.onerror = null;
+        rec.stop();
+      } catch {
+      }
+    }
+    recorderRef.current = null;
+    releaseStream();
+    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);
+    setState("idle");
+  }, [clearTicker, releaseStream]);
+  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);
+      setState("error");
+      throw err;
+    }
+    const lifecycle = ++lifecycleRef.current;
+    const requestPromise = (async () => {
+      setError(null);
+      setState("requesting");
+      let acquired = null;
+      try {
+        const source = optionsRef.current.source ?? "mic";
+        acquired = await acquireStream(source, optionsRef.current);
+        const { stream: nextStream, dispose } = acquired;
+        if (lifecycle !== lifecycleRef.current) {
+          nextStream.getTracks().forEach((track) => track.stop());
+          dispose();
+          return;
+        }
+        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;
+        }
+        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;
+          const recordedType = recorder.mimeType || resolved.mimeType || "application/octet-stream";
+          const finalBlob = new Blob(chunksRef.current, { type: recordedType });
+          chunksRef.current = [];
+          setBlob(finalBlob);
+          setState("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);
+          setState("error");
+          clearTicker();
+          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);
+        setState("ready");
+        acquired = null;
+      } catch (err) {
+        if (acquired) {
+          acquired.stream.getTracks().forEach((track) => track.stop());
+          acquired.dispose();
+        }
+        const normalized = err instanceof Error ? err : new Error("Stream acquisition failed");
+        if (lifecycle === lifecycleRef.current) {
+          setError(normalized);
+          setState("error");
+        }
+        throw normalized;
+      } finally {
+        if (lifecycle === lifecycleRef.current) requestPromiseRef.current = null;
+      }
+    })();
+    requestPromiseRef.current = requestPromise;
+    return requestPromise;
+  }, [clearTicker]);
+  const start = useCallback(() => {
+    const rec = recorderRef.current;
+    if (!rec) {
+      const err = new Error("Recorder is not ready. Call request() first.");
+      setError(err);
+      setState("error");
+      return;
+    }
+    if (rec.state === "recording") return;
+    chunksRef.current = [];
+    setBlob(null);
+    setDurationMs(0);
+    startTimestampRef.current = Date.now();
+    rec.start(1e3);
+    setState("recording");
+    clearTicker();
+    tickerRef.current = setInterval(() => {
+      if (startTimestampRef.current !== null) {
+        setDurationMs(Date.now() - startTimestampRef.current);
+      }
+    }, 100);
+  }, [clearTicker]);
+  const stop = useCallback(() => {
+    if (stopPromiseRef.current) return stopPromiseRef.current;
+    const rec = recorderRef.current;
+    if (!rec || rec.state === "inactive") {
+      return Promise.resolve(blob);
+    }
+    setState("stopping");
+    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);
+        setState("error");
+        clearTicker();
+        stopResolversRef.current.splice(0).forEach((r) => r(null));
+      }
+    });
+    stopPromiseRef.current = stopPromise;
+    void stopPromise.finally(() => {
+      if (stopPromiseRef.current === stopPromise) stopPromiseRef.current = null;
+    });
+    return stopPromise;
+  }, [blob, clearTicker]);
+  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.onstop = null;
+          rec.onerror = null;
+          rec.stop();
+        } catch {
+        }
+      }
+      releaseStream();
+      clearTicker();
+      pendingResolvers.splice(0).forEach((resolve) => resolve(null));
+      stopPromiseRef.current = null;
+    };
+  }, [releaseStream, clearTicker]);
+  return {
+    state,
+    stream,
+    blob,
+    mimeType: format?.mimeType ?? null,
+    extension: format?.extension ?? null,
+    directory: format?.directory ?? null,
+    durationMs,
+    error,
+    request,
+    start,
+    stop,
+    cancel,
+    reset
+  };
+}
+
+// src/recorder/RecorderModal.tsx
+import { 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/RecorderModal.tsx
+import { Fragment, 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 toggleRowStyle = {
+  display: "flex",
+  gap: 8,
+  marginBottom: 16
+};
+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 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
+};
+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, video) {
+  if (video === "camera") return "camera";
+  if (video === "screen") return micOn ? "screen+mic" : "screen";
+  return micOn ? "mic" : null;
+}
+function toggleStateFromMode(mode) {
+  switch (mode) {
+    case "mic":
+      return { micOn: true, video: "none" };
+    case "camera":
+      return { micOn: true, video: "camera" };
+    case "screen":
+      return { micOn: false, video: "screen" };
+    case "screen+mic":
+      return { micOn: true, video: "screen" };
+  }
+}
+var TOGGLES = [
+  { key: "mic", label: "Microphone" },
+  { key: "camera", label: "Camera" },
+  { key: "screen", label: "Screen" }
+];
+function captureSummary(micOn, video) {
+  if (video === "camera") {
+    return micOn ? "Camera video with your microphone. Saved as a video clip." : "Camera video only (no microphone). Saved as a video clip.";
+  }
+  if (video === "screen") {
+    return micOn ? "Screen capture with your microphone mixed in. System audio when available." : "Screen capture (no microphone). System audio when available.";
+  }
+  return micOn ? "Voice-only audio. Pairs with a written script for auto-mapping to blocks." : "Pick at least one source to record.";
+}
+function RecorderModal({
+  mediaProvider,
+  container = null,
+  initialMode = "mic",
+  colorScheme = "light",
+  onClose,
+  onSave
+}) {
+  const initialToggles = toggleStateFromMode(initialMode);
+  const [micOn, setMicOn] = useState2(initialToggles.micOn);
+  const [video, setVideo] = useState2(initialToggles.video);
+  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 overlayRef = useRef2(null);
+  const dialogRef = useRef2(null);
+  const headingId = useId();
+  const previewRef = useRef2(null);
+  const derivedSource = deriveSource(micOn, video);
+  const canCapture = derivedSource !== null;
+  const source = derivedSource ?? "mic";
+  const recorder = useMediaRecorder({
+    source,
+    includeMicrophone: video === "camera" ? micOn : void 0,
+    systemAudio: video === "screen" ? includeSystemAudio : false
+  });
+  useStreamPreview(previewRef, recorder.state === "stopped" ? null : recorder.stream);
+  useEffect2(() => {
+    if (!recorder.blob) {
+      setPlaybackUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(recorder.blob);
+    setPlaybackUrl(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [recorder.blob]);
+  const captureKey = `${source}:${video === "camera" ? micOn : ""}:${includeSystemAudio}`;
+  const previousKeyRef = useRef2(captureKey);
+  useEffect2(() => {
+    if (previousKeyRef.current !== captureKey) {
+      previousKeyRef.current = captureKey;
+      recorder.cancel();
+    }
+  }, [captureKey, recorder]);
+  const handleClose = useCallback2(() => {
+    recorder.cancel();
+    onClose();
+  }, [recorder, onClose]);
+  useModalDialog({ rootRef: overlayRef, dialogRef, onClose: handleClose });
+  const handleRequest = useCallback2(async () => {
+    setSaveError(null);
+    try {
+      await recorder.request();
+    } catch {
+    }
+  }, [recorder]);
+  const handleStart = useCallback2(() => {
+    setSaveError(null);
+    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;
+    }
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      const filename = buildFilename(
+        source === "mic" ? "audio" : "video",
+        recorder.extension,
+        basename
+      );
+      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, basename, sourceText, mediaProvider, container, onSave, handleClose]);
+  const handleDiscard = useCallback2(() => {
+    recorder.reset();
+  }, [recorder]);
+  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 toggleActiveFor = (key) => key === "mic" ? micOn : video === key;
+  const onToggle = (key) => {
+    if (key === "mic") {
+      setMicOn((on) => !on);
+    } else {
+      setVideo((v) => v === key ? "none" : key);
+    }
+  };
+  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,
+          style: { ...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__ */ jsx("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLES.map((t) => {
+              const active = toggleActiveFor(t.key);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": active,
+                  style: active ? toggleActive : toggleBase,
+                  onClick: () => onToggle(t.key),
+                  disabled: togglesLocked,
+                  title: toggleLockReason,
+                  children: t.label
+                },
+                t.key
+              );
+            }) }),
+            /* @__PURE__ */ jsx("p", { style: summaryStyle, children: captureSummary(micOn, video) }),
+            recorder.error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: recorder.error.message }),
+            saveError && /* @__PURE__ */ jsx("div", { style: errorStyle, children: saveError }),
+            !showPreview && /* @__PURE__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx("span", { children: "Click Start Preview to start a recording." }) }),
+            showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx(
+              "video",
+              {
+                ref: previewRef,
+                autoPlay: true,
+                muted: true,
+                playsInline: true,
+                style: { width: "100%", height: "100%", objectFit: "contain" }
+              }
+            ) }),
+            showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              "\u25CF Recording ",
+              formatDurationMs(recorder.durationMs)
+            ] }) : /* @__PURE__ */ jsx(Fragment, { children: "Microphone ready" }) }),
+            recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsx("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx(
+              "video",
+              {
+                src: playbackUrl,
+                controls: true,
+                playsInline: true,
+                style: { width: "100%", height: "100%", objectFit: "contain" }
+              }
+            ) }),
+            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%" } })
+            ] }),
+            source === "mic" && /* @__PURE__ */ jsxs(Fragment, { 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"
+                }
+              )
+            ] }),
+            video === "screen" && /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  marginBottom: 12,
+                  fontSize: 13
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      style: { accentColor: "var(--squisq-recorder-accent)" },
+                      checked: includeSystemAudio,
+                      onChange: (e) => setIncludeSystemAudio(e.target.checked),
+                      disabled: recorder.state === "recording" || recorder.state === "requesting"
+                    }
+                  ),
+                  "Include system audio (Chrome only)"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "recorder-basename",
+                type: "text",
+                style: inputStyle,
+                placeholder: source === "mic" ? "narration" : "recording",
+                value: basename,
+                onChange: (e) => setBasename(e.target.value),
+                disabled: recorder.state === "recording"
+              }
+            ),
+            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: isBusy, children: "Close" }),
+              (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__ */ jsx("button", { type: "button", style: btnPrimary, onClick: handleStart, disabled: isBusy, children: "Record" }),
+              canStop && /* @__PURE__ */ jsx("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
+              canSave && /* @__PURE__ */ jsxs(Fragment, { 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" })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/recorder/RecorderPanel.tsx
+import { useCallback as useCallback3, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RecorderPanel({
+  mediaProvider,
+  container = null,
+  initialMode = "mic",
+  colorScheme = "light",
+  onSave,
+  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(Fragment2, { 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,
+          onClose: handleClose,
+          onSave: (result) => {
+            onSave?.(result);
+          }
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+export {
+  requestScreenStream,
+  getCaptureKind,
+  useMediaRecorder,
+  useModalDialog,
+  RecorderModal,
+  RecorderPanel
+};