@bendyline/squisq-video-react 2.1.0 → 2.2.1

package/dist/index.js

@@ -1,1670 +1,18 @@
 import {
-  createMp4Muxer
-} from "./chunk-2PGWBGAT.js";
-
-// src/VideoExportModal.tsx
-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 {
-  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";
-function supportsWebCodecs() {
-  return typeof VideoEncoder !== "undefined" && typeof VideoFrame !== "undefined";
-}
-async function supportsWebCodecsH264(config) {
-  if (!supportsWebCodecs()) return false;
-  try {
-    const support = await VideoEncoder.isConfigSupported({
-      codec: "avc1.640028",
-      width: config.width,
-      height: config.height,
-      bitrate: bitrateForQuality(config.quality, config.width, config.height),
-      framerate: config.fps
-    });
-    return support.supported === true;
-  } catch {
-    return false;
-  }
-}
-function createEncoder(config) {
-  validateVideoExportOptions(config);
-  if (!supportsWebCodecs()) {
-    throw new Error(
-      "WebCodecs is not available in this browser. Video export requires Chrome 94+, Edge 94+, or another Chromium-based browser."
-    );
-  }
-  const muxer = createMp4Muxer({
-    width: config.width,
-    height: config.height,
-    fps: config.fps,
-    ...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) {
-      fatalError ?? (fatalError = new Error(`WebCodecs encoder error: ${err.message}`));
-    }
-  });
-  encoder.configure({
-    // Deliberate profile split from the fallback worker (avc1.42001f, Baseline):
-    // this primary WebCodecs path targets H.264 High@4.0 for better quality up
-    // to 1080p; the wasm-fallback worker uses Baseline for max decoder compat.
-    codec: "avc1.640028",
-    // H.264 High profile, level 4.0 (supports up to 1080p)
-    width: config.width,
-    height: config.height,
-    bitrate: bitrateForQuality(config.quality, config.width, config.height),
-    framerate: config.fps
-  });
-  return {
-    async encodeFrame(bitmap, frameIndex) {
-      if (fatalError) {
-        bitmap.close();
-        throw fail(fatalError);
-      }
-      if (closed) {
-        bitmap.close();
-        throw new Error("Encoder already closed");
-      }
-      const timestamp = Math.round(frameIndex * frameDuration);
-      const frame = new VideoFrame(bitmap, { timestamp });
-      const keyFrame = frameIndex % 30 === 0;
-      encoder.encode(frame, { keyFrame });
-      frame.close();
-      bitmap.close();
-    },
-    addAudioChunk(chunk, meta) {
-      if (closed || !muxer.hasAudioTrack) return;
-      muxer.addAudioChunk(chunk, meta);
-    },
-    async finalize() {
-      if (closed) throw new Error("Encoder already closed");
-      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();
-    },
-    close() {
-      if (closed) return;
-      closed = true;
-      if (encoder.state !== "closed") {
-        encoder.close();
-      }
-    }
-  };
-}
-
-// src/workerEncoder.ts
-import { validateVideoExportOptions as validateVideoExportOptions2 } from "@bendyline/squisq-video";
-function createWorkerEncoder(config) {
-  validateVideoExportOptions2(config);
-  const worker = new Worker(new URL("./workers/encode.worker.js", import.meta.url), {
-    type: "module"
-  });
-  let state = "open";
-  let fatalError = null;
-  let finalizeResolve = null;
-  let finalizeReject = null;
-  let readyResolve = null;
-  let readyReject = null;
-  let readySettled = false;
-  const frameWaiters = /* @__PURE__ */ new Map();
-  const ready = new Promise((resolve, reject) => {
-    readyResolve = resolve;
-    readyReject = reject;
-  });
-  const frameDuration = 1e6 / config.fps;
-  function post(msg, transfer) {
-    worker.postMessage(msg, transfer ?? []);
-  }
-  const currentState = () => state;
-  worker.onmessage = (event) => {
-    const msg = event.data;
-    switch (msg.type) {
-      case "capabilities":
-        readySettled = true;
-        readyResolve?.(msg.backend);
-        readyResolve = readyReject = null;
-        break;
-      case "frame-complete": {
-        const waiter = frameWaiters.get(msg.frameIndex);
-        waiter?.resolve();
-        frameWaiters.delete(msg.frameIndex);
-        break;
-      }
-      case "complete":
-        state = "closed";
-        finalizeResolve?.(msg.data);
-        finalizeResolve = finalizeReject = null;
-        worker.terminate();
-        break;
-      case "error": {
-        const err = new Error(msg.message);
-        fatalError = err;
-        state = "closed";
-        readySettled = true;
-        readyReject?.(err);
-        finalizeReject?.(err);
-        for (const waiter of frameWaiters.values()) waiter.reject(err);
-        frameWaiters.clear();
-        readyResolve = readyReject = null;
-        finalizeResolve = finalizeReject = null;
-        worker.terminate();
-        break;
-      }
-    }
-  };
-  worker.onerror = (event) => {
-    const err = new Error(event.message || "Worker error");
-    fatalError = err;
-    state = "closed";
-    readySettled = true;
-    readyReject?.(err);
-    finalizeReject?.(err);
-    for (const waiter of frameWaiters.values()) waiter.reject(err);
-    frameWaiters.clear();
-    readyResolve = readyReject = null;
-    finalizeResolve = finalizeReject = null;
-    worker.terminate();
-  };
-  post({
-    type: "init",
-    width: config.width,
-    height: config.height,
-    fps: config.fps,
-    quality: config.quality,
-    ...config.totalFrames !== void 0 ? { totalFrames: config.totalFrames } : {},
-    ...config.ffmpegWasm ? { ffmpegWasm: config.ffmpegWasm } : {}
-  });
-  return {
-    ready,
-    encodeFrame(bitmap, frameIndex) {
-      if (state !== "open" || fatalError) {
-        bitmap.close();
-        return Promise.reject(fatalError ?? new Error("Encoder is not accepting frames"));
-      }
-      if (frameWaiters.has(frameIndex)) {
-        bitmap.close();
-        return Promise.reject(new Error(`Frame ${frameIndex} was submitted more than once`));
-      }
-      let resolveFrame;
-      let rejectFrame;
-      const promise = new Promise((resolve, reject) => {
-        resolveFrame = resolve;
-        rejectFrame = reject;
-      });
-      frameWaiters.set(frameIndex, { promise, resolve: resolveFrame, reject: rejectFrame });
-      const timestamp = Math.round(frameIndex * frameDuration);
-      post({ type: "frame", bitmap, frameIndex, timestamp }, [bitmap]);
-      return promise;
-    },
-    async finalize() {
-      if (state !== "open") throw new Error("Encoder already closed or finalizing");
-      if (fatalError) throw fatalError;
-      state = "finalizing";
-      await Promise.all(Array.from(frameWaiters.values(), (waiter) => waiter.promise));
-      if (currentState() === "closed") {
-        throw fatalError ?? new Error("Encoder closed during finalization");
-      }
-      return new Promise((resolve, reject) => {
-        finalizeResolve = resolve;
-        finalizeReject = reject;
-        post({ type: "finalize" });
-      });
-    },
-    close() {
-      if (state === "closed") return;
-      state = "closed";
-      const err = new Error("Encoder closed");
-      if (!readySettled) {
-        readySettled = true;
-        readyReject?.(err);
-      }
-      finalizeReject?.(err);
-      for (const waiter of frameWaiters.values()) waiter.reject(err);
-      frameWaiters.clear();
-      readyResolve = readyReject = null;
-      finalizeResolve = finalizeReject = null;
-      post({ type: "cancel" });
-      worker.terminate();
-    }
-  };
-}
-
-// src/audioTrack.ts
+  VideoExportButton,
+  VideoExportModal
+} from "./chunk-KQG6DZ7G.js";
 import {
-  ffmpegAudioMuxArgs,
-  resolveFfmpegWasmLoad
-} from "@bendyline/squisq-video";
-var EXPORT_AUDIO_SAMPLE_RATE = 48e3;
-var EXPORT_AUDIO_CHANNELS = 2;
-var REASON_NO_AAC_NO_SAB = "This browser cannot encode AAC audio (WebCodecs AudioEncoder unavailable) and the ffmpeg.wasm fallback requires cross-origin isolation (SharedArrayBuffer).";
-async function supportsWebCodecsAac(sampleRate = EXPORT_AUDIO_SAMPLE_RATE, channels = EXPORT_AUDIO_CHANNELS) {
-  if (typeof AudioEncoder === "undefined") return false;
-  try {
-    const support = await AudioEncoder.isConfigSupported({
-      codec: "mp4a.40.2",
-      sampleRate,
-      numberOfChannels: channels,
-      bitrate: 128e3
-    });
-    return support.supported === true;
-  } catch {
-    return false;
-  }
-}
-function selectAudioTier(inputs) {
-  if (!inputs.hasClips) {
-    return { tier: 3, reason: null };
-  }
-  if (inputs.aacSupported && inputs.canUseMainThreadWebCodecs) {
-    return { tier: 1, reason: null };
-  }
-  if (inputs.sharedArrayBufferAvailable) {
-    return { tier: 2, reason: null };
-  }
-  return { tier: 3, reason: REASON_NO_AAC_NO_SAB };
-}
-function resolveOfflineAudioContext() {
-  const g = globalThis;
-  const ctor = g.OfflineAudioContext ?? g.webkitOfflineAudioContext;
-  if (!ctor) {
-    throw new Error("OfflineAudioContext is not available in this environment.");
-  }
-  return ctor;
-}
-async function renderAudioTimeline(clips, buffers, totalDurationSec, sampleRate = EXPORT_AUDIO_SAMPLE_RATE) {
-  const Ctor = resolveOfflineAudioContext();
-  const channels = EXPORT_AUDIO_CHANNELS;
-  const length = Math.max(1, Math.ceil(totalDurationSec * sampleRate));
-  const ctx = new Ctor(channels, length, sampleRate);
-  const decoded = /* @__PURE__ */ new Map();
-  for (const [src, data] of buffers) {
-    try {
-      decoded.set(src, await ctx.decodeAudioData(data.slice(0)));
-    } catch {
-    }
-  }
-  for (const clip of clips) {
-    const buffer = decoded.get(clip.src);
-    if (!buffer) continue;
-    const node = ctx.createBufferSource();
-    node.buffer = buffer;
-    node.connect(ctx.destination);
-    const when = Math.max(0, clip.startSec);
-    const offset = Math.max(0, clip.sourceInSec);
-    const duration = Math.max(0, clip.durationSec);
-    node.start(when, offset, duration);
-  }
-  return ctx.startRendering();
-}
-async function encodeAacTrack(audioBuffer, sink, bitrate) {
-  if (typeof AudioEncoder === "undefined" || typeof AudioData === "undefined") {
-    throw new Error("WebCodecs AudioEncoder is not available.");
-  }
-  const sampleRate = audioBuffer.sampleRate;
-  const channels = audioBuffer.numberOfChannels;
-  let encodeError = null;
-  const encoder = new AudioEncoder({
-    output: (chunk, meta) => sink.addAudioChunk(chunk, meta ?? void 0),
-    error: (err) => {
-      encodeError = err instanceof Error ? err : new Error(String(err));
-    }
-  });
-  encoder.configure({ codec: "mp4a.40.2", sampleRate, numberOfChannels: channels, bitrate });
-  const FRAME = 1024;
-  const total = audioBuffer.length;
-  const channelData = [];
-  for (let ch = 0; ch < channels; ch++) {
-    channelData.push(audioBuffer.getChannelData(ch));
-  }
-  for (let offset = 0; offset < total; offset += FRAME) {
-    if (encodeError) break;
-    const count = Math.min(FRAME, total - offset);
-    const planar = new Float32Array(count * channels);
-    for (let ch = 0; ch < channels; ch++) {
-      planar.set(channelData[ch].subarray(offset, offset + count), ch * count);
-    }
-    const timestamp = Math.round(offset / sampleRate * 1e6);
-    const audioData = new AudioData({
-      format: "f32-planar",
-      sampleRate,
-      numberOfFrames: count,
-      numberOfChannels: channels,
-      timestamp,
-      data: planar
-    });
-    encoder.encode(audioData);
-    audioData.close();
-  }
-  await encoder.flush();
-  encoder.close();
-  if (encodeError) throw encodeError;
-}
-function audioBufferToWav(buffer) {
-  const channels = buffer.numberOfChannels;
-  const sampleRate = buffer.sampleRate;
-  const frames = buffer.length;
-  const bytesPerSample = 2;
-  const blockAlign = channels * bytesPerSample;
-  const dataSize = frames * blockAlign;
-  const out = new ArrayBuffer(44 + dataSize);
-  const view = new DataView(out);
-  const writeStr = (offset, str) => {
-    for (let i = 0; i < str.length; i++) view.setUint8(offset + i, str.charCodeAt(i));
-  };
-  writeStr(0, "RIFF");
-  view.setUint32(4, 36 + dataSize, true);
-  writeStr(8, "WAVE");
-  writeStr(12, "fmt ");
-  view.setUint32(16, 16, true);
-  view.setUint16(20, 1, true);
-  view.setUint16(22, channels, true);
-  view.setUint32(24, sampleRate, true);
-  view.setUint32(28, sampleRate * blockAlign, true);
-  view.setUint16(32, blockAlign, true);
-  view.setUint16(34, bytesPerSample * 8, true);
-  writeStr(36, "data");
-  view.setUint32(40, dataSize, true);
-  const channelData = [];
-  for (let ch = 0; ch < channels; ch++) channelData.push(buffer.getChannelData(ch));
-  let pos = 44;
-  for (let i = 0; i < frames; i++) {
-    for (let ch = 0; ch < channels; ch++) {
-      let sample = channelData[ch][i];
-      sample = Math.max(-1, Math.min(1, sample));
-      view.setInt16(pos, sample < 0 ? sample * 32768 : sample * 32767, true);
-      pos += 2;
-    }
-  }
-  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(load);
-    await ffmpeg.writeFile("video.mp4", videoMp4);
-    await ffmpeg.writeFile("audio.wav", wav);
-    const exitCode = await ffmpeg.exec([
-      "-i",
-      "video.mp4",
-      "-i",
-      "audio.wav",
-      "-c:v",
-      "copy",
-      ...ffmpegAudioMuxArgs(audioBitrate),
-      "out.mp4"
-    ]);
-    if (exitCode !== 0) {
-      throw new Error(`ffmpeg.wasm audio mux failed with exit code ${exitCode}`);
-    }
-    const data = await ffmpeg.readFile("out.mp4");
-    return data instanceof Uint8Array ? data : new TextEncoder().encode(data);
-  } finally {
-    ffmpeg.terminate();
-  }
-}
-
-// src/gifTranscode.ts
+  useFrameCapture,
+  useVideoExport
+} from "./chunk-VILZP3GL.js";
 import {
-  ffmpegGifOutputArgs,
-  resolveFfmpegWasmLoad as resolveFfmpegWasmLoad2
-} from "@bendyline/squisq-video";
-function buildGifFfmpegArgs(options) {
-  return ["-y", "-i", "video.mp4", ...ffmpegGifOutputArgs(options), "out.gif"];
-}
-async function transcodeMp4ToGifWithFfmpegWasm(videoMp4, options, loadConfig, signal) {
-  if (videoMp4.byteLength === 0) {
-    throw new Error("Cannot create an animated GIF from an empty MP4.");
-  }
-  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();
-  let terminated = false;
-  const terminate = () => {
-    if (terminated) return;
-    terminated = true;
-    ffmpeg.terminate();
-  };
-  const handleAbort = () => terminate();
-  signal?.addEventListener("abort", handleAbort, { once: true });
-  try {
-    await ffmpeg.load(load);
-    if (signal?.aborted) {
-      throw new DOMException("Animated GIF export was cancelled.", "AbortError");
-    }
-    await ffmpeg.writeFile("video.mp4", videoMp4);
-    if (signal?.aborted) {
-      throw new DOMException("Animated GIF export was cancelled.", "AbortError");
-    }
-    const exitCode = await ffmpeg.exec(args);
-    if (signal?.aborted) {
-      throw new DOMException("Animated GIF export was cancelled.", "AbortError");
-    }
-    if (exitCode !== 0) {
-      throw new Error(`ffmpeg.wasm GIF transcode failed with exit code ${exitCode}`);
-    }
-    const data = await ffmpeg.readFile("out.gif");
-    return data instanceof Uint8Array ? data : new TextEncoder().encode(data);
-  } finally {
-    signal?.removeEventListener("abort", handleAbort);
-    terminate();
-  }
-}
-
-// src/hooks/useFrameCapture.ts
-import { createElement } from "react";
-import { createRoot } from "react-dom/client";
-import { useRef, useCallback, useMemo } from "react";
-import { DocPlayer, MediaContext } from "@bendyline/squisq-react";
-import html2canvas from "html2canvas";
-var MIME_MAP = {
-  jpg: "image/jpeg",
-  jpeg: "image/jpeg",
-  png: "image/png",
-  gif: "image/gif",
-  webp: "image/webp",
-  svg: "image/svg+xml",
-  bmp: "image/bmp",
-  avif: "image/avif"
-};
-function createInlineProvider(images) {
-  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";
-    blobUrls.set(path, URL.createObjectURL(new Blob([buffer], { type: mime })));
-    mimeTypes.set(path, mime);
-  }
-  return {
-    async resolveUrl(relativePath) {
-      return blobUrls.get(relativePath) ?? relativePath;
-    },
-    async listMedia() {
-      return [...blobUrls.keys()].map((name) => ({
-        name,
-        mimeType: mimeTypes.get(name) ?? "application/octet-stream",
-        size: images.get(name)?.byteLength ?? 0
-      }));
-    },
-    async addMedia() {
-      throw new Error("Read-only");
-    },
-    async removeMedia() {
-      throw new Error("Read-only");
-    },
-    dispose() {
-      blobUrls.forEach((url) => URL.revokeObjectURL(url));
-      blobUrls.clear();
-    }
-  };
-}
-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 || 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);
-        });
-      }
-      const width = renderOptions.width ?? 1920;
-      const height = renderOptions.height ?? 1080;
-      const animationsEnabled = renderOptions.animationsEnabled ?? true;
-      dimensionsRef.current = { width, height };
-      const container = document.createElement("div");
-      container.style.cssText = `position:fixed;left:0;top:0;width:${width}px;height:${height}px;opacity:0;pointer-events:none;z-index:-1;overflow:hidden;`;
-      document.body.appendChild(container);
-      containerRef.current = container;
-      const renderRoot = document.createElement("div");
-      renderRoot.id = "squisq-capture-root";
-      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";
-      const captionStyle = captionMode === "social" ? "social" : "standard";
-      let resolveRenderAPI;
-      const renderAPIReady = new Promise((resolve) => {
-        resolveRenderAPI = resolve;
-      });
-      const playerElement = createElement(DocPlayer, {
-        doc,
-        basePath: ".",
-        renderMode: true,
-        animationsEnabled,
-        showControls: false,
-        autoPlay: false,
-        forceViewport: { width, height, name: "export" },
-        captionsEnabled,
-        captionStyle,
-        onRenderAPIReady: (api) => {
-          if (containerRef.current !== container) return;
-          renderAPIRef.current = api;
-          if (api) resolveRenderAPI(api);
-        }
-      });
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      if (mediaProvider) {
-        root.render(createElement(MediaContext.Provider, { value: mediaProvider }, playerElement));
-      } else {
-        root.render(playerElement);
-      }
-      return new Promise((resolve, reject) => {
-        const timeout = setTimeout(() => {
-          const api = renderAPIRef.current;
-          const hasSeek = typeof api?.seekTo === "function";
-          const hasDur = typeof api?.getDuration === "function";
-          const rootEl = containerRef.current?.querySelector("#squisq-capture-root");
-          const hasPlayer = rootEl ? rootEl.querySelector(".doc-player") !== null : false;
-          reject(
-            new Error(
-              `Render API did not initialize within 15s. seekTo=${hasSeek}, getDuration=${hasDur}, player=${hasPlayer}, root=${!!rootEl}`
-            )
-          );
-        }, 15e3);
-        void renderAPIReady.then((api) => {
-          clearTimeout(timeout);
-          resolve(api.getDuration());
-        });
-      });
-    },
-    []
-  );
-  const captureFrame = useCallback(async (time) => {
-    const container = containerRef.current;
-    const api = renderAPIRef.current;
-    if (!container || !api) {
-      throw new Error("Frame capture not initialized \u2014 call init() first");
-    }
-    const { width, height } = dimensionsRef.current;
-    await api.seekTo(time);
-    await new Promise(
-      (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
-    );
-    const root = container.querySelector("#squisq-capture-root");
-    if (!root) {
-      throw new Error("Capture root element not found");
-    }
-    const canvas = await html2canvas(root, {
-      width,
-      height,
-      scale: 1,
-      useCORS: true,
-      allowTaint: true,
-      backgroundColor: "#000000",
-      logging: false
-    });
-    const bitmap = await createImageBitmap(canvas);
-    return bitmap;
-  }, []);
-  const destroy = useCallback(() => {
-    if (rootRef.current) {
-      rootRef.current.unmount();
-      rootRef.current = null;
-    }
-    if (containerRef.current) {
-      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();
-  for (const src of srcs) {
-    let data = sources.audio?.get(src) ?? sources.images?.get(src);
-    if (!data && sources.mediaProvider) {
-      try {
-        const url = await sources.mediaProvider.resolveUrl(src);
-        const resource = await fetchResourceBytes(url, {
-          policy: sources.resourcePolicy
-        });
-        data = toArrayBuffer(resource.bytes);
-      } catch {
-      }
-    }
-    if (data) out.set(src, data);
-  }
-  return out;
-}
-function useVideoExport() {
-  const [state, setState] = useState("idle");
-  const [progress, setProgress] = useState(0);
-  const [phase, setPhase] = useState("");
-  const [duration, setDuration] = useState(0);
-  const [outputFormat, setOutputFormat] = useState("mp4");
-  const [backend, setBackend] = useState(null);
-  const [downloadUrl, setDownloadUrl] = useState(null);
-  const [fileSize, setFileSize] = useState(0);
-  const [audioIncluded, setAudioIncluded] = useState(false);
-  const [audioSkippedReason, setAudioSkippedReason] = useState(null);
-  const [error, setError] = useState(null);
-  const [elapsed, setElapsed] = useState(0);
-  const [estimatedRemaining, setEstimatedRemaining] = useState(0);
-  const encoderRef = useRef2(null);
-  const gifAbortRef = useRef2(null);
-  const cancelledRef = useRef2(false);
-  const downloadUrlRef = useRef2(null);
-  const startTimeRef = useRef2(0);
-  const elapsedTimerRef = useRef2(null);
-  const frameCapture = useFrameCapture();
-  useEffect(() => {
-    return () => {
-      if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
-      if (downloadUrlRef.current) {
-        URL.revokeObjectURL(downloadUrlRef.current);
-      }
-      if (encoderRef.current) {
-        encoderRef.current.close();
-      }
-      gifAbortRef.current?.abort();
-      frameCapture.destroy();
-    };
-  }, [frameCapture]);
-  const reset = useCallback2(() => {
-    if (downloadUrlRef.current) {
-      URL.revokeObjectURL(downloadUrlRef.current);
-      downloadUrlRef.current = null;
-    }
-    if (encoderRef.current) {
-      encoderRef.current.close();
-      encoderRef.current = null;
-    }
-    gifAbortRef.current?.abort();
-    gifAbortRef.current = null;
-    frameCapture.destroy();
-    setState("idle");
-    setProgress(0);
-    setPhase("");
-    setDuration(0);
-    setOutputFormat("mp4");
-    setBackend(null);
-    setDownloadUrl(null);
-    setFileSize(0);
-    setAudioIncluded(false);
-    setAudioSkippedReason(null);
-    setError(null);
-    setElapsed(0);
-    setEstimatedRemaining(0);
-    if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
-    cancelledRef.current = false;
-  }, [frameCapture]);
-  const cancel = useCallback2(() => {
-    cancelledRef.current = true;
-    if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
-    if (encoderRef.current) {
-      encoderRef.current.close();
-      encoderRef.current = null;
-    }
-    gifAbortRef.current?.abort();
-    gifAbortRef.current = null;
-    frameCapture.destroy();
-    setState("idle");
-    setProgress(0);
-    setPhase("Cancelled");
-  }, [frameCapture]);
-  const startExport = useCallback2(
-    async (doc, config) => {
-      cancelledRef.current = false;
-      if (downloadUrlRef.current) {
-        URL.revokeObjectURL(downloadUrlRef.current);
-        downloadUrlRef.current = null;
-      }
-      setDownloadUrl(null);
-      setFileSize(0);
-      setAudioIncluded(false);
-      setAudioSkippedReason(null);
-      setError(null);
-      const quality = config.quality ?? "normal";
-      const effectiveOutputFormat = config.outputFormat ?? "mp4";
-      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 };
-        const { width, height } = resolveDimensions({
-          orientation,
-          fps,
-          quality,
-          ...config.width !== void 0 ? { width: config.width } : effectiveOutputFormat === "gif" ? { width: gifDefaults.width } : {},
-          ...config.height !== void 0 ? { height: config.height } : effectiveOutputFormat === "gif" ? { height: gifDefaults.height } : {}
-        });
-        const webCodecsAvailable = supportsWebCodecs();
-        const sharedArrayBufferAvailable = typeof SharedArrayBuffer !== "undefined";
-        if (effectiveOutputFormat === "gif" && !sharedArrayBufferAvailable) {
-          throw new Error(
-            "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)."
-          );
-        }
-        setState("preparing");
-        setPhase("Loading document\u2026");
-        setProgress(0);
-        setElapsed(0);
-        setEstimatedRemaining(0);
-        startTimeRef.current = performance.now();
-        if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
-        elapsedTimerRef.current = setInterval(() => {
-          setElapsed(Math.floor((performance.now() - startTimeRef.current) / 1e3));
-        }, 1e3);
-        let images = config.images;
-        if (!images && config.mediaProvider) {
-          images = /* @__PURE__ */ new Map();
-          const entries = await config.mediaProvider.listMedia();
-          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 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(
-          doc,
-          { images, audio: config.audio, width, height, animationsEnabled },
-          config.captionMode
-        );
-        if (cancelledRef.current) return;
-        setDuration(docDuration);
-        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" && 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,
-          aacSupported,
-          sharedArrayBufferAvailable,
-          canUseMainThreadWebCodecs: canUseWebCodecs
-        });
-        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,
-              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 ?? (audioReasonLocal = "Audio files for this document could not be loaded.");
-            } else {
-              const totalAudioDur = timeline.reduce(
-                (max, c) => Math.max(max, c.startSec + c.durationSec),
-                docDuration
-              );
-              renderedAudio = await renderAudioTimeline(
-                timeline,
-                buffers,
-                totalAudioDur,
-                EXPORT_AUDIO_SAMPLE_RATE
-              );
-            }
-          } 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;
-        const useFfmpegAudio = renderedAudio !== null && tierDecision.tier === 2;
-        if (cancelledRef.current) return;
-        let encoder;
-        if (canUseWebCodecs) {
-          encoder = createEncoder({
-            width,
-            height,
-            fps,
-            quality,
-            ...useInlineAudio && renderedAudio ? {
-              audio: {
-                numberOfChannels: renderedAudio.numberOfChannels,
-                sampleRate: renderedAudio.sampleRate
-              }
-            } : {}
-          });
-          setBackend("webcodecs");
-        } else if (sharedArrayBufferAvailable) {
-          const workerEncoder = createWorkerEncoder({
-            width,
-            height,
-            fps,
-            quality,
-            totalFrames,
-            ffmpegWasm: config.ffmpegWasm
-          });
-          encoder = workerEncoder;
-          const selectedBackend = await workerEncoder.ready;
-          setBackend(selectedBackend);
-          setPhase(
-            selectedBackend === "ffmpeg-wasm" ? "Starting encoder (ffmpeg.wasm)\u2026" : "Starting encoder\u2026"
-          );
-        } else {
-          throw new Error(
-            "WebCodecs H.264 is unavailable in this browser and the ffmpeg.wasm fallback requires SharedArrayBuffer (Cross-Origin-Isolation headers)."
-          );
-        }
-        encoderRef.current = encoder;
-        if (cancelledRef.current) return;
-        setState("capturing");
-        const captureStartTime = performance.now();
-        const UI_UPDATE_INTERVAL = 10;
-        for (let i = 0; i < totalFrames; i++) {
-          if (cancelledRef.current) return;
-          const time = i / fps;
-          if (i % UI_UPDATE_INTERVAL === 0 || i === totalFrames - 1) {
-            const captureProgress = Math.round(i / totalFrames * 90);
-            setProgress(5 + captureProgress);
-            setPhase(`Capturing frame ${i + 1}/${totalFrames} (${time.toFixed(1)}s)`);
-            if (i > 0) {
-              const elapsedCapture = (performance.now() - captureStartTime) / 1e3;
-              const avgPerFrame = elapsedCapture / i;
-              const remaining = Math.round(avgPerFrame * (totalFrames - i));
-              setEstimatedRemaining(remaining);
-            }
-          }
-          const bitmap = await frameCapture.captureFrame(time);
-          if (cancelledRef.current) {
-            bitmap.close();
-            return;
-          }
-          await encoder.encodeFrame(bitmap, i);
-        }
-        if (cancelledRef.current) return;
-        if (useInlineAudio && renderedAudio && encoder.addAudioChunk) {
-          setState("encoding");
-          setPhase("Encoding audio\u2026");
-          try {
-            await encodeAacTrack(
-              renderedAudio,
-              { addAudioChunk: encoder.addAudioChunk.bind(encoder) },
-              audioBitrate
-            );
-            audioIncludedLocal = true;
-          } catch (audioErr) {
-            audioIncludedLocal = false;
-            audioReasonLocal = `Audio encoding failed: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
-            if (audioPolicy === "require") throw new Error(audioReasonLocal);
-          }
-        }
-        setState("encoding");
-        setPhase(effectiveOutputFormat === "gif" ? "Finalizing GIF frames\u2026" : "Finalizing video\u2026");
-        setProgress(95);
-        let outputBytes = await encoder.finalize();
-        encoderRef.current = null;
-        if (cancelledRef.current) return;
-        if (effectiveOutputFormat === "gif") {
-          setPhase("Generating GIF palette\u2026");
-          const videoOnly = outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
-          const gifAbort = new AbortController();
-          gifAbortRef.current = gifAbort;
-          try {
-            outputBytes = await transcodeMp4ToGifWithFfmpegWasm(
-              videoOnly,
-              { width, height, loop: 0 },
-              config.ffmpegWasm,
-              gifAbort.signal
-            );
-          } finally {
-            if (gifAbortRef.current === gifAbort) gifAbortRef.current = null;
-          }
-        } else if (useFfmpegAudio && renderedAudio) {
-          setPhase("Muxing audio\u2026");
-          try {
-            const wav = audioBufferToWav(renderedAudio);
-            const videoOnly = outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
-            outputBytes = await muxAudioWithFfmpegWasm(
-              videoOnly,
-              wav,
-              audioBitrate,
-              config.ffmpegWasm
-            );
-            audioIncludedLocal = true;
-          } 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;
-        const finalBytes = outputBytes instanceof Uint8Array ? outputBytes.slice() : new Uint8Array(outputBytes);
-        const mimeType = effectiveOutputFormat === "gif" ? "image/gif" : "video/mp4";
-        const blob = new Blob([finalBytes], { type: mimeType });
-        const url = URL.createObjectURL(blob);
-        downloadUrlRef.current = url;
-        setDownloadUrl(url);
-        setFileSize(finalBytes.byteLength);
-        setAudioIncluded(audioIncludedLocal);
-        setAudioSkippedReason(
-          effectiveOutputFormat === "gif" || audioIncludedLocal ? null : audioReasonLocal
-        );
-        setState("complete");
-        setProgress(100);
-        setPhase("Export complete");
-        setEstimatedRemaining(0);
-        if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
-        frameCapture.destroy();
-      } catch (err) {
-        if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
-        if (cancelledRef.current) return;
-        const message = err instanceof Error ? err.message : String(err);
-        setState("error");
-        setError(message);
-        setPhase("Export failed");
-        if (encoderRef.current) {
-          encoderRef.current.close();
-          encoderRef.current = null;
-        }
-        gifAbortRef.current?.abort();
-        gifAbortRef.current = null;
-        frameCapture.destroy();
-      }
-    },
-    [frameCapture]
-  );
-  return {
-    state,
-    progress,
-    phase,
-    duration,
-    outputFormat,
-    backend,
-    downloadUrl,
-    fileSize,
-    audioIncluded,
-    audioSkippedReason,
-    error,
-    elapsed,
-    estimatedRemaining,
-    startExport,
-    cancel,
-    reset
-  };
-}
-
-// src/VideoExportModal.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function formatDuration(seconds) {
-  if (seconds < 60) return `${seconds}s`;
-  const m = Math.floor(seconds / 60);
-  const s = seconds % 60;
-  return `${m}m ${s}s`;
-}
-function encoderLabel(outputFormat, backend) {
-  if (outputFormat === "gif") {
-    return backend === "webcodecs" ? "WebCodecs (H.264) \u2192 ffmpeg.wasm (GIF)" : "ffmpeg.wasm (H.264 \u2192 GIF)";
-  }
-  return backend === "webcodecs" ? "WebCodecs (H.264)" : "ffmpeg.wasm (H.264)";
-}
-var VIDEO_EXPORT_PALETTES = {
-  light: {
-    overlay: "rgba(0, 0, 0, 0.5)",
-    surface: "#FFFDF7",
-    control: "#ffffff",
-    border: "#c9b98a",
-    text: "#4a3c1f",
-    heading: "#2d2310",
-    label: "#5a4a2a",
-    muted: "#8a7a5a",
-    secondary: "#E8DFC6",
-    primary: "#8B6914",
-    primaryBorder: "#7a5c10",
-    primaryText: "#ffffff",
-    success: "#2d6a10",
-    danger: "#a03020"
-  },
-  dark: {
-    overlay: "rgba(2, 6, 23, 0.72)",
-    surface: "#111827",
-    control: "#0f172a",
-    border: "#475569",
-    text: "#e5e7eb",
-    heading: "#f8fafc",
-    label: "#cbd5e1",
-    muted: "#94a3b8",
-    secondary: "#1e293b",
-    primary: "#9a7416",
-    primaryBorder: "#d1a73b",
-    primaryText: "#ffffff",
-    success: "#86efac",
-    danger: "#fca5a5"
-  }
-};
-var overlayStyle = {
-  position: "fixed",
-  inset: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  zIndex: 1e4
-};
-var modalStyle = {
-  borderRadius: 0,
-  padding: "24px 28px",
-  minWidth: 380,
-  maxWidth: 480,
-  boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
-  fontFamily: "system-ui, -apple-system, sans-serif"
-};
-var titleStyle = {
-  margin: "0 0 16px 0",
-  fontSize: 18,
-  fontWeight: 600
-};
-var labelStyle = {
-  display: "block",
-  fontSize: 13,
-  fontWeight: 500,
-  marginBottom: 4
-};
-var selectStyle = {
-  width: "100%",
-  padding: "6px 8px",
-  fontSize: 13,
-  fontFamily: "inherit",
-  borderRadius: 0,
-  marginBottom: 12
-};
-var btnPrimary = {
-  padding: "8px 20px",
-  fontSize: 14,
-  fontFamily: "inherit",
-  fontWeight: 500,
-  cursor: "pointer",
-  borderRadius: 0
-};
-var btnSecondary = {
-  padding: "8px 20px",
-  fontSize: 14,
-  fontFamily: "inherit",
-  fontWeight: 500,
-  cursor: "pointer",
-  borderRadius: 0
-};
-var progressBarOuterStyle = {
-  width: "100%",
-  height: 8,
-  borderRadius: 0,
-  overflow: "hidden",
-  marginBottom: 8
-};
-var footerStyle = {
-  display: "flex",
-  justifyContent: "flex-end",
-  gap: 8,
-  marginTop: 20
-};
-function VideoExportModal({
-  doc,
-  playerScript,
-  mediaProvider,
-  images,
-  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");
-  const [fps, setFps] = useState2(defaultConfig?.fps ?? (initialOutputFormat === "gif" ? 10 : 24));
-  const [orientation, setOrientation] = useState2(
-    defaultConfig?.orientation ?? "landscape"
-  );
-  const [captionMode, setCaptionMode] = useState2(defaultConfig?.captionMode ?? "off");
-  const [animationsEnabled, setAnimationsEnabled] = useState2(
-    defaultConfig?.animationsEnabled ?? initialOutputFormat === "mp4"
-  );
-  const [audioPolicy, setAudioPolicy] = useState2(
-    defaultConfig?.audioPolicy ?? "require"
-  );
-  const palette = {
-    ...VIDEO_EXPORT_PALETTES[colorScheme],
-    ...uiPalette
-  };
-  const themedModalStyle = {
-    ...modalStyle,
-    background: palette.surface,
-    border: `1px solid ${palette.border}`,
-    color: palette.text,
-    colorScheme
-  };
-  const themedTitleStyle = { ...titleStyle, color: palette.heading };
-  const themedLabelStyle = { ...labelStyle, color: palette.label };
-  const themedSelectStyle = {
-    ...selectStyle,
-    border: `1px solid ${palette.border}`,
-    background: palette.control,
-    color: palette.text,
-    colorScheme
-  };
-  const themedPrimaryButtonStyle = {
-    ...btnPrimary,
-    background: palette.primary,
-    border: `1px solid ${palette.primaryBorder}`,
-    color: palette.primaryText
-  };
-  const themedSecondaryButtonStyle = {
-    ...btnSecondary,
-    background: palette.secondary,
-    color: palette.text,
-    border: `1px solid ${palette.border}`
-  };
-  const exportHook = useVideoExport();
-  const {
-    state,
-    progress,
-    backend,
-    outputFormat: completedOutputFormat,
-    downloadUrl,
-    fileSize,
-    audioIncluded,
-    audioSkippedReason,
-    error,
-    elapsed,
-    estimatedRemaining,
-    startExport,
-    cancel: cancelExport,
-    reset: resetExport
-  } = exportHook;
-  const handleOutputFormatChange = useCallback3((next) => {
-    setOutputFormat(next);
-    if (next === "gif") {
-      setFps(10);
-      setAnimationsEnabled(false);
-    } else {
-      setFps(24);
-      setAnimationsEnabled(true);
-    }
-  }, []);
-  const handleExport = useCallback3(async () => {
-    const config = {
-      // defaultConfig is the base; explicit props/selections win over it.
-      ...defaultConfig,
-      outputFormat,
-      animationsEnabled,
-      quality,
-      fps,
-      orientation,
-      captionMode,
-      audioPolicy,
-      images,
-      audio,
-      mediaProvider,
-      // Only thread the bundle through when the host actually supplied one.
-      ...playerScript !== void 0 ? { playerScript } : {}
-    };
-    await startExport(doc, config);
-  }, [
-    doc,
-    outputFormat,
-    animationsEnabled,
-    quality,
-    fps,
-    orientation,
-    captionMode,
-    audioPolicy,
-    images,
-    audio,
-    mediaProvider,
-    playerScript,
-    defaultConfig,
-    startExport
-  ]);
-  const handleDownload = useCallback3(() => {
-    if (!downloadUrl) return;
-    const a = document.createElement("a");
-    a.href = downloadUrl;
-    const ts = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
-    a.download = `document-${ts}.${completedOutputFormat}`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }, [downloadUrl, completedOutputFormat]);
-  const handleClose = useCallback3(() => {
-    if (state === "capturing" || state === "encoding" || state === "preparing") {
-      cancelExport();
-    }
-    resetExport();
-    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",
-        {
-          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"
-                ] })
-              ] })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
-
-// src/VideoExportButton.tsx
-import { useState as useState3, useCallback as useCallback4 } from "react";
-import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function VideoExportButton({
-  doc,
-  playerScript,
-  mediaProvider,
-  images,
-  audio,
-  defaultConfig,
-  colorScheme,
-  uiPalette,
-  label,
-  style,
-  disabled
-}) {
-  const [showModal, setShowModal] = useState3(false);
-  const resolvedLabel = label ?? (defaultConfig?.outputFormat === "gif" ? "Export GIF" : "Export Video");
-  const handleOpen = useCallback4(() => setShowModal(true), []);
-  const handleClose = useCallback4(() => setShowModal(false), []);
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("button", { onClick: handleOpen, disabled, style, children: resolvedLabel }),
-    showModal && createPortal(
-      /* @__PURE__ */ jsx2(
-        VideoExportModal,
-        {
-          doc,
-          playerScript,
-          mediaProvider,
-          images,
-          audio,
-          defaultConfig,
-          colorScheme,
-          uiPalette,
-          onClose: handleClose
-        }
-      ),
-      document.body
-    )
-  ] });
-}
+  createEncoder,
+  supportsWebCodecs,
+  supportsWebCodecsAac,
+  supportsWebCodecsH264
+} from "./chunk-YZN7D4IC.js";
+import "./chunk-VI5AIVOQ.js";
 export {
   VideoExportButton,
   VideoExportModal,