@bendyline/squisq-editor-react 2.13.15 → 2.13.17

package/dist/{chunk-CLULTEKS.js → chunk-N3EX452F.js}

@@ -19,7 +19,7 @@ import {
   useDictationState,
   useEditorContext,
   useEditorContextOptional
-} from "./chunk-UQUYPT5P.js";
+} from "./chunk-EJNCUVPU.js";
 import {
   monacoLanguageRequestKey,
   monacoLanguagesForDocument,
@@ -46,13 +46,12 @@ import {
   ShapePalette
 } from "./chunk-HLU6ZBS7.js";
 import {
-  BlockThumbnail,
   RecorderPanel,
   buildPreviewDoc,
   documentTitleFromFileName,
   resolveBlockVisual,
   useModalDialog
-} from "./chunk-FOKUOC7E.js";
+} from "./chunk-ECS2FFXA.js";
 import {
   Icon
 } from "./chunk-UYB5CPRE.js";
@@ -30620,7 +30619,7 @@ async function ingestSidecarBytes(bytes, ext, params2) {
 
 // src/blockTagActivity.ts
 import { Extension as Extension11 } from "@tiptap/core";
-import { Plugin as Plugin11, PluginKey as PluginKey11 } from "@tiptap/pm/state";
+import { Plugin as Plugin11, PluginKey as PluginKey11, TextSelection as TextSelection3 } from "@tiptap/pm/state";
 import { Decoration as Decoration10, DecorationSet as DecorationSet10 } from "@tiptap/pm/view";
 var BLOCK_TAG_SELECTED_CLASS = "squisq-block-tags--selected";
 var BLOCK_TAG_HOVERED_CLASS = "squisq-block-tags--hovered";
@@ -30720,11 +30719,44 @@ function headingPositionForTarget(view, target, clientY) {
     return null;
   }
 }
+function isEditableDomPosition(view, node2) {
+  const element = node2.nodeType === Node.ELEMENT_NODE ? node2 : node2.parentElement;
+  if (!element || !view.dom.contains(element)) return false;
+  const island = element.closest('[contenteditable="false"]');
+  return !island || !view.dom.contains(island);
+}
+function withPendingDomSelection(view, transaction) {
+  const { selection } = view.state;
+  if (view.composing || !view.hasFocus() || !(selection instanceof TextSelection3)) {
+    return transaction;
+  }
+  const domSelection = view.dom.ownerDocument.getSelection();
+  const anchorNode = domSelection?.anchorNode;
+  const focusNode = domSelection?.focusNode;
+  if (!domSelection || !anchorNode || !focusNode) return transaction;
+  if (!isEditableDomPosition(view, anchorNode) || !isEditableDomPosition(view, focusNode)) {
+    return transaction;
+  }
+  let anchor;
+  let head;
+  try {
+    anchor = view.posAtDOM(anchorNode, domSelection.anchorOffset);
+    head = view.posAtDOM(focusNode, domSelection.focusOffset);
+  } catch {
+    return transaction;
+  }
+  if (anchor === selection.anchor && head === selection.head) return transaction;
+  const { doc } = transaction;
+  return transaction.setSelection(TextSelection3.between(doc.resolve(anchor), doc.resolve(head)));
+}
 function setHoveredPosition(view, hoveredPosition) {
   const current = BLOCK_TAG_ACTIVITY_KEY.getState(view.state)?.hoveredPosition ?? null;
   if (current === hoveredPosition) return;
   view.dispatch(
-    view.state.tr.setMeta(BLOCK_TAG_ACTIVITY_KEY, { hoveredPosition }).setMeta("addToHistory", false)
+    withPendingDomSelection(
+      view,
+      view.state.tr.setMeta(BLOCK_TAG_ACTIVITY_KEY, { hoveredPosition }).setMeta("addToHistory", false)
+    )
   );
 }
 var BlockTagActivityExtension = Extension11.create({
@@ -31772,7 +31804,7 @@ import { videoEmbedIframeAttributes } from "@bendyline/squisq/markdown";
 
 // src/documentTray/DocumentTrayExtension.ts
 import { Extension as Extension13 } from "@tiptap/core";
-import { NodeSelection as NodeSelection2, Plugin as Plugin13, PluginKey as PluginKey13, Selection, TextSelection as TextSelection3 } from "@tiptap/pm/state";
+import { NodeSelection as NodeSelection2, Plugin as Plugin13, PluginKey as PluginKey13, Selection, TextSelection as TextSelection4 } from "@tiptap/pm/state";
 import { Decoration as Decoration12, DecorationSet as DecorationSet12 } from "@tiptap/pm/view";
 
 // src/documentTray/documentTrayMedia.ts
@@ -31871,7 +31903,7 @@ function rangeInTray(state, from, to) {
 function startBody(state) {
   const pos = state.doc.content.size;
   const tr = state.tr.insert(pos, state.schema.nodes.paragraph.create());
-  return tr.setSelection(TextSelection3.create(tr.doc, pos + 1));
+  return tr.setSelection(TextSelection4.create(tr.doc, pos + 1));
 }
 function buildState2(doc, enabled, prev, tr) {
   let seq = prev?.seq ?? 0;
@@ -32116,7 +32148,7 @@ var VideoEmbedExtension = Extension14.create({
 });
 
 // src/videoEmbed/videoEmbedPaste.ts
-import { TextSelection as TextSelection4 } from "@tiptap/pm/state";
+import { TextSelection as TextSelection5 } from "@tiptap/pm/state";
 import { parseVideoEmbedInput as parseVideoEmbedInput3 } from "@bendyline/squisq/markdown";
 function looksLikeEmbedCode(text) {
   return /^<(?!https?:)/i.test(text) && /<iframe\b/i.test(text);
@@ -32138,7 +32170,7 @@ function insertTopLevelBlock(state, node2) {
       tr.insert(start, node2);
     }
   }
-  tr.setSelection(TextSelection4.near(tr.doc.resolve(start + node2.nodeSize - 1), -1));
+  tr.setSelection(TextSelection5.near(tr.doc.resolve(start + node2.nodeSize - 1), -1));
   return tr.scrollIntoView();
 }
 function pasteVideoEmbedCode(view, text) {
@@ -34554,7 +34586,7 @@ function persistFromWrite(bodyMd, state) {
 import { useCallback as useCallback43, useEffect as useEffect56, useMemo as useMemo42, useRef as useRef51, useState as useState67 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection as Selection2 } from "@tiptap/pm/state";
-import { Extension as Extension18, getHTMLFromFragment } from "@tiptap/core";
+import { Extension as Extension18 } from "@tiptap/core";
 import StarterKit2 from "@tiptap/starter-kit";
 import Table from "@tiptap/extension-table";
 import TableRow from "@tiptap/extension-table-row";
@@ -35732,7 +35764,7 @@ function startNarrationTimingJob(input) {
     else jobs.delete(input.src);
     notify();
   };
-  import("./narrationTimingsFromAudio-ICMDSWPI.js").then(
+  import("./narrationTimingsFromAudio-O67QKISS.js").then(
     ({ updateNarrationTimingsFromAudio }) => updateNarrationTimingsFromAudio({
       ...input,
       signal: job.abort.signal,
@@ -36270,6 +36302,30 @@ function preserveSource(baseline, edited) {
   return out.join("\n");
 }
 
+// src/documentHtml.ts
+import { getHTMLFromFragment } from "@tiptap/core";
+import { Fragment as Fragment25 } from "@tiptap/pm/model";
+function createDocumentHtmlSerializer() {
+  const cache2 = /* @__PURE__ */ new WeakMap();
+  return (doc) => {
+    let hasBlockMarks = false;
+    doc.forEach((node2) => {
+      hasBlockMarks || (hasBlockMarks = node2.marks.length > 0);
+    });
+    if (hasBlockMarks) return getHTMLFromFragment(doc.content, doc.type.schema);
+    const parts = [];
+    doc.forEach((node2) => {
+      let html = cache2.get(node2);
+      if (html === void 0) {
+        html = getHTMLFromFragment(Fragment25.from(node2), doc.type.schema);
+        cache2.set(node2, html);
+      }
+      parts.push(html);
+    });
+    return parts.join("");
+  };
+}
+
 // src/MentionExtension.tsx
 import Mention from "@tiptap/extension-mention";
 import { PluginKey as PluginKey18 } from "@tiptap/pm/state";
@@ -36750,6 +36806,7 @@ function WysiwygEditor({
   const isExternalUpdate = useRef51(false);
   const externalApplyPendingRef = useRef51(false);
   const lastSourceRef = useRef51(editorSource);
+  const serializeHtml = useMemo42(createDocumentHtmlSerializer, []);
   const sourceLayoutRef = useRef51(layoutMode);
   const pendingLocalSourcesRef = useRef51([]);
   const mediaProviderRef = useRef51(mediaProvider);
@@ -36899,12 +36956,12 @@ function WysiwygEditor({
       if (!transaction.docChanged) return;
       if (isExternalUpdate.current || externalApplyPendingRef.current) return;
       const serialize = (html) => persistFromWrite(tiptapToMarkdown(html), wrapStateRef.current);
-      let bodyMd = serialize(ed.getHTML());
+      let bodyMd = serialize(serializeHtml(ed.state.doc));
       const loaded = loadedSourceRef.current;
       if (loaded) {
         loaded.baseline ?? (loaded.baseline = createSourceBaseline(
           loaded.body,
-          serialize(getHTMLFromFragment(transaction.before.content, ed.schema))
+          serialize(serializeHtml(transaction.before))
         ));
         bodyMd = preserveSource(loaded.baseline, bodyMd);
       }
@@ -37489,7 +37546,7 @@ function insertDroppedMedia(view, event, point, mediaProvider, onMediaUploaded)
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect13, useMemo as useMemo45, useRef as useRef52, useState as useState70 } from "react";
+import { useEffect as useEffect59, useLayoutEffect as useLayoutEffect13, useMemo as useMemo45, useRef as useRef52, useState as useState70 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas";
 import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 
@@ -37804,7 +37861,7 @@ function usePreviewProjection(doc, transformStyle, workspaceContainer, documentT
 }
 
 // src/useBlockPreviewItems.ts
-function useBlockPreviewItems(viewport) {
+function useBlockPreviewItems(viewport, visibleIds) {
   const { doc, workspaceContainer, fileName, mediaRevision } = useEditorContext();
   const projection = usePreviewProjection(doc, "", workspaceContainer, fileName, mediaRevision);
   const previewDoc = projection?.contentDoc ?? doc;
@@ -37815,25 +37872,26 @@ function useBlockPreviewItems(viewport) {
     const flat = flattenRenderableBlocks(previewDoc.blocks);
     const result = [];
     flat.forEach((block, index2) => {
-      const visual = resolveBlockVisual(previewDoc, block, activeTheme, viewport, {
+      const shouldResolve = visibleIds == null || visibleIds.has(block.id);
+      const visual = shouldResolve ? resolveBlockVisual(previewDoc, block, activeTheme, viewport, {
         blockIndex: index2,
         totalBlocks: flat.length
-      });
-      if (!visual) return;
+      }) : null;
+      if (visibleIds == null && !visual) return;
       result.push({
         id: block.id,
-        template: visual.template ?? "content",
+        template: visual?.template ?? block.template ?? "content",
         headingText: block.sourceHeading ? extractPlainText3(block.sourceHeading) : "",
         block: visual,
         sourceBlock: block
       });
     });
     return result;
-  }, [previewDoc, viewport, activeTheme]);
+  }, [previewDoc, viewport, activeTheme, visibleIds]);
 }
 
 // src/InlinePreviewGutter.tsx
-import { Fragment as Fragment25, jsx as jsx73, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx73, jsxs as jsxs59 } from "react/jsx-runtime";
 var BAR_RIGHT_OFFSET = 14;
 var CARD_LABEL_OFFSET = 16;
 var EXTENT_TOP_PAD = CARD_LABEL_OFFSET;
@@ -37848,13 +37906,56 @@ function InlinePreviewGutter({
 }) {
   const gutterRef = useRef52(null);
   const { entries: headingEntries, scrollToBlock } = useHeadingLayout(gutterRef);
-  const items = useBlockPreviewItems(viewport);
+  const [visibleCards, setVisibleCards] = useState70(
+    () => typeof IntersectionObserver === "undefined" ? null : /* @__PURE__ */ new Set()
+  );
+  const items = useBlockPreviewItems(viewport, visibleCards);
   const connectorTops = useMemo45(() => {
     const m = /* @__PURE__ */ new Map();
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
   const [positions, setPositions] = useState70(/* @__PURE__ */ new Map());
+  const itemIds = items.map((item) => item.id).join("\0");
+  useEffect59(() => {
+    const gutter = gutterRef.current;
+    if (!gutter || typeof IntersectionObserver === "undefined") return;
+    let active = true;
+    const cards = [...gutter.querySelectorAll(".squisq-inline-preview-card")].filter(
+      (card) => positions.has(card.dataset.previewId ?? "")
+    );
+    const ids = new Set(cards.map((card) => card.dataset.previewId));
+    setVisibleCards((previous) => {
+      if (previous === null || [...previous].every((id) => ids.has(id))) return previous;
+      return new Set([...previous].filter((id) => ids.has(id)));
+    });
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!active) return;
+        setVisibleCards((previous) => {
+          const next = new Set(previous);
+          for (const entry of entries) {
+            const id = entry.target.dataset.previewId;
+            if (!id) continue;
+            if (entry.isIntersecting) next.add(id);
+            else next.delete(id);
+          }
+          if (previous?.size === next.size && [...next].every((id) => previous.has(id))) {
+            return previous;
+          }
+          return next;
+        });
+      },
+      { root: gutter, rootMargin: "320px 0px" }
+    );
+    for (const card of cards) {
+      observer.observe(card);
+    }
+    return () => {
+      active = false;
+      observer.disconnect();
+    };
+  }, [itemIds, positions]);
   useLayoutEffect13(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
@@ -37891,156 +37992,170 @@ function InlinePreviewGutter({
       return next;
     });
   }, [items, connectorTops]);
-  const isEmpty2 = items.length === 0;
-  if (isEmpty2) return null;
-  const totalWidth = width + connectorWidth;
-  const gutterStyle = {
-    position: "relative",
-    width: `${totalWidth}px`,
-    flex: `0 0 ${totalWidth}px`,
-    overflow: "hidden"
-  };
-  return /* @__PURE__ */ jsxs59(
-    "aside",
-    {
-      ref: gutterRef,
-      className: `squisq-inline-preview-gutter ${className ?? ""}`,
-      style: gutterStyle,
-      "data-testid": "inline-preview-gutter",
-      "aria-label": "Block previews",
-      children: [
-        headingEntries.length > 0 && /* @__PURE__ */ jsx73(
-          "div",
-          {
-            className: "squisq-inline-preview-connectors",
-            "aria-hidden": "true",
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: connectorWidth,
-              height: "100%",
-              overflow: "hidden",
-              pointerEvents: "none"
-            },
-            children: headingEntries.map((ex, i) => {
-              const EXTENT_GAP = 6;
-              const height = Math.max(2, ex.bottom - ex.top - EXTENT_GAP);
-              return /* @__PURE__ */ jsx73(
-                "div",
-                {
-                  className: `squisq-inline-preview-extent${ex.annotated ? "" : " squisq-inline-preview-extent--untagged"}`,
-                  style: {
-                    position: "absolute",
-                    top: `${ex.top}px`,
-                    height: `${height}px`,
-                    right: `${BAR_RIGHT_OFFSET}px`
-                  }
-                },
-                `h-${i}-${ex.block.id}`
-              );
-            })
-          }
-        ),
-        items.length > 0 && /* @__PURE__ */ jsx73(
-          "svg",
-          {
-            className: "squisq-inline-preview-connector-svg",
-            "aria-hidden": "true",
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: connectorWidth + CARD_LEFT_INSET,
-              height: "100%",
-              pointerEvents: "none",
-              overflow: "visible"
-            },
-            children: items.map((item) => {
-              const headingTop = connectorTops.get(item.id);
-              const cardTop = positions.get(item.id);
-              if (headingTop == null || cardTop == null) return null;
-              const x1 = connectorWidth - BAR_RIGHT_OFFSET - 2;
-              const y1 = headingTop + EXTENT_TOP_PAD;
-              const x2 = connectorWidth + CARD_LEFT_INSET;
-              const y2 = cardTop + CARD_LABEL_OFFSET;
-              return /* @__PURE__ */ jsxs59("g", { children: [
-                /* @__PURE__ */ jsx73(
-                  "line",
-                  {
-                    x1,
-                    y1,
-                    x2,
-                    y2,
-                    stroke: "#6366f1",
-                    strokeWidth: "2",
-                    strokeLinecap: "round"
-                  }
-                ),
-                /* @__PURE__ */ jsx73("circle", { cx: x1, cy: y1, r: "4", fill: "#6366f1", stroke: "#ffffff", strokeWidth: "2" }),
-                /* @__PURE__ */ jsx73("circle", { cx: x2, cy: y2, r: "4", fill: "#6366f1", stroke: "#ffffff", strokeWidth: "2" })
-              ] }, item.id);
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx73(MediaContext4.Provider, { value: mediaProvider ?? null, children: items.map((item) => {
-          const top = positions.get(item.id);
-          const hidden = top == null;
-          return /* @__PURE__ */ jsxs59(
+  return useMemo45(() => {
+    if (items.length === 0) return null;
+    const totalWidth = width + connectorWidth;
+    const gutterStyle = {
+      position: "relative",
+      width: `${totalWidth}px`,
+      flex: `0 0 ${totalWidth}px`,
+      overflow: "hidden"
+    };
+    return /* @__PURE__ */ jsxs59(
+      "aside",
+      {
+        ref: gutterRef,
+        className: `squisq-inline-preview-gutter ${className ?? ""}`,
+        style: gutterStyle,
+        "data-testid": "inline-preview-gutter",
+        "aria-label": "Block previews",
+        children: [
+          headingEntries.length > 0 && /* @__PURE__ */ jsx73(
             "div",
             {
-              className: "squisq-inline-preview-card",
-              "data-template": item.template,
+              className: "squisq-inline-preview-connectors",
+              "aria-hidden": "true",
               style: {
                 position: "absolute",
-                top: `${top ?? 0}px`,
-                left: connectorWidth + CARD_LEFT_INSET,
-                right: 12,
-                visibility: hidden ? "hidden" : "visible"
+                top: 0,
+                left: 0,
+                width: connectorWidth,
+                height: "100%",
+                overflow: "hidden",
+                pointerEvents: "none"
               },
-              onClick: () => scrollToBlock(item.sourceBlock),
-              children: [
-                /* @__PURE__ */ jsxs59("div", { className: "squisq-inline-preview-card-label", children: [
-                  /* @__PURE__ */ jsx73("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
-                  item.headingText && /* @__PURE__ */ jsxs59(Fragment25, { children: [
-                    /* @__PURE__ */ jsx73("span", { className: "squisq-inline-preview-card-sep", children: "\u2014" }),
-                    /* @__PURE__ */ jsx73("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx73(
+              children: headingEntries.map((ex, i) => {
+                const EXTENT_GAP = 6;
+                const height = Math.max(2, ex.bottom - ex.top - EXTENT_GAP);
+                return /* @__PURE__ */ jsx73(
                   "div",
                   {
-                    className: "squisq-inline-preview-card-svg",
+                    className: `squisq-inline-preview-extent${ex.annotated ? "" : " squisq-inline-preview-extent--untagged"}`,
                     style: {
-                      aspectRatio: `${viewport.width} / ${viewport.height}`
-                    },
-                    children: /* @__PURE__ */ jsx73(
-                      BlockRenderer3,
-                      {
-                        block: item.block,
-                        buildPlayback: "all",
-                        blockTime: 0,
-                        basePath,
-                        viewport
-                      }
-                    )
-                  }
-                )
-              ]
-            },
-            item.id
-          );
-        }) })
-      ]
-    }
-  );
+                      position: "absolute",
+                      top: `${ex.top}px`,
+                      height: `${height}px`,
+                      right: `${BAR_RIGHT_OFFSET}px`
+                    }
+                  },
+                  `h-${i}-${ex.block.id}`
+                );
+              })
+            }
+          ),
+          items.length > 0 && /* @__PURE__ */ jsx73(
+            "svg",
+            {
+              className: "squisq-inline-preview-connector-svg",
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: connectorWidth + CARD_LEFT_INSET,
+                height: "100%",
+                pointerEvents: "none",
+                overflow: "visible"
+              },
+              children: items.map((item) => {
+                const headingTop = connectorTops.get(item.id);
+                const cardTop = positions.get(item.id);
+                if (headingTop == null || cardTop == null) return null;
+                const x1 = connectorWidth - BAR_RIGHT_OFFSET - 2;
+                const y1 = headingTop + EXTENT_TOP_PAD;
+                const x2 = connectorWidth + CARD_LEFT_INSET;
+                const y2 = cardTop + CARD_LABEL_OFFSET;
+                return /* @__PURE__ */ jsxs59("g", { children: [
+                  /* @__PURE__ */ jsx73(
+                    "line",
+                    {
+                      x1,
+                      y1,
+                      x2,
+                      y2,
+                      stroke: "#6366f1",
+                      strokeWidth: "2",
+                      strokeLinecap: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx73("circle", { cx: x1, cy: y1, r: "4", fill: "#6366f1", stroke: "#ffffff", strokeWidth: "2" }),
+                  /* @__PURE__ */ jsx73("circle", { cx: x2, cy: y2, r: "4", fill: "#6366f1", stroke: "#ffffff", strokeWidth: "2" })
+                ] }, item.id);
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx73(MediaContext4.Provider, { value: mediaProvider ?? null, children: items.map((item) => {
+            const top = positions.get(item.id);
+            const hidden = top == null;
+            return /* @__PURE__ */ jsxs59(
+              "div",
+              {
+                className: "squisq-inline-preview-card",
+                "data-template": item.template,
+                "data-preview-id": item.id,
+                style: {
+                  position: "absolute",
+                  top: `${top ?? 0}px`,
+                  left: connectorWidth + CARD_LEFT_INSET,
+                  right: 12,
+                  visibility: hidden ? "hidden" : "visible"
+                },
+                onClick: () => scrollToBlock(item.sourceBlock),
+                children: [
+                  /* @__PURE__ */ jsxs59("div", { className: "squisq-inline-preview-card-label", children: [
+                    /* @__PURE__ */ jsx73("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
+                    item.headingText && /* @__PURE__ */ jsxs59(Fragment26, { children: [
+                      /* @__PURE__ */ jsx73("span", { className: "squisq-inline-preview-card-sep", children: "\u2014" }),
+                      /* @__PURE__ */ jsx73("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx73(
+                    "div",
+                    {
+                      className: "squisq-inline-preview-card-svg",
+                      style: {
+                        aspectRatio: `${viewport.width} / ${viewport.height}`
+                      },
+                      children: item.block && /* @__PURE__ */ jsx73(
+                        BlockRenderer3,
+                        {
+                          block: item.block,
+                          buildPlayback: "all",
+                          blockTime: 0,
+                          basePath,
+                          viewport
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              item.id
+            );
+          }) })
+        ]
+      }
+    );
+  }, [
+    items,
+    width,
+    connectorWidth,
+    className,
+    headingEntries,
+    connectorTops,
+    positions,
+    mediaProvider,
+    scrollToBlock,
+    viewport,
+    basePath
+  ]);
 }
 
 // src/OutlinePanel.tsx
 import {
   memo,
   useCallback as useCallback45,
-  useEffect as useEffect59,
+  useEffect as useEffect60,
   useMemo as useMemo46,
   useRef as useRef53,
   useState as useState71
@@ -38513,10 +38628,10 @@ function useActiveOutlineBlockId() {
   flatBlocksRef.current = flatBlocks;
   const headingLocations = flatBlocks.map((block) => `${block.id}:${block.sourceHeading?.position?.start.line ?? ""}`).join("\0");
   const [activeId, setActiveId] = useState71(null);
-  useEffect59(() => {
+  useEffect60(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect59(() => {
+  useEffect60(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -38538,7 +38653,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, headingLocations]);
-  useEffect59(() => {
+  useEffect60(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -38625,7 +38740,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback47, useEffect as useEffect61, useMemo as useMemo48, useRef as useRef55, useState as useState72 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect62, useMemo as useMemo48, useRef as useRef55, useState as useState72 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -38749,7 +38864,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 useCallback46, useEffect as useEffect60, useMemo as useMemo47, useRef as useRef54 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect61, useMemo as useMemo47, useRef as useRef54 } from "react";
 import { jsx as jsx75, jsxs as jsxs61 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -38769,7 +38884,7 @@ function CodeContextSectionView({
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect60(() => {
+  useEffect61(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -38838,14 +38953,14 @@ function CodeContextSectionView({
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { Fragment as Fragment26, jsx as jsx76 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx76 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
   const [manager, setManager] = useState72(null);
   const [, setZonesVersion] = useState72(0);
   const [expandedById, setExpandedById] = useState72({});
   const seenIds = useRef55(/* @__PURE__ */ new Set());
-  useEffect61(() => {
+  useEffect62(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -38868,7 +38983,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -38907,7 +39022,7 @@ function CodeContextZones({ options }) {
     [monacoEditor]
   );
   if (!manager) return null;
-  return /* @__PURE__ */ jsx76(Fragment26, { children: resolved.map(({ section }) => {
+  return /* @__PURE__ */ jsx76(Fragment27, { children: resolved.map(({ section }) => {
     const domNode = manager.getDomNode(section.id);
     if (!domNode) return null;
     return createPortal15(
@@ -39334,20 +39449,44 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback49, useEffect as useEffect64, useMemo as useMemo49, useRef as useRef58, useState as useState75 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect65, useMemo as useMemo49, useRef as useRef58, useState as useState75 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
-  VIEWPORT_PRESETS as VIEWPORT_PRESETS6
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS7
 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks5, DEFAULT_THEME as DEFAULT_THEME6, getPinnedBlockMeta } from "@bendyline/squisq/doc";
 import { createMediaTimeMap } from "@bendyline/squisq/mediaEdit";
 import { usesDynamicPresentation } from "@bendyline/squisq/transform";
 import { useProcessedAudio as useProcessedAudio2 } from "@bendyline/squisq-video-react/media-edit";
-import { MediaClipLayer, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
+import { MediaClipLayer, MediaContext as MediaContext6 } from "@bendyline/squisq-react";
+
+// src/TimelineBlockPreview.tsx
+import { memo as memo2 } from "react";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS6 } from "@bendyline/squisq/schemas";
+import { BlockRenderer as BlockRenderer4, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
+import { jsx as jsx78 } from "react/jsx-runtime";
+var BlockThumbnail = memo2(function BlockThumbnail2({
+  visual,
+  buildPlayback = "all",
+  viewport = VIEWPORT_PRESETS6.landscape,
+  basePath = "/",
+  mediaProvider = null
+}) {
+  return /* @__PURE__ */ jsx78(MediaContext5.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx78(
+    BlockRenderer4,
+    {
+      buildPlayback,
+      block: visual,
+      blockTime: 0,
+      basePath,
+      viewport
+    }
+  ) });
+});
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback48, useEffect as useEffect62, useRef as useRef56, useState as useState73 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect63, useRef as useRef56, useState as useState73 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -39376,10 +39515,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef56(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect62(() => {
+  useEffect63(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect62(() => {
+  useEffect63(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -39477,9 +39616,9 @@ function timelineBars(clips) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect63, useLayoutEffect as useLayoutEffect14, useRef as useRef57, useState as useState74 } from "react";
+import { useEffect as useEffect64, useLayoutEffect as useLayoutEffect14, useRef as useRef57, useState as useState74 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
-import { Fragment as Fragment27, jsx as jsx78, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx79, jsxs as jsxs63 } from "react/jsx-runtime";
 function TimelineItemMenu({
   anchor,
   target,
@@ -39508,7 +39647,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect63(() => {
+  useEffect64(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -39540,10 +39679,10 @@ function TimelineItemMenu({
         style: { ...style, ...accentStyle(accentColor) },
         children: [
           /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-header", children: [
-            /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-kind", children: target.kind === "block" ? "Block" : "Video" }),
-            /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-title", title: target.title, children: target.title })
+            /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-kind", children: target.kind === "block" ? "Block" : "Video" }),
+            /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-title", title: target.title, children: target.title })
           ] }),
-          target.kind === "block" ? /* @__PURE__ */ jsx78(
+          target.kind === "block" ? /* @__PURE__ */ jsx79(
             BlockMenu,
             {
               target,
@@ -39554,9 +39693,9 @@ function TimelineItemMenu({
               onClearTiming: onBlockClearTiming,
               onTransition: onBlockTransition
             }
-          ) : /* @__PURE__ */ jsxs63(Fragment27, { children: [
-            /* @__PURE__ */ jsx78(VideoMenu, { target, onPatch: onVideoPatch }),
-            onEditMedia && /* @__PURE__ */ jsx78(
+          ) : /* @__PURE__ */ jsxs63(Fragment28, { children: [
+            /* @__PURE__ */ jsx79(VideoMenu, { target, onPatch: onVideoPatch }),
+            onEditMedia && /* @__PURE__ */ jsx79(
               "button",
               {
                 type: "button",
@@ -39602,12 +39741,12 @@ function BlockMenu({
   };
   const pinned = explicitDuration || startTime !== "";
   return /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-body", children: [
-    target.timingLocked ? /* @__PURE__ */ jsxs63(Fragment27, { children: [
+    target.timingLocked ? /* @__PURE__ */ jsxs63(Fragment28, { children: [
       /* @__PURE__ */ jsxs63("p", { className: "squisq-timeline-item-menu-hint", children: [
         "Dynamic slides time each slide from the narration or reading pace, so this section's length and start can't be pinned.",
         pinned && " A pinned time here stops a narrated deck from playing."
       ] }),
-      pinned && onClearTiming && /* @__PURE__ */ jsx78(
+      pinned && onClearTiming && /* @__PURE__ */ jsx79(
         "button",
         {
           type: "button",
@@ -39620,9 +39759,9 @@ function BlockMenu({
           children: "Clear pinned timing"
         }
       )
-    ] }) : /* @__PURE__ */ jsxs63(Fragment27, { children: [
+    ] }) : /* @__PURE__ */ jsxs63(Fragment28, { children: [
       /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-check", children: [
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx79(
           "input",
           {
             type: "checkbox",
@@ -39630,10 +39769,10 @@ function BlockMenu({
             onChange: (event) => toggleAutotime(event.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx78("span", { children: "Autotime block" })
+        /* @__PURE__ */ jsx79("span", { children: "Autotime block" })
       ] }),
-      /* @__PURE__ */ jsx78("p", { className: "squisq-timeline-item-menu-hint", children: "Uses narration, content, and interior media when no explicit duration is set." }),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79("p", { className: "squisq-timeline-item-menu-hint", children: "Uses narration, content, and interior media when no explicit duration is set." }),
+      /* @__PURE__ */ jsx79(
         MenuNumberField,
         {
           label: "Duration",
@@ -39647,7 +39786,7 @@ function BlockMenu({
           }
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79(
         MenuNumberField,
         {
           label: "Start time",
@@ -39662,8 +39801,8 @@ function BlockMenu({
       )
     ] }),
     /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-row", children: [
-      /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "Transition" }),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "Transition" }),
+      /* @__PURE__ */ jsx79(
         TransitionPicker,
         {
           value: transition,
@@ -39695,14 +39834,14 @@ function VideoMenu({
   ];
   return /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-body", children: [
     /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-field", children: [
-      /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "Placement" }),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "Placement" }),
+      /* @__PURE__ */ jsx79(
         "div",
         {
           className: "squisq-timeline-item-menu-segments",
           role: "group",
           "aria-label": "Video placement",
-          children: placementOptions.map((option) => /* @__PURE__ */ jsx78(
+          children: placementOptions.map((option) => /* @__PURE__ */ jsx79(
             "button",
             {
               type: "button",
@@ -39722,9 +39861,9 @@ function VideoMenu({
         }
       )
     ] }),
-    placed && /* @__PURE__ */ jsxs63(Fragment27, { children: [
+    placed && /* @__PURE__ */ jsxs63(Fragment28, { children: [
       /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-check", children: [
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx79(
           "input",
           {
             type: "checkbox",
@@ -39738,11 +39877,11 @@ function VideoMenu({
             }
           }
         ),
-        /* @__PURE__ */ jsx78("span", { children: "Lock to block" })
+        /* @__PURE__ */ jsx79("span", { children: "Lock to block" })
       ] }),
-      placement === "picture-in-picture" && /* @__PURE__ */ jsxs63(Fragment27, { children: [
+      placement === "picture-in-picture" && /* @__PURE__ */ jsxs63(Fragment28, { children: [
         /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "PIP size" }),
+          /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "PIP size" }),
           /* @__PURE__ */ jsxs63(
             "select",
             {
@@ -39759,14 +39898,14 @@ function VideoMenu({
                   titleCase(target.defaultPipSize),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx78("option", { value: "small", children: "Small" }),
-                /* @__PURE__ */ jsx78("option", { value: "large", children: "Large" })
+                /* @__PURE__ */ jsx79("option", { value: "small", children: "Small" }),
+                /* @__PURE__ */ jsx79("option", { value: "large", children: "Large" })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "PIP shape" }),
+          /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "PIP shape" }),
           /* @__PURE__ */ jsxs63(
             "select",
             {
@@ -39783,14 +39922,14 @@ function VideoMenu({
                   titleCase(target.defaultPipShape),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx78("option", { value: "square", children: "Square" }),
-                /* @__PURE__ */ jsx78("option", { value: "wide", children: "Wide (16:9)" })
+                /* @__PURE__ */ jsx79("option", { value: "square", children: "Square" }),
+                /* @__PURE__ */ jsx79("option", { value: "wide", children: "Wide (16:9)" })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "PIP position" }),
+          /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "PIP position" }),
           /* @__PURE__ */ jsxs63(
             "select",
             {
@@ -39807,10 +39946,10 @@ function VideoMenu({
                   positionLabel(target.defaultPipPosition),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx78("option", { value: "top-left", children: "Top left" }),
-                /* @__PURE__ */ jsx78("option", { value: "top-right", children: "Top right" }),
-                /* @__PURE__ */ jsx78("option", { value: "bottom-left", children: "Bottom left" }),
-                /* @__PURE__ */ jsx78("option", { value: "bottom-right", children: "Bottom right" })
+                /* @__PURE__ */ jsx79("option", { value: "top-left", children: "Top left" }),
+                /* @__PURE__ */ jsx79("option", { value: "top-right", children: "Top right" }),
+                /* @__PURE__ */ jsx79("option", { value: "bottom-left", children: "Bottom left" }),
+                /* @__PURE__ */ jsx79("option", { value: "bottom-right", children: "Bottom right" })
               ]
             }
           )
@@ -39828,9 +39967,9 @@ function MenuNumberField({
   onChange
 }) {
   return /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-field", children: [
-    /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: label }),
+    /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: label }),
     /* @__PURE__ */ jsxs63("span", { className: "squisq-timeline-item-menu-number", children: [
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79(
         "input",
         {
           type: "number",
@@ -39843,7 +39982,7 @@ function MenuNumberField({
           onChange: (event) => onChange(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx78("span", { children: "sec" })
+      /* @__PURE__ */ jsx79("span", { children: "sec" })
     ] })
   ] });
 }
@@ -39888,8 +40027,8 @@ function menuStyle(anchor, element) {
 }
 
 // src/TimelineTrack.tsx
-import { jsx as jsx79, jsxs as jsxs64 } from "react/jsx-runtime";
-var PREVIEW_VIEWPORT = VIEWPORT_PRESETS6.landscape;
+import { jsx as jsx80, jsxs as jsxs64 } from "react/jsx-runtime";
+var PREVIEW_VIEWPORT = VIEWPORT_PRESETS7.landscape;
 var DEFAULT_PX_PER_SECOND = 18;
 var ZOOM_MIN = 4;
 var ZOOM_MAX = 160;
@@ -39911,9 +40050,9 @@ function TimelineVideoFilmstrip({
     FILMSTRIP_MAX_FRAMES,
     Math.max(1, Math.ceil(width / FILMSTRIP_FRAME_WIDTH))
   );
-  return /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-video-filmstrip", "aria-hidden": "true", children: Array.from({ length: frameCount }, (_2, index2) => {
+  return /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-video-filmstrip", "aria-hidden": "true", children: Array.from({ length: frameCount }, (_2, index2) => {
     const sampleTime = Math.max(0, sourceStart) + Math.max(0, sourceLength) * ((index2 + 0.5) / frameCount);
-    return /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsx80(
       "video",
       {
         src: resolvedSrc,
@@ -39996,7 +40135,7 @@ function TimelineTrack({
     play();
   }, [play]);
   const [scrubbing, setScrubbing] = useState75(false);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -40034,7 +40173,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef58(null);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -40045,7 +40184,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -40094,7 +40233,7 @@ function TimelineTrack({
   const zoomIn = useCallback49(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback49(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
   const [viewportWidth, setViewportWidth] = useState75(0);
-  useEffect64(() => {
+  useEffect65(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -40108,7 +40247,7 @@ function TimelineTrack({
   const dragRef = useRef58(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect64(() => {
+  useEffect65(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -40139,7 +40278,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect64(() => {
+  useEffect65(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback49(
@@ -40225,7 +40364,7 @@ function TimelineTrack({
   for (let t = 0; t <= rulerEnd + 1e-3 && ticks.length < 1e3; t += tickSeconds) ticks.push(t);
   return /* @__PURE__ */ jsxs64("div", { className: "squisq-timeline", style: { height }, "data-testid": "timeline-track", children: [
     /* @__PURE__ */ jsxs64("div", { className: "squisq-timeline-controls", children: [
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "button",
         {
           type: "button",
@@ -40242,7 +40381,7 @@ function TimelineTrack({
         " / ",
         formatClock3(total)
       ] }),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "button",
         {
           type: "button",
@@ -40254,7 +40393,7 @@ function TimelineTrack({
           children: "\u2212"
         }
       ),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "button",
         {
           type: "button",
@@ -40267,8 +40406,8 @@ function TimelineTrack({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-scroll", ref: scrollRef, children: /* @__PURE__ */ jsxs64("div", { className: "squisq-timeline-inner", style: { width }, children: [
-      /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-row squisq-timeline-row--blocks", children: blocks.map((b, i) => {
+    /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-scroll", ref: scrollRef, children: /* @__PURE__ */ jsxs64("div", { className: "squisq-timeline-inner", style: { width }, children: [
+      /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-row squisq-timeline-row--blocks", children: blocks.map((b, i) => {
         const line = headingLine(b);
         const isActive = line != null && line === activeBlockStartLine;
         const left = previewLeft(i);
@@ -40285,7 +40424,7 @@ function TimelineTrack({
               if (line != null) goToBlockByLine(line);
             },
             children: [
-              visualByBlock.has(b.id) && /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-block-thumb", "aria-hidden": true, children: /* @__PURE__ */ jsx79(
+              visualByBlock.has(b.id) && /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-block-thumb", "aria-hidden": true, children: /* @__PURE__ */ jsx80(
                 BlockThumbnail,
                 {
                   visual: visualByBlock.get(b.id),
@@ -40293,7 +40432,7 @@ function TimelineTrack({
                   mediaProvider
                 }
               ) }),
-              !timingLocked && prev && headingLine(prev) != null && /* @__PURE__ */ jsx79(
+              !timingLocked && prev && headingLine(prev) != null && /* @__PURE__ */ jsx80(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--left",
@@ -40314,8 +40453,8 @@ function TimelineTrack({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-block-label", children: b.title ?? b.id }),
-              line != null && /* @__PURE__ */ jsx79(
+              /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-block-label", children: b.title ?? b.id }),
+              line != null && /* @__PURE__ */ jsx80(
                 "button",
                 {
                   type: "button",
@@ -40337,7 +40476,7 @@ function TimelineTrack({
                   children: "\u2026"
                 }
               ),
-              !timingLocked && line != null && /* @__PURE__ */ jsx79(
+              !timingLocked && line != null && /* @__PURE__ */ jsx80(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -40386,7 +40525,7 @@ function TimelineTrack({
               ...raw.edits ? { edits: raw.edits } : {}
             } : { kind: c.kind, src: c.src, clipStart: c.sourceIn };
           };
-          return /* @__PURE__ */ jsx79(
+          return /* @__PURE__ */ jsx80(
             "div",
             {
               className: "squisq-timeline-row squisq-timeline-row--media",
@@ -40423,7 +40562,7 @@ function TimelineTrack({
                     if (next) setMarkdownSource(next);
                   },
                   children: [
-                    c.kind === "video" && /* @__PURE__ */ jsx79(
+                    c.kind === "video" && /* @__PURE__ */ jsx80(
                       TimelineVideoFilmstrip,
                       {
                         src: c.src,
@@ -40432,8 +40571,8 @@ function TimelineTrack({
                         width: clipWidth
                       }
                     ),
-                    /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(c.src, c.kind) }),
-                    cutMarks.map((at2) => /* @__PURE__ */ jsx79(
+                    /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(c.src, c.kind) }),
+                    cutMarks.map((at2) => /* @__PURE__ */ jsx80(
                       "span",
                       {
                         className: "squisq-timeline-cut-mark",
@@ -40442,7 +40581,7 @@ function TimelineTrack({
                       },
                       at2
                     )),
-                    c.kind === "video" && c.sourceLine != null && /* @__PURE__ */ jsx79(
+                    c.kind === "video" && c.sourceLine != null && /* @__PURE__ */ jsx80(
                       "button",
                       {
                         type: "button",
@@ -40468,7 +40607,7 @@ function TimelineTrack({
                         children: "\u2026"
                       }
                     ),
-                    editable && /* @__PURE__ */ jsx79(
+                    editable && /* @__PURE__ */ jsx80(
                       "span",
                       {
                         className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -40518,7 +40657,7 @@ function TimelineTrack({
               ...m.clipStart != null ? { clipStart: m.clipStart } : {},
               ...m.clipEnd != null ? { clipEnd: m.clipEnd } : {}
             };
-            return /* @__PURE__ */ jsx79(
+            return /* @__PURE__ */ jsx80(
               "div",
               {
                 className: "squisq-timeline-row squisq-timeline-row--media",
@@ -40545,7 +40684,7 @@ function TimelineTrack({
                       { onClick: () => selectClipAt(b.startTime, b.id) }
                     ),
                     children: [
-                      m.kind === "video" && /* @__PURE__ */ jsx79(
+                      m.kind === "video" && /* @__PURE__ */ jsx80(
                         TimelineVideoFilmstrip,
                         {
                           src: m.src,
@@ -40554,8 +40693,8 @@ function TimelineTrack({
                           width: clipWidth
                         }
                       ),
-                      /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(m.src, m.kind) }),
-                      m.kind === "video" && m.sourceLine != null && /* @__PURE__ */ jsx79(
+                      /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(m.src, m.kind) }),
+                      m.kind === "video" && m.sourceLine != null && /* @__PURE__ */ jsx80(
                         "button",
                         {
                           type: "button",
@@ -40580,7 +40719,7 @@ function TimelineTrack({
                           children: "\u2026"
                         }
                       ),
-                      m.sourceLine != null && /* @__PURE__ */ jsx79(
+                      m.sourceLine != null && /* @__PURE__ */ jsx80(
                         "span",
                         {
                           className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -40602,7 +40741,7 @@ function TimelineTrack({
           })
         )
       ] }),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "div",
         {
           className: "squisq-timeline-row squisq-timeline-row--ruler",
@@ -40610,10 +40749,10 @@ function TimelineTrack({
             const rect = e2.currentTarget.getBoundingClientRect();
             seek((e2.clientX - rect.left) / pxPerSecond);
           },
-          children: ticks.map((t) => /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-tick", style: { left: t * pxPerSecond }, children: /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-tick-label", children: formatDur(t) }) }, t))
+          children: ticks.map((t) => /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-tick", style: { left: t * pxPerSecond }, children: /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-tick-label", children: formatDur(t) }) }, t))
         }
       ),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "div",
         {
           className: "squisq-timeline-playhead",
@@ -40625,11 +40764,11 @@ function TimelineTrack({
             pause();
             setScrubbing(true);
           },
-          children: /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-playhead-knob" })
+          children: /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-playhead-knob" })
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx79("div", { ref: activeClock.registerMediaHost, className: "squisq-timeline-media-host", "aria-hidden": true, children: /* @__PURE__ */ jsx79(MediaContext5.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80("div", { ref: activeClock.registerMediaHost, className: "squisq-timeline-media-host", "aria-hidden": true, children: /* @__PURE__ */ jsx80(MediaContext6.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx80(
       MediaClipLayer,
       {
         schedule: playbackClips,
@@ -40638,7 +40777,7 @@ function TimelineTrack({
         basePath
       }
     ) }) }),
-    itemMenu && itemMenuTarget && /* @__PURE__ */ jsx79(
+    itemMenu && itemMenuTarget && /* @__PURE__ */ jsx80(
       TimelineItemMenu,
       {
         anchor: itemMenu.anchor,
@@ -40709,7 +40848,7 @@ function formatDur(seconds) {
 // src/TimelineVideoPanel.tsx
 import { useMemo as useMemo50 } from "react";
 import { MediaClipLayer as MediaClipLayer2 } from "@bendyline/squisq-react";
-import { jsx as jsx80, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs65 } from "react/jsx-runtime";
 function TimelineVideoPanel({
   schedule,
   currentTime,
@@ -40730,10 +40869,10 @@ function TimelineVideoPanel({
       "aria-label": "Timeline video preview",
       children: [
         /* @__PURE__ */ jsxs65("header", { className: "squisq-timeline-video-header", children: [
-          /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-video-title", children: "Video monitor" }),
-          /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-video-label", title: activeLabel, children: activeLabel }),
-          /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-video-time", children: formatClock4(currentTime) }),
-          onClose && /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-title", children: "Video monitor" }),
+          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-label", title: activeLabel, children: activeLabel }),
+          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-time", children: formatClock4(currentTime) }),
+          onClose && /* @__PURE__ */ jsx81(
             "button",
             {
               type: "button",
@@ -40745,8 +40884,8 @@ function TimelineVideoPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsxs65("div", { className: "squisq-timeline-video-stage", children: [
-          /* @__PURE__ */ jsx80(
+        /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsxs65("div", { className: "squisq-timeline-video-stage", children: [
+          /* @__PURE__ */ jsx81(
             MediaClipLayer2,
             {
               schedule: videos,
@@ -40758,7 +40897,7 @@ function TimelineVideoPanel({
               muted: true
             }
           ),
-          activeVideos.length === 0 && /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-video-empty", children: "Move the playhead onto a video clip" })
+          activeVideos.length === 0 && /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-video-empty", children: "Move the playhead onto a video clip" })
         ] }) })
       ]
     }
@@ -40774,7 +40913,7 @@ function formatClock4(seconds) {
 import { useMemo as useMemo51 } from "react";
 import { getDocPlaybackDuration as getDocPlaybackDuration2, resolveMediaSchedule as resolveMediaSchedule3 } from "@bendyline/squisq/schemas";
 import { DocPlayer } from "@bendyline/squisq-react";
-import { jsx as jsx81, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs66 } from "react/jsx-runtime";
 function TimelineCompositionPanel({
   doc,
   clock,
@@ -40846,11 +40985,11 @@ function TimelineCompositionPanel({
       "aria-label": "Timeline video composition preview",
       children: [
         /* @__PURE__ */ jsxs66("header", { className: "squisq-timeline-video-header", children: [
-          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-title", children: "Video composition" }),
-          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-label", children: formatPresentation(effectiveVideoPresentation) }),
-          /* @__PURE__ */ jsx81(PreviewToolbarControls, { displayMode: "video" }),
-          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-time", children: formatClock5(clock.currentTime) }),
-          onClose && /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx82("span", { className: "squisq-timeline-video-title", children: "Video composition" }),
+          /* @__PURE__ */ jsx82("span", { className: "squisq-timeline-video-label", children: formatPresentation(effectiveVideoPresentation) }),
+          /* @__PURE__ */ jsx82(PreviewToolbarControls, { displayMode: "video" }),
+          /* @__PURE__ */ jsx82("span", { className: "squisq-timeline-video-time", children: formatClock5(clock.currentTime) }),
+          onClose && /* @__PURE__ */ jsx82(
             "button",
             {
               type: "button",
@@ -40862,7 +41001,7 @@ function TimelineCompositionPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-composition-stage", children: playerDoc ? /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsx82("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsx82("div", { className: "squisq-timeline-composition-stage", children: playerDoc ? /* @__PURE__ */ jsx82(
           DocPlayer,
           {
             doc: playerDoc,
@@ -40888,7 +41027,7 @@ function TimelineCompositionPanel({
             enableSwipe: false,
             globalKeyboardShortcuts: false
           }
-        ) : /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-video-empty", children: "Preparing video composition\u2026" }) }) })
+        ) : /* @__PURE__ */ jsx82("div", { className: "squisq-timeline-video-empty", children: "Preparing video composition\u2026" }) }) })
       ]
     }
   );
@@ -40905,7 +41044,7 @@ function formatPresentation(presentation) {
 }
 
 // src/TimelineToolbar.tsx
-import { jsx as jsx82, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs67 } from "react/jsx-runtime";
 function TimelineToolbar({
   literalVideoVisible,
   compositionVisible,
@@ -40922,7 +41061,7 @@ function TimelineToolbar({
       "aria-label": "Timeline view controls",
       "data-testid": "timeline-toolbar",
       children: [
-        /* @__PURE__ */ jsx82("span", { className: "squisq-timeline-toolbar-title", children: "Preview panes" }),
+        /* @__PURE__ */ jsx83("span", { className: "squisq-timeline-toolbar-title", children: "Preview panes" }),
         /* @__PURE__ */ jsxs67(
           "button",
           {
@@ -40935,7 +41074,7 @@ function TimelineToolbar({
             "data-tooltip": literalVideoVisible ? "Hide literal video" : "Show literal video",
             children: [
               /* @__PURE__ */ jsxs67("svg", { width: "15", height: "15", viewBox: "0 0 15 15", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx82(
+                /* @__PURE__ */ jsx83(
                   "rect",
                   {
                     x: "1.5",
@@ -40948,7 +41087,7 @@ function TimelineToolbar({
                     strokeWidth: "1.4"
                   }
                 ),
-                /* @__PURE__ */ jsx82(
+                /* @__PURE__ */ jsx83(
                   "path",
                   {
                     d: "M10 5.5 13.5 4v7L10 9.5z",
@@ -40959,7 +41098,7 @@ function TimelineToolbar({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx82("span", { children: "Video monitor" })
+              /* @__PURE__ */ jsx83("span", { children: "Video monitor" })
             ]
           }
         ),
@@ -40975,7 +41114,7 @@ function TimelineToolbar({
             "data-tooltip": compositionVisible ? "Hide video composition" : "Show video composition",
             children: [
               /* @__PURE__ */ jsxs67("svg", { width: "15", height: "15", viewBox: "0 0 15 15", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx82(
+                /* @__PURE__ */ jsx83(
                   "rect",
                   {
                     x: "1.5",
@@ -40988,10 +41127,10 @@ function TimelineToolbar({
                     strokeWidth: "1.4"
                   }
                 ),
-                /* @__PURE__ */ jsx82("path", { d: "M5 13h5M7.5 11v2", stroke: "currentColor", strokeWidth: "1.4" }),
-                /* @__PURE__ */ jsx82("path", { d: "m6.3 5 3 1.5-3 1.5z", fill: "currentColor" })
+                /* @__PURE__ */ jsx83("path", { d: "M5 13h5M7.5 11v2", stroke: "currentColor", strokeWidth: "1.4" }),
+                /* @__PURE__ */ jsx83("path", { d: "m6.3 5 3 1.5-3 1.5z", fill: "currentColor" })
               ] }),
-              /* @__PURE__ */ jsx82("span", { children: "Video composition" })
+              /* @__PURE__ */ jsx83("span", { children: "Video composition" })
             ]
           }
         )
@@ -41001,7 +41140,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback50, useEffect as useEffect65, useMemo as useMemo52, useRef as useRef59, useState as useState76 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect66, useMemo as useMemo52, useRef as useRef59, useState as useState76 } from "react";
 import {
   isSvgImageSource as isSvgImageSource2,
   parseMarkdown as parseMarkdown9,
@@ -41045,7 +41184,7 @@ function isFontAwesomeRule(rule) {
 }
 
 // src/PlainHtmlPreview.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var cachedRender = null;
 var cachedRenderPromise = null;
 function loadRenderFn() {
@@ -41111,7 +41250,7 @@ function PlainHtmlPreview({
   const parsedDoc = useMemo52(() => parseMarkdown9(markdown), [markdown]);
   const [wikiProjection, setWikiProjection] = useState76(null);
   const mdDoc = wikiProjection?.source === parsedDoc && wikiProjection.support === wikiLinks ? wikiProjection.doc : parsedDoc;
-  useEffect65(() => {
+  useEffect66(() => {
     if (!wikiLinks) return;
     let cancelled = false;
     void resolveWikiLinks(
@@ -41130,7 +41269,7 @@ function PlainHtmlPreview({
     };
   }, [parsedDoc, wikiLinks]);
   const [resolvedImages, setResolvedImages] = useState76(null);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -41167,7 +41306,7 @@ function PlainHtmlPreview({
   }, [resolvedImages, images]);
   const iconsCss = useMemo52(() => collectInlineFontAwesomeCss(), []);
   const [preparation, setPreparation] = useState76(null);
-  useEffect65(() => {
+  useEffect66(() => {
     let cancelled = false;
     loadPreparation().then(
       (loaded) => {
@@ -41194,7 +41333,7 @@ function PlainHtmlPreview({
   );
   const [prepared, setPrepared] = useState76(null);
   const preparedOnceRef = useRef59(false);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!preparation || !needsPreparation) return;
     let cancelled = false;
     const prepare = () => {
@@ -41222,7 +41361,7 @@ function PlainHtmlPreview({
   }, [preparation, needsPreparation, mdDoc, container, dataTableCache]);
   const view = needsPreparation ? prepared : null;
   const [renderFn, setRenderFn] = useState76(() => cachedRender);
-  useEffect65(() => {
+  useEffect66(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -41263,7 +41402,7 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect65(() => {
+  useEffect66(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
@@ -41359,11 +41498,11 @@ function PlainHtmlPreview({
       style2.remove();
     };
   }, [onCopyCode, showCodeCopyButton]);
-  useEffect65(() => {
+  useEffect66(() => {
     installFrameCodeCopyControls();
     return () => removeFrameCodeCopyControlsRef.current();
   }, [html, installFrameCodeCopyControls]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -41387,7 +41526,7 @@ function PlainHtmlPreview({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [globalKeyboardShortcuts]);
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     "iframe",
     {
       ref: setIframeRef,
@@ -41448,7 +41587,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState80, useEffect as useEffect70, useMemo as useMemo57, useCallback as useCallback54, useRef as useRef63 } from "react";
+import { useState as useState80, useEffect as useEffect71, useMemo as useMemo57, useCallback as useCallback54, useRef as useRef63 } from "react";
 import { createPortal as createPortal18 } from "react-dom";
 import {
   DashboardView,
@@ -41593,7 +41732,7 @@ import {
   createContext as createContext7,
   useCallback as useCallback51,
   useContext as useContext7,
-  useEffect as useEffect66,
+  useEffect as useEffect67,
   useId as useId15,
   useLayoutEffect as useLayoutEffect15,
   useMemo as useMemo53,
@@ -41602,7 +41741,7 @@ import {
 } from "react";
 import { createPortal as createPortal17 } from "react-dom";
 import { inferDocumentTitle as inferDocumentTitle2 } from "@bendyline/squisq/markdown";
-import { jsx as jsx84, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs68 } from "react/jsx-runtime";
 var PresentationModeContext = createContext7(null);
 function usePresentationMode() {
   const value = useContext7(PresentationModeContext);
@@ -41860,12 +41999,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect66(() => {
+  useEffect67(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect66(() => {
+  useEffect67(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -41877,7 +42016,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect66(() => {
+  useEffect67(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -41886,10 +42025,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect66(() => {
+  useEffect67(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect66(() => {
+  useEffect67(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -41897,7 +42036,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect66(() => {
+  useEffect67(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -41909,7 +42048,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
@@ -41944,7 +42083,7 @@ function PresentationModeProvider({
       window.removeEventListener("resize", updatePosition);
     };
   }, [activeTarget, rootRef]);
-  useEffect66(
+  useEffect67(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -41996,8 +42135,8 @@ function PresentationModeProvider({
       "aria-label": "Exit presentation mode",
       title: "Exit presentation mode (Esc)",
       children: [
-        /* @__PURE__ */ jsx84(Icon, { icon: "fa-solid fa-compress" }),
-        /* @__PURE__ */ jsx84("span", { children: "Exit presentation" })
+        /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-compress" }),
+        /* @__PURE__ */ jsx85("span", { children: "Exit presentation" })
       ]
     }
   ) : null;
@@ -42006,7 +42145,7 @@ function PresentationModeProvider({
     (activeTarget === "control" || activeTarget === "fullscreen") && exitButton,
     activeTarget === "window" && popupRoot && exitButton ? createPortal17(exitButton, popupRoot) : null,
     error && typeof document !== "undefined" ? createPortal17(
-      /* @__PURE__ */ jsx84("div", { className: "squisq-presentation-error", "data-theme": colorScheme, role: "alert", children: error }),
+      /* @__PURE__ */ jsx85("div", { className: "squisq-presentation-error", "data-theme": colorScheme, role: "alert", children: error }),
       document.body
     ) : null
   ] });
@@ -42073,7 +42212,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -42103,7 +42242,7 @@ function PresentationModeControl() {
     (checked ?? first)?.focus();
   }, [anchor, open]);
   return /* @__PURE__ */ jsxs68("div", { className: "squisq-presentation-control", children: [
-    /* @__PURE__ */ jsx84(
+    /* @__PURE__ */ jsx85(
       "button",
       {
         type: "button",
@@ -42112,10 +42251,10 @@ function PresentationModeControl() {
         "aria-pressed": activeTarget !== null,
         "data-tooltip": activeTarget ? "Exit presentation" : `Present: ${selected.label}`,
         onClick: () => void (activeTarget ? stop() : start()),
-        children: /* @__PURE__ */ jsx84(Icon, { icon: "fa-solid fa-display" })
+        children: /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-display" })
       }
     ),
-    options.length > 1 && /* @__PURE__ */ jsx84(
+    options.length > 1 && /* @__PURE__ */ jsx85(
       "button",
       {
         ref: triggerRef,
@@ -42131,11 +42270,11 @@ function PresentationModeControl() {
           event.preventDefault();
           openMenu();
         },
-        children: /* @__PURE__ */ jsx84("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx84("path", { d: "M2 3.5 5 6.5 8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
+        children: /* @__PURE__ */ jsx85("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx85("path", { d: "M2 3.5 5 6.5 8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
       }
     ),
     open && anchor ? createPortal17(
-      /* @__PURE__ */ jsx84(
+      /* @__PURE__ */ jsx85(
         "div",
         {
           ref: menuRef,
@@ -42181,24 +42320,24 @@ function PresentationModeControl() {
                   if (!alreadyThere) void start(option.target);
                 },
                 children: [
-                  /* @__PURE__ */ jsx84(
+                  /* @__PURE__ */ jsx85(
                     "span",
                     {
                       className: "squisq-use-mode-menu-icon squisq-presentation-menu-icon",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsx84(Icon, { icon: option.icon })
+                      children: /* @__PURE__ */ jsx85(Icon, { icon: option.icon })
                     }
                   ),
                   /* @__PURE__ */ jsxs68("span", { className: "squisq-use-mode-menu-copy squisq-presentation-menu-copy", children: [
-                    /* @__PURE__ */ jsx84("span", { className: "squisq-use-mode-menu-label squisq-presentation-menu-label", children: option.label }),
-                    /* @__PURE__ */ jsx84("span", { className: "squisq-use-mode-menu-summary squisq-presentation-menu-summary", children: disabled ? "Full screen is unavailable." : option.summary })
+                    /* @__PURE__ */ jsx85("span", { className: "squisq-use-mode-menu-label squisq-presentation-menu-label", children: option.label }),
+                    /* @__PURE__ */ jsx85("span", { className: "squisq-use-mode-menu-summary squisq-presentation-menu-summary", children: disabled ? "Full screen is unavailable." : option.summary })
                   ] }),
-                  /* @__PURE__ */ jsx84(
+                  /* @__PURE__ */ jsx85(
                     "span",
                     {
                       className: "squisq-use-mode-menu-check squisq-presentation-menu-check",
                       "aria-hidden": "true",
-                      children: isSelected && /* @__PURE__ */ jsx84(Icon, { icon: "fa-solid fa-check" })
+                      children: isSelected && /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-check" })
                     }
                   )
                 ]
@@ -42218,12 +42357,12 @@ import {
   createContext as createContext8,
   useCallback as useCallback52,
   useContext as useContext8,
-  useEffect as useEffect67,
+  useEffect as useEffect68,
   useMemo as useMemo54,
   useRef as useRef61,
   useState as useState78
 } from "react";
-import { jsx as jsx85, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs69 } from "react/jsx-runtime";
 var PrintModeContext = createContext8(null);
 function usePrintMode() {
   const value = useContext8(PrintModeContext);
@@ -42288,7 +42427,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect67(() => {
+  useEffect68(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -42297,10 +42436,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect67(() => {
+  useEffect68(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect67(() => {
+  useEffect68(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -42334,7 +42473,7 @@ function PrintModeProvider({ rootRef, children }) {
     }),
     [active, close, open, print, registerPrintHandler, slidesPerPage]
   );
-  return /* @__PURE__ */ jsx85(PrintModeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx86(PrintModeContext.Provider, { value, children });
 }
 function PrintModeControl() {
   const { open } = usePrintMode();
@@ -42347,8 +42486,8 @@ function PrintModeControl() {
       "aria-label": "Print",
       "data-tooltip": "Print",
       children: [
-        /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-print" }),
-        /* @__PURE__ */ jsx85("span", { children: "Print" })
+        /* @__PURE__ */ jsx86(Icon, { icon: "fa-solid fa-print" }),
+        /* @__PURE__ */ jsx86("span", { children: "Print" })
       ]
     }
   );
@@ -42358,8 +42497,8 @@ function PrintPreviewToolbar() {
   const { activeDisplayMode } = usePreviewSettings();
   const { slidesPerPage, setSlidesPerPage, print, close } = usePrintMode();
   return /* @__PURE__ */ jsxs69("div", { className: "squisq-print-toolbar", "aria-label": "Print preview controls", children: [
-    /* @__PURE__ */ jsx85("span", { className: "squisq-print-toolbar-title", children: "Print preview" }),
-    activeDisplayMode === "slideshow" && /* @__PURE__ */ jsx85("div", { className: "squisq-print-density", role: "group", "aria-label": "Slides per page", children: SLIDES_PER_PAGE_OPTIONS.map((value) => /* @__PURE__ */ jsxs69(
+    /* @__PURE__ */ jsx86("span", { className: "squisq-print-toolbar-title", children: "Print preview" }),
+    activeDisplayMode === "slideshow" && /* @__PURE__ */ jsx86("div", { className: "squisq-print-density", role: "group", "aria-label": "Slides per page", children: SLIDES_PER_PAGE_OPTIONS.map((value) => /* @__PURE__ */ jsxs69(
       "button",
       {
         type: "button",
@@ -42368,7 +42507,7 @@ function PrintPreviewToolbar() {
         "aria-label": `${value} ${value === 1 ? "slide" : "slides"} per page`,
         onClick: () => setSlidesPerPage(value),
         children: [
-          /* @__PURE__ */ jsx85("span", { children: value }),
+          /* @__PURE__ */ jsx86("span", { children: value }),
           /* @__PURE__ */ jsxs69("span", { className: "squisq-print-density-label", children: [
             " ",
             value === 1 ? "slide" : "slides",
@@ -42378,22 +42517,22 @@ function PrintPreviewToolbar() {
       },
       value
     )) }),
-    /* @__PURE__ */ jsx85("div", { className: "squisq-print-toolbar-spacer" }),
+    /* @__PURE__ */ jsx86("div", { className: "squisq-print-toolbar-spacer" }),
     /* @__PURE__ */ jsxs69("button", { type: "button", className: "squisq-print-action", onClick: print, children: [
-      /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-print" }),
-      /* @__PURE__ */ jsx85("span", { children: "Print" })
+      /* @__PURE__ */ jsx86(Icon, { icon: "fa-solid fa-print" }),
+      /* @__PURE__ */ jsx86("span", { children: "Print" })
     ] }),
     /* @__PURE__ */ jsxs69("button", { type: "button", className: "squisq-print-close", onClick: close, children: [
-      /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-xmark" }),
-      /* @__PURE__ */ jsx85("span", { children: "Close" })
+      /* @__PURE__ */ jsx86(Icon, { icon: "fa-solid fa-xmark" }),
+      /* @__PURE__ */ jsx86("span", { children: "Close" })
     ] })
   ] });
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback53, useEffect as useEffect68, useMemo as useMemo55, useRef as useRef62 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect69, useMemo as useMemo55, useRef as useRef62 } from "react";
 import {
-  BlockRenderer as BlockRenderer4,
+  BlockRenderer as BlockRenderer5,
   FlashcardFaceView,
   LinearDocView,
   useDocPlayback,
@@ -42404,7 +42543,7 @@ import {
 } from "@bendyline/squisq/schemas";
 import { expandCoverBlock as expandCoverBlock2, materializeFlashcards } from "@bendyline/squisq/doc";
 import { resolveTransformStyle } from "@bendyline/squisq/transform";
-import { jsx as jsx86, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs70 } from "react/jsx-runtime";
 function chunk(values, size) {
   const groups = [];
   for (let index2 = 0; index2 < values.length; index2 += size) {
@@ -42448,7 +42587,7 @@ function PrintPreview({
     [contentDoc]
   );
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect68(() => {
+  useEffect69(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -42458,7 +42597,7 @@ function PrintPreview({
   }, [isTextDocument, registerPrintHandler]);
   const title = contentDoc?.frontmatter?.title ?? contentDoc?.startBlock?.title ?? void 0;
   if (isTextDocument) {
-    return /* @__PURE__ */ jsx86("div", { className: "squisq-print-preview squisq-print-preview--document", children: /* @__PURE__ */ jsx86("div", { className: "squisq-print-document-paper", children: /* @__PURE__ */ jsx86(
+    return /* @__PURE__ */ jsx87("div", { className: "squisq-print-preview squisq-print-preview--document", children: /* @__PURE__ */ jsx87("div", { className: "squisq-print-document-paper", children: /* @__PURE__ */ jsx87(
       PlainHtmlPreview,
       {
         markdown: documentMarkdown,
@@ -42473,8 +42612,8 @@ function PrintPreview({
   }
   if (displayMode === "linear") {
     return /* @__PURE__ */ jsxs70("div", { className: "squisq-print-preview squisq-print-preview--page", children: [
-      /* @__PURE__ */ jsx86("style", { children: "@page { margin: 0; }" }),
-      /* @__PURE__ */ jsx86("div", { className: "squisq-print-page-paper", children: /* @__PURE__ */ jsx86(
+      /* @__PURE__ */ jsx87("style", { children: "@page { margin: 0; }" }),
+      /* @__PURE__ */ jsx87("div", { className: "squisq-print-page-paper", children: /* @__PURE__ */ jsx87(
         LinearDocView,
         {
           className: "squisq-print-linear",
@@ -42509,7 +42648,7 @@ function PrintPreview({
           "--squisq-print-flashcard-surface": theme.colors.backgroundLight
         },
         children: [
-          /* @__PURE__ */ jsx86("style", { children: "@page { size: landscape; margin: 0; }" }),
+          /* @__PURE__ */ jsx87("style", { children: "@page { size: landscape; margin: 0; }" }),
           flashcardDeck?.cards.map((card, index2) => /* @__PURE__ */ jsxs70("article", { className: "squisq-print-flashcard-sheet", children: [
             /* @__PURE__ */ jsxs70("header", { children: [
               /* @__PURE__ */ jsxs70("span", { children: [
@@ -42518,25 +42657,25 @@ function PrintPreview({
                 " of ",
                 flashcardDeck.cards.length
               ] }),
-              card.label && /* @__PURE__ */ jsx86("strong", { children: card.label })
+              card.label && /* @__PURE__ */ jsx87("strong", { children: card.label })
             ] }),
             /* @__PURE__ */ jsxs70("div", { className: "squisq-print-flashcard-pair", children: [
               /* @__PURE__ */ jsxs70("section", { className: "squisq-print-flashcard-face", "aria-label": "Question side", children: [
-                /* @__PURE__ */ jsx86("small", { children: "Front" }),
-                /* @__PURE__ */ jsx86(FlashcardFaceView, { ...faceProps, face: card.front }),
-                card.kind === "multiple-choice" && /* @__PURE__ */ jsx86("ol", { className: "squisq-print-flashcard-choices", children: card.choices?.map((choice) => /* @__PURE__ */ jsx86("li", { children: /* @__PURE__ */ jsx86(FlashcardFaceView, { ...faceProps, face: choice.content }) }, choice.id)) })
+                /* @__PURE__ */ jsx87("small", { children: "Front" }),
+                /* @__PURE__ */ jsx87(FlashcardFaceView, { ...faceProps, face: card.front }),
+                card.kind === "multiple-choice" && /* @__PURE__ */ jsx87("ol", { className: "squisq-print-flashcard-choices", children: card.choices?.map((choice) => /* @__PURE__ */ jsx87("li", { children: /* @__PURE__ */ jsx87(FlashcardFaceView, { ...faceProps, face: choice.content }) }, choice.id)) })
               ] }),
               /* @__PURE__ */ jsxs70("section", { className: "squisq-print-flashcard-face", "aria-label": "Answer side", children: [
-                /* @__PURE__ */ jsx86("small", { children: "Back" }),
-                /* @__PURE__ */ jsx86(FlashcardFaceView, { ...faceProps, face: card.back }),
+                /* @__PURE__ */ jsx87("small", { children: "Back" }),
+                /* @__PURE__ */ jsx87(FlashcardFaceView, { ...faceProps, face: card.back }),
                 card.explanation && /* @__PURE__ */ jsxs70("div", { className: "squisq-print-flashcard-explanation", children: [
-                  /* @__PURE__ */ jsx86("small", { children: "Explanation" }),
-                  /* @__PURE__ */ jsx86(FlashcardFaceView, { ...faceProps, face: card.explanation })
+                  /* @__PURE__ */ jsx87("small", { children: "Explanation" }),
+                  /* @__PURE__ */ jsx87(FlashcardFaceView, { ...faceProps, face: card.explanation })
                 ] })
               ] })
             ] })
           ] }, card.id)),
-          (!flashcardDeck || flashcardDeck.cards.length === 0) && /* @__PURE__ */ jsx86("p", { className: "squisq-print-empty", children: "Nothing to print." })
+          (!flashcardDeck || flashcardDeck.cards.length === 0) && /* @__PURE__ */ jsx87("p", { className: "squisq-print-empty", children: "Nothing to print." })
         ]
       }
     );
@@ -42556,15 +42695,15 @@ function PrintPreview({
       "data-slides-per-page": density,
       style: previewStyle,
       children: [
-        /* @__PURE__ */ jsx86("style", { children: `@page { size: ${orientation}; margin: 0; }` }),
-        sheets.map((sheet, pageIndex) => /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx87("style", { children: `@page { size: ${orientation}; margin: 0; }` }),
+        sheets.map((sheet, pageIndex) => /* @__PURE__ */ jsx87(
           "div",
           {
             className: "squisq-print-sheet",
             "data-slides-per-page": density,
             "aria-label": `Print page ${pageIndex + 1}`,
-            children: sheet.map((block) => /* @__PURE__ */ jsx86("div", { className: "squisq-print-slide-cell", children: /* @__PURE__ */ jsx86("div", { className: "squisq-print-slide-frame", children: /* @__PURE__ */ jsx86(
-              BlockRenderer4,
+            children: sheet.map((block) => /* @__PURE__ */ jsx87("div", { className: "squisq-print-slide-cell", children: /* @__PURE__ */ jsx87("div", { className: "squisq-print-slide-frame", children: /* @__PURE__ */ jsx87(
+              BlockRenderer5,
               {
                 block,
                 blockTime: Math.max(0, block.duration),
@@ -42577,7 +42716,7 @@ function PrintPreview({
           },
           `${density}-${pageIndex}`
         )),
-        sheets.length === 0 && /* @__PURE__ */ jsx86("p", { className: "squisq-print-empty", children: "Nothing to print." })
+        sheets.length === 0 && /* @__PURE__ */ jsx87("p", { className: "squisq-print-empty", children: "Nothing to print." })
       ]
     }
   );
@@ -42587,7 +42726,7 @@ function PrintPreview({
 import {
   createContext as createContext9,
   useContext as useContext9,
-  useEffect as useEffect69,
+  useEffect as useEffect70,
   useMemo as useMemo56,
   useState as useState79
 } from "react";
@@ -42631,7 +42770,7 @@ function collectSlideshowDataSources(doc) {
 }
 
 // src/slideshow/SlideshowDataGrid.tsx
-import { Fragment as Fragment28, jsx as jsx87 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx88 } from "react/jsx-runtime";
 var EMPTY_CONTEXT = {
   container: null,
   mediaRevision: 0,
@@ -42649,7 +42788,7 @@ function SlideshowDataGridProvider({
     () => ({ container: container ?? null, mediaRevision, sources }),
     [container, mediaRevision, sources]
   );
-  return /* @__PURE__ */ jsx87(SlideshowDataGridContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx88(SlideshowDataGridContext.Provider, { value, children });
 }
 var EMPTY_VIEW = { sort: [], filter: [] };
 function sourceKey(source) {
@@ -42694,7 +42833,7 @@ function SlideshowDataGridRenderer({
   const activeSourceKey = sourceKey(source);
   const [remote, setRemote] = useState79({ key: "", status: "idle" });
   const [gridModule, setGridModule] = useState79(null);
-  useEffect69(() => {
+  useEffect70(() => {
     let active = true;
     void loadGridModule().then((module) => {
       if (active) setGridModule(module);
@@ -42703,7 +42842,7 @@ function SlideshowDataGridRenderer({
       active = false;
     };
   }, []);
-  useEffect69(() => {
+  useEffect70(() => {
     if (!container || !source || !gridModule) {
       setRemote({ key: activeSourceKey, status: "idle" });
       return;
@@ -42754,14 +42893,14 @@ function SlideshowDataGridRenderer({
     () => useLocalGrid && gridModule ? new gridModule.TableStoreClient({ headers: previewHeaders, cells: previewRows }) : null,
     [previewHeaders, previewRows, useLocalGrid, gridModule]
   );
-  useEffect69(() => () => localProvider?.dispose(), [localProvider]);
+  useEffect70(() => () => localProvider?.dispose(), [localProvider]);
   const ready = currentRemote?.status === "ready" ? currentRemote : void 0;
   const provider = ready?.provider ?? localProvider;
   const ingest = ready?.ingest ?? (localProvider ? { headers: previewHeaders, cells: previewRows } : void 0);
   const initialView = ready?.initialView ?? EMPTY_VIEW;
   const [view, setView] = useState79(initialView);
-  useEffect69(() => setView(initialView), [initialView, provider]);
-  if (!provider || !ingest || !gridModule) return /* @__PURE__ */ jsx87(Fragment28, { children: fallback });
+  useEffect70(() => setView(initialView), [initialView, provider]);
+  if (!provider || !ingest || !gridModule) return /* @__PURE__ */ jsx88(Fragment29, { children: fallback });
   const { style } = layer.content;
   const rowHeight = Math.max(32, style.fontSize * 2.1);
   const footerHeight = Math.max(28, style.fontSize * 1.5);
@@ -42790,7 +42929,7 @@ function SlideshowDataGridRenderer({
     "--squisq-grid-accent": style.headerBackground,
     "--squisq-grid-resize-handle": style.headerBackground
   };
-  return /* @__PURE__ */ jsx87("div", { className: "squisq-slideshow-data-grid", style: gridStyle, children: /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx88("div", { className: "squisq-slideshow-data-grid", style: gridStyle, children: /* @__PURE__ */ jsx88(
     gridModule.DataGrid,
     {
       provider,
@@ -42806,7 +42945,7 @@ function SlideshowDataGridRenderer({
 
 // src/PreviewPanel.tsx
 import { useProcessedAudio as useProcessedAudio3 } from "@bendyline/squisq-video-react/media-edit";
-import { jsx as jsx88, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs71 } from "react/jsx-runtime";
 function PreviewPanel({
   basePath = "/",
   className,
@@ -42897,11 +43036,11 @@ function PreviewPanel({
   const isNarrateMode = activeDisplayMode === "narrate";
   const isDashboardMode = activeDisplayMode === "dashboard";
   const isFlashcardsMode = activeDisplayMode === "flashcards";
-  useEffect70(() => {
+  useEffect71(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect70(() => {
+  useEffect71(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -42964,22 +43103,22 @@ function PreviewPanel({
     presentation?.popupRoot
   ]);
   if (isParsing && !isNarrateMode && !previewDoc) {
-    return /* @__PURE__ */ jsx88("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx88("p", { children: "Parsing\u2026" }) });
+    return /* @__PURE__ */ jsx89("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx89("p", { children: "Parsing\u2026" }) });
   }
   if (parseError && !isNarrateMode) {
     return /* @__PURE__ */ jsxs71("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: [
-      /* @__PURE__ */ jsx88("h3", { children: "Parse Error" }),
-      /* @__PURE__ */ jsx88("pre", { children: parseError })
+      /* @__PURE__ */ jsx89("h3", { children: "Parse Error" }),
+      /* @__PURE__ */ jsx89("pre", { children: parseError })
     ] });
   }
   if (!previewDoc && !isDocumentMode && !isNarrateMode) {
-    return /* @__PURE__ */ jsx88("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx88("p", { children: "No content to preview. Start typing in the editor." }) });
+    return /* @__PURE__ */ jsx89("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx89("p", { children: "No content to preview. Start typing in the editor." }) });
   }
   const fillsContainer = printMode?.active || isDocumentMode || isPageMode || isNarrateMode || isFlashcardsMode ? "stretch" : "center";
   const audienceWindowOpen = presentation?.activeTarget === "window";
   const renderSurface = (audience) => {
     if (!audience && printMode?.active) {
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         PrintPreview,
         {
           displayMode: activeDisplayMode,
@@ -42997,7 +43136,7 @@ function PreviewPanel({
       );
     }
     if (isDocumentMode) {
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         PlainHtmlPreview,
         {
           markdown: documentMarkdown,
@@ -43016,7 +43155,7 @@ function PreviewPanel({
     }
     if (isNarrateMode) {
       if (audience) return null;
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         TeleprompterView,
         {
           doc,
@@ -43035,7 +43174,7 @@ function PreviewPanel({
       );
     }
     if (isPageMode) {
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         LinearDocView2,
         {
           doc: contentDoc ?? doc,
@@ -43052,7 +43191,7 @@ function PreviewPanel({
       );
     }
     if (isFlashcardsMode) {
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         FlashcardView,
         {
           doc: contentDoc ?? doc,
@@ -43067,7 +43206,7 @@ function PreviewPanel({
       );
     }
     if (isDashboardMode) {
-      return /* @__PURE__ */ jsx88("div", { className: "squisq-dashboard-fit", children: /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89("div", { className: "squisq-dashboard-fit", children: /* @__PURE__ */ jsx89(
         DashboardView,
         {
           doc: contentDoc ?? doc,
@@ -43082,10 +43221,10 @@ function PreviewPanel({
       ) });
     }
     if (audience && !followerAudioController) {
-      return /* @__PURE__ */ jsx88("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
+      return /* @__PURE__ */ jsx89("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
     }
     const audienceCaptionMode = playbackState?.captionMode;
-    return /* @__PURE__ */ jsx88(
+    return /* @__PURE__ */ jsx89(
       DocPlayer2,
       {
         doc: previewDoc,
@@ -43136,7 +43275,7 @@ function PreviewPanel({
       container: workspaceContainer,
       mediaRevision,
       children: [
-        /* @__PURE__ */ jsx88(
+        /* @__PURE__ */ jsx89(
           "div",
           {
             className: `squisq-preview-container ${className || ""}`,
@@ -43149,16 +43288,16 @@ function PreviewPanel({
               overflow: "hidden",
               background: "var(--squisq-bg)"
             },
-            children: /* @__PURE__ */ jsx88("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
+            children: /* @__PURE__ */ jsx89("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
           }
         ),
         audienceWindowOpen && presentation?.popupRoot && !isNarrateMode ? createPortal18(
-          /* @__PURE__ */ jsx88(
+          /* @__PURE__ */ jsx89(
             "div",
             {
               className: "squisq-editor-shell squisq-presentation-window",
               "data-theme": colorScheme,
-              children: /* @__PURE__ */ jsx88("div", { className: "squisq-preview-container squisq-presentation-window-preview", children: /* @__PURE__ */ jsx88(
+              children: /* @__PURE__ */ jsx89("div", { className: "squisq-preview-container squisq-presentation-window-preview", children: /* @__PURE__ */ jsx89(
                 "div",
                 {
                   ref: popupSurfaceRef,
@@ -43178,13 +43317,13 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState82, useEffect as useEffect72, useRef as useRef65, useCallback as useCallback55 } from "react";
+import { useState as useState82, useEffect as useEffect73, useRef as useRef65, useCallback as useCallback55 } from "react";
 import { isSvgImageSource as isSvgImageSource3 } from "@bendyline/squisq/markdown";
 import { sanitizedSvgImageUrl as sanitizedSvgImageUrl2 } from "@bendyline/squisq-react";
 
 // src/MediaPreviewDialog.tsx
-import { useEffect as useEffect71, useId as useId16, useRef as useRef64, useState as useState81 } from "react";
-import { jsx as jsx89, jsxs as jsxs72 } from "react/jsx-runtime";
+import { useEffect as useEffect72, useId as useId16, useRef as useRef64, useState as useState81 } from "react";
+import { jsx as jsx90, jsxs as jsxs72 } from "react/jsx-runtime";
 function MediaPreviewDialog({
   kind,
   name,
@@ -43199,16 +43338,16 @@ function MediaPreviewDialog({
   const titleId = useId16();
   const [playbackFailed, setPlaybackFailed] = useState81(false);
   useModalDialog({ rootRef: overlayRef, dialogRef, onClose });
-  useEffect71(() => setPlaybackFailed(false), [src]);
+  useEffect72(() => setPlaybackFailed(false), [src]);
   let body;
   if (failed || playbackFailed || src === "") {
-    body = /* @__PURE__ */ jsx89("div", { className: "squisq-media-preview-message", children: "This file can\u2019t be previewed." });
+    body = /* @__PURE__ */ jsx90("div", { className: "squisq-media-preview-message", children: "This file can\u2019t be previewed." });
   } else if (src === null) {
-    body = /* @__PURE__ */ jsx89("div", { className: "squisq-media-preview-message", children: "Loading\u2026" });
+    body = /* @__PURE__ */ jsx90("div", { className: "squisq-media-preview-message", children: "Loading\u2026" });
   } else if (kind === "image") {
-    body = /* @__PURE__ */ jsx89(ImageViewer, { src, alt: name, theme: isDark ? "dark" : "light" });
+    body = /* @__PURE__ */ jsx90(ImageViewer, { src, alt: name, theme: isDark ? "dark" : "light" });
   } else if (kind === "video") {
-    body = /* @__PURE__ */ jsx89(
+    body = /* @__PURE__ */ jsx90(
       "video",
       {
         className: "squisq-media-preview-video",
@@ -43221,11 +43360,11 @@ function MediaPreviewDialog({
     );
   } else {
     body = /* @__PURE__ */ jsxs72("div", { className: "squisq-media-preview-audio", children: [
-      /* @__PURE__ */ jsx89("span", { className: "squisq-media-preview-audio-icon", "aria-hidden": "true", children: "\u{1F50A}" }),
-      /* @__PURE__ */ jsx89("audio", { src, controls: true, autoPlay: true, onError: () => setPlaybackFailed(true) })
+      /* @__PURE__ */ jsx90("span", { className: "squisq-media-preview-audio-icon", "aria-hidden": "true", children: "\u{1F50A}" }),
+      /* @__PURE__ */ jsx90("audio", { src, controls: true, autoPlay: true, onError: () => setPlaybackFailed(true) })
     ] });
   }
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     "div",
     {
       ref: overlayRef,
@@ -43247,9 +43386,9 @@ function MediaPreviewDialog({
           "data-testid": "media-preview-dialog",
           children: [
             /* @__PURE__ */ jsxs72("header", { className: "squisq-media-preview-header", children: [
-              /* @__PURE__ */ jsx89("span", { id: titleId, className: "squisq-media-preview-title", title: name, children: name }),
-              /* @__PURE__ */ jsx89("span", { className: "squisq-media-preview-detail", children: detail }),
-              /* @__PURE__ */ jsx89(
+              /* @__PURE__ */ jsx90("span", { id: titleId, className: "squisq-media-preview-title", title: name, children: name }),
+              /* @__PURE__ */ jsx90("span", { className: "squisq-media-preview-detail", children: detail }),
+              /* @__PURE__ */ jsx90(
                 "button",
                 {
                   type: "button",
@@ -43260,7 +43399,7 @@ function MediaPreviewDialog({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx89("div", { className: "squisq-media-preview-body", children: body })
+            /* @__PURE__ */ jsx90("div", { className: "squisq-media-preview-body", children: body })
           ]
         }
       )
@@ -43269,7 +43408,7 @@ function MediaPreviewDialog({
 }
 
 // src/MediaBin.tsx
-import { Fragment as Fragment29, jsx as jsx90, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx91, jsxs as jsxs73 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -43343,7 +43482,7 @@ function MediaBin({
 }) {
   const [entries, setEntries] = useState82([]);
   const listRef = useRef65(null);
-  useEffect72(() => {
+  useEffect73(() => {
     if (!highlightPath || !listRef.current) return;
     const item = listRef.current.querySelector(`[data-media-path="${CSS.escape(highlightPath)}"]`);
     if (item instanceof HTMLElement) {
@@ -43377,7 +43516,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect72(() => {
+  useEffect73(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -43398,7 +43537,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect72(() => {
+  useEffect73(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -43555,7 +43694,7 @@ function MediaBin({
   const openContextMenu = useCallback55((entry, x, y) => {
     setContextMenu({ entry, x, y });
   }, []);
-  useEffect72(() => {
+  useEffect73(() => {
     setPreview(null);
   }, [mediaProvider]);
   const openPreview = useCallback55(
@@ -43600,7 +43739,7 @@ function MediaBin({
     [openContextMenu, openPreview]
   );
   const previewKind = preview ? squisqMediaKind(preview.entry.mimeType) : "file";
-  return /* @__PURE__ */ jsxs73(Fragment29, { children: [
+  return /* @__PURE__ */ jsxs73(Fragment30, { children: [
     /* @__PURE__ */ jsxs73(
       "div",
       {
@@ -43634,8 +43773,8 @@ function MediaBin({
                   "aria-haspopup": "dialog",
                   "aria-expanded": isRecorderOpen,
                   children: [
-                    /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-action-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-record-dot" }) }),
-                    /* @__PURE__ */ jsx90("span", { children: "Record" })
+                    /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-action-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-record-dot" }) }),
+                    /* @__PURE__ */ jsx91("span", { children: "Record" })
                   ]
                 }
               ),
@@ -43648,8 +43787,8 @@ function MediaBin({
                   disabled: !mediaProvider || loading,
                   title: mediaProvider ? "Upload files" : "Load a content zip or select a storage slot first",
                   children: [
-                    /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-action-icon", children: "+" }),
-                    /* @__PURE__ */ jsx90("span", { children: "Upload" })
+                    /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-action-icon", children: "+" }),
+                    /* @__PURE__ */ jsx91("span", { children: "Upload" })
                   ]
                 }
               )
@@ -43658,10 +43797,10 @@ function MediaBin({
           /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-list", ref: listRef, children: [
             !mediaProvider && /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-empty", children: [
               "No media context.",
-              /* @__PURE__ */ jsx90("br", {}),
+              /* @__PURE__ */ jsx91("br", {}),
               "Load a content zip or select a storage slot."
             ] }),
-            mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx90("div", { className: "squisq-media-bin-empty", children: "No files yet." }),
+            mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx91("div", { className: "squisq-media-bin-empty", children: "No files yet." }),
             entries.map((entry) => {
               const thumb = thumbUrls[entry.name];
               const basename = basenameForPath(entry.name);
@@ -43700,7 +43839,7 @@ ${formatSize(entry.size)}`,
                   onDragStart: handleDragStart,
                   onKeyDown: (e2) => handleItemKeyDown(entry, e2),
                   children: [
-                    thumb ? /* @__PURE__ */ jsx90(
+                    thumb ? /* @__PURE__ */ jsx91(
                       "img",
                       {
                         src: thumb,
@@ -43708,15 +43847,15 @@ ${formatSize(entry.size)}`,
                         className: "squisq-media-bin-thumb",
                         draggable: false
                       }
-                    ) : /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
+                    ) : /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
                     /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-meta", children: [
-                      /* @__PURE__ */ jsx90("div", { className: "squisq-media-bin-name", children: basename }),
+                      /* @__PURE__ */ jsx91("div", { className: "squisq-media-bin-name", children: basename }),
                       /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-detail-row", children: [
-                        /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
-                        isUnused && /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
+                        /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
+                        isUnused && /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
                       ] })
                     ] }),
-                    allowBinaryDownloads && /* @__PURE__ */ jsx90(
+                    allowBinaryDownloads && /* @__PURE__ */ jsx91(
                       "button",
                       {
                         type: "button",
@@ -43730,7 +43869,7 @@ ${formatSize(entry.size)}`,
                           void handleDownloadEntry(entry);
                         },
                         onDragStart: (event) => event.preventDefault(),
-                        children: /* @__PURE__ */ jsx90("span", { "aria-hidden": "true", children: downloadingPath === entry.name ? "\u2026" : "\u2193" })
+                        children: /* @__PURE__ */ jsx91("span", { "aria-hidden": "true", children: downloadingPath === entry.name ? "\u2026" : "\u2193" })
                       }
                     )
                   ]
@@ -43740,11 +43879,11 @@ ${formatSize(entry.size)}`,
             })
           ] }),
           isDropActive && /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-drop-target", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
-            /* @__PURE__ */ jsx90("strong", { children: "Drop media here" }),
-            /* @__PURE__ */ jsx90("span", { children: "Attach to this document" })
+            /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
+            /* @__PURE__ */ jsx91("strong", { children: "Drop media here" }),
+            /* @__PURE__ */ jsx91("span", { children: "Attach to this document" })
           ] }),
-          contextMenu && /* @__PURE__ */ jsx90(
+          contextMenu && /* @__PURE__ */ jsx91(
             "div",
             {
               ref: contextMenuRef,
@@ -43752,7 +43891,7 @@ ${formatSize(entry.size)}`,
               role: "menu",
               "aria-label": `${contextMenu.entry.name} actions`,
               style: contextMenuStyle,
-              children: /* @__PURE__ */ jsx90(
+              children: /* @__PURE__ */ jsx91(
                 "button",
                 {
                   type: "button",
@@ -43765,7 +43904,7 @@ ${formatSize(entry.size)}`,
               )
             }
           ),
-          /* @__PURE__ */ jsx90(
+          /* @__PURE__ */ jsx91(
             "input",
             {
               ref: fileInputRef,
@@ -43778,7 +43917,7 @@ ${formatSize(entry.size)}`,
         ]
       }
     ),
-    preview && previewKind !== "file" && /* @__PURE__ */ jsx90(
+    preview && previewKind !== "file" && /* @__PURE__ */ jsx91(
       MediaPreviewDialog,
       {
         kind: previewKind,
@@ -43795,7 +43934,7 @@ ${formatSize(entry.size)}`,
 
 // src/DropZoneOverlay.tsx
 import { useState as useState83 } from "react";
-import { Fragment as Fragment30, jsx as jsx91, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx92, jsxs as jsxs74 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
   zoneProps,
@@ -43803,8 +43942,8 @@ function DropZoneOverlay({
 }) {
   const showMedia = dragContentType === "media" || dragContentType === "mixed";
   const showText = dragContentType === "text" || dragContentType === "mixed";
-  return /* @__PURE__ */ jsx91("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs74("div", { className: "squisq-drop-overlay-inner", children: [
-    showMedia && /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx92("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs74("div", { className: "squisq-drop-overlay-inner", children: [
+    showMedia && /* @__PURE__ */ jsx92(
       DropZone,
       {
         target: "media",
@@ -43816,8 +43955,8 @@ function DropZoneOverlay({
         variant: "media"
       }
     ),
-    showText && /* @__PURE__ */ jsxs74(Fragment30, { children: [
-      /* @__PURE__ */ jsx91(
+    showText && /* @__PURE__ */ jsxs74(Fragment31, { children: [
+      /* @__PURE__ */ jsx92(
         DropZone,
         {
           target: "insert",
@@ -43828,7 +43967,7 @@ function DropZoneOverlay({
           variant: "insert"
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx92(
         DropZone,
         {
           target: "replace",
@@ -43886,16 +44025,16 @@ function DropZone({
         props.onDrop(e2);
       },
       children: [
-        /* @__PURE__ */ jsx91("span", { className: "squisq-drop-zone-icon", children: icon }),
-        /* @__PURE__ */ jsx91("span", { className: "squisq-drop-zone-label", children: label }),
-        /* @__PURE__ */ jsx91("span", { className: "squisq-drop-zone-desc", children: description })
+        /* @__PURE__ */ jsx92("span", { className: "squisq-drop-zone-icon", children: icon }),
+        /* @__PURE__ */ jsx92("span", { className: "squisq-drop-zone-label", children: label }),
+        /* @__PURE__ */ jsx92("span", { className: "squisq-drop-zone-desc", children: description })
       ]
     }
   );
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect73, useLayoutEffect as useLayoutEffect16, useRef as useRef66, useState as useState84 } from "react";
+import { useEffect as useEffect74, useLayoutEffect as useLayoutEffect16, useRef as useRef66, useState as useState84 } from "react";
 import { createPortal as createPortal19 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -43908,7 +44047,7 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 }
 
 // src/Tooltip.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
   const [state, setState3] = useState84(null);
@@ -43929,7 +44068,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect73(() => {
+  useEffect74(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -44011,7 +44150,7 @@ function TooltipLayer() {
   }, []);
   if (!state) return null;
   return createPortal19(
-    /* @__PURE__ */ jsx92(
+    /* @__PURE__ */ jsx93(
       "div",
       {
         role: "tooltip",
@@ -44031,18 +44170,18 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect80, useRef as useRef75, useState as useState91, useCallback as useCallback63, useMemo as useMemo62 } from "react";
+import { useEffect as useEffect81, useRef as useRef75, useState as useState91, useCallback as useCallback63, useMemo as useMemo62 } from "react";
 
 // src/BlockPreviewPanel.tsx
 import { useMemo as useMemo58 } from "react";
-import { VIEWPORT_PRESETS as VIEWPORT_PRESETS7 } from "@bendyline/squisq/schemas";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS8 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks6, DEFAULT_THEME as DEFAULT_THEME7 } from "@bendyline/squisq/doc";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 function BlockPreviewPanel({ basePath = "/" }) {
   const { doc, activeBlockStartLine, mediaProvider, workspaceContainer, fileName, mediaRevision } = useEditorContext();
   const previewSettings = usePreviewSettingsOptional();
   const theme = previewSettings?.activeTheme ?? DEFAULT_THEME7;
-  const viewport = previewSettings?.activeViewport ?? VIEWPORT_PRESETS7.landscape;
+  const viewport = previewSettings?.activeViewport ?? VIEWPORT_PRESETS8.landscape;
   const projection = usePreviewProjection(doc, "", workspaceContainer, fileName, mediaRevision);
   const previewDoc = projection?.contentDoc ?? doc;
   const block = useMemo58(() => {
@@ -44056,12 +44195,12 @@ function BlockPreviewPanel({ basePath = "/" }) {
     [previewDoc, block, theme, viewport]
   );
   if (!visual) return null;
-  return /* @__PURE__ */ jsx93("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx94("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx94(
     "div",
     {
       className: "squisq-block-preview-frame",
       style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-      children: /* @__PURE__ */ jsx93(
+      children: /* @__PURE__ */ jsx94(
         BlockThumbnail,
         {
           visual,
@@ -44075,17 +44214,17 @@ function BlockPreviewPanel({ basePath = "/" }) {
 }
 
 // src/NavigationSheet.tsx
-import { useCallback as useCallback57, useEffect as useEffect75, useId as useId17, useRef as useRef69, useState as useState85 } from "react";
+import { useCallback as useCallback57, useEffect as useEffect76, useId as useId17, useRef as useRef69, useState as useState85 } from "react";
 
 // src/BlockPreviewList.tsx
 import { useCallback as useCallback56, useRef as useRef67 } from "react";
-import { VIEWPORT_PRESETS as VIEWPORT_PRESETS8 } from "@bendyline/squisq/schemas";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS9 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks7 } from "@bendyline/squisq/doc";
-import { BlockRenderer as BlockRenderer5, MediaContext as MediaContext6 } from "@bendyline/squisq-react";
-import { Fragment as Fragment31, jsx as jsx94, jsxs as jsxs75 } from "react/jsx-runtime";
+import { BlockRenderer as BlockRenderer6, MediaContext as MediaContext7 } from "@bendyline/squisq-react";
+import { Fragment as Fragment32, jsx as jsx95, jsxs as jsxs75 } from "react/jsx-runtime";
 function BlockPreviewList({
   basePath = "/",
-  viewport = VIEWPORT_PRESETS8.landscape,
+  viewport = VIEWPORT_PRESETS9.landscape,
   mediaProvider = null,
   onNavigate
 }) {
@@ -44118,9 +44257,9 @@ function BlockPreviewList({
     [activeView, doc, goToBlockByLine, layoutMode, monacoEditor, onNavigate]
   );
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx94("div", { className: "squisq-preview-list-empty", children: /* @__PURE__ */ jsx94("p", { children: "Add some content to see block previews." }) });
+    return /* @__PURE__ */ jsx95("div", { className: "squisq-preview-list-empty", children: /* @__PURE__ */ jsx95("p", { children: "Add some content to see block previews." }) });
   }
-  return /* @__PURE__ */ jsx94(MediaContext6.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx94("ul", { ref: listRef, className: "squisq-preview-list", "aria-label": "Block previews", children: items.map((item) => /* @__PURE__ */ jsx94("li", { children: /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsx95(MediaContext7.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx95("ul", { ref: listRef, className: "squisq-preview-list", "aria-label": "Block previews", children: items.map((item) => /* @__PURE__ */ jsx95("li", { children: /* @__PURE__ */ jsxs75(
     "button",
     {
       type: "button",
@@ -44129,20 +44268,20 @@ function BlockPreviewList({
       onClick: () => handleSelect(item),
       children: [
         /* @__PURE__ */ jsxs75("span", { className: "squisq-inline-preview-card-label", children: [
-          /* @__PURE__ */ jsx94("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
-          item.headingText && /* @__PURE__ */ jsxs75(Fragment31, { children: [
-            /* @__PURE__ */ jsx94("span", { className: "squisq-inline-preview-card-sep", "aria-hidden": "true", children: "\u2014" }),
-            /* @__PURE__ */ jsx94("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
+          /* @__PURE__ */ jsx95("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
+          item.headingText && /* @__PURE__ */ jsxs75(Fragment32, { children: [
+            /* @__PURE__ */ jsx95("span", { className: "squisq-inline-preview-card-sep", "aria-hidden": "true", children: "\u2014" }),
+            /* @__PURE__ */ jsx95("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
           ] })
         ] }),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95(
           "span",
           {
             className: "squisq-inline-preview-card-svg",
             "aria-hidden": "true",
             style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-            children: /* @__PURE__ */ jsx94(
-              BlockRenderer5,
+            children: item.block && /* @__PURE__ */ jsx95(
+              BlockRenderer6,
               {
                 block: item.block,
                 buildPlayback: "all",
@@ -44159,7 +44298,7 @@ function BlockPreviewList({
 }
 
 // src/useNavigationSheetSwipe.ts
-import { useEffect as useEffect74, useRef as useRef68 } from "react";
+import { useEffect as useEffect75, useRef as useRef68 } from "react";
 var NAVIGATION_SHEET_MAX_BODY_WIDTH = 720;
 var EDGE_ZONE_PX = 24;
 var AXIS_LOCK_PX = 10;
@@ -44176,7 +44315,7 @@ function useNavigationSheetSwipe({
 }) {
   const callbacksRef = useRef68({ onDragStart, onOpen, onClose });
   callbacksRef.current = { onDragStart, onOpen, onClose };
-  useEffect74(() => {
+  useEffect75(() => {
     const sheet = sheetRef.current;
     const surface = sheet?.parentElement;
     if (!sheet || !surface) return;
@@ -44282,7 +44421,7 @@ function useNavigationSheetSwipe({
 }
 
 // src/NavigationSheet.tsx
-import { Fragment as Fragment32, jsx as jsx95, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx96, jsxs as jsxs76 } from "react/jsx-runtime";
 var PANEL_LABELS = {
   outline: "Outline",
   previews: "Block previews"
@@ -44310,7 +44449,7 @@ function NavigationSheet({
   const [lastShown, setLastShown] = useState85(shown);
   if (shown && shown !== lastShown) setLastShown(shown);
   const content = shown ?? lastShown;
-  useEffect75(() => {
+  useEffect76(() => {
     if (shown || !lastShown) return;
     const timer = setTimeout(() => setLastShown(null), CLOSE_LINGER_MS);
     return () => clearTimeout(timer);
@@ -44335,14 +44474,14 @@ function NavigationSheet({
     onClose: close
   });
   useEscapeDismissal(open, close);
-  useEffect75(() => {
+  useEffect76(() => {
     const scrim = scrimRef.current;
     if (!scrim) return;
     const stop = (event) => event.stopPropagation();
     scrim.addEventListener("pointerdown", stop);
     return () => scrim.removeEventListener("pointerdown", stop);
   }, []);
-  useEffect75(() => {
+  useEffect76(() => {
     const sheet = sheetRef.current;
     const surface = sheet?.parentElement;
     if (!open || !sheet || !surface) return;
@@ -44363,8 +44502,8 @@ function NavigationSheet({
       "data-state": open ? "open" : dragPanel ? "dragging" : "closed",
       "data-testid": "navigation-sheet",
       children: [
-        /* @__PURE__ */ jsx95("div", { ref: scrimRef, className: "squisq-navigation-sheet-scrim", onClick: close }),
-        /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx96("div", { ref: scrimRef, className: "squisq-navigation-sheet-scrim", onClick: close }),
+        /* @__PURE__ */ jsx96(
           "div",
           {
             ref: panelRef,
@@ -44372,9 +44511,9 @@ function NavigationSheet({
             role: "dialog",
             "aria-label": content ? PANEL_LABELS[content] : "Document navigation",
             tabIndex: -1,
-            children: content && /* @__PURE__ */ jsxs76(Fragment32, { children: [
+            children: content && /* @__PURE__ */ jsxs76(Fragment33, { children: [
               /* @__PURE__ */ jsxs76("div", { className: "squisq-navigation-sheet-header", children: [
-                /* @__PURE__ */ jsx95("div", { className: "squisq-navigation-sheet-tabs", role: "tablist", children: PANELS.map((option) => /* @__PURE__ */ jsx95(
+                /* @__PURE__ */ jsx96("div", { className: "squisq-navigation-sheet-tabs", role: "tablist", children: PANELS.map((option) => /* @__PURE__ */ jsx96(
                   "button",
                   {
                     type: "button",
@@ -44388,25 +44527,25 @@ function NavigationSheet({
                   },
                   option
                 )) }),
-                /* @__PURE__ */ jsx95(
+                /* @__PURE__ */ jsx96(
                   "button",
                   {
                     type: "button",
                     className: "squisq-navigation-sheet-close",
                     "aria-label": "Close",
                     onClick: close,
-                    children: /* @__PURE__ */ jsx95(Icon, { icon: "xmark" })
+                    children: /* @__PURE__ */ jsx96(Icon, { icon: "xmark" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx95(
+              /* @__PURE__ */ jsx96(
                 "div",
                 {
                   id: `${tabIdPrefix}-body`,
                   className: "squisq-navigation-sheet-body",
                   role: "tabpanel",
                   "aria-labelledby": `${tabIdPrefix}-${content}`,
-                  children: content === "outline" ? /* @__PURE__ */ jsx95(OutlinePanel, { presentation: "sheet", readOnly, onNavigate: close }) : /* @__PURE__ */ jsx95(
+                  children: content === "outline" ? /* @__PURE__ */ jsx96(OutlinePanel, { presentation: "sheet", readOnly, onNavigate: close }) : /* @__PURE__ */ jsx96(
                     BlockPreviewList,
                     {
                       basePath,
@@ -44425,7 +44564,7 @@ function NavigationSheet({
 }
 
 // src/proofing/ProofingPanel.tsx
-import { jsx as jsx96, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs77 } from "react/jsx-runtime";
 var CATEGORY_LABELS = {
   spelling: "Spelling",
   grammar: "Grammar",
@@ -44439,10 +44578,10 @@ function ProofingPanel() {
     /* @__PURE__ */ jsxs77("div", { className: "squisq-proof-panel-header", children: [
       /* @__PURE__ */ jsxs77("span", { className: "squisq-proof-panel-title", children: [
         "Proofing",
-        /* @__PURE__ */ jsx96("span", { className: "squisq-proof-panel-count", children: findings.length })
+        /* @__PURE__ */ jsx97("span", { className: "squisq-proof-panel-count", children: findings.length })
       ] }),
       /* @__PURE__ */ jsxs77("span", { className: "squisq-proof-panel-actions", children: [
-        /* @__PURE__ */ jsx96(
+        /* @__PURE__ */ jsx97(
           "button",
           {
             type: "button",
@@ -44454,7 +44593,7 @@ function ProofingPanel() {
             children: "\u2191"
           }
         ),
-        /* @__PURE__ */ jsx96(
+        /* @__PURE__ */ jsx97(
           "button",
           {
             type: "button",
@@ -44466,7 +44605,7 @@ function ProofingPanel() {
             children: "\u2193"
           }
         ),
-        /* @__PURE__ */ jsx96(
+        /* @__PURE__ */ jsx97(
           "button",
           {
             type: "button",
@@ -44479,20 +44618,20 @@ function ProofingPanel() {
         )
       ] })
     ] }),
-    state.status === "loading" && /* @__PURE__ */ jsx96("div", { className: "squisq-proof-panel-empty", children: "Loading proofing engine\u2026" }),
+    state.status === "loading" && /* @__PURE__ */ jsx97("div", { className: "squisq-proof-panel-empty", children: "Loading proofing engine\u2026" }),
     state.status === "error" && /* @__PURE__ */ jsxs77("div", { className: "squisq-proof-panel-empty", children: [
       "Proofing failed to load.",
-      /* @__PURE__ */ jsx96("button", { type: "button", className: "squisq-proof-panel-retry", onClick: state.retrySetup, children: "Retry" })
+      /* @__PURE__ */ jsx97("button", { type: "button", className: "squisq-proof-panel-retry", onClick: state.retrySetup, children: "Retry" })
     ] }),
-    state.status === "ready" && findings.length === 0 && /* @__PURE__ */ jsx96("div", { className: "squisq-proof-panel-empty", children: "No issues found." }),
-    /* @__PURE__ */ jsx96("ul", { className: "squisq-proof-panel-list", children: findings.map((finding) => /* @__PURE__ */ jsx96("li", { children: /* @__PURE__ */ jsxs77(
+    state.status === "ready" && findings.length === 0 && /* @__PURE__ */ jsx97("div", { className: "squisq-proof-panel-empty", children: "No issues found." }),
+    /* @__PURE__ */ jsx97("ul", { className: "squisq-proof-panel-list", children: findings.map((finding) => /* @__PURE__ */ jsx97("li", { children: /* @__PURE__ */ jsxs77(
       "button",
       {
         type: "button",
         className: finding.id === activeFindingId ? "squisq-proof-panel-row squisq-proof-panel-row--active" : "squisq-proof-panel-row",
         onClick: () => state.selectFinding(finding.id),
         children: [
-          /* @__PURE__ */ jsx96(
+          /* @__PURE__ */ jsx97(
             "span",
             {
               className: `squisq-proof-dot squisq-proof-dot--${finding.category}`,
@@ -44501,8 +44640,8 @@ function ProofingPanel() {
             }
           ),
           /* @__PURE__ */ jsxs77("span", { className: "squisq-proof-panel-row-body", children: [
-            /* @__PURE__ */ jsx96("span", { className: "squisq-proof-panel-excerpt", children: finding.originalText }),
-            /* @__PURE__ */ jsx96("span", { className: "squisq-proof-panel-message", children: proofMessageText(finding) })
+            /* @__PURE__ */ jsx97("span", { className: "squisq-proof-panel-excerpt", children: finding.originalText }),
+            /* @__PURE__ */ jsx97("span", { className: "squisq-proof-panel-message", children: proofMessageText(finding) })
           ] })
         ]
       }
@@ -44511,13 +44650,13 @@ function ProofingPanel() {
 }
 
 // src/imageEditor/ImageEditModal.tsx
-import { useCallback as useCallback58, useEffect as useEffect76, useMemo as useMemo59, useRef as useRef70, useState as useState86 } from "react";
+import { useCallback as useCallback58, useEffect as useEffect77, useMemo as useMemo59, useRef as useRef70, useState as useState86 } from "react";
 import { DARK_SURFACE, LIGHT_SURFACE } from "@bendyline/squisq/schemas";
 import {
   MemoryContentContainer,
   scopeContainer
 } from "@bendyline/squisq/storage";
-import { jsx as jsx97, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs78 } from "react/jsx-runtime";
 function ImageEditModal({
   relativePath,
   container,
@@ -44546,7 +44685,7 @@ function ImageEditModal({
   }, [container, relativePath]);
   const [initialSrc, setInitialSrc] = useState86(null);
   const [resolveError, setResolveError] = useState86(null);
-  useEffect76(() => {
+  useEffect77(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);
@@ -44576,7 +44715,7 @@ function ImageEditModal({
     },
     [mediaProvider, relativePath, onSaved]
   );
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx98(
     "div",
     {
       ref: modalRef,
@@ -44590,9 +44729,9 @@ function ImageEditModal({
       },
       children: /* @__PURE__ */ jsxs78("div", { ref: surfaceRef, className: "squisq-image-edit-modal__surface", children: [
         /* @__PURE__ */ jsxs78("header", { className: "squisq-image-edit-modal__header", children: [
-          /* @__PURE__ */ jsx97("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
-          /* @__PURE__ */ jsx97("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
-          /* @__PURE__ */ jsx97(
+          /* @__PURE__ */ jsx98("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
+          /* @__PURE__ */ jsx98("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
+          /* @__PURE__ */ jsx98(
             "button",
             {
               type: "button",
@@ -44604,10 +44743,10 @@ function ImageEditModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx97("div", { className: "squisq-image-edit-modal__body", children: resolveError ? /* @__PURE__ */ jsxs78("div", { className: "squisq-image-edit-modal__error", children: [
+        /* @__PURE__ */ jsx98("div", { className: "squisq-image-edit-modal__body", children: resolveError ? /* @__PURE__ */ jsxs78("div", { className: "squisq-image-edit-modal__error", children: [
           "Failed to load image: ",
           resolveError
-        ] }) : !saveFormat ? /* @__PURE__ */ jsx97("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx97("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx97(
+        ] }) : !saveFormat ? /* @__PURE__ */ jsx98("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx98("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx98(
           ImageEditor,
           {
             filesContainer: sidecar,
@@ -44668,7 +44807,7 @@ function MediaEditContextMenuItems() {
 // src/mediaEdit/MediaEditModal.tsx
 import {
   useCallback as useCallback62,
-  useEffect as useEffect79,
+  useEffect as useEffect80,
   useId as useId18,
   useMemo as useMemo61,
   useRef as useRef74,
@@ -44679,7 +44818,7 @@ import {
 } from "@bendyline/squisq-video-react/media-edit";
 
 // src/mediaEdit/MediaEditAudioSection.tsx
-import { useCallback as useCallback59, useEffect as useEffect77, useRef as useRef71, useState as useState87 } from "react";
+import { useCallback as useCallback59, useEffect as useEffect78, useRef as useRef71, useState as useState87 } from "react";
 import { MEDIA_FX_SPECS as MEDIA_FX_SPECS2, serializeMediaFx } from "@bendyline/squisq/mediaEdit";
 
 // src/mediaEdit/mediaEditDraft.ts
@@ -44778,7 +44917,7 @@ function centeredCrop(ratio, frameWidth, frameHeight) {
 }
 
 // src/mediaEdit/MediaEditAudioSection.tsx
-import { Fragment as Fragment33, jsx as jsx98, jsxs as jsxs79 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx99, jsxs as jsxs79 } from "react/jsx-runtime";
 var STAGES = [
   {
     id: "highpass",
@@ -44833,7 +44972,7 @@ var LOUDNESS_PRESETS = [
 var PREVIEW_SECONDS = 10;
 function useMediaDuration(url) {
   const [duration, setDuration] = useState87(null);
-  useEffect77(() => {
+  useEffect78(() => {
     setDuration(null);
     if (!url || typeof Audio === "undefined") return;
     const probe = new Audio();
@@ -44873,8 +45012,8 @@ function usePreviewPlayer(preview) {
     setPosition(0);
     setPlaying(null);
   }, []);
-  useEffect77(() => stop, [preview, stop]);
-  useEffect77(
+  useEffect78(() => stop, [preview, stop]);
+  useEffect78(
     () => () => {
       void ctxRef.current?.close();
       ctxRef.current = null;
@@ -44913,7 +45052,7 @@ function usePreviewPlayer(preview) {
     },
     [duration, playing, play]
   );
-  useEffect77(() => {
+  useEffect78(() => {
     if (!playing) return;
     let frame = requestAnimationFrame(function tick() {
       setPosition(currentOffset());
@@ -44924,26 +45063,26 @@ function usePreviewPlayer(preview) {
   return { playing, play, stop, seek, position, duration };
 }
 function PlayIcon() {
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx99(
     "svg",
     {
       className: "squisq-media-edit-icon",
       viewBox: "0 0 10 10",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ jsx98("path", { d: "M2 1 9 5 2 9Z" })
+      children: /* @__PURE__ */ jsx99("path", { d: "M2 1 9 5 2 9Z" })
     }
   );
 }
 function StopIcon() {
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx99(
     "svg",
     {
       className: "squisq-media-edit-icon",
       viewBox: "0 0 10 10",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ jsx98("rect", { x: "1.5", y: "1.5", width: "7", height: "7", rx: "1" })
+      children: /* @__PURE__ */ jsx99("rect", { x: "1.5", y: "1.5", width: "7", height: "7", rx: "1" })
     }
   );
 }
@@ -44968,7 +45107,7 @@ function MediaEditAudioSection({
   const [previewError, setPreviewError] = useState87(null);
   const previewAbort = useRef71(null);
   const player = usePreviewPlayer(preview);
-  useEffect77(() => () => previewAbort.current?.abort(), []);
+  useEffect78(() => () => previewAbort.current?.abort(), []);
   const runPreview = useCallback59(async () => {
     if (draftFx.ops.length === 0) return;
     previewAbort.current?.abort();
@@ -44995,11 +45134,11 @@ function MediaEditAudioSection({
   }, [draftFx.ops.length, manager, item.src, knownFx, previewFrom]);
   return /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-section", children: [
     /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-presets", role: "group", "aria-label": "Presets", children: [
-      /* @__PURE__ */ jsx98("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("voice") }), children: "Clean up voice" }),
-      /* @__PURE__ */ jsx98("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("levels") }), children: "Levels only" }),
-      /* @__PURE__ */ jsx98("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("none") }), children: "None" })
+      /* @__PURE__ */ jsx99("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("voice") }), children: "Clean up voice" }),
+      /* @__PURE__ */ jsx99("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("levels") }), children: "Levels only" }),
+      /* @__PURE__ */ jsx99("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("none") }), children: "None" })
     ] }),
-    /* @__PURE__ */ jsx98("ul", { className: "squisq-media-edit-stages", children: STAGES.map((stage) => {
+    /* @__PURE__ */ jsx99("ul", { className: "squisq-media-edit-stages", children: STAGES.map((stage) => {
       const s = draft.fx[stage.id];
       const inputId = `${idPrefix}-${stage.id}`;
       return /* @__PURE__ */ jsxs79(
@@ -45009,7 +45148,7 @@ function MediaEditAudioSection({
           "data-enabled": s.enabled ? "true" : "false",
           children: [
             /* @__PURE__ */ jsxs79("label", { className: "squisq-media-edit-stage__toggle", children: [
-              /* @__PURE__ */ jsx98(
+              /* @__PURE__ */ jsx99(
                 "input",
                 {
                   type: "checkbox",
@@ -45017,9 +45156,9 @@ function MediaEditAudioSection({
                   onChange: (e2) => setStage(stage.id, { enabled: e2.target.checked })
                 }
               ),
-              /* @__PURE__ */ jsx98("span", { className: "squisq-media-edit-stage__label", children: stage.label })
+              /* @__PURE__ */ jsx99("span", { className: "squisq-media-edit-stage__label", children: stage.label })
             ] }),
-            /* @__PURE__ */ jsx98(
+            /* @__PURE__ */ jsx99(
               "input",
               {
                 id: inputId,
@@ -45035,9 +45174,9 @@ function MediaEditAudioSection({
                 onChange: (e2) => setStage(stage.id, { value: stage.toValue(Number(e2.target.value)) })
               }
             ),
-            /* @__PURE__ */ jsx98("output", { className: "squisq-media-edit-stage__value", htmlFor: inputId, children: stage.format(s.value) }),
-            /* @__PURE__ */ jsx98("p", { className: "squisq-media-edit-stage__hint", children: stage.hint }),
-            stage.id === "loudness" && s.enabled && /* @__PURE__ */ jsx98("div", { className: "squisq-media-edit-chips", role: "group", "aria-label": "Targets", children: LOUDNESS_PRESETS.map((preset) => /* @__PURE__ */ jsxs79(
+            /* @__PURE__ */ jsx99("output", { className: "squisq-media-edit-stage__value", htmlFor: inputId, children: stage.format(s.value) }),
+            /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-stage__hint", children: stage.hint }),
+            stage.id === "loudness" && s.enabled && /* @__PURE__ */ jsx99("div", { className: "squisq-media-edit-chips", role: "group", "aria-label": "Targets", children: LOUDNESS_PRESETS.map((preset) => /* @__PURE__ */ jsxs79(
               "button",
               {
                 type: "button",
@@ -45064,7 +45203,7 @@ function MediaEditAudioSection({
           previewFrom.toFixed(0),
           " s"
         ] }),
-        /* @__PURE__ */ jsx98(
+        /* @__PURE__ */ jsx99(
           "input",
           {
             type: "range",
@@ -45076,7 +45215,7 @@ function MediaEditAudioSection({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx98("div", { className: "squisq-media-edit-preview__actions", children: /* @__PURE__ */ jsx98(
+      /* @__PURE__ */ jsx99("div", { className: "squisq-media-edit-preview__actions", children: /* @__PURE__ */ jsx99(
         "button",
         {
           type: "button",
@@ -45085,10 +45224,10 @@ function MediaEditAudioSection({
           children: previewing ? "Rendering preview\u2026" : preview ? "Update preview" : "Create preview"
         }
       ) }),
-      preview != null && player.duration > 0 && /* @__PURE__ */ jsxs79(Fragment33, { children: [
+      preview != null && player.duration > 0 && /* @__PURE__ */ jsxs79(Fragment34, { children: [
         /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-playback", "data-playing": player.playing ?? void 0, children: [
-          /* @__PURE__ */ jsx98("span", { className: "squisq-media-edit-playback__label", children: player.playing ? `${player.playing === "original" ? "Original" : "Processed"} from ${Math.round(preview.startSec)} s` : "Stopped" }),
-          /* @__PURE__ */ jsx98(
+          /* @__PURE__ */ jsx99("span", { className: "squisq-media-edit-playback__label", children: player.playing ? `${player.playing === "original" ? "Original" : "Processed"} from ${Math.round(preview.startSec)} s` : "Stopped" }),
+          /* @__PURE__ */ jsx99(
             "input",
             {
               type: "range",
@@ -45117,7 +45256,7 @@ function MediaEditAudioSection({
               disabled: previewing,
               onClick: () => player.play("original"),
               children: [
-                /* @__PURE__ */ jsx98(PlayIcon, {}),
+                /* @__PURE__ */ jsx99(PlayIcon, {}),
                 "Original"
               ]
             }
@@ -45130,26 +45269,26 @@ function MediaEditAudioSection({
               disabled: previewing,
               onClick: () => player.play("processed"),
               children: [
-                /* @__PURE__ */ jsx98(PlayIcon, {}),
+                /* @__PURE__ */ jsx99(PlayIcon, {}),
                 "Processed"
               ]
             }
           ),
           /* @__PURE__ */ jsxs79("button", { type: "button", disabled: !player.playing, onClick: player.stop, children: [
-            /* @__PURE__ */ jsx98(StopIcon, {}),
+            /* @__PURE__ */ jsx99(StopIcon, {}),
             "Stop"
           ] })
         ] })
       ] }),
-      preview != null && previewedFx !== knownFx && /* @__PURE__ */ jsx98("p", { className: "squisq-media-edit-note", children: "Settings changed \u2014 update the preview to hear them." }),
-      previewError && /* @__PURE__ */ jsx98("p", { className: "squisq-media-edit-note squisq-media-edit-note--error", role: "alert", children: previewError })
+      preview != null && previewedFx !== knownFx && /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-note", children: "Settings changed \u2014 update the preview to hear them." }),
+      previewError && /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-note squisq-media-edit-note--error", role: "alert", children: previewError })
     ] })
   ] });
 }
 
 // src/mediaEdit/MediaEditTimingSection.tsx
-import { useCallback as useCallback60, useEffect as useEffect78, useRef as useRef72, useState as useState88 } from "react";
-import { jsx as jsx99, jsxs as jsxs80 } from "react/jsx-runtime";
+import { useCallback as useCallback60, useEffect as useEffect79, useRef as useRef72, useState as useState88 } from "react";
+import { jsx as jsx100, jsxs as jsxs80 } from "react/jsx-runtime";
 var DEFAULT_MAX_PAUSE = 0.8;
 function formatDb(value) {
   if (value === 0) return "0 dB";
@@ -45166,7 +45305,7 @@ function MediaEditTimingSection({
   const [finding, setFinding] = useState88(false);
   const [error, setError] = useState88(null);
   const abortRef = useRef72(null);
-  useEffect78(() => () => abortRef.current?.abort(), []);
+  useEffect79(() => () => abortRef.current?.abort(), []);
   const findPauses = useCallback60(async () => {
     abortRef.current?.abort();
     const controller = new AbortController();
@@ -45192,8 +45331,8 @@ function MediaEditTimingSection({
   const saved = cutSeconds(draft.cuts);
   return /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-section", children: [
     /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-row", children: [
-      /* @__PURE__ */ jsx99("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-pause`, children: "Shorten pauses longer than" }),
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx100("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-pause`, children: "Shorten pauses longer than" }),
+      /* @__PURE__ */ jsx100(
         "input",
         {
           id: `${idPrefix}-pause`,
@@ -45212,8 +45351,8 @@ function MediaEditTimingSection({
       ] })
     ] }),
     /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-preview__actions", children: [
-      /* @__PURE__ */ jsx99("button", { type: "button", onClick: findPauses, disabled: finding, children: finding ? "Finding pauses\u2026" : "Find pauses" }),
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx100("button", { type: "button", onClick: findPauses, disabled: finding, children: finding ? "Finding pauses\u2026" : "Find pauses" }),
+      /* @__PURE__ */ jsx100(
         "button",
         {
           type: "button",
@@ -45223,11 +45362,11 @@ function MediaEditTimingSection({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-note", role: "status", "aria-live": "polite", children: draft.cuts.length === 0 ? "No pauses shortened." : `${draft.cuts.length} ${draft.cuts.length === 1 ? "pause" : "pauses"} shortened, saving ${formatClock6(saved)}.` }),
-    error && /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-note squisq-media-edit-note--error", role: "alert", children: error }),
+    /* @__PURE__ */ jsx100("p", { className: "squisq-media-edit-note", role: "status", "aria-live": "polite", children: draft.cuts.length === 0 ? "No pauses shortened." : `${draft.cuts.length} ${draft.cuts.length === 1 ? "pause" : "pauses"} shortened, saving ${formatClock6(saved)}.` }),
+    error && /* @__PURE__ */ jsx100("p", { className: "squisq-media-edit-note squisq-media-edit-note--error", role: "alert", children: error }),
     /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-row", children: [
-      /* @__PURE__ */ jsx99("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-gain`, children: "Volume" }),
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx100("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-gain`, children: "Volume" }),
+      /* @__PURE__ */ jsx100(
         "input",
         {
           id: `${idPrefix}-gain`,
@@ -45240,11 +45379,11 @@ function MediaEditTimingSection({
           onChange: (e2) => onChange({ ...draft, gain: Number(e2.target.value) })
         }
       ),
-      /* @__PURE__ */ jsx99("output", { htmlFor: `${idPrefix}-gain`, children: formatDb(draft.gain) })
+      /* @__PURE__ */ jsx100("output", { htmlFor: `${idPrefix}-gain`, children: formatDb(draft.gain) })
     ] }),
     ["fadeIn", "fadeOut"].map((key) => /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-row", children: [
-      /* @__PURE__ */ jsx99("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-${key}`, children: key === "fadeIn" ? "Fade in" : "Fade out" }),
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx100("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-${key}`, children: key === "fadeIn" ? "Fade in" : "Fade out" }),
+      /* @__PURE__ */ jsx100(
         "input",
         {
           id: `${idPrefix}-${key}`,
@@ -45257,7 +45396,7 @@ function MediaEditTimingSection({
           onChange: (e2) => onChange({ ...draft, [key]: Number(e2.target.value) })
         }
       ),
-      /* @__PURE__ */ jsx99("output", { htmlFor: `${idPrefix}-${key}`, children: draft[key] === 0 ? "Off" : `${draft[key].toFixed(1)} s` })
+      /* @__PURE__ */ jsx100("output", { htmlFor: `${idPrefix}-${key}`, children: draft[key] === 0 ? "Off" : `${draft[key].toFixed(1)} s` })
     ] }, key))
   ] });
 }
@@ -45269,7 +45408,7 @@ import {
   useState as useState89
 } from "react";
 import { normalizeMediaCrop } from "@bendyline/squisq/mediaEdit";
-import { jsx as jsx100, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs81 } from "react/jsx-runtime";
 var FULL = { x: 0, y: 0, w: 1, h: 1 };
 var MIN_EDGE = 0.05;
 var NUDGE = 0.01;
@@ -45351,7 +45490,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
   const pct = (n) => `${(n * 100).toFixed(2)}%`;
   return /* @__PURE__ */ jsxs81("div", { className: "squisq-media-edit-section", children: [
     /* @__PURE__ */ jsxs81("div", { className: "squisq-media-edit-chips", role: "group", "aria-label": "Crop aspect", children: [
-      ASPECTS.map((option) => /* @__PURE__ */ jsx100(
+      ASPECTS.map((option) => /* @__PURE__ */ jsx101(
         "button",
         {
           type: "button",
@@ -45366,7 +45505,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
         },
         option.label
       )),
-      /* @__PURE__ */ jsx100(
+      /* @__PURE__ */ jsx101(
         "button",
         {
           type: "button",
@@ -45386,7 +45525,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
         className: "squisq-media-edit-crop",
         style: frame ? { aspectRatio: `${frame.w} / ${frame.h}` } : void 0,
         children: [
-          src && /* @__PURE__ */ jsx100(
+          src && /* @__PURE__ */ jsx101(
             "video",
             {
               src,
@@ -45402,7 +45541,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx100(
+          /* @__PURE__ */ jsx101(
             "div",
             {
               className: "squisq-media-edit-crop__rect",
@@ -45413,7 +45552,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
               style: { left: pct(crop.x), top: pct(crop.y), width: pct(crop.w), height: pct(crop.h) },
               onPointerDown: startDrag("move"),
               onKeyDown,
-              children: ["nw", "ne", "sw", "se"].map((handle) => /* @__PURE__ */ jsx100(
+              children: ["nw", "ne", "sw", "se"].map((handle) => /* @__PURE__ */ jsx101(
                 "span",
                 {
                   className: `squisq-media-edit-crop__handle squisq-media-edit-crop__handle--${handle}`,
@@ -45426,12 +45565,12 @@ function MediaEditFrameSection({ item, draft, onChange }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx100("p", { className: "squisq-media-edit-note", children: draft.crop ? "Only the framed area is shown and exported." : "Drag the corners or pick an aspect to crop." })
+    /* @__PURE__ */ jsx101("p", { className: "squisq-media-edit-note", children: draft.crop ? "Only the framed area is shown and exported." : "Drag the corners or pick an aspect to crop." })
   ] });
 }
 
 // src/mediaEdit/MediaEditModal.tsx
-import { Fragment as Fragment34, jsx as jsx101, jsxs as jsxs82 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx102, jsxs as jsxs82 } from "react/jsx-runtime";
 var TABS = [
   { id: "audio", label: "Audio cleanup" },
   { id: "timing", label: "Timing" },
@@ -45466,20 +45605,20 @@ function RenderStatusText({
 }) {
   switch (status.state) {
     case "ready":
-      return /* @__PURE__ */ jsx101(Fragment34, { children: "Processed audio is in use." });
+      return /* @__PURE__ */ jsx102(Fragment35, { children: "Processed audio is in use." });
     case "queued":
-      return /* @__PURE__ */ jsx101(Fragment34, { children: "Waiting to process\u2026" });
+      return /* @__PURE__ */ jsx102(Fragment35, { children: "Waiting to process\u2026" });
     case "rendering":
-      return /* @__PURE__ */ jsxs82(Fragment34, { children: [
+      return /* @__PURE__ */ jsxs82(Fragment35, { children: [
         "Processing\u2026 ",
         percent(status)
       ] });
     case "failed":
-      return /* @__PURE__ */ jsxs82(Fragment34, { children: [
+      return /* @__PURE__ */ jsxs82(Fragment35, { children: [
         "Processing failed: ",
         status.error,
         " ",
-        /* @__PURE__ */ jsx101("button", { type: "button", onClick: onRetry, children: "Retry" })
+        /* @__PURE__ */ jsx102("button", { type: "button", onClick: onRetry, children: "Retry" })
       ] });
   }
 }
@@ -45495,7 +45634,7 @@ function MediaEditModal({ target, onClose }) {
   const [draft, setDraft] = useState90(() => draftFromEdits(item?.edits));
   const seedKey = item ? `${item.sourceLine}|${editsSignature(item.edits)}` : null;
   const seededRef = useRef74(null);
-  useEffect79(() => {
+  useEffect80(() => {
     if (seedKey === null || seededRef.current === seedKey) return;
     seededRef.current = seedKey;
     setDraft(draftFromEdits(item?.edits));
@@ -45530,7 +45669,7 @@ function MediaEditModal({ target, onClose }) {
   const tabbed = item != null && mediaEditRenders != null;
   const tabId = (tab) => `${titleId}-tab-${tab}`;
   const panelId = (tab) => `${titleId}-panel-${tab}`;
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx102(
     "div",
     {
       ref: modalRef,
@@ -45549,10 +45688,10 @@ function MediaEditModal({ target, onClose }) {
           "aria-labelledby": titleId,
           children: [
             /* @__PURE__ */ jsxs82("header", { className: "squisq-media-edit-modal__header", children: [
-              /* @__PURE__ */ jsx101("span", { id: titleId, className: "squisq-media-edit-modal__title", children: title }),
-              /* @__PURE__ */ jsx101("span", { className: "squisq-media-edit-modal__path", children: target.src }),
-              renderStatus && /* @__PURE__ */ jsx101(RenderStatusBadge, { status: renderStatus }),
-              /* @__PURE__ */ jsx101(
+              /* @__PURE__ */ jsx102("span", { id: titleId, className: "squisq-media-edit-modal__title", children: title }),
+              /* @__PURE__ */ jsx102("span", { className: "squisq-media-edit-modal__path", children: target.src }),
+              renderStatus && /* @__PURE__ */ jsx102(RenderStatusBadge, { status: renderStatus }),
+              /* @__PURE__ */ jsx102(
                 "button",
                 {
                   type: "button",
@@ -45563,8 +45702,8 @@ function MediaEditModal({ target, onClose }) {
                 }
               )
             ] }),
-            !item ? /* @__PURE__ */ jsx101("p", { className: "squisq-media-edit-modal__empty", children: "This clip is no longer in the document." }) : !mediaEditRenders ? /* @__PURE__ */ jsx101("p", { className: "squisq-media-edit-modal__empty", children: "Media editing needs a media folder for this document." }) : /* @__PURE__ */ jsxs82(Fragment34, { children: [
-              /* @__PURE__ */ jsx101("div", { className: "squisq-media-edit-tabs", role: "tablist", "aria-label": "Edit sections", children: tabs.map((tab, index2) => {
+            !item ? /* @__PURE__ */ jsx102("p", { className: "squisq-media-edit-modal__empty", children: "This clip is no longer in the document." }) : !mediaEditRenders ? /* @__PURE__ */ jsx102("p", { className: "squisq-media-edit-modal__empty", children: "Media editing needs a media folder for this document." }) : /* @__PURE__ */ jsxs82(Fragment35, { children: [
+              /* @__PURE__ */ jsx102("div", { className: "squisq-media-edit-tabs", role: "tablist", "aria-label": "Edit sections", children: tabs.map((tab, index2) => {
                 const selected = tab.id === activeTab;
                 const edited = tabHasEdits(tab.id, draft);
                 return /* @__PURE__ */ jsxs82(
@@ -45586,21 +45725,21 @@ function MediaEditModal({ target, onClose }) {
                     onKeyDown: (e2) => onTabKeyDown(e2, index2),
                     children: [
                       tab.label,
-                      edited && /* @__PURE__ */ jsx101("span", { className: "squisq-sr-only", children: " (edited)" })
+                      edited && /* @__PURE__ */ jsx102("span", { className: "squisq-sr-only", children: " (edited)" })
                     ]
                   },
                   tab.id
                 );
               }) }),
               /* @__PURE__ */ jsxs82("div", { className: "squisq-media-edit-modal__body", children: [
-                /* @__PURE__ */ jsx101(
+                /* @__PURE__ */ jsx102(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("audio"),
                     "aria-labelledby": tabId("audio"),
                     hidden: activeTab !== "audio",
-                    children: /* @__PURE__ */ jsx101(
+                    children: /* @__PURE__ */ jsx102(
                       MediaEditAudioSection,
                       {
                         item,
@@ -45612,14 +45751,14 @@ function MediaEditModal({ target, onClose }) {
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx101(
+                /* @__PURE__ */ jsx102(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("timing"),
                     "aria-labelledby": tabId("timing"),
                     hidden: activeTab !== "timing",
-                    children: /* @__PURE__ */ jsx101(
+                    children: /* @__PURE__ */ jsx102(
                       MediaEditTimingSection,
                       {
                         item,
@@ -45631,14 +45770,14 @@ function MediaEditModal({ target, onClose }) {
                     )
                   }
                 ),
-                item.kind === "video" && /* @__PURE__ */ jsx101(
+                item.kind === "video" && /* @__PURE__ */ jsx102(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("frame"),
                     "aria-labelledby": tabId("frame"),
                     hidden: activeTab !== "frame",
-                    children: /* @__PURE__ */ jsx101(MediaEditFrameSection, { item, draft, onChange: setDraft })
+                    children: /* @__PURE__ */ jsx102(MediaEditFrameSection, { item, draft, onChange: setDraft })
                   }
                 ),
                 companions.length > 0 && /* @__PURE__ */ jsxs82("p", { className: "squisq-media-edit-note", children: [
@@ -45652,15 +45791,15 @@ function MediaEditModal({ target, onClose }) {
               ] })
             ] }),
             /* @__PURE__ */ jsxs82("footer", { className: "squisq-media-edit-modal__footer", children: [
-              /* @__PURE__ */ jsx101("p", { className: "squisq-media-edit-status", role: "status", "data-state": renderStatus?.state, children: renderStatus && item && mediaEditRenders && /* @__PURE__ */ jsx101(
+              /* @__PURE__ */ jsx102("p", { className: "squisq-media-edit-status", role: "status", "data-state": renderStatus?.state, children: renderStatus && item && mediaEditRenders && /* @__PURE__ */ jsx102(
                 RenderStatusText,
                 {
                   status: renderStatus,
                   onRetry: () => mediaEditRenders.retry(item.clip)
                 }
               ) }),
-              /* @__PURE__ */ jsx101("button", { type: "button", onClick: onClose, children: "Cancel" }),
-              /* @__PURE__ */ jsx101(
+              /* @__PURE__ */ jsx102("button", { type: "button", onClick: onClose, children: "Cancel" }),
+              /* @__PURE__ */ jsx102(
                 "button",
                 {
                   type: "button",
@@ -45920,12 +46059,12 @@ import {
   MemoryContentContainer as MemoryContentContainer2,
   createMediaProviderFromContainer
 } from "@bendyline/squisq/storage";
-import { MediaContext as MediaContext7, useMediaClipDurations } from "@bendyline/squisq-react";
+import { MediaContext as MediaContext8, useMediaClipDurations } from "@bendyline/squisq-react";
 import {
   createMediaEditRenderManager,
   useProcessedAudio as useProcessedAudio4
 } from "@bendyline/squisq-video-react/media-edit";
-import { Fragment as Fragment35, jsx as jsx102, jsxs as jsxs83 } from "react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx103, jsxs as jsxs83 } from "react/jsx-runtime";
 function EditorShell({
   ariaLabel,
   initialMarkdown = "",
@@ -46031,11 +46170,11 @@ function EditorShell({
     () => mediaEditRenders === void 0 && effectiveMediaProvider ? createMediaEditRenderManager({ mediaProvider: effectiveMediaProvider }) : null,
     [mediaEditRenders, effectiveMediaProvider]
   );
-  useEffect80(() => () => ownedMediaEditRenders?.dispose(), [ownedMediaEditRenders]);
+  useEffect81(() => () => ownedMediaEditRenders?.dispose(), [ownedMediaEditRenders]);
   const effectiveMediaEditRenders = mediaEditRenders === void 0 ? ownedMediaEditRenders : mediaEditRenders;
   const filesToggleEnabled = showFilesToggle ?? effectiveMediaProvider !== void 0;
   const effectiveInitialView = hostMode === "chat" || !showPlayTab && initialView === "preview" ? "wysiwyg" : initialView;
-  return /* @__PURE__ */ jsx102(MediaContext7.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx103(MediaContext8.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx103(
     EditorProvider,
     {
       initialMarkdown,
@@ -46081,7 +46220,7 @@ function EditorShell({
       themeInheritance,
       viewPreferences,
       onViewPreferencesChange,
-      children: /* @__PURE__ */ jsx102(ProofingRoot, { children: /* @__PURE__ */ jsx102(ReviewRoot, { providers: reviewProviders, children: /* @__PURE__ */ jsx102(PageTemplateContext.Provider, { value: pageTemplates, children: /* @__PURE__ */ jsx102(
+      children: /* @__PURE__ */ jsx103(ProofingRoot, { children: /* @__PURE__ */ jsx103(ReviewRoot, { providers: reviewProviders, children: /* @__PURE__ */ jsx103(PageTemplateContext.Provider, { value: pageTemplates, children: /* @__PURE__ */ jsx103(
         EditorShellInner,
         {
           ariaLabel: ariaLabel ?? (hostMode === "chat" ? "Message" : fileName ? `Edit ${fileName}` : "Document editor"),
@@ -46147,11 +46286,11 @@ function UseModeToolbarControls({
   summarizationDesigner
 }) {
   const printMode = usePrintMode();
-  if (printMode.active) return /* @__PURE__ */ jsx102(PrintPreviewToolbar, {});
-  return /* @__PURE__ */ jsxs83(Fragment35, { children: [
-    /* @__PURE__ */ jsx102(PreviewToolbarControls, { summarizationDesigner }),
-    /* @__PURE__ */ jsx102(PresentationModeControl, {}),
-    allowPrint && /* @__PURE__ */ jsx102(PrintModeControl, {})
+  if (printMode.active) return /* @__PURE__ */ jsx103(PrintPreviewToolbar, {});
+  return /* @__PURE__ */ jsxs83(Fragment36, { children: [
+    /* @__PURE__ */ jsx103(PreviewToolbarControls, { summarizationDesigner }),
+    /* @__PURE__ */ jsx103(PresentationModeControl, {}),
+    allowPrint && /* @__PURE__ */ jsx103(PrintModeControl, {})
   ] });
 }
 function UseModeProviders({
@@ -46160,13 +46299,13 @@ function UseModeProviders({
   allowPresentationWindow,
   allowPresentationFullscreen
 }) {
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx103(
     PresentationModeProvider,
     {
       rootRef,
       allowWindow: allowPresentationWindow,
       allowFullscreen: allowPresentationFullscreen,
-      children: /* @__PURE__ */ jsx102(PrintModeProvider, { rootRef, children })
+      children: /* @__PURE__ */ jsx103(PrintModeProvider, { rootRef, children })
     }
   );
 }
@@ -46266,7 +46405,7 @@ function EditorShellInner({
   const processedAudio = useProcessedAudio4(mediaEditRenders);
   const { docThemes, onDocThemesChange } = useDocCustomThemes();
   const lastEditingView = useRef75(activeView === "raw" ? "raw" : "wysiwyg");
-  useEffect80(() => {
+  useEffect81(() => {
     if (activeView !== "preview") lastEditingView.current = activeView;
   }, [activeView]);
   const editingView = activeView === "preview" ? lastEditingView.current : activeView;
@@ -46332,13 +46471,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect80(() => {
+  useEffect81(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect80(() => {
+  useEffect81(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect80(() => {
+  useEffect81(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -46362,7 +46501,7 @@ function EditorShellInner({
       cancelled = true;
     };
   }, [mediaProvider, mediaListRefreshKey]);
-  useEffect80(() => {
+  useEffect81(() => {
     if (showFilesWhenNotEmpty && mediaCount > 0) setShowFiles(true);
   }, [mediaCount, showFilesWhenNotEmpty]);
   const handleToggleFiles = useCallback63(() => {
@@ -46382,7 +46521,7 @@ function EditorShellInner({
     [insertionTarget]
   );
   const docBasenameRef = useRef75("document");
-  useEffect80(() => {
+  useEffect81(() => {
     let cancelled = false;
     docBasenameRef.current = "document";
     void resolveDocBasename(workspaceContainer).then((base) => {
@@ -46465,7 +46604,7 @@ function EditorShellInner({
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect80(() => {
+  useEffect81(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback63((e2) => {
@@ -46560,7 +46699,7 @@ function EditorShellInner({
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsx102(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx102(
+        /* @__PURE__ */ jsx103(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx103(
           PreviewSettingsProvider,
           {
             doc,
@@ -46577,16 +46716,16 @@ function EditorShellInner({
                 children: [
                   isImageMode ? (toolbarSlotLeft || toolbarSlotRight) && /* @__PURE__ */ jsxs83("div", { className: "squisq-editor-header squisq-editor-header--image", children: [
                     toolbarSlotLeft,
-                    /* @__PURE__ */ jsx102("div", { style: { flex: 1 } }),
+                    /* @__PURE__ */ jsx103("div", { style: { flex: 1 } }),
                     toolbarSlotRight
-                  ] }) : /* @__PURE__ */ jsx102("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx102(
+                  ] }) : /* @__PURE__ */ jsx103("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx103(
                     Toolbar,
                     {
                       showFiles,
                       fileCount: mediaCount,
                       onToggleFiles: !isCodeMode && filesToggleEnabled ? handleToggleFiles : void 0,
                       slotLeft: toolbarSlotLeft,
-                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx102(
+                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx103(
                         UseModeToolbarControls,
                         {
                           allowPrint,
@@ -46628,7 +46767,7 @@ function EditorShellInner({
                               position: "relative"
                             },
                             children: [
-                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx102(
+                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx103(
                                 ImageEditor,
                                 {
                                   filesContainer: imageEditorContainer,
@@ -46638,7 +46777,7 @@ function EditorShellInner({
                                   onExport: onImageExport,
                                   surface: colorScheme === "dark" ? DARK_SURFACE2 : LIGHT_SURFACE2
                                 }
-                              ) : /* @__PURE__ */ jsx102(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
+                              ) : /* @__PURE__ */ jsx103(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
                               !isImageMode && editingView === "raw" && /* @__PURE__ */ jsxs83(
                                 "div",
                                 {
@@ -46646,8 +46785,8 @@ function EditorShellInner({
                                   hidden: isPreview,
                                   style: isPreview ? { display: "none" } : void 0,
                                   children: [
-                                    isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx102(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                                    /* @__PURE__ */ jsx102(
+                                    isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx103(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                    /* @__PURE__ */ jsx103(
                                       BlockCardView,
                                       {
                                         active: isCardMode,
@@ -46656,7 +46795,7 @@ function EditorShellInner({
                                         onPrev: prevBlock,
                                         onNext: nextBlock,
                                         onAdd: addBlock,
-                                        children: /* @__PURE__ */ jsx102("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx102(
+                                        children: /* @__PURE__ */ jsx103("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx103(
                                           RawEditor,
                                           {
                                             ariaLabel: `${ariaLabel} \u2014 source`,
@@ -46668,9 +46807,9 @@ function EditorShellInner({
                                       },
                                       "raw-frame"
                                     ),
-                                    isCodeMode && codeContext && /* @__PURE__ */ jsx102(CodeContextZones, { options: codeContext }, "code-context"),
-                                    isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx102(BlockPreviewPanel, { basePath }, "block-preview"),
-                                    isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx102(
+                                    isCodeMode && codeContext && /* @__PURE__ */ jsx103(CodeContextZones, { options: codeContext }, "code-context"),
+                                    isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx103(BlockPreviewPanel, { basePath }, "block-preview"),
+                                    isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx103(
                                       InlinePreviewGutter,
                                       {
                                         width: inlinePreviewWidth,
@@ -46679,7 +46818,7 @@ function EditorShellInner({
                                       },
                                       "inline"
                                     ),
-                                    isMarkdownMode && /* @__PURE__ */ jsx102(
+                                    isMarkdownMode && /* @__PURE__ */ jsx103(
                                       NavigationSheet,
                                       {
                                         panel: navigationSheetPanel,
@@ -46701,8 +46840,8 @@ function EditorShellInner({
                                   hidden: isPreview,
                                   style: isPreview ? { display: "none" } : void 0,
                                   children: [
-                                    outlineVisible && /* @__PURE__ */ jsx102(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                                    /* @__PURE__ */ jsx102(
+                                    outlineVisible && /* @__PURE__ */ jsx103(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                    /* @__PURE__ */ jsx103(
                                       BlockCardView,
                                       {
                                         active: isCardMode,
@@ -46711,7 +46850,7 @@ function EditorShellInner({
                                         onPrev: prevBlock,
                                         onNext: nextBlock,
                                         onAdd: addBlock,
-                                        children: /* @__PURE__ */ jsx102(
+                                        children: /* @__PURE__ */ jsx103(
                                           WysiwygEditor,
                                           {
                                             ariaLabel,
@@ -46729,8 +46868,8 @@ function EditorShellInner({
                                       },
                                       "wysiwyg-frame"
                                     ),
-                                    isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx102(BlockPreviewPanel, { basePath }, "block-preview"),
-                                    !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx102(
+                                    isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx103(BlockPreviewPanel, { basePath }, "block-preview"),
+                                    !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx103(
                                       InlinePreviewGutter,
                                       {
                                         width: inlinePreviewWidth,
@@ -46739,7 +46878,7 @@ function EditorShellInner({
                                       },
                                       "inline"
                                     ),
-                                    /* @__PURE__ */ jsx102(
+                                    /* @__PURE__ */ jsx103(
                                       NavigationSheet,
                                       {
                                         panel: navigationSheetPanel,
@@ -46754,7 +46893,7 @@ function EditorShellInner({
                                 },
                                 "wysiwyg-shell"
                               ),
-                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx102(
+                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx103(
                                 PreviewPanel,
                                 {
                                   basePath,
@@ -46767,7 +46906,7 @@ function EditorShellInner({
                             ]
                           }
                         ),
-                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx102(
+                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx103(
                           TimelineVideoPanel,
                           {
                             schedule: timelineVideoSchedule,
@@ -46777,7 +46916,7 @@ function EditorShellInner({
                             onClose: () => setTimelineVideoVisible(false)
                           }
                         ),
-                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx102(
+                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx103(
                           TimelineCompositionPanel,
                           {
                             doc,
@@ -46787,7 +46926,7 @@ function EditorShellInner({
                             onClose: () => setTimelineCompositionVisible(false)
                           }
                         ),
-                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx102(
+                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx103(
                           MediaBin,
                           {
                             mediaProvider,
@@ -46803,11 +46942,11 @@ function EditorShellInner({
                             highlightPath: filesFocusPath
                           }
                         ),
-                        isMarkdownMode && /* @__PURE__ */ jsx102(ProofingPanel, {}),
-                        isMarkdownMode && /* @__PURE__ */ jsx102(ReviewPanel, {}),
+                        isMarkdownMode && /* @__PURE__ */ jsx103(ProofingPanel, {}),
+                        isMarkdownMode && /* @__PURE__ */ jsx103(ReviewPanel, {}),
                         isMarkdownMode && sidePanelSlot,
-                        isMarkdownMode && /* @__PURE__ */ jsx102(ThemeDesignerDock, {}),
-                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx102(
+                        isMarkdownMode && /* @__PURE__ */ jsx103(ThemeDesignerDock, {}),
+                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx103(
                           DropZoneOverlay,
                           {
                             dragContentType,
@@ -46818,7 +46957,7 @@ function EditorShellInner({
                       ]
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx102(
+                  isTimelineMode && /* @__PURE__ */ jsx103(
                     TimelineToolbar,
                     {
                       literalVideoVisible: timelineVideoVisible,
@@ -46829,7 +46968,7 @@ function EditorShellInner({
                       onToggleComposition: () => setTimelineCompositionVisible((visible) => !visible)
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx102(
+                  isTimelineMode && /* @__PURE__ */ jsx103(
                     TimelineTrack,
                     {
                       doc: timelineDoc,
@@ -46838,8 +46977,8 @@ function EditorShellInner({
                       basePath
                     }
                   ),
-                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx102(StatusBar, { slotRight: statusBarSlotRight }),
-                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx102(
+                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx103(StatusBar, { slotRight: statusBarSlotRight }),
+                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx103(
                     RecorderEntry,
                     {
                       open: mediaBinRecorderOpen,
@@ -46852,8 +46991,8 @@ function EditorShellInner({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx102(TooltipLayer, {}),
-        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx102(
+        /* @__PURE__ */ jsx103(TooltipLayer, {}),
+        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx103(
           ImageEditModal,
           {
             relativePath: imageEditTarget,
@@ -46869,12 +47008,12 @@ function EditorShellInner({
             shellTheme: colorScheme
           }
         ),
-        mediaEditTarget !== null && /* @__PURE__ */ jsx102(MediaEditModal, { target: mediaEditTarget, onClose: closeMediaEdit })
+        mediaEditTarget !== null && /* @__PURE__ */ jsx103(MediaEditModal, { target: mediaEditTarget, onClose: closeMediaEdit })
       ]
     }
   );
   return /* @__PURE__ */ jsxs83(EditorContextMenuProvider, { rootRef: shellRef, readOnly, children: [
-    /* @__PURE__ */ jsx102(MediaEditContextMenuItems, {}),
+    /* @__PURE__ */ jsx103(MediaEditContextMenuItems, {}),
     shell
   ] });
 }