@bendyline/squisq-video-react 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,137 @@
+# @bendyline/squisq-video-react
+
+React components and hooks for exporting Squisq documents to MP4 video directly in the browser. Uses WebCodecs for hardware-accelerated H.264 encoding with html2canvas for frame capture.
+
+Part of the [Squisq](https://github.com/bendyline/squisq) monorepo.
+
+[![npm](https://img.shields.io/npm/v/@bendyline/squisq-video-react)](https://www.npmjs.com/package/@bendyline/squisq-video-react)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bendyline/squisq/blob/main/LICENSE)
+
+## Install
+
+```bash
+npm install @bendyline/squisq-video-react @bendyline/squisq-video @bendyline/squisq-react @bendyline/squisq
+```
+
+**Peer dependencies:** `react` and `react-dom` (v18 or v19).
+
+## Quick Start
+
+### Drop-in Export Button
+
+```tsx
+import { VideoExportButton } from '@bendyline/squisq-video-react';
+
+function App() {
+  return <VideoExportButton doc={myDoc} images={imageMap} audio={audioMap} />;
+}
+```
+
+### Full Export Modal
+
+```tsx
+import { VideoExportModal } from '@bendyline/squisq-video-react';
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Export Video</button>
+      {open && (
+        <VideoExportModal
+          doc={myDoc}
+          images={imageMap}
+          audio={audioMap}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </>
+  );
+}
+```
+
+## Components
+
+| Component           | Description                                                             |
+| ------------------- | ----------------------------------------------------------------------- |
+| `VideoExportModal`  | Full modal UI — configure quality/fps/orientation, export, and download |
+| `VideoExportButton` | Drop-in button that opens the export modal via portal                   |
+
+## Hooks
+
+| Hook              | Description                                                                   |
+| ----------------- | ----------------------------------------------------------------------------- |
+| `useVideoExport`  | Orchestrates the full export lifecycle — capture, encode, download            |
+| `useFrameCapture` | Mounts a hidden DocPlayer and captures frames as ImageBitmaps via html2canvas |
+
+## Export Options
+
+The `VideoExportModal` lets users configure:
+
+- **Quality:** draft, normal, or high
+- **FPS:** 15, 24, or 30
+- **Orientation:** landscape (1920x1080) or portrait (1080x1920)
+- **Captions:** off, standard, or social
+
+## Using the Hook Directly
+
+For custom export UIs, use `useVideoExport` directly:
+
+```tsx
+import { useVideoExport } from '@bendyline/squisq-video-react';
+
+function CustomExport({ doc, images, audio }) {
+  const {
+    state, // 'idle' | 'preparing' | 'capturing' | 'encoding' | 'complete' | 'error'
+    progress, // 0–100
+    elapsed,
+    estimatedRemaining,
+    downloadUrl,
+    fileSize,
+    error,
+    startExport,
+    cancel,
+    reset,
+  } = useVideoExport();
+
+  return (
+    <div>
+      <button onClick={() => startExport({ doc, images, audio, quality: 'normal', fps: 30 })}>
+        Export
+      </button>
+      {state === 'capturing' && <p>Progress: {progress}%</p>}
+      {downloadUrl && (
+        <a href={downloadUrl} download="video.mp4">
+          Download
+        </a>
+      )}
+    </div>
+  );
+}
+```
+
+## Browser Requirements
+
+WebCodecs H.264 encoding requires Chrome 94+ or Edge 94+. Use `supportsWebCodecs()` to check at runtime:
+
+```ts
+import { supportsWebCodecs } from '@bendyline/squisq-video-react';
+
+if (!supportsWebCodecs()) {
+  // Fall back or show unsupported message
+}
+```
+
+## Related Packages
+
+| Package                                                                          | Description                                     |
+| -------------------------------------------------------------------------------- | ----------------------------------------------- |
+| [@bendyline/squisq-video](https://www.npmjs.com/package/@bendyline/squisq-video) | Headless video rendering and WASM encoding      |
+| [@bendyline/squisq](https://www.npmjs.com/package/@bendyline/squisq)             | Headless core — schemas, templates, markdown    |
+| [@bendyline/squisq-react](https://www.npmjs.com/package/@bendyline/squisq-react) | React components for rendering docs             |
+| [@bendyline/squisq-cli](https://www.npmjs.com/package/@bendyline/squisq-cli)     | CLI for document conversion and video rendering |
+
+## License
+
+[MIT](https://github.com/bendyline/squisq/blob/main/LICENSE)

package/dist/VideoExportButton.d.ts

@@ -0,0 +1,28 @@
+/**
+ * VideoExportButton — Simple button that opens the VideoExportModal in a portal.
+ *
+ * Convenience wrapper for consumers who want a drop-in button.
+ * The modal renders via `createPortal` into `document.body`.
+ */
+import type { Doc } from '@bendyline/squisq/schemas';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+export interface VideoExportButtonProps {
+    /** The document to export */
+    doc: Doc;
+    /** Player IIFE bundle source */
+    playerScript: string;
+    /** Optional media provider for resolving images/audio */
+    mediaProvider?: MediaProvider;
+    /** Pre-collected images map */
+    images?: Map<string, ArrayBuffer>;
+    /** Pre-collected audio map */
+    audio?: Map<string, ArrayBuffer>;
+    /** Button label (default: "Export Video") */
+    label?: string;
+    /** Additional inline styles for the button */
+    style?: React.CSSProperties;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+}
+export declare function VideoExportButton({ doc, playerScript, mediaProvider, images, audio, label, style, disabled, }: VideoExportButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VideoExportButton.d.ts.map

package/dist/VideoExportButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoExportButton.d.ts","sourceRoot":"","sources":["../src/VideoExportButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG/D,MAAM,WAAW,sBAAsB;IACrC,6BAA6B;IAC7B,GAAG,EAAE,GAAG,CAAC;IACT,gCAAgC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACjC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,KAAsB,EACtB,KAAK,EACL,QAAQ,GACT,EAAE,sBAAsB,2CA0BxB"}

package/dist/VideoExportButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VideoExportButton — Simple button that opens the VideoExportModal in a portal.
+ *
+ * Convenience wrapper for consumers who want a drop-in button.
+ * The modal renders via `createPortal` into `document.body`.
+ */
+import { useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { VideoExportModal } from './VideoExportModal.js';
+export function VideoExportButton({ doc, playerScript, mediaProvider, images, audio, label = 'Export Video', style, disabled, }) {
+    const [showModal, setShowModal] = useState(false);
+    const handleOpen = useCallback(() => setShowModal(true), []);
+    const handleClose = useCallback(() => setShowModal(false), []);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleOpen, disabled: disabled, style: style, children: label }), showModal &&
+                createPortal(_jsx(VideoExportModal, { doc: doc, playerScript: playerScript, mediaProvider: mediaProvider, images: images, audio: audio, onClose: handleClose }), document.body)] }));
+}
+//# sourceMappingURL=VideoExportButton.js.map

package/dist/VideoExportButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoExportButton.js","sourceRoot":"","sources":["../src/VideoExportButton.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAqBzD,MAAM,UAAU,iBAAiB,CAAC,EAChC,GAAG,EACH,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,KAAK,GAAG,cAAc,EACtB,KAAK,EACL,QAAQ,GACe;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAE/D,OAAO,CACL,8BACE,iBAAQ,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC1D,KAAK,GACC,EAER,SAAS;gBACR,YAAY,CACV,KAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,WAAW,GACpB,EACF,QAAQ,CAAC,IAAI,CACd,IACF,CACJ,CAAC;AACJ,CAAC"}

package/dist/VideoExportModal.d.ts

@@ -0,0 +1,26 @@
+/**
+ * VideoExportModal — Modal dialog for configuring and monitoring video export.
+ *
+ * States:
+ *   configure → exporting (capturing + encoding) → complete | error
+ *
+ * Inline styles match the site's cream/gold palette (from FileToolbar).
+ */
+import type { Doc } from '@bendyline/squisq/schemas';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+export interface VideoExportModalProps {
+    /** The document to export */
+    doc: Doc;
+    /** Player IIFE bundle source */
+    playerScript: string;
+    /** Optional media provider for resolving images/audio */
+    mediaProvider?: MediaProvider;
+    /** Pre-collected images map (alternative to mediaProvider) */
+    images?: Map<string, ArrayBuffer>;
+    /** Pre-collected audio map */
+    audio?: Map<string, ArrayBuffer>;
+    /** Called when the modal should close */
+    onClose: () => void;
+}
+export declare function VideoExportModal({ doc, playerScript, mediaProvider, images, audio, onClose, }: VideoExportModalProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VideoExportModal.d.ts.map

package/dist/VideoExportModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoExportModal.d.ts","sourceRoot":"","sources":["../src/VideoExportModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAO/D,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,GAAG,EAAE,GAAG,CAAC;IACT,gCAAgC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,8DAA8D;IAC9D,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACjC,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwGD,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,YAAY,EACZ,aAAa,EACb,MAAM,EACN,KAAK,EACL,OAAO,GACR,EAAE,qBAAqB,2CA+NvB"}

package/dist/VideoExportModal.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * VideoExportModal — Modal dialog for configuring and monitoring video export.
+ *
+ * States:
+ *   configure → exporting (capturing + encoding) → complete | error
+ *
+ * Inline styles match the site's cream/gold palette (from FileToolbar).
+ */
+import { useState, useCallback } from 'react';
+import { useVideoExport } from './hooks/useVideoExport.js';
+// ── Helpers ────────────────────────────────────────────────────
+function formatDuration(seconds) {
+    if (seconds < 60)
+        return `${seconds}s`;
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}m ${s}s`;
+}
+// ── Styles ─────────────────────────────────────────────────────────
+const overlayStyle = {
+    position: 'fixed',
+    inset: 0,
+    background: 'rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 10000,
+};
+const 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',
+};
+const titleStyle = {
+    margin: '0 0 16px 0',
+    fontSize: 18,
+    fontWeight: 600,
+    color: '#2d2310',
+};
+const labelStyle = {
+    display: 'block',
+    fontSize: 13,
+    fontWeight: 500,
+    marginBottom: 4,
+    color: '#5a4a2a',
+};
+const selectStyle = {
+    width: '100%',
+    padding: '6px 8px',
+    fontSize: 13,
+    fontFamily: 'inherit',
+    border: '1px solid #c9b98a',
+    borderRadius: 0,
+    background: '#fff',
+    color: '#4a3c1f',
+    marginBottom: 12,
+};
+const btnPrimary = {
+    padding: '8px 20px',
+    fontSize: 14,
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    cursor: 'pointer',
+    background: '#8B6914',
+    color: '#fff',
+    border: '1px solid #7a5c10',
+    borderRadius: 0,
+};
+const btnSecondary = {
+    padding: '8px 20px',
+    fontSize: 14,
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    cursor: 'pointer',
+    background: '#E8DFC6',
+    color: '#4a3c1f',
+    border: '1px solid #c9b98a',
+    borderRadius: 0,
+};
+const progressBarOuterStyle = {
+    width: '100%',
+    height: 8,
+    background: '#E8DFC6',
+    borderRadius: 0,
+    overflow: 'hidden',
+    marginBottom: 8,
+};
+const footerStyle = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: 8,
+    marginTop: 20,
+};
+// ── Component ──────────────────────────────────────────────────────
+export function VideoExportModal({ doc, playerScript, mediaProvider, images, audio, onClose, }) {
+    const [quality, setQuality] = useState('normal');
+    const [fps, setFps] = useState(24);
+    const [orientation, setOrientation] = useState('landscape');
+    const [captionMode, setCaptionMode] = useState('off');
+    const exportHook = useVideoExport();
+    const { state, progress, backend, downloadUrl, fileSize, error, elapsed, estimatedRemaining, startExport, cancel: cancelExport, reset: resetExport, } = exportHook;
+    const handleExport = useCallback(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 = useCallback(() => {
+        if (!downloadUrl)
+            return;
+        const a = document.createElement('a');
+        a.href = downloadUrl;
+        const ts = new Date().toISOString().slice(0, 10);
+        a.download = `document-${ts}.mp4`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }, [downloadUrl]);
+    const handleClose = useCallback(() => {
+        if (state === 'capturing' || state === 'encoding' || state === 'preparing') {
+            cancelExport();
+        }
+        resetExport();
+        onClose();
+    }, [state, cancelExport, resetExport, onClose]);
+    const isExporting = state === 'preparing' || state === 'capturing' || state === 'encoding';
+    return (_jsx("div", { style: overlayStyle, onClick: handleClose, children: _jsxs("div", { style: modalStyle, onClick: (e) => e.stopPropagation(), children: [_jsx("h2", { style: titleStyle, children: "Export Video" }), state === 'idle' && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Quality" }), _jsxs("select", { style: selectStyle, value: quality, onChange: (e) => setQuality(e.target.value), children: [_jsx("option", { value: "draft", children: "Draft \u2014 fast, lower quality" }), _jsx("option", { value: "normal", children: "Normal \u2014 balanced" }), _jsx("option", { value: "high", children: "High \u2014 best quality, slower" })] })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Frame Rate" }), _jsxs("select", { style: selectStyle, value: fps, onChange: (e) => setFps(Number(e.target.value)), children: [_jsx("option", { value: 15, children: "15 fps \u2014 fast export" }), _jsx("option", { value: 24, children: "24 fps \u2014 cinematic" }), _jsx("option", { value: 30, children: "30 fps \u2014 smooth" })] })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Orientation" }), _jsxs("select", { style: selectStyle, value: orientation, onChange: (e) => setOrientation(e.target.value), children: [_jsx("option", { value: "landscape", children: "Landscape (1920 \u00D7 1080)" }), _jsx("option", { value: "portrait", children: "Portrait (1080 \u00D7 1920)" })] })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Captions" }), _jsxs("select", { style: selectStyle, value: captionMode, onChange: (e) => setCaptionMode(e.target.value), children: [_jsx("option", { value: "off", children: "None" }), _jsx("option", { value: "standard", children: "Standard (top bar)" }), _jsx("option", { value: "social", children: "Social media (large words)" })] })] }), _jsxs("div", { style: footerStyle, children: [_jsx("button", { style: btnSecondary, onClick: handleClose, children: "Cancel" }), _jsx("button", { style: btnPrimary, onClick: handleExport, children: "Export Video" })] })] })), isExporting && (_jsxs(_Fragment, { children: [backend && (_jsx("p", { style: { fontSize: 12, color: '#8a7a5a', margin: '0 0 8px 0' }, children: "Encoder: WebCodecs (H.264)" })), _jsx("div", { style: progressBarOuterStyle, children: _jsx("div", { style: {
+                                    width: `${progress}%`,
+                                    height: '100%',
+                                    background: '#8B6914',
+                                    transition: 'width 0.3s ease',
+                                } }) }), _jsxs("p", { style: { fontSize: 13, margin: '0 0 4px 0' }, children: [progress, "% complete"] }), _jsxs("p", { style: { fontSize: 12, color: '#8a7a5a', margin: 0 }, children: [formatDuration(elapsed), " elapsed", estimatedRemaining > 0 && ` · ~${formatDuration(estimatedRemaining)} remaining`] }), _jsx("div", { style: footerStyle, children: _jsx("button", { style: btnSecondary, onClick: cancelExport, children: "Cancel" }) })] })), state === 'complete' && (_jsxs(_Fragment, { children: [_jsx("p", { style: { fontSize: 14, margin: '0 0 8px 0', color: '#2d6a10' }, children: "Export complete!" }), _jsxs("p", { style: { fontSize: 13, color: '#5a4a2a', margin: '0 0 4px 0' }, children: ["File size: ", (fileSize / (1024 * 1024)).toFixed(1), " MB"] }), backend && (_jsx("p", { style: { fontSize: 12, color: '#8a7a5a', margin: '0 0 12px 0' }, children: "Encoded with WebCodecs (H.264)" })), _jsxs("div", { style: footerStyle, children: [_jsx("button", { style: btnSecondary, onClick: handleClose, children: "Close" }), _jsx("button", { style: btnPrimary, onClick: handleDownload, children: "Download MP4" })] })] })), state === 'error' && (_jsxs(_Fragment, { children: [_jsx("p", { style: { fontSize: 14, margin: '0 0 8px 0', color: '#a03020' }, children: "Export failed" }), _jsx("p", { style: {
+                                fontSize: 13,
+                                color: '#5a4a2a',
+                                margin: '0 0 12px 0',
+                                wordBreak: 'break-word',
+                            }, children: error }), _jsxs("div", { style: footerStyle, children: [_jsx("button", { style: btnSecondary, onClick: handleClose, children: "Close" }), _jsx("button", { style: btnPrimary, onClick: handleExport, children: "Retry" })] })] }))] }) }));
+}
+//# sourceMappingURL=VideoExportModal.js.map

package/dist/VideoExportModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoExportModal.js","sourceRoot":"","sources":["../src/VideoExportModal.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/useFrameCapture.d.ts

@@ -0,0 +1,27 @@
+/**
+ * useFrameCapture — Hidden div + html2canvas frame capture.
+ *
+ * Mounts a DocPlayer in renderMode inside a hidden div (same document),
+ * then captures individual frames by seeking the player and rendering
+ * the DOM to a canvas via html2canvas.
+ *
+ * Uses React directly — no script injection, no iframes, no eval.
+ *
+ * Returns an ImageBitmap for each frame (transferable to a Worker).
+ */
+import type { Doc } from '@bendyline/squisq/schemas';
+import type { RenderHtmlOptions } from '@bendyline/squisq-video';
+import type { CaptionMode } from '@bendyline/squisq-react';
+export interface FrameCaptureHandle {
+    /** Initialize the hidden player. Returns the video duration in seconds. */
+    init: (doc: Doc, renderOptions: Omit<RenderHtmlOptions, 'playerScript'>, captionMode?: CaptionMode) => Promise<number>;
+    /** Capture a single frame at the given time (seconds). Returns an ImageBitmap. */
+    captureFrame: (time: number) => Promise<ImageBitmap>;
+    /** Clean up resources. */
+    destroy: () => void;
+}
+/**
+ * Hook that manages a hidden div for frame capture.
+ */
+export declare function useFrameCapture(): FrameCaptureHandle;
+//# sourceMappingURL=useFrameCapture.d.ts.map

package/dist/hooks/useFrameCapture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFrameCapture.d.ts","sourceRoot":"","sources":["../../src/hooks/useFrameCapture.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,KAAK,EAAgB,WAAW,EAAgB,MAAM,yBAAyB,CAAC;AAGvF,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,IAAI,EAAE,CACJ,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC,EACtD,WAAW,CAAC,EAAE,WAAW,KACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IACrB,kFAAkF;IAClF,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IACrD,0BAA0B;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD;;GAEG;AACH,wBAAgB,eAAe,IAAI,kBAAkB,CAwKpD"}

package/dist/hooks/useFrameCapture.js

@@ -0,0 +1,211 @@
+/**
+ * useFrameCapture — Hidden div + html2canvas frame capture.
+ *
+ * Mounts a DocPlayer in renderMode inside a hidden div (same document),
+ * then captures individual frames by seeking the player and rendering
+ * the DOM to a canvas via html2canvas.
+ *
+ * Uses React directly — no script injection, no iframes, no eval.
+ *
+ * Returns an ImageBitmap for each frame (transferable to a Worker).
+ */
+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';
+/** Extension → MIME type map (hoisted to avoid per-image allocation). */
+const 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',
+};
+/** Convert an ArrayBuffer to a base64 data URI using chunked encoding (O(n)). */
+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(''))}`;
+}
+/**
+ * Create an inline MediaProvider from a map of paths to ArrayBuffers.
+ */
+function createInlineProvider(images) {
+    const dataUrls = new Map();
+    const mimeTypes = 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() { },
+    };
+}
+/**
+ * Hook that manages a hidden div for frame capture.
+ */
+export function useFrameCapture() {
+    const containerRef = useRef(null);
+    const rootRef = useRef(null);
+    const dimensionsRef = useRef({ width: 1920, height: 1080 });
+    const init = useCallback(async (doc, renderOptions, captionMode) => {
+        // Clean up any existing container.
+        // Defer unmount to avoid "synchronously unmount a root while React
+        // was already rendering" when init() is called from a React handler.
+        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 };
+        // Create a hidden container
+        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;
+        // Create render root
+        const renderRoot = document.createElement('div');
+        renderRoot.id = 'squisq-capture-root';
+        renderRoot.style.cssText = `width:${width}px;height:${height}px;`;
+        container.appendChild(renderRoot);
+        // Build media provider from images
+        const mediaProvider = renderOptions.images
+            ? createInlineProvider(renderOptions.images)
+            : null;
+        // Mount DocPlayer in renderMode via React
+        const root = createRoot(renderRoot);
+        rootRef.current = root;
+        // Derive caption props from captionMode
+        const captionsEnabled = captionMode !== undefined && 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,
+        });
+        // Defer rendering to the next microtask to avoid "synchronously unmount
+        // a root while React was already rendering" when init() is called during
+        // a React render cycle (e.g., from startExport in VideoExportModal).
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        if (mediaProvider) {
+            root.render(createElement(MediaContext.Provider, { value: mediaProvider }, playerElement));
+        }
+        else {
+            root.render(playerElement);
+        }
+        // Wait for the render API to appear on window
+        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}`));
+            }, 15000);
+            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);
+                }
+            };
+            // Give React time to mount and run useEffects
+            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 — call init() first');
+        }
+        const { width, height } = dimensionsRef.current;
+        // Seek the player to the target time
+        await w.seekTo(time);
+        // Wait for the DOM to update after seek
+        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+        const root = container.querySelector('#squisq-capture-root');
+        if (!root) {
+            throw new Error('Capture root element not found');
+        }
+        // Render the DOM to a canvas via html2canvas.
+        // We're in the same document (no iframe), so COEP doesn't block cloning.
+        const canvas = await html2canvas(root, {
+            width,
+            height,
+            scale: 1,
+            useCORS: true,
+            allowTaint: true,
+            backgroundColor: '#000000',
+            logging: false,
+        });
+        // Convert to ImageBitmap (transferable to worker — zero-copy)
+        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 a stable object to prevent useEffect cleanup loops
+    // in consumers that depend on the handle reference.
+    return useMemo(() => ({ init, captureFrame, destroy }), [init, captureFrame, destroy]);
+}
+//# sourceMappingURL=useFrameCapture.js.map