@bendyline/squisq-editor-react 2.13.16 → 2.13.17

package/dist/{chunk-54MN2HG7.js → chunk-N3EX452F.js}

@@ -19,7 +19,7 @@ import {
   useDictationState,
   useEditorContext,
   useEditorContextOptional
-} from "./chunk-UQUYPT5P.js";
+} from "./chunk-EJNCUVPU.js";
 import {
   monacoLanguageRequestKey,
   monacoLanguagesForDocument,
@@ -30619,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";
@@ -30719,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({
@@ -31771,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
@@ -31870,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;
@@ -32115,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);
@@ -32137,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) {
@@ -34553,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";
@@ -36269,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";
@@ -36749,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);
@@ -36898,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);
       }
@@ -37488,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";
 
@@ -37803,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;
@@ -37814,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;
@@ -37847,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());
@@ -37890,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
@@ -38512,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;
@@ -38537,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;
@@ -38624,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
@@ -38748,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,
@@ -38768,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 = () => {
@@ -38837,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));
@@ -38867,7 +38983,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -38906,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(
@@ -39333,7 +39449,7 @@ 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,
@@ -39370,7 +39486,7 @@ var BlockThumbnail = memo2(function BlockThumbnail2({
 });
 
 // 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));
@@ -39399,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) => {
@@ -39500,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 jsx79, 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,
@@ -39531,7 +39647,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect63(() => {
+  useEffect64(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -39577,7 +39693,7 @@ function TimelineItemMenu({
               onClearTiming: onBlockClearTiming,
               onTransition: onBlockTransition
             }
-          ) : /* @__PURE__ */ jsxs63(Fragment27, { children: [
+          ) : /* @__PURE__ */ jsxs63(Fragment28, { children: [
             /* @__PURE__ */ jsx79(VideoMenu, { target, onPatch: onVideoPatch }),
             onEditMedia && /* @__PURE__ */ jsx79(
               "button",
@@ -39625,7 +39741,7 @@ 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."
@@ -39643,7 +39759,7 @@ 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__ */ jsx79(
           "input",
@@ -39745,7 +39861,7 @@ function VideoMenu({
         }
       )
     ] }),
-    placed && /* @__PURE__ */ jsxs63(Fragment27, { children: [
+    placed && /* @__PURE__ */ jsxs63(Fragment28, { children: [
       /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-check", children: [
         /* @__PURE__ */ jsx79(
           "input",
@@ -39763,7 +39879,7 @@ function VideoMenu({
         ),
         /* @__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__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "PIP size" }),
           /* @__PURE__ */ jsxs63(
@@ -40019,7 +40135,7 @@ function TimelineTrack({
     play();
   }, [play]);
   const [scrubbing, setScrubbing] = useState75(false);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -40057,7 +40173,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef58(null);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -40068,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;
@@ -40117,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);
@@ -40131,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;
@@ -40162,7 +40278,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect64(() => {
+  useEffect65(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback49(
@@ -41024,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,
@@ -41134,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(
@@ -41153,7 +41269,7 @@ function PlainHtmlPreview({
     };
   }, [parsedDoc, wikiLinks]);
   const [resolvedImages, setResolvedImages] = useState76(null);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -41190,7 +41306,7 @@ function PlainHtmlPreview({
   }, [resolvedImages, images]);
   const iconsCss = useMemo52(() => collectInlineFontAwesomeCss(), []);
   const [preparation, setPreparation] = useState76(null);
-  useEffect65(() => {
+  useEffect66(() => {
     let cancelled = false;
     loadPreparation().then(
       (loaded) => {
@@ -41217,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 = () => {
@@ -41245,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) => {
@@ -41286,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]);
@@ -41382,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") {
@@ -41471,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,
@@ -41616,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,
@@ -41883,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;
@@ -41900,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;
@@ -41909,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;
@@ -41920,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;
@@ -41932,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);
@@ -41967,7 +42083,7 @@ function PresentationModeProvider({
       window.removeEventListener("resize", updatePosition);
     };
   }, [activeTarget, rootRef]);
-  useEffect66(
+  useEffect67(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -42096,7 +42212,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -42241,7 +42357,7 @@ 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
@@ -42311,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";
@@ -42320,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;
@@ -42414,7 +42530,7 @@ function PrintPreviewToolbar() {
 }
 
 // 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 BlockRenderer5,
   FlashcardFaceView,
@@ -42471,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;
@@ -42610,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";
@@ -42654,7 +42770,7 @@ function collectSlideshowDataSources(doc) {
 }
 
 // src/slideshow/SlideshowDataGrid.tsx
-import { Fragment as Fragment28, jsx as jsx88 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx88 } from "react/jsx-runtime";
 var EMPTY_CONTEXT = {
   container: null,
   mediaRevision: 0,
@@ -42717,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);
@@ -42726,7 +42842,7 @@ function SlideshowDataGridRenderer({
       active = false;
     };
   }, []);
-  useEffect69(() => {
+  useEffect70(() => {
     if (!container || !source || !gridModule) {
       setRemote({ key: activeSourceKey, status: "idle" });
       return;
@@ -42777,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__ */ jsx88(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);
@@ -42920,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;
@@ -43201,12 +43317,12 @@ 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 { 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,
@@ -43222,7 +43338,7 @@ 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__ */ jsx90("div", { className: "squisq-media-preview-message", children: "This file can\u2019t be previewed." });
@@ -43292,7 +43408,7 @@ function MediaPreviewDialog({
 }
 
 // src/MediaBin.tsx
-import { Fragment as Fragment29, jsx as jsx91, 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`;
@@ -43366,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) {
@@ -43400,7 +43516,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect72(() => {
+  useEffect73(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -43421,7 +43537,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect72(() => {
+  useEffect73(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -43578,7 +43694,7 @@ function MediaBin({
   const openContextMenu = useCallback55((entry, x, y) => {
     setContextMenu({ entry, x, y });
   }, []);
-  useEffect72(() => {
+  useEffect73(() => {
     setPreview(null);
   }, [mediaProvider]);
   const openPreview = useCallback55(
@@ -43623,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",
       {
@@ -43818,7 +43934,7 @@ ${formatSize(entry.size)}`,
 
 // src/DropZoneOverlay.tsx
 import { useState as useState83 } from "react";
-import { Fragment as Fragment30, jsx as jsx92, 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,
@@ -43839,7 +43955,7 @@ function DropZoneOverlay({
         variant: "media"
       }
     ),
-    showText && /* @__PURE__ */ jsxs74(Fragment30, { children: [
+    showText && /* @__PURE__ */ jsxs74(Fragment31, { children: [
       /* @__PURE__ */ jsx92(
         DropZone,
         {
@@ -43918,7 +44034,7 @@ function DropZone({
 }
 
 // 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
@@ -43952,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);
@@ -44054,7 +44170,7 @@ 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";
@@ -44098,14 +44214,14 @@ 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_PRESETS9 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks7 } from "@bendyline/squisq/doc";
 import { BlockRenderer as BlockRenderer6, MediaContext as MediaContext7 } from "@bendyline/squisq-react";
-import { Fragment as Fragment31, jsx as jsx95, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx95, jsxs as jsxs75 } from "react/jsx-runtime";
 function BlockPreviewList({
   basePath = "/",
   viewport = VIEWPORT_PRESETS9.landscape,
@@ -44153,7 +44269,7 @@ function BlockPreviewList({
       children: [
         /* @__PURE__ */ jsxs75("span", { className: "squisq-inline-preview-card-label", children: [
           /* @__PURE__ */ jsx95("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
-          item.headingText && /* @__PURE__ */ jsxs75(Fragment31, { children: [
+          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 })
           ] })
@@ -44164,7 +44280,7 @@ function BlockPreviewList({
             className: "squisq-inline-preview-card-svg",
             "aria-hidden": "true",
             style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-            children: /* @__PURE__ */ jsx95(
+            children: item.block && /* @__PURE__ */ jsx95(
               BlockRenderer6,
               {
                 block: item.block,
@@ -44182,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;
@@ -44199,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;
@@ -44305,7 +44421,7 @@ function useNavigationSheetSwipe({
 }
 
 // src/NavigationSheet.tsx
-import { Fragment as Fragment32, jsx as jsx96, 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"
@@ -44333,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);
@@ -44358,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;
@@ -44395,7 +44511,7 @@ 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__ */ jsx96("div", { className: "squisq-navigation-sheet-tabs", role: "tablist", children: PANELS.map((option) => /* @__PURE__ */ jsx96(
                   "button",
@@ -44534,7 +44650,7 @@ 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,
@@ -44569,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);
@@ -44691,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,
@@ -44702,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
@@ -44801,7 +44917,7 @@ function centeredCrop(ratio, frameWidth, frameHeight) {
 }
 
 // src/mediaEdit/MediaEditAudioSection.tsx
-import { Fragment as Fragment33, jsx as jsx99, 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",
@@ -44856,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();
@@ -44896,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;
@@ -44936,7 +45052,7 @@ function usePreviewPlayer(preview) {
     },
     [duration, playing, play]
   );
-  useEffect77(() => {
+  useEffect78(() => {
     if (!playing) return;
     let frame = requestAnimationFrame(function tick() {
       setPosition(currentOffset());
@@ -44991,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();
@@ -45108,7 +45224,7 @@ 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__ */ 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(
@@ -45171,7 +45287,7 @@ function MediaEditAudioSection({
 }
 
 // src/mediaEdit/MediaEditTimingSection.tsx
-import { useCallback as useCallback60, useEffect as useEffect78, useRef as useRef72, useState as useState88 } from "react";
+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) {
@@ -45189,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();
@@ -45454,7 +45570,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
 }
 
 // src/mediaEdit/MediaEditModal.tsx
-import { Fragment as Fragment34, jsx as jsx102, 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" },
@@ -45489,16 +45605,16 @@ function RenderStatusText({
 }) {
   switch (status.state) {
     case "ready":
-      return /* @__PURE__ */ jsx102(Fragment34, { children: "Processed audio is in use." });
+      return /* @__PURE__ */ jsx102(Fragment35, { children: "Processed audio is in use." });
     case "queued":
-      return /* @__PURE__ */ jsx102(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,
         " ",
@@ -45518,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));
@@ -45586,7 +45702,7 @@ function MediaEditModal({ target, onClose }) {
                 }
               )
             ] }),
-            !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(Fragment34, { children: [
+            !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);
@@ -45948,7 +46064,7 @@ import {
   createMediaEditRenderManager,
   useProcessedAudio as useProcessedAudio4
 } from "@bendyline/squisq-video-react/media-edit";
-import { Fragment as Fragment35, jsx as jsx103, 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 = "",
@@ -46054,7 +46170,7 @@ 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;
@@ -46171,7 +46287,7 @@ function UseModeToolbarControls({
 }) {
   const printMode = usePrintMode();
   if (printMode.active) return /* @__PURE__ */ jsx103(PrintPreviewToolbar, {});
-  return /* @__PURE__ */ jsxs83(Fragment35, { children: [
+  return /* @__PURE__ */ jsxs83(Fragment36, { children: [
     /* @__PURE__ */ jsx103(PreviewToolbarControls, { summarizationDesigner }),
     /* @__PURE__ */ jsx103(PresentationModeControl, {}),
     allowPrint && /* @__PURE__ */ jsx103(PrintModeControl, {})
@@ -46289,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;
@@ -46355,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;
@@ -46385,7 +46501,7 @@ function EditorShellInner({
       cancelled = true;
     };
   }, [mediaProvider, mediaListRefreshKey]);
-  useEffect80(() => {
+  useEffect81(() => {
     if (showFilesWhenNotEmpty && mediaCount > 0) setShowFiles(true);
   }, [mediaCount, showFilesWhenNotEmpty]);
   const handleToggleFiles = useCallback63(() => {
@@ -46405,7 +46521,7 @@ function EditorShellInner({
     [insertionTarget]
   );
   const docBasenameRef = useRef75("document");
-  useEffect80(() => {
+  useEffect81(() => {
     let cancelled = false;
     docBasenameRef.current = "document";
     void resolveDocBasename(workspaceContainer).then((base) => {
@@ -46488,7 +46604,7 @@ function EditorShellInner({
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect80(() => {
+  useEffect81(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback63((e2) => {