@bendyline/squisq-video-react 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,816 +1,22 @@
-// src/VideoExportModal.tsx
-import { useState as useState2, useCallback as useCallback3 } from "react";
-
-// src/hooks/useVideoExport.ts
-import { useState, useRef as useRef2, useCallback as useCallback2, useEffect } from "react";
-import { resolveDimensions } from "@bendyline/squisq-video";
-
-// src/mp4Mux.ts
-import { Muxer, ArrayBufferTarget } from "mp4-muxer";
-function createMp4Muxer(options) {
-  const target = new ArrayBufferTarget();
-  const muxer = new Muxer({
-    target,
-    video: {
-      codec: "avc",
-      width: options.width,
-      height: options.height
-    },
-    fastStart: "in-memory"
-  });
-  return {
-    addVideoChunk(chunk, meta) {
-      muxer.addVideoChunk(chunk, meta);
-    },
-    finalize() {
-      muxer.finalize();
-      return target.buffer;
-    }
-  };
-}
-
-// src/mainThreadEncoder.ts
-function supportsWebCodecs() {
-  return typeof VideoEncoder !== "undefined" && typeof VideoFrame !== "undefined";
-}
-function bitrateForQuality(quality, width, height) {
-  const pixels = width * height;
-  const baseBitrate = pixels * 4;
-  switch (quality) {
-    case "draft":
-      return Math.round(baseBitrate * 0.5);
-    case "high":
-      return Math.round(baseBitrate * 2);
-    default:
-      return baseBitrate;
-  }
-}
-function createEncoder(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."
-    );
-  }
-  if (!config.fps || config.fps <= 0 || !config.width || !config.height) {
-    throw new Error(
-      `Invalid encoder config: fps=${config.fps}, width=${config.width}, height=${config.height}`
-    );
-  }
-  const muxer = createMp4Muxer({
-    width: config.width,
-    height: config.height,
-    fps: config.fps
-  });
-  let closed = false;
-  const frameDuration = 1e6 / config.fps;
-  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);
-    }
-  });
-  encoder.configure({
-    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 {
-    encodeFrame(bitmap, frameIndex) {
-      if (closed) {
-        bitmap.close();
-        return;
-      }
-      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();
-    },
-    async finalize() {
-      if (closed) throw new Error("Encoder already closed");
-      await encoder.flush();
-      encoder.close();
-      closed = true;
-      return muxer.finalize();
-    },
-    close() {
-      if (closed) return;
-      closed = true;
-      if (encoder.state !== "closed") {
-        encoder.close();
-      }
-    }
-  };
-}
-
-// 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 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 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));
-    mimeTypes.set(path, mime);
-  }
-  return {
-    async resolveUrl(relativePath) {
-      return dataUrls.get(relativePath) ?? relativePath;
-    },
-    async listMedia() {
-      return [...dataUrls.keys()].map((name) => ({
-        name,
-        mimeType: mimeTypes.get(name) ?? "application/octet-stream",
-        size: 0
-      }));
-    },
-    async addMedia() {
-      throw new Error("Read-only");
-    },
-    async removeMedia() {
-      throw new Error("Read-only");
-    },
-    dispose() {
-    }
-  };
-}
-function useFrameCapture() {
-  const containerRef = useRef(null);
-  const rootRef = useRef(null);
-  const dimensionsRef = useRef({ width: 1920, height: 1080 });
-  const init = useCallback(
-    async (doc, renderOptions, captionMode) => {
-      if (rootRef.current || containerRef.current) {
-        const oldRoot = rootRef.current;
-        const oldContainer = containerRef.current;
-        rootRef.current = null;
-        containerRef.current = null;
-        await new Promise((resolve) => {
-          setTimeout(() => {
-            if (oldRoot) oldRoot.unmount();
-            if (oldContainer) oldContainer.remove();
-            resolve();
-          }, 0);
-        });
-      }
-      const width = renderOptions.width ?? 1920;
-      const height = renderOptions.height ?? 1080;
-      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;
-      const root = createRoot(renderRoot);
-      rootRef.current = root;
-      const captionsEnabled = captionMode !== void 0 && captionMode !== "off";
-      const captionStyle = captionMode === "social" ? "social" : "standard";
-      const playerElement = createElement(DocPlayer, {
-        script: doc,
-        basePath: ".",
-        renderMode: true,
-        showControls: false,
-        autoPlay: false,
-        forceViewport: { width, height, name: "export" },
-        captionsEnabled,
-        captionStyle
-      });
-      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 w = window;
-          const hasSeek = typeof w.seekTo === "function";
-          const hasDur = typeof w.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);
-        const checkApi = () => {
-          const w = window;
-          if (typeof w.getDuration === "function" && typeof w.seekTo === "function") {
-            clearTimeout(timeout);
-            const duration = w.getDuration();
-            resolve(duration);
-          } else {
-            requestAnimationFrame(checkApi);
-          }
-        };
-        setTimeout(checkApi, 500);
-      });
-    },
-    []
-  );
-  const captureFrame = useCallback(async (time) => {
-    const container = containerRef.current;
-    const w = window;
-    if (!container || typeof w.seekTo !== "function") {
-      throw new Error("Frame capture not initialized \u2014 call init() first");
-    }
-    const { width, height } = dimensionsRef.current;
-    await w.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;
-    }
-  }, []);
-  return useMemo(() => ({ init, captureFrame, destroy }), [init, captureFrame, destroy]);
-}
-
-// src/hooks/useVideoExport.ts
-function useVideoExport() {
-  const [state, setState] = useState("idle");
-  const [progress, setProgress] = useState(0);
-  const [phase, setPhase] = useState("");
-  const [duration, setDuration] = useState(0);
-  const [backend, setBackend] = useState(null);
-  const [downloadUrl, setDownloadUrl] = useState(null);
-  const [fileSize, setFileSize] = useState(0);
-  const [error, setError] = useState(null);
-  const [elapsed, setElapsed] = useState(0);
-  const [estimatedRemaining, setEstimatedRemaining] = useState(0);
-  const encoderRef = 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();
-      }
-      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;
-    }
-    frameCapture.destroy();
-    setState("idle");
-    setProgress(0);
-    setPhase("");
-    setDuration(0);
-    setBackend(null);
-    setDownloadUrl(null);
-    setFileSize(0);
-    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;
-    }
-    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);
-      setError(null);
-      const quality = config.quality ?? "normal";
-      const fps = config.fps ?? 30;
-      const orientation = config.orientation ?? "landscape";
-      const { width, height } = resolveDimensions({ orientation });
-      try {
-        if (!supportsWebCodecs()) {
-          throw new Error(
-            "WebCodecs is not available in this browser. Video export requires Chrome 94+, Edge 94+, or another Chromium-based browser."
-          );
-        }
-        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();
-          for (const entry of entries) {
-            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 docDuration = await frameCapture.init(
-          doc,
-          { images, audio: config.audio, width, height },
-          config.captionMode
-        );
-        if (cancelledRef.current) return;
-        setDuration(docDuration);
-        if (docDuration <= 0) {
-          throw new Error("Document has zero duration \u2014 nothing to export");
-        }
-        setPhase("Starting encoder\u2026");
-        setProgress(5);
-        const encoder = createEncoder({ width, height, fps, quality });
-        encoderRef.current = encoder;
-        setBackend("webcodecs");
-        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++) {
-          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;
-          }
-          encoder.encodeFrame(bitmap, i);
-        }
-        if (cancelledRef.current) return;
-        setState("encoding");
-        setPhase("Finalizing video\u2026");
-        setProgress(95);
-        const mp4Buffer = await encoder.finalize();
-        encoderRef.current = null;
-        if (cancelledRef.current) return;
-        const blob = new Blob([mp4Buffer], { type: "video/mp4" });
-        const url = URL.createObjectURL(blob);
-        downloadUrlRef.current = url;
-        setDownloadUrl(url);
-        setFileSize(mp4Buffer.byteLength);
-        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;
-        }
-        frameCapture.destroy();
-      }
-    },
-    [frameCapture]
-  );
-  return {
-    state,
-    progress,
-    phase,
-    duration,
-    backend,
-    downloadUrl,
-    fileSize,
-    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`;
-}
-var overlayStyle = {
-  position: "fixed",
-  inset: 0,
-  background: "rgba(0, 0, 0, 0.5)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  zIndex: 1e4
-};
-var modalStyle = {
-  background: "#FFFDF7",
-  border: "1px solid #c9b98a",
-  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",
-  color: "#4a3c1f"
-};
-var titleStyle = {
-  margin: "0 0 16px 0",
-  fontSize: 18,
-  fontWeight: 600,
-  color: "#2d2310"
-};
-var labelStyle = {
-  display: "block",
-  fontSize: 13,
-  fontWeight: 500,
-  marginBottom: 4,
-  color: "#5a4a2a"
-};
-var selectStyle = {
-  width: "100%",
-  padding: "6px 8px",
-  fontSize: 13,
-  fontFamily: "inherit",
-  border: "1px solid #c9b98a",
-  borderRadius: 0,
-  background: "#fff",
-  color: "#4a3c1f",
-  marginBottom: 12
-};
-var btnPrimary = {
-  padding: "8px 20px",
-  fontSize: 14,
-  fontFamily: "inherit",
-  fontWeight: 500,
-  cursor: "pointer",
-  background: "#8B6914",
-  color: "#fff",
-  border: "1px solid #7a5c10",
-  borderRadius: 0
-};
-var btnSecondary = {
-  padding: "8px 20px",
-  fontSize: 14,
-  fontFamily: "inherit",
-  fontWeight: 500,
-  cursor: "pointer",
-  background: "#E8DFC6",
-  color: "#4a3c1f",
-  border: "1px solid #c9b98a",
-  borderRadius: 0
-};
-var progressBarOuterStyle = {
-  width: "100%",
-  height: 8,
-  background: "#E8DFC6",
-  borderRadius: 0,
-  overflow: "hidden",
-  marginBottom: 8
-};
-var footerStyle = {
-  display: "flex",
-  justifyContent: "flex-end",
-  gap: 8,
-  marginTop: 20
-};
-function VideoExportModal({
-  doc,
-  playerScript,
-  mediaProvider,
-  images,
-  audio,
-  onClose
-}) {
-  const [quality, setQuality] = useState2("normal");
-  const [fps, setFps] = useState2(24);
-  const [orientation, setOrientation] = useState2("landscape");
-  const [captionMode, setCaptionMode] = useState2("off");
-  const exportHook = useVideoExport();
-  const {
-    state,
-    progress,
-    backend,
-    downloadUrl,
-    fileSize,
-    error,
-    elapsed,
-    estimatedRemaining,
-    startExport,
-    cancel: cancelExport,
-    reset: resetExport
-  } = exportHook;
-  const handleExport = useCallback3(async () => {
-    const config = {
-      quality,
-      fps,
-      orientation,
-      captionMode,
-      images,
-      audio,
-      mediaProvider,
-      playerScript
-    };
-    await startExport(doc, config);
-  }, [
-    doc,
-    quality,
-    fps,
-    orientation,
-    captionMode,
-    images,
-    audio,
-    mediaProvider,
-    playerScript,
-    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}.mp4`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }, [downloadUrl]);
-  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";
-  return /* @__PURE__ */ jsx("div", { style: overlayStyle, onClick: handleClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyle, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsx("h2", { style: titleStyle, children: "Export Video" }),
-    state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Quality" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            style: selectStyle,
-            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: labelStyle, children: "Frame Rate" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            style: selectStyle,
-            value: fps,
-            onChange: (e) => setFps(Number(e.target.value)),
-            children: [
-              /* @__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: labelStyle, children: "Orientation" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            style: selectStyle,
-            value: orientation,
-            onChange: (e) => setOrientation(e.target.value),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "landscape", children: "Landscape (1920 \xD7 1080)" }),
-              /* @__PURE__ */ jsx("option", { value: "portrait", children: "Portrait (1080 \xD7 1920)" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Captions" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            style: selectStyle,
-            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", { style: footerStyle, children: [
-        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleExport, children: "Export Video" })
-      ] })
-    ] }),
-    isExporting && /* @__PURE__ */ jsxs(Fragment, { children: [
-      backend && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#8a7a5a", margin: "0 0 8px 0" }, children: "Encoder: WebCodecs (H.264)" }),
-      /* @__PURE__ */ jsx("div", { style: progressBarOuterStyle, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: `${progress}%`,
-            height: "100%",
-            background: "#8B6914",
-            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: "#8a7a5a", margin: 0 }, children: [
-        formatDuration(elapsed),
-        " elapsed",
-        estimatedRemaining > 0 && ` \xB7 ~${formatDuration(estimatedRemaining)} remaining`
-      ] }),
-      /* @__PURE__ */ jsx("div", { style: footerStyle, children: /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: cancelExport, children: "Cancel" }) })
-    ] }),
-    state === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: "#2d6a10" }, children: "Export complete!" }),
-      /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: "#5a4a2a", margin: "0 0 4px 0" }, children: [
-        "File size: ",
-        (fileSize / (1024 * 1024)).toFixed(1),
-        " MB"
-      ] }),
-      backend && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#8a7a5a", margin: "0 0 12px 0" }, children: "Encoded with WebCodecs (H.264)" }),
-      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
-        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Close" }),
-        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleDownload, children: "Download MP4" })
-      ] })
-    ] }),
-    state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: "#a03020" }, children: "Export failed" }),
-      /* @__PURE__ */ jsx(
-        "p",
-        {
-          style: {
-            fontSize: 13,
-            color: "#5a4a2a",
-            margin: "0 0 12px 0",
-            wordBreak: "break-word"
-          },
-          children: error
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
-        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Close" }),
-        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleExport, children: "Retry" })
-      ] })
-    ] })
-  ] }) });
-}
-
-// 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,
-  label = "Export Video",
-  style,
-  disabled
-}) {
-  const [showModal, setShowModal] = useState3(false);
-  const handleOpen = useCallback4(() => setShowModal(true), []);
-  const handleClose = useCallback4(() => setShowModal(false), []);
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("button", { onClick: handleOpen, disabled, style, children: label }),
-    showModal && createPortal(
-      /* @__PURE__ */ jsx2(
-        VideoExportModal,
-        {
-          doc,
-          playerScript,
-          mediaProvider,
-          images,
-          audio,
-          onClose: handleClose
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-export {
-  VideoExportButton,
-  VideoExportModal,
-  createEncoder,
-  supportsWebCodecs,
-  useFrameCapture,
-  useVideoExport
-};
+/**
+ * @bendyline/squisq-video-react — Browser Video Export for Squisq Documents
+ *
+ * Provides React components and hooks for exporting Squisq documents
+ * to MP4 video directly in the browser.
+ *
+ * - VideoExportModal: Full modal UI for configure → export → download
+ * - VideoExportButton: Drop-in button that opens the modal
+ * - useVideoExport: Low-level hook for custom UIs
+ * - useFrameCapture: Frame capture via hidden iframe + html2canvas
+ *
+ * Encoding: WebCodecs (H.264 via hardware-accelerated VideoEncoder, Chrome 94+)
+ */
+// ── Components ─────────────────────────────────────────────────────
+export { VideoExportModal } from './VideoExportModal.js';
+export { VideoExportButton } from './VideoExportButton.js';
+// ── Hooks ──────────────────────────────────────────────────────────
+export { useVideoExport } from './hooks/useVideoExport.js';
+export { useFrameCapture } from './hooks/useFrameCapture.js';
+// ── Encoder Utilities (for advanced usage) ─────────────────────────
+export { supportsWebCodecs, createEncoder } from './mainThreadEncoder.js';
 //# sourceMappingURL=index.js.map