@bendyline/squisq-video-react 2.2.8 → 2.2.10

package/README.md

@@ -45,7 +45,10 @@ Both components also accept `colorScheme="light" | "dark"` so their portaled
 modal can match the host application; the default remains `light`. Hosts with
 their own theme tokens can pass `uiPalette?: Partial<VideoExportPalette>` to
 override dialog surfaces, controls, status colors, and the shared primary color
-used by the export action and progress bar.
+used by the export action and progress bar. By default the completed action is
+labelled **Save MP4/GIF to Downloads** and uses the browser download directory.
+Hosts with a native or File System Access picker can provide `saveOutput` and
+`saveActionLabel` to offer a **Save … as...** flow instead.
 
 ### Full Export Modal
 
@@ -112,6 +115,7 @@ function CustomExport({ doc, images, audio }) {
     elapsed,
     estimatedRemaining,
     downloadUrl,
+    outputBlob, // completed Blob for host-provided save flows
     fileSize,
     audioIncluded, // whether an audio track was muxed in
     audioSkippedReason, // null when the doc had no audio; a string explains a shortfall

package/dist/{chunk-SO656KT7.js → chunk-ERG6OLLO.js}

@@ -1,6 +1,6 @@
 import {
   useVideoExport
-} from "./chunk-NX34XGLL.js";
+} from "./chunk-GLOLS2CQ.js";
 
 // src/VideoExportModal.tsx
 import { useState, useCallback, useId, useRef } from "react";
@@ -18,6 +18,9 @@ function formatProcessingFps(framesPerSecond) {
 function formatRealtimeMultiplier(processingFps, outputFps) {
   return `${(processingFps / outputFps).toFixed(2)}\xD7 realtime`;
 }
+function resolveVideoSaveActionLabel(format, formatter) {
+  return formatter?.(format) ?? `Save ${format.toUpperCase()} to Downloads`;
+}
 var FRAME_PREVIEW_INTERVAL = 15;
 var FRAME_PREVIEW_WIDTH = 480;
 var FRAME_PREVIEW_HEIGHT = 270;
@@ -160,6 +163,8 @@ function VideoExportModal({
   defaultConfig,
   colorScheme = "light",
   uiPalette,
+  saveOutput,
+  saveActionLabel,
   onClose
 }) {
   const overlayRef = useRef(null);
@@ -228,6 +233,7 @@ function VideoExportModal({
     processingFps,
     outputFormat: completedOutputFormat,
     downloadUrl,
+    outputBlob,
     fileSize,
     audioIncluded,
     audioSkippedReason,
@@ -290,16 +296,31 @@ function VideoExportModal({
     defaultConfig,
     startExport
   ]);
-  const handleDownload = useCallback(() => {
-    if (!downloadUrl) return;
-    const a = document.createElement("a");
-    a.href = downloadUrl;
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState(null);
+  const handleSave = useCallback(async () => {
+    if (!downloadUrl || !outputBlob) return;
     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 filename = `document-${ts}.${completedOutputFormat}`;
+    setSaveError(null);
+    if (!saveOutput) {
+      const a = document.createElement("a");
+      a.href = downloadUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      return;
+    }
+    setSaving(true);
+    try {
+      await saveOutput(outputBlob, filename);
+    } catch (caught) {
+      setSaveError(caught instanceof Error ? caught.message : "The export could not be saved.");
+    } finally {
+      setSaving(false);
+    }
+  }, [completedOutputFormat, downloadUrl, outputBlob, saveOutput]);
   const handleClose = useCallback(() => {
     if (state === "capturing" || state === "encoding" || state === "preparing") {
       cancelExport();
@@ -591,11 +612,17 @@ function VideoExportModal({
               ] }),
               /* @__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()
-                ] })
-              ] })
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: themedPrimaryButtonStyle,
+                    onClick: () => void handleSave(),
+                    disabled: saving,
+                    children: saving ? "Saving..." : resolveVideoSaveActionLabel(completedOutputFormat, saveActionLabel)
+                  }
+                )
+              ] }),
+              saveError && /* @__PURE__ */ jsx("p", { role: "alert", style: { fontSize: 12, color: palette.danger, margin: "8px 0 0 0" }, children: saveError })
             ] }),
             state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.danger }, children: "Export failed" }),
@@ -639,6 +666,8 @@ function VideoExportButton({
   defaultConfig,
   colorScheme,
   uiPalette,
+  saveOutput,
+  saveActionLabel,
   label,
   style,
   disabled
@@ -661,6 +690,8 @@ function VideoExportButton({
           defaultConfig,
           colorScheme,
           uiPalette,
+          saveOutput,
+          saveActionLabel,
           onClose: handleClose
         }
       ),

package/dist/{chunk-NX34XGLL.js → chunk-GLOLS2CQ.js}

@@ -36,6 +36,7 @@ var MIME_MAP = {
 var CAPTURE_ASSET_TIMEOUT_MS = 15e3;
 var RENDER_TIME_EPSILON_SECONDS = 1e-6;
 var POTENTIALLY_ANIMATED_IMAGE_URL = /(?:^data:image\/(?:gif|webp|avif)[;,]|\.(?:gif|webp|avif)(?:[?#]|$))/i;
+var CAPTURE_SVG_SELECTOR = "svg.block-svg";
 async function waitForImageDecode(image) {
   const src = image.currentSrc || image.src;
   if (!src) return;
@@ -201,6 +202,7 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
       return canvas ? [{ video, canvas }] : [];
     });
   });
+  const preparedCanvases = pairs.map(({ canvas }) => canvas);
   pairs.forEach(({ video, canvas }) => {
     canvas.className = video.className;
     canvas.style.cssText = video.style.cssText;
@@ -225,13 +227,11 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
         destinationHeight,
         objectFit
       );
-      const stagingCanvas = canvas.ownerDocument.createElement("canvas");
-      stagingCanvas.width = destinationWidth;
-      stagingCanvas.height = destinationHeight;
-      const stagingContext = stagingCanvas.getContext("2d");
       const context = canvas.getContext("2d");
-      if (!stagingContext || !context) return;
-      stagingContext.drawImage(
+      if (!context) return;
+      canvas.width = destinationWidth;
+      canvas.height = destinationHeight;
+      context.drawImage(
         video,
         frame.sx,
         frame.sy,
@@ -242,9 +242,6 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
         frame.dw,
         frame.dh
       );
-      canvas.width = destinationWidth;
-      canvas.height = destinationHeight;
-      context.drawImage(stagingCanvas, 0, 0);
       const foreignObject = canvas.closest("foreignObject");
       const svg = canvas.closest("svg");
       if (foreignObject && svg) {
@@ -275,6 +272,152 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
     } catch {
     }
   });
+  return preparedCanvases;
+}
+function parseAbsoluteSvgLength(value) {
+  if (!value) return 0;
+  const match = /^\s*(\d+(?:\.\d+)?|\.\d+)(?:px)?\s*$/i.exec(value);
+  return match ? Number.parseFloat(match[1]) : 0;
+}
+function svgViewBoxSize(svg) {
+  const values = (svg.getAttribute("viewBox") ?? "").trim().split(/[\s,]+/).map(Number);
+  if (values.length === 4 && values.every(Number.isFinite)) {
+    return { width: Math.max(0, values[2]), height: Math.max(0, values[3]) };
+  }
+  return { width: 0, height: 0 };
+}
+function captureSvgRasterSize(clonedSvg, originalSvg) {
+  const clonedRect = clonedSvg.getBoundingClientRect();
+  const originalRect = originalSvg?.getBoundingClientRect();
+  const clonedViewBox = svgViewBoxSize(clonedSvg);
+  const originalViewBox = originalSvg ? svgViewBoxSize(originalSvg) : { width: 0, height: 0 };
+  const width = clonedRect.width || originalRect?.width || parseAbsoluteSvgLength(clonedSvg.getAttribute("width")) || (originalSvg ? parseAbsoluteSvgLength(originalSvg.getAttribute("width")) : 0) || clonedViewBox.width || originalViewBox.width;
+  const height = clonedRect.height || originalRect?.height || parseAbsoluteSvgLength(clonedSvg.getAttribute("height")) || (originalSvg ? parseAbsoluteSvgLength(originalSvg.getAttribute("height")) : 0) || clonedViewBox.height || originalViewBox.height;
+  return {
+    width: Math.max(1, Math.round(width)),
+    height: Math.max(1, Math.round(height))
+  };
+}
+function copyCaptureSvgPresentation(svg, canvas) {
+  for (const attribute of Array.from(svg.attributes)) {
+    if (attribute.name === "id" || attribute.name === "class" || attribute.name === "style" || attribute.name.startsWith("data-") || attribute.name.startsWith("aria-")) {
+      canvas.setAttribute(attribute.name, attribute.value);
+    }
+  }
+  canvas.dataset.svgCaptureClone = "true";
+}
+function captureImageMimeType(source, blob) {
+  if (blob.type) return blob.type;
+  const path = source.split(/[?#]/, 1)[0];
+  const ext = path.split(".").pop()?.toLowerCase() ?? "";
+  return MIME_MAP[ext] ?? "application/octet-stream";
+}
+function blobToDataUrl(blob, source) {
+  const typedBlob = blob.type ? blob : blob.slice(0, blob.size, captureImageMimeType(source, blob));
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener(
+      "load",
+      () => {
+        if (typeof reader.result === "string") resolve(reader.result);
+        else reject(new Error(`Image could not be embedded for SVG capture: ${source}`));
+      },
+      { once: true }
+    );
+    reader.addEventListener(
+      "error",
+      () => reject(reader.error ?? new Error(`Image could not be read for SVG capture: ${source}`)),
+      { once: true }
+    );
+    reader.readAsDataURL(typedBlob);
+  });
+}
+function resolveCaptureImageDataUrl(source, cache) {
+  const cached = cache.get(source);
+  if (cached) return cached;
+  const pending = fetch(source).then(async (response) => {
+    if (!response.ok) return null;
+    return blobToDataUrl(await response.blob(), source);
+  }).catch(() => null);
+  cache.set(source, pending);
+  return pending;
+}
+function captureImageReference(element) {
+  if (element.localName === "img") {
+    const source2 = element.getAttribute("src") ?? "";
+    return source2 ? {
+      source: source2,
+      replace: (dataUrl) => element.setAttribute("src", dataUrl)
+    } : null;
+  }
+  const xlinkNamespace = "http://www.w3.org/1999/xlink";
+  const source = element.getAttribute("href") ?? element.getAttributeNS(xlinkNamespace, "href") ?? "";
+  return source ? {
+    source,
+    replace: (dataUrl) => {
+      if (element.hasAttribute("href")) element.setAttribute("href", dataUrl);
+      if (element.hasAttributeNS(xlinkNamespace, "href")) {
+        element.setAttributeNS(xlinkNamespace, "href", dataUrl);
+      }
+    }
+  } : null;
+}
+async function embedCaptureSvgImages(svg, cache) {
+  const references = Array.from(svg.querySelectorAll("image, img")).map(captureImageReference).filter((reference) => reference !== null);
+  for (const reference of references) {
+    if (/^data:/i.test(reference.source) || reference.source.startsWith("#")) continue;
+    const dataUrl = await resolveCaptureImageDataUrl(reference.source, cache);
+    if (!dataUrl) return false;
+    reference.replace(dataUrl);
+  }
+  return true;
+}
+async function rasterizeCaptureSvgClones(originalRoot, clonedRoot, transientCanvases = [], imageDataUrls = /* @__PURE__ */ new Map()) {
+  if (typeof createImageBitmap !== "function") return transientCanvases;
+  const originalSvgs = Array.from(
+    originalRoot.querySelectorAll(CAPTURE_SVG_SELECTOR)
+  );
+  const clonedSvgs = Array.from(clonedRoot.querySelectorAll(CAPTURE_SVG_SELECTOR));
+  for (const [index, svg] of clonedSvgs.entries()) {
+    const { width, height } = captureSvgRasterSize(svg, originalSvgs[index]);
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svg.setAttribute("width", String(width));
+    svg.setAttribute("height", String(height));
+    let bitmap = null;
+    let replacement = null;
+    try {
+      if (!await embedCaptureSvgImages(svg, imageDataUrls)) continue;
+      const serializedSvg = new XMLSerializer().serializeToString(svg);
+      bitmap = await createImageBitmap(new Blob([serializedSvg], { type: "image/svg+xml" }));
+      replacement = svg.ownerDocument.createElement("canvas");
+      replacement.width = width;
+      replacement.height = height;
+      copyCaptureSvgPresentation(svg, replacement);
+      const context = replacement.getContext("2d");
+      if (!context) {
+        replacement.width = 0;
+        replacement.height = 0;
+        continue;
+      }
+      context.drawImage(bitmap, 0, 0, width, height);
+      svg.replaceWith(replacement);
+      transientCanvases.push(replacement);
+    } catch {
+      if (replacement && !replacement.isConnected) {
+        replacement.width = 0;
+        replacement.height = 0;
+      }
+    } finally {
+      bitmap?.close();
+    }
+  }
+  return transientCanvases;
+}
+function releaseCaptureCloneCanvases(canvases) {
+  canvases.forEach((canvas) => {
+    canvas.width = 0;
+    canvas.height = 0;
+  });
 }
 function getFrameVisualStateKey(captureRoot, timelineTime) {
   const markup = captureRoot.innerHTML;
@@ -334,6 +477,7 @@ function useFrameCapture() {
   const lastVisualStateKeyRef = useRef(null);
   const hasCapturedFrameRef = useRef(false);
   const decodedImagesRef = useRef(/* @__PURE__ */ new WeakSet());
+  const captureImageDataUrlsRef = useRef(/* @__PURE__ */ new Map());
   const dimensionsRef = useRef({ width: 1920, height: 1080 });
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
@@ -350,6 +494,7 @@ function useFrameCapture() {
         lastVisualStateKeyRef.current = null;
         hasCapturedFrameRef.current = false;
         decodedImagesRef.current = /* @__PURE__ */ new WeakSet();
+        captureImageDataUrlsRef.current.clear();
         await new Promise((resolve) => {
           setTimeout(() => {
             if (oldRoot) oldRoot.unmount();
@@ -376,6 +521,7 @@ function useFrameCapture() {
       lastVisualStateKeyRef.current = null;
       hasCapturedFrameRef.current = false;
       decodedImagesRef.current = /* @__PURE__ */ new WeakSet();
+      captureImageDataUrlsRef.current.clear();
       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);
@@ -489,23 +635,35 @@ function useFrameCapture() {
       if (!captureContext) throw new Error("Could not create the frame capture canvas context");
       captureContext.setTransform(1, 0, 0, 1, 0, 0);
       captureContext.clearRect(0, 0, width, height);
-      const canvas = await html2canvas(root, {
-        canvas: captureCanvas,
-        width,
-        height,
-        scale: 1,
-        useCORS: true,
-        allowTaint: true,
-        backgroundColor: "#000000",
-        logging: false,
-        onclone: (_clonedDocument, clonedRoot) => {
-          prepareScheduledVideoClones(root, clonedRoot);
-        },
-        // html2canvas starts cloning at documentElement. Do not clone the rest
-        // of the editor/site UI on every frame; only the capture root, its
-        // ancestors, descendants, and document styles can affect this render.
-        ignoreElements: (element) => shouldIgnoreCaptureSibling(element, root)
-      });
+      const transientCloneCanvases = [];
+      let canvas;
+      try {
+        canvas = await html2canvas(root, {
+          canvas: captureCanvas,
+          width,
+          height,
+          scale: 1,
+          useCORS: true,
+          allowTaint: true,
+          backgroundColor: "#000000",
+          logging: false,
+          onclone: async (_clonedDocument, clonedRoot) => {
+            transientCloneCanvases.push(...prepareScheduledVideoClones(root, clonedRoot));
+            await rasterizeCaptureSvgClones(
+              root,
+              clonedRoot,
+              transientCloneCanvases,
+              captureImageDataUrlsRef.current
+            );
+          },
+          // html2canvas starts cloning at documentElement. Do not clone the rest
+          // of the editor/site UI on every frame; only the capture root, its
+          // ancestors, descendants, and document styles can affect this render.
+          ignoreElements: (element) => shouldIgnoreCaptureSibling(element, root)
+        });
+      } finally {
+        releaseCaptureCloneCanvases(transientCloneCanvases);
+      }
       hasCapturedFrameRef.current = true;
       lastVisualStateKeyRef.current = visualStateKey;
       return canvas;
@@ -538,6 +696,7 @@ function useFrameCapture() {
     lastVisualStateKeyRef.current = null;
     hasCapturedFrameRef.current = false;
     decodedImagesRef.current = /* @__PURE__ */ new WeakSet();
+    captureImageDataUrlsRef.current.clear();
     renderAPIRef.current = null;
   }, []);
   return useMemo(
@@ -939,6 +1098,7 @@ function useVideoExport(options = {}) {
   const [outputFormat, setOutputFormat] = useState("mp4");
   const [backend, setBackend] = useState(null);
   const [downloadUrl, setDownloadUrl] = useState(null);
+  const [outputBlob, setOutputBlob] = useState(null);
   const [fileSize, setFileSize] = useState(0);
   const [audioIncluded, setAudioIncluded] = useState(false);
   const [audioSkippedReason, setAudioSkippedReason] = useState(null);
@@ -988,6 +1148,7 @@ function useVideoExport(options = {}) {
     setOutputFormat("mp4");
     setBackend(null);
     setDownloadUrl(null);
+    setOutputBlob(null);
     setFileSize(0);
     setAudioIncluded(false);
     setAudioSkippedReason(null);
@@ -1019,6 +1180,7 @@ function useVideoExport(options = {}) {
         downloadUrlRef.current = null;
       }
       setDownloadUrl(null);
+      setOutputBlob(null);
       setFileSize(0);
       setAudioIncluded(false);
       setAudioSkippedReason(null);
@@ -1344,6 +1506,7 @@ function useVideoExport(options = {}) {
         const url = URL.createObjectURL(blob);
         downloadUrlRef.current = url;
         setDownloadUrl(url);
+        setOutputBlob(blob);
         setFileSize(finalBytes.byteLength);
         setAudioIncluded(audioIncludedLocal);
         setAudioSkippedReason(
@@ -1383,6 +1546,7 @@ function useVideoExport(options = {}) {
     outputFormat,
     backend,
     downloadUrl,
+    outputBlob,
     fileSize,
     audioIncluded,
     audioSkippedReason,

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Doc, MediaProvider } from '@bendyline/squisq/schemas';
-import { a as VideoExportConfig } from '../useVideoExport-DKpdXZ0o.js';
+import { a as VideoExportConfig, e as VideoOutputFormat } from '../useVideoExport-raCbwbwb.js';
 import '@bendyline/squisq/markdown';
 import '@bendyline/squisq-video';
 import '@bendyline/squisq-react';
@@ -33,6 +33,10 @@ interface VideoExportModalProps {
     colorScheme?: 'light' | 'dark';
     /** Optional host overrides for dialog surfaces, controls, status, and accent colors. */
     uiPalette?: Partial<VideoExportPalette>;
+    /** Optional host save flow. Return false when the user cancels a picker. */
+    saveOutput?: (blob: Blob, filename: string) => boolean | void | Promise<boolean | void>;
+    /** Host-aware label for the completed export action. */
+    saveActionLabel?: (format: VideoOutputFormat) => string;
     /** Called when the modal should close */
     onClose: () => void;
 }
@@ -52,7 +56,7 @@ interface VideoExportPalette {
     success: string;
     danger: string;
 }
-declare function VideoExportModal({ doc, playerScript, mediaProvider, images, audio, defaultConfig, colorScheme, uiPalette, onClose, }: VideoExportModalProps): react_jsx_runtime.JSX.Element;
+declare function VideoExportModal({ doc, playerScript, mediaProvider, images, audio, defaultConfig, colorScheme, uiPalette, saveOutput, saveActionLabel, onClose, }: VideoExportModalProps): react_jsx_runtime.JSX.Element;
 
 interface VideoExportButtonProps {
     /** The document to export */
@@ -79,6 +83,10 @@ interface VideoExportButtonProps {
     colorScheme?: 'light' | 'dark';
     /** Optional host palette overrides forwarded to the portaled modal. */
     uiPalette?: Partial<VideoExportPalette>;
+    /** Optional host save flow forwarded to the portaled modal. */
+    saveOutput?: VideoExportModalProps['saveOutput'];
+    /** Host-aware completed-export action label forwarded to the modal. */
+    saveActionLabel?: VideoExportModalProps['saveActionLabel'];
     /** Button label (defaults to "Export Video", or "Export GIF" for a GIF default config) */
     label?: string;
     /** Additional inline styles for the button */
@@ -86,6 +94,6 @@ interface VideoExportButtonProps {
     /** Whether the button is disabled */
     disabled?: boolean;
 }
-declare function VideoExportButton({ doc, playerScript, mediaProvider, images, audio, defaultConfig, colorScheme, uiPalette, label, style, disabled, }: VideoExportButtonProps): react_jsx_runtime.JSX.Element;
+declare function VideoExportButton({ doc, playerScript, mediaProvider, images, audio, defaultConfig, colorScheme, uiPalette, saveOutput, saveActionLabel, label, style, disabled, }: VideoExportButtonProps): react_jsx_runtime.JSX.Element;
 
 export { VideoExportButton, type VideoExportButtonProps, VideoExportModal, type VideoExportModalProps, type VideoExportPalette };

package/dist/components/index.js

@@ -1,8 +1,8 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "../chunk-SO656KT7.js";
-import "../chunk-NX34XGLL.js";
+} from "../chunk-ERG6OLLO.js";
+import "../chunk-GLOLS2CQ.js";
 import "../chunk-2XACUF6E.js";
 import "../chunk-MEPETH5V.js";
 export {

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { D as DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS, R as ResolvedVideoExportCover, U as UseVideoExportOptions, V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportFramePreview, c as VideoExportResult, d as VideoExportState, e as VideoOutputFormat, r as resolveVideoExportCover, u as useVideoExport } from '../useVideoExport-DKpdXZ0o.js';
+export { D as DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS, R as ResolvedVideoExportCover, U as UseVideoExportOptions, V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportFramePreview, c as VideoExportResult, d as VideoExportState, e as VideoOutputFormat, r as resolveVideoExportCover, u as useVideoExport } from '../useVideoExport-raCbwbwb.js';
 import { Doc } from '@bendyline/squisq/schemas';
 import { RenderHtmlOptions } from '@bendyline/squisq-video';
 import { CaptionMode } from '@bendyline/squisq-react';

package/dist/hooks/index.js

@@ -3,7 +3,7 @@ import {
   resolveVideoExportCover,
   useFrameCapture,
   useVideoExport
-} from "../chunk-NX34XGLL.js";
+} from "../chunk-GLOLS2CQ.js";
 import "../chunk-2XACUF6E.js";
 import "../chunk-MEPETH5V.js";
 export {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { VideoExportButton, VideoExportButtonProps, VideoExportModal, VideoExportModalProps, VideoExportPalette } from './components/index.js';
-export { D as DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS, R as ResolvedVideoExportCover, U as UseVideoExportOptions, V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportFramePreview, c as VideoExportResult, d as VideoExportState, e as VideoOutputFormat, r as resolveVideoExportCover, u as useVideoExport } from './useVideoExport-DKpdXZ0o.js';
+export { D as DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS, R as ResolvedVideoExportCover, U as UseVideoExportOptions, V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportFramePreview, c as VideoExportResult, d as VideoExportState, e as VideoOutputFormat, r as resolveVideoExportCover, u as useVideoExport } from './useVideoExport-raCbwbwb.js';
 export { FrameCaptureHandle, FrameCaptureOptions, FrameCaptureRenderOptions, useFrameCapture } from './hooks/index.js';
 export { E as EncoderConfig, a as EncoderFrameSource, M as MainThreadEncoder, c as createEncoder, s as supportsWebCodecs, b as supportsWebCodecsH264 } from './mainThreadEncoder-BgcFyYvO.js';
 export { FfmpegWasmLoadConfig } from '@bendyline/squisq-video';

package/dist/index.js

@@ -1,13 +1,13 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "./chunk-SO656KT7.js";
+} from "./chunk-ERG6OLLO.js";
 import {
   DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS,
   resolveVideoExportCover,
   useFrameCapture,
   useVideoExport
-} from "./chunk-NX34XGLL.js";
+} from "./chunk-GLOLS2CQ.js";
 import {
   createEncoder,
   supportsWebCodecs,

package/dist/{useVideoExport-DKpdXZ0o.d.ts → useVideoExport-raCbwbwb.d.ts}

@@ -108,6 +108,8 @@ interface VideoExportResult {
     backend: 'webcodecs' | 'ffmpeg-wasm' | null;
     /** Blob download URL (populated when state === 'complete') */
     downloadUrl: string | null;
+    /** Completed output Blob for host-provided save flows. */
+    outputBlob: Blob | null;
     /** File size in bytes (populated when state === 'complete') */
     fileSize: number;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.2.8",
+  "version": "2.2.10",
   "description": "React components for browser-based MP4 and animated-GIF export of Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -65,9 +65,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.4.3",
-    "@bendyline/squisq-video": "2.2.7",
-    "@bendyline/squisq-react": "2.4.4",
+    "@bendyline/squisq": "2.4.4",
+    "@bendyline/squisq-video": "2.2.8",
+    "@bendyline/squisq-react": "2.4.6",
     "@ffmpeg/core": "0.12.9",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",