@bendyline/squisq-editor-react 2.4.6 → 2.5.0

package/dist/{chunk-55DQFHK5.js → chunk-DCMJXDQY.js}

@@ -647,6 +647,8 @@ function EditorProvider({
   useEffect(() => sceneTextChannel.subscribe(setActiveSceneText), [sceneTextChannel]);
   const articleIdRef = useRef(articleId);
   articleIdRef.current = articleId;
+  const fileNameRef = useRef(fileName);
+  fileNameRef.current = fileName;
   useEffect(() => {
     setColorScheme(initialColorScheme);
   }, [initialColorScheme]);
@@ -660,7 +662,8 @@ function EditorProvider({
       setParseError(null);
       try {
         const generatedDoc = markdownToDoc(parsed, {
-          articleId: articleIdRef.current
+          articleId: articleIdRef.current,
+          fileName: fileNameRef.current
         });
         setDoc(generatedDoc);
       } catch (docErr) {
@@ -811,7 +814,8 @@ function EditorProvider({
       setParseError(null);
       try {
         const generatedDoc = markdownToDoc(newDoc, {
-          articleId: articleIdRef.current
+          articleId: articleIdRef.current,
+          fileName: fileNameRef.current
         });
         setDoc(generatedDoc);
       } catch (docErr) {
@@ -3259,6 +3263,7 @@ import {
   useRef as useRef7
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
+import { BlockRenderer, MediaContext } from "@bendyline/squisq-react";
 import {
   VIEWPORT_PRESETS,
   getThemeSummaries as getThemeSummaries2,
@@ -3277,8 +3282,13 @@ import {
   writeCustomThemesToFrontmatter as writeCustomThemesToFrontmatter2,
   writeCustomTemplatesToFrontmatter,
   FRONTMATTER_CUSTOM_THEMES_KEY as FRONTMATTER_CUSTOM_THEMES_KEY2,
-  FRONTMATTER_CUSTOM_TEMPLATES_KEY
+  FRONTMATTER_CUSTOM_TEMPLATES_KEY,
+  COVER_SLIDE_TEMPLATE_OPTIONS,
+  createTemplateContext,
+  expandCoverBlock,
+  resolveCoverSlideSettings
 } from "@bendyline/squisq/doc";
+import { CoverImageExportModal } from "@bendyline/squisq-video-react/cover-image";
 
 // src/transformStyleId.ts
 import { getTransformStyleSummaries } from "@bendyline/squisq/transform";
@@ -3291,11 +3301,15 @@ function resolvePersistedTransformStyleId(value) {
 }
 
 // src/frontmatterSettings.ts
+import { COVER_SLIDE_FRONTMATTER_KEYS, DEFAULT_COVER_SLIDE_SETTINGS } from "@bendyline/squisq/doc";
 var FRONTMATTER_SETTING_KEYS = {
   theme: { canonical: "squisq-theme", legacy: ["themeId", "theme"] },
   transform: { canonical: "squisq-transform", legacy: "transform-style" },
   captions: { canonical: "squisq-captions", legacy: "caption-style" },
-  coverSlide: { canonical: "squisq-cover-slide", legacy: "cover-slide" },
+  coverSlide: COVER_SLIDE_FRONTMATTER_KEYS.enabled,
+  coverTemplate: COVER_SLIDE_FRONTMATTER_KEYS.template,
+  coverDuration: COVER_SLIDE_FRONTMATTER_KEYS.duration,
+  coverPlayback: COVER_SLIDE_FRONTMATTER_KEYS.playback,
   videoLoop: { canonical: "squisq-video-loop", legacy: "video-loop" },
   videoPresentation: {
     canonical: "squisq-video-presentation",
@@ -3309,7 +3323,10 @@ var FRONTMATTER_SETTING_DEFAULTS = {
   theme: "standard",
   transform: "",
   captions: "standard",
-  coverSlide: true,
+  coverSlide: DEFAULT_COVER_SLIDE_SETTINGS.enabled,
+  coverTemplate: DEFAULT_COVER_SLIDE_SETTINGS.template,
+  coverDuration: DEFAULT_COVER_SLIDE_SETTINGS.duration,
+  coverPlayback: DEFAULT_COVER_SLIDE_SETTINGS.playback,
   videoLoop: false,
   videoPresentation: "background",
   pipSize: "small",
@@ -3777,19 +3794,14 @@ function PreviewSettingsProvider({
     },
     [persistFrontmatter]
   );
-  const fmCoverSlide = useMemo8(
-    () => resolveFrontmatterBoolean(
-      readFrontmatterKey(
-        frontmatter,
-        FRONTMATTER_SETTING_KEYS.coverSlide.canonical,
-        FRONTMATTER_SETTING_KEYS.coverSlide.legacy
-      )
-    ),
+  const resolvedCoverSettings = useMemo8(
+    () => resolveCoverSlideSettings(frontmatter),
     [frontmatter]
   );
+  const fmCoverSlide = resolvedCoverSettings.enabled;
   const [selectedCoverSlide, setSelectedCoverSlide] = useState9(null);
   useEffect8(() => setSelectedCoverSlide(null), [fmCoverSlide]);
-  const activeCoverSlide = selectedCoverSlide ?? fmCoverSlide ?? FRONTMATTER_SETTING_DEFAULTS.coverSlide;
+  const activeCoverSlide = selectedCoverSlide ?? fmCoverSlide;
   const handleSetCoverSlideEnabled = useCallback9(
     (enabled) => {
       setSelectedCoverSlide(enabled);
@@ -3806,6 +3818,55 @@ function PreviewSettingsProvider({
     },
     [persistFrontmatter]
   );
+  const [selectedCoverSlideTemplate, setSelectedCoverSlideTemplate] = useState9(null);
+  useEffect8(() => setSelectedCoverSlideTemplate(null), [resolvedCoverSettings.template]);
+  const activeCoverSlideTemplate = selectedCoverSlideTemplate ?? resolvedCoverSettings.template;
+  const handleSetCoverSlideTemplate = useCallback9(
+    (template) => {
+      setSelectedCoverSlideTemplate(template);
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.coverTemplate.canonical]: omitFrontmatterDefault(
+          template,
+          FRONTMATTER_SETTING_DEFAULTS.coverTemplate
+        ),
+        [FRONTMATTER_SETTING_KEYS.coverTemplate.legacy]: null
+      });
+    },
+    [persistFrontmatter]
+  );
+  const [selectedCoverSlideDuration, setSelectedCoverSlideDuration] = useState9(null);
+  useEffect8(() => setSelectedCoverSlideDuration(null), [resolvedCoverSettings.duration]);
+  const activeCoverSlideDuration = selectedCoverSlideDuration ?? resolvedCoverSettings.duration;
+  const handleSetCoverSlideDuration = useCallback9(
+    (duration) => {
+      if (!Number.isFinite(duration) || duration < 0 || duration > 60) return;
+      setSelectedCoverSlideDuration(duration);
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.coverDuration.canonical]: omitFrontmatterDefault(
+          duration,
+          FRONTMATTER_SETTING_DEFAULTS.coverDuration
+        ),
+        [FRONTMATTER_SETTING_KEYS.coverDuration.legacy]: null
+      });
+    },
+    [persistFrontmatter]
+  );
+  const [selectedCoverSlidePlayback, setSelectedCoverSlidePlayback] = useState9(null);
+  useEffect8(() => setSelectedCoverSlidePlayback(null), [resolvedCoverSettings.playback]);
+  const activeCoverSlidePlayback = selectedCoverSlidePlayback ?? resolvedCoverSettings.playback;
+  const handleSetCoverSlidePlayback = useCallback9(
+    (playback) => {
+      setSelectedCoverSlidePlayback(playback);
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.coverPlayback.canonical]: omitFrontmatterDefault(
+          playback,
+          FRONTMATTER_SETTING_DEFAULTS.coverPlayback
+        ),
+        [FRONTMATTER_SETTING_KEYS.coverPlayback.legacy]: null
+      });
+    },
+    [persistFrontmatter]
+  );
   const themeDesigner = useMemo8(
     () => designer.open ? {
       value: designer.editing,
@@ -3843,6 +3904,12 @@ function PreviewSettingsProvider({
       setVideoLoopEnabled: handleSetVideoLoopEnabled,
       activeCoverSlide,
       setCoverSlideEnabled: handleSetCoverSlideEnabled,
+      activeCoverSlideTemplate,
+      setCoverSlideTemplate: handleSetCoverSlideTemplate,
+      activeCoverSlideDuration,
+      setCoverSlideDuration: handleSetCoverSlideDuration,
+      activeCoverSlidePlayback,
+      setCoverSlidePlayback: handleSetCoverSlidePlayback,
       customThemes,
       openThemeDesigner,
       deleteCustomTheme,
@@ -3865,6 +3932,9 @@ function PreviewSettingsProvider({
       activePipPosition,
       activeVideoLoop,
       activeCoverSlide,
+      activeCoverSlideTemplate,
+      activeCoverSlideDuration,
+      activeCoverSlidePlayback,
       handleSetThemeId,
       handleSetTransformStyle,
       handleSetCaptionMode,
@@ -3874,6 +3944,9 @@ function PreviewSettingsProvider({
       handlePipPosition,
       handleSetVideoLoopEnabled,
       handleSetCoverSlideEnabled,
+      handleSetCoverSlideTemplate,
+      handleSetCoverSlideDuration,
+      handleSetCoverSlidePlayback,
       customThemes,
       openThemeDesigner,
       deleteCustomTheme,
@@ -4018,6 +4091,282 @@ var selectStyle = {
   fontSize: "12px",
   cursor: "pointer"
 };
+var COVER_MENU_WIDTH = 336;
+var COVER_MENU_GAP = 4;
+var COVER_MENU_MARGIN = 8;
+function CoverSlideMenuControl({ compact }) {
+  const settings = usePreviewSettings();
+  const { colorScheme, doc, fileName, mediaProvider } = useEditorContext();
+  const triggerRef = useRef7(null);
+  const menuRef = useRef7(null);
+  const [open, setOpen] = useState9(false);
+  const [anchor, setAnchor] = useState9(null);
+  const [exportOpen, setExportOpen] = useState9(false);
+  const updatePosition = useCallback9(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const width = Math.min(COVER_MENU_WIDTH, window.innerWidth - COVER_MENU_MARGIN * 2);
+    setAnchor({
+      top: rect.bottom + COVER_MENU_GAP,
+      left: clampPreviewPopoverLeft(rect, width, window.innerWidth)
+    });
+  }, []);
+  const closeMenu = useCallback9(() => {
+    setOpen(false);
+    setAnchor(null);
+  }, []);
+  useEffect8(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      closeMenu();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      closeMenu();
+      triggerRef.current?.focus();
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [closeMenu, open, updatePosition]);
+  const coverExists = !!doc?.startBlock;
+  const coverPreviewBlock = useMemo8(() => {
+    if (!open || !doc?.startBlock) return null;
+    const context = createTemplateContext(settings.activeTheme, 0, 1, settings.activeViewport);
+    return {
+      id: "cover-slide-menu-preview",
+      startTime: -1,
+      duration: 0,
+      audioSegment: -1,
+      layers: expandCoverBlock(doc.startBlock, context, settings.activeCoverSlideTemplate)
+    };
+  }, [
+    open,
+    doc?.startBlock,
+    settings.activeTheme,
+    settings.activeViewport,
+    settings.activeCoverSlideTemplate
+  ]);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `squisq-preview-control squisq-cover-slide-control${compact ? " squisq-preview-control--compact" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: `squisq-cover-slide-trigger${open ? " squisq-cover-slide-trigger--open" : ""}`,
+            "aria-label": "Cover slide settings",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            onClick: () => {
+              if (open) {
+                closeMenu();
+              } else {
+                updatePosition();
+                setOpen(true);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx8(
+                "span",
+                {
+                  className: `squisq-cover-slide-status${settings.activeCoverSlide ? " squisq-cover-slide-status--enabled" : ""}`,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx8(Icon, { icon: settings.activeCoverSlide ? "fa-solid fa-check" : "fa-solid fa-minus" })
+                }
+              ),
+              /* @__PURE__ */ jsx8("span", { children: "Cover slide" }),
+              /* @__PURE__ */ jsx8("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("path", { d: "M2 3.5 5 6.5 8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
+            ]
+          }
+        ),
+        open && anchor && createPortal2(
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              ref: menuRef,
+              className: "squisq-cover-slide-menu",
+              "data-theme": colorScheme,
+              role: "dialog",
+              "aria-label": "Cover slide settings",
+              style: { top: anchor.top, left: anchor.left },
+              children: [
+                /* @__PURE__ */ jsxs6("div", { className: "squisq-cover-slide-menu-heading", children: [
+                  /* @__PURE__ */ jsx8("span", { children: "Cover slide" }),
+                  /* @__PURE__ */ jsxs6("label", { className: "squisq-cover-slide-switch", children: [
+                    /* @__PURE__ */ jsx8(
+                      "input",
+                      {
+                        type: "checkbox",
+                        "aria-label": "Cover slide",
+                        checked: settings.activeCoverSlide,
+                        onChange: (event) => settings.setCoverSlideEnabled(event.target.checked)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8("span", { children: settings.activeCoverSlide ? "Shown" : "Hidden" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx8(
+                  "div",
+                  {
+                    className: `squisq-cover-slide-preview${settings.activeCoverSlide ? "" : " squisq-cover-slide-preview--disabled"}`,
+                    style: {
+                      aspectRatio: `${settings.activeViewport.width} / ${settings.activeViewport.height}`
+                    },
+                    children: coverPreviewBlock ? /* @__PURE__ */ jsx8(MediaContext.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx8("div", { className: "squisq-cover-slide-preview-frame", "aria-hidden": "true", children: /* @__PURE__ */ jsx8(
+                      BlockRenderer,
+                      {
+                        block: coverPreviewBlock,
+                        blockTime: 0,
+                        basePath: ".",
+                        viewport: settings.activeViewport,
+                        animationsEnabled: false,
+                        muted: true,
+                        theme: settings.activeTheme
+                      }
+                    ) }) }) : /* @__PURE__ */ jsxs6("p", { className: "squisq-cover-slide-preview-empty", children: [
+                      "No cover to preview yet \u2014 start the document with a level-1 heading (",
+                      /* @__PURE__ */ jsx8("code", { children: "#\xA0Title" }),
+                      ") to generate one."
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxs6("label", { className: "squisq-cover-slide-field", children: [
+                  /* @__PURE__ */ jsx8("span", { children: "Appearance" }),
+                  /* @__PURE__ */ jsx8(
+                    "select",
+                    {
+                      "aria-label": "Cover slide appearance",
+                      value: settings.activeCoverSlideTemplate,
+                      onChange: (event) => settings.setCoverSlideTemplate(event.target.value),
+                      children: COVER_SLIDE_TEMPLATE_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
+                        "option",
+                        {
+                          value: option.id,
+                          disabled: option.requiresHeroImage && !doc?.startBlock?.heroSrc,
+                          children: option.label
+                        },
+                        option.id
+                      ))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx8("p", { className: "squisq-cover-slide-help", children: COVER_SLIDE_TEMPLATE_OPTIONS.find(
+                  (option) => option.id === settings.activeCoverSlideTemplate
+                )?.description }),
+                /* @__PURE__ */ jsxs6("label", { className: "squisq-cover-slide-field", children: [
+                  /* @__PURE__ */ jsxs6("span", { children: [
+                    "Duration",
+                    /* @__PURE__ */ jsxs6("output", { children: [
+                      settings.activeCoverSlideDuration.toFixed(1),
+                      "s"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx8(
+                    "input",
+                    {
+                      "aria-label": "Cover slide duration",
+                      type: "range",
+                      min: 0,
+                      max: 10,
+                      step: 0.5,
+                      value: settings.activeCoverSlideDuration,
+                      onChange: (event) => settings.setCoverSlideDuration(Number(event.target.value))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs6("fieldset", { className: "squisq-cover-slide-timing", children: [
+                  /* @__PURE__ */ jsx8("legend", { children: "Exported video timing" }),
+                  /* @__PURE__ */ jsxs6("label", { children: [
+                    /* @__PURE__ */ jsx8(
+                      "input",
+                      {
+                        type: "radio",
+                        name: "squisq-cover-playback",
+                        value: "preroll",
+                        checked: settings.activeCoverSlidePlayback === "preroll",
+                        onChange: () => settings.setCoverSlidePlayback("preroll")
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      "Delay video",
+                      /* @__PURE__ */ jsx8("small", { children: "Start the story after the cover." })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs6("label", { children: [
+                    /* @__PURE__ */ jsx8(
+                      "input",
+                      {
+                        type: "radio",
+                        name: "squisq-cover-playback",
+                        value: "overlay",
+                        checked: settings.activeCoverSlidePlayback === "overlay",
+                        onChange: () => settings.setCoverSlidePlayback("overlay")
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      "Play underneath",
+                      /* @__PURE__ */ jsx8("small", { children: "Let the story advance behind the cover." })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs6(
+                  "button",
+                  {
+                    type: "button",
+                    className: "squisq-cover-slide-export",
+                    disabled: !coverExists,
+                    title: coverExists ? void 0 : "No cover slide to export \u2014 start the document with a level-1 heading (# Title) to generate one.",
+                    onClick: () => {
+                      closeMenu();
+                      setExportOpen(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-image" }),
+                      "Export cover as image\u2026"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          document.body
+        ),
+        exportOpen && doc && createPortal2(
+          /* @__PURE__ */ jsx8(
+            CoverImageExportModal,
+            {
+              doc,
+              mediaProvider,
+              theme: settings.activeTheme,
+              coverSlideTemplate: settings.activeCoverSlideTemplate,
+              defaultWidth: settings.activeViewport.width,
+              defaultHeight: settings.activeViewport.height,
+              defaultFileName: fileName,
+              colorScheme,
+              onClose: () => setExportOpen(false)
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
 function PreviewToolbarControls({ displayMode } = {}) {
   const s = usePreviewSettings();
   const controlKeys = controlKeysForMode(displayMode ?? s.activeDisplayMode, s.hasVideoMedia);
@@ -4310,24 +4659,7 @@ function PreviewToolbarControls({ displayMode } = {}) {
           "loop"
         );
       case "cover":
-        return /* @__PURE__ */ jsx8(
-          "div",
-          {
-            className: `squisq-preview-control${compact ? " squisq-preview-control--compact" : ""}`,
-            children: /* @__PURE__ */ jsxs6("label", { className: "squisq-preview-checkbox", children: [
-              /* @__PURE__ */ jsx8(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: s.activeCoverSlide,
-                  onChange: (e2) => s.setCoverSlideEnabled(e2.target.checked)
-                }
-              ),
-              /* @__PURE__ */ jsx8("span", { children: "Cover slide" })
-            ] })
-          },
-          "cover"
-        );
+        return /* @__PURE__ */ jsx8(CoverSlideMenuControl, { compact }, "cover");
     }
   };
   const hasOverflow = visibleCount < controlKeys.length;
@@ -4440,8 +4772,10 @@ function PreviewModeMenu({ openRequest = 0 }) {
   useEffect8(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
-      const target = event.target;
-      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      const eventPath = event.composedPath();
+      if (triggerRef.current && eventPath.includes(triggerRef.current) || menuRef.current && eventPath.includes(menuRef.current)) {
+        return;
+      }
       closeMenu();
     };
     const handleKeyDown = (event) => {
@@ -5198,7 +5532,7 @@ function TemplateThumbnail({ def, width = W2, height = H2 }) {
 
 // src/TemplateContentPreview.tsx
 import { useMemo as useMemo11 } from "react";
-import { BlockRenderer, MediaContext } from "@bendyline/squisq-react";
+import { BlockRenderer as BlockRenderer2, MediaContext as MediaContext2 } from "@bendyline/squisq-react";
 
 // src/templateContentPreviewResolver.ts
 import {
@@ -5502,8 +5836,8 @@ function TemplateContentPreview({
       className: "squisq-template-gallery-content-preview",
       style: { aspectRatio: `${source.viewport.width} / ${source.viewport.height}` },
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx14(MediaContext.Provider, { value: source.mediaProvider ?? null, children: /* @__PURE__ */ jsx14(
-        BlockRenderer,
+      children: /* @__PURE__ */ jsx14(MediaContext2.Provider, { value: source.mediaProvider ?? null, children: /* @__PURE__ */ jsx14(
+        BlockRenderer2,
         {
           block: preview.visual,
           blockTime: 0,
@@ -5587,6 +5921,17 @@ var TEMPLATE_ENTRIES = [
       /* @__PURE__ */ jsx15("rect", { x: 11, y: 24, width: 20, height: 2.5, rx: 1, fill: F1, opacity: 0.7 })
     ] })
   },
+  {
+    name: "bigText",
+    label: "Big Text",
+    description: "Gigantic uppercase display text \u2014 thumbnail-style \u2014 on a theme surface or over an image with a contrast bloom.",
+    icon: /* @__PURE__ */ jsxs11(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx15("rect", { x: 4, y: 4, width: 48, height: 32, rx: 2, fill: F1, opacity: 0.25 }),
+      /* @__PURE__ */ jsx15("ellipse", { cx: 28, cy: 20, rx: 22, ry: 13, fill: F1, opacity: 0.35 }),
+      /* @__PURE__ */ jsx15("rect", { x: 8, y: 12, width: 40, height: 10, rx: 2, fill: FA }),
+      /* @__PURE__ */ jsx15("rect", { x: 16, y: 26, width: 24, height: 4, rx: 1, fill: F2 })
+    ] })
+  },
   {
     name: "content",
     label: "Content",
@@ -10332,7 +10677,7 @@ import { createPortal as createPortal7 } from "react-dom";
 // src/customTemplates/TemplateDesigner.tsx
 import { useCallback as useCallback26, useId as useId9, useMemo as useMemo23, useRef as useRef25, useState as useState28 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { MediaContext as MediaContext2 } from "@bendyline/squisq-react";
+import { MediaContext as MediaContext3 } from "@bendyline/squisq-react";
 
 // src/scene/Scene.tsx
 import {
@@ -15126,7 +15471,7 @@ function TemplateDesigner({
                 /* @__PURE__ */ jsx36(LayerToolbar, { layer: selectedLayer, onAttr: handleLayerAttr })
               ] })
             ] }),
-            /* @__PURE__ */ jsx36("div", { className: "squisq-template-designer-scene", children: /* @__PURE__ */ jsx36(MediaContext2.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx36("div", { className: "squisq-template-designer-scene", children: /* @__PURE__ */ jsx36(MediaContext3.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx36(
               Scene,
               {
                 viewport: currentViewport,
@@ -28806,7 +29151,7 @@ import {
   deriveTemplateInputs as deriveTemplateInputs2
 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText3, getChildren } from "@bendyline/squisq/markdown";
-import { BlockRenderer as BlockRenderer2, MediaContext as MediaContext3 } from "@bendyline/squisq-react";
+import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 
 // src/useHeadingLayout.ts
 import { useCallback as useCallback39, useEffect as useEffect40, useMemo as useMemo36, useState as useState50 } from "react";
@@ -29368,7 +29713,7 @@ function InlinePreviewGutter({
             })
           }
         ),
-        /* @__PURE__ */ jsx57(MediaContext3.Provider, { value: mediaProvider ?? null, children: items.map((item) => {
+        /* @__PURE__ */ jsx57(MediaContext4.Provider, { value: mediaProvider ?? null, children: items.map((item) => {
           const top = positions.get(item.id);
           const hidden = top == null;
           return /* @__PURE__ */ jsxs45(
@@ -29400,7 +29745,7 @@ function InlinePreviewGutter({
                       aspectRatio: `${viewport.width} / ${viewport.height}`
                     },
                     children: /* @__PURE__ */ jsx57(
-                      BlockRenderer2,
+                      BlockRenderer3,
                       {
                         block: item.block,
                         blockTime: 0,
@@ -30908,7 +31253,7 @@ import {
   VIEWPORT_PRESETS as VIEWPORT_PRESETS6
 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks6, DEFAULT_THEME as DEFAULT_THEME6, getPinnedBlockMeta } from "@bendyline/squisq/doc";
-import { MediaClipLayer, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
+import { MediaClipLayer, MediaContext as MediaContext6 } from "@bendyline/squisq-react";
 
 // src/embeddedMedia.ts
 import { parseTimeSeconds as parseTimeSeconds2 } from "@bendyline/squisq/markdown";
@@ -31028,7 +31373,7 @@ function collectTimelinePlaybackSchedule(doc, scheduled) {
 // src/TimelineBlockPreview.tsx
 import { memo } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas";
-import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
+import { BlockRenderer as BlockRenderer4, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
 import { jsx as jsx62 } from "react/jsx-runtime";
 var BlockThumbnail = memo(function BlockThumbnail2({
   visual,
@@ -31036,7 +31381,7 @@ var BlockThumbnail = memo(function BlockThumbnail2({
   basePath = "/",
   mediaProvider = null
 }) {
-  return /* @__PURE__ */ jsx62(MediaContext4.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx62(BlockRenderer3, { block: visual, blockTime: 0, basePath, viewport }) });
+  return /* @__PURE__ */ jsx62(MediaContext5.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx62(BlockRenderer4, { block: visual, blockTime: 0, basePath, viewport }) });
 });
 
 // src/resolveBlockVisual.ts
@@ -32245,7 +32590,7 @@ function TimelineTrack({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx64("div", { ref: activeClock.registerMediaHost, className: "squisq-timeline-media-host", "aria-hidden": true, children: /* @__PURE__ */ jsx64(MediaContext5.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx64("div", { ref: activeClock.registerMediaHost, className: "squisq-timeline-media-host", "aria-hidden": true, children: /* @__PURE__ */ jsx64(MediaContext6.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx64(
       MediaClipLayer,
       {
         schedule: playbackClips,
@@ -32422,13 +32767,7 @@ function usePreviewProjection(doc, transformStyle, workspaceContainer, documentT
           if (!cancelled) commit(immediate);
         }
       );
-      setProjection((previous) => {
-        if (!previous) return immediate;
-        return {
-          ...immediate,
-          playerDoc: { ...immediate.playerDoc, audio: previous.playerDoc.audio }
-        };
-      });
+      setProjection((previous) => previous ?? immediate);
       return () => {
         cancelled = true;
       };
@@ -32457,7 +32796,10 @@ function TimelineCompositionPanel({
     activePipSize,
     activePipShape,
     activePipPosition,
-    activeCoverSlide
+    activeCoverSlide,
+    activeCoverSlideTemplate,
+    activeCoverSlideDuration,
+    activeCoverSlidePlayback
   } = usePreviewSettings();
   const { fileName } = useEditorContext();
   const projection = usePreviewProjection(
@@ -32543,6 +32885,9 @@ function TimelineCompositionPanel({
             captionStyle: activeCaptionStyle,
             captionsEnabled: activeCaptionsEnabled,
             showCoverSlide: activeCoverSlide,
+            coverSlideTemplate: activeCoverSlideTemplate,
+            coverSlideDuration: activeCoverSlideDuration,
+            coverSlidePlayback: activeCoverSlidePlayback,
             enableSwipe: false,
             globalKeyboardShortcuts: false
           }
@@ -33762,15 +34107,15 @@ function PrintPreviewToolbar() {
 // src/print/PrintPreview.tsx
 import { useCallback as useCallback48, useEffect as useEffect51, useMemo as useMemo47, useRef as useRef51 } from "react";
 import {
-  BlockRenderer as BlockRenderer4,
+  BlockRenderer as BlockRenderer5,
   LinearDocView,
   useDocPlayback,
   useMediaProvider
 } from "@bendyline/squisq-react";
 import {
-  createTemplateContext
+  createTemplateContext as createTemplateContext2
 } from "@bendyline/squisq/schemas";
-import { expandCoverBlock } from "@bendyline/squisq/doc";
+import { expandCoverBlock as expandCoverBlock2 } from "@bendyline/squisq/doc";
 import { resolveTransformStyle } from "@bendyline/squisq/transform";
 import { jsx as jsx71, jsxs as jsxs56 } from "react/jsx-runtime";
 function chunk(values, size) {
@@ -33801,13 +34146,13 @@ function PrintPreview({
   const { blocks } = useDocPlayback(previewDoc, 0, { viewport, theme });
   const coverBlock = useMemo47(() => {
     if (!showCover || !previewDoc?.startBlock) return null;
-    const context = createTemplateContext(theme, 0, 1, viewport);
+    const context = createTemplateContext2(theme, 0, 1, viewport);
     return {
       id: "cover-block",
       startTime: -1,
       duration: 0,
       audioSegment: -1,
-      layers: expandCoverBlock(previewDoc.startBlock, context)
+      layers: expandCoverBlock2(previewDoc.startBlock, context)
     };
   }, [previewDoc?.startBlock, showCover, theme, viewport]);
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
@@ -33874,7 +34219,7 @@ function PrintPreview({
             "data-slides-per-page": density,
             "aria-label": `Print page ${pageIndex + 1}`,
             children: sheet.map((block) => /* @__PURE__ */ jsx71("div", { className: "squisq-print-slide-cell", children: /* @__PURE__ */ jsx71("div", { className: "squisq-print-slide-frame", children: /* @__PURE__ */ jsx71(
-              BlockRenderer4,
+              BlockRenderer5,
               {
                 block,
                 blockTime: Math.max(0, block.duration),
@@ -33928,7 +34273,10 @@ function PreviewPanel({
     activePipShape,
     activePipPosition,
     activeVideoLoop,
-    activeCoverSlide
+    activeCoverSlide,
+    activeCoverSlideTemplate,
+    activeCoverSlideDuration,
+    activeCoverSlidePlayback
   } = usePreviewSettings();
   const mainSurfaceRef = useRef52(null);
   const popupSurfaceRef = useRef52(null);
@@ -34139,6 +34487,9 @@ function PreviewPanel({
         captionStyle: audienceCaptionMode === "social" ? "social" : activeCaptionStyle,
         captionsEnabled: audience && audienceCaptionMode ? audienceCaptionMode !== "off" : activeCaptionsEnabled,
         showCoverSlide: activeCoverSlide,
+        coverSlideTemplate: activeCoverSlideTemplate,
+        coverSlideDuration: activeCoverSlideDuration,
+        coverSlidePlayback: activeCoverSlidePlayback,
         coverVisible: audience ? playbackState?.isCoverVisible : void 0,
         audioController: audience ? followerAudioController : void 0,
         enableSwipe: !audience,
@@ -35153,7 +35504,7 @@ import {
   scopeContainer,
   createMediaProviderFromContainer
 } from "@bendyline/squisq/storage";
-import { MediaContext as MediaContext6, useMediaClipDurations } from "@bendyline/squisq-react";
+import { MediaContext as MediaContext7, useMediaClipDurations } from "@bendyline/squisq-react";
 import { Fragment as Fragment22, jsx as jsx77, jsxs as jsxs60 } from "react/jsx-runtime";
 function EditorShell({
   initialMarkdown = "",
@@ -35230,7 +35581,7 @@ function EditorShell({
   }, [mediaProvider, effectiveContainer]);
   const filesToggleEnabled = showFilesToggle ?? effectiveMediaProvider !== void 0;
   const effectiveInitialView = hostMode === "chat" || !showPlayTab && initialView === "preview" ? "wysiwyg" : initialView;
-  return /* @__PURE__ */ jsx77(MediaContext6.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx77(MediaContext7.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx77(
     EditorProvider,
     {
       initialMarkdown,

package/dist/index.d.ts

@@ -8,11 +8,11 @@ import { ContentContainer } from '@bendyline/squisq/storage';
 export { CanvasRect, ImageEditor, ImageEditorAction, ImageEditorProps, ImageEditorState, ImageEditorTool, ImageViewer, ImageViewerProps, UseImageEditorOptions, UseImageEditorReturn, imageEditorReducer, initialImageEditorState, useImageEditor } from './image-editor/index.js';
 import { IconFamily } from '@bendyline/squisq/icons';
 import { DisplayMode, CaptionStyle, VideoPresentation, PipSize, PipShape, PipPosition } from '@bendyline/squisq-react';
+import { CoverSlideTemplate, CoverSlidePlayback, ConnectorRouting, AsciiDiagram, Tree, AsciiTimeline, AsciiTimelineSide, AsciiTimelineMarker } from '@bendyline/squisq/doc';
 import { MarkdownWrapState } from '@bendyline/squisq/markdown';
 import * as monaco_editor from 'monaco-editor';
 import { M as MonacoLanguageRequest, a as MonacoLanguageLoadOptions } from './monacoLanguageDetection-DEyUW-BS.js';
 export { MonacoWorkerConstructor, MonacoWorkerConstructors, configureMonacoWorkers } from './monaco-workers/index.js';
-import { ConnectorRouting, AsciiDiagram, Tree, AsciiTimeline, AsciiTimelineSide, AsciiTimelineMarker } from '@bendyline/squisq/doc';
 import * as _tiptap_core from '@tiptap/core';
 import { Extension } from '@tiptap/core';
 import * as _tiptap_extension_heading from '@tiptap/extension-heading';
@@ -826,6 +826,12 @@ interface PreviewSettings {
     activeCoverSlide: boolean;
     /** Enable/disable the managed cover slide. */
     setCoverSlideEnabled: (enabled: boolean) => void;
+    activeCoverSlideTemplate: CoverSlideTemplate;
+    setCoverSlideTemplate: (template: CoverSlideTemplate) => void;
+    activeCoverSlideDuration: number;
+    setCoverSlideDuration: (duration: number) => void;
+    activeCoverSlidePlayback: CoverSlidePlayback;
+    setCoverSlidePlayback: (playback: CoverSlidePlayback) => void;
     /** Whether Video mode restarts automatically when playback ends. */
     activeVideoLoop: boolean;
     /** Enable/disable automatic Video-mode playback restart. */
@@ -873,18 +879,6 @@ interface PreviewSettingsProviderProps {
     themeOverride?: Theme | null;
 }
 declare function PreviewSettingsProvider({ doc, children, defaultViewportPreset, themeOverride, }: PreviewSettingsProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Inline preview controls rendered in the main toolbar row.
- *
- * Collapse is *progressive* (a priority-plus pattern): rather than switch the
- * whole row in and out at a fixed window-width breakpoint, the controls
- * measure how many of them actually fit in the width the toolbar gives them
- * and keep that many inline, folding the rest — from the low-priority end of
- * {@link CONTROL_KEYS} — into a single ellipsis button's popover. As
- * the toolbar widens or narrows, controls migrate one at a time between the
- * inline row and the menu, so the available space is always well used and the
- * row never wraps onto a second line.
- */
 interface PreviewToolbarControlsProps {
     /**
      * Display mode whose applicable control set should be rendered. Defaults to

package/dist/index.js

@@ -194,7 +194,7 @@ import {
   usePreviewSettings,
   useTimelineData,
   useTreeViewData
-} from "./chunk-55DQFHK5.js";
+} from "./chunk-DCMJXDQY.js";
 import "./chunk-V4NBQF5C.js";
 import {
   JsonEditor

package/dist/shell/index.js

@@ -5,7 +5,7 @@ import {
   RawEditor,
   WysiwygEditor,
   useEditorContext
-} from "../chunk-55DQFHK5.js";
+} from "../chunk-DCMJXDQY.js";
 import "../chunk-V4NBQF5C.js";
 import "../chunk-K2WJYVS4.js";
 import "../chunk-V44VP242.js";

package/dist/styles/index.css

@@ -7269,6 +7269,219 @@
 .squisq-use-mode-menu[data-theme=dark] .squisq-use-mode-menu-check {
   color: #93c5fd;
 }
+.squisq-cover-slide-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 3px 8px;
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 5px;
+  background: var(--squisq-input-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.squisq-cover-slide-trigger:hover,
+.squisq-cover-slide-trigger--open {
+  border-color: var(--squisq-accent, #2563eb);
+  background: var(--squisq-hover-bg, var(--squisq-bg, #f3f4f6));
+}
+.squisq-cover-slide-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: var(--squisq-border, #d1d5db);
+  color: var(--squisq-text-muted, #6b7280);
+  font-size: 8px;
+}
+.squisq-cover-slide-status--enabled {
+  background: var(--squisq-accent, #2563eb);
+  color: var(--squisq-text-on-accent, #fff);
+}
+.squisq-cover-slide-menu {
+  --cover-bg: #fff;
+  --cover-control: #fff;
+  --cover-border: #d1d5db;
+  --cover-text: #1f2937;
+  --cover-muted: #6b7280;
+  position: fixed;
+  z-index: 120;
+  box-sizing: border-box;
+  width: min(336px, calc(100vw - 16px));
+  padding: 14px;
+  border: 1px solid var(--cover-border);
+  border-radius: 8px;
+  background: var(--cover-bg);
+  color: var(--cover-text);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  color-scheme: light;
+}
+.squisq-cover-slide-menu[data-theme=dark] {
+  --cover-bg: #111827;
+  --cover-control: #0f172a;
+  --cover-border: #475569;
+  --cover-text: #f8fafc;
+  --cover-muted: #94a3b8;
+  color-scheme: dark;
+}
+.squisq-cover-slide-menu-heading,
+.squisq-cover-slide-field > span {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.squisq-cover-slide-menu-heading {
+  margin-bottom: 14px;
+  font-size: 14px;
+  font-weight: 700;
+}
+.squisq-cover-slide-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.squisq-cover-slide-switch input,
+.squisq-cover-slide-timing input {
+  accent-color: var(--squisq-accent, #2563eb);
+}
+.squisq-cover-slide-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0 0 12px;
+  overflow: hidden;
+  border: 1px solid var(--cover-border);
+  border-radius: 6px;
+  background: var(--cover-control);
+}
+.squisq-cover-slide-preview--disabled {
+  opacity: 0.45;
+}
+.squisq-cover-slide-preview-frame {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.squisq-cover-slide-preview-frame .block-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.squisq-cover-slide-preview-empty {
+  margin: 0;
+  padding: 10px 14px;
+  color: var(--cover-muted);
+  font-size: 11px;
+  line-height: 1.4;
+  text-align: center;
+}
+.squisq-cover-slide-field {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 10px;
+  color: var(--cover-text);
+  font-size: 12px;
+  font-weight: 600;
+}
+.squisq-cover-slide-field select {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 34px;
+  padding: 5px 8px;
+  border: 1px solid var(--cover-border);
+  border-radius: 4px;
+  background: var(--cover-control);
+  color: var(--cover-text);
+  font: inherit;
+}
+.squisq-cover-slide-field output {
+  color: var(--cover-muted);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+.squisq-cover-slide-field input[type=range] {
+  width: 100%;
+  margin: 3px 0;
+  accent-color: var(--squisq-accent, #2563eb);
+}
+.squisq-cover-slide-help {
+  min-height: 30px;
+  margin: -4px 0 12px;
+  color: var(--cover-muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+.squisq-cover-slide-timing {
+  display: grid;
+  gap: 7px;
+  margin: 0 0 14px;
+  padding: 10px;
+  border: 1px solid var(--cover-border);
+  border-radius: 5px;
+}
+.squisq-cover-slide-timing legend {
+  padding: 0 4px;
+  color: var(--cover-muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+.squisq-cover-slide-timing label {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.squisq-cover-slide-timing label > span {
+  display: grid;
+  gap: 2px;
+  font-weight: 600;
+}
+.squisq-cover-slide-timing small {
+  color: var(--cover-muted);
+  font-size: 11px;
+  font-weight: 400;
+}
+.squisq-cover-slide-export {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  width: 100%;
+  min-height: 34px;
+  border: 1px solid var(--cover-border);
+  border-radius: 5px;
+  background: var(--cover-control);
+  color: var(--cover-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.squisq-cover-slide-export:hover:not(:disabled) {
+  border-color: var(--squisq-accent, #2563eb);
+}
+.squisq-cover-slide-export:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
 .squisq-editor-shell[data-outline-visible=true] .squisq-toolbar-view-tabs {
   flex-shrink: 0;
   min-width: var(--squisq-outline-width, 240px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.4.6",
+  "version": "2.5.0",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -84,9 +84,10 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.4.4",
-    "@bendyline/squisq-formats": "2.3.8",
-    "@bendyline/squisq-react": "2.4.6",
+    "@bendyline/squisq": "2.5.0",
+    "@bendyline/squisq-formats": "2.3.10",
+    "@bendyline/squisq-react": "2.5.0",
+    "@bendyline/squisq-video-react": "2.3.0",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@tiptap/core": "2.27.2",
     "@tiptap/extension-heading": "2.27.2",