@bendyline/squisq-video-react 2.3.4 → 2.4.0

package/dist/chunk-3NJDHK62.js

@@ -0,0 +1,60 @@
+// src/imageExportShared.ts
+var IMAGE_FORMAT_DETAILS = {
+  png: { extension: "png", mime: "image/png", label: "PNG \u2014 lossless" },
+  jpeg: { extension: "jpg", mime: "image/jpeg", label: "JPEG \u2014 smaller file" },
+  webp: { extension: "webp", mime: "image/webp", label: "WebP \u2014 compact" }
+};
+function imageExportFilename(requestedName, suffix, format) {
+  const extension = IMAGE_FORMAT_DETAILS[format].extension;
+  const base = requestedName?.replace(/\.[^.]+$/, "").replace(/[<>:"/\\|?*]/g, "-").split("").map((character) => character.charCodeAt(0) < 32 ? "-" : character).join("").trim().replace(/[. ]+$/g, "") || "document";
+  return `${base}-${suffix}.${extension}`;
+}
+function canvasToImageBlob(canvas, format, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) resolve(blob);
+        else reject(new Error("The browser could not encode the image."));
+      },
+      IMAGE_FORMAT_DETAILS[format].mime,
+      format === "png" ? void 0 : quality
+    );
+  });
+}
+async function chooseImageSaveTarget(filename, format) {
+  const picker = window.showSaveFilePicker;
+  if (!picker) return void 0;
+  const details = IMAGE_FORMAT_DETAILS[format];
+  try {
+    return await picker.call(window, {
+      suggestedName: filename,
+      types: [
+        {
+          description: `${details.label.split(" \u2014")[0]} image`,
+          accept: { [details.mime]: [`.${details.extension}`] }
+        }
+      ]
+    });
+  } catch (caught) {
+    if (caught instanceof DOMException && caught.name === "AbortError") return null;
+    throw caught;
+  }
+}
+function downloadImageBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+export {
+  IMAGE_FORMAT_DETAILS,
+  imageExportFilename,
+  canvasToImageBlob,
+  chooseImageSaveTarget,
+  downloadImageBlob
+};

package/dist/{chunk-UYJ7G34U.js → chunk-4NI2QIFE.js}

@@ -2,6 +2,7 @@
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
 import { useRef, useCallback, useMemo } from "react";
+import { resolveDashboardStyleId } from "@bendyline/squisq/doc";
 import { DocPlayer, MediaContext } from "@bendyline/squisq-react";
 import html2canvas from "html2canvas";
 var MIME_MAP = {
@@ -993,6 +994,17 @@ function useFrameCapture() {
         autoPlay: false,
         forceViewport: { width, height, name: "export" },
         theme: renderOptions.theme,
+        // Undefined preserves DocPlayer's default; 'dashboard' mounts the
+        // one-canvas dashboard rendition for single-frame capture.
+        displayMode: renderOptions.displayMode,
+        dashboardLayout: renderOptions.dashboard?.layout,
+        dashboardShowTitle: renderOptions.dashboard?.title,
+        // RenderHtmlOptions types the style as a plain string (it is serialized
+        // into a script for the standalone path), so narrow it the same way the
+        // CLI does. An unrecognized value yields undefined, which defers to the
+        // doc's own squisq-dashboard-style rather than forcing 'basic'.
+        dashboardStyle: resolveDashboardStyleId(renderOptions.dashboard?.style),
+        dashboardDocumentTitle: renderOptions.dashboard?.documentTitle,
         videoPresentation: renderOptions.videoPresentation,
         pipSize: renderOptions.pipSize,
         pipShape: renderOptions.pipShape,

package/dist/{chunk-DIWB5BH4.js → chunk-BGS2NEYC.js}

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-UYJ7G34U.js";
+} from "./chunk-4NI2QIFE.js";
 import {
   EXPORT_AUDIO_CHANNELS,
   EXPORT_AUDIO_SAMPLE_RATE,

package/dist/{chunk-ZMDTR472.js → chunk-BRE3IRIM.js}

@@ -1,6 +1,13 @@
+import {
+  IMAGE_FORMAT_DETAILS,
+  canvasToImageBlob,
+  chooseImageSaveTarget,
+  downloadImageBlob,
+  imageExportFilename
+} from "./chunk-3NJDHK62.js";
 import {
   useFrameCapture
-} from "./chunk-UYJ7G34U.js";
+} from "./chunk-4NI2QIFE.js";
 
 // src/CoverImageExportModal.tsx
 import { useCallback, useId, useRef, useState } from "react";
@@ -10,11 +17,7 @@ var MIN_DIMENSION = 64;
 var MAX_DIMENSION = 7680;
 var MAX_PIXELS = 33177600;
 var COVER_IMAGE_SIZE_PRESETS = [{ label: "YouTube cover", width: 1280, height: 720 }];
-var FORMAT_DETAILS = {
-  png: { extension: "png", mime: "image/png", label: "PNG \u2014 lossless" },
-  jpeg: { extension: "jpg", mime: "image/jpeg", label: "JPEG \u2014 smaller file" },
-  webp: { extension: "webp", mime: "image/webp", label: "WebP \u2014 compact" }
-};
+var FORMAT_DETAILS = IMAGE_FORMAT_DETAILS;
 function validateCoverImageDimensions(width, height) {
   if (!Number.isSafeInteger(width) || !Number.isSafeInteger(height)) {
     return "Width and height must be whole numbers.";
@@ -28,50 +31,7 @@ function validateCoverImageDimensions(width, height) {
   return null;
 }
 function coverImageFilename(requestedName, format) {
-  const extension = FORMAT_DETAILS[format].extension;
-  const base = requestedName?.replace(/\.[^.]+$/, "").replace(/[<>:"/\\|?*]/g, "-").split("").map((character) => character.charCodeAt(0) < 32 ? "-" : character).join("").trim().replace(/[. ]+$/g, "") || "document";
-  return `${base}-cover.${extension}`;
-}
-function canvasToBlob(canvas, format, quality) {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (blob) resolve(blob);
-        else reject(new Error("The browser could not encode the cover image."));
-      },
-      FORMAT_DETAILS[format].mime,
-      format === "png" ? void 0 : quality
-    );
-  });
-}
-async function chooseSaveTarget(filename, format) {
-  const picker = window.showSaveFilePicker;
-  if (!picker) return void 0;
-  const details = FORMAT_DETAILS[format];
-  try {
-    return await picker.call(window, {
-      suggestedName: filename,
-      types: [
-        {
-          description: `${details.label.split(" \u2014")[0]} image`,
-          accept: { [details.mime]: [`.${details.extension}`] }
-        }
-      ]
-    });
-  } catch (caught) {
-    if (caught instanceof DOMException && caught.name === "AbortError") return null;
-    throw caught;
-  }
-}
-function downloadBlob(blob, filename) {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = filename;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  window.setTimeout(() => URL.revokeObjectURL(url), 0);
+  return imageExportFilename(requestedName, "cover", format);
 }
 var overlayStyle = {
   position: "fixed",
@@ -139,7 +99,7 @@ function CoverImageExportModal({
     if (dimensionError || !doc.startBlock) return;
     setError(null);
     try {
-      const saveTarget = saveOutput ? void 0 : await chooseSaveTarget(filename, format);
+      const saveTarget = saveOutput ? void 0 : await chooseImageSaveTarget(filename, format);
       if (saveTarget === null) return;
       setBusy(true);
       await capture.init(
@@ -157,7 +117,7 @@ function CoverImageExportModal({
       );
       await capture.setCoverVisible(true);
       const canvas = await capture.captureCanvasFrame(0);
-      const blob = await canvasToBlob(canvas, format, quality);
+      const blob = await canvasToImageBlob(canvas, format, quality);
       if (saveOutput) {
         const saved = await saveOutput(blob, filename);
         if (saved === false) {
@@ -169,7 +129,7 @@ function CoverImageExportModal({
         await writable.write(blob);
         await writable.close();
       } else {
-        downloadBlob(blob, filename);
+        downloadImageBlob(blob, filename);
       }
       capture.destroy();
       onClose();

package/dist/{chunk-J2O4TPEO.js → chunk-JGSJQZGU.js}

@@ -1,6 +1,6 @@
 import {
   useVideoExport
-} from "./chunk-DIWB5BH4.js";
+} from "./chunk-BGS2NEYC.js";
 
 // src/VideoExportModal.tsx
 import { useState, useCallback, useId, useRef } from "react";

package/dist/components/index.d.ts

@@ -7,6 +7,7 @@ import '@bendyline/squisq/doc';
 import '@bendyline/squisq-video';
 import '@bendyline/squisq-react';
 import '../mainThreadEncoder-BVCLjlfj.js';
+import '../imageExportShared-B6nqWtE-.js';
 
 interface VideoExportModalProps {
     /** The document to export */

package/dist/components/index.js

@@ -1,14 +1,15 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "../chunk-J2O4TPEO.js";
+} from "../chunk-JGSJQZGU.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-ZMDTR472.js";
-import "../chunk-DIWB5BH4.js";
-import "../chunk-UYJ7G34U.js";
+} from "../chunk-BRE3IRIM.js";
+import "../chunk-3NJDHK62.js";
+import "../chunk-BGS2NEYC.js";
+import "../chunk-4NI2QIFE.js";
 import "../chunk-32QCPFXE.js";
 import "../chunk-5MFQMJ5Z.js";
 export {

package/dist/cover-image/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Doc, MediaProvider, Theme } from '@bendyline/squisq/schemas';
 import { CoverSlideTemplate } from '@bendyline/squisq/doc';
+import { I as ImageExportFormat } from '../imageExportShared-B6nqWtE-.js';
 
-type CoverImageExportFormat = 'png' | 'jpeg' | 'webp';
+type CoverImageExportFormat = ImageExportFormat;
 interface CoverImageExportModalProps {
     doc: Doc;
     mediaProvider?: MediaProvider | null;

package/dist/cover-image/index.js

@@ -2,8 +2,9 @@ import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-ZMDTR472.js";
-import "../chunk-UYJ7G34U.js";
+} from "../chunk-BRE3IRIM.js";
+import "../chunk-3NJDHK62.js";
+import "../chunk-4NI2QIFE.js";
 export {
   CoverImageExportModal,
   coverImageFilename,

package/dist/dashboard-image/index.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Doc, MediaProvider, Theme } from '@bendyline/squisq/schemas';
+import { DashboardStyleId } from '@bendyline/squisq/doc';
+import { DashboardResolutionId } from '@bendyline/squisq-video';
+export { DASHBOARD_RESOLUTIONS, DEFAULT_DASHBOARD_RESOLUTION, DashboardResolutionId, DashboardResolutionPreset, validateDashboardImageDimensions } from '@bendyline/squisq-video';
+import { I as ImageExportFormat } from '../imageExportShared-B6nqWtE-.js';
+
+type DashboardImageExportFormat = ImageExportFormat;
+interface DashboardImageExportModalProps {
+    doc: Doc;
+    mediaProvider?: MediaProvider | null;
+    theme?: Theme;
+    /** Initially selected resolution preset (default `'fhd'`). */
+    defaultResolution?: DashboardResolutionId;
+    /** Initially selected layout id or `'auto'`. */
+    defaultLayout?: string;
+    /** Initial title-band state (default true — the projection default). */
+    defaultShowTitle?: boolean;
+    /** Initially selected cell style variant (default `'basic'`). */
+    defaultStyle?: DashboardStyleId;
+    defaultFileName?: string;
+    colorScheme?: 'light' | 'dark';
+    /** Optional host save flow. Return false when the user cancels. */
+    saveOutput?: (blob: Blob, filename: string) => boolean | void | Promise<boolean | void>;
+    onClose: () => void;
+}
+declare function DashboardImageExportModal({ doc, mediaProvider, theme, defaultResolution, defaultLayout, defaultShowTitle, defaultStyle, defaultFileName, colorScheme, saveOutput, onClose, }: DashboardImageExportModalProps): react_jsx_runtime.JSX.Element;
+
+export { type DashboardImageExportFormat, DashboardImageExportModal, type DashboardImageExportModalProps };

package/dist/dashboard-image/index.js

@@ -0,0 +1,422 @@
+import {
+  IMAGE_FORMAT_DETAILS,
+  canvasToImageBlob,
+  chooseImageSaveTarget,
+  downloadImageBlob,
+  imageExportFilename
+} from "../chunk-3NJDHK62.js";
+import {
+  useFrameCapture
+} from "../chunk-4NI2QIFE.js";
+
+// src/DashboardImageExportModal.tsx
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import {
+  DASHBOARD_AUTO_LAYOUT_ID,
+  DASHBOARD_STYLES,
+  DEFAULT_DASHBOARD_STYLE,
+  listDashboardLayouts
+} from "@bendyline/squisq/doc";
+import {
+  DASHBOARD_RESOLUTIONS,
+  DEFAULT_DASHBOARD_RESOLUTION,
+  MAX_DASHBOARD_IMAGE_DIMENSION,
+  MIN_DASHBOARD_IMAGE_DIMENSION,
+  validateDashboardImageDimensions
+} from "@bendyline/squisq-video";
+import { useModalDialog } from "@bendyline/squisq-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CUSTOM_RESOLUTION = "custom";
+function documentTitleFromFileName(fileName) {
+  if (!fileName) return "";
+  const base = fileName.split(/[\\/]/).pop() ?? "";
+  return base.replace(/\.[^.]+$/, "").trim();
+}
+var overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 1e4,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "rgba(0, 0, 0, 0.55)"
+};
+var rowStyle = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: 12
+};
+var labelStyle = {
+  display: "grid",
+  gap: 5,
+  marginBottom: 12,
+  fontSize: 13,
+  fontWeight: 600
+};
+function DashboardImageExportModal({
+  doc,
+  mediaProvider,
+  theme,
+  defaultResolution = DEFAULT_DASHBOARD_RESOLUTION,
+  defaultLayout = DASHBOARD_AUTO_LAYOUT_ID,
+  defaultShowTitle = true,
+  defaultStyle = DEFAULT_DASHBOARD_STYLE,
+  defaultFileName,
+  colorScheme = "light",
+  saveOutput,
+  onClose
+}) {
+  const overlayRef = useRef(null);
+  const dialogRef = useRef(null);
+  const titleId = useId();
+  const capture = useFrameCapture();
+  const [format, setFormat] = useState("png");
+  const [resolution, setResolution] = useState(defaultResolution);
+  const defaultPreset = DASHBOARD_RESOLUTIONS.find((preset) => preset.id === defaultResolution) ?? DASHBOARD_RESOLUTIONS[1];
+  const [customWidth, setCustomWidth] = useState(defaultPreset.width);
+  const [customHeight, setCustomHeight] = useState(defaultPreset.height);
+  const [layout, setLayout] = useState(defaultLayout);
+  const [showTitle, setShowTitle] = useState(defaultShowTitle);
+  const [style, setStyle] = useState(defaultStyle);
+  const [quality, setQuality] = useState(0.92);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const dark = colorScheme === "dark";
+  const surface = dark ? "#111827" : "#ffffff";
+  const control = dark ? "#0f172a" : "#ffffff";
+  const text = dark ? "#f8fafc" : "#1f2937";
+  const muted = dark ? "#94a3b8" : "#6b7280";
+  const border = dark ? "#475569" : "#cbd5e1";
+  const layoutOptions = useMemo(() => listDashboardLayouts(doc), [doc]);
+  const isCustom = resolution === CUSTOM_RESOLUTION;
+  const activePreset = DASHBOARD_RESOLUTIONS.find((preset) => preset.id === resolution);
+  const width = isCustom ? customWidth : activePreset?.width ?? defaultPreset.width;
+  const height = isCustom ? customHeight : activePreset?.height ?? defaultPreset.height;
+  const dimensionError = isCustom ? validateDashboardImageDimensions(width, height) : null;
+  const filename = imageExportFilename(defaultFileName, "dashboard", format);
+  const handleClose = useCallback(() => {
+    if (busy) return;
+    capture.destroy();
+    onClose();
+  }, [busy, capture, onClose]);
+  useModalDialog({
+    rootRef: overlayRef,
+    dialogRef,
+    closeOnEscape: !busy,
+    onClose: handleClose
+  });
+  const handleExport = useCallback(async () => {
+    if (dimensionError) return;
+    setError(null);
+    try {
+      const saveTarget = saveOutput ? void 0 : await chooseImageSaveTarget(filename, format);
+      if (saveTarget === null) return;
+      setBusy(true);
+      await capture.init(
+        doc,
+        {
+          width,
+          height,
+          animationsEnabled: false,
+          theme,
+          mediaProvider: mediaProvider ?? void 0,
+          displayMode: "dashboard",
+          dashboard: {
+            layout,
+            title: showTitle,
+            style,
+            documentTitle: documentTitleFromFileName(defaultFileName)
+          }
+        },
+        "off"
+      );
+      const canvas = await capture.captureCanvasFrame(0);
+      const blob = await canvasToImageBlob(canvas, format, quality);
+      if (saveOutput) {
+        const saved = await saveOutput(blob, filename);
+        if (saved === false) {
+          capture.destroy();
+          return;
+        }
+      } else if (saveTarget) {
+        const writable = await saveTarget.createWritable();
+        await writable.write(blob);
+        await writable.close();
+      } else {
+        downloadImageBlob(blob, filename);
+      }
+      capture.destroy();
+      onClose();
+    } catch (caught) {
+      capture.destroy();
+      setError(
+        caught instanceof Error ? caught.message : "The dashboard image could not be exported."
+      );
+    } finally {
+      setBusy(false);
+    }
+  }, [
+    capture,
+    defaultFileName,
+    dimensionError,
+    doc,
+    filename,
+    format,
+    height,
+    layout,
+    mediaProvider,
+    onClose,
+    quality,
+    saveOutput,
+    showTitle,
+    style,
+    theme,
+    width
+  ]);
+  const fieldStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    minHeight: 34,
+    border: `1px solid ${border}`,
+    borderRadius: 4,
+    background: control,
+    color: text,
+    padding: "6px 8px",
+    colorScheme
+  };
+  const builtInLayouts = layoutOptions.filter((option) => !option.custom);
+  const customLayouts = layoutOptions.filter((option) => option.custom);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      style: overlayStyle,
+      "data-color-scheme": colorScheme,
+      onClick: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          tabIndex: -1,
+          style: {
+            position: "relative",
+            boxSizing: "border-box",
+            width: "min(440px, calc(100vw - 32px))",
+            padding: 24,
+            border: `1px solid ${border}`,
+            borderRadius: 8,
+            background: surface,
+            color: text,
+            boxShadow: "0 18px 48px rgba(0, 0, 0, 0.28)",
+            fontFamily: "system-ui, -apple-system, sans-serif",
+            colorScheme
+          },
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, style: { margin: "0 36px 18px 0", fontSize: 19 }, children: "Export dashboard as image" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close dashboard image export",
+                disabled: busy,
+                onClick: handleClose,
+                style: {
+                  position: "absolute",
+                  top: 12,
+                  right: 12,
+                  width: 32,
+                  height: 32,
+                  border: 0,
+                  background: "transparent",
+                  color: text,
+                  fontSize: 24,
+                  cursor: busy ? "default" : "pointer"
+                },
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+              "Format",
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  "aria-label": "Image format",
+                  value: format,
+                  disabled: busy,
+                  onChange: (event) => setFormat(event.target.value),
+                  style: fieldStyle,
+                  children: Object.entries(IMAGE_FORMAT_DETAILS).map(([value, details]) => /* @__PURE__ */ jsx("option", { value, children: details.label }, value))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+              "Resolution",
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  "aria-label": "Image resolution",
+                  value: resolution,
+                  disabled: busy,
+                  onChange: (event) => setResolution(event.target.value),
+                  style: fieldStyle,
+                  children: [
+                    DASHBOARD_RESOLUTIONS.map((preset) => /* @__PURE__ */ jsx("option", { value: preset.id, children: preset.label }, preset.id)),
+                    /* @__PURE__ */ jsx("option", { value: CUSTOM_RESOLUTION, children: "Custom\u2026" })
+                  ]
+                }
+              )
+            ] }),
+            isCustom && /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+                "Width",
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    "aria-label": "Image width",
+                    type: "number",
+                    min: MIN_DASHBOARD_IMAGE_DIMENSION,
+                    max: MAX_DASHBOARD_IMAGE_DIMENSION,
+                    step: 1,
+                    value: customWidth,
+                    disabled: busy,
+                    onChange: (event) => setCustomWidth(Number(event.target.value)),
+                    style: fieldStyle
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+                "Height",
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    "aria-label": "Image height",
+                    type: "number",
+                    min: MIN_DASHBOARD_IMAGE_DIMENSION,
+                    max: MAX_DASHBOARD_IMAGE_DIMENSION,
+                    step: 1,
+                    value: customHeight,
+                    disabled: busy,
+                    onChange: (event) => setCustomHeight(Number(event.target.value)),
+                    style: fieldStyle
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+              "Layout",
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  "aria-label": "Dashboard layout",
+                  value: layout,
+                  disabled: busy,
+                  onChange: (event) => setLayout(event.target.value),
+                  style: fieldStyle,
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: DASHBOARD_AUTO_LAYOUT_ID, children: "Auto" }),
+                    builtInLayouts.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: `${option.label} (${option.capacity})` }, option.id)),
+                    customLayouts.length > 0 && /* @__PURE__ */ jsx("optgroup", { label: "Custom", children: customLayouts.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: `${option.label} (${option.capacity})` }, option.id)) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+              "Style",
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  "aria-label": "Dashboard cell style",
+                  value: style,
+                  disabled: busy,
+                  onChange: (event) => setStyle(event.target.value),
+                  style: fieldStyle,
+                  children: DASHBOARD_STYLES.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, title: option.description, children: option.label }, option.id))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  marginBottom: 12,
+                  fontSize: 13,
+                  fontWeight: 600
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: showTitle,
+                      disabled: busy,
+                      onChange: (event) => setShowTitle(event.target.checked)
+                    }
+                  ),
+                  "Include document title"
+                ]
+              }
+            ),
+            format !== "png" && /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+              "Quality: ",
+              Math.round(quality * 100),
+              "%",
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  "aria-label": "Image quality",
+                  type: "range",
+                  min: 0.5,
+                  max: 1,
+                  step: 0.05,
+                  value: quality,
+                  disabled: busy,
+                  onChange: (event) => setQuality(Number(event.target.value))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("p", { style: { margin: "0 0 12px", color: muted, fontSize: 12 }, children: [
+              width.toLocaleString(),
+              " \xD7 ",
+              height.toLocaleString(),
+              " pixels"
+            ] }),
+            (dimensionError || error) && /* @__PURE__ */ jsx("p", { role: "alert", style: { margin: "0 0 12px", color: dark ? "#fca5a5" : "#b91c1c" }, children: dimensionError ?? error }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+              /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, onClick: handleClose, children: "Cancel" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: busy || !!dimensionError,
+                  onClick: () => void handleExport(),
+                  style: { minWidth: 132 },
+                  children: busy ? "Rendering\u2026" : "Choose location\u2026"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/entries/dashboard-image.ts
+import {
+  DASHBOARD_RESOLUTIONS as DASHBOARD_RESOLUTIONS2,
+  DEFAULT_DASHBOARD_RESOLUTION as DEFAULT_DASHBOARD_RESOLUTION2,
+  validateDashboardImageDimensions as validateDashboardImageDimensions2
+} from "@bendyline/squisq-video";
+export {
+  DASHBOARD_RESOLUTIONS2 as DASHBOARD_RESOLUTIONS,
+  DEFAULT_DASHBOARD_RESOLUTION2 as DEFAULT_DASHBOARD_RESOLUTION,
+  DashboardImageExportModal,
+  validateDashboardImageDimensions2 as validateDashboardImageDimensions
+};

package/dist/hooks/index.js

@@ -3,10 +3,10 @@ import {
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "../chunk-DIWB5BH4.js";
+} from "../chunk-BGS2NEYC.js";
 import {
   useFrameCapture
-} from "../chunk-UYJ7G34U.js";
+} from "../chunk-4NI2QIFE.js";
 import "../chunk-32QCPFXE.js";
 import "../chunk-5MFQMJ5Z.js";
 export {

package/dist/imageExportShared-B6nqWtE-.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared single-frame image-export helpers used by both raster export
+ * dialogs (CoverImageExportModal, DashboardImageExportModal): format
+ * metadata, canvas encoding, the File System Access save flow, and the
+ * download fallback. Pure module-level functions with no component state.
+ */
+type ImageExportFormat = 'png' | 'jpeg' | 'webp';
+
+export type { ImageExportFormat as I };

package/dist/index.d.ts

@@ -8,5 +8,6 @@ export { supportsWebCodecsAac } from './encoder/index.js';
 import 'react/jsx-runtime';
 import '@bendyline/squisq/schemas';
 import '@bendyline/squisq/doc';
+import './imageExportShared-B6nqWtE-.js';
 import '@bendyline/squisq/markdown';
 import '@bendyline/squisq-react';

package/dist/index.js

@@ -1,21 +1,22 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "./chunk-J2O4TPEO.js";
+} from "./chunk-JGSJQZGU.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "./chunk-ZMDTR472.js";
+} from "./chunk-BRE3IRIM.js";
+import "./chunk-3NJDHK62.js";
 import {
   DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS,
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "./chunk-DIWB5BH4.js";
+} from "./chunk-BGS2NEYC.js";
 import {
   useFrameCapture
-} from "./chunk-UYJ7G34U.js";
+} from "./chunk-4NI2QIFE.js";
 import {
   createEncoder,
   supportsWebCodecs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "React components for browser-based MP4 and animated-GIF export of Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -42,6 +42,10 @@
       "types": "./dist/cover-image/index.d.ts",
       "import": "./dist/cover-image/index.js"
     },
+    "./dashboard-image": {
+      "types": "./dist/dashboard-image/index.d.ts",
+      "import": "./dist/dashboard-image/index.js"
+    },
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
       "import": "./dist/hooks/index.js"
@@ -69,9 +73,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.7.1",
-    "@bendyline/squisq-video": "2.2.12",
-    "@bendyline/squisq-react": "2.7.1",
+    "@bendyline/squisq": "2.8.0",
+    "@bendyline/squisq-video": "2.3.0",
+    "@bendyline/squisq-react": "2.8.0",
     "@ffmpeg/core": "0.12.9",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",