@bendyline/squisq-video-react 2.0.1 → 2.1.0

package/dist/index.js

@@ -1,13 +1,23 @@
 import {
   createMp4Muxer
-} from "./chunk-6DKLHXX3.js";
+} from "./chunk-2PGWBGAT.js";
 
 // src/VideoExportModal.tsx
-import { useState as useState2, useCallback as useCallback3 } from "react";
+import { useState as useState2, useCallback as useCallback3, useId, useRef as useRef3 } from "react";
+import { useModalDialog } from "@bendyline/squisq-react";
 
 // src/hooks/useVideoExport.ts
 import { useState, useRef as useRef2, useCallback as useCallback2, useEffect } from "react";
-import { resolveDimensions, computeAudioTimeline, QUALITY_PRESETS } from "@bendyline/squisq-video";
+import {
+  DEFAULT_INTERACTIVE_RESOURCE_POLICY,
+  fetchResourceBytes
+} from "@bendyline/squisq/markdown";
+import {
+  resolveDimensions,
+  computeAudioTimeline,
+  resolveFfmpegWasmLoad as resolveFfmpegWasmLoad3,
+  QUALITY_PRESETS
+} from "@bendyline/squisq-video";
 
 // src/mainThreadEncoder.ts
 import { bitrateForQuality, validateVideoExportOptions } from "@bendyline/squisq-video";
@@ -43,14 +53,20 @@ function createEncoder(config) {
     ...config.audio ? { audio: config.audio } : {}
   });
   let closed = false;
+  let fatalError = null;
   const frameDuration = 1e6 / config.fps;
+  function fail(err) {
+    closed = true;
+    if (encoder.state !== "closed") encoder.close();
+    return fatalError ?? err;
+  }
   const encoder = new VideoEncoder({
     output(chunk, meta) {
       if (closed) return;
       muxer.addVideoChunk(chunk, meta ?? void 0);
     },
     error(err) {
-      console.error("WebCodecs encoder error:", err.message);
+      fatalError ?? (fatalError = new Error(`WebCodecs encoder error: ${err.message}`));
     }
   });
   encoder.configure({
@@ -66,6 +82,10 @@ function createEncoder(config) {
   });
   return {
     async encodeFrame(bitmap, frameIndex) {
+      if (fatalError) {
+        bitmap.close();
+        throw fail(fatalError);
+      }
       if (closed) {
         bitmap.close();
         throw new Error("Encoder already closed");
@@ -83,7 +103,13 @@ function createEncoder(config) {
     },
     async finalize() {
       if (closed) throw new Error("Encoder already closed");
-      await encoder.flush();
+      if (fatalError) throw fail(fatalError);
+      try {
+        await encoder.flush();
+      } catch (err) {
+        throw fail(err instanceof Error ? err : new Error(String(err)));
+      }
+      if (fatalError) throw fail(fatalError);
       encoder.close();
       closed = true;
       return muxer.finalize();
@@ -177,6 +203,7 @@ function createWorkerEncoder(config) {
     height: config.height,
     fps: config.fps,
     quality: config.quality,
+    ...config.totalFrames !== void 0 ? { totalFrames: config.totalFrames } : {},
     ...config.ffmpegWasm ? { ffmpegWasm: config.ffmpegWasm } : {}
   });
   return {
@@ -236,7 +263,8 @@ function createWorkerEncoder(config) {
 
 // src/audioTrack.ts
 import {
-  ffmpegAudioMuxArgs
+  ffmpegAudioMuxArgs,
+  resolveFfmpegWasmLoad
 } from "@bendyline/squisq-video";
 var EXPORT_AUDIO_SAMPLE_RATE = 48e3;
 var EXPORT_AUDIO_CHANNELS = 2;
@@ -382,13 +410,13 @@ function audioBufferToWav(buffer) {
   return new Uint8Array(out);
 }
 async function muxAudioWithFfmpegWasm(videoMp4, wav, audioBitrate, loadConfig) {
+  const load = resolveFfmpegWasmLoad(loadConfig, "ffmpeg.wasm audio muxing", {
+    classWorkerURL: new URL("./workers/ffmpeg.class-worker.js", import.meta.url).href
+  });
   const { FFmpeg } = await import("@ffmpeg/ffmpeg");
   const ffmpeg = new FFmpeg();
   try {
-    await ffmpeg.load({
-      ...loadConfig,
-      classWorkerURL: loadConfig?.classWorkerURL ?? new URL("./workers/ffmpeg.class-worker.js", import.meta.url).href
-    });
+    await ffmpeg.load(load);
     await ffmpeg.writeFile("video.mp4", videoMp4);
     await ffmpeg.writeFile("audio.wav", wav);
     const exitCode = await ffmpeg.exec([
@@ -413,7 +441,8 @@ async function muxAudioWithFfmpegWasm(videoMp4, wav, audioBitrate, loadConfig) {
 
 // src/gifTranscode.ts
 import {
-  ffmpegGifOutputArgs
+  ffmpegGifOutputArgs,
+  resolveFfmpegWasmLoad as resolveFfmpegWasmLoad2
 } from "@bendyline/squisq-video";
 function buildGifFfmpegArgs(options) {
   return ["-y", "-i", "video.mp4", ...ffmpegGifOutputArgs(options), "out.gif"];
@@ -425,6 +454,9 @@ async function transcodeMp4ToGifWithFfmpegWasm(videoMp4, options, loadConfig, si
   if (signal?.aborted) {
     throw new DOMException("Animated GIF export was cancelled.", "AbortError");
   }
+  const load = resolveFfmpegWasmLoad2(loadConfig, "Animated GIF export", {
+    classWorkerURL: new URL("./workers/ffmpeg.class-worker.js", import.meta.url).href
+  });
   const args = buildGifFfmpegArgs(options);
   const { FFmpeg } = await import("@ffmpeg/ffmpeg");
   const ffmpeg = new FFmpeg();
@@ -437,10 +469,7 @@ async function transcodeMp4ToGifWithFfmpegWasm(videoMp4, options, loadConfig, si
   const handleAbort = () => terminate();
   signal?.addEventListener("abort", handleAbort, { once: true });
   try {
-    await ffmpeg.load({
-      ...loadConfig,
-      classWorkerURL: loadConfig?.classWorkerURL ?? new URL("./workers/ffmpeg.class-worker.js", import.meta.url).href
-    });
+    await ffmpeg.load(load);
     if (signal?.aborted) {
       throw new DOMException("Animated GIF export was cancelled.", "AbortError");
     }
@@ -479,33 +508,24 @@ var MIME_MAP = {
   bmp: "image/bmp",
   avif: "image/avif"
 };
-function arrayBufferToDataUrl(buffer, mime) {
-  const bytes = new Uint8Array(buffer);
-  const chunks = [];
-  const CHUNK = 8192;
-  for (let i = 0; i < bytes.length; i += CHUNK) {
-    chunks.push(String.fromCharCode(...bytes.subarray(i, i + CHUNK)));
-  }
-  return `data:${mime};base64,${btoa(chunks.join(""))}`;
-}
 function createInlineProvider(images) {
-  const dataUrls = /* @__PURE__ */ new Map();
+  const blobUrls = /* @__PURE__ */ new Map();
   const mimeTypes = /* @__PURE__ */ new Map();
   for (const [path, buffer] of images) {
     const ext = path.split(".").pop()?.toLowerCase() ?? "";
     const mime = MIME_MAP[ext] ?? "application/octet-stream";
-    dataUrls.set(path, arrayBufferToDataUrl(buffer, mime));
+    blobUrls.set(path, URL.createObjectURL(new Blob([buffer], { type: mime })));
     mimeTypes.set(path, mime);
   }
   return {
     async resolveUrl(relativePath) {
-      return dataUrls.get(relativePath) ?? relativePath;
+      return blobUrls.get(relativePath) ?? relativePath;
     },
     async listMedia() {
-      return [...dataUrls.keys()].map((name) => ({
+      return [...blobUrls.keys()].map((name) => ({
         name,
         mimeType: mimeTypes.get(name) ?? "application/octet-stream",
-        size: 0
+        size: images.get(name)?.byteLength ?? 0
       }));
     },
     async addMedia() {
@@ -515,6 +535,8 @@ function createInlineProvider(images) {
       throw new Error("Read-only");
     },
     dispose() {
+      blobUrls.forEach((url) => URL.revokeObjectURL(url));
+      blobUrls.clear();
     }
   };
 }
@@ -522,19 +544,23 @@ function useFrameCapture() {
   const containerRef = useRef(null);
   const rootRef = useRef(null);
   const renderAPIRef = useRef(null);
+  const mediaProviderRef = useRef(null);
   const dimensionsRef = useRef({ width: 1920, height: 1080 });
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
-      if (rootRef.current || containerRef.current) {
+      if (rootRef.current || containerRef.current || mediaProviderRef.current) {
         const oldRoot = rootRef.current;
         const oldContainer = containerRef.current;
+        const oldMediaProvider = mediaProviderRef.current;
         rootRef.current = null;
         containerRef.current = null;
         renderAPIRef.current = null;
+        mediaProviderRef.current = null;
         await new Promise((resolve) => {
           setTimeout(() => {
             if (oldRoot) oldRoot.unmount();
             if (oldContainer) oldContainer.remove();
+            oldMediaProvider?.dispose();
             resolve();
           }, 0);
         });
@@ -552,6 +578,7 @@ function useFrameCapture() {
       renderRoot.style.cssText = `width:${width}px;height:${height}px;`;
       container.appendChild(renderRoot);
       const mediaProvider = renderOptions.images ? createInlineProvider(renderOptions.images) : null;
+      mediaProviderRef.current = mediaProvider;
       const root = createRoot(renderRoot);
       rootRef.current = root;
       const captionsEnabled = captionMode !== void 0 && captionMode !== "off";
@@ -639,12 +666,40 @@ function useFrameCapture() {
       containerRef.current.remove();
       containerRef.current = null;
     }
+    mediaProviderRef.current?.dispose();
+    mediaProviderRef.current = null;
     renderAPIRef.current = null;
   }, []);
   return useMemo(() => ({ init, captureFrame, destroy }), [init, captureFrame, destroy]);
 }
 
 // src/hooks/useVideoExport.ts
+var MAX_EXPORT_MEDIA_FILES = 256;
+var MAX_EXPORT_MEDIA_FILE_BYTES = 64 * 1024 * 1024;
+var MAX_EXPORT_MEDIA_TOTAL_BYTES = 256 * 1024 * 1024;
+function toArrayBuffer(bytes) {
+  return bytes.slice().buffer;
+}
+function collectDocumentMediaReferences(doc) {
+  const references = /* @__PURE__ */ new Set();
+  const seen = /* @__PURE__ */ new WeakSet();
+  const visit = (value) => {
+    if (typeof value === "string") {
+      references.add(value);
+      if (value.startsWith("./")) references.add(value.slice(2));
+      return;
+    }
+    if (!value || typeof value !== "object" || seen.has(value)) return;
+    seen.add(value);
+    if (Array.isArray(value)) {
+      value.forEach(visit);
+      return;
+    }
+    Object.values(value).forEach(visit);
+  };
+  visit(doc);
+  return references;
+}
 async function resolveAudioBuffers(clips, sources) {
   const srcs = new Set(clips.map((c) => c.src));
   const out = /* @__PURE__ */ new Map();
@@ -653,8 +708,10 @@ async function resolveAudioBuffers(clips, sources) {
     if (!data && sources.mediaProvider) {
       try {
         const url = await sources.mediaProvider.resolveUrl(src);
-        const res = await fetch(url);
-        if (res.ok) data = await res.arrayBuffer();
+        const resource = await fetchResourceBytes(url, {
+          policy: sources.resourcePolicy
+        });
+        data = toArrayBuffer(resource.bytes);
       } catch {
       }
     }
@@ -755,6 +812,7 @@ function useVideoExport() {
       const fps = config.fps ?? (effectiveOutputFormat === "gif" ? 10 : 30);
       const orientation = config.orientation ?? "landscape";
       const animationsEnabled = config.animationsEnabled ?? effectiveOutputFormat === "mp4";
+      const audioPolicy = config.audioPolicy ?? "require";
       setOutputFormat(effectiveOutputFormat);
       try {
         const gifDefaults = orientation === "portrait" ? { width: 540, height: 960 } : { width: 960, height: 540 };
@@ -772,6 +830,9 @@ function useVideoExport() {
             "Animated GIF export requires ffmpeg.wasm and SharedArrayBuffer (Cross-Origin-Isolation headers)."
           );
         }
+        if (effectiveOutputFormat === "gif") {
+          resolveFfmpegWasmLoad3(config.ffmpegWasm, "Animated GIF export");
+        }
         if (!webCodecsAvailable && !sharedArrayBufferAvailable) {
           throw new Error(
             "No video encoder available. WebCodecs requires Chrome 94+ / Edge 94+, and the ffmpeg.wasm fallback requires SharedArrayBuffer (Cross-Origin-Isolation headers)."
@@ -791,13 +852,38 @@ function useVideoExport() {
         if (!images && config.mediaProvider) {
           images = /* @__PURE__ */ new Map();
           const entries = await config.mediaProvider.listMedia();
-          for (const entry of entries) {
+          const references = collectDocumentMediaReferences(doc);
+          const neededEntries = entries.filter(
+            (entry) => references.has(entry.name) || references.has(`./${entry.name}`)
+          );
+          if (neededEntries.length > MAX_EXPORT_MEDIA_FILES) {
+            throw new Error(
+              `Document references ${neededEntries.length} media files; browser export supports at most ${MAX_EXPORT_MEDIA_FILES}.`
+            );
+          }
+          let totalMediaBytes = 0;
+          for (const entry of neededEntries) {
+            if (cancelledRef.current) return;
+            if (entry.size > MAX_EXPORT_MEDIA_FILE_BYTES) {
+              throw new Error(`Media file "${entry.name}" is too large for browser video export.`);
+            }
             const url2 = await config.mediaProvider.resolveUrl(entry.name);
-            const res = await fetch(url2);
-            if (res.ok) {
-              const data = await res.arrayBuffer();
-              images.set(entry.name, data);
+            const resource = await fetchResourceBytes(url2, {
+              policy: {
+                ...DEFAULT_INTERACTIVE_RESOURCE_POLICY,
+                ...config.resourcePolicy,
+                maxBytes: Math.min(
+                  config.resourcePolicy?.maxBytes ?? MAX_EXPORT_MEDIA_FILE_BYTES,
+                  MAX_EXPORT_MEDIA_FILE_BYTES
+                )
+              }
+            });
+            const data = toArrayBuffer(resource.bytes);
+            totalMediaBytes += data.byteLength;
+            if (totalMediaBytes > MAX_EXPORT_MEDIA_TOTAL_BYTES) {
+              throw new Error("Referenced media exceeds the browser video export memory limit.");
             }
+            images.set(entry.name, data);
           }
         }
         const docDuration = await frameCapture.init(
@@ -810,11 +896,12 @@ function useVideoExport() {
         if (docDuration <= 0) {
           throw new Error("Document has zero duration \u2014 nothing to export");
         }
+        const totalFrames = Math.ceil(docDuration * fps);
         setPhase("Starting encoder\u2026");
         setProgress(5);
         const canUseWebCodecs = webCodecsAvailable && await supportsWebCodecsH264({ width, height, fps, quality });
         const audioBitrate = (QUALITY_PRESETS[quality] ?? QUALITY_PRESETS.normal).audioBitrate;
-        const timeline = effectiveOutputFormat === "mp4" ? computeAudioTimeline(doc, 0) : [];
+        const timeline = effectiveOutputFormat === "mp4" && audioPolicy !== "omit" ? computeAudioTimeline(doc, 0) : [];
         const aacSupported = timeline.length > 0 ? await supportsWebCodecsAac(EXPORT_AUDIO_SAMPLE_RATE, EXPORT_AUDIO_CHANNELS) : false;
         const tierDecision = selectAudioTier({
           hasClips: timeline.length > 0,
@@ -825,16 +912,27 @@ function useVideoExport() {
         let renderedAudio = null;
         let audioIncludedLocal = false;
         let audioReasonLocal = tierDecision.reason;
+        if (timeline.length > 0 && tierDecision.tier === 3 && audioPolicy === "require") {
+          throw new Error(tierDecision.reason ?? "This browser cannot include the document audio.");
+        }
         if (tierDecision.tier === 1 || tierDecision.tier === 2) {
           setPhase("Preparing audio\u2026");
           try {
             const buffers = await resolveAudioBuffers(timeline, {
               audio: config.audio,
               images,
-              mediaProvider: config.mediaProvider
+              mediaProvider: config.mediaProvider,
+              resourcePolicy: config.resourcePolicy
             });
+            const missingSources = [...new Set(timeline.map((clip) => clip.src))].filter(
+              (src) => !buffers.has(src)
+            );
+            if (missingSources.length > 0) {
+              audioReasonLocal = `Audio files could not be loaded: ${missingSources.join(", ")}`;
+              if (audioPolicy === "require") throw new Error(audioReasonLocal);
+            }
             if (buffers.size === 0) {
-              audioReasonLocal = "Audio files for this document could not be loaded.";
+              audioReasonLocal ?? (audioReasonLocal = "Audio files for this document could not be loaded.");
             } else {
               const totalAudioDur = timeline.reduce(
                 (max, c) => Math.max(max, c.startSec + c.durationSec),
@@ -850,6 +948,7 @@ function useVideoExport() {
           } catch (audioErr) {
             renderedAudio = null;
             audioReasonLocal = `Audio could not be prepared: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
+            if (audioPolicy === "require") throw new Error(audioReasonLocal);
           }
         }
         const useInlineAudio = renderedAudio !== null && tierDecision.tier === 1;
@@ -876,6 +975,7 @@ function useVideoExport() {
             height,
             fps,
             quality,
+            totalFrames,
             ffmpegWasm: config.ffmpegWasm
           });
           encoder = workerEncoder;
@@ -892,7 +992,6 @@ function useVideoExport() {
         encoderRef.current = encoder;
         if (cancelledRef.current) return;
         setState("capturing");
-        const totalFrames = Math.ceil(docDuration * fps);
         const captureStartTime = performance.now();
         const UI_UPDATE_INTERVAL = 10;
         for (let i = 0; i < totalFrames; i++) {
@@ -930,6 +1029,7 @@ function useVideoExport() {
           } catch (audioErr) {
             audioIncludedLocal = false;
             audioReasonLocal = `Audio encoding failed: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
+            if (audioPolicy === "require") throw new Error(audioReasonLocal);
           }
         }
         setState("encoding");
@@ -968,6 +1068,7 @@ function useVideoExport() {
           } catch (audioErr) {
             audioIncludedLocal = false;
             audioReasonLocal = `Audio muxing failed: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
+            if (audioPolicy === "require") throw new Error(audioReasonLocal);
           }
         }
         if (cancelledRef.current) return;
@@ -1053,6 +1154,7 @@ var VIDEO_EXPORT_PALETTES = {
     secondary: "#E8DFC6",
     primary: "#8B6914",
     primaryBorder: "#7a5c10",
+    primaryText: "#ffffff",
     success: "#2d6a10",
     danger: "#a03020"
   },
@@ -1068,6 +1170,7 @@ var VIDEO_EXPORT_PALETTES = {
     secondary: "#1e293b",
     primary: "#9a7416",
     primaryBorder: "#d1a73b",
+    primaryText: "#ffffff",
     success: "#86efac",
     danger: "#fca5a5"
   }
@@ -1113,7 +1216,6 @@ var btnPrimary = {
   fontFamily: "inherit",
   fontWeight: 500,
   cursor: "pointer",
-  color: "#fff",
   borderRadius: 0
 };
 var btnSecondary = {
@@ -1145,8 +1247,12 @@ function VideoExportModal({
   audio,
   defaultConfig,
   colorScheme = "light",
+  uiPalette,
   onClose
 }) {
+  const overlayRef = useRef3(null);
+  const dialogRef = useRef3(null);
+  const titleId = useId();
   const initialOutputFormat = defaultConfig?.outputFormat ?? "mp4";
   const [outputFormat, setOutputFormat] = useState2(initialOutputFormat);
   const [quality, setQuality] = useState2(defaultConfig?.quality ?? "normal");
@@ -1158,7 +1264,13 @@ function VideoExportModal({
   const [animationsEnabled, setAnimationsEnabled] = useState2(
     defaultConfig?.animationsEnabled ?? initialOutputFormat === "mp4"
   );
-  const palette = VIDEO_EXPORT_PALETTES[colorScheme];
+  const [audioPolicy, setAudioPolicy] = useState2(
+    defaultConfig?.audioPolicy ?? "require"
+  );
+  const palette = {
+    ...VIDEO_EXPORT_PALETTES[colorScheme],
+    ...uiPalette
+  };
   const themedModalStyle = {
     ...modalStyle,
     background: palette.surface,
@@ -1178,7 +1290,8 @@ function VideoExportModal({
   const themedPrimaryButtonStyle = {
     ...btnPrimary,
     background: palette.primary,
-    border: `1px solid ${palette.primaryBorder}`
+    border: `1px solid ${palette.primaryBorder}`,
+    color: palette.primaryText
   };
   const themedSecondaryButtonStyle = {
     ...btnSecondary,
@@ -1223,6 +1336,7 @@ function VideoExportModal({
       fps,
       orientation,
       captionMode,
+      audioPolicy,
       images,
       audio,
       mediaProvider,
@@ -1238,6 +1352,7 @@ function VideoExportModal({
     fps,
     orientation,
     captionMode,
+    audioPolicy,
     images,
     audio,
     mediaProvider,
@@ -1263,202 +1378,247 @@ function VideoExportModal({
     onClose();
   }, [state, cancelExport, resetExport, onClose]);
   const isExporting = state === "preparing" || state === "capturing" || state === "encoding";
+  useModalDialog({ rootRef: overlayRef, dialogRef, onClose: handleClose });
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: overlayRef,
       style: { ...overlayStyle, background: palette.overlay },
       "data-color-scheme": colorScheme,
       onClick: handleClose,
-      children: /* @__PURE__ */ jsxs("div", { style: themedModalStyle, onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsx("h2", { style: themedTitleStyle, children: outputFormat === "gif" ? "Export Animated GIF" : "Export Video" }),
-        state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Format" }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                "aria-label": "Format",
-                style: themedSelectStyle,
-                value: outputFormat,
-                onChange: (e) => handleOutputFormatChange(e.target.value),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "mp4", children: "MP4 video" }),
-                  /* @__PURE__ */ jsx("option", { value: "gif", children: "Animated GIF" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Quality" }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                "aria-label": "Quality",
-                style: themedSelectStyle,
-                value: quality,
-                onChange: (e) => setQuality(e.target.value),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft \u2014 fast, lower quality" }),
-                  /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal \u2014 balanced" }),
-                  /* @__PURE__ */ jsx("option", { value: "high", children: "High \u2014 best quality, slower" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Frame Rate" }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                "aria-label": "Frame Rate",
-                style: themedSelectStyle,
-                value: fps,
-                onChange: (e) => setFps(Number(e.target.value)),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: 10, children: "10 fps \u2014 recommended for GIF" }),
-                  /* @__PURE__ */ jsx("option", { value: 15, children: "15 fps \u2014 fast export" }),
-                  /* @__PURE__ */ jsx("option", { value: 24, children: "24 fps \u2014 cinematic" }),
-                  /* @__PURE__ */ jsx("option", { value: 30, children: "30 fps \u2014 smooth" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Orientation" }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                "aria-label": "Orientation",
-                style: themedSelectStyle,
-                value: orientation,
-                onChange: (e) => setOrientation(e.target.value),
-                children: [
-                  /* @__PURE__ */ jsxs("option", { value: "landscape", children: [
-                    "Landscape (",
-                    outputFormat === "gif" ? "960 \xD7 540" : "1920 \xD7 1080",
-                    ")"
-                  ] }),
-                  /* @__PURE__ */ jsxs("option", { value: "portrait", children: [
-                    "Portrait (",
-                    outputFormat === "gif" ? "540 \xD7 960" : "1080 \xD7 1920",
-                    ")"
-                  ] })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Captions" }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                "aria-label": "Captions",
-                style: themedSelectStyle,
-                value: captionMode,
-                onChange: (e) => setCaptionMode(e.target.value),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "off", children: "None" }),
-                  /* @__PURE__ */ jsx("option", { value: "standard", children: "Standard (top bar)" }),
-                  /* @__PURE__ */ jsx("option", { value: "social", children: "Social media (large words)" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Animations & transitions" }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                "aria-label": "Animations and transitions",
-                style: themedSelectStyle,
-                value: animationsEnabled ? "enabled" : "disabled",
-                onChange: (e) => setAnimationsEnabled(e.target.value === "enabled"),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "enabled", children: "Enabled" }),
-                  /* @__PURE__ */ jsx("option", { value: "disabled", children: "Disabled \u2014 smaller files" })
-                ]
-              }
-            ),
-            outputFormat === "gif" && animationsEnabled && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.muted, margin: "-6px 0 12px" }, children: "Disabling motion is recommended for much smaller GIFs." })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
-            /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Cancel" }),
-            /* @__PURE__ */ jsx("button", { style: themedPrimaryButtonStyle, onClick: handleExport, children: outputFormat === "gif" ? "Export GIF" : "Export Video" })
-          ] })
-        ] }),
-        isExporting && /* @__PURE__ */ jsxs(Fragment, { children: [
-          backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 8px 0" }, children: [
-            "Encoder: ",
-            encoderLabel(completedOutputFormat, backend)
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: { ...progressBarOuterStyle, background: palette.secondary }, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: `${progress}%`,
-                height: "100%",
-                background: palette.primary,
-                transition: "width 0.3s ease"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, margin: "0 0 4px 0" }, children: [
-            progress,
-            "% complete"
-          ] }),
-          /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: 0 }, children: [
-            formatDuration(elapsed),
-            " elapsed",
-            estimatedRemaining > 0 && ` \xB7 ~${formatDuration(estimatedRemaining)} remaining`
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: footerStyle, children: /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: cancelExport, children: "Cancel" }) })
-        ] }),
-        state === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.success }, children: "Export complete!" }),
-          /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: palette.label, margin: "0 0 4px 0" }, children: [
-            "File size: ",
-            (fileSize / (1024 * 1024)).toFixed(1),
-            " MB"
-          ] }),
-          completedOutputFormat === "gif" ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 4px 0" }, children: "Animated GIF does not include audio." }) : audioIncluded ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.success, margin: "0 0 4px 0" }, children: "Audio included \u2713" }) : /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 4px 0" }, children: [
-            "Video only",
-            audioSkippedReason ? ` \u2014 ${audioSkippedReason}` : ""
-          ] }),
-          backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 12px 0" }, children: [
-            "Encoded with ",
-            encoderLabel(completedOutputFormat, backend)
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
-            /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Close" }),
-            /* @__PURE__ */ jsxs("button", { style: themedPrimaryButtonStyle, onClick: handleDownload, children: [
-              "Download ",
-              completedOutputFormat.toUpperCase()
-            ] })
-          ] })
-        ] }),
-        state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.danger }, children: "Export failed" }),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                fontSize: 13,
-                color: palette.label,
-                margin: "0 0 12px 0",
-                wordBreak: "break-word"
-              },
-              children: error
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
-            /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Close" }),
-            /* @__PURE__ */ jsxs("button", { style: themedPrimaryButtonStyle, onClick: handleExport, children: [
-              "Retry ",
-              outputFormat === "gif" ? "GIF" : "video"
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          tabIndex: -1,
+          style: themedModalStyle,
+          "data-squisq-video-export-modal": true,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, style: themedTitleStyle, children: outputFormat === "gif" ? "Export Animated GIF" : "Export Video" }),
+            state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Format" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Format",
+                    style: themedSelectStyle,
+                    value: outputFormat,
+                    onChange: (e) => handleOutputFormatChange(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "mp4", children: "MP4 video" }),
+                      /* @__PURE__ */ jsx("option", { value: "gif", children: "Animated GIF" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Quality" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Quality",
+                    style: themedSelectStyle,
+                    value: quality,
+                    onChange: (e) => setQuality(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft \u2014 fast, lower quality" }),
+                      /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal \u2014 balanced" }),
+                      /* @__PURE__ */ jsx("option", { value: "high", children: "High \u2014 best quality, slower" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Frame Rate" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Frame Rate",
+                    style: themedSelectStyle,
+                    value: fps,
+                    onChange: (e) => setFps(Number(e.target.value)),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: 10, children: "10 fps \u2014 recommended for GIF" }),
+                      /* @__PURE__ */ jsx("option", { value: 15, children: "15 fps \u2014 fast export" }),
+                      /* @__PURE__ */ jsx("option", { value: 24, children: "24 fps \u2014 cinematic" }),
+                      /* @__PURE__ */ jsx("option", { value: 30, children: "30 fps \u2014 smooth" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Orientation" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Orientation",
+                    style: themedSelectStyle,
+                    value: orientation,
+                    onChange: (e) => setOrientation(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsxs("option", { value: "landscape", children: [
+                        "Landscape (",
+                        outputFormat === "gif" ? "960 \xD7 540" : "1920 \xD7 1080",
+                        ")"
+                      ] }),
+                      /* @__PURE__ */ jsxs("option", { value: "portrait", children: [
+                        "Portrait (",
+                        outputFormat === "gif" ? "540 \xD7 960" : "1080 \xD7 1920",
+                        ")"
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Captions" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Captions",
+                    style: themedSelectStyle,
+                    value: captionMode,
+                    onChange: (e) => setCaptionMode(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "off", children: "None" }),
+                      /* @__PURE__ */ jsx("option", { value: "standard", children: "Standard (top bar)" }),
+                      /* @__PURE__ */ jsx("option", { value: "social", children: "Social media (large words)" })
+                    ]
+                  }
+                )
+              ] }),
+              outputFormat === "mp4" && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Audio" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Audio handling",
+                    style: themedSelectStyle,
+                    value: audioPolicy,
+                    onChange: (e) => setAudioPolicy(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "require", children: "Require document audio" }),
+                      /* @__PURE__ */ jsx("option", { value: "best-effort", children: "Best effort \u2014 allow video-only fallback" }),
+                      /* @__PURE__ */ jsx("option", { value: "omit", children: "Omit audio intentionally" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Animations & transitions" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Animations and transitions",
+                    style: themedSelectStyle,
+                    value: animationsEnabled ? "enabled" : "disabled",
+                    onChange: (e) => setAnimationsEnabled(e.target.value === "enabled"),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "enabled", children: "Enabled" }),
+                      /* @__PURE__ */ jsx("option", { value: "disabled", children: "Disabled \u2014 smaller files" })
+                    ]
+                  }
+                ),
+                outputFormat === "gif" && animationsEnabled && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.muted, margin: "-6px 0 12px" }, children: "Disabling motion is recommended for much smaller GIFs." })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+                /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Cancel" }),
+                /* @__PURE__ */ jsx("button", { style: themedPrimaryButtonStyle, onClick: handleExport, children: outputFormat === "gif" ? "Export GIF" : "Export Video" })
+              ] })
+            ] }),
+            isExporting && /* @__PURE__ */ jsxs(Fragment, { children: [
+              backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 8px 0" }, children: [
+                "Encoder: ",
+                encoderLabel(completedOutputFormat, backend)
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "progressbar",
+                  "aria-label": "Video export progress",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": progress,
+                  style: { ...progressBarOuterStyle, background: palette.secondary },
+                  "data-squisq-video-export-progress-track": true,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: `${progress}%`,
+                        height: "100%",
+                        background: palette.primary,
+                        transition: "width 0.3s ease"
+                      },
+                      "data-squisq-video-export-progress": true
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, margin: "0 0 4px 0" }, children: [
+                progress,
+                "% complete"
+              ] }),
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: 0 }, children: [
+                formatDuration(elapsed),
+                " elapsed",
+                estimatedRemaining > 0 && ` \xB7 ~${formatDuration(estimatedRemaining)} remaining`
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: footerStyle, children: /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: cancelExport, children: "Cancel" }) })
+            ] }),
+            state === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.success }, children: "Export complete!" }),
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: palette.label, margin: "0 0 4px 0" }, children: [
+                "File size: ",
+                (fileSize / (1024 * 1024)).toFixed(1),
+                " MB"
+              ] }),
+              completedOutputFormat === "gif" ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 4px 0" }, children: "Animated GIF does not include audio." }) : audioIncluded ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.success, margin: "0 0 4px 0" }, children: "Audio included \u2713" }) : /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 4px 0" }, children: [
+                "Video only",
+                audioSkippedReason ? ` \u2014 ${audioSkippedReason}` : ""
+              ] }),
+              backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 12px 0" }, children: [
+                "Encoded with ",
+                encoderLabel(completedOutputFormat, backend)
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+                /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Close" }),
+                /* @__PURE__ */ jsxs("button", { style: themedPrimaryButtonStyle, onClick: handleDownload, children: [
+                  "Download ",
+                  completedOutputFormat.toUpperCase()
+                ] })
+              ] })
+            ] }),
+            state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.danger }, children: "Export failed" }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    fontSize: 13,
+                    color: palette.label,
+                    margin: "0 0 12px 0",
+                    wordBreak: "break-word"
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+                /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Close" }),
+                /* @__PURE__ */ jsxs("button", { style: themedPrimaryButtonStyle, onClick: handleExport, children: [
+                  "Retry ",
+                  outputFormat === "gif" ? "GIF" : "video"
+                ] })
+              ] })
             ] })
-          ] })
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -1475,6 +1635,7 @@ function VideoExportButton({
   audio,
   defaultConfig,
   colorScheme,
+  uiPalette,
   label,
   style,
   disabled
@@ -1496,6 +1657,7 @@ function VideoExportButton({
           audio,
           defaultConfig,
           colorScheme,
+          uiPalette,
           onClose: handleClose
         }
       ),
@@ -1513,4 +1675,3 @@ export {
   useFrameCapture,
   useVideoExport
 };
-//# sourceMappingURL=index.js.map