@bendyline/squisq-editor-react 2.3.4 → 2.4.1

package/dist/chunk-MJJK7YQB.js

@@ -1,949 +0,0 @@
-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
-};