@bendyline/squisq-editor-react 2.4.7 → 2.6.0

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

@@ -15,7 +15,7 @@ import {
 import {
   RecorderPanel,
   useModalDialog
-} from "./chunk-ZSQN6IO7.js";
+} from "./chunk-JUAQQTJE.js";
 import {
   Icon
 } from "./chunk-GS7QWYFT.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",
@@ -9763,7 +10108,15 @@ function MermaidDiagramTypeThumbnail({ preview }) {
 }
 
 // src/Toolbar.tsx
-import { useCallback as useCallback29, useEffect as useEffect24, useMemo as useMemo24, useReducer, useRef as useRef28, useState as useState31 } from "react";
+import {
+  useCallback as useCallback29,
+  useEffect as useEffect24,
+  useLayoutEffect as useLayoutEffect4,
+  useMemo as useMemo24,
+  useReducer,
+  useRef as useRef28,
+  useState as useState31
+} from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS2 } from "@bendyline/squisq/schemas";
 import { DEFAULT_THEME, flattenBlocks } from "@bendyline/squisq/doc";
 import {
@@ -9941,8 +10294,8 @@ function RecorderEntry({ open, onOpenChange, showTrigger = true } = {}) {
   const handleSave = useCallback16(
     (result) => {
       bumpMediaRevision();
-      if (result.source === "mic") {
-        if (activeView === "raw" && monacoEditor) {
+      if (result.mediaKind === "audio") {
+        if (result.source === "mic" && activeView === "raw" && monacoEditor) {
           annotateMonacoHeading(monacoEditor, result.filename);
         }
         const audioTag = `<audio src="${result.relativePath}" controls></audio>`;
@@ -10332,7 +10685,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 +15479,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,
@@ -16479,6 +16832,8 @@ function Toolbar({
   slotAfterActions,
   slotRight,
   showPlayTab = true,
+  showFormattingControls = true,
+  showInsertControls = true,
   hostMode = "document"
 }) {
   const {
@@ -16570,9 +16925,8 @@ function Toolbar({
   const codeSnippetMenuRef = useRef28(null);
   const mermaidTypeMenuRef = useRef28(null);
   const chartTypeMenuRef = useRef28(null);
-  const [insertMenuAnchor, setInsertMenuAnchor] = useState31(
-    null
-  );
+  const insertMenuTriggerRectRef = useRef28(null);
+  const [insertMenuAnchor, setInsertMenuAnchor] = useState31(null);
   const [codeSnippetMenuAnchor, setCodeSnippetMenuAnchor] = useState31(null);
   const [mermaidTypeMenuAnchor, setMermaidTypeMenuAnchor] = useState31(null);
   const [chartTypeMenuAnchor, setChartTypeMenuAnchor] = useState31(null);
@@ -16588,7 +16942,8 @@ function Toolbar({
     if (left + INSERT_MENU_WIDTH + margin > vw) {
       left = Math.max(margin, rect.right - INSERT_MENU_WIDTH);
     }
-    setInsertMenuAnchor({ top: rect.bottom + gap, left });
+    insertMenuTriggerRectRef.current = rect;
+    setInsertMenuAnchor({ top: rect.bottom + gap, left, placement: "down" });
     setCodeSnippetMenuAnchor(null);
     setMermaidTypeMenuAnchor(null);
     setChartTypeMenuAnchor(null);
@@ -16642,6 +16997,7 @@ function Toolbar({
     setMermaidTypeMenuAnchor(null);
   }, []);
   const closeInsertMenu = useCallback29(() => {
+    insertMenuTriggerRectRef.current = null;
     setInsertMenuAnchor(null);
     setCodeSnippetMenuAnchor(null);
     setMermaidTypeMenuAnchor(null);
@@ -16735,6 +17091,28 @@ function Toolbar({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [insertMenuAnchor, closeInsertMenu]);
+  const insertMenuOpen = insertMenuAnchor !== null;
+  useLayoutEffect4(() => {
+    if (!insertMenuOpen) return;
+    const menu = insertMenuRef.current;
+    const triggerRect = insertMenuTriggerRectRef.current;
+    if (!menu || !triggerRect) return;
+    const gap = 4;
+    const margin = 8;
+    const spaceBelow = Math.max(0, window.innerHeight - triggerRect.bottom - gap - margin);
+    const spaceAbove = Math.max(0, triggerRect.top - gap - margin);
+    const naturalHeight = Math.max(menu.scrollHeight, menu.getBoundingClientRect().height);
+    const placement = naturalHeight > spaceBelow && spaceAbove > spaceBelow ? "up" : "down";
+    const maxHeight = placement === "up" ? spaceAbove : spaceBelow;
+    const visibleHeight = Math.min(naturalHeight, maxHeight);
+    const top = placement === "up" ? Math.max(margin, triggerRect.top - gap - visibleHeight) : triggerRect.bottom + gap;
+    setInsertMenuAnchor((current) => {
+      if (!current || current.top === top && current.maxHeight === maxHeight && current.placement === placement) {
+        return current;
+      }
+      return { ...current, top, maxHeight, placement };
+    });
+  }, [insertMenuOpen]);
   const [overflowPlacement, setOverflowPlacement] = useState31("down");
   useEffect24(() => {
     if (!showOverflow || !overflowRef.current) return;
@@ -17461,7 +17839,7 @@ ${TASK_LIST_MARKDOWN}
     return Number(m[1]) <= visibleHeadingMax;
   };
   const hasVisibleMediaButtons = MEDIA_BUTTONS.some((b) => isButtonVisible(b.id));
-  const showInsertInOverflow = overflowIndex !== null && overflowIndex <= FIRST_MEDIA_INDEX && hasVisibleMediaButtons;
+  const showInsertInOverflow = showInsertControls && overflowIndex !== null && overflowIndex <= FIRST_MEDIA_INDEX && hasVisibleMediaButtons;
   const isInTable = isWysiwyg ? tiptapEditor.isActive("table") : false;
   const wysiwygTemplate = isWysiwyg ? tiptapEditor.isActive("heading") ? tiptapEditor.getAttributes("heading")?.dataTemplate ?? "" : null : null;
   const isRawView = activeView === "raw";
@@ -17681,17 +18059,17 @@ ${TASK_LIST_MARKDOWN}
       dataTemplateParams: updated.templateParams
     }).run();
   };
-  const showTemplateInOverflow = currentTemplate !== null && clippedContextual.has("template");
-  const showTransitionInOverflow = currentTransition !== null && clippedContextual.has("transition");
+  const showTemplateInOverflow = showFormattingControls && currentTemplate !== null && clippedContextual.has("template");
+  const showTransitionInOverflow = showFormattingControls && currentTransition !== null && clippedContextual.has("transition");
   const showBlockSectionInOverflow = showTemplateInOverflow || showTransitionInOverflow;
   const overflowBlockLabel = currentTemplate ? templateLabel(currentTemplate) : "Heading";
-  const showToolbarOverflow = !findMode && !isPreview && !isCodeMode && (overflowIndex !== null || clippedContextual.size > 0);
+  const showToolbarOverflow = !findMode && !isPreview && !isCodeMode && (showFormattingControls && (overflowIndex !== null || clippedContextual.size > 0) || showInsertInOverflow);
   return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: `squisq-toolbar${findMode ? " squisq-toolbar--find" : ""} ${className || ""}`,
       role: "toolbar",
-      "aria-label": findMode ? "Find toolbar" : "Formatting toolbar",
+      "aria-label": findMode ? "Find toolbar" : showFormattingControls ? "Formatting toolbar" : "Editor toolbar",
       children: [
         /* @__PURE__ */ jsx41(
           "input",
@@ -17762,8 +18140,8 @@ ${TASK_LIST_MARKDOWN}
           );
         }) }),
         findMode ? /* @__PURE__ */ jsx41(FindToolbar, { onClose: () => setFindMode(false) }) : slotAfterTabs,
-        !findMode && !isPreview && !isCodeMode && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
+        !findMode && !isPreview && !isCodeMode && (showFormattingControls || showInsertControls) && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [
+          showFormattingControls && groups.map((group, gi) => /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
             gi > 0 && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
             BUTTONS.filter((b) => b.group === group && isButtonVisible(b.id)).map((btn) => {
               const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
@@ -17785,8 +18163,8 @@ ${TASK_LIST_MARKDOWN}
               );
             })
           ] }, group)),
-          /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
-            /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
+          showInsertControls && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
+            showFormattingControls && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
             /* @__PURE__ */ jsx41(
               "button",
               {
@@ -17802,7 +18180,7 @@ ${TASK_LIST_MARKDOWN}
               }
             )
           ] }),
-          currentTemplate !== null && /* @__PURE__ */ jsxs31(
+          showFormattingControls && currentTemplate !== null && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-template-picker${clippedContextual.has("template") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -17822,7 +18200,7 @@ ${TASK_LIST_MARKDOWN}
               ]
             }
           ),
-          currentTransition !== null && /* @__PURE__ */ jsxs31(
+          showFormattingControls && currentTransition !== null && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-transition-picker-group${clippedContextual.has("transition") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -17841,7 +18219,7 @@ ${TASK_LIST_MARKDOWN}
               ]
             }
           ),
-          isInTable && /* @__PURE__ */ jsxs31(
+          showFormattingControls && isInTable && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-table-controls${clippedContextual.has("table") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -18041,6 +18419,7 @@ ${TASK_LIST_MARKDOWN}
             }
           )
         ] }),
+        !findMode && !isPreview && !isCodeMode && !showFormattingControls && !showInsertControls && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-actions" }),
         showToolbarOverflow && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-overflow", ref: overflowRef, children: [
           /* @__PURE__ */ jsx41(
             "button",
@@ -18059,7 +18438,7 @@ ${TASK_LIST_MARKDOWN}
             {
               className: `squisq-toolbar-overflow-menu squisq-toolbar-overflow-menu--${overflowPlacement}`,
               children: [
-                BUTTONS.slice(overflowIndex ?? BUTTONS.length).filter((b) => isButtonVisible(b.id)).filter((b) => b.group !== "media").map((btn) => {
+                showFormattingControls && BUTTONS.slice(overflowIndex ?? BUTTONS.length).filter((b) => isButtonVisible(b.id)).filter((b) => b.group !== "media").map((btn) => {
                   const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
                   const disabled = btn.id === "image" && !mediaProvider || !buttonAllowed(btn.id);
                   return /* @__PURE__ */ jsxs31(
@@ -18135,7 +18514,7 @@ ${TASK_LIST_MARKDOWN}
                     accentColor: previewSettings?.activeTheme.colors.primary
                   }
                 ) }),
-                isInTable && clippedContextual.has("table") && /* @__PURE__ */ jsxs31(Fragment13, { children: [
+                showFormattingControls && isInTable && clippedContextual.has("table") && /* @__PURE__ */ jsxs31(Fragment13, { children: [
                   /* @__PURE__ */ jsx41(
                     "div",
                     {
@@ -18263,7 +18642,13 @@ ${TASK_LIST_MARKDOWN}
               ref: insertMenuRef,
               className: "squisq-insert-menu",
               "data-theme": colorScheme,
-              style: { position: "fixed", top: insertMenuAnchor.top, left: insertMenuAnchor.left },
+              "data-placement": insertMenuAnchor.placement,
+              style: {
+                position: "fixed",
+                top: insertMenuAnchor.top,
+                left: insertMenuAnchor.left,
+                maxHeight: insertMenuAnchor.maxHeight
+              },
               role: "menu",
               children: [
                 showConvertActions && /* @__PURE__ */ jsxs31(Fragment13, { children: [
@@ -22229,7 +22614,7 @@ function mermaidErrorMessage(error) {
 }
 
 // src/mermaid/MermaidDiagramCanvas.tsx
-import { useCallback as useCallback33, useEffect as useEffect27, useId as useId12, useLayoutEffect as useLayoutEffect4, useRef as useRef32, useState as useState36 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect27, useId as useId12, useLayoutEffect as useLayoutEffect5, useRef as useRef32, useState as useState36 } from "react";
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var renderSequence = 0;
 function excludesCanvasPan(target, viewport) {
@@ -22359,7 +22744,7 @@ function MermaidDiagramCanvas({
       current = false;
     };
   }, [source, onModelChange, theme]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const measure = () => {
@@ -22380,7 +22765,7 @@ function MermaidDiagramCanvas({
     observer.observe(scroll);
     return () => observer.disconnect();
   }, []);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     setContentSize(readSvgViewBox(svgRootRef.current));
   }, [svg]);
   const fitZoom = contentSize && canvasSize ? calculateFitScale(contentSize, canvasSize) : 1;
@@ -22389,7 +22774,7 @@ function MermaidDiagramCanvas({
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
   }, [fitZoom]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (viewMode !== "fit") return;
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
@@ -22456,7 +22841,7 @@ function MermaidDiagramCanvas({
     selectedNodeId,
     selectedTextId
   ]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const node2 = renamingNodeId ? model2?.nodes.find((candidate) => candidate.id === renamingNodeId) : null;
     const edge2 = renamingEdgeId ? model2?.edges.find((candidate) => candidate.id === renamingEdgeId) : null;
     const text = renamingTextId ? model2 && mermaidEditableTexts(model2).find((candidate) => candidate.id === renamingTextId) : null;
@@ -22469,7 +22854,7 @@ function MermaidDiagramCanvas({
     });
     return () => window.cancelAnimationFrame(frame);
   }, [model2, renamingEdgeId, renamingNodeId, renamingTextId]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const root = svgRootRef.current;
     if (!root || !model2) {
       setSelectionAnchor(null);
@@ -23009,7 +23394,7 @@ function CanvasAction({
 }
 
 // src/mermaid/MermaidShapePalette.tsx
-import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect5, useMemo as useMemo29, useRef as useRef33, useState as useState37 } from "react";
+import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect6, useMemo as useMemo29, useRef as useRef33, useState as useState37 } from "react";
 import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var CATEGORIES = ["Basic", "Process", "Data", "Documents", "Symbols"];
 var PALETTE_WIDTH = 360;
@@ -23045,7 +23430,7 @@ function MermaidShapePalette({ selected, onPick, onClose }) {
       )
     })).filter((section) => section.shapes.length > 0);
   }, [query]);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const palette = ref.current;
     const anchor = palette?.parentElement;
     if (!palette || !anchor) return;
@@ -23204,7 +23589,7 @@ import { createRoot as createRoot3 } from "react-dom/client";
 import {
   useCallback as useCallback34,
   useEffect as useEffect29,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useRef as useRef34,
   useState as useState38,
   useSyncExternalStore
@@ -24098,7 +24483,7 @@ function useDismissibleMermaidPopover(ref, onClose) {
 }
 function useClampedMermaidPopoverPosition(ref, preferredWidth, preferredMaxHeight) {
   const [position, setPosition] = useState38(null);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const picker = ref.current;
     const anchor = picker?.parentElement;
     if (!picker || !anchor) return;
@@ -27090,7 +27475,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback38, useEffect as useEffect39, useMemo as useMemo35, useRef as useRef40, useState as useState49 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect40, useMemo as useMemo35, useRef as useRef40, useState as useState50 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection } from "@tiptap/pm/state";
 import StarterKit2 from "@tiptap/starter-kit";
@@ -27531,6 +27916,7 @@ var ImageWithMediaProvider = Image.extend({
 // src/tiptap/TiptapVideo.tsx
 import { Node as Node3, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
+import { useEffect as useEffect39, useState as useState49 } from "react";
 
 // src/tiptap/useResolvedMediaSrc.ts
 import { useEffect as useEffect38, useState as useState48 } from "react";
@@ -27589,15 +27975,23 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
   const placement = normalizeVideoPlacement(rawPlacement);
   const lockToBlock = normalizeLockToBlock(rawLockToBlock);
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
+  const [audioOnly, setAudioOnly] = useState49(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
+  useEffect39(() => {
+    setAudioOnly(false);
+  }, [resolvedSrc]);
+  const handleLoadedMetadata = (event) => {
+    const video = event.currentTarget;
+    setAudioOnly(video.videoWidth <= 0 && video.videoHeight <= 0);
+  };
   return /* @__PURE__ */ jsxs43(
     NodeViewWrapper2,
     {
       as: "div",
-      className: `squisq-inline-video-player squisq-video-node${selected ? " squisq-video-node--selected" : ""}`,
+      className: `${audioOnly ? "squisq-inline-audio-player squisq-video-node--audio-only" : "squisq-inline-video-player"} squisq-video-node${selected ? " squisq-video-node--selected" : ""}`,
       "data-video-placement": placement,
       children: [
-        /* @__PURE__ */ jsxs43(
+        !audioOnly && /* @__PURE__ */ jsxs43(
           "div",
           {
             className: "squisq-video-placement-toolbar",
@@ -27635,7 +28029,16 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx54(
+        audioOnly ? /* @__PURE__ */ jsx54(
+          "audio",
+          {
+            "data-drag-handle": true,
+            draggable: true,
+            src: resolvedSrc || void 0,
+            controls,
+            preload: "metadata"
+          }
+        ) : /* @__PURE__ */ jsx54(
           "video",
           {
             "data-drag-handle": true,
@@ -27646,7 +28049,8 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             playsInline: true,
             preload: "metadata",
             width: width ?? void 0,
-            height: height ?? void 0
+            height: height ?? void 0,
+            onLoadedMetadata: handleLoadedMetadata
           }
         )
       ]
@@ -28239,11 +28643,11 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect39(() => {
+  useEffect40(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const [designerState, setDesignerState] = useState49(
+  const [designerState, setDesignerState] = useState50(
     null
   );
   const handleDesignerSave = useCallback38(
@@ -28259,7 +28663,7 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef40(mentionProvider);
-  useEffect39(() => {
+  useEffect40(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const resolvedPlaceholder = useMemo35(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
@@ -28267,7 +28671,7 @@ function WysiwygEditor({
   const lastSourceRef = useRef40(editorSource);
   const pendingLocalSourcesRef = useRef40([]);
   const mediaProviderRef = useRef40(mediaProvider);
-  useEffect39(() => {
+  useEffect40(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const frontmatterRef = useRef40(stripFrontmatter(editorSource).frontmatter);
@@ -28284,7 +28688,7 @@ function WysiwygEditor({
     }
   }
   const submitOnEnterRef = useRef40(submitOnEnter);
-  useEffect39(() => {
+  useEffect40(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -28466,25 +28870,25 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect39(() => {
+  useEffect40(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef40(null);
-  const [badgeMenu, setBadgeMenu] = useState49(null);
-  const [propsMenu, setPropsMenu] = useState49(null);
+  const [badgeMenu, setBadgeMenu] = useState50(null);
+  const [propsMenu, setPropsMenu] = useState50(null);
   const closeBadgeMenu = useCallback38(() => {
     setBadgeMenu(null);
     requestAnimationFrame(() => {
       if (editor && !editor.isDestroyed) editor.commands.focus();
     });
   }, [editor]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -28540,7 +28944,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (!editor) return;
     const pendingIndex = pendingLocalSourcesRef.current.lastIndexOf(editorSource);
     if (pendingIndex >= 0) {
@@ -28797,7 +29201,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect7, useMemo as useMemo37, useRef as useRef41, useState as useState51 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo37, useRef as useRef41, useState as useState52 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS4 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -28806,17 +29210,17 @@ 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";
+import { useCallback as useCallback39, useEffect as useEffect41, useMemo as useMemo36, useState as useState51 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
   const flatBlocks = useMemo36(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
-  const [entries, setEntries] = useState50([]);
-  const [pageEdges, setPageEdges] = useState50(null);
-  useEffect40(() => {
+  const [entries, setEntries] = useState51([]);
+  const [pageEdges, setPageEdges] = useState51(null);
+  useEffect41(() => {
     if (activeView !== "wysiwyg") return;
     const node2 = refInsideWrapper.current;
     if (!node2) return;
@@ -28884,7 +29288,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -28945,7 +29349,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect40(() => {
+  useEffect41(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -29239,8 +29643,8 @@ function InlinePreviewGutter({
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
-  const [positions, setPositions] = useState51(/* @__PURE__ */ new Map());
-  useLayoutEffect7(() => {
+  const [positions, setPositions] = useState52(/* @__PURE__ */ new Map());
+  useLayoutEffect8(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
       return;
@@ -29368,7 +29772,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 +29804,7 @@ function InlinePreviewGutter({
                       aspectRatio: `${viewport.width} / ${viewport.height}`
                     },
                     children: /* @__PURE__ */ jsx57(
-                      BlockRenderer2,
+                      BlockRenderer3,
                       {
                         block: item.block,
                         blockTime: 0,
@@ -29755,10 +30159,10 @@ function buildPreviewDoc(doc, options) {
 // src/OutlinePanel.tsx
 import {
   useCallback as useCallback40,
-  useEffect as useEffect41,
+  useEffect as useEffect42,
   useMemo as useMemo38,
   useRef as useRef42,
-  useState as useState52
+  useState as useState53
 } from "react";
 import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate3 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText5 } from "@bendyline/squisq/markdown";
@@ -29877,8 +30281,8 @@ function OutlinePanel({ width, className, readOnly = false }) {
   const { scrollToBlock } = useHeadingLayout(paneRef);
   const cursorActiveId = useActiveOutlineBlockId();
   const activeDragRef = useRef42(null);
-  const [draggedBlockId, setDraggedBlockId] = useState52(null);
-  const [dropTarget, setDropTarget] = useState52(null);
+  const [draggedBlockId, setDraggedBlockId] = useState53(null);
+  const [dropTarget, setDropTarget] = useState53(null);
   const blockModeActiveId = useMemo38(() => {
     if (layoutMode !== "block" || activeBlockStartLine == null || !doc) return null;
     const match = flattenBlocks5(doc.blocks).find(
@@ -30145,11 +30549,11 @@ function OutlineNode({
 function useActiveOutlineBlockId() {
   const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
   const flatBlocks = useMemo38(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
-  const [activeId, setActiveId] = useState52(null);
-  useEffect41(() => {
+  const [activeId, setActiveId] = useState53(null);
+  useEffect42(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -30171,7 +30575,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, flatBlocks]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -30222,7 +30626,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback42, useEffect as useEffect43, useMemo as useMemo40, useRef as useRef44, useState as useState53 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect44, useMemo as useMemo40, useRef as useRef44, useState as useState54 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -30346,7 +30750,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback41, useEffect as useEffect42, useMemo as useMemo39, useRef as useRef43 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect43, useMemo as useMemo39, useRef as useRef43 } from "react";
 import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -30366,7 +30770,7 @@ function CodeContextSectionView({
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect42(() => {
+  useEffect43(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -30438,11 +30842,11 @@ function CodeContextSectionView({
 import { Fragment as Fragment18, jsx as jsx60 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
-  const [manager, setManager] = useState53(null);
-  const [, setZonesVersion] = useState53(0);
-  const [expandedById, setExpandedById] = useState53({});
+  const [manager, setManager] = useState54(null);
+  const [, setZonesVersion] = useState54(0);
+  const [expandedById, setExpandedById] = useState54({});
   const seenIds = useRef44(/* @__PURE__ */ new Set());
-  useEffect43(() => {
+  useEffect44(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -30465,7 +30869,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -30901,14 +31305,14 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback44, useEffect as useEffect46, useMemo as useMemo41, useRef as useRef47, useState as useState56 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect47, useMemo as useMemo41, useRef as useRef47, useState as useState57 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
   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 +31432,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 +31440,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
@@ -31060,7 +31464,7 @@ function resolveBlockVisual(doc, block, theme, viewport) {
 }
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback43, useEffect as useEffect44, useRef as useRef45, useState as useState54 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect45, useRef as useRef45, useState as useState55 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -31080,8 +31484,8 @@ function playTimelineMediaAt(root, time) {
   });
 }
 function useTimelineClock(total) {
-  const [currentTime, setCurrentTime] = useState54(0);
-  const [isPlaying, setIsPlaying] = useState54(false);
+  const [currentTime, setCurrentTime] = useState55(0);
+  const [isPlaying, setIsPlaying] = useState55(false);
   const rafRef = useRef45(null);
   const lastRef = useRef45(0);
   const currentTimeRef = useRef45(0);
@@ -31089,10 +31493,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef45(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect44(() => {
+  useEffect45(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect44(() => {
+  useEffect45(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -31154,7 +31558,7 @@ function timelineMediaLabel(src, kind) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect45, useLayoutEffect as useLayoutEffect8, useRef as useRef46, useState as useState55 } from "react";
+import { useEffect as useEffect46, useLayoutEffect as useLayoutEffect9, useRef as useRef46, useState as useState56 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Fragment as Fragment19, jsx as jsx63, jsxs as jsxs49 } from "react/jsx-runtime";
 function TimelineItemMenu({
@@ -31169,8 +31573,8 @@ function TimelineItemMenu({
   onClose
 }) {
   const panelRef = useRef46(null);
-  const [style, setStyle] = useState55(() => menuStyle(anchor));
-  useLayoutEffect8(() => {
+  const [style, setStyle] = useState56(() => menuStyle(anchor));
+  useLayoutEffect9(() => {
     const panel = panelRef.current;
     if (!panel) return;
     const updatePosition = () => setStyle(menuStyle(anchor, panel));
@@ -31183,7 +31587,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect45(() => {
+  useEffect46(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -31243,12 +31647,12 @@ function BlockMenu({
   onStartTime,
   onTransition
 }) {
-  const [explicitDuration, setExplicitDuration] = useState55(target.explicitDuration);
-  const [duration, setDuration] = useState55(formatNumber(target.duration));
-  const [startTime, setStartTime] = useState55(
+  const [explicitDuration, setExplicitDuration] = useState56(target.explicitDuration);
+  const [duration, setDuration] = useState56(formatNumber(target.duration));
+  const [startTime, setStartTime] = useState56(
     target.startTime == null ? "" : formatNumber(target.startTime)
   );
-  const [transition, setTransition] = useState55(target.transition);
+  const [transition, setTransition] = useState56(target.transition);
   const toggleAutotime = (autotimed) => {
     setExplicitDuration(!autotimed);
     if (autotimed) {
@@ -31320,11 +31724,11 @@ function VideoMenu({
   target,
   onPatch
 }) {
-  const [placement, setPlacement] = useState55(target.placement);
-  const [locked, setLocked] = useState55(target.lockToBlock);
-  const [pipSize, setPipSize] = useState55(target.pipSize ?? "");
-  const [pipShape, setPipShape] = useState55(target.pipShape ?? "");
-  const [pipPosition, setPipPosition] = useState55(target.pipPosition ?? "");
+  const [placement, setPlacement] = useState56(target.placement);
+  const [locked, setLocked] = useState56(target.lockToBlock);
+  const [pipSize, setPipSize] = useState56(target.pipSize ?? "");
+  const [pipShape, setPipShape] = useState56(target.pipShape ?? "");
+  const [pipPosition, setPipPosition] = useState56(target.pipPosition ?? "");
   const placed = placement === "picture-in-picture" || placement === "overlay";
   const placementOptions = [
     target.canUseContentPlacement ? { value: "content", label: "In layout" } : { value: "default", label: "Default" },
@@ -31594,9 +31998,9 @@ function TimelineTrack({
     colorScheme
   } = useEditorContext();
   const doc = docProp ?? contextDoc;
-  const [drag, setDrag] = useState56(null);
-  const [itemMenu, setItemMenu] = useState56(null);
-  const [pxPerSecond, setPxPerSecond] = useState56(DEFAULT_PX_PER_SECOND);
+  const [drag, setDrag] = useState57(null);
+  const [itemMenu, setItemMenu] = useState57(null);
+  const [pxPerSecond, setPxPerSecond] = useState57(DEFAULT_PX_PER_SECOND);
   const scrollRef = useRef47(null);
   const blocks = useMemo41(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
   const previewSettings = usePreviewSettingsOptional();
@@ -31629,8 +32033,8 @@ function TimelineTrack({
     setDrag(null);
     play();
   }, [play]);
-  const [scrubbing, setScrubbing] = useState56(false);
-  useEffect46(() => {
+  const [scrubbing, setScrubbing] = useState57(false);
+  useEffect47(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -31668,7 +32072,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef47(null);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -31679,7 +32083,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -31727,8 +32131,8 @@ function TimelineTrack({
   );
   const zoomIn = useCallback44(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback44(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
-  const [viewportWidth, setViewportWidth] = useState56(0);
-  useEffect46(() => {
+  const [viewportWidth, setViewportWidth] = useState57(0);
+  useEffect47(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -31742,7 +32146,7 @@ function TimelineTrack({
   const dragRef = useRef47(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect46(() => {
+  useEffect47(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -31773,7 +32177,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback44(
@@ -32245,7 +32649,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,
@@ -32378,7 +32782,7 @@ import { getDocPlaybackDuration as getDocPlaybackDuration2, resolveMediaSchedule
 import { DocPlayer } from "@bendyline/squisq-react";
 
 // src/usePreviewProjection.ts
-import { useEffect as useEffect47, useState as useState57 } from "react";
+import { useEffect as useEffect48, useState as useState58 } from "react";
 import { resolveAudioMapping } from "@bendyline/squisq/doc";
 import { applyTransform } from "@bendyline/squisq/transform";
 function hasEquivalentAudio(left, right) {
@@ -32398,8 +32802,8 @@ function preserveEquivalentAudio(previous, next) {
   };
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2) {
-  const [projection, setProjection] = useState57(null);
-  useEffect47(() => {
+  const [projection, setProjection] = useState58(null);
+  useEffect48(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -32422,13 +32826,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 +32855,10 @@ function TimelineCompositionPanel({
     activePipSize,
     activePipShape,
     activePipPosition,
-    activeCoverSlide
+    activeCoverSlide,
+    activeCoverSlideTemplate,
+    activeCoverSlideDuration,
+    activeCoverSlidePlayback
   } = usePreviewSettings();
   const { fileName } = useEditorContext();
   const projection = usePreviewProjection(
@@ -32543,6 +32944,9 @@ function TimelineCompositionPanel({
             captionStyle: activeCaptionStyle,
             captionsEnabled: activeCaptionsEnabled,
             showCoverSlide: activeCoverSlide,
+            coverSlideTemplate: activeCoverSlideTemplate,
+            coverSlideDuration: activeCoverSlideDuration,
+            coverSlidePlayback: activeCoverSlidePlayback,
             enableSwipe: false,
             globalKeyboardShortcuts: false
           }
@@ -32659,7 +33063,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback45, useEffect as useEffect48, useMemo as useMemo44, useRef as useRef48, useState as useState58 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect49, useMemo as useMemo44, useRef as useRef48, useState as useState59 } from "react";
 import { parseMarkdown as parseMarkdown9 } from "@bendyline/squisq/markdown";
 
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -32725,10 +33129,13 @@ function PlainHtmlPreview({
   style,
   globalKeyboardShortcuts = false,
   onFrameChange,
-  onLinkClick
+  onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode
 }) {
   const iframeRef = useRef48(null);
   const removeFrameLinkHandlerRef = useRef48(() => void 0);
+  const removeFrameCodeCopyControlsRef = useRef48(() => void 0);
   const setIframeRef = useCallback45(
     (frame) => {
       iframeRef.current = frame;
@@ -32737,8 +33144,8 @@ function PlainHtmlPreview({
     [onFrameChange]
   );
   const mdDoc = useMemo44(() => parseMarkdown9(markdown), [markdown]);
-  const [resolvedImages, setResolvedImages] = useState58(null);
-  useEffect48(() => {
+  const [resolvedImages, setResolvedImages] = useState59(null);
+  useEffect49(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -32774,8 +33181,8 @@ function PlainHtmlPreview({
     return merged;
   }, [resolvedImages, images]);
   const iconsCss = useMemo44(() => collectInlineFontAwesomeCss(), []);
-  const [renderFn, setRenderFn] = useState58(() => cachedRender);
-  useEffect48(() => {
+  const [renderFn, setRenderFn] = useState59(() => cachedRender);
+  useEffect49(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -32808,11 +33215,107 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect48(() => {
+  useEffect49(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
-  useEffect48(() => {
+  const installFrameCodeCopyControls = useCallback45(() => {
+    removeFrameCodeCopyControlsRef.current();
+    removeFrameCodeCopyControlsRef.current = () => void 0;
+    const frameDocument = iframeRef.current?.contentDocument;
+    if (!frameDocument || !showCodeCopyButton) return;
+    const style2 = frameDocument.createElement("style");
+    style2.dataset.squisqCodeCopy = "";
+    style2.textContent = `
+      .squisq-preview-code-copy-frame { position: relative; margin: 1em 0; }
+      .squisq-preview-code-copy-frame > pre { margin: 0; padding-right: 5rem; }
+      .squisq-preview-code-copy {
+        position: absolute; z-index: 1; top: .55rem; right: .55rem;
+        min-width: 3.7rem; padding: .28rem .5rem;
+        border: 1px solid color-mix(in srgb, var(--plain-text) 20%, transparent);
+        border-radius: 5px;
+        background: color-mix(in srgb, var(--plain-bg) 90%, transparent);
+        color: inherit; font: 500 .72rem/1.2 system-ui, sans-serif;
+        cursor: pointer; opacity: .58;
+        transition: opacity 120ms ease, background-color 120ms ease;
+      }
+      .squisq-preview-code-copy-frame:hover > .squisq-preview-code-copy,
+      .squisq-preview-code-copy:focus-visible,
+      .squisq-preview-code-copy[data-copy-state="copied"],
+      .squisq-preview-code-copy[data-copy-state="failed"] { opacity: 1; }
+      .squisq-preview-code-copy:hover { background: var(--plain-bg); }
+      .squisq-preview-code-copy:disabled { cursor: wait; }
+    `;
+    frameDocument.head.append(style2);
+    const cleanups = [];
+    const wrappers = [];
+    const timers = /* @__PURE__ */ new Set();
+    for (const code of frameDocument.querySelectorAll(
+      "pre.squisq-code-block > code"
+    )) {
+      const pre = code.parentElement;
+      if (!pre?.parentElement) continue;
+      const wrapper = frameDocument.createElement("div");
+      wrapper.className = "squisq-preview-code-copy-frame";
+      pre.replaceWith(wrapper);
+      wrapper.append(pre);
+      wrappers.push(wrapper);
+      const button = frameDocument.createElement("button");
+      button.type = "button";
+      button.className = "squisq-preview-code-copy";
+      button.dataset.copyState = "idle";
+      button.textContent = "Copy";
+      button.setAttribute("aria-label", "Copy code to clipboard");
+      wrapper.append(button);
+      const languageClass = Array.from(code.classList).find((name) => name.startsWith("language-"));
+      const language = languageClass?.slice("language-".length) || void 0;
+      const handleCopy = async () => {
+        if (button.dataset.copyState === "copying") return;
+        button.dataset.copyState = "copying";
+        button.textContent = "Copying\u2026";
+        button.disabled = true;
+        try {
+          if (onCopyCode) {
+            await onCopyCode(code.textContent ?? "", language === void 0 ? {} : { language });
+          } else {
+            const clipboard = frameDocument.defaultView?.navigator.clipboard ?? (typeof navigator === "undefined" ? void 0 : navigator.clipboard);
+            if (!clipboard?.writeText) throw new Error("Clipboard access is unavailable");
+            await clipboard.writeText(code.textContent ?? "");
+          }
+          button.dataset.copyState = "copied";
+          button.textContent = "Copied";
+        } catch {
+          button.dataset.copyState = "failed";
+          button.textContent = "Copy failed";
+        } finally {
+          button.disabled = false;
+          const timer = setTimeout(() => {
+            timers.delete(timer);
+            button.dataset.copyState = "idle";
+            button.textContent = "Copy";
+          }, 1600);
+          timers.add(timer);
+        }
+      };
+      button.addEventListener("click", handleCopy);
+      cleanups.push(() => button.removeEventListener("click", handleCopy));
+    }
+    removeFrameCodeCopyControlsRef.current = () => {
+      for (const cleanup of cleanups) cleanup();
+      for (const timer of timers) clearTimeout(timer);
+      timers.clear();
+      for (const wrapper of wrappers) {
+        const pre = wrapper.firstElementChild;
+        if (pre && wrapper.parentElement) wrapper.replaceWith(pre);
+      }
+      style2.remove();
+    };
+  }, [onCopyCode, showCodeCopyButton]);
+  useEffect49(() => {
+    installFrameCodeCopyControls();
+    return () => removeFrameCodeCopyControlsRef.current();
+  }, [html, installFrameCodeCopyControls]);
+  useEffect49(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -32844,7 +33347,10 @@ function PlainHtmlPreview({
       "data-testid": "plain-html-preview",
       title: title ?? "HTML preview",
       srcDoc: html,
-      onLoad: installFrameLinkHandler,
+      onLoad: () => {
+        installFrameLinkHandler();
+        installFrameCodeCopyControls();
+      },
       sandbox: "allow-same-origin",
       style: { ...IFRAME_STYLE, ...style }
     }
@@ -32888,7 +33394,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState61, useEffect as useEffect52, useMemo as useMemo48, useCallback as useCallback49, useRef as useRef52 } from "react";
+import { useState as useState62, useEffect as useEffect53, useMemo as useMemo48, useCallback as useCallback49, useRef as useRef52 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
 import { DocPlayer as DocPlayer2, LinearDocView as LinearDocView2, useMediaProvider as useMediaProvider2 } from "@bendyline/squisq-react";
 import { resolveTransformStyle as resolveTransformStyle2 } from "@bendyline/squisq/transform";
@@ -33027,12 +33533,12 @@ import {
   createContext as createContext5,
   useCallback as useCallback46,
   useContext as useContext5,
-  useEffect as useEffect49,
+  useEffect as useEffect50,
   useId as useId14,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo45,
   useRef as useRef49,
-  useState as useState59
+  useState as useState60
 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
@@ -33115,10 +33621,10 @@ function PresentationModeProvider({
   const { activeView, colorScheme, doc } = useEditorContext();
   const { activeTheme } = usePreviewSettings();
   const popupNameId = useId14().replace(/[^a-zA-Z0-9_-]/g, "");
-  const [selectedTarget, setSelectedTarget] = useState59("control");
-  const [activeTarget, setActiveTarget] = useState59(null);
-  const [popupRoot, setPopupRoot] = useState59(null);
-  const [error, setError] = useState59(null);
+  const [selectedTarget, setSelectedTarget] = useState60("control");
+  const [activeTarget, setActiveTarget] = useState60(null);
+  const [popupRoot, setPopupRoot] = useState60(null);
+  const [error, setError] = useState60(null);
   const activeTargetRef = useRef49(activeTarget);
   activeTargetRef.current = activeTarget;
   const previousActiveTargetRef = useRef49(null);
@@ -33261,12 +33767,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect49(() => {
+  useEffect50(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect49(() => {
+  useEffect50(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -33278,7 +33784,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect49(() => {
+  useEffect50(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -33287,10 +33793,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect49(() => {
+  useEffect50(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -33298,7 +33804,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -33310,12 +33816,12 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
   }, [error]);
-  useEffect49(
+  useEffect50(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -33418,8 +33924,8 @@ function PresentationModeControl() {
   const { colorScheme } = useEditorContext();
   const triggerRef = useRef49(null);
   const menuRef = useRef49(null);
-  const [open, setOpen] = useState59(false);
-  const [anchor, setAnchor] = useState59(null);
+  const [open, setOpen] = useState60(false);
+  const [anchor, setAnchor] = useState60(null);
   const options = PRESENTATION_OPTIONS.filter((option) => availableTargets.includes(option.target));
   const selected = options.find((option) => option.target === selectedTarget) ?? PRESENTATION_OPTIONS[0];
   const updatePosition = useCallback46(() => {
@@ -33444,7 +33950,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -33467,7 +33973,7 @@ function PresentationModeControl() {
       window.removeEventListener("scroll", updatePosition, true);
     };
   }, [closeMenu, open, updatePosition]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!open || !anchor) return;
     const checked = menuRef.current?.querySelector('[aria-checked="true"]');
     const first = menuRef.current?.querySelector('[role="menuitemradio"]');
@@ -33587,10 +34093,10 @@ import {
   createContext as createContext6,
   useCallback as useCallback47,
   useContext as useContext6,
-  useEffect as useEffect50,
+  useEffect as useEffect51,
   useMemo as useMemo46,
   useRef as useRef50,
-  useState as useState60
+  useState as useState61
 } from "react";
 import { jsx as jsx70, jsxs as jsxs55 } from "react/jsx-runtime";
 var PrintModeContext = createContext6(null);
@@ -33605,8 +34111,8 @@ function usePrintModeOptional() {
 function PrintModeProvider({ rootRef, children }) {
   const { activeView } = useEditorContext();
   const { activeTarget: presentationTarget, stop: stopPresentation } = usePresentationMode();
-  const [active, setActive] = useState60(false);
-  const [slidesPerPage, setSlidesPerPage] = useState60(1);
+  const [active, setActive] = useState61(false);
+  const [slidesPerPage, setSlidesPerPage] = useState61(1);
   const customPrintHandlerRef = useRef50(null);
   const printAncestorsRef = useRef50([]);
   const unmarkPrinting = useCallback47(() => {
@@ -33657,7 +34163,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect50(() => {
+  useEffect51(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -33666,10 +34172,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -33760,17 +34266,17 @@ function PrintPreviewToolbar() {
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback48, useEffect as useEffect51, useMemo as useMemo47, useRef as useRef51 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect52, 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,17 +34307,17 @@ 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";
-  useEffect51(() => {
+  useEffect52(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -33874,7 +34380,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),
@@ -33899,7 +34405,9 @@ function PreviewPanel({
   basePath = "/",
   className,
   workspaceContainer,
-  onLinkClick
+  onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode
 }) {
   const {
     doc,
@@ -33928,11 +34436,14 @@ function PreviewPanel({
     activePipShape,
     activePipPosition,
     activeVideoLoop,
-    activeCoverSlide
+    activeCoverSlide,
+    activeCoverSlideTemplate,
+    activeCoverSlideDuration,
+    activeCoverSlidePlayback
   } = usePreviewSettings();
   const mainSurfaceRef = useRef52(null);
   const popupSurfaceRef = useRef52(null);
-  const [playbackState, setPlaybackState] = useState61(null);
+  const [playbackState, setPlaybackState] = useState62(null);
   const handlePlaybackStateChange = useCallback49((next) => {
     setPlaybackState(next);
   }, []);
@@ -33970,11 +34481,11 @@ function PreviewPanel({
   const isDocumentMode = activeDisplayMode === "page";
   const isPageMode = activeDisplayMode === "linear";
   const isNarrateMode = activeDisplayMode === "narrate";
-  useEffect52(() => {
+  useEffect53(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -34078,7 +34589,9 @@ function PreviewPanel({
           mediaRevision,
           theme: activeTheme,
           globalKeyboardShortcuts: !audience,
-          onLinkClick
+          onLinkClick,
+          showCodeCopyButton,
+          onCopyCode
         }
       );
     }
@@ -34112,7 +34625,9 @@ function PreviewPanel({
           theme: activeTheme,
           globalKeyboardShortcuts: !audience,
           showCover: activeCoverSlide,
-          transformPage: activeTransformStyle ? resolveTransformStyle2(activeTransformStyle).page : void 0
+          transformPage: activeTransformStyle ? resolveTransformStyle2(activeTransformStyle).page : void 0,
+          showCodeCopyButton,
+          onCopyCode
         }
       );
     }
@@ -34139,10 +34654,15 @@ 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,
         globalKeyboardShortcuts: !audience,
+        showCodeCopyButton,
+        onCopyCode,
         onPlaybackStateChange: !audience && audienceWindowOpen ? handlePlaybackStateChange : void 0
       },
       `${audience ? "audience" : "primary"}-${activeTransformStyle || "none"}`
@@ -34198,7 +34718,7 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState62, useEffect as useEffect53, useRef as useRef53, useCallback as useCallback50 } from "react";
+import { useState as useState63, useEffect as useEffect54, useRef as useRef53, useCallback as useCallback50 } from "react";
 import { jsx as jsx73, jsxs as jsxs58 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -34263,12 +34783,12 @@ function MediaBin({
   isRecorderOpen = false,
   allowBinaryDownloads = true
 }) {
-  const [entries, setEntries] = useState62([]);
-  const [thumbUrls, setThumbUrls] = useState62({});
-  const [loading, setLoading] = useState62(false);
-  const [isDropActive, setIsDropActive] = useState62(false);
-  const [downloadingPath, setDownloadingPath] = useState62(null);
-  const [contextMenu, setContextMenu] = useState62(null);
+  const [entries, setEntries] = useState63([]);
+  const [thumbUrls, setThumbUrls] = useState63({});
+  const [loading, setLoading] = useState63(false);
+  const [isDropActive, setIsDropActive] = useState63(false);
+  const [downloadingPath, setDownloadingPath] = useState63(null);
+  const [contextMenu, setContextMenu] = useState63(null);
   const fileInputRef = useRef53(null);
   const contextMenuRef = useRef53(null);
   const dropDepthRef = useRef53(0);
@@ -34290,7 +34810,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect53(() => {
+  useEffect54(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -34311,7 +34831,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect53(() => {
+  useEffect54(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -34653,7 +35173,7 @@ ${formatSize(entry.size)}`,
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState63 } from "react";
+import { useState as useState64 } from "react";
 import { Fragment as Fragment21, jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
@@ -34710,7 +35230,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState63(false);
+  const [isHovering, setIsHovering] = useState64(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs59(
     "div",
@@ -34754,7 +35274,7 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect54, useLayoutEffect as useLayoutEffect10, useRef as useRef54, useState as useState64 } from "react";
+import { useEffect as useEffect55, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState65 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -34770,12 +35290,12 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 import { jsx as jsx75 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState3] = useState64(null);
+  const [state, setState3] = useState65(null);
   const tooltipRef = useRef54(null);
   const timerRef = useRef54(null);
   const currentTargetRef = useRef54(null);
   const visibleRef = useRef54(false);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!state) return;
     const node2 = tooltipRef.current;
     if (!node2) return;
@@ -34786,7 +35306,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect54(() => {
+  useEffect55(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -34872,7 +35392,7 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect55, useRef as useRef55, useState as useState65, useCallback as useCallback51, useMemo as useMemo50 } from "react";
+import { useEffect as useEffect56, useRef as useRef55, useState as useState66, useCallback as useCallback51, useMemo as useMemo50 } from "react";
 
 // src/BlockPreviewPanel.tsx
 import { useMemo as useMemo49 } from "react";
@@ -35153,7 +35673,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 = "",
@@ -35164,6 +35684,8 @@ function EditorShell({
   basePath = "/",
   onChange,
   onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode,
   colorScheme = "light",
   className,
   height = "100vh",
@@ -35177,6 +35699,8 @@ function EditorShell({
   versioningAutoSaveIdleMs,
   onSaveVersion,
   showFilesToggle,
+  showFormattingControls = hostMode !== "chat",
+  showInsertControls = true,
   allowBinaryDownloads = true,
   toolbarSlotLeft,
   toolbarSlotAfterActions,
@@ -35230,7 +35754,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,
@@ -35270,6 +35794,8 @@ function EditorShell({
           defaultViewportPreset,
           onChange,
           onLinkClick,
+          showCodeCopyButton,
+          onCopyCode,
           className,
           height,
           minHeight,
@@ -35278,6 +35804,8 @@ function EditorShell({
           mediaProvider: effectiveMediaProvider ?? null,
           workspaceContainer: effectiveContainer,
           filesToggleEnabled,
+          showFormattingControls,
+          showInsertControls,
           allowBinaryDownloads,
           toolbarSlotLeft,
           toolbarSlotAfterActions,
@@ -35340,6 +35868,8 @@ function EditorShellInner({
   defaultViewportPreset,
   onChange,
   onLinkClick,
+  showCodeCopyButton,
+  onCopyCode,
   className,
   height,
   minHeight,
@@ -35348,6 +35878,8 @@ function EditorShellInner({
   mediaProvider,
   workspaceContainer,
   filesToggleEnabled,
+  showFormattingControls,
+  showInsertControls,
   allowBinaryDownloads,
   toolbarSlotLeft,
   toolbarSlotAfterActions,
@@ -35446,13 +35978,13 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState65(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState65(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState66(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState66(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState65(false);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState65(0);
-  const [mediaCount, setMediaCount] = useState65(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState65(false);
+  const [showFiles, setShowFiles] = useState66(false);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState66(0);
+  const [mediaCount, setMediaCount] = useState66(0);
+  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState66(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
   const usedMediaPaths = useMemo50(
     () => collectMediaReferencesFromMarkdown(markdownSource),
@@ -35464,13 +35996,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect55(() => {
+  useEffect56(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -35579,7 +36111,7 @@ ${snippet}` : snippet);
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect55(() => {
+  useEffect56(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback51(
@@ -35695,6 +36227,8 @@ ${snippet}` : snippet);
                       slotAfterActions: toolbarSlotAfterActions,
                       slotRight: toolbarSlotRight,
                       showPlayTab,
+                      showFormattingControls,
+                      showInsertControls,
                       hostMode
                     }
                   ) }),
@@ -35807,7 +36341,9 @@ ${snippet}` : snippet);
                                 {
                                   basePath,
                                   workspaceContainer,
-                                  onLinkClick
+                                  onLinkClick,
+                                  showCodeCopyButton,
+                                  onCopyCode
                                 }
                               )
                             ]
@@ -35941,9 +36477,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState65(null);
-  const [resolveError, setResolveError] = useState65(null);
-  useEffect55(() => {
+  const [initialSrc, setInitialSrc] = useState66(null);
+  const [resolveError, setResolveError] = useState66(null);
+  useEffect56(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);